@itcase/ui-web 1.9.104 → 1.9.106

package/dist/types/components/InputPassword/stories/InputPasswordSize.stories.js

@@ -11,7 +11,7 @@ const meta = {
 export default meta;
 export const SizeXXL = {
     args: {
-        appearance: 'defaultPrimary sizeXXL',
+        appearance: 'defaultPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(InputPassword, { ...args });
@@ -19,7 +19,7 @@ export const SizeXXL = {
 };
 export const SizeXL = {
     args: {
-        appearance: 'defaultPrimary sizeXL',
+        appearance: 'defaultPrimary sizeXL solid rounded',
     },
     render: (args) => {
         return _jsx(InputPassword, { ...args });
@@ -27,7 +27,7 @@ export const SizeXL = {
 };
 export const SizeL = {
     args: {
-        appearance: 'defaultPrimary sizeL',
+        appearance: 'defaultPrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(InputPassword, { ...args });
@@ -35,7 +35,7 @@ export const SizeL = {
 };
 export const SizeM = {
     args: {
-        appearance: 'defaultPrimary sizeM',
+        appearance: 'defaultPrimary sizeM solid rounded',
     },
     render: (args) => {
         return _jsx(InputPassword, { ...args });
@@ -43,7 +43,7 @@ export const SizeM = {
 };
 export const SizeS = {
     args: {
-        appearance: 'defaultPrimary sizeS',
+        appearance: 'defaultPrimary sizeS solid rounded',
     },
     render: (args) => {
         return _jsx(InputPassword, { ...args });

package/dist/types/components/InputPassword/stories/InputPasswordStyle.stories.js

@@ -10,7 +10,7 @@ const meta = {
 export default meta;
 export const Solid = {
     args: {
-        appearance: 'defaultPrimary sizeXXL solid',
+        appearance: 'defaultPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(InputPassword, { ...args });
@@ -18,7 +18,7 @@ export const Solid = {
 };
 export const Outlined = {
     args: {
-        appearance: 'defaultPrimary sizeXXL outlined',
+        appearance: 'defaultPrimary sizeXXL outlined rounded',
     },
     render: (args) => {
         return _jsx(InputPassword, { ...args });
@@ -26,7 +26,7 @@ export const Outlined = {
 };
 export const Ghost = {
     args: {
-        appearance: 'defaultPrimary sizeXXL ghost',
+        appearance: 'defaultPrimary sizeXXL ghost rounded',
     },
     render: (args) => {
         return _jsx(InputPassword, { ...args });
@@ -34,7 +34,7 @@ export const Ghost = {
 };
 export const Full = {
     args: {
-        appearance: 'defaultPrimary sizeXXL full',
+        appearance: 'defaultPrimary sizeXXL full rounded',
     },
     render: (args) => {
         return _jsx(InputPassword, { ...args });

package/dist/types/components/InputPassword/stories/InputPasswordSuccess.stories.d.ts

@@ -4,7 +4,7 @@ declare const meta: {
     title: string;
     component: typeof InputPassword;
     args: {
-        appearance: "successPrimary sizeXXL";
+        appearance: "successPrimary sizeXXL solid rounded";
     };
 };
 export default meta;

package/dist/types/components/InputPassword/stories/InputPasswordSuccess.stories.js

@@ -4,7 +4,7 @@ const meta = {
     title: 'Atoms / InputPassword / Success',
     component: InputPassword,
     args: {
-        appearance: 'successPrimary sizeXXL',
+        appearance: 'successPrimary sizeXXL solid rounded',
     },
 };
 export default meta;

package/dist/types/components/Label/Label.appearance.d.ts

@@ -218,16 +218,16 @@ declare const labelAppearance: {
         shape: "rounded";
     };
     roundedXL: {
-        shape: "rounded";
+        shape: "roundedXL";
     };
     roundedL: {
-        shape: "rounded";
+        shape: "roundedL";
     };
     roundedM: {
-        shape: "rounded";
+        shape: "roundedM";
     };
     roundedS: {
-        shape: "rounded";
+        shape: "roundedS";
     };
     disabledPrimary: {
         fill: "disabledPrimary";

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

@@ -5,6 +5,7 @@ import { StyleAttributes } from '@itcase/ui-core/hooks';
 import { IconProps } from 'src/components/Icon/Icon.interface';
 import { TextProps } from 'src/components/Text/Text.interface';
 import { TooltipProps } from 'src/components/Tooltip/Tooltip.interface';
+import type { ComponentGalleryArgs } from 'src/storybook/createComponentGallery';
 type LabelAppearanceProps = {
     align?: AlignProps;
     borderColor?: BorderColorProps;
@@ -63,4 +64,6 @@ type LabelAppearance = LabelConfig['appearance'];
 type LabelAppearanceStyle = AppearanceRecord<AppearanceStyleKey, LabelAppearanceProps, 'borderColor' | 'fill'>;
 type LabelAppearanceShape = Partial<Record<AppearanceShapeKey, Partial<Pick<LabelAppearanceProps, 'shape'>>>>;
 type LabelAppearanceSize = AppearancePartialRecord<AppearanceSizeKey, LabelAppearanceProps, Extract<keyof LabelAppearanceProps, 'iconAfterFillSize' | 'iconAfterSize' | 'iconBeforeFillSize' | 'iconBeforeSize' | 'labelTextSize' | 'size'>>;
-export type { LabelAppearance, LabelAppearanceShape, LabelAppearanceSize, LabelAppearanceStyle, LabelConfig, LabelProps, };
+type LabelAppearanceKey = NonNullable<LabelProps['appearance']>;
+type LabelGalleryStory = ComponentGalleryArgs & Pick<LabelProps, 'isDisabled' | 'isSkeleton' | 'label'>;
+export type { LabelAppearance, LabelAppearanceKey, LabelAppearanceShape, LabelAppearanceSize, LabelAppearanceStyle, LabelConfig, LabelGalleryStory, LabelProps, };

package/dist/types/components/Label/__test__/LabelTest.stories.d.ts

@@ -0,0 +1,18 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Label } from '..';
+declare const meta: {
+    title: string;
+    component: typeof Label;
+    args: {
+        appearance: "accentPrimary sizeXXL solid rounded";
+        dataTestId: string;
+        label: string;
+    };
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Children: Story;
+export declare const Skeleton: Story;

package/dist/types/components/Label/__test__/LabelTest.stories.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as storybookTest from 'storybook/test';
+import { Label } from '..';
+const meta = {
+    title: 'Atoms / Label / __test__',
+    component: Label,
+    args: {
+        appearance: 'accentPrimary sizeXXL solid rounded',
+        dataTestId: 'labelTestId',
+        label: 'Label',
+    },
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Children = {
+    play: async ({ args, canvas, step }) => {
+        await step('Label renders with children', async () => {
+            const label = canvas.getByTestId(args.dataTestId);
+            await storybookTest.expect(label).toBeInTheDocument();
+            await storybookTest.expect(label).toHaveTextContent(args.label);
+        });
+    },
+    render: (args) => _jsx(Label, { ...args }),
+};
+export const Skeleton = {
+    play: async ({ args, canvas, step }) => {
+        await step('Label renders with skeleton class', async () => {
+            const label = canvas.getByTestId(args.dataTestId);
+            await storybookTest.expect(label).toBeInTheDocument();
+            await storybookTest.expect(label).toHaveClass('skeleton');
+        });
+    },
+    args: {
+        isSkeleton: true,
+    },
+    render: (args) => _jsx(Label, { ...args }),
+};

package/dist/types/components/Label/appearance/labelShape.d.ts

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

package/dist/types/components/Label/appearance/labelShape.js

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

package/dist/types/components/Label/stories/Label.stories.d.ts

@@ -1,17 +1,6 @@
-import type { StoryObj } from '@storybook/react-vite';
-import { Label } from '../Label';
-declare const meta: {
-    title: string;
-    component: typeof Label;
-    args: {
-        appearance: "surfacePrimary sizeXXL";
-        label: string;
-    };
-    parameters: {
-        layout: string;
-    };
-};
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { LabelGalleryStory } from '../Label.interface';
+declare const meta: Meta<LabelGalleryStory>;
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<LabelGalleryStory>;
 export declare const Demo: Story;
-export declare const Skeleton: Story;

package/dist/types/components/Label/stories/Label.stories.js

@@ -1,27 +1,61 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { createComponentGallery } from 'src/storybook/createComponentGallery';
+import { labelAppearanceAccent } from '../appearance/labelAccent';
+import { labelAppearanceDanger } from '../appearance/labelDanger';
+import { labelAppearanceDisabled } from '../appearance/labelDisabled';
+import { labelAppearanceError } from '../appearance/labelError';
+import { labelAppearanceExtra } from '../appearance/labelExtra';
+import { labelAppearanceGradient } from '../appearance/labelGradient';
+import { labelAppearanceInfo } from '../appearance/labelInfo';
+import { labelAppearanceShape } from '../appearance/labelShape';
+import { labelAppearanceSize } from '../appearance/labelSize';
+import { labelAppearanceSpecial } from '../appearance/labelSpecial';
+import { labelAppearanceStyle } from '../appearance/labelStyle';
+import { labelAppearanceSuccess } from '../appearance/labelSuccess';
+import { labelAppearanceSurface } from '../appearance/labelSurface';
+import { labelAppearanceWarning } from '../appearance/labelWarning';
 import { Label } from '../Label';
+const gallery = createComponentGallery({
+    size: labelAppearanceSize,
+    appearanceGroups: {
+        accent: labelAppearanceAccent,
+        danger: labelAppearanceDanger,
+        disabled: labelAppearanceDisabled,
+        error: labelAppearanceError,
+        extra: labelAppearanceExtra,
+        gradient: labelAppearanceGradient,
+        info: labelAppearanceInfo,
+        special: labelAppearanceSpecial,
+        success: labelAppearanceSuccess,
+        surface: labelAppearanceSurface,
+        warning: labelAppearanceWarning,
+    },
+    shape: labelAppearanceShape,
+    style: labelAppearanceStyle,
+});
 const meta = {
     title: 'Atoms / Label',
     component: Label,
     args: {
-        appearance: 'surfacePrimary sizeXXL',
+        appearance: 'surface sizeM solid rounded',
+        tier: 'Primary',
+        style: 'solid',
+        shape: 'rounded',
         label: 'Label',
+        isDisabled: false,
+        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 = {
-    render: (args) => {
-        return _jsx(Label, { ...args });
-    },
-};
-export const Skeleton = {
-    args: {
-        isSkeleton: true,
-    },
-    render: (args) => {
-        return _jsx(Label, { ...args });
-    },
+    render: (args) => gallery.render(args, ({ appearance, args: storyArgs }) => (_jsx(Label, { appearance: appearance, label: storyArgs.label, isDisabled: storyArgs.isDisabled, isSkeleton: storyArgs.isSkeleton }))),
 };

package/dist/types/components/Label/stories/LabelDefault.stories.js

@@ -16,7 +16,7 @@ const meta = {
 export default meta;
 export const Surface = {
     args: {
-        appearance: 'surfacePrimary sizeXXL',
+        appearance: 'surfacePrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Label, { ...args });
@@ -24,7 +24,7 @@ export const Surface = {
 };
 export const Accent = {
     args: {
-        appearance: 'accentPrimary sizeXXL',
+        appearance: 'accentPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Label, { ...args });
@@ -32,7 +32,7 @@ export const Accent = {
 };
 export const Special = {
     args: {
-        appearance: 'specialPrimary sizeXXL',
+        appearance: 'specialPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Label, { ...args });
@@ -40,7 +40,7 @@ export const Special = {
 };
 export const Error = {
     args: {
-        appearance: 'errorPrimary sizeXXL',
+        appearance: 'errorPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Label, { ...args });
@@ -48,7 +48,7 @@ export const Error = {
 };
 export const Extra = {
     args: {
-        appearance: 'extraPrimary sizeXXL',
+        appearance: 'extraPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Label, { ...args });
@@ -56,7 +56,7 @@ export const Extra = {
 };
 export const Warning = {
     args: {
-        appearance: 'warningPrimary sizeXXL',
+        appearance: 'warningPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Label, { ...args });
@@ -64,7 +64,7 @@ export const Warning = {
 };
 export const Danger = {
     args: {
-        appearance: 'dangerPrimary sizeXXL',
+        appearance: 'dangerPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Label, { ...args });
@@ -72,7 +72,7 @@ export const Danger = {
 };
 export const Disabled = {
     args: {
-        appearance: 'disabledPrimary sizeXXL',
+        appearance: 'disabledPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Label, { ...args });
@@ -80,7 +80,7 @@ export const Disabled = {
 };
 export const Success = {
     args: {
-        appearance: 'successPrimary sizeXXL',
+        appearance: 'successPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Label, { ...args });
@@ -88,7 +88,7 @@ export const Success = {
 };
 export const Info = {
     args: {
-        appearance: 'infoPrimary sizeXXL',
+        appearance: 'infoPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Label, { ...args });

package/dist/types/components/Label/stories/LabelGradient.stories.js

@@ -16,7 +16,7 @@ const meta = {
 export default meta;
 export const Gradient = {
     args: {
-        appearance: 'gradientPrimary sizeXXL',
+        appearance: 'gradientPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Label, { ...args });

package/dist/types/components/Label/stories/LabelMuted.stories.js

@@ -16,7 +16,7 @@ const meta = {
 export default meta;
 export const SurfacePrimary = {
     args: {
-        appearance: 'surfaceMutedPrimary sizeXXL',
+        appearance: 'surfaceMutedPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Label, { ...args });
@@ -24,7 +24,7 @@ export const SurfacePrimary = {
 };
 export const AccentPrimary = {
     args: {
-        appearance: 'accentMutedPrimary sizeXXL',
+        appearance: 'accentMutedPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Label, { ...args });
@@ -32,7 +32,7 @@ export const AccentPrimary = {
 };
 export const ErrorPrimary = {
     args: {
-        appearance: 'errorMutedPrimary sizeXXL',
+        appearance: 'errorMutedPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Label, { ...args });
@@ -40,7 +40,7 @@ export const ErrorPrimary = {
 };
 export const SpecialPrimary = {
     args: {
-        appearance: 'specialMutedPrimary sizeXXL',
+        appearance: 'specialMutedPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Label, { ...args });
@@ -48,7 +48,7 @@ export const SpecialPrimary = {
 };
 export const ExtraPrimary = {
     args: {
-        appearance: 'extraMutedPrimary sizeXXL',
+        appearance: 'extraMutedPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Label, { ...args });
@@ -56,7 +56,7 @@ export const ExtraPrimary = {
 };
 export const SuccessPrimary = {
     args: {
-        appearance: 'successMutedPrimary sizeXXL',
+        appearance: 'successMutedPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Label, { ...args });
@@ -64,7 +64,7 @@ export const SuccessPrimary = {
 };
 export const DangerPrimary = {
     args: {
-        appearance: 'dangerMutedPrimary sizeXXL',
+        appearance: 'dangerMutedPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Label, { ...args });
@@ -72,7 +72,7 @@ export const DangerPrimary = {
 };
 export const WarningPrimary = {
     args: {
-        appearance: 'warningMutedPrimary sizeXXL',
+        appearance: 'warningMutedPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Label, { ...args });
@@ -80,7 +80,7 @@ export const WarningPrimary = {
 };
 export const InfoPrimary = {
     args: {
-        appearance: 'infoMutedPrimary sizeXXL',
+        appearance: 'infoMutedPrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Label, { ...args });

package/dist/types/components/Label/stories/LabelSize.stories.js

@@ -13,7 +13,7 @@ const meta = {
 export default meta;
 export const SizeXXL = {
     args: {
-        appearance: 'surfaceSecondary sizeXXL',
+        appearance: 'surfaceSecondary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Label, { ...args });
@@ -21,7 +21,7 @@ export const SizeXXL = {
 };
 export const SizeXL = {
     args: {
-        appearance: 'surfaceSecondary sizeXL',
+        appearance: 'surfaceSecondary sizeXL solid rounded',
     },
     render: (args) => {
         return _jsx(Label, { ...args });
@@ -29,7 +29,7 @@ export const SizeXL = {
 };
 export const SizeL = {
     args: {
-        appearance: 'surfaceSecondary sizeL',
+        appearance: 'surfaceSecondary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Label, { ...args });
@@ -37,7 +37,7 @@ export const SizeL = {
 };
 export const SizeM = {
     args: {
-        appearance: 'surfaceSecondary sizeM',
+        appearance: 'surfaceSecondary sizeM solid rounded',
     },
     render: (args) => {
         return _jsx(Label, { ...args });
@@ -45,7 +45,7 @@ export const SizeM = {
 };
 export const SizeS = {
     args: {
-        appearance: 'surfaceSecondary sizeS',
+        appearance: 'surfaceSecondary sizeS solid rounded',
     },
     render: (args) => {
         return _jsx(Label, { ...args });
@@ -53,7 +53,7 @@ export const SizeS = {
 };
 export const SizeXS = {
     args: {
-        appearance: 'surfaceSecondary sizeXS',
+        appearance: 'surfaceSecondary sizeXS solid rounded',
     },
     render: (args) => {
         return _jsx(Label, { ...args });
@@ -61,7 +61,7 @@ export const SizeXS = {
 };
 export const SizeXXS = {
     args: {
-        appearance: 'surfaceSecondary sizeXXS',
+        appearance: 'surfaceSecondary sizeXXS solid rounded',
     },
     render: (args) => {
         return _jsx(Label, { ...args });

package/dist/types/components/Label/stories/LabelStyle.stories.js

@@ -13,7 +13,7 @@ const meta = {
 export default meta;
 export const Solid = {
     args: {
-        appearance: 'surfacePrimary sizeXXL solid',
+        appearance: 'surfacePrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Label, { ...args });
@@ -21,7 +21,7 @@ export const Solid = {
 };
 export const Outlined = {
     args: {
-        appearance: 'surfacePrimary sizeXXL outlined',
+        appearance: 'surfacePrimary sizeXXL outlined rounded',
     },
     render: (args) => {
         return _jsx(Label, { ...args });
@@ -29,7 +29,7 @@ export const Outlined = {
 };
 export const Ghost = {
     args: {
-        appearance: 'surfacePrimary sizeXXL ghost',
+        appearance: 'surfacePrimary sizeXXL ghost rounded',
     },
     render: (args) => {
         return _jsx(Label, { ...args });
@@ -37,7 +37,7 @@ export const Ghost = {
 };
 export const Full = {
     args: {
-        appearance: 'surfacePrimary sizeXXL full',
+        appearance: 'surfacePrimary sizeXXL full rounded',
     },
     render: (args) => {
         return _jsx(Label, { ...args });