@itcase/ui-web 1.9.104 → 1.9.105

package/dist/types/components/Tile/Tile.interface.d.ts

@@ -6,6 +6,7 @@ import { BadgeProps } from 'src/components/Badge/Badge.interface';
 import { IconProps } from 'src/components/Icon/Icon.interface';
 import { TextProps } from 'src/components/Text/Text.interface';
 import { TitleProps } from 'src/components/Title/Title.interface';
+import type { ComponentGalleryArgs } from 'src/storybook/createComponentGallery';
 type TileAppearanceProps = {
     alignDirection?: DirectionProps;
     badgeAppearance?: BadgeProps['appearance'];
@@ -73,4 +74,8 @@ type TileAppearance = TileConfig['appearance'];
 type TileAppearanceStyle = AppearanceRecord<AppearanceStyleKey, TileAppearanceProps, 'borderColor' | 'fill'>;
 type TileAppearanceShape = Partial<Record<AppearanceShapeKey, Partial<Pick<TileAppearanceProps, 'shape'>>>>;
 type TileAppearanceSize = AppearancePartialRecord<AppearanceSizeKey, TileAppearanceProps, 'badgeAppearanceSize' | 'descTextSize' | 'iconFillSize' | 'iconSize' | 'size' | 'titleTextSize'>;
-export type { TileAppearance, TileAppearanceProps, TileAppearanceShape, TileAppearanceSize, TileAppearanceStyle, TileConfig, TileProps, };
+type TileAppearanceKey = NonNullable<TileProps['appearance']>;
+type TileGalleryStory = ComponentGalleryArgs & Pick<TileProps, 'badgeValue' | 'desc' | 'isSkeleton' | 'title'> & {
+    showIcon?: boolean;
+};
+export type { TileAppearance, TileAppearanceKey, TileAppearanceProps, TileAppearanceShape, TileAppearanceSize, TileAppearanceStyle, TileConfig, TileGalleryStory, TileProps, };

package/dist/types/components/Tile/__test__/TileTest.stories.d.ts

@@ -0,0 +1,22 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Tile } from '..';
+declare const meta: {
+    title: string;
+    component: typeof Tile;
+    args: {
+        appearance: "surfacePrimary sizeL solid rounded";
+        dataTestId: string;
+        title: string;
+        desc: string;
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Skeleton: Story;
+export declare const WithIcon: Story;
+export declare const WithBadge: Story;
+export declare const Children: Story;

package/dist/types/components/Tile/__test__/TileTest.stories.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as storybookTest from 'storybook/test';
+import { icons24 } from '@itcase/icons-default';
+import { Button } from 'src/components/Button';
+import { Tile } from '..';
+const meta = {
+    title: 'Molecules / Tile / __test__',
+    component: Tile,
+    args: {
+        appearance: 'surfacePrimary sizeL solid rounded',
+        dataTestId: 'tileTestId',
+        title: 'Title 123',
+        desc: 'Text 123',
+    },
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['test'],
+};
+export default meta;
+export const Skeleton = {
+    play: async ({ args, canvas, step }) => {
+        await step('Tile renders with skeleton class', async () => {
+            const tile = canvas.getByTestId(args.dataTestId);
+            await storybookTest.expect(tile).toBeInTheDocument();
+            await storybookTest.expect(tile).toHaveClass('skeleton');
+        });
+    },
+    args: {
+        isSkeleton: true,
+    },
+    render: (args) => _jsx(Tile, { ...args }),
+};
+export const WithIcon = {
+    play: async ({ args, canvas, step }) => {
+        await step('Tile with icon in DOM', async () => {
+            const tile = canvas.getByTestId(args.dataTestId);
+            await storybookTest.expect(tile).toBeInTheDocument();
+            const iconEl = tile.querySelector('.tile__icon');
+            await storybookTest.expect(iconEl).toBeInTheDocument();
+        });
+    },
+    args: {
+        icon: icons24.Placeholder.Default,
+    },
+    render: (args) => _jsx(Tile, { ...args }),
+};
+export const WithBadge = {
+    play: async ({ args, canvas, step }) => {
+        await step('Tile with badge in DOM', async () => {
+            const tile = canvas.getByTestId(args.dataTestId);
+            await storybookTest.expect(tile).toBeInTheDocument();
+            const badgeEl = tile.querySelector('.tile__badge');
+            await storybookTest.expect(badgeEl).toBeInTheDocument();
+        });
+    },
+    args: {
+        badgeValue: '5',
+    },
+    render: (args) => _jsx(Tile, { ...args }),
+};
+export const Children = {
+    play: async ({ args, canvas, step }) => {
+        await step('Tile with after content', async () => {
+            const tile = canvas.getByTestId(args.dataTestId);
+            await storybookTest.expect(tile).toBeInTheDocument();
+            const tileChildren = tile.querySelector('.tile__wrapper')?.children;
+            await storybookTest.expect(tileChildren?.length).toBeGreaterThan(1);
+        });
+    },
+    args: {
+        children: (_jsx(Button, { appearance: "accentPrimary sizeXL solid rounded", width: "fill", label: "Label" })),
+    },
+    render: (args) => _jsx(Tile, { ...args }),
+};

package/dist/types/components/Tile/appearance/tileShape.d.ts

@@ -6,16 +6,16 @@ declare const tileAppearanceShape: {
         shape: "rounded";
     };
     roundedXL: {
-        shape: "rounded";
+        shape: "roundedXL";
     };
     roundedL: {
-        shape: "rounded";
+        shape: "roundedL";
     };
     roundedM: {
-        shape: "rounded";
+        shape: "roundedM";
     };
     roundedS: {
-        shape: "rounded";
+        shape: "roundedS";
     };
 };
 export { tileAppearanceShape };

package/dist/types/components/Tile/appearance/tileShape.js

@@ -6,16 +6,16 @@ const tileAppearanceShape = {
         shape: 'rounded',
     },
     roundedXL: {
-        shape: 'rounded',
+        shape: 'roundedXL',
     },
     roundedL: {
-        shape: 'rounded',
+        shape: 'roundedL',
     },
     roundedM: {
-        shape: 'rounded',
+        shape: 'roundedM',
     },
     roundedS: {
-        shape: 'rounded',
+        shape: 'roundedS',
     },
 };
 export { tileAppearanceShape };

