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;