From aa53aacd8e7de7426cf170b3e989d4578097c27c Mon Sep 17 00:00:00 2001 From: Matthew Oliveira Date: Thu, 4 Jan 2024 11:29:00 -0500 Subject: [PATCH] chore(file-uploader): update file-uploader to sb v7 (#11317) --- .../carbon-web-components/.storybook/main.ts | 2 + .../file-uploader/file-uploader-story.ts | 171 -------------- ...e-uploader-story.mdx => file-uploader.mdx} | 13 +- .../file-uploader/file-uploader.stories.ts | 217 ++++++++++++++++++ 4 files changed, 227 insertions(+), 176 deletions(-) delete mode 100644 web-components/packages/carbon-web-components/src/components/file-uploader/file-uploader-story.ts rename web-components/packages/carbon-web-components/src/components/file-uploader/{file-uploader-story.mdx => file-uploader.mdx} (83%) create mode 100644 web-components/packages/carbon-web-components/src/components/file-uploader/file-uploader.stories.ts diff --git a/web-components/packages/carbon-web-components/.storybook/main.ts b/web-components/packages/carbon-web-components/.storybook/main.ts index 14911c61884b..e67e7d2c0390 100644 --- a/web-components/packages/carbon-web-components/.storybook/main.ts +++ b/web-components/packages/carbon-web-components/.storybook/main.ts @@ -13,6 +13,8 @@ const stories = glob.sync( // add mdx/story files as they are being worked on '../src/**/link.mdx', '../src/**/link.stories.ts', + '../src/**/file-uploader.mdx', + '../src/**/file-uploader.stories.ts', ], { ignore: ['../src/**/docs/*.mdx'], diff --git a/web-components/packages/carbon-web-components/src/components/file-uploader/file-uploader-story.ts b/web-components/packages/carbon-web-components/src/components/file-uploader/file-uploader-story.ts deleted file mode 100644 index b27fe3561233..000000000000 --- a/web-components/packages/carbon-web-components/src/components/file-uploader/file-uploader-story.ts +++ /dev/null @@ -1,171 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2019, 2023 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import { html } from 'lit'; -import { action } from '@storybook/addon-actions'; -import { boolean, select } from '@storybook/addon-knobs'; -import { ifDefined } from 'lit/directives/if-defined.js'; -import { prefix } from '../../globals/settings'; -import './index'; -import './demo-file-uploader'; -import { FILE_UPLOADER_ITEM_STATE } from './file-uploader-item'; -import { BUTTON_KIND, BUTTON_SIZE } from '../button/button'; -import textNullable from '../../../.storybook/knob-text-nullable'; -import storyDocs from './file-uploader-story.mdx'; - -const kind = { - [`Primary button (${BUTTON_KIND.PRIMARY})`]: BUTTON_KIND.PRIMARY, - [`Secondary button (${BUTTON_KIND.SECONDARY})`]: BUTTON_KIND.SECONDARY, - [`Tertiary button (${BUTTON_KIND.TERTIARY})`]: BUTTON_KIND.TERTIARY, - [`Danger primary button (${BUTTON_KIND.DANGER_PRIMARY})`]: - BUTTON_KIND.DANGER_PRIMARY, - [`Danger button (${BUTTON_KIND.DANGER})`]: BUTTON_KIND.DANGER, - [`Ghost button (${BUTTON_KIND.GHOST})`]: BUTTON_KIND.GHOST, -}; - -const states = { - [`Upload in progress (${FILE_UPLOADER_ITEM_STATE.UPLOADING})`]: - FILE_UPLOADER_ITEM_STATE.UPLOADING, - [`Upload complete (${FILE_UPLOADER_ITEM_STATE.COMPLETE})`]: - FILE_UPLOADER_ITEM_STATE.COMPLETE, - [`Edit upload (${FILE_UPLOADER_ITEM_STATE.EDIT})`]: - FILE_UPLOADER_ITEM_STATE.EDIT, -}; - -const sizes = { - [`sm (${BUTTON_SIZE.SMALL})`]: BUTTON_SIZE.SMALL, - [`md (${BUTTON_SIZE.MEDIUM})`]: BUTTON_SIZE.MEDIUM, - [`lg (${BUTTON_SIZE.LARGE})`]: BUTTON_SIZE.LARGE, -}; - -export const Default = () => { - return html` - - - `; -}; - -Default.storyName = 'Default'; - -export const DragAndDropUploadContainerExampleApplication = () => { - return html` - - - `; -}; - -DragAndDropUploadContainerExampleApplication.storyName = - 'Drag And Drop Upload Container Example Application'; - -export const FileUploaderDropContainer = () => { - return html` - - Drag and drop files here or click to upload - - `; -}; - -FileUploaderDropContainer.storyName = 'File Uploader Drop Container'; - -export const FileUploaderItem = () => { - return html` - - README.md - - `; -}; - -FileUploaderItem.storyName = 'File Uploader Item'; - -export const Skeleton = () => { - return html` `; -}; - -export const Playground = (args) => { - const { - buttonKind, - buttonLabel, - disabled, - state, - iconDescription, - labelDescription, - labelTitle, - multiple, - onDelete, - onChange, - name, - size, - } = args?.[`${prefix}-file-uploader`] ?? {}; - - return html` - - - `; -}; - -Playground.parameters = { - knobs: { - [`${prefix}-file-uploader`]: () => ({ - buttonKind: select( - 'Button kind (button-kind)', - kind, - BUTTON_KIND.PRIMARY - ), - buttonLabel: textNullable('Button Label', 'Add file'), - disabled: boolean('Disabled (disabled)', false), - state: select( - 'File uploader item state (state)', - states, - FILE_UPLOADER_ITEM_STATE.UPLOADING - ), - iconDescription: textNullable( - 'Icon description (icon-description)', - 'Delete file' - ), - labelDescription: textNullable( - 'Label description (label-description)', - 'Max file size is 500mb. Only .jpg files are supported.' - ), - labelTitle: textNullable('Label title (label-title)', 'Upload files'), - name: textNullable('Input name (name)', ''), - onDelete: action('cds-file-uploader-item-deleted'), - onChange: action('cds-drop-container-changed'), - multiple: boolean('Multiple (multiple)', false), - size: select('Size (size)', sizes, BUTTON_SIZE.MEDIUM), - }), - }, -}; - -export default { - title: 'Components/File uploader', - parameters: { - ...storyDocs.parameters, - }, -}; diff --git a/web-components/packages/carbon-web-components/src/components/file-uploader/file-uploader-story.mdx b/web-components/packages/carbon-web-components/src/components/file-uploader/file-uploader.mdx similarity index 83% rename from web-components/packages/carbon-web-components/src/components/file-uploader/file-uploader-story.mdx rename to web-components/packages/carbon-web-components/src/components/file-uploader/file-uploader.mdx index 4ba9c357ca62..ec698c2ca0e7 100644 --- a/web-components/packages/carbon-web-components/src/components/file-uploader/file-uploader-story.mdx +++ b/web-components/packages/carbon-web-components/src/components/file-uploader/file-uploader.mdx @@ -1,5 +1,8 @@ -import { Props, Description } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Meta, Description } from '@storybook/addon-docs/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; +import * as FileUploaderStories from './file-uploader.stories'; + + # File uploader @@ -40,15 +43,15 @@ import '@carbon/web-components/es/components/file-uploader/index.js'; ## `` attributes, properties and events - + ## `` attributes, properties and events - + ## `` attributes, properties and events - + ## `` attributes, properties and events @@ -56,4 +59,4 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ``) and `false` means not setting the attribute (e.g. `` without `invalid` attribute). - + diff --git a/web-components/packages/carbon-web-components/src/components/file-uploader/file-uploader.stories.ts b/web-components/packages/carbon-web-components/src/components/file-uploader/file-uploader.stories.ts new file mode 100644 index 000000000000..1cf2ef8ea955 --- /dev/null +++ b/web-components/packages/carbon-web-components/src/components/file-uploader/file-uploader.stories.ts @@ -0,0 +1,217 @@ +/** + * @license + * + * Copyright IBM Corp. 2019, 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { html } from 'lit'; +import { ifDefined } from 'lit/directives/if-defined.js'; +import { prefix } from '../../globals/settings'; +import './index'; +import './demo-file-uploader'; +import { FILE_UPLOADER_ITEM_STATE } from './file-uploader-item'; +import { BUTTON_KIND, BUTTON_SIZE } from '../button/button'; +import storyDocs from './file-uploader.mdx'; + +const kind = { + [`Primary button (${BUTTON_KIND.PRIMARY})`]: BUTTON_KIND.PRIMARY, + [`Secondary button (${BUTTON_KIND.SECONDARY})`]: BUTTON_KIND.SECONDARY, + [`Tertiary button (${BUTTON_KIND.TERTIARY})`]: BUTTON_KIND.TERTIARY, + [`Danger primary button (${BUTTON_KIND.DANGER_PRIMARY})`]: + BUTTON_KIND.DANGER_PRIMARY, + [`Danger button (${BUTTON_KIND.DANGER})`]: BUTTON_KIND.DANGER, + [`Ghost button (${BUTTON_KIND.GHOST})`]: BUTTON_KIND.GHOST, +}; + +const states = { + [`Upload in progress (${FILE_UPLOADER_ITEM_STATE.UPLOADING})`]: + FILE_UPLOADER_ITEM_STATE.UPLOADING, + [`Upload complete (${FILE_UPLOADER_ITEM_STATE.COMPLETE})`]: + FILE_UPLOADER_ITEM_STATE.COMPLETE, + [`Edit upload (${FILE_UPLOADER_ITEM_STATE.EDIT})`]: + FILE_UPLOADER_ITEM_STATE.EDIT, +}; + +const sizes = { + [`sm (${BUTTON_SIZE.SMALL})`]: BUTTON_SIZE.SMALL, + [`md (${BUTTON_SIZE.MEDIUM})`]: BUTTON_SIZE.MEDIUM, + [`lg (${BUTTON_SIZE.LARGE})`]: BUTTON_SIZE.LARGE, +}; + +const args = { + buttonKind: BUTTON_KIND.PRIMARY, + buttonLabel: 'Add file', + disabled: false, + state: FILE_UPLOADER_ITEM_STATE.UPLOADING, + iconDescription: 'Delete file', + labelDescription: 'Max file size is 500kb. Only .jpg files are supported.', + labelTitle: 'Upload files', + name: '', + multiple: false, + size: BUTTON_SIZE.MEDIUM, +}; + +const argTypes = { + buttonKind: { + control: 'select', + options: kind, + description: + 'Specify the types of files that this input should be able to receive.', + }, + buttonLabel: { + control: 'text', + description: + 'Provide the label text to be read by screen readers when interacting with the <cds-file-uploader-button>.', + }, + disabled: { + control: 'boolean', + description: 'Specify whether file input is disabled.', + }, + state: { + control: 'select', + description: 'File uploader item state (state)', + options: states, + }, + iconDescription: { + control: 'text', + description: + 'Provide a description for the complete/close icon that can be read by screen readers.', + }, + labelDescription: { + control: 'text', + description: + 'Specify the description text of this <cds-file-uploader>.', + }, + labelTitle: { + control: 'text', + description: + 'Specify the title text of this <cds-file-uploader>.', + }, + name: { + control: 'text', + description: + 'Provide a name for the underlying <input> node.', + }, + multiple: { + control: 'boolean', + description: + 'Specify if the component should accept multiple files to upload.', + }, + size: { + control: 'select', + description: + 'Specify the size of the <cds-file-uploader-button>, from a list of available sizes.', + options: sizes, + }, + onDelete: { + action: `${prefix}-file-uploader-item-deleted`, + }, + onChange: { + action: `${prefix}-drop-container-changed`, + }, +}; + +export const Default = { + render: () => { + return html` + + + `; + }, +}; + +export const DragAndDropUploadContainerExampleApplication = { + render: () => { + return html` + + + `; + }, +}; + +export const FileUploaderDropContainer = { + render: () => { + return html` + + Drag and drop files here or click to upload + + `; + }, +}; + +export const FileUploaderItem = { + render: () => { + return html` + + README.md + + `; + }, +}; + +export const Skeleton = { + render: () => { + return html` `; + }, +}; + +export const Playground = { + args, + argTypes, + render: (args) => { + const { + buttonKind, + buttonLabel, + disabled, + state, + iconDescription, + labelDescription, + labelTitle, + multiple, + onDelete, + onChange, + name, + size, + } = args ?? {}; + + return html` + + + `; + }, +}; + +const meta = { + title: 'Components/File uploader', + parameters: { + docs: { + page: storyDocs, + }, + }, +}; + +export default meta;