{children},
+ },
+);
diff --git a/packages/components/figma/DateField.figma.tsx b/packages/components/figma/DateField.figma.tsx
new file mode 100644
index 000000000..68441675d
--- /dev/null
+++ b/packages/components/figma/DateField.figma.tsx
@@ -0,0 +1,28 @@
+import figma from '@figma/code-connect';
+
+import { DateField } from '../src/DateField';
+
+figma.connect(
+ DateField,
+ 'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/%F0%9F%9A%80-LaunchPad?node-id=10726%3A60155',
+ {
+ props: {
+ label: figma.boolean('Label?', {
+ true: figma.children(['Label']),
+ false: undefined,
+ }),
+ helpText: figma.boolean('Help text?', {
+ true: figma.string('Help text'),
+ false: undefined,
+ }),
+ isInvalid: figma.enum('State', { Invalid: true }),
+ isDisabled: figma.enum('State', { Disabled: true }),
+ },
+ example: ({ label, isInvalid, isDisabled }) => (
+ <>
+ {label}
+
+
+
+
+
+
+ ),
+ },
+);
diff --git a/packages/components/figma/ToggleButton.figma.tsx b/packages/components/figma/ToggleButton.figma.tsx
new file mode 100644
index 000000000..74861047b
--- /dev/null
+++ b/packages/components/figma/ToggleButton.figma.tsx
@@ -0,0 +1,76 @@
+import type { ToggleButtonProps } from '../src';
+
+import figma from '@figma/code-connect';
+
+import { ToggleButton } from '../src';
+
+figma.connect(
+ ToggleButton,
+ 'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/%F0%9F%9A%80-LaunchPad?node-id=1-29278',
+ {
+ props: {
+ children: figma.string('Label'),
+ isDisabled: figma.enum('State', { Disabled: true }),
+
+ size: figma.enum
- {children}
-
- );
-});
+const Code = forwardRef
+ {children}
+
+ );
+ },
+);
Code.displayName = 'Code';
diff --git a/packages/components/src/styles/Code.module.css b/packages/components/src/styles/Code.module.css
index 7c32c2910..647c49402 100644
--- a/packages/components/src/styles/Code.module.css
+++ b/packages/components/src/styles/Code.module.css
@@ -5,10 +5,8 @@
color: var(--lp-color-text-code-string);
width: fit-content;
background-color: var(--lp-color-bg-ui-tertiary);
- padding-top: var(--lp-spacing-100);
- padding-bottom: var(--lp-spacing-100);
- padding-left: var(--lp-spacing-200);
- padding-right: var(--lp-spacing-200);
+ padding: var(--lp-spacing-100) var(--lp-spacing-200);
+ display: flex;
border: none;
outline: none;
}
diff --git a/packages/components/stories/Alert.stories.tsx b/packages/components/stories/Alert.stories.tsx
index a04ec0200..fac3f7b05 100644
--- a/packages/components/stories/Alert.stories.tsx
+++ b/packages/components/stories/Alert.stories.tsx
@@ -9,6 +9,12 @@ import { Text } from '../src/Text';
const meta: Meta
diff --git a/packages/components/stories/CheckboxGroup.stories.tsx b/packages/components/stories/CheckboxGroup.stories.tsx
index e517ea6b1..e9dab2011 100644
--- a/packages/components/stories/CheckboxGroup.stories.tsx
+++ b/packages/components/stories/CheckboxGroup.stories.tsx
@@ -13,6 +13,12 @@ import { Text } from '../src/Text';
const meta: Meta = {
component: CheckboxGroup,
title: 'Components/Forms/CheckboxGroup',
+ parameters: {
+ figma: {
+ design:
+ 'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/%F0%9F%9A%80-LaunchPad?node-id=1-33148&m=dev',
+ },
+ },
};
export default meta;
diff --git a/packages/components/stories/Code.stories.tsx b/packages/components/stories/Code.stories.tsx
index 415abff5c..8dd98a3e4 100644
--- a/packages/components/stories/Code.stories.tsx
+++ b/packages/components/stories/Code.stories.tsx
@@ -15,6 +15,10 @@ For body text, use [Text](/docs/components-content-text--docs ). For headings, u
`,
},
},
+ design: {
+ type: 'figma',
+ url: 'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/%F0%9F%9A%80-LaunchPad?node-id=14383-120498&m=dev',
+ },
},
argTypes: {
children: {
diff --git a/packages/components/stories/DateField.stories.tsx b/packages/components/stories/DateField.stories.tsx
index 162cb9d77..c1baf461a 100644
--- a/packages/components/stories/DateField.stories.tsx
+++ b/packages/components/stories/DateField.stories.tsx
@@ -14,6 +14,12 @@ const meta: Meta = {
component: DateField,
subcomponents: { DateInput, DateSegment } as Record>,
title: 'Components/Date and Time/DateField',
+ parameters: {
+ figma: {
+ design:
+ 'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/%F0%9F%9A%80-LaunchPad?node-id=10833-32728&m=dev',
+ },
+ },
decorators: [
(Story) => (
diff --git a/packages/components/stories/DatePicker.stories.tsx b/packages/components/stories/DatePicker.stories.tsx
index 4bb22cab2..1b51a0914 100644
--- a/packages/components/stories/DatePicker.stories.tsx
+++ b/packages/components/stories/DatePicker.stories.tsx
@@ -22,6 +22,12 @@ const meta: Meta = {
component: DatePicker,
subcomponents: { DatePickerValue } as Record>,
title: 'Components/Date and Time/DatePicker',
+ parameters: {
+ figma: {
+ design:
+ 'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/%F0%9F%9A%80-LaunchPad?node-id=10826-35493&m=dev',
+ },
+ },
decorators: [
(Story) => (
diff --git a/packages/components/stories/DateRangePicker.stories.tsx b/packages/components/stories/DateRangePicker.stories.tsx
index 12d95b58f..e9625762f 100644
--- a/packages/components/stories/DateRangePicker.stories.tsx
+++ b/packages/components/stories/DateRangePicker.stories.tsx
@@ -22,6 +22,12 @@ const meta: Meta = {
component: DateRangePicker,
subcomponents: { DateRangePickerValue } as Record>,
title: 'Components/Date and Time/DateRangePicker',
+ parameters: {
+ figma: {
+ design:
+ 'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/%F0%9F%9A%80-LaunchPad?node-id=10833-59317&m=dev',
+ },
+ },
decorators: [
(Story) => (
diff --git a/packages/components/stories/FieldGroup.stories.tsx b/packages/components/stories/FieldGroup.stories.tsx
index a5c92ad29..df9218577 100644
--- a/packages/components/stories/FieldGroup.stories.tsx
+++ b/packages/components/stories/FieldGroup.stories.tsx
@@ -14,6 +14,12 @@ import { TextField } from '../src/TextField';
const meta: Meta = {
component: FieldGroup,
title: 'Components/Forms/FieldGroup',
+ parameters: {
+ figma: {
+ design:
+ 'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/%F0%9F%9A%80-LaunchPad?node-id=1-33331&m=dev',
+ },
+ },
};
export default meta;
diff --git a/packages/components/stories/FileTrigger.stories.tsx b/packages/components/stories/FileTrigger.stories.tsx
index 02fbf2032..277a7d973 100644
--- a/packages/components/stories/FileTrigger.stories.tsx
+++ b/packages/components/stories/FileTrigger.stories.tsx
@@ -6,6 +6,12 @@ import { FileTrigger } from '../src/FileTrigger';
const meta: Meta = {
component: FileTrigger,
title: 'Components/Buttons/FileTrigger',
+ parameters: {
+ design: {
+ type: 'figma',
+ url: 'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/%F0%9F%9A%80-LaunchPad?node-id=14350-114160&m=dev',
+ },
+ },
};
export default meta;
diff --git a/packages/components/stories/Heading.stories.tsx b/packages/components/stories/Heading.stories.tsx
index eb844f473..07e563849 100644
--- a/packages/components/stories/Heading.stories.tsx
+++ b/packages/components/stories/Heading.stories.tsx
@@ -6,6 +6,10 @@ const meta: Meta = {
title: 'Components/Content/Heading',
component: Heading,
parameters: {
+ figma: {
+ design:
+ 'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/%F0%9F%9A%80-LaunchPad?node-id=1-26765&m=dev',
+ },
docs: {
description: {
component: `
diff --git a/packages/components/stories/IconButton.stories.tsx b/packages/components/stories/IconButton.stories.tsx
index af0266969..c2523618c 100644
--- a/packages/components/stories/IconButton.stories.tsx
+++ b/packages/components/stories/IconButton.stories.tsx
@@ -5,16 +5,41 @@ import { IconButton } from '../src/IconButton';
const meta: Meta = {
component: IconButton,
title: 'Components/Buttons/IconButton',
-};
+ tags: ['autodocs'],
+ parameters: {
+ design: {
+ type: 'figma',
+ url: 'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/%F0%9F%9A%80-LaunchPad?node-id=14355-114625&m=dev',
+ },
+ },
+} satisfies Meta;
export default meta;
type Story = StoryObj;
-export const Example: Story = {
+export const Default: Story = {
args: { icon: 'add', 'aria-label': 'create' },
};
-export const Small: Story = {
- args: { icon: 'add', 'aria-label': 'create', size: 'small' },
+export const Variant: Story = {
+ render: () => (
+ = {
title: 'Components/Content/Label',
component: Label,
parameters: {
+ figma: {
+ design:
+ 'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/%F0%9F%9A%80-LaunchPad?node-id=1-26765&m=dev',
+ },
docs: {
description: {
component: `
diff --git a/packages/components/stories/Link.stories.tsx b/packages/components/stories/Link.stories.tsx
index 74a19cad2..4d827bfb7 100644
--- a/packages/components/stories/Link.stories.tsx
+++ b/packages/components/stories/Link.stories.tsx
@@ -8,6 +8,12 @@ import { Link } from '../src/Link';
const meta: Meta = {
component: Link,
title: 'Components/Navigation/Link',
+ parameters: {
+ figma: {
+ design:
+ 'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/%F0%9F%9A%80-LaunchPad?node-id=8079-92170&m=dev',
+ },
+ },
};
export default meta;
diff --git a/packages/components/stories/LinkButton.stories.tsx b/packages/components/stories/LinkButton.stories.tsx
index a40e604b8..5e92b6318 100644
--- a/packages/components/stories/LinkButton.stories.tsx
+++ b/packages/components/stories/LinkButton.stories.tsx
@@ -5,6 +5,12 @@ import { LinkButton } from '../src/LinkButton';
const meta: Meta = {
component: LinkButton,
title: 'Components/Navigation/LinkButton',
+ parameters: {
+ figma: {
+ design:
+ 'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/%F0%9F%9A%80-LaunchPad?node-id=8079-92439&m=dev',
+ },
+ },
};
export default meta;
diff --git a/packages/components/stories/LinkIconButton.stories.tsx b/packages/components/stories/LinkIconButton.stories.tsx
index d53f292cb..74c51df40 100644
--- a/packages/components/stories/LinkIconButton.stories.tsx
+++ b/packages/components/stories/LinkIconButton.stories.tsx
@@ -5,6 +5,12 @@ import { LinkIconButton } from '../src/LinkIconButton';
const meta: Meta = {
component: LinkIconButton,
title: 'Components/Navigation/LinkIconButton',
+ parameters: {
+ figma: {
+ design:
+ 'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/%F0%9F%9A%80-LaunchPad?node-id=8079-92746&m=dev',
+ },
+ },
};
export default meta;
diff --git a/packages/components/stories/Menu.stories.tsx b/packages/components/stories/Menu.stories.tsx
index c84bba66a..26f55a854 100644
--- a/packages/components/stories/Menu.stories.tsx
+++ b/packages/components/stories/Menu.stories.tsx
@@ -28,6 +28,12 @@ const meta: Meta = {
Separator,
} as Record>,
title: 'Components/Collections/Menu',
+ parameters: {
+ figma: {
+ design:
+ 'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/%F0%9F%9A%80-LaunchPad?node-id=3583-13908&m=dev',
+ },
+ },
decorators: [
(Story) => (
+
+ ),
+ args: { 'aria-label': 'create' },
+};
+
+export const Size: Story = {
+ render: () => (
+
+
+ ),
+ args: { 'aria-label': 'create' },
};
diff --git a/packages/components/stories/Label.stories.tsx b/packages/components/stories/Label.stories.tsx
index ee0a45eb3..f2f97b8bb 100644
--- a/packages/components/stories/Label.stories.tsx
+++ b/packages/components/stories/Label.stories.tsx
@@ -6,6 +6,10 @@ const meta: Meta
diff --git a/packages/components/stories/Modal.stories.tsx b/packages/components/stories/Modal.stories.tsx
index 007ba3a55..a2a5a9d75 100644
--- a/packages/components/stories/Modal.stories.tsx
+++ b/packages/components/stories/Modal.stories.tsx
@@ -19,6 +19,12 @@ const meta: Meta = {
ComponentType
>,
title: 'Components/Overlays/Modal',
+ parameters: {
+ figma: {
+ design:
+ 'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/%F0%9F%9A%80-LaunchPad?node-id=8079-93230&m=dev',
+ },
+ },
decorators: [
(Story, { viewMode }) =>
viewMode === 'story' ? (
diff --git a/packages/components/stories/NumberField.stories.tsx b/packages/components/stories/NumberField.stories.tsx
index d478c545b..eaf5ec508 100644
--- a/packages/components/stories/NumberField.stories.tsx
+++ b/packages/components/stories/NumberField.stories.tsx
@@ -12,6 +12,12 @@ import { NumberField } from '../src/NumberField';
const meta: Meta = {
component: NumberField,
title: 'Components/Forms/NumberField',
+ parameters: {
+ figma: {
+ design:
+ 'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/%F0%9F%9A%80-LaunchPad?node-id=10876-33196&m=dev',
+ },
+ },
decorators: [
(Story) => (
diff --git a/packages/components/stories/Popover.stories.tsx b/packages/components/stories/Popover.stories.tsx
index c5e6f3d52..01235c7a9 100644
--- a/packages/components/stories/Popover.stories.tsx
+++ b/packages/components/stories/Popover.stories.tsx
@@ -14,6 +14,12 @@ const meta: Meta = {
component: Popover,
subcomponents: { OverlayArrow, DialogTrigger } as Record>,
title: 'Components/Overlays/Popover',
+ parameters: {
+ figma: {
+ design:
+ 'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/%F0%9F%9A%80-LaunchPad?node-id=8079-94800&m=dev',
+ },
+ },
decorators: [
(Story) => (
diff --git a/packages/components/stories/ProgressBar.stories.tsx b/packages/components/stories/ProgressBar.stories.tsx
index abb08e96b..188923491 100644
--- a/packages/components/stories/ProgressBar.stories.tsx
+++ b/packages/components/stories/ProgressBar.stories.tsx
@@ -6,6 +6,12 @@ import { ProgressBar } from '../src/ProgressBar';
const meta: Meta = {
component: ProgressBar,
title: 'Components/Status/ProgressBar',
+ parameters: {
+ figma: {
+ design:
+ 'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/%F0%9F%9A%80-LaunchPad?node-id=8079-96310&m=dev',
+ },
+ },
};
export default meta;
diff --git a/packages/components/stories/RadioGroup.stories.tsx b/packages/components/stories/RadioGroup.stories.tsx
index d3c8d8030..55e764ace 100644
--- a/packages/components/stories/RadioGroup.stories.tsx
+++ b/packages/components/stories/RadioGroup.stories.tsx
@@ -15,6 +15,12 @@ const meta: Meta = {
component: RadioGroup,
subcomponents: { Radio } as Record>,
title: 'Components/Forms/RadioGroup',
+ parameters: {
+ figma: {
+ design:
+ 'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/%F0%9F%9A%80-LaunchPad?node-id=1-33616&m=dev',
+ },
+ },
};
export default meta;
diff --git a/packages/components/stories/RangeCalendar.stories.tsx b/packages/components/stories/RangeCalendar.stories.tsx
index ba614ebe5..089d4676e 100644
--- a/packages/components/stories/RangeCalendar.stories.tsx
+++ b/packages/components/stories/RangeCalendar.stories.tsx
@@ -13,6 +13,10 @@ const meta: Meta = {
subcomponents: { CalendarCell, CalendarGrid, Heading } as Record>,
title: 'Components/Date and Time/RangeCalendar',
parameters: {
+ figma: {
+ design:
+ 'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/%F0%9F%9A%80-LaunchPad?node-id=10675-15846&m=dev',
+ },
a11y: {
options: {
rules: {
diff --git a/packages/components/stories/SearchField.stories.tsx b/packages/components/stories/SearchField.stories.tsx
index bc912f139..d01383601 100644
--- a/packages/components/stories/SearchField.stories.tsx
+++ b/packages/components/stories/SearchField.stories.tsx
@@ -14,6 +14,12 @@ import { Text } from '../src/Text';
const meta: Meta = {
component: SearchField,
title: 'Components/Forms/SearchField',
+ parameters: {
+ figma: {
+ design:
+ 'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/%F0%9F%9A%80-LaunchPad?node-id=10833-25262&m=dev',
+ },
+ },
decorators: [
(Story) => (
diff --git a/packages/components/stories/Select.stories.tsx b/packages/components/stories/Select.stories.tsx
index b1cc77eb5..5365bc328 100644
--- a/packages/components/stories/Select.stories.tsx
+++ b/packages/components/stories/Select.stories.tsx
@@ -16,6 +16,12 @@ const meta: Meta = {
component: Select,
subcomponents: { SelectValue } as Record>,
title: 'Components/Pickers/Select',
+ parameters: {
+ figma: {
+ design:
+ 'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/%F0%9F%9A%80-LaunchPad?node-id=8079-95299&m=dev',
+ },
+ },
decorators: [
(Story) => (
diff --git a/packages/components/stories/Switch.stories.tsx b/packages/components/stories/Switch.stories.tsx
index 34e4293e4..7cba8f3db 100644
--- a/packages/components/stories/Switch.stories.tsx
+++ b/packages/components/stories/Switch.stories.tsx
@@ -5,6 +5,12 @@ import { Switch } from '../src/Switch';
const meta: Meta = {
component: Switch,
title: 'Components/Forms/Switch',
+ parameters: {
+ figma: {
+ design:
+ 'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/%F0%9F%9A%80-LaunchPad?node-id=1-34112&m=dev',
+ },
+ },
};
export default meta;
diff --git a/packages/components/stories/Table.stories.tsx b/packages/components/stories/Table.stories.tsx
index 5b49dd8fc..95277d0a1 100644
--- a/packages/components/stories/Table.stories.tsx
+++ b/packages/components/stories/Table.stories.tsx
@@ -24,6 +24,12 @@ const meta: Meta = {
ComponentType
>,
title: 'Components/Collections/Table',
+ parameters: {
+ figma: {
+ design:
+ 'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/%F0%9F%9A%80-LaunchPad?node-id=8066-61462&m=dev',
+ },
+ },
};
export default meta;
diff --git a/packages/components/stories/Tabs.stories.tsx b/packages/components/stories/Tabs.stories.tsx
index 8052a22bb..ff5e09c1d 100644
--- a/packages/components/stories/Tabs.stories.tsx
+++ b/packages/components/stories/Tabs.stories.tsx
@@ -10,6 +10,12 @@ const meta: Meta = {
component: Tabs,
subcomponents: { Tab, TabList, TabPanel } as Record>,
title: 'Components/Navigation/Tabs',
+ parameters: {
+ figma: {
+ design:
+ 'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/%F0%9F%9A%80-LaunchPad?node-id=1-45106&m=dev',
+ },
+ },
};
export default meta;
diff --git a/packages/components/stories/TagGroup.stories.tsx b/packages/components/stories/TagGroup.stories.tsx
index 9ad3629b4..25fa4c53f 100644
--- a/packages/components/stories/TagGroup.stories.tsx
+++ b/packages/components/stories/TagGroup.stories.tsx
@@ -9,6 +9,12 @@ import { Tag, TagGroup, TagList } from '../src/TagGroup';
const meta: Meta = {
component: TagGroup,
+ parameters: {
+ figma: {
+ design:
+ 'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/%F0%9F%9A%80-LaunchPad?node-id=1-32263&m=dev',
+ },
+ },
subcomponents: { TagList, Tag } as Record>,
title: 'Components/Collections/TagGroup',
};
diff --git a/packages/components/stories/Text.stories.tsx b/packages/components/stories/Text.stories.tsx
index 2dbb24e41..a911a4cc4 100644
--- a/packages/components/stories/Text.stories.tsx
+++ b/packages/components/stories/Text.stories.tsx
@@ -6,6 +6,10 @@ const meta: Meta = {
title: 'Components/Content/Text',
component: Text,
parameters: {
+ figma: {
+ design:
+ 'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/%F0%9F%9A%80-LaunchPad?node-id=1-26765&m=dev',
+ },
docs: {
description: {
component: `
diff --git a/packages/components/stories/TextField.stories.tsx b/packages/components/stories/TextField.stories.tsx
index eb0d09925..0422d69a6 100644
--- a/packages/components/stories/TextField.stories.tsx
+++ b/packages/components/stories/TextField.stories.tsx
@@ -18,6 +18,12 @@ const meta: Meta = {
ComponentType
>,
title: 'Components/Forms/TextField',
+ parameters: {
+ figma: {
+ design:
+ 'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/%F0%9F%9A%80-LaunchPad?node-id=1-34456&m=dev',
+ },
+ },
decorators: [
(Story) => (
diff --git a/packages/components/stories/TimeField.stories.tsx b/packages/components/stories/TimeField.stories.tsx
index 495cb717f..b8cf78556 100644
--- a/packages/components/stories/TimeField.stories.tsx
+++ b/packages/components/stories/TimeField.stories.tsx
@@ -15,6 +15,10 @@ const meta: Meta = {
subcomponents: { DateInput, DateSegment } as Record>,
title: 'Components/Date and Time/TimeField',
parameters: {
+ figma: {
+ design:
+ 'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/%F0%9F%9A%80-LaunchPad?node-id=10715-54568&m=dev',
+ },
a11y: {
options: {
rules: {
diff --git a/packages/components/stories/Toast.stories.tsx b/packages/components/stories/Toast.stories.tsx
index abf2d195a..2ee6aa712 100644
--- a/packages/components/stories/Toast.stories.tsx
+++ b/packages/components/stories/Toast.stories.tsx
@@ -10,6 +10,12 @@ import { SnackbarRegion, snackbarQueue, ToastRegion, toastQueue } from '../src/T
const meta: Meta = {
component: ToastRegion,
title: 'Components/Status/Toast',
+ parameters: {
+ figma: {
+ design:
+ 'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/%F0%9F%9A%80-LaunchPad?node-id=8079-96656&m=dev',
+ },
+ },
decorators: [
(Story, { viewMode }) =>
viewMode === 'story' ? (
diff --git a/packages/components/stories/ToggleButton.stories.tsx b/packages/components/stories/ToggleButton.stories.tsx
index a55c3484f..b9d908c4b 100644
--- a/packages/components/stories/ToggleButton.stories.tsx
+++ b/packages/components/stories/ToggleButton.stories.tsx
@@ -7,6 +7,12 @@ import { ToggleButton } from '../src/ToggleButton';
const meta: Meta = {
component: ToggleButton,
title: 'Components/Buttons/ToggleButton',
+ parameters: {
+ figma: {
+ design:
+ 'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/%F0%9F%9A%80-LaunchPad?node-id=8085-111168&t=T9MyIVWIOcqcOoT1-4',
+ },
+ },
};
export default meta;
diff --git a/packages/components/stories/ToggleButtonGroup.stories.tsx b/packages/components/stories/ToggleButtonGroup.stories.tsx
index 527ec769c..c38a7b42d 100644
--- a/packages/components/stories/ToggleButtonGroup.stories.tsx
+++ b/packages/components/stories/ToggleButtonGroup.stories.tsx
@@ -8,7 +8,14 @@ import { ToggleIconButton } from '../src/ToggleIconButton';
const meta: Meta = {
component: ToggleButtonGroup,
subcomponents: { ToggleButton } as Record>,
- title: 'Components/Buttons/ToggleButtonGroup',
+ title: 'Components/Buttons/ToggleButton/ToggleButtonGroup',
+ tags: ['autodocs'],
+ parameters: {
+ design: {
+ type: 'figma',
+ url: 'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/%F0%9F%9A%80-LaunchPad?node-id=1-37543',
+ },
+ },
};
export default meta;
diff --git a/packages/components/stories/ToggleIconButton.stories.tsx b/packages/components/stories/ToggleIconButton.stories.tsx
index e2638dce8..1b5b3e071 100644
--- a/packages/components/stories/ToggleIconButton.stories.tsx
+++ b/packages/components/stories/ToggleIconButton.stories.tsx
@@ -7,6 +7,13 @@ import { ToggleIconButton } from '../src/ToggleIconButton';
const meta: Meta = {
component: ToggleIconButton,
title: 'Components/Buttons/ToggleIconButton',
+ tags: ['autodocs'],
+ parameters: {
+ design: {
+ type: 'figma',
+ url: 'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/%F0%9F%9A%80-LaunchPad?node-id=14378-119382&m=dev',
+ },
+ },
};
export default meta;
diff --git a/packages/components/stories/Tooltip.stories.tsx b/packages/components/stories/Tooltip.stories.tsx
index cffc398f2..bf94b9da2 100644
--- a/packages/components/stories/Tooltip.stories.tsx
+++ b/packages/components/stories/Tooltip.stories.tsx
@@ -12,6 +12,12 @@ const meta: Meta = {
component: Tooltip,
subcomponents: { TooltipTrigger, Focusable } as Record>,
title: 'Components/Overlays/Tooltip',
+ parameters: {
+ figma: {
+ design:
+ 'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/%F0%9F%9A%80-LaunchPad?node-id=8079-95145&m=dev',
+ },
+ },
decorators: [
(Story) => (
= {}) => {
export default {
component: Demo,
title: 'Legacy/Form/useNumberField',
+ tags: ['deprecated'],
description: 'A text field allows the user to provide numeric values.',
parameters: {
chromatic: { disableSnapshot: true },
diff --git a/packages/icons/stories/StatusIcon.stories.tsx b/packages/icons/stories/StatusIcon.stories.tsx
index df7a10a14..2c3feade9 100644
--- a/packages/icons/stories/StatusIcon.stories.tsx
+++ b/packages/icons/stories/StatusIcon.stories.tsx
@@ -5,6 +5,7 @@ import { StatusIcon } from '../src';
export default {
component: StatusIcon,
title: 'Legacy/Icon/StatusIcon',
+ tags: ['deprecated'],
description:
'Flair icons can be used as either square or circular icons with gradient backgrounds.',
parameters: {
diff --git a/packages/menu/stories/Menu.stories.tsx b/packages/menu/stories/Menu.stories.tsx
index 6b240d35e..25b36b8d7 100644
--- a/packages/menu/stories/Menu.stories.tsx
+++ b/packages/menu/stories/Menu.stories.tsx
@@ -11,6 +11,7 @@ export default {
component: Menu,
subcomponents: { MenuDivider, MenuItem, MenuSearch },
title: 'Legacy/Menu',
+ tags: ['deprecated'],
description: 'Menus present a list of items a user can choose from.',
parameters: {
chromatic: { disableSnapshot: true },
diff --git a/packages/modal/stories/Modal.stories.tsx b/packages/modal/stories/Modal.stories.tsx
index 7cb490669..560f7af13 100644
--- a/packages/modal/stories/Modal.stories.tsx
+++ b/packages/modal/stories/Modal.stories.tsx
@@ -13,6 +13,7 @@ import { AbsoluteModalFooter, Modal, ModalBody, ModalFooter, ModalHeader } from
export default {
component: Modal,
title: 'Legacy/Modal',
+ tags: ['deprecated'],
description: 'Modals presents users information and actions over a page.',
parameters: {
controls: { sort: 'requiredFirst' },
diff --git a/packages/navigation/stories/Navigation.stories.tsx b/packages/navigation/stories/Navigation.stories.tsx
index 4ccc19337..a46206e88 100644
--- a/packages/navigation/stories/Navigation.stories.tsx
+++ b/packages/navigation/stories/Navigation.stories.tsx
@@ -8,6 +8,7 @@ export default {
component: Navigation,
subcomponents: { NavigationItem },
title: 'Legacy/Navigation',
+ tags: ['deprecated'],
description: 'An element used to provide navigation links to help users move through an app.',
parameters: {
chromatic: { disableSnapshot: true },
diff --git a/packages/popover/stories/Popover.stories.tsx b/packages/popover/stories/Popover.stories.tsx
index 0e75e3a26..f4a0f7cec 100644
--- a/packages/popover/stories/Popover.stories.tsx
+++ b/packages/popover/stories/Popover.stories.tsx
@@ -8,6 +8,7 @@ import { Popover } from '../src';
export default {
component: Popover,
title: 'Legacy/Popover',
+ tags: ['deprecated'],
description: 'Popovers display content within a portal triggered by user interactions.',
parameters: {
chromatic: { disableSnapshot: true },
diff --git a/packages/table/stories/Table.stories.tsx b/packages/table/stories/Table.stories.tsx
index 92db06657..2f7794de1 100644
--- a/packages/table/stories/Table.stories.tsx
+++ b/packages/table/stories/Table.stories.tsx
@@ -6,6 +6,7 @@ export default {
component: Table,
subcomponents: { TableBody, TableCell, TableHead, TableHeadCell, TableRow },
title: 'Legacy/Table',
+ tags: ['deprecated'],
description: 'An element used to organize and display data to users.',
parameters: {
chromatic: { disableSnapshot: true },
diff --git a/packages/tokens/stories/color.stories.tsx b/packages/tokens/stories/color.stories.tsx
index a46454ece..6c3133955 100644
--- a/packages/tokens/stories/color.stories.tsx
+++ b/packages/tokens/stories/color.stories.tsx
@@ -7,6 +7,7 @@ import { Tooltip, TooltipTrigger } from '../../components/src/Tooltip';
export default {
title: 'Tokens/Color',
+ tags: ['!dev'],
};
const ALIAS = ['bg', 'border', 'fill', 'shadow', 'text', 'data'];
diff --git a/packages/tokens/stories/size.stories.tsx b/packages/tokens/stories/size.stories.tsx
index 734166820..2a7a2f13f 100644
--- a/packages/tokens/stories/size.stories.tsx
+++ b/packages/tokens/stories/size.stories.tsx
@@ -10,6 +10,7 @@ import tokens from '../dist/index.es.js';
export default {
title: 'Tokens/Size',
+ tags: ['!dev'],
};
const sizes: typeof Tokens.size = tokens.size;
diff --git a/packages/tokens/stories/theme.stories.tsx b/packages/tokens/stories/theme.stories.tsx
index f3bb41baf..4ef6ace9a 100644
--- a/packages/tokens/stories/theme.stories.tsx
+++ b/packages/tokens/stories/theme.stories.tsx
@@ -4,6 +4,7 @@ import { Button } from '../../components/src/Button';
export default {
title: 'Tokens/Themes',
+ tags: ['!dev'],
};
export const NestedThemes = {
diff --git a/packages/tokens/stories/typography.stories.tsx b/packages/tokens/stories/typography.stories.tsx
index 877f8c588..bbfadb71d 100644
--- a/packages/tokens/stories/typography.stories.tsx
+++ b/packages/tokens/stories/typography.stories.tsx
@@ -6,6 +6,7 @@ import { Tooltip, TooltipTrigger } from '../../components/src/Tooltip';
export default {
title: 'Tokens/Typography',
+ tags: ['!dev'],
parameters: {
docs: {
description: {
diff --git a/packages/tooltip/stories/Tooltip.stories.tsx b/packages/tooltip/stories/Tooltip.stories.tsx
index d9056be00..f16c4d187 100644
--- a/packages/tooltip/stories/Tooltip.stories.tsx
+++ b/packages/tooltip/stories/Tooltip.stories.tsx
@@ -8,6 +8,7 @@ import { Tooltip } from '../src';
export default {
component: Tooltip,
title: 'Legacy/Tooltip',
+ tags: ['deprecated'],
description: 'Tooltips provide additional information on hover or focus.',
parameters: {
chromatic: { disableSnapshot: true },
diff --git a/packages/vars/stories/vars.stories.tsx b/packages/vars/stories/vars.stories.tsx
index 1cadb0052..48fb463d6 100644
--- a/packages/vars/stories/vars.stories.tsx
+++ b/packages/vars/stories/vars.stories.tsx
@@ -4,6 +4,7 @@ import { container, local } from './Story.css';
export default {
title: 'Tokens/Vars',
+ tags: ['!dev'],
};
type Story = StoryObj;
diff --git a/packages/components/stories/overview/Collections.tsx b/packages/components/stories/overview/Collections.tsx
new file mode 100644
index 000000000..53537d48e
--- /dev/null
+++ b/packages/components/stories/overview/Collections.tsx
@@ -0,0 +1,159 @@
+import { Button } from '../../src/Button';
+import { GridList, GridListItem } from '../../src/GridList';
+import { IconButton } from '../../src/IconButton';
+// Import the actual components for custom previews
+import { ListBox, ListBoxItem } from '../../src/ListBox';
+import { Menu, MenuItem, MenuTrigger } from '../../src/Menu';
+import { Popover } from '../../src/Popover';
+import { Cell, Column, Row, Table, TableBody, TableHeader } from '../../src/Table';
+import { TagGroup } from '../../src/TagGroup';
+import { Text } from '../../src/Text';
+import { Tree, TreeItem, TreeItemContent } from '../../src/Tree';
+// Import actual collection stories
+import { Example as TagGroupExample } from '../TagGroup.stories';
+
+// Custom preview components that properly handle collection contexts
+
+const ListBoxPreview = () => (
+
+
+
+
+
+);
+
+const GridListPreview = () => (
+
+
+
+ ),
+ storyPath: 'components-buttons-filetrigger--docs',
+ },
+ {
+ name: 'ToggleButton',
+ component: (
+
+
+ First
+
+ Second
+ Third
+
+ ),
+ storyPath: 'components-buttons-togglebutton-togglebuttongroup--docs',
+ },
+ {
+ name: 'ToggleIconButton',
+ component: (
+
+ Grouped content
+
+ ),
+ storyPath: 'components-content-group--docs',
+ },
+ {
+ name: 'Toolbar',
+ component: (
+
+
+
+
+ ),
+ storyPath: 'components-content-toolbar--docs',
+ },
+ ],
+ },
+ {
+ category: 'Forms',
+ components: [
+ {
+ name: 'TextField',
+ component: (
+
+
+
+
+ ),
+ storyPath: 'components-forms-textfield--docs',
+ },
+ {
+ name: 'NumberField',
+ component: (
+
+
+
+
+ ),
+ storyPath: 'components-forms-numberfield--docs',
+ },
+ {
+ name: 'SearchField',
+ component: (
+
+
+
+
+ ),
+ storyPath: 'components-forms-searchfield--docs',
+ },
+ {
+ name: 'Checkbox',
+ component: Check me ,
+ storyPath: 'components-forms-checkbox--docs',
+ },
+ {
+ name: 'CheckboxGroup',
+ component: (
+
+
+ Option A
+ Option B
+
+ ),
+ storyPath: 'components-forms-checkboxgroup--docs',
+ },
+ {
+ name: 'RadioGroup',
+ component: (
+
+
+ {/* Radio items would go here */}
+
+ ),
+ storyPath: 'components-forms-radiogroup--docs',
+ },
+ {
+ name: 'Switch',
+ component: Toggle setting ,
+ storyPath: 'components-forms-switch--docs',
+ },
+ {
+ name: 'FieldGroup',
+ component: (
+
+
+
+
+
+
+ ),
+ storyPath: 'components-forms-fieldgroup--docs',
+ },
+ ],
+ },
+ navigationCategory,
+ collectionsCategory,
+ statusCategory,
+ pickersCategory,
+ overlaysCategory,
+ dateAndTimeCategory,
+ dragAndDropCategory,
+ recipesCategory,
+];
+
+// Component card styling
+const cardStyles = {
+ borderRadius: vars.borderRadius.medium,
+ padding: vars.spacing[400],
+ aspectRatio: '1',
+ display: 'flex',
+ flexDirection: 'column' as const,
+ justifyContent: 'space-between',
+ alignItems: 'flex-start',
+ backgroundColor: vars.color.bg.ui.secondary,
+ textDecoration: 'none',
+ color: 'inherit',
+ transition: 'all 0.2s ease',
+};
+
+const ComponentCard = ({
+ name,
+ component,
+ storyPath,
+ hideCodeLink = false,
+}: {
+ name: string;
+ component: React.ReactNode;
+ storyPath: string;
+ hideCodeLink?: boolean;
+}) => {
+ return (
+ = {
+ title: 'Component Overview',
+ component: Overview,
+ tags: ['!dev'],
+ parameters: {
+ layout: 'fullscreen',
+ },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+/**
+ * Here you can find all available components in the design system. Click on any component to view its documentation and examples.
+ */
+export const AllComponents: Story = {
+ name: 'All Components',
+ render: () => */
+import type { ReactNode } from 'react';
+
+interface StoryType {
+ render?: (args?: any, context?: any) => ReactNode;
+ args?: any & {
+ children?: ReactNode;
+ };
+}
+
+export const StoryPreview = ({ story, scale = 1 }: { story: StoryType; scale?: number }) => {
+ // Handle different story structures:
+ // 1. Stories with custom render function (like Button.stories)
+ // 2. Stories with args that need to be passed to the component (like DatePicker)
+ // 3. Stories with just children in args (like simple components)
+
+ const renderStory = () => {
+ if (story.render) {
+ // Story has custom render function - use it with args
+ return story.render(story.args || {}, {});
+ }
+ if (story.args) {
+ // Story has args - need to render the component properly
+ // For stories like DatePicker that need the component wrapper with props
+ const storyArgs = story.args;
+
+ // If the story has a component defined in the meta, we should use it
+ // For now, we'll extract children if available, but this needs the component context
+ if (storyArgs.children) {
+ // This is a complex component like DatePicker that needs proper rendering
+ // We need the actual component to render with args
+ // For now, return the children but this is not ideal
+ return storyArgs.children;
+ }
+
+ // Fallback for other arg patterns
+ return (
+ storyArgs.children || First
Second
Third
- Fourth
- Fifth
@@ -142,8 +140,6 @@ export const RadioButtonGroup: Story = {
diff --git a/packages/drawer/stories/Drawer.stories.tsx b/packages/drawer/stories/Drawer.stories.tsx
index 7404fcbe3..a94a1e410 100644
--- a/packages/drawer/stories/Drawer.stories.tsx
+++ b/packages/drawer/stories/Drawer.stories.tsx
@@ -10,6 +10,7 @@ export default {
component: Drawer,
subcomponents: { DrawerHeader },
title: 'Legacy/Drawer',
+ tags: ['deprecated'],
description: 'A partial overlay that appears from the right side of the screen.',
parameters: {
docs: {
diff --git a/packages/dropdown/stories/Dropdown.stories.tsx b/packages/dropdown/stories/Dropdown.stories.tsx
index 970ddad0c..580f392c3 100644
--- a/packages/dropdown/stories/Dropdown.stories.tsx
+++ b/packages/dropdown/stories/Dropdown.stories.tsx
@@ -8,6 +8,7 @@ export default {
component: Dropdown,
subcomponents: { DropdownButton },
title: 'Legacy/Dropdown',
+ tags: ['deprecated'],
description: 'Dropdowns display a list of actions or options to a user.',
parameters: {
chromatic: { disableSnapshot: true },
diff --git a/packages/filter/stories/AppliedFilter.stories.tsx b/packages/filter/stories/AppliedFilter.stories.tsx
index bf3ef2a54..39bb1f168 100644
--- a/packages/filter/stories/AppliedFilter.stories.tsx
+++ b/packages/filter/stories/AppliedFilter.stories.tsx
@@ -5,6 +5,7 @@ import { AppliedFilter } from '../src';
export default {
component: AppliedFilter,
title: 'Legacy/Filter/AppliedFilter',
+ tags: ['deprecated'],
description: 'We use filters to filter our lists based on search critera.',
parameters: {
chromatic: { disableSnapshot: true },
diff --git a/packages/filter/stories/Filter.stories.tsx b/packages/filter/stories/Filter.stories.tsx
index d7b9c5d8b..f183f86fd 100644
--- a/packages/filter/stories/Filter.stories.tsx
+++ b/packages/filter/stories/Filter.stories.tsx
@@ -5,6 +5,7 @@ import { Filter } from '../src';
export default {
component: Filter,
title: 'Legacy/Filter',
+ tags: ['deprecated'],
description: 'We use filters to filter our lists based on search critera.',
parameters: {
chromatic: { disableSnapshot: true },
diff --git a/packages/filter/stories/FilterButton.stories.tsx b/packages/filter/stories/FilterButton.stories.tsx
index 56277bbef..0a1ec50a6 100644
--- a/packages/filter/stories/FilterButton.stories.tsx
+++ b/packages/filter/stories/FilterButton.stories.tsx
@@ -5,6 +5,7 @@ import { FilterButton } from '../src';
export default {
component: FilterButton,
title: 'Legacy/Filter/FilterButton',
+ tags: ['deprecated'],
description:
"When the Filter component doesn't suffice, construct your own custom filter using the FilterButton.",
parameters: {
diff --git a/packages/form/stories/Checkbox.stories.tsx b/packages/form/stories/Checkbox.stories.tsx
index c40e26a53..315a0e1f8 100644
--- a/packages/form/stories/Checkbox.stories.tsx
+++ b/packages/form/stories/Checkbox.stories.tsx
@@ -5,6 +5,7 @@ import { Checkbox } from '../src';
export default {
component: Checkbox,
title: 'Legacy/Form/Checkbox',
+ tags: ['deprecated'],
description: 'A checkbox allows the user to toggle between checked and unchecked states.',
parameters: {
chromatic: { disableSnapshot: true },
diff --git a/packages/form/stories/CompactTextField.stories.tsx b/packages/form/stories/CompactTextField.stories.tsx
index 69b7e691e..862c9d933 100644
--- a/packages/form/stories/CompactTextField.stories.tsx
+++ b/packages/form/stories/CompactTextField.stories.tsx
@@ -5,6 +5,7 @@ import { CompactTextField } from '../src';
export default {
component: CompactTextField,
title: 'Legacy/Form/CompactTextField',
+ tags: ['deprecated'],
description: 'A compact text field allows the user to provide values.',
parameters: {
chromatic: { disableSnapshot: true },
diff --git a/packages/form/stories/FormField.stories.tsx b/packages/form/stories/FormField.stories.tsx
index afd5a2f94..8dbcc1ee1 100644
--- a/packages/form/stories/FormField.stories.tsx
+++ b/packages/form/stories/FormField.stories.tsx
@@ -5,6 +5,7 @@ import { FormField, TextField } from '../src';
export default {
component: FormField,
title: 'Legacy/Form/FormField',
+ tags: ['deprecated'],
description:
'A FormField is an opinionated way to organize form field components like labels, errors, hints, and the field itself."',
parameters: {
diff --git a/packages/form/stories/FormGroup.stories.tsx b/packages/form/stories/FormGroup.stories.tsx
index ef009c997..45cb1de87 100644
--- a/packages/form/stories/FormGroup.stories.tsx
+++ b/packages/form/stories/FormGroup.stories.tsx
@@ -5,6 +5,7 @@ import { FormGroup, FormHint, Label, RequiredAsterisk, TextField } from '../src'
export default {
component: FormGroup,
title: 'Legacy/Form/FormGroup',
+ tags: ['deprecated'],
description: 'A group of form fields.',
parameters: {
chromatic: { disableSnapshot: true },
diff --git a/packages/form/stories/IconField.stories.tsx b/packages/form/stories/IconField.stories.tsx
index 9ee0828dd..10f7e1f92 100644
--- a/packages/form/stories/IconField.stories.tsx
+++ b/packages/form/stories/IconField.stories.tsx
@@ -6,6 +6,7 @@ import { IconField, TextField } from '../src';
export default {
component: IconField,
title: 'Legacy/Form/IconField',
+ tags: ['deprecated'],
description: 'An IconField renders an icon placed next to a passed field."',
parameters: {
chromatic: { disableSnapshot: true },
diff --git a/packages/form/stories/Label.stories.tsx b/packages/form/stories/Label.stories.tsx
index 59c06754c..fbc6e7b78 100644
--- a/packages/form/stories/Label.stories.tsx
+++ b/packages/form/stories/Label.stories.tsx
@@ -5,7 +5,7 @@ import { Label } from '../src';
export default {
component: Label,
title: 'Legacy/Form/Label',
-
+ tags: ['deprecated'],
parameters: {
chromatic: { disableSnapshot: true },
docs: {
diff --git a/packages/form/stories/Radio.stories.tsx b/packages/form/stories/Radio.stories.tsx
index 1d5b331f0..62e311c24 100644
--- a/packages/form/stories/Radio.stories.tsx
+++ b/packages/form/stories/Radio.stories.tsx
@@ -5,6 +5,7 @@ import { Radio } from '../src';
export default {
component: Radio,
title: 'Legacy/Form/Radio',
+ tags: ['deprecated'],
description: 'A radio button allows the user to select one of a set of options."',
parameters: {
chromatic: { disableSnapshot: true },
diff --git a/packages/form/stories/RadioGroup.stories.tsx b/packages/form/stories/RadioGroup.stories.tsx
index 38a7cde5e..334b14c1d 100644
--- a/packages/form/stories/RadioGroup.stories.tsx
+++ b/packages/form/stories/RadioGroup.stories.tsx
@@ -5,6 +5,7 @@ import { Label, Radio, RadioGroup } from '../src';
export default {
component: RadioGroup,
title: 'Legacy/Form/RadioGroup',
+ tags: ['deprecated'],
description: 'A radio button group allows the user to select one of a set of options.',
parameters: {
chromatic: { disableSnapshot: true },
diff --git a/packages/form/stories/SelectField.stories.tsx b/packages/form/stories/SelectField.stories.tsx
index ecd99c24d..365be874e 100644
--- a/packages/form/stories/SelectField.stories.tsx
+++ b/packages/form/stories/SelectField.stories.tsx
@@ -5,6 +5,7 @@ import { SelectField } from '../src';
export default {
component: SelectField,
title: 'Legacy/Form/SelectField',
+ tags: ['deprecated'],
description: 'A select field allows the user to select a value from a set of options."',
parameters: {
chromatic: { disableSnapshot: true },
diff --git a/packages/form/stories/TextArea.stories.tsx b/packages/form/stories/TextArea.stories.tsx
index 020eed7c4..e32881a48 100644
--- a/packages/form/stories/TextArea.stories.tsx
+++ b/packages/form/stories/TextArea.stories.tsx
@@ -39,6 +39,7 @@ const withRestingAndDisabledStates: Decorator = (story, context) => {
export default {
component: TextArea,
title: 'Legacy/Form/TextArea',
+ tags: ['deprecated'],
description: 'A styled form textarea component',
decorators: [
createWithClassesDecorator(testingChromaticClassNames, (args, originalStory, context) => {
diff --git a/packages/form/stories/TextField.stories.tsx b/packages/form/stories/TextField.stories.tsx
index 9dedbb003..b461a09c5 100644
--- a/packages/form/stories/TextField.stories.tsx
+++ b/packages/form/stories/TextField.stories.tsx
@@ -38,6 +38,7 @@ const withRestingAndDisabledStates: Decorator = (story, context) => {
export default {
component: TextField,
title: 'Legacy/Form/TextField',
+ tags: ['deprecated'],
description: 'A text field allows the user to provide values."',
decorators: [
createWithClassesDecorator(chromaticTestStyles, (args, storyFn, context) => {
diff --git a/packages/form/stories/useNumberField.stories.tsx b/packages/form/stories/useNumberField.stories.tsx
index 4dac75a20..930de514d 100644
--- a/packages/form/stories/useNumberField.stories.tsx
+++ b/packages/form/stories/useNumberField.stories.tsx
@@ -29,6 +29,7 @@ const Demo = (props: Partial
+
+ Item one
+ Item two
+ Item three
+
+
+);
+
+const TagGroupPreview = () => {
+ const storyArgs = TagGroupExample.args || {};
+
+ return (
+
+ {storyArgs.children}
+
+ );
+};
+
+const TablePreview = () => (
+
+
+
+
+);
+
+// Options component for GridList items (simplified for overview)
+const GridOptions = () => (
+
+
+
+ Item one
+
+
+ Item two
+
+
+ Item three
+
+
+
+);
+
+const TreePreview = () => (
+
+
+
+ Documents
+
+ Project
+
+
+
+ Photos
+
+
+
+);
+
+const MenuPreview = () => (
+
+
+
+
+
+
+
+
+);
+
+// Collections category configuration
+export const collectionsCategory = {
+ category: 'Collections',
+ components: [
+ {
+ name: 'Table',
+ component:
+ {storyArgs.children}
+
+ );
+};
+
+// Date and Time category configuration
+export const dateAndTimeCategory = {
+ category: 'Date and Time',
+ components: [
+ {
+ name: 'Calendar',
+ component:
+
+ );
+};
+
+// Custom wrapper for LinkButton that renders the story properly
+const LinkButtonPreview = () => {
+ const storyArgs = LinkButtonExample.args || {};
+
+ return (
+
+ {storyArgs.children}
+
+ {storyArgs.children}
+
+
+
+ {storyArgs.children}
+
+ );
+};
+
+// Custom wrapper for LinkIconButton that renders the story properly
+const LinkIconButtonPreview = () => {
+ const storyArgs = LinkIconButtonExample.args || {};
+
+ return (
+
+
+ );
+};
+
+// Custom wrapper for Breadcrumbs that renders the story properly
+const BreadcrumbsPreview = () => {
+ const storyArgs = BreadcrumbsExample.args || {};
+
+ return (
+
+ {storyArgs.children}
+
+ );
+};
+
+// Custom wrapper for Tabs that renders the story properly
+const TabsPreview = () => {
+ const storyArgs = TabsExample.args || {};
+
+ return (
+
+ {storyArgs.children}
+
+ );
+};
+
+// Custom wrapper for Disclosure that renders the story properly
+const DisclosurePreview = () => {
+ const storyArgs = DisclosureExample.args || {};
+
+ return (
+
+ {storyArgs.children}
+
+ );
+};
+
+// Custom wrapper for DisclosureGroup that renders the story properly
+const DisclosureGroupPreview = () => {
+ const storyArgs = DisclosureGroupExample.args || {};
+
+ return (
+
+ {storyArgs.children}
+
+ );
+};
+
+// Navigation category configuration
+export const navigationCategory = {
+ category: 'Navigation',
+ components: [
+ {
+ name: 'Link',
+ component:
+
+
+
+
+
+ ),
+ storyPath: 'components-buttons-button--docs',
+ },
+ {
+ name: 'IconButton',
+ component: (
+
+
+ ),
+ storyPath: 'components-buttons-iconbutton--docs',
+ },
+ {
+ name: 'ButtonGroup',
+ component: (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ),
+ storyPath: 'components-buttons-buttongroup--docs',
+ },
+ {
+ name: 'FileTrigger',
+ component: (
+
+ Toggle
+ Toggle
+ Toggle
+ Toggle
+
+ ),
+ storyPath: 'components-buttons-togglebutton--docs',
+ },
+ {
+ name: 'ToggleButtonGroup',
+ component: (
+
+
+ ),
+ storyPath: 'components-buttons-toggleiconbutton--docs',
+ },
+ ],
+ },
+ {
+ category: 'Content',
+ components: [
+ {
+ name: 'Text',
+ component: (
+
+ Large text
+ Medium text
+ Small text
+
+ ),
+ storyPath: 'components-content-text--docs',
+ },
+ {
+ name: 'Heading',
+ component: (
+
+ Large heading
+ Medium heading
+ Small heading
+
+ ),
+ storyPath: 'components-content-heading--docs',
+ },
+ {
+ name: 'Label',
+ component: (
+
+
+
+
+ ),
+ storyPath: 'components-content-label--docs',
+ },
+ {
+ name: 'Code',
+ component: (
+
+
+ ),
+ storyPath: 'components-content-code--docs',
+ },
+ {
+ name: 'Avatar',
+ component: (
+ console.log('hello')
+ console.log('hello')
+
+ {name}
+
+ );
+};
+
+const Overview = () => {
+ return (
+
+ {component}
+
+
+ {!hideCodeLink && (
+
+
+ Code
+
+
+ )}
+
+
+ Docs
+
+
+
+
+ {componentCategories.map(({ category, components }) => (
+
+ );
+};
+
+const meta: Meta
+ {category}
+
+ ))}
+
+ {components.map(({ name, component, storyPath }) => (
+
+
+
+
+ );
+};
+
+// Pickers category configuration
+export const pickersCategory = {
+ category: 'Pickers',
+ components: [
+ {
+ name: 'Select',
+ component:
+ {storyArgs.children}
+
+ );
+};
+
+// Custom wrapper for ProgressBar that renders the story properly
+const ProgressBarPreview = () => {
+ const storyArgs = ProgressBarExample.args || {};
+
+ return (
+
+
+ );
+};
+
+// Custom wrapper for Meter that renders the story properly
+const MeterPreview = () => {
+ const storyArgs = MeterExample.args || {};
+
+ return (
+
+
+ );
+};
+
+// Status category configuration
+export const statusCategory = {
+ category: 'Status',
+ components: [
+ {
+ name: 'Alert',
+ component: Story Preview
+ );
+ }
+ // Fallback: render placeholder
+ return Story Preview
;
+ };
+
+ return (
+
+ {renderStory()}
+
+ );
+};
diff --git a/packages/components/stories/recipes/composition.stories.tsx b/packages/components/stories/recipes/composition.stories.tsx
index 67e43e98d..a24c4c9a0 100644
--- a/packages/components/stories/recipes/composition.stories.tsx
+++ b/packages/components/stories/recipes/composition.stories.tsx
@@ -132,8 +132,6 @@ export const RadioButtonGroup: Story = {