package/dist/types/components/Tile/appearance/tileSurface.d.ts

@@ -4,32 +4,32 @@ declare const tileAppearanceSurface: {
         titleTextColor: "surfaceTextPrimary";
         descTextColor: "surfaceTextPrimary";
         borderColor: "surfaceBorderTertiary";
-        badgeAppearance: "accentPrimary";
-        iconAppearance: "accentPrimary";
+        badgeAppearance: "accentPrimary sizeM solid rounded";
+        iconAppearance: "accentPrimary size12_12 solid rounded";
     };
     surfaceQuaternary: {
         fill: "surfaceQuaternary";
         titleTextColor: "surfaceTextPrimary";
         descTextColor: "surfaceTextPrimary";
         borderColor: "surfaceBorderTertiary";
-        badgeAppearance: "accentPrimary";
-        iconAppearance: "accentPrimary";
+        badgeAppearance: "accentPrimary sizeM solid rounded";
+        iconAppearance: "accentPrimary size12_12 solid rounded";
     };
     surfaceSecondary: {
         fill: "surfaceSecondary";
         titleTextColor: "surfaceTextPrimary";
         descTextColor: "surfaceTextPrimary";
         borderColor: "surfaceBorderTertiary";
-        badgeAppearance: "accentPrimary";
-        iconAppearance: "accentPrimary";
+        badgeAppearance: "accentPrimary sizeM solid rounded";
+        iconAppearance: "accentPrimary size12_12 solid rounded";
     };
     surfaceTertiary: {
         fill: "surfaceTertiary";
         titleTextColor: "surfaceTextPrimary";
         descTextColor: "surfaceTextPrimary";
         borderColor: "surfaceBorderTertiary";
-        badgeAppearance: "accentPrimary";
-        iconAppearance: "accentPrimary";
+        badgeAppearance: "accentPrimary sizeM solid rounded";
+        iconAppearance: "accentPrimary size12_12 solid rounded";
     };
 };
 export { tileAppearanceSurface };

package/dist/types/components/Tile/appearance/tileSurface.js

