diff --git a/packages/react/src/components/AILabel/AILabel.stories.js b/packages/react/src/components/AILabel/AILabel.stories.js index 19fabd2c976b..8491c87bbe29 100644 --- a/packages/react/src/components/AILabel/AILabel.stories.js +++ b/packages/react/src/components/AILabel/AILabel.stories.js @@ -17,6 +17,16 @@ import './ailabel-story.scss'; export default { title: 'Components/AILabel', component: AILabel, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, + args: { + theme: 'g10', + }, parameters: { docs: { page: mdx, @@ -293,6 +303,11 @@ ExplainabilityPopover.argTypes = { }, description: 'Playground only - toggle to show the callout toolbar', }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, align: { options: [ 'top', diff --git a/packages/react/src/components/AISkeleton/AISkeletonIcon.stories.js b/packages/react/src/components/AISkeleton/AISkeletonIcon.stories.js index db8afcebf56a..ac22b62d44c6 100644 --- a/packages/react/src/components/AISkeleton/AISkeletonIcon.stories.js +++ b/packages/react/src/components/AISkeleton/AISkeletonIcon.stories.js @@ -20,6 +20,16 @@ export default { page: mdx, }, }, + args: { + theme: 'g10', + }, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, }; const propsSkeleton = { diff --git a/packages/react/src/components/Accordion/Accordion.stories.js b/packages/react/src/components/Accordion/Accordion.stories.js index 23d12a862955..8fffc251070d 100644 --- a/packages/react/src/components/Accordion/Accordion.stories.js +++ b/packages/react/src/components/Accordion/Accordion.stories.js @@ -27,6 +27,9 @@ export default { page: mdx, }, }, + args: { + theme: 'g10', + }, }; const sharedArgTypes = { @@ -54,6 +57,11 @@ const sharedArgTypes = { options: ['sm', 'md', 'lg'], control: { type: 'select' }, }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, }; export const Default = (args) => ( diff --git a/packages/react/src/components/AspectRatio/AspectRatio.stories.js b/packages/react/src/components/AspectRatio/AspectRatio.stories.js index c69be9d1ea2f..b14fc52bffbc 100644 --- a/packages/react/src/components/AspectRatio/AspectRatio.stories.js +++ b/packages/react/src/components/AspectRatio/AspectRatio.stories.js @@ -27,6 +27,16 @@ export default { page: mdx, }, }, + args: { + theme: 'g10', + }, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, }; export const Default = (args) => { @@ -67,4 +77,9 @@ Default.argTypes = { category: 'AspectRatio', }, }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, }; diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.stories.js b/packages/react/src/components/Breadcrumb/Breadcrumb.stories.js index 875e48e7fafb..bf5c5c621c93 100644 --- a/packages/react/src/components/Breadcrumb/Breadcrumb.stories.js +++ b/packages/react/src/components/Breadcrumb/Breadcrumb.stories.js @@ -25,6 +25,9 @@ export default { page: mdx, }, }, + args: { + theme: 'g10', + }, }; const sharedArgTypes = { @@ -32,6 +35,11 @@ const sharedArgTypes = { options: ['sm', 'md'], control: { type: 'select' }, }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, }; export const Default = (args) => ( diff --git a/packages/react/src/components/Button/Button.stories.js b/packages/react/src/components/Button/Button.stories.js index ed81cc34efa4..795967201b46 100644 --- a/packages/react/src/components/Button/Button.stories.js +++ b/packages/react/src/components/Button/Button.stories.js @@ -47,6 +47,14 @@ export default { as: { control: false, }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, + args: { + theme: 'g10', }, parameters: { docs: { diff --git a/packages/react/src/components/ChatButton/ChatButton.stories.js b/packages/react/src/components/ChatButton/ChatButton.stories.js index 61f8a4ea477b..9cd6b0bd231b 100644 --- a/packages/react/src/components/ChatButton/ChatButton.stories.js +++ b/packages/react/src/components/ChatButton/ChatButton.stories.js @@ -14,6 +14,16 @@ export default { title: 'Preview/preview__ChatButton', component: ChatButton, parameters: {}, + args: { + theme: 'g10', + }, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, }; export const Default = () => ( diff --git a/packages/react/src/components/Checkbox/Checkbox.stories.js b/packages/react/src/components/Checkbox/Checkbox.stories.js index 3acaaf3e5607..da98b60e6d40 100644 --- a/packages/react/src/components/Checkbox/Checkbox.stories.js +++ b/packages/react/src/components/Checkbox/Checkbox.stories.js @@ -46,6 +46,7 @@ const sharedArgs = { invalidText: 'Invalid message goes here', warn: false, warnText: 'Warning message goes here', + theme: 'g10', }; const sharedArgTypes = { @@ -99,6 +100,11 @@ const sharedArgTypes = { control: 'select', options: ['horizontal', 'vertical'], }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, }; export const Default = (args) => ( diff --git a/packages/react/src/components/ClassPrefix/ClassPrefix.stories.js b/packages/react/src/components/ClassPrefix/ClassPrefix.stories.js index 26ca2c9e37ab..244e206265f3 100644 --- a/packages/react/src/components/ClassPrefix/ClassPrefix.stories.js +++ b/packages/react/src/components/ClassPrefix/ClassPrefix.stories.js @@ -13,6 +13,16 @@ import mdx from './ClassPrefix.mdx'; export default { title: 'Components/ClassPrefix', component: ClassPrefix, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, + args: { + theme: 'g10', + }, parameters: { docs: { page: mdx, diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.stories.js b/packages/react/src/components/CodeSnippet/CodeSnippet.stories.js index 4bf2d3e2ab59..1db31c3a35ee 100644 --- a/packages/react/src/components/CodeSnippet/CodeSnippet.stories.js +++ b/packages/react/src/components/CodeSnippet/CodeSnippet.stories.js @@ -26,6 +26,14 @@ export default { disable: true, }, }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, + args: { + theme: 'g10', }, }; diff --git a/packages/react/src/components/ComboBox/ComboBox.stories.js b/packages/react/src/components/ComboBox/ComboBox.stories.js index 154534a6ad64..aa5acac679d4 100644 --- a/packages/react/src/components/ComboBox/ComboBox.stories.js +++ b/packages/react/src/components/ComboBox/ComboBox.stories.js @@ -46,6 +46,11 @@ export default { title: 'Components/ComboBox', component: ComboBox, argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, size: { options: ['sm', 'md', 'lg'], control: { type: 'select' }, @@ -57,6 +62,9 @@ export default { }, onChange: { action: 'onChange' }, }, + args: { + theme: 'g10', + }, parameters: { docs: { page: mdx, diff --git a/packages/react/src/components/ComboButton/ComboButton.stories.js b/packages/react/src/components/ComboButton/ComboButton.stories.js index e69bc403b6bc..52b09762fe1f 100644 --- a/packages/react/src/components/ComboButton/ComboButton.stories.js +++ b/packages/react/src/components/ComboButton/ComboButton.stories.js @@ -21,6 +21,16 @@ export default { MenuItem, MenuItemDivider, }, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, + args: { + theme: 'g10', + }, parameters: { docs: { page: mdx, diff --git a/packages/react/src/components/ComposedModal/ComposedModal.stories.js b/packages/react/src/components/ComposedModal/ComposedModal.stories.js index 114ad3c45e20..3820f31b6120 100644 --- a/packages/react/src/components/ComposedModal/ComposedModal.stories.js +++ b/packages/react/src/components/ComposedModal/ComposedModal.stories.js @@ -36,6 +36,16 @@ export default { ModalBody, ModalFooter, }, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, + args: { + theme: 'g10', + }, parameters: { docs: { page: mdx, diff --git a/packages/react/src/components/ContainedList/ContainedList.stories.js b/packages/react/src/components/ContainedList/ContainedList.stories.js index 7124626f9f98..36945670c9a0 100644 --- a/packages/react/src/components/ContainedList/ContainedList.stories.js +++ b/packages/react/src/components/ContainedList/ContainedList.stories.js @@ -34,6 +34,16 @@ export default { title: 'Components/ContainedList', component: ContainedList, subcomponents: { ContainedListItem }, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, + args: { + theme: 'g10', + }, parameters: { docs: { page: mdx, diff --git a/packages/react/src/components/ContentSwitcher/ContentSwitcher.stories.js b/packages/react/src/components/ContentSwitcher/ContentSwitcher.stories.js index 547d96aa5885..82cc90a28344 100644 --- a/packages/react/src/components/ContentSwitcher/ContentSwitcher.stories.js +++ b/packages/react/src/components/ContentSwitcher/ContentSwitcher.stories.js @@ -31,6 +31,14 @@ export default { disable: true, }, }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, + args: { + theme: 'g10', }, parameters: { docs: { diff --git a/packages/react/src/components/ContextMenu/useContextMenu.stories.js b/packages/react/src/components/ContextMenu/useContextMenu.stories.js index 48e99f87df81..02742514b276 100644 --- a/packages/react/src/components/ContextMenu/useContextMenu.stories.js +++ b/packages/react/src/components/ContextMenu/useContextMenu.stories.js @@ -26,6 +26,16 @@ export default { page: mdx, }, }, + args: { + theme: 'g10', + }, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, }; const Text = () => ( diff --git a/packages/react/src/components/CopyButton/CopyButton.stories.js b/packages/react/src/components/CopyButton/CopyButton.stories.js index 84b7f5d2f330..e51e53802e85 100644 --- a/packages/react/src/components/CopyButton/CopyButton.stories.js +++ b/packages/react/src/components/CopyButton/CopyButton.stories.js @@ -13,6 +13,16 @@ import mdx from './CopyButton.mdx'; export default { title: 'Components/CopyButton', component: CopyButton, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, + args: { + theme: 'g10', + }, parameters: { docs: { page: mdx, diff --git a/packages/react/src/components/DataTable/stories/DataTable-basic.stories.js b/packages/react/src/components/DataTable/stories/DataTable-basic.stories.js index fa6c4fda050f..6c91151ccfa4 100644 --- a/packages/react/src/components/DataTable/stories/DataTable-basic.stories.js +++ b/packages/react/src/components/DataTable/stories/DataTable-basic.stories.js @@ -20,26 +20,6 @@ const { import mdx from '../DataTable.mdx'; import './datatable-story.scss'; - -export default { - title: 'Components/DataTable/Basic', - component: DataTable, - subcomponents: { - TableContainer, - Table, - TableHead, - TableRow, - TableHeader, - TableBody, - TableCell, - }, - parameters: { - docs: { - page: mdx, - }, - }, -}; - const sharedArgTypes = { size: { control: 'select', @@ -59,6 +39,11 @@ const sharedArgTypes = { control: 'boolean', description: 'Add zebra striping to rows', }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, }; const sharedArgs = { @@ -66,8 +51,29 @@ const sharedArgs = { stickyHeader: false, useStaticWidth: false, useZebraStyles: false, + theme: 'g10', }; +export default { + title: 'Components/DataTable/Basic', + component: DataTable, + subcomponents: { + TableContainer, + Table, + TableHead, + TableRow, + TableHeader, + TableBody, + TableCell, + }, + parameters: { + docs: { + page: mdx, + }, + }, + args: sharedArgs, + argTypes: sharedArgTypes, +}; export const Default = (args) => { const rows = [ { diff --git a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.stories.js b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.stories.js index b67e8e0c7fe3..2cafc63d999b 100644 --- a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.stories.js +++ b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.stories.js @@ -21,6 +21,16 @@ const props = () => ({ export default { title: 'Components/DataTable/Skeleton', component: DataTableSkeleton, + args: { + theme: 'g10', + }, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, }; export const Skeleton = (args) => { diff --git a/packages/react/src/components/DatePicker/DatePicker.stories.js b/packages/react/src/components/DatePicker/DatePicker.stories.js index 934a40928c44..1640117203ce 100644 --- a/packages/react/src/components/DatePicker/DatePicker.stories.js +++ b/packages/react/src/components/DatePicker/DatePicker.stories.js @@ -49,6 +49,14 @@ export default { disable: true, }, }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, + args: { + theme: 'g10', }, }; diff --git a/packages/react/src/components/Dropdown/Dropdown.stories.js b/packages/react/src/components/Dropdown/Dropdown.stories.js index a7c072089f6a..c00ac3eac5f9 100644 --- a/packages/react/src/components/Dropdown/Dropdown.stories.js +++ b/packages/react/src/components/Dropdown/Dropdown.stories.js @@ -93,6 +93,7 @@ const sharedArgs = { warnText: 'please notice the warning', titleText: 'This is an example title', type: 'default', + theme: 'g10', }; const sharedArgTypes = { @@ -149,6 +150,11 @@ const sharedArgTypes = { control: { type: 'select' }, options: ['default', 'inline'], }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, }; export const Default = (args) => { diff --git a/packages/react/src/components/ErrorBoundary/ErrorBoundary.stories.js b/packages/react/src/components/ErrorBoundary/ErrorBoundary.stories.js index 601af2764163..0afb2f20b690 100644 --- a/packages/react/src/components/ErrorBoundary/ErrorBoundary.stories.js +++ b/packages/react/src/components/ErrorBoundary/ErrorBoundary.stories.js @@ -14,6 +14,16 @@ import mdx from './ErrorBoundary.mdx'; export default { title: 'Components/ErrorBoundary', component: ErrorBoundary, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, + args: { + theme: 'g10', + }, parameters: { docs: { page: mdx, diff --git a/packages/react/src/components/FileUploader/FileUploader.stories.js b/packages/react/src/components/FileUploader/FileUploader.stories.js index 111ed9cfc097..429cc0d97a48 100644 --- a/packages/react/src/components/FileUploader/FileUploader.stories.js +++ b/packages/react/src/components/FileUploader/FileUploader.stories.js @@ -31,6 +31,16 @@ export default { FileUploaderItem, FileUploaderDropContainer, }, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, + args: { + theme: 'g10', + }, parameters: { docs: { page: mdx, @@ -192,6 +202,10 @@ Default.argTypes = { control: { type: 'select' }, options: ['sm', 'md', 'lg'], }, + theme: { + control: { type: 'select' }, + options: ['white', 'g10', 'g90', 'g100'], + }, }; Default.parameters = { diff --git a/packages/react/src/components/FluidComboBox/FluidComboBox.stories.js b/packages/react/src/components/FluidComboBox/FluidComboBox.stories.js index bf93e1b46708..f2eefda367a1 100644 --- a/packages/react/src/components/FluidComboBox/FluidComboBox.stories.js +++ b/packages/react/src/components/FluidComboBox/FluidComboBox.stories.js @@ -18,48 +18,6 @@ import { IconButton } from '../IconButton'; import { Button } from '../Button'; import { Information, View, FolderOpen, Folders } from '@carbon/icons-react'; import mdx from './FluidComboBox.mdx'; - -export default { - title: 'Components/Fluid Components/FluidComboBox', - component: FluidComboBox, - parameters: { - docs: { - page: mdx, - }, - }, - subcomponents: { - FluidComboBoxSkeleton, - }, -}; - -const items = [ - { - id: 'option-0', - text: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.', - }, - { - id: 'option-1', - text: 'Option 1', - }, - { - id: 'option-2', - text: 'Option 2', - }, - { - id: 'option-3', - text: 'Option 3 - a disabled item', - disabled: true, - }, - { - id: 'option-4', - text: 'Option 4', - }, - { - id: 'option-5', - text: 'Option 5', - }, -]; - const sharedArgTypes = { className: { control: { @@ -106,8 +64,68 @@ const sharedArgTypes = { type: 'text', }, }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, +}; +export default { + title: 'Components/Fluid Components/FluidComboBox', + component: FluidComboBox, + parameters: { + docs: { + page: mdx, + }, + }, + subcomponents: { + FluidComboBoxSkeleton, + }, + args: { + theme: 'g10', + }, + argTypes: { + ...sharedArgTypes, + light: { + table: { + disable: true, + }, + }, + slug: { + table: { + disable: true, + }, + }, + }, }; +const items = [ + { + id: 'option-0', + text: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.', + }, + { + id: 'option-1', + text: 'Option 1', + }, + { + id: 'option-2', + text: 'Option 2', + }, + { + id: 'option-3', + text: 'Option 3 - a disabled item', + disabled: true, + }, + { + id: 'option-4', + text: 'Option 4', + }, + { + id: 'option-5', + text: 'Option 5', + }, +]; export const Default = (args) => (
(
( diff --git a/packages/react/src/components/FluidMultiSelect/FluidMultiSelect.stories.js b/packages/react/src/components/FluidMultiSelect/FluidMultiSelect.stories.js index 10ba3b3e5e86..117f8c1a2cff 100644 --- a/packages/react/src/components/FluidMultiSelect/FluidMultiSelect.stories.js +++ b/packages/react/src/components/FluidMultiSelect/FluidMultiSelect.stories.js @@ -23,7 +23,63 @@ import { IconButton } from '../IconButton'; import { Button } from '../Button'; import { Information, View, FolderOpen, Folders } from '@carbon/icons-react'; import mdx from './FluidMultiSelect.mdx'; - +const sharedArgTypes = { + className: { + control: { + type: 'text', + }, + }, + isCondensed: { + control: { + type: 'boolean', + }, + }, + isFilterable: { + control: { + type: 'boolean', + }, + }, + disabled: { + control: { + type: 'boolean', + }, + }, + invalid: { + control: { + type: 'boolean', + }, + }, + invalidText: { + control: { + type: 'text', + }, + }, + label: { + control: { + type: 'text', + }, + }, + titleText: { + control: { + type: 'text', + }, + }, + warn: { + control: { + type: 'boolean', + }, + }, + warnText: { + control: { + type: 'text', + }, + }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, +}; export default { title: 'Components/Fluid Components/FluidMultiSelect', component: FluidMultiSelect, @@ -35,6 +91,17 @@ export default { subcomponents: { FluidMultiSelectSkeleton, }, + args: { + theme: 'g10', + }, + argTypes: { + ...sharedArgTypes, + initialSelectedItems: { + table: { + disable: true, + }, + }, + }, }; const items = [ @@ -79,59 +146,6 @@ export const Default = (args) => (
); -const sharedArgTypes = { - className: { - control: { - type: 'text', - }, - }, - isCondensed: { - control: { - type: 'boolean', - }, - }, - isFilterable: { - control: { - type: 'boolean', - }, - }, - disabled: { - control: { - type: 'boolean', - }, - }, - invalid: { - control: { - type: 'boolean', - }, - }, - invalidText: { - control: { - type: 'text', - }, - }, - label: { - control: { - type: 'text', - }, - }, - titleText: { - control: { - type: 'text', - }, - }, - warn: { - control: { - type: 'boolean', - }, - }, - warnText: { - control: { - type: 'text', - }, - }, -}; - Default.args = { defaultWidth: 400, className: 'test-class', diff --git a/packages/react/src/components/FluidNumberInput/FluidNumberInput.stories.js b/packages/react/src/components/FluidNumberInput/FluidNumberInput.stories.js index c6377ac02b9b..6929111259ae 100644 --- a/packages/react/src/components/FluidNumberInput/FluidNumberInput.stories.js +++ b/packages/react/src/components/FluidNumberInput/FluidNumberInput.stories.js @@ -27,6 +27,16 @@ export default { subcomponents: { FluidNumberInputSkeleton, }, + args: { + theme: 'g10', + }, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, }; const ToggleTip = ( @@ -106,6 +116,11 @@ Default.argTypes = { type: 'text', }, }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, }; export const Skeleton = () => ( diff --git a/packages/react/src/components/FluidSearch/FluidSearch.stories.js b/packages/react/src/components/FluidSearch/FluidSearch.stories.js index ff1344e050d7..9c1a25e5004f 100644 --- a/packages/react/src/components/FluidSearch/FluidSearch.stories.js +++ b/packages/react/src/components/FluidSearch/FluidSearch.stories.js @@ -23,6 +23,16 @@ export default { subcomponents: { FluidSearchSkeleton, }, + args: { + theme: 'g10', + }, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, }; export const Skeleton = () => ( @@ -74,4 +84,9 @@ Default.argTypes = { type: 'text', }, }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, }; diff --git a/packages/react/src/components/FluidSelect/FluidSelect.stories.js b/packages/react/src/components/FluidSelect/FluidSelect.stories.js index b4ba75813cb9..ced369612253 100644 --- a/packages/react/src/components/FluidSelect/FluidSelect.stories.js +++ b/packages/react/src/components/FluidSelect/FluidSelect.stories.js @@ -19,30 +19,6 @@ import { AILabel, AILabelContent, AILabelActions } from '../AILabel'; import { IconButton } from '../IconButton'; import { Information, View, FolderOpen, Folders } from '@carbon/icons-react'; import mdx from './FluidSelect.mdx'; - -export default { - title: 'Components/Fluid Components/FluidSelect', - component: FluidSelect, - subcomponents: { - FluidSelectSkeleton, - }, - parameters: { - docs: { - page: mdx, - }, - controls: { - exclude: ['defaultValue', 'id'], - }, - }, - argTypes: { - light: { - table: { - disable: true, - }, - }, - }, -}; - const sharedArgTypes = { className: { control: { @@ -79,6 +55,37 @@ const sharedArgTypes = { type: 'text', }, }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, +}; +export default { + title: 'Components/Fluid Components/FluidSelect', + component: FluidSelect, + subcomponents: { + FluidSelectSkeleton, + }, + parameters: { + docs: { + page: mdx, + }, + controls: { + exclude: ['defaultValue', 'id'], + }, + }, + args: { + theme: 'g10', + }, + argTypes: { + ...sharedArgTypes, + light: { + table: { + disable: true, + }, + }, + }, }; const ToggleTip = ( diff --git a/packages/react/src/components/FluidTextArea/FluidTextArea.stories.js b/packages/react/src/components/FluidTextArea/FluidTextArea.stories.js index d29db958025e..af8e0358a4f8 100644 --- a/packages/react/src/components/FluidTextArea/FluidTextArea.stories.js +++ b/packages/react/src/components/FluidTextArea/FluidTextArea.stories.js @@ -19,40 +19,6 @@ import { } from '../Toggletip'; import { Information } from '@carbon/icons-react'; import mdx from './FluidTextArea.mdx'; - -export default { - title: 'Components/Fluid Components/FluidTextArea', - component: FluidTextArea, - parameters: { - docs: { - page: mdx, - }, - controls: { - exclude: ['id', 'value', 'defaultValue'], - }, - }, - subcomponents: { - FluidTextAreaSkeleton, - }, - argTypes: { - hideLabel: { - table: { - disable: true, - }, - }, - helperText: { - table: { - disable: true, - }, - }, - light: { - table: { - disable: true, - }, - }, - }, -}; - const sharedArgTypes = { className: { control: { @@ -104,6 +70,47 @@ const sharedArgTypes = { type: 'text', }, }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, +}; +export default { + title: 'Components/Fluid Components/FluidTextArea', + component: FluidTextArea, + parameters: { + docs: { + page: mdx, + }, + controls: { + exclude: ['id', 'value', 'defaultValue'], + }, + }, + subcomponents: { + FluidTextAreaSkeleton, + }, + args: { + theme: 'g10', + }, + argTypes: { + ...sharedArgTypes, + hideLabel: { + table: { + disable: true, + }, + }, + helperText: { + table: { + disable: true, + }, + }, + light: { + table: { + disable: true, + }, + }, + }, }; export const Default = (args) => ( diff --git a/packages/react/src/components/FluidTextInput/FluidTextInput.stories.js b/packages/react/src/components/FluidTextInput/FluidTextInput.stories.js index 08f7078934d7..2bcfb247f53e 100644 --- a/packages/react/src/components/FluidTextInput/FluidTextInput.stories.js +++ b/packages/react/src/components/FluidTextInput/FluidTextInput.stories.js @@ -32,6 +32,16 @@ export default { subcomponents: { FluidTextInputSkeleton, }, + args: { + theme: 'g10', + }, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, }; const ToggleTip = ( @@ -121,6 +131,11 @@ Default.argTypes = { type: 'text', }, }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, }; export const DefaultWithToggletip = () => ( diff --git a/packages/react/src/components/FluidTimePicker/FluidTimePicker.stories.js b/packages/react/src/components/FluidTimePicker/FluidTimePicker.stories.js index 8875e4bc41c9..3b725ff3f52c 100644 --- a/packages/react/src/components/FluidTimePicker/FluidTimePicker.stories.js +++ b/packages/react/src/components/FluidTimePicker/FluidTimePicker.stories.js @@ -31,6 +31,16 @@ export default { FluidTimePickerSelect, FluidTimePickerSkeleton, }, + args: { + theme: 'g10', + }, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, }; const ToggleTip = ( @@ -118,4 +128,9 @@ Default.argTypes = { warnText: { control: { type: 'text' }, }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, }; diff --git a/packages/react/src/components/Form/Form.stories.js b/packages/react/src/components/Form/Form.stories.js index 4f469c68ab4c..2487dc80cb60 100644 --- a/packages/react/src/components/Form/Form.stories.js +++ b/packages/react/src/components/Form/Form.stories.js @@ -95,6 +95,16 @@ export default { page: mdx, }, }, + args: { + theme: 'g10', + }, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, }; export const Default = () => { @@ -529,4 +539,9 @@ withAILabel.argTypes = { category: 'AILabel', }, }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, }; diff --git a/packages/react/src/components/FormGroup/FormGroup.stories.js b/packages/react/src/components/FormGroup/FormGroup.stories.js index 8ff061d291dc..863c44b31718 100644 --- a/packages/react/src/components/FormGroup/FormGroup.stories.js +++ b/packages/react/src/components/FormGroup/FormGroup.stories.js @@ -18,6 +18,16 @@ import mdx from './FormGroup.mdx'; export default { title: 'Components/FormGroup', component: FormGroup, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, + args: { + theme: 'g10', + }, parameters: { docs: { page: mdx, diff --git a/packages/react/src/components/FormLabel/FormLabel.stories.js b/packages/react/src/components/FormLabel/FormLabel.stories.js index 792110b98071..a4eeaeb342c2 100644 --- a/packages/react/src/components/FormLabel/FormLabel.stories.js +++ b/packages/react/src/components/FormLabel/FormLabel.stories.js @@ -24,6 +24,16 @@ export default { page: mdx, }, }, + args: { + theme: 'g10', + }, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, }; export const Default = () => { diff --git a/packages/react/src/components/Grid/Grid.stories.js b/packages/react/src/components/Grid/Grid.stories.js index fe6ab1fcb1f5..c8520c6b9891 100644 --- a/packages/react/src/components/Grid/Grid.stories.js +++ b/packages/react/src/components/Grid/Grid.stories.js @@ -10,13 +10,55 @@ import './Grid.stories.scss'; import React from 'react'; import { Grid, Column, ColumnHang, GridSettings } from '../Grid'; import mdx from './Grid.mdx'; +const defaultArgs = { + as: 'div', + fullWidth: false, + narrow: false, + condensed: false, + theme: 'g10', +}; +const defaultArgTypes = { + as: { + control: { + type: 'text', + }, + }, + children: { + control: false, + }, + className: { + control: false, + }, + fullWidth: { + control: { + type: 'boolean', + }, + }, + narrow: { + control: { + type: 'boolean', + }, + }, + condensed: { + control: { + type: 'boolean', + }, + }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, +}; export default { title: 'Elements/Grid', component: Grid, subcomponents: { Column, }, + argTypes: defaultArgTypes, + args: defaultArgs, parameters: { controls: { hideNoControlsWarning: true, @@ -49,42 +91,6 @@ export const Default = (args) => { ); }; -Default.args = { - as: 'div', - fullWidth: false, - narrow: false, - condensed: false, -}; - -Default.argTypes = { - as: { - control: { - type: 'text', - }, - }, - children: { - control: false, - }, - className: { - control: false, - }, - fullWidth: { - control: { - type: 'boolean', - }, - }, - narrow: { - control: { - type: 'boolean', - }, - }, - condensed: { - control: { - type: 'boolean', - }, - }, -}; - export const Narrow = () => { return (
diff --git a/packages/react/src/components/Heading/Heading.stories.js b/packages/react/src/components/Heading/Heading.stories.js index 84ecbcf99fdc..b3e240c70b7c 100644 --- a/packages/react/src/components/Heading/Heading.stories.js +++ b/packages/react/src/components/Heading/Heading.stories.js @@ -20,6 +20,16 @@ export default { page: mdx, }, }, + args: { + theme: 'g10', + }, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, }; export const Default = () => { diff --git a/packages/react/src/components/HideAtBreakpoint/HideAtBreakpoint.stories.js b/packages/react/src/components/HideAtBreakpoint/HideAtBreakpoint.stories.js index 9854d5bef37e..bb8ddaec0324 100644 --- a/packages/react/src/components/HideAtBreakpoint/HideAtBreakpoint.stories.js +++ b/packages/react/src/components/HideAtBreakpoint/HideAtBreakpoint.stories.js @@ -17,6 +17,16 @@ export default { page: mdx, }, }, + args: { + theme: 'g10', + }, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, }; export const HideAtBreakpoint = () => { diff --git a/packages/react/src/components/IconButton/IconButton.stories.js b/packages/react/src/components/IconButton/IconButton.stories.js index a2ca7e744eda..bd6bf348b817 100644 --- a/packages/react/src/components/IconButton/IconButton.stories.js +++ b/packages/react/src/components/IconButton/IconButton.stories.js @@ -23,6 +23,16 @@ export default { }, layout: 'centered', }, + args: { + theme: 'g10', + }, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, }; export const Default = (args) => { @@ -79,6 +89,11 @@ Default.argTypes = { }, options: ['primary', 'secondary', 'ghost', 'tertiary'], }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, }; export const withBadgeIndicator = (args) => { @@ -104,3 +119,10 @@ withBadgeIndicator.parameters = { exclude: ['size', 'kind'], }, }; +withBadgeIndicator.argTypes = { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, +}; diff --git a/packages/react/src/components/IconIndicator/IconIndicator.stories.js b/packages/react/src/components/IconIndicator/IconIndicator.stories.js index 5a9a9d75374d..512cc0ed073a 100644 --- a/packages/react/src/components/IconIndicator/IconIndicator.stories.js +++ b/packages/react/src/components/IconIndicator/IconIndicator.stories.js @@ -9,17 +9,6 @@ import React from 'react'; import IconIndicator from '.'; import { IconIndicatorKinds } from './index'; import mdx from './IconIndicator.mdx'; - -export default { - title: 'Preview/StatusIndicators/preview__IconIndicator', - component: IconIndicator, - parameters: { - docs: { - page: mdx, - }, - }, -}; - const sharedArgTypes = { label: { control: { @@ -35,6 +24,26 @@ const sharedArgTypes = { }, options: [16, 20], }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, +}; +export default { + title: 'Preview/StatusIndicators/preview__IconIndicator', + component: IconIndicator, + parameters: { + docs: { + page: mdx, + }, + }, + args: { + theme: 'g10', + }, + argTypes: { + ...sharedArgTypes, + }, }; export const Default = (props) => { diff --git a/packages/react/src/components/Icons/Icons.stories.js b/packages/react/src/components/Icons/Icons.stories.js index f5128bd2df4f..fa8388b5c3ce 100644 --- a/packages/react/src/components/Icons/Icons.stories.js +++ b/packages/react/src/components/Icons/Icons.stories.js @@ -19,6 +19,16 @@ export default { page: mdx, }, }, + args: { + theme: 'g10', + }, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, decorators: [ (Story, { args }) => { return ( diff --git a/packages/react/src/components/IdPrefix/IdPrefix.stories.js b/packages/react/src/components/IdPrefix/IdPrefix.stories.js index f41d86ebaa97..e22e10bc6117 100644 --- a/packages/react/src/components/IdPrefix/IdPrefix.stories.js +++ b/packages/react/src/components/IdPrefix/IdPrefix.stories.js @@ -18,6 +18,16 @@ export default { page: mdx, }, }, + args: { + theme: 'g10', + }, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, }; export const Default = () => { diff --git a/packages/react/src/components/InlineLoading/InlineLoading.stories.js b/packages/react/src/components/InlineLoading/InlineLoading.stories.js index dcc5685a16f5..1c1cbb5cc090 100644 --- a/packages/react/src/components/InlineLoading/InlineLoading.stories.js +++ b/packages/react/src/components/InlineLoading/InlineLoading.stories.js @@ -10,9 +10,33 @@ import Button from '../Button'; import InlineLoading from '.'; import mdx from './InlineLoading.mdx'; +const defaultArgs = { + description: 'Loading', + iconDescription: 'Loading data...', + theme: 'g10', +}; +const defaultArgTypes = { + description: { + control: { + type: 'text', + }, + }, + iconDescription: { + control: { + type: 'text', + }, + }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, +}; export default { title: 'Components/InlineLoading', component: InlineLoading, + argTypes: defaultArgTypes, + args: defaultArgs, parameters: { docs: { page: mdx, @@ -79,26 +103,8 @@ export const UxExample = () => { export const Default = (args) => ; -Default.args = { - description: 'Loading', - iconDescription: 'Loading data...', -}; - Default.parameters = { controls: { exclude: ['successDelay'], }, }; - -Default.argTypes = { - description: { - control: { - type: 'text', - }, - }, - iconDescription: { - control: { - type: 'text', - }, - }, -}; diff --git a/packages/react/src/components/Layer/Layer.stories.js b/packages/react/src/components/Layer/Layer.stories.js index af9efb2a3e72..92edfea1bc5c 100644 --- a/packages/react/src/components/Layer/Layer.stories.js +++ b/packages/react/src/components/Layer/Layer.stories.js @@ -23,6 +23,14 @@ export default { }, args: { level: 0, + theme: 'g10', + }, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, }, }; @@ -81,7 +89,13 @@ export const CustomLevel = (args) => { CustomLevel.args = { level: 2, }; - +CustomLevel.argTypes = { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, +}; export const UseLayer = () => { function ExampleComponent() { const { level } = useLayer(); diff --git a/packages/react/src/components/Layout/Layout.stories.js b/packages/react/src/components/Layout/Layout.stories.js index 1a93911eb15a..702b7e35de76 100644 --- a/packages/react/src/components/Layout/Layout.stories.js +++ b/packages/react/src/components/Layout/Layout.stories.js @@ -27,6 +27,16 @@ export default { page: mdx, }, }, + args: { + theme: 'g10', + }, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, }; const Demo = () => ( diff --git a/packages/react/src/components/Link/Link.stories.js b/packages/react/src/components/Link/Link.stories.js index f1836bf10c12..9d6c3deae95b 100644 --- a/packages/react/src/components/Link/Link.stories.js +++ b/packages/react/src/components/Link/Link.stories.js @@ -22,6 +22,7 @@ export default { disabled: false, inline: false, visited: false, + theme: 'g10', }, argTypes: { renderIcon: { @@ -29,6 +30,11 @@ export default { disable: true, }, }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, }, }; diff --git a/packages/react/src/components/Loading/Loading.stories.js b/packages/react/src/components/Loading/Loading.stories.js index 2ca9bf2d50ef..cc3d7e58ed2b 100644 --- a/packages/react/src/components/Loading/Loading.stories.js +++ b/packages/react/src/components/Loading/Loading.stories.js @@ -8,33 +8,15 @@ import React from 'react'; import Loading from '.'; import mdx from './Loading.mdx'; - -export default { - title: 'Components/Loading', - component: Loading, - parameters: { - docs: { - page: mdx, - }, - // The id prop is deprecated and should be remove in the next major release - controls: { - exclude: ['id'], - }, - }, -}; - -export const Default = (args) => { - return ; -}; - -Default.args = { +const Defaultargs = { active: true, withOverlay: false, small: false, description: 'Loading', + theme: 'g10', }; -Default.argTypes = { +const DefaultargTypes = { active: { control: { type: 'boolean', @@ -55,4 +37,28 @@ Default.argTypes = { type: 'text', }, }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, +}; +export default { + title: 'Components/Loading', + component: Loading, + argTypes: DefaultargTypes, + args: Defaultargs, + parameters: { + docs: { + page: mdx, + }, + // The id prop is deprecated and should be remove in the next major release + controls: { + exclude: ['id'], + }, + }, +}; + +export const Default = (args) => { + return ; }; diff --git a/packages/react/src/components/Menu/Menu.stories.js b/packages/react/src/components/Menu/Menu.stories.js index de27e459ab07..ee11f3fcd51e 100644 --- a/packages/react/src/components/Menu/Menu.stories.js +++ b/packages/react/src/components/Menu/Menu.stories.js @@ -46,7 +46,15 @@ export default { exclude: ['target'], }, }, + args: { + theme: 'g10', + }, argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, mode: { control: false, }, diff --git a/packages/react/src/components/MenuButton/MenuButton.stories.js b/packages/react/src/components/MenuButton/MenuButton.stories.js index ccad09e2c781..8292eae939ee 100644 --- a/packages/react/src/components/MenuButton/MenuButton.stories.js +++ b/packages/react/src/components/MenuButton/MenuButton.stories.js @@ -30,6 +30,16 @@ export default { exclude: ['menuTarget'], }, }, + args: { + theme: 'g10', + }, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, }; export const Default = (args) => { diff --git a/packages/react/src/components/Modal/Modal.stories.js b/packages/react/src/components/Modal/Modal.stories.js index 6307bb6c4d15..c934005aac9e 100644 --- a/packages/react/src/components/Modal/Modal.stories.js +++ b/packages/react/src/components/Modal/Modal.stories.js @@ -36,6 +36,16 @@ import CheckboxGroup from '../CheckboxGroup'; export default { title: 'Components/Modal', component: Modal, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, + args: { + theme: 'g10', + }, parameters: { docs: { page: mdx, diff --git a/packages/react/src/components/ModalWrapper/ ModalWrapper.stories.js b/packages/react/src/components/ModalWrapper/ ModalWrapper.stories.js index a637e23efa4d..bbef3d102781 100644 --- a/packages/react/src/components/ModalWrapper/ ModalWrapper.stories.js +++ b/packages/react/src/components/ModalWrapper/ ModalWrapper.stories.js @@ -11,7 +11,15 @@ import ModalWrapper from './ModalWrapper'; export default { title: 'Deprecated/ModalWrapper', component: ModalWrapper, + args: { + theme: 'g10', + }, argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, triggerButtonKind: { options: [ 'primary', diff --git a/packages/react/src/components/MultiSelect/MultiSelect.stories.js b/packages/react/src/components/MultiSelect/MultiSelect.stories.js index b8626ea02bb1..39072d6754ac 100644 --- a/packages/react/src/components/MultiSelect/MultiSelect.stories.js +++ b/packages/react/src/components/MultiSelect/MultiSelect.stories.js @@ -117,6 +117,11 @@ export default { readOnly: { control: { type: 'boolean' }, }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, }, parameters: { docs: { @@ -190,6 +195,7 @@ const sharedArgs = { clearSelectionText: 'To clear selection, press Delete or Backspace,', selectAll: false, selectAllItemText: 'All options', + theme: 'g10', }; export const Default = (args) => { diff --git a/packages/react/src/components/Notification/stories/InlineNotification.stories.js b/packages/react/src/components/Notification/stories/InlineNotification.stories.js index 82b4b4992617..b1e3c01b1411 100644 --- a/packages/react/src/components/Notification/stories/InlineNotification.stories.js +++ b/packages/react/src/components/Notification/stories/InlineNotification.stories.js @@ -30,6 +30,14 @@ export default { statusIconDescription: 'notification', onClose: action('onClose'), onCloseButtonClick: action('onCloseButtonClick'), + theme: 'g10', + }, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, }, }; diff --git a/packages/react/src/components/NumberInput/NumberInput.stories.js b/packages/react/src/components/NumberInput/NumberInput.stories.js index 2daa655dce63..f6e331bcf503 100644 --- a/packages/react/src/components/NumberInput/NumberInput.stories.js +++ b/packages/react/src/components/NumberInput/NumberInput.stories.js @@ -47,6 +47,11 @@ const sharedArgTypes = { }, label: { control: { type: 'text' } }, helperText: { control: { type: 'text' } }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, }; const reusableProps = { @@ -85,6 +90,7 @@ Default.args = { warnText: 'Warning message that is really long can wrap to more lines but should not be excessively long.', size: 'md', + theme: 'g10', }; Default.argTypes = { ...sharedArgTypes }; diff --git a/packages/react/src/components/OrderedList/OrderedList.stories.js b/packages/react/src/components/OrderedList/OrderedList.stories.js index e28ddd333e8f..e4f4a539db87 100644 --- a/packages/react/src/components/OrderedList/OrderedList.stories.js +++ b/packages/react/src/components/OrderedList/OrderedList.stories.js @@ -21,6 +21,16 @@ export default { page: mdx, }, }, + args: { + theme: 'g10', + }, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, }; export const Default = (args) => ( @@ -63,6 +73,11 @@ Default.argTypes = { type: 'boolean', }, }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, }; export const Nested = () => { diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.stories.js b/packages/react/src/components/OverflowMenu/OverflowMenu.stories.js index c1b4538acb2d..3d4c1bb4d90a 100644 --- a/packages/react/src/components/OverflowMenu/OverflowMenu.stories.js +++ b/packages/react/src/components/OverflowMenu/OverflowMenu.stories.js @@ -10,46 +10,13 @@ import { OverflowMenu } from './OverflowMenu'; import { default as OverflowMenuItem } from '../OverflowMenuItem'; import { Filter } from '@carbon/icons-react'; import mdx from './OverflowMenu.mdx'; - -export default { - title: 'Components/OverflowMenu', - component: OverflowMenu, - subcomponents: { - OverflowMenuItem, - }, - parameters: { - docs: { - page: mdx, - }, - }, -}; - -export const RenderCustomIcon = () => { - return ( - - - - - ); -}; -export const Default = (args) => ( - - - - - - - - -); - -Default.args = { +const Defaultargs = { flipped: document?.dir === 'rtl', focusTrap: false, open: false, + theme: 'g10', }; - -Default.argTypes = { +const DefaultargTypes = { align: { options: [ 'top', @@ -91,8 +58,45 @@ Default.argTypes = { options: ['xs', 'sm', 'md', 'lg'], control: { type: 'select' }, }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, +}; +export default { + title: 'Components/OverflowMenu', + component: OverflowMenu, + subcomponents: { + OverflowMenuItem, + }, + argTypes: DefaultargTypes, + args: Defaultargs, + parameters: { + docs: { + page: mdx, + }, + }, }; +export const RenderCustomIcon = () => { + return ( + + + + + ); +}; +export const Default = (args) => ( + + + + + + + + +); Default.parameters = { controls: { exclude: [ diff --git a/packages/react/src/components/OverflowMenuV2/OverflowMenuv2.stories.js b/packages/react/src/components/OverflowMenuV2/OverflowMenuv2.stories.js index eba92202d679..4728e120fe2a 100644 --- a/packages/react/src/components/OverflowMenuV2/OverflowMenuv2.stories.js +++ b/packages/react/src/components/OverflowMenuV2/OverflowMenuv2.stories.js @@ -31,6 +31,16 @@ export default { MenuItemRadioGroup, MenuItemDivider, }, + args: { + theme: 'g10', + }, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, }; export const _OverflowMenuV2 = () => { diff --git a/packages/react/src/components/PageHeader/PageHeader.stories.js b/packages/react/src/components/PageHeader/PageHeader.stories.js index 00ff5709676e..d5fa4a1f9a4c 100644 --- a/packages/react/src/components/PageHeader/PageHeader.stories.js +++ b/packages/react/src/components/PageHeader/PageHeader.stories.js @@ -70,12 +70,19 @@ export default { PageHeaderHeroImage, PageHeaderTabBar, PageHeaderContentText, - PageHeaderContentPageActions, + }, + args: { + theme: 'g10', }, argTypes: { children: { control: false, // ReactNode props don't work in the controls pane }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, }, parameters: { docs: { @@ -228,6 +235,11 @@ Default.argTypes = { type: 'boolean', }, }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, }; export const ContentWithIcon = (args) => ( diff --git a/packages/react/src/components/Pagination/Pagination.stories.js b/packages/react/src/components/Pagination/Pagination.stories.js index 39a56da53b0b..7e798777cb9b 100644 --- a/packages/react/src/components/Pagination/Pagination.stories.js +++ b/packages/react/src/components/Pagination/Pagination.stories.js @@ -33,9 +33,15 @@ export default { options: ['sm', 'md', 'lg'], control: { type: 'select' }, }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, }, args: { size: 'md', + theme: 'g10', }, decorators: [ (story) => ( @@ -67,6 +73,7 @@ Default.args = { pagesUnknown: false, pageSizeInputDisabled: false, totalItems: 103, + theme: 'g10', }; Default.argTypes = { @@ -148,6 +155,11 @@ Default.argTypes = { type: 'number', }, }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, }; export const MultiplePaginationComponents = (args) => { diff --git a/packages/react/src/components/PaginationNav/PaginationNav.stories.js b/packages/react/src/components/PaginationNav/PaginationNav.stories.js index b9570516cfa3..e2e95789a08e 100644 --- a/packages/react/src/components/PaginationNav/PaginationNav.stories.js +++ b/packages/react/src/components/PaginationNav/PaginationNav.stories.js @@ -9,36 +9,17 @@ import React from 'react'; import PaginationNav from '../PaginationNav'; import './styles.scss'; import mdx from './PaginationNav.mdx'; - -export default { - title: 'Components/PaginationNav', - component: PaginationNav, - subcomponents: {}, - parameters: { - docs: { - page: mdx, - }, - }, -}; - -export const Default = (args) => { - return ( -
- -
- ); -}; - -Default.args = { +const Defaultargs = { size: 'lg', loop: false, itemsShown: 10, page: 0, totalItems: 25, disableOverflow: false, + theme: 'g10', }; -Default.argTypes = { +const DefaultargTypes = { size: { options: ['sm', 'md', 'lg'], control: { type: 'select' }, @@ -68,4 +49,29 @@ Default.argTypes = { type: 'boolean', }, }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, +}; +export default { + title: 'Components/PaginationNav', + component: PaginationNav, + argTypes: DefaultargTypes, + args: Defaultargs, + subcomponents: {}, + parameters: { + docs: { + page: mdx, + }, + }, +}; + +export const Default = (args) => { + return ( +
+ +
+ ); }; diff --git a/packages/react/src/components/Plex/Plex.stories.js b/packages/react/src/components/Plex/Plex.stories.js index c5fc271186b2..6e21ce0e6c0f 100644 --- a/packages/react/src/components/Plex/Plex.stories.js +++ b/packages/react/src/components/Plex/Plex.stories.js @@ -24,9 +24,15 @@ export default { }, options: ['Light', 'Regular', 'SemiBold'], }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, }, args: { fontWeight: 'Regular', + theme: 'g10', }, }; diff --git a/packages/react/src/components/Popover/Popover.stories.js b/packages/react/src/components/Popover/Popover.stories.js index 6815ed4d9b2c..6e7fc6fc44fa 100644 --- a/packages/react/src/components/Popover/Popover.stories.js +++ b/packages/react/src/components/Popover/Popover.stories.js @@ -19,13 +19,76 @@ import OverflowMenu from '../OverflowMenu/OverflowMenu'; import OverflowMenuItem from '../OverflowMenuItem'; const prefix = 'cds'; +const Defaultargs = { + caret: true, + dropShadow: true, + highContrast: false, + open: true, + theme: 'g10', +}; + +const DefaultargTypes = { + align: { + options: [ + 'top', + 'top-start', + 'top-end', + + 'bottom', + 'bottom-start', + 'bottom-end', + 'left', + 'left-end', + 'left-start', + + 'right', + 'right-end', + 'right-start', + ], + control: { + type: 'select', + }, + }, + border: { + control: { + type: 'boolean', + }, + }, + caret: { + control: { + type: 'boolean', + }, + }, + dropShadow: { + control: { + type: 'boolean', + }, + }, + highContrast: { + control: { + type: 'boolean', + }, + }, + open: { + control: { + type: 'boolean', + }, + }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, +}; export default { title: 'Components/Popover', component: Popover, subcomponents: { PopoverContent, }, + argTypes: DefaultargTypes, + args: Defaultargs, parameters: { controls: { hideNoControlsWarning: true, @@ -170,63 +233,6 @@ TabTip.argTypes = { export const Default = DefaultStory.bind({}); -Default.args = { - caret: true, - dropShadow: true, - highContrast: false, - open: true, -}; - -Default.argTypes = { - align: { - options: [ - 'top', - 'top-start', - 'top-end', - - 'bottom', - 'bottom-start', - 'bottom-end', - - 'left', - 'left-end', - 'left-start', - - 'right', - 'right-end', - 'right-start', - ], - control: { - type: 'select', - }, - }, - border: { - control: { - type: 'boolean', - }, - }, - caret: { - control: { - type: 'boolean', - }, - }, - dropShadow: { - control: { - type: 'boolean', - }, - }, - highContrast: { - control: { - type: 'boolean', - }, - }, - open: { - control: { - type: 'boolean', - }, - }, -}; - Default.story = { decorators: [ (story) =>
{story()}
, diff --git a/packages/react/src/components/ProgressBar/ProgressBar.stories.js b/packages/react/src/components/ProgressBar/ProgressBar.stories.js index b9ffdc6a2092..c33ff8b76321 100644 --- a/packages/react/src/components/ProgressBar/ProgressBar.stories.js +++ b/packages/react/src/components/ProgressBar/ProgressBar.stories.js @@ -11,7 +11,23 @@ import { WithLayer } from '../../../.storybook/templates/WithLayer'; import mdx from './ProgressBar.mdx'; import ProgressBar from './'; - +const DefaultargTypes = { + hideLabel: { + control: { type: 'boolean' }, + }, + status: { + options: ['active', 'finished', 'error'], + control: { type: 'select' }, + }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, +}; +const Defaultargs = { + theme: 'g10', +}; export default { title: 'Components/ProgressBar', component: ProgressBar, @@ -20,6 +36,8 @@ export default { page: mdx, }, }, + argTypes: DefaultargTypes, + args: Defaultargs, }; const DefaultStory = (args) => { @@ -34,16 +52,6 @@ const DefaultStory = (args) => { export const Default = DefaultStory.bind({}); -Default.argTypes = { - hideLabel: { - control: { type: 'boolean' }, - }, - status: { - options: ['active', 'finished', 'error'], - control: { type: 'select' }, - }, -}; - export const Indeterminate = () => ( ); diff --git a/packages/react/src/components/ProgressIndicator/ProgressIndicator.stories.js b/packages/react/src/components/ProgressIndicator/ProgressIndicator.stories.js index aad80294a5dc..93c04cfbb866 100644 --- a/packages/react/src/components/ProgressIndicator/ProgressIndicator.stories.js +++ b/packages/react/src/components/ProgressIndicator/ProgressIndicator.stories.js @@ -8,7 +8,29 @@ import React from 'react'; import { ProgressIndicator, ProgressStep, ProgressIndicatorSkeleton } from './'; import mdx from './ProgressIndicator.mdx'; +const Defaultargs = { + currentIndex: 0, + spaceEqually: false, + vertical: false, + theme: 'g10', +}; +const DefaultargTypes = { + currentIndex: { + control: { type: 'number' }, + }, + spaceEqually: { + control: { type: 'boolean' }, + }, + vertical: { + control: { type: 'boolean' }, + }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, +}; export default { title: 'Components/ProgressIndicator', component: ProgressIndicator, @@ -21,6 +43,8 @@ export default { page: mdx, }, }, + argTypes: DefaultargTypes, + args: Defaultargs, }; export const Interactive = () => { @@ -76,21 +100,3 @@ export const Default = (args) => ( /> ); - -Default.args = { - currentIndex: 0, - spaceEqually: false, - vertical: false, -}; - -Default.argTypes = { - currentIndex: { - control: { type: 'number' }, - }, - spaceEqually: { - control: { type: 'boolean' }, - }, - vertical: { - control: { type: 'boolean' }, - }, -}; diff --git a/packages/react/src/components/RadioButton/RadioButton.stories.js b/packages/react/src/components/RadioButton/RadioButton.stories.js index e246430886d1..4fb6c8d34e67 100644 --- a/packages/react/src/components/RadioButton/RadioButton.stories.js +++ b/packages/react/src/components/RadioButton/RadioButton.stories.js @@ -14,7 +14,81 @@ import { AILabel, AILabelContent, AILabelActions } from '../AILabel'; import { IconButton } from '../IconButton'; import { View, FolderOpen, Folders } from '@carbon/icons-react'; import mdx from './RadioButton.mdx'; +const Defaultargs = { + defaultSelected: 'radio-2', + helperText: 'Helper text', + hideLabel: false, + invalidText: 'Invalid selection', + warn: false, + warnText: 'Please notice the warning', + theme: 'g10', +}; +const DefaultargTypes = { + defaultSelected: { + description: 'Specify the `` to be selected by default', + options: ['radio-1', 'radio-2', 'radio-3'], + control: { + type: 'select', + }, + }, + readOnly: { + description: 'Specify whether the RadioButtonGroup is read-only', + control: { + type: 'boolean', + }, + }, + helperText: { + description: + 'Provide text that is used alongside the control label for additional help', + control: { + type: 'text', + }, + }, + hideLabel: { + description: + 'Specify whether the label should be visually hidden but still available to screen readers', + control: { + type: 'boolean', + }, + }, + invalid: { + description: 'Specify whether the RadioButtonGroup is invalid', + control: { + type: 'boolean', + }, + }, + invalidText: { + description: + 'Provide the text that is displayed when the control is in an invalid state', + control: { + type: 'text', + }, + }, + orientation: { + description: 'Provide how radio buttons should be displayed', + control: 'select', + options: ['horizontal', 'vertical'], + }, + warn: { + description: 'Specify whether the control is currently in warning state', + control: { + type: 'boolean', + }, + }, + warnText: { + description: + 'Provide the text that is displayed when the control is in warning state', + control: { + type: 'text', + }, + }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, +}; export default { title: 'Components/RadioButton', component: RadioButton, @@ -39,6 +113,8 @@ export default { page: mdx, }, }, + argTypes: DefaultargTypes, + args: Defaultargs, }; export const Vertical = () => { @@ -207,73 +283,3 @@ export const Default = (args) => { ); }; - -Default.args = { - defaultSelected: 'radio-2', - helperText: 'Helper text', - hideLabel: false, - invalidText: 'Invalid selection', - warn: false, - warnText: 'Please notice the warning', -}; - -Default.argTypes = { - defaultSelected: { - description: 'Specify the `` to be selected by default', - options: ['radio-1', 'radio-2', 'radio-3'], - control: { - type: 'select', - }, - }, - readOnly: { - description: 'Specify whether the RadioButtonGroup is read-only', - control: { - type: 'boolean', - }, - }, - helperText: { - description: - 'Provide text that is used alongside the control label for additional help', - control: { - type: 'text', - }, - }, - hideLabel: { - description: - 'Specify whether the label should be visually hidden but still available to screen readers', - control: { - type: 'boolean', - }, - }, - invalid: { - description: 'Specify whether the RadioButtonGroup is invalid', - control: { - type: 'boolean', - }, - }, - invalidText: { - description: - 'Provide the text that is displayed when the control is in an invalid state', - control: { - type: 'text', - }, - }, - orientation: { - description: 'Provide how radio buttons should be displayed', - control: 'select', - options: ['horizontal', 'vertical'], - }, - warn: { - description: 'Specify whether the control is currently in warning state', - control: { - type: 'boolean', - }, - }, - warnText: { - description: - 'Provide the text that is displayed when the control is in warning state', - control: { - type: 'text', - }, - }, -}; diff --git a/packages/react/src/components/Search/Search.stories.js b/packages/react/src/components/Search/Search.stories.js index fbbfdb2a7e8f..9b74629f6bc9 100644 --- a/packages/react/src/components/Search/Search.stories.js +++ b/packages/react/src/components/Search/Search.stories.js @@ -12,7 +12,60 @@ import { WithLayer } from '../../../.storybook/templates/WithLayer'; import ExpandableSearch from '../ExpandableSearch'; import Search from '.'; import mdx from './Search.mdx'; +const Defaultargs = { + closeButtonLabelText: 'Clear search input', + disabled: false, + labelText: 'Label text', + placeholder: 'Placeholder text', + size: 'md', + type: 'search', + theme: 'g10', +}; +const DefaultargTypes = { + defaultWidth: { + control: { type: 'range', min: 300, max: 800, step: 50 }, + }, + closeButtonLabelText: { + control: { + type: 'text', + }, + }, + disabled: { + control: { + type: 'boolean', + }, + }, + defaultValue: { + control: { + type: 'text', + }, + }, + labelText: { + control: { + type: 'text', + }, + }, + placeholder: { + control: { + type: 'text', + }, + }, + renderIcon: { + control: false, + }, + size: { + options: ['sm', 'md', 'lg'], + control: { + type: 'select', + }, + }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, +}; export default { title: 'Components/Search', component: Search, @@ -26,6 +79,8 @@ export default { subcomponents: { ExpandableSearch, }, + argTypes: DefaultargTypes, + args: Defaultargs, parameters: { docs: { page: mdx, @@ -109,52 +164,3 @@ export const Default = (args) => {
); }; - -Default.args = { - closeButtonLabelText: 'Clear search input', - disabled: false, - labelText: 'Label text', - placeholder: 'Placeholder text', - size: 'md', - type: 'search', -}; - -Default.argTypes = { - defaultWidth: { - control: { type: 'range', min: 300, max: 800, step: 50 }, - }, - closeButtonLabelText: { - control: { - type: 'text', - }, - }, - disabled: { - control: { - type: 'boolean', - }, - }, - defaultValue: { - control: { - type: 'text', - }, - }, - labelText: { - control: { - type: 'text', - }, - }, - placeholder: { - control: { - type: 'text', - }, - }, - renderIcon: { - control: false, - }, - size: { - options: ['sm', 'md', 'lg'], - control: { - type: 'select', - }, - }, -}; diff --git a/packages/react/src/components/Select/Select.stories.js b/packages/react/src/components/Select/Select.stories.js index 7718090636db..d6c207167e70 100644 --- a/packages/react/src/components/Select/Select.stories.js +++ b/packages/react/src/components/Select/Select.stories.js @@ -29,6 +29,7 @@ export default { invalid: false, warn: false, size: 'md', + theme: 'g10', }, argTypes: { light: { @@ -36,6 +37,11 @@ export default { disable: true, }, }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, }, decorators: [(story) =>
{story()}
], subcomponents: { @@ -192,4 +198,9 @@ Default.argTypes = { invalidText: { control: 'text' }, labelText: { control: 'text' }, warnText: { control: 'text' }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, }; diff --git a/packages/react/src/components/SkeletonIcon/SkeletonIcon.stories.js b/packages/react/src/components/SkeletonIcon/SkeletonIcon.stories.js index 37d8238b3da0..c6556f0aed91 100644 --- a/packages/react/src/components/SkeletonIcon/SkeletonIcon.stories.js +++ b/packages/react/src/components/SkeletonIcon/SkeletonIcon.stories.js @@ -17,6 +17,16 @@ export default { page: mdx, }, }, + args: { + theme: 'g10', + }, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, }; export const Default = () => { diff --git a/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.stories.js b/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.stories.js index 8e9ccd8d9092..b688ee95aaed 100644 --- a/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.stories.js +++ b/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.stories.js @@ -15,6 +15,16 @@ import mdx from './SkeletonPlaceholder.mdx'; export default { title: 'Components/Skeleton/SkeletonPlaceholder', component: SkeletonPlaceholder, + args: { + theme: 'g10', + }, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, parameters: { docs: { page: mdx, diff --git a/packages/react/src/components/SkeletonText/SkeletonText.stories.js b/packages/react/src/components/SkeletonText/SkeletonText.stories.js index f0cd10e21905..beaa520c9a61 100644 --- a/packages/react/src/components/SkeletonText/SkeletonText.stories.js +++ b/packages/react/src/components/SkeletonText/SkeletonText.stories.js @@ -11,29 +11,15 @@ import React from 'react'; import SkeletonText from '.'; import mdx from './SkeletonText.mdx'; - -export default { - title: 'Components/Skeleton/SkeletonText', - component: SkeletonText, - parameters: { - docs: { - page: mdx, - }, - }, -}; - -export const Default = (args) => { - return ; -}; - -Default.args = { +const Defaultargs = { heading: false, paragraph: false, width: '100%', lineCount: 3, + theme: 'g10', }; -Default.argTypes = { +const DefaultargTypes = { className: { control: false, }, @@ -57,4 +43,24 @@ Default.argTypes = { type: 'number', }, }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, +}; +export default { + title: 'Components/Skeleton/SkeletonText', + component: SkeletonText, + argTypes: DefaultargTypes, + args: Defaultargs, + parameters: { + docs: { + page: mdx, + }, + }, +}; + +export const Default = (args) => { + return ; }; diff --git a/packages/react/src/components/Slider/Slider.stories.js b/packages/react/src/components/Slider/Slider.stories.js index 0ea6e414b7b6..64ae6eeb0144 100644 --- a/packages/react/src/components/Slider/Slider.stories.js +++ b/packages/react/src/components/Slider/Slider.stories.js @@ -11,36 +11,7 @@ import { WithLayer } from '../../../.storybook/templates/WithLayer'; import { Slider, SliderSkeleton } from '.'; import mdx from './Slider.mdx'; - -export default { - title: 'Components/Slider', - component: Slider, - subcomponents: { - SliderSkeleton, - }, - parameters: { - docs: { - page: mdx, - }, - }, -}; - -export const Default = (args) => { - return ( - - ); -}; - -Default.parameters = { - controls: { - exclude: ['light', 'formatLabel', 'labelText'], - }, -}; - -Default.argTypes = { +const DefaultargTypes = { ariaLabelInput: { control: { type: 'text' }, }, @@ -113,9 +84,14 @@ Default.argTypes = { type: 'text', }, }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, }; -Default.args = { +const Defaultargs = { ariaLabelInput: 'Lower bound', unstable_ariaLabelInputUpper: 'Upper bound', disabled: false, @@ -132,6 +108,36 @@ Default.args = { unstable_valueUpper: undefined, warn: false, warnText: 'Warning message goes here', + theme: 'g10', +}; +export default { + title: 'Components/Slider', + component: Slider, + subcomponents: { + SliderSkeleton, + }, + argTypes: DefaultargTypes, + args: Defaultargs, + parameters: { + docs: { + page: mdx, + }, + }, +}; + +export const Default = (args) => { + return ( + + ); +}; + +Default.parameters = { + controls: { + exclude: ['light', 'formatLabel', 'labelText'], + }, }; export const SliderWithHiddenInputs = () => { diff --git a/packages/react/src/components/Stack/Stack.stories.js b/packages/react/src/components/Stack/Stack.stories.js index b3d5e3438909..80eb8e005158 100644 --- a/packages/react/src/components/Stack/Stack.stories.js +++ b/packages/react/src/components/Stack/Stack.stories.js @@ -16,6 +16,16 @@ export default { hideNoControlsWarning: true, }, }, + args: { + theme: 'g10', + }, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, }; export const Horizontal = () => { @@ -60,4 +70,9 @@ Default.argTypes = { type: 'select', }, }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, }; diff --git a/packages/react/src/components/StructuredList/StructuredList.stories.js b/packages/react/src/components/StructuredList/StructuredList.stories.js index e31b92629b16..018a8ad7ea2d 100644 --- a/packages/react/src/components/StructuredList/StructuredList.stories.js +++ b/packages/react/src/components/StructuredList/StructuredList.stories.js @@ -20,7 +20,28 @@ import { import { CheckmarkFilled } from '@carbon/icons-react'; const prefix = 'cds'; import StructuredListSkeleton from './StructuredList.Skeleton'; - +const DefaultargTypes = { + isCondensed: { + control: { + type: 'boolean', + }, + }, + isFlush: { + control: { + type: 'boolean', + }, + }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, +}; +const Defaultargs = { + isCondensed: false, + isFlush: false, + theme: 'g10', +}; export default { title: 'Components/StructuredList', component: StructuredListWrapper, @@ -31,6 +52,8 @@ export default { StructuredListInput, StructuredListCell, }, + argTypes: DefaultargTypes, + args: Defaultargs, parameters: { docs: { page: mdx, @@ -73,29 +96,12 @@ export const Default = (args) => { ); }; - -Default.args = { - isCondensed: false, - isFlush: false, -}; - Default.parameters = { controls: { exclude: ['selection'], }, }; -Default.argTypes = { - isCondensed: { - control: { - type: 'boolean', - }, - }, - isFlush: { - control: { - type: 'boolean', - }, - }, -}; + const structuredListBodyRowGenerator = (numRows) => { return Array.apply(null, Array(numRows)).map((n, i) => ( diff --git a/packages/react/src/components/Tabs/Tabs.stories.js b/packages/react/src/components/Tabs/Tabs.stories.js index f7ea84255a30..173acc3bba16 100644 --- a/packages/react/src/components/Tabs/Tabs.stories.js +++ b/packages/react/src/components/Tabs/Tabs.stories.js @@ -39,7 +39,61 @@ import { Restart, Icon, } from '@carbon/icons-react'; +const Defaultargs = { + contained: false, + dismissable: false, + scrollDebounceWait: 200, + theme: 'g10', +}; +const DefaultargTypes = { + activation: { + control: { type: 'select' }, + options: ['automatic', 'manual'], + }, + contained: { + control: { + type: 'boolean', + }, + }, + dismissable: { + control: false, + }, + iconSize: { + control: { type: 'select' }, + options: ['default', 'lg'], + }, + leftOverflowButtonProps: { + control: { + type: 'object', + }, + }, + rightOverflowButtonProps: { + control: { + type: 'object', + }, + }, + scrollDebounceWait: { + control: { + type: 'number', + }, + }, + scrollIntoView: { + control: { + type: 'boolean', + }, + }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + light: { + table: { + disable: true, + }, + }, +}; export default { title: 'Components/Tabs', component: Tabs, @@ -63,6 +117,8 @@ export default { }, }, }, + argTypes: DefaultargTypes, + args: Defaultargs, }; export const Default = (args) => { @@ -84,51 +140,6 @@ export const Default = (args) => { ); }; -Default.args = { - contained: false, - dismissable: false, - scrollDebounceWait: 200, -}; - -Default.argTypes = { - activation: { - control: { type: 'select' }, - options: ['automatic', 'manual'], - }, - contained: { - control: { - type: 'boolean', - }, - }, - dismissable: { - control: false, - }, - iconSize: { - control: { type: 'select' }, - options: ['default', 'lg'], - }, - leftOverflowButtonProps: { - control: { - type: 'object', - }, - }, - rightOverflowButtonProps: { - control: { - type: 'object', - }, - }, - scrollDebounceWait: { - control: { - type: 'number', - }, - }, - scrollIntoView: { - control: { - type: 'boolean', - }, - }, -}; - export const Dismissable = () => { const tabs = [ { diff --git a/packages/react/src/components/Tag/Tag.stories.js b/packages/react/src/components/Tag/Tag.stories.js index 446cb0bc1afa..d8e7831d918b 100644 --- a/packages/react/src/components/Tag/Tag.stories.js +++ b/packages/react/src/components/Tag/Tag.stories.js @@ -16,10 +16,62 @@ import { IconButton } from '../IconButton'; import '../AILabel/ailabel-story.scss'; import mdx from './Tag.mdx'; import './story.scss'; +const ReadOnlyargs = { + disabled: false, + filter: false, + size: 'md', + title: 'Clear filter', + theme: 'g10', +}; +const ReadOnlyargTypes = { + children: { + control: false, + }, + className: { + control: false, + }, + disabled: { + control: { + type: 'boolean', + }, + }, + filter: { + control: { + type: 'boolean', + }, + }, + id: { + control: false, + }, + renderIcon: { + control: false, + }, + size: { + options: ['sm', 'md', 'lg'], + control: { + type: 'select', + }, + }, + title: { + control: { + type: 'text', + }, + }, + type: { + control: false, + }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, +}; export default { title: 'Components/Tag', component: Tag, + argTypes: ReadOnlyargTypes, + args: ReadOnlyargs, parameters: { docs: { page: mdx, @@ -70,52 +122,6 @@ export const ReadOnly = (args) => { ); }; -ReadOnly.args = { - disabled: false, - filter: false, - size: 'md', - title: 'Clear filter', -}; - -ReadOnly.argTypes = { - children: { - control: false, - }, - className: { - control: false, - }, - disabled: { - control: { - type: 'boolean', - }, - }, - filter: { - control: { - type: 'boolean', - }, - }, - id: { - control: false, - }, - renderIcon: { - control: false, - }, - size: { - options: ['sm', 'md', 'lg'], - control: { - type: 'select', - }, - }, - title: { - control: { - type: 'text', - }, - }, - type: { - control: false, - }, -}; - export const Skeleton = (args) => (
diff --git a/packages/react/src/components/Text/Text.stories.js b/packages/react/src/components/Text/Text.stories.js index f5fa53422884..7218abcfa915 100644 --- a/packages/react/src/components/Text/Text.stories.js +++ b/packages/react/src/components/Text/Text.stories.js @@ -25,6 +25,16 @@ export default { page: mdx, }, }, + args: { + theme: 'g10', + }, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, }; export const Default = () => { diff --git a/packages/react/src/components/TextArea/TextArea.stories.js b/packages/react/src/components/TextArea/TextArea.stories.js index 195c1693de8a..2c5dcdf36f37 100644 --- a/packages/react/src/components/TextArea/TextArea.stories.js +++ b/packages/react/src/components/TextArea/TextArea.stories.js @@ -15,32 +15,22 @@ import { IconButton } from '../IconButton'; import { default as TextArea, TextAreaSkeleton } from './'; import { Tooltip } from '../Tooltip'; import mdx from './TextArea.mdx'; - -export default { - title: 'Components/TextArea', - component: TextArea, - parameters: { - docs: { - page: mdx, - }, - }, - subcomponents: { - TextAreaSkeleton, - }, - argTypes: { - light: { - table: { - disable: true, - }, - }, - slug: { - table: { - disable: true, - }, - }, - }, +const Defaultargs = { + enableCounter: true, + helperText: 'TextArea helper text', + labelText: 'TextArea label', + maxCount: 500, + disabled: false, + hideLabel: false, + invalid: false, + invalidText: + 'Error message that is really long can wrap to more lines but should not be excessively long.', + placeholder: '', + rows: 4, + warn: false, + warnText: 'This is a warning message.', + theme: 'g10', }; - const sharedArgTypes = { className: { control: false, @@ -123,6 +113,47 @@ const sharedArgTypes = { type: 'text', }, }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + light: { + table: { + disable: true, + }, + }, + slug: { + table: { + disable: true, + }, + }, +}; +export default { + title: 'Components/TextArea', + component: TextArea, + parameters: { + docs: { + page: mdx, + }, + }, + subcomponents: { + TextAreaSkeleton, + }, + argTypes: sharedArgTypes, + args: Defaultargs, + argTypes: { + light: { + table: { + disable: true, + }, + }, + slug: { + table: { + disable: true, + }, + }, + }, }; export const Default = (args) => { @@ -133,22 +164,6 @@ Default.argTypes = { ...sharedArgTypes, }; -Default.args = { - enableCounter: true, - helperText: 'TextArea helper text', - labelText: 'TextArea label', - maxCount: 500, - disabled: false, - hideLabel: false, - invalid: false, - invalidText: - 'Error message that is really long can wrap to more lines but should not be excessively long.', - placeholder: '', - rows: 4, - warn: false, - warnText: 'This is a warning message.', -}; - export const _WithLayer = () => ( {(layer) => ( diff --git a/packages/react/src/components/TextInput/TextInput.stories.js b/packages/react/src/components/TextInput/TextInput.stories.js index 8c962d5c1973..2de3d6aa3375 100644 --- a/packages/react/src/components/TextInput/TextInput.stories.js +++ b/packages/react/src/components/TextInput/TextInput.stories.js @@ -16,32 +16,6 @@ import mdx from './TextInput.mdx'; import { default as TextInput, TextInputSkeleton } from '../TextInput'; import { Tooltip } from '../Tooltip'; - -export default { - title: 'Components/TextInput', - component: TextInput, - parameters: { - docs: { - page: mdx, - }, - }, - subcomponents: { - TextInputSkeleton, - }, - argTypes: { - light: { - table: { - disable: true, - }, - }, - slug: { - table: { - disable: true, - }, - }, - }, -}; - const sharedArgTypes = { defaultWidth: { control: { type: 'range', min: 300, max: 800, step: 50 }, @@ -113,6 +87,39 @@ const sharedArgTypes = { type: 'select', }, }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, +}; +export default { + title: 'Components/TextInput', + component: TextInput, + parameters: { + docs: { + page: mdx, + }, + }, + subcomponents: { + TextInputSkeleton, + }, + args: { + theme: 'g10', + }, + argTypes: { + ...sharedArgTypes, + light: { + table: { + disable: true, + }, + }, + slug: { + table: { + disable: true, + }, + }, + }, }; export const Default = (args) => { @@ -136,6 +143,7 @@ Default.args = { warnText: 'Warning message that is really long can wrap to more lines but should not be excessively long.', size: 'md', + theme: 'g10', }; Default.argTypes = { diff --git a/packages/react/src/components/Theme/Theme.stories.js b/packages/react/src/components/Theme/Theme.stories.js index cc2895140a41..8104356523cf 100644 --- a/packages/react/src/components/Theme/Theme.stories.js +++ b/packages/react/src/components/Theme/Theme.stories.js @@ -31,6 +31,13 @@ export default { args: { theme: 'g10', }, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, }; const ThemeText = ({ children, showIsDark }) => { diff --git a/packages/react/src/components/Tile/Tile.stories.js b/packages/react/src/components/Tile/Tile.stories.js index a440f9af285b..7415ebd8e838 100644 --- a/packages/react/src/components/Tile/Tile.stories.js +++ b/packages/react/src/components/Tile/Tile.stories.js @@ -50,6 +50,9 @@ export default { TileAboveTheFoldContent, TileBelowTheFoldContent, }, + args: { + theme: 'g10', + }, argTypes: { light: { table: { @@ -61,6 +64,11 @@ export default { disable: true, }, }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, }, parameters: { docs: { @@ -114,6 +122,11 @@ Clickable.argTypes = { type: 'boolean', }, }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, }; export const ClickableWithCustomIcon = (args) => { @@ -132,13 +145,7 @@ ClickableWithCustomIcon.args = { disabled: false, }; -ClickableWithCustomIcon.argTypes = { - disabled: { - control: { - type: 'boolean', - }, - }, -}; +ClickableWithCustomIcon.argTypes = Clickable.argTypes; export const ClickableWithLayer = () => ( @@ -164,13 +171,7 @@ Selectable.args = { disabled: false, }; -Selectable.argTypes = { - disabled: { - control: { - type: 'boolean', - }, - }, -}; +Selectable.argTypes = Clickable.argTypes; export const MultiSelect = (args) => { return ( @@ -192,13 +193,7 @@ MultiSelect.args = { disabled: false, }; -MultiSelect.argTypes = { - disabled: { - control: { - type: 'boolean', - }, - }, -}; +MultiSelect.argTypes = Clickable.argTypes; export const Radio = (args) => { return ( @@ -232,13 +227,7 @@ Radio.args = { disabled: false, }; -Radio.argTypes = { - disabled: { - control: { - type: 'boolean', - }, - }, -}; +Radio.argTypes = Clickable.argTypes; export const RadioWithLayer = () => ( diff --git a/packages/react/src/components/Toggle/Toggle.stories.js b/packages/react/src/components/Toggle/Toggle.stories.js index 09cea7042772..5dca4acb4bcf 100644 --- a/packages/react/src/components/Toggle/Toggle.stories.js +++ b/packages/react/src/components/Toggle/Toggle.stories.js @@ -19,6 +19,16 @@ export default { page: mdx, }, }, + args: { + theme: 'g10', + }, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, }; export const Default = (args) => { @@ -75,6 +85,11 @@ Default.argTypes = { control: { type: 'select' }, }, }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, }; export const SmallToggle = (args) => { diff --git a/packages/react/src/components/Toggletip/Toggletip.stories.js b/packages/react/src/components/Toggletip/Toggletip.stories.js index 7691282d630f..afc80714c41a 100644 --- a/packages/react/src/components/Toggletip/Toggletip.stories.js +++ b/packages/react/src/components/Toggletip/Toggletip.stories.js @@ -33,6 +33,16 @@ export default { page: mdx, }, }, + args: { + theme: 'g10', + }, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, }; export const ExperimentalAutoAlign = () => { diff --git a/packages/react/src/components/Tooltip/DefinitionTooltip.stories.js b/packages/react/src/components/Tooltip/DefinitionTooltip.stories.js index 9138de7ec5cb..6f0dbff6ed6c 100644 --- a/packages/react/src/components/Tooltip/DefinitionTooltip.stories.js +++ b/packages/react/src/components/Tooltip/DefinitionTooltip.stories.js @@ -14,6 +14,16 @@ import mdx from './DefinitionTooltip.mdx'; export default { title: 'Components/DefinitionTooltip', component: DefinitionTooltip, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, + args: { + theme: 'g10', + }, parameters: { controls: { hideNoControlsWarning: true, diff --git a/packages/react/src/components/Tooltip/Tooltip.stories.js b/packages/react/src/components/Tooltip/Tooltip.stories.js index f810bb8ca16a..77856cec7244 100644 --- a/packages/react/src/components/Tooltip/Tooltip.stories.js +++ b/packages/react/src/components/Tooltip/Tooltip.stories.js @@ -25,6 +25,9 @@ export default { page: mdx, }, }, + args: { + theme: 'g10', + }, argTypes: { align: { options: [ @@ -47,6 +50,11 @@ export default { control: { type: 'select', }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, }, highContrast: { table: { diff --git a/packages/react/src/components/TreeView/Treeview.stories.js b/packages/react/src/components/TreeView/Treeview.stories.js index 41594c5de38b..828292e18fc9 100644 --- a/packages/react/src/components/TreeView/Treeview.stories.js +++ b/packages/react/src/components/TreeView/Treeview.stories.js @@ -50,6 +50,14 @@ export default { }, args: { onSelect: action('onSelect'), + theme: 'g10', + }, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, }, }; @@ -241,6 +249,11 @@ Default.argTypes = { options: ['xs', 'sm'], control: { type: 'select' }, }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, }; export const WithIcons = () => { diff --git a/packages/react/src/components/UnorderedList/UnorderedList.stories.js b/packages/react/src/components/UnorderedList/UnorderedList.stories.js index 0f790a8edce7..bc9c9dd3cdc9 100644 --- a/packages/react/src/components/UnorderedList/UnorderedList.stories.js +++ b/packages/react/src/components/UnorderedList/UnorderedList.stories.js @@ -22,6 +22,16 @@ export default { page: mdx, }, }, + args: { + theme: 'g10', + }, + argTypes: { + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, + }, }; export const Default = (args) => { @@ -44,6 +54,11 @@ Default.argTypes = { type: 'boolean', }, }, + theme: { + options: ['white', 'g10', 'g90', 'g100'], + control: { type: 'select' }, + description: 'The theme to apply to the component.', + }, }; export const Nested = () => {