@@ -4,32 +4,32 @@ const tileAppearanceSurface = {
         titleTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderTertiary',
-        badgeAppearance: 'accentPrimary',
-        iconAppearance: 'accentPrimary',
+        badgeAppearance: 'accentPrimary sizeM solid rounded',
+        iconAppearance: 'accentPrimary size12_12 solid rounded',
     },
     surfaceQuaternary: {
         fill: 'surfaceQuaternary',
         titleTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderTertiary',
-        badgeAppearance: 'accentPrimary',
-        iconAppearance: 'accentPrimary',
+        badgeAppearance: 'accentPrimary sizeM solid rounded',
+        iconAppearance: 'accentPrimary size12_12 solid rounded',
     },
     surfaceSecondary: {
         fill: 'surfaceSecondary',
         titleTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderTertiary',
-        badgeAppearance: 'accentPrimary',
-        iconAppearance: 'accentPrimary',
+        badgeAppearance: 'accentPrimary sizeM solid rounded',
+        iconAppearance: 'accentPrimary size12_12 solid rounded',
     },
     surfaceTertiary: {
         fill: 'surfaceTertiary',
         titleTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderTertiary',
-        badgeAppearance: 'accentPrimary',
-        iconAppearance: 'accentPrimary',
+        badgeAppearance: 'accentPrimary sizeM solid rounded',
+        iconAppearance: 'accentPrimary size12_12 solid rounded',
     },
 };
 export { tileAppearanceSurface };

package/dist/types/components/Tile/stories/TileBadge.stories.d.ts

@@ -4,7 +4,7 @@ declare const meta: {
     title: string;
     component: typeof Tile;
     args: {
-        appearance: "surfacePrimary sizeXL";
+        appearance: "surfacePrimary sizeXL solid rounded";
         title: string;
         desc: string;
         badgeValue: string;

package/dist/types/components/Tile/stories/TileBadge.stories.js

@@ -4,7 +4,7 @@ const meta = {
     title: 'Molecules / Tile / Badge',
     component: Tile,
     args: {
-        appearance: 'surfacePrimary sizeXL',
+        appearance: 'surfacePrimary sizeXL solid rounded',
         title: 'Title 123',
         desc: 'Text 123',
         badgeValue: '3',

package/dist/types/components/Tile/stories/TileDemo.stories.d.ts

@@ -1,20 +1,6 @@
-import type { StoryObj } from '@storybook/react-vite';
-import { Tile } from '../Tile';
-declare const meta: {
-    title: string;
-    component: typeof Tile;
-    args: {
-        appearance: "surfacePrimary sizeXL";
-        title: string;
-        desc: string;
-        badgeValue: string;
-        icon: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
-    };
-    parameters: {
-        layout: string;
-    };
-};
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { TileGalleryStory } from '../Tile.interface';
+declare const meta: Meta<TileGalleryStory>;
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<TileGalleryStory>;
 export declare const Demo: Story;
-export declare const Skeleton: Story;

package/dist/types/components/Tile/stories/TileDemo.stories.js

@@ -1,35 +1,45 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { icons24 } from '@itcase/icons-default';
-import { Button } from 'src/components/Button';
+import { createComponentGallery } from 'src/storybook/createComponentGallery';
+import { tileAppearanceShape } from '../appearance/tileShape';
+import { tileAppearanceSize } from '../appearance/tileSize';
+import { tileAppearanceStyle } from '../appearance/tileStyle';
+import { tileAppearanceSurface } from '../appearance/tileSurface';
 import { Tile } from '../Tile';
+const galleryIcon = icons24.Placeholder.Default;
+const gallery = createComponentGallery({
+    size: tileAppearanceSize,
+    appearanceGroups: {
+        surface: tileAppearanceSurface,
+    },
+    shape: tileAppearanceShape,
+    style: tileAppearanceStyle,
+});
 const meta = {
     title: 'Molecules / Tile',
     component: Tile,
     args: {
-        appearance: 'surfacePrimary sizeXL',
-        title: 'Title 123',
-        desc: 'Text 123',
+        appearance: 'surface sizeM solid rounded',
+        tier: 'Primary',
+        style: 'solid',
+        shape: 'rounded',
+        title: 'Title',
+        desc: 'Description',
         badgeValue: '3',
-        icon: icons24.Placeholder.Default,
+        showIcon: true,
+        isSkeleton: false,
     },
     parameters: {
         layout: 'centered',
     },
+    argTypes: {
+        appearance: gallery.argTypes.appearance,
+        tier: gallery.argTypes.tier,
+        style: gallery.argTypes.style,
+        shape: gallery.argTypes.shape,
+    },
 };
 export default meta;
 export const Demo = {
-    args: {
-        after: (_jsx(Button, { appearance: "accentPrimary sizeXL", width: "fill", label: "Label" })),
-    },
-    render: (args) => {
-        return _jsx(Tile, { ...args });
-    },
-};
-export const Skeleton = {
-    args: {
-        isSkeleton: true,
-    },
-    render: (args) => {
-        return _jsx(Tile, { ...args });
-    },
+    render: (args) => gallery.render(args, ({ appearance, args: storyArgs }) => (_jsx(Tile, { appearance: appearance, title: storyArgs.title, desc: storyArgs.desc, badgeValue: storyArgs.badgeValue, icon: storyArgs.showIcon ? galleryIcon : undefined, isSkeleton: storyArgs.isSkeleton }))),
 };

package/dist/types/components/Tile/stories/TileIcon.stories.d.ts

@@ -4,7 +4,7 @@ declare const meta: {
     title: string;
     component: typeof Tile;
     args: {
-        appearance: "surfacePrimary sizeXL";
+        appearance: "surfacePrimary sizeXL solid rounded";
         title: string;
         desc: string;
         badgeValue: string;

package/dist/types/components/Tile/stories/TileIcon.stories.js

@@ -5,7 +5,7 @@ const meta = {
     title: 'Molecules / Tile / Icon',
     component: Tile,
     args: {
-        appearance: 'surfacePrimary sizeXL',
+        appearance: 'surfacePrimary sizeXL solid rounded',
         title: 'Title 123',
         desc: 'Text 123',
         badgeValue: '3',

package/dist/types/components/Tile/stories/TileShape.stories.js

@@ -14,7 +14,7 @@ const meta = {
 export default meta;
 export const Rounded = {
     args: {
-        appearance: 'surfacePrimary sizeXL rounded',
+        appearance: 'surfacePrimary sizeXL solid rounded',
     },
     render: (args) => {
         return _jsx(Tile, { ...args });
@@ -22,7 +22,7 @@ export const Rounded = {
 };
 export const RoundedS = {
     args: {
-        appearance: 'surfacePrimary sizeXL roundedS',
+        appearance: 'surfacePrimary sizeXL solid roundedS',
     },
     render: (args) => {
         return _jsx(Tile, { ...args });
@@ -30,7 +30,7 @@ export const RoundedS = {
 };
 export const RoundedM = {
     args: {
-        appearance: 'surfacePrimary sizeXL roundedM',
+        appearance: 'surfacePrimary sizeXL solid roundedM',
     },
     render: (args) => {
         return _jsx(Tile, { ...args });
@@ -38,7 +38,7 @@ export const RoundedM = {
 };
 export const RoundedL = {
     args: {
-        appearance: 'surfacePrimary sizeXL roundedL',
+        appearance: 'surfacePrimary sizeXL solid roundedL',
     },
     render: (args) => {
         return _jsx(Tile, { ...args });
@@ -46,7 +46,7 @@ export const RoundedL = {
 };
 export const RoundedXL = {
     args: {
-        appearance: 'surfacePrimary sizeXL roundedXL',
+        appearance: 'surfacePrimary sizeXL solid roundedXL',
     },
     render: (args) => {
         return _jsx(Tile, { ...args });
@@ -54,7 +54,7 @@ export const RoundedXL = {
 };
 export const Circular = {
     args: {
-        appearance: 'surfacePrimary sizeXL circular',
+        appearance: 'surfacePrimary sizeXL solid circular',
     },
     render: (args) => {
         return _jsx(Tile, { ...args });

package/dist/types/components/Tile/stories/TileSize.stories.js

@@ -15,7 +15,7 @@ const meta = {
 export default meta;
 export const SizeXL = {
     args: {
-        appearance: 'surfacePrimary sizeXL',
+        appearance: 'surfacePrimary sizeXL solid rounded',
     },
     render: (args) => {
         return _jsx(Tile, { ...args });
@@ -23,7 +23,7 @@ export const SizeXL = {
 };
 export const SizeL = {
     args: {
-        appearance: 'surfacePrimary sizeL',
+        appearance: 'surfacePrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Tile, { ...args });
@@ -31,7 +31,7 @@ export const SizeL = {
 };
 export const SizeM = {
     args: {
-        appearance: 'surfacePrimary sizeM',
+        appearance: 'surfacePrimary sizeM solid rounded',
     },
     render: (args) => {
         return _jsx(Tile, { ...args });
@@ -39,7 +39,7 @@ export const SizeM = {
 };
 export const SizeS = {
     args: {
-        appearance: 'surfacePrimary sizeS',
+        appearance: 'surfacePrimary sizeS solid rounded',
     },
     render: (args) => {
         return _jsx(Tile, { ...args });
@@ -47,7 +47,7 @@ export const SizeS = {
 };
 export const SizeXS = {
     args: {
-        appearance: 'surfacePrimary sizeXS',
+        appearance: 'surfacePrimary sizeXS solid rounded',
     },
     render: (args) => {
         return _jsx(Tile, { ...args });
@@ -55,7 +55,7 @@ export const SizeXS = {
 };
 export const SizeXXS = {
     args: {
-        appearance: 'surfacePrimary sizeXXS',
+        appearance: 'surfacePrimary sizeXXS solid rounded',
     },
     render: (args) => {
         return _jsx(Tile, { ...args });

package/dist/types/components/Tile/stories/TileStyle.stories.js

@@ -14,7 +14,7 @@ const meta = {
 export default meta;
 export const Solid = {
     args: {
-        appearance: 'surfacePrimary sizeXL solid',
+        appearance: 'surfacePrimary sizeXL solid rounded',
     },
     render: (args) => {
         return _jsx(Tile, { ...args });
@@ -22,7 +22,7 @@ export const Solid = {
 };
 export const Outlined = {
     args: {
-        appearance: 'surfacePrimary sizeXL outlined',
+        appearance: 'surfacePrimary sizeXL outlined rounded',
     },
     render: (args) => {
         return _jsx(Tile, { ...args });
@@ -30,7 +30,7 @@ export const Outlined = {
 };
 export const Ghost = {
     args: {
-        appearance: 'surfacePrimary sizeXL ghost',
+        appearance: 'surfacePrimary sizeXL ghost rounded',
     },
     render: (args) => {
         return _jsx(Tile, { ...args });
@@ -38,7 +38,7 @@ export const Ghost = {
 };
 export const Full = {
     args: {
-        appearance: 'surfacePrimary sizeXL full',
+        appearance: 'surfacePrimary sizeXL full rounded',
     },
     render: (args) => {
         return _jsx(Tile, { ...args });

package/dist/types/components/Tile/stories/TileSwap.stories.d.ts

@@ -4,7 +4,7 @@ declare const meta: {
     title: string;
     component: typeof Tile;
     args: {
-        appearance: "surfacePrimary sizeXL";
+        appearance: "surfacePrimary sizeXL solid rounded";
         title: string;
         desc: string;
     };

package/dist/types/components/Tile/stories/TileSwap.stories.js

@@ -5,7 +5,7 @@ const meta = {
     title: 'Molecules / Tile',
     component: Tile,
     args: {
-        appearance: 'surfacePrimary sizeXL',
+        appearance: 'surfacePrimary sizeXL solid rounded',
         title: 'Title 123',
         desc: 'Text 123',
     },
@@ -16,7 +16,7 @@ const meta = {
 export default meta;
 export const Before = {
     args: {
-        before: (_jsx(Button, { appearance: "accentPrimary sizeXL", width: "fill", label: "Label" })),
+        before: (_jsx(Button, { appearance: "accentPrimary sizeXL solid rounded", width: "fill", label: "Label" })),
     },
     render: (args) => {
         return _jsx(Tile, { ...args });
@@ -29,7 +29,7 @@ export const Children = {
 };
 export const After = {
     args: {
-        after: (_jsx(Button, { appearance: "accentPrimary sizeXL", width: "fill", label: "Label" })),
+        after: (_jsx(Button, { appearance: "accentPrimary sizeXL solid rounded", width: "fill", label: "Label" })),
     },
     render: (args) => {
         return _jsx(Tile, { ...args });

package/dist/types/components/Title/Title.interface.d.ts

@@ -4,6 +4,7 @@ import type { AppearancePartialRecord } from '@itcase/types-ui';
 import { StyleAttributes } from '@itcase/ui-core/hooks';
 import { IconProps } from 'src/components/Icon/Icon.interface';
 import { TextProps } from 'src/components/Text/Text.interface';
+import type { ComponentGalleryArgs } from 'src/storybook/createComponentGallery';
 type TitleAppearanceProps = {
     borderColor?: BorderColorProps;
     borderHover?: BorderColorHoverProps;
@@ -70,4 +71,6 @@ type TitleConfig = AppearanceConfig<AppearanceKeysTitle, TitleAppearanceProps>;
 type TitleAppearance = TitleConfig['appearance'];
 type TitleAppearanceStyle = Partial<Record<AppearanceStyleKey, Partial<Pick<TitleAppearanceProps, 'fill'>>>>;
 type TitleAppearanceSize = AppearancePartialRecord<AppearanceTitleSizeKey, TitleAppearanceProps, 'iconAfterFillSize' | 'iconAfterSize' | 'iconBeforeFillSize' | 'iconBeforeSize' | 'size'>;
-export type { TitleAppearance, TitleAppearanceSize, TitleAppearanceStyle, TitleConfig, TitleProps, };
+type TitleAppearanceKey = NonNullable<TitleProps['appearance']>;
+type TitleGalleryStory = ComponentGalleryArgs & Pick<TitleProps, 'children' | 'isSkeleton'>;
+export type { TitleAppearance, TitleAppearanceKey, TitleAppearanceSize, TitleAppearanceStyle, TitleConfig, TitleGalleryStory, TitleProps, };

package/dist/types/components/Title/__test__/TitleTest.stories.d.ts

@@ -0,0 +1,19 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Title } from '..';
+declare const meta: {
+    title: string;
+    component: typeof Title;
+    args: {
+        appearance: "surfacePrimary sizeH2 solid rounded";
+        dataTestId: string;
+        children: string;
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Skeleton: Story;
+export declare const Children: Story;

package/dist/types/components/Title/__test__/TitleTest.stories.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as storybookTest from 'storybook/test';
+import { Title } from '..';
+const meta = {
+    title: 'Typography / Title / __test__',
+    component: Title,
+    args: {
+        appearance: 'surfacePrimary sizeH2 solid rounded',
+        dataTestId: 'titleTestId',
+        children: 'Title',
+    },
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['test'],
+};
+export default meta;
+export const Skeleton = {
+    args: {
+        isSkeleton: true,
+    },
+    play: async ({ args, canvas, step }) => {
+        await step('Title renders with skeleton class', async () => {
+            const title = canvas.getByTestId(args.dataTestId);
+            await storybookTest.expect(title).toBeInTheDocument();
+            await storybookTest.expect(title).toHaveClass('skeleton');
+        });
+    },
+    render: (args) => _jsx(Title, { ...args }),
+};
+export const Children = {
+    play: async ({ args, canvas, step }) => {
+        await step('Title renders with children content', async () => {
+            const title = canvas.getByTestId(args.dataTestId);
+            await storybookTest.expect(title).toBeInTheDocument();
+            await storybookTest.expect(title).toHaveTextContent(String(args.children));
+        });
+    },
+    render: (args) => _jsx(Title, { ...args }),
+};

package/dist/types/components/Title/stories/TitleDemo.stories.d.ts

@@ -1,18 +1,6 @@
-import type { StoryObj } from '@storybook/react-vite';
-import { Title } from '../Title';
-declare const meta: {
-    title: string;
-    component: typeof Title;
-    args: {
-        size: "h1";
-        textColor: "surfaceTextPrimary";
-        children: string;
-    };
-    parameters: {
-        layout: string;
-    };
-};
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { TitleGalleryStory } from '../Title.interface';
+declare const meta: Meta<TitleGalleryStory>;
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<TitleGalleryStory>;
 export declare const Demo: Story;
-export declare const Skeleton: Story;