@itcase/ui-web 1.9.104 → 1.9.106

package/dist/types/components/Chips/stories/ChipsMuted.stories.js

@@ -14,7 +14,7 @@ const meta = {
 export default meta;
 export const Surface = {
     args: {
-        appearance: 'surfaceMutedPrimary sizeXL',
+        appearance: 'surfaceMutedPrimary sizeXL solid rounded',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -22,7 +22,7 @@ export const Surface = {
 };
 export const Accent = {
     args: {
-        appearance: 'accentMutedPrimary sizeXL',
+        appearance: 'accentMutedPrimary sizeXL solid rounded',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -30,7 +30,7 @@ export const Accent = {
 };
 export const Error = {
     args: {
-        appearance: 'errorMutedPrimary sizeXL',
+        appearance: 'errorMutedPrimary sizeXL solid rounded',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -38,7 +38,7 @@ export const Error = {
 };
 export const Special = {
     args: {
-        appearance: 'specialMutedPrimary sizeXL',
+        appearance: 'specialMutedPrimary sizeXL solid rounded',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -46,7 +46,7 @@ export const Special = {
 };
 export const Extra = {
     args: {
-        appearance: 'extraMutedPrimary sizeXL',
+        appearance: 'extraMutedPrimary sizeXL solid rounded',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -54,7 +54,7 @@ export const Extra = {
 };
 export const Success = {
     args: {
-        appearance: 'successMutedPrimary sizeXL',
+        appearance: 'successMutedPrimary sizeXL solid rounded',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -62,7 +62,7 @@ export const Success = {
 };
 export const Danger = {
     args: {
-        appearance: 'dangerMutedPrimary sizeXL',
+        appearance: 'dangerMutedPrimary sizeXL solid rounded',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -70,7 +70,7 @@ export const Danger = {
 };
 export const Warning = {
     args: {
-        appearance: 'warningMutedPrimary sizeXL',
+        appearance: 'warningMutedPrimary sizeXL solid rounded',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -78,7 +78,7 @@ export const Warning = {
 };
 export const Info = {
     args: {
-        appearance: 'infoMutedPrimary sizeXL',
+        appearance: 'infoMutedPrimary sizeXL solid rounded',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });

package/dist/types/components/Chips/stories/ChipsShape.stories.js

@@ -13,7 +13,7 @@ const meta = {
 export default meta;
 export const Rounded = {
     args: {
-        appearance: 'surfaceSecondary sizeXXL rounded',
+        appearance: 'surfaceSecondary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -21,7 +21,7 @@ export const Rounded = {
 };
 export const RoundedS = {
     args: {
-        appearance: 'surfaceSecondary sizeXXL roundedS',
+        appearance: 'surfaceSecondary sizeXXL solid roundedS',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -29,7 +29,7 @@ export const RoundedS = {
 };
 export const RoundedM = {
     args: {
-        appearance: 'surfaceSecondary sizeXXL roundedM',
+        appearance: 'surfaceSecondary sizeXXL solid roundedM',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -37,7 +37,7 @@ export const RoundedM = {
 };
 export const RoundedL = {
     args: {
-        appearance: 'surfaceSecondary sizeXXL roundedL',
+        appearance: 'surfaceSecondary sizeXXL solid roundedL',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -45,7 +45,7 @@ export const RoundedL = {
 };
 export const RoundedXL = {
     args: {
-        appearance: 'surfaceSecondary sizeXXL roundedXL',
+        appearance: 'surfaceSecondary sizeXXL solid roundedXL',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -53,7 +53,7 @@ export const RoundedXL = {
 };
 export const Circular = {
     args: {
-        appearance: 'surfaceSecondary sizeXXL circular',
+        appearance: 'surfaceSecondary sizeXXL solid circular',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });

package/dist/types/components/Chips/stories/ChipsSize.stories.js

@@ -14,7 +14,7 @@ const meta = {
 export default meta;
 export const SizeXXL = {
     args: {
-        appearance: 'surfacePrimary sizeXXL',
+        appearance: 'surfacePrimary sizeXXL solid rounded',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -22,7 +22,7 @@ export const SizeXXL = {
 };
 export const SizeXL = {
     args: {
-        appearance: 'surfacePrimary sizeXL',
+        appearance: 'surfacePrimary sizeXL solid rounded',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -30,7 +30,7 @@ export const SizeXL = {
 };
 export const SizeL = {
     args: {
-        appearance: 'surfacePrimary sizeL',
+        appearance: 'surfacePrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -38,7 +38,7 @@ export const SizeL = {
 };
 export const SizeM = {
     args: {
-        appearance: 'surfacePrimary sizeM',
+        appearance: 'surfacePrimary sizeM solid rounded',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -46,7 +46,7 @@ export const SizeM = {
 };
 export const SizeS = {
     args: {
-        appearance: 'surfacePrimary sizeS',
+        appearance: 'surfacePrimary sizeS solid rounded',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -54,7 +54,7 @@ export const SizeS = {
 };
 export const SizeXS = {
     args: {
-        appearance: 'surfacePrimary sizeXS',
+        appearance: 'surfacePrimary sizeXS solid rounded',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -62,7 +62,7 @@ export const SizeXS = {
 };
 export const SizeXXS = {
     args: {
-        appearance: 'surfacePrimary sizeXXS',
+        appearance: 'surfacePrimary sizeXXS solid rounded',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });

package/dist/types/components/Chips/stories/ChipsStyle.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(Chips, { ...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(Chips, { ...args });
@@ -30,7 +30,7 @@ export const Outlined = {
 };
 export const Full = {
     args: {
-        appearance: 'surfacePrimary sizeXL full',
+        appearance: 'surfacePrimary sizeXL full rounded',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });
@@ -38,7 +38,7 @@ export const Full = {
 };
 export const Ghost = {
     args: {
-        appearance: 'surfacePrimary sizeL ghost',
+        appearance: 'surfacePrimary sizeL ghost rounded',
     },
     render: (args) => {
         return _jsx(Chips, { ...args });

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

@@ -21,16 +21,16 @@ declare const choiceAppearance: {
         shape: "rounded";
     };
     roundedXL: {
-        shape: "rounded";
+        shape: "roundedXL";
     };
     roundedL: {
-        shape: "rounded";
+        shape: "roundedL";
     };
     roundedM: {
-        shape: "rounded";
+        shape: "roundedM";
     };
     roundedS: {
-        shape: "rounded";
+        shape: "roundedS";
     };
     solid: {
         borderColor: "none";

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

@@ -4,6 +4,7 @@ import type { AppearancePartialRecord, AppearanceRecord } from '@itcase/types-ui
 import type { 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 ChoiceAppearanceProps = {
     activeIcon?: IconProps['SvgImage'];
     activeIconItemFill?: IconProps['fill'];
@@ -85,4 +86,6 @@ type ChoiceAppearance = ChoiceConfig['appearance'];
 type ChoiceAppearanceStyle = AppearanceRecord<AppearanceStyleKey, ChoiceAppearanceProps, 'borderColor' | 'fill'>;
 type ChoiceAppearanceShape = Partial<Record<AppearanceShapeKey, Partial<Pick<ChoiceAppearanceProps, 'shape'>>>>;
 type ChoiceAppearanceSize = AppearancePartialRecord<AppearanceSizeKey, ChoiceAppearanceProps, 'iconSize' | 'labelTextSize' | 'size'>;
-export type { ChoiceAppearance, ChoiceAppearanceShape, ChoiceAppearanceSize, ChoiceAppearanceStyle, ChoiceConfig, ChoiceProps, };
+type ChoiceAppearanceKey = NonNullable<ChoiceProps['appearance']>;
+type ChoiceGalleryStory = ComponentGalleryArgs & Pick<ChoiceProps, 'active' | 'isDisabled' | 'isSkeleton' | 'options'>;
+export type { ChoiceAppearance, ChoiceAppearanceKey, ChoiceAppearanceShape, ChoiceAppearanceSize, ChoiceAppearanceStyle, ChoiceConfig, ChoiceGalleryStory, ChoiceProps, };

package/dist/types/components/Choice/__test__/ChoiceTest.stories.d.ts

@@ -0,0 +1,31 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Choice } from '..';
+declare const meta: {
+    title: string;
+    component: typeof Choice;
+    args: {
+        appearance: "defaultPrimary sizeL solid rounded";
+        dataTestId: string;
+        active: {
+            value: string;
+        };
+        options: {
+            label: string;
+            iconAfter: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+            iconBefore: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+            value: string;
+        }[];
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const WithContent: Story;
+export declare const Disabled: Story;
+export declare const Skeleton: Story;
+export declare const WithIcon: Story;
+export declare const WithLabelIcon: Story;
+export declare const ChangeActiveChoice: Story;

package/dist/types/components/Choice/__test__/ChoiceTest.stories.js

@@ -0,0 +1,133 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable react-hooks/rules-of-hooks */
+import { useState } from 'react';
+import * as storybookTest from 'storybook/test';
+import { Choice } from '..';
+import { choiceListIconMock, choiceListMock } from '../stories/__mock__';
+const meta = {
+    title: 'Atoms / Choice / __test__',
+    component: Choice,
+    args: {
+        appearance: 'defaultPrimary sizeL solid rounded',
+        dataTestId: 'choiceTestId',
+        active: choiceListMock.active,
+        options: choiceListMock.choices,
+    },
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['test'],
+};
+export default meta;
+export const WithContent = {
+    play: async ({ component, args, canvas, step }) => {
+        await step('ChoiceGroup has children options', async () => {
+            const choiceGroup = canvas.getByTestId(`${args.dataTestId}${component?.name}`);
+            await storybookTest.expect(choiceGroup).toBeInTheDocument();
+            const choice = choiceGroup.children;
+            await storybookTest
+                .expect(choice)
+                .toHaveLength(choiceListMock.choices.length);
+        });
+    },
+    render: (args) => _jsx(Choice, { ...args }),
+};
+export const Disabled = {
+    play: async ({ component, args, canvas, step }) => {
+        const choice = canvas.getByTestId(`${args.dataTestId}${component?.name}`);
+        const choiceItems = choice.children;
+        for (const choiceItem of Array.from(choiceItems)) {
+            await step('Choice item is disabled', async () => {
+                await storybookTest.expect(choiceItem).toHaveClass(/state_disabled/);
+            });
+            await step('Click does not invoke onClick on choice item', async () => {
+                await storybookTest.userEvent.click(choiceItem);
+                await storybookTest.waitFor(async () => {
+                    await storybookTest
+                        .expect(args?.setActiveSegment)
+                        .not.toHaveBeenCalled();
+                }, { timeout: 100 });
+            });
+        }
+    },
+    args: {
+        isDisabled: true,
+        setActiveSegment: storybookTest['fn'](),
+    },
+    render: (args) => _jsx(Choice, { ...args }),
+};
+export const Skeleton = {
+    play: async ({ component, args, canvas, step }) => {
+        await step('Choice renders with skeleton class', async () => {
+            const choice = canvas.getByTestId(`${args.dataTestId}${component?.name}`);
+            await storybookTest.expect(choice).toBeInTheDocument();
+            await storybookTest.expect(choice).toHaveClass('skeleton');
+        });
+    },
+    args: {
+        isSkeleton: true,
+    },
+    render: (args) => _jsx(Choice, { ...args }),
+};
+export const WithIcon = {
+    play: async ({ component, args, canvas, step }) => {
+        await step('Choice renders with icons', async () => {
+            const choice = canvas.getByTestId(`${args.dataTestId}${component?.name}`);
+            await storybookTest.expect(choice).toBeInTheDocument();
+            const choiceItems = choice.children;
+            for (const choiceItem of Array.from(choiceItems)) {
+                const choiceItemIcon = choiceItem.querySelector('.choice__item-icon');
+                await storybookTest.expect(choiceItemIcon).toBeInTheDocument();
+            }
+        });
+    },
+    args: {
+        active: choiceListIconMock.active,
+        options: choiceListIconMock.choices,
+    },
+    render: (args) => _jsx(Choice, { ...args }),
+};
+export const WithLabelIcon = {
+    play: async ({ component, args, canvas, step }) => {
+        await step('Choice renders with icons and labels', async () => {
+            const choice = canvas.getByTestId(`${args.dataTestId}${component?.name}`);
+            await storybookTest.expect(choice).toBeInTheDocument();
+            const choiceItems = choice.children;
+            for (const choiceItem of Array.from(choiceItems)) {
+                const choiceItemIcon = choiceItem.querySelector('.choice__item-icon');
+                await storybookTest.expect(choiceItemIcon).toBeInTheDocument();
+                await storybookTest.expect(choiceItem).toHaveTextContent(/Label/);
+            }
+        });
+    },
+    render: (args) => _jsx(Choice, { ...args }),
+};
+export const ChangeActiveChoice = {
+    play: async ({ component, args, canvas, step }) => {
+        await step('When click on inactive Choice, it becomes active', async () => {
+            const choice = canvas.getByTestId(`${args.dataTestId}${component?.name}`);
+            await storybookTest.expect(choice).toBeInTheDocument();
+            const newActiveChoice = choice.children[1];
+            const inputActiveChoiceItem = newActiveChoice.querySelector('.choice__item-radio');
+            await step('Click via userEvent on inactive choice item', async () => {
+                await storybookTest.userEvent.click(inputActiveChoiceItem);
+            });
+            await step('onClick called once and choice item turns to active state', async () => {
+                await storybookTest.expect(args.setActiveSegment).toHaveBeenCalled();
+                await storybookTest
+                    .expect(newActiveChoice)
+                    .toHaveClass('choice__item_active');
+            });
+        });
+    },
+    args: {
+        setActiveSegment: storybookTest['fn'](),
+    },
+    render: (args) => {
+        const [activeChoice, setActiveChoice] = useState(args.options[0]);
+        return (_jsx(Choice, { ...args, active: activeChoice, setActiveSegment: (item) => {
+                setActiveChoice(item);
+                args.setActiveSegment?.(item);
+            } }));
+    },
+};

package/dist/types/components/Choice/appearance/choiceShape.d.ts

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

package/dist/types/components/Choice/appearance/choiceShape.js

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

package/dist/types/components/Choice/stories/ChoiceDemo.stories.d.ts

@@ -1,25 +1,6 @@
-import type { StoryObj } from '@storybook/react-vite';
-import { Choice } from '../Choice';
-declare const meta: {
-    title: string;
-    component: typeof Choice;
-    args: {
-        appearance: "defaultPrimary sizeL solid";
-        active: {
-            value: string;
-        };
-        options: {
-            label: string;
-            iconAfter: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
-            iconBefore: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
-            value: string;
-        }[];
-    };
-    parameters: {
-        layout: string;
-    };
-};
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { ChoiceGalleryStory } from '../Choice.interface';
+declare const meta: Meta<ChoiceGalleryStory>;
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<ChoiceGalleryStory>;
 export declare const Demo: Story;
-export declare const Skeleton: Story;

package/dist/types/components/Choice/stories/ChoiceDemo.stories.js

@@ -1,29 +1,51 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { createComponentGallery } from 'src/storybook/createComponentGallery';
+import { choiceAppearanceDefault } from '../appearance/choiceDefault';
+import { choiceAppearanceDisabled } from '../appearance/choiceDisabled';
+import { choiceAppearanceError } from '../appearance/choiceError';
+import { choiceAppearanceRequire } from '../appearance/choiceRequire';
+import { choiceAppearanceShape } from '../appearance/choiceShape';
+import { choiceAppearanceSize } from '../appearance/choiceSize';
+import { choiceAppearanceStyle } from '../appearance/choiceStyle';
+import { choiceAppearanceSuccess } from '../appearance/choiceSuccess';
 import { Choice } from '../Choice';
 import { choiceListMock } from './__mock__';
+const gallery = createComponentGallery({
+    size: choiceAppearanceSize,
+    appearanceGroups: {
+        default: choiceAppearanceDefault,
+        disabled: choiceAppearanceDisabled,
+        error: choiceAppearanceError,
+        require: choiceAppearanceRequire,
+        success: choiceAppearanceSuccess,
+    },
+    shape: choiceAppearanceShape,
+    style: choiceAppearanceStyle,
+});
 const meta = {
     title: 'Atoms / Choice',
     component: Choice,
     args: {
-        appearance: 'defaultPrimary sizeL solid',
+        appearance: 'default sizeM solid rounded',
+        tier: 'Primary',
+        style: 'solid',
+        shape: 'rounded',
         active: choiceListMock.active,
         options: choiceListMock.choices,
+        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(Choice, { ...args });
-    },
-};
-export const Skeleton = {
-    args: {
-        isSkeleton: true,
-    },
-    render: (args) => {
-        return _jsx(Choice, { ...args });
-    },
+    render: (args) => gallery.render(args, ({ appearance, args: storyArgs }) => (_jsx(Choice, { appearance: appearance, active: storyArgs.active, options: storyArgs.options, isDisabled: storyArgs.isDisabled, isSkeleton: storyArgs.isSkeleton }))),
 };

package/dist/types/components/Choice/stories/ChoiceIcon.stories.js

@@ -14,26 +14,26 @@ const meta = {
 export default meta;
 export const DefaultPrimary = {
     args: {
-        appearance: 'defaultPrimary sizeL solid',
+        appearance: 'defaultPrimary sizeL solid rounded',
     },
 };
 export const ErrorPrimary = {
     args: {
-        appearance: 'errorPrimary sizeL solid',
+        appearance: 'errorPrimary sizeL solid rounded',
     },
 };
 export const SuccessPrimary = {
     args: {
-        appearance: 'successPrimary sizeL solid',
+        appearance: 'successPrimary sizeL solid rounded',
     },
 };
 export const RequirePrimary = {
     args: {
-        appearance: 'requirePrimary sizeL solid',
+        appearance: 'requirePrimary sizeL solid rounded',
     },
 };
 export const DisabledPrimary = {
     args: {
-        appearance: 'disabledPrimary sizeL solid',
+        appearance: 'disabledPrimary sizeL solid rounded',
     },
 };

package/dist/types/components/Choice/stories/ChoiceLabel.stories.js

@@ -15,7 +15,7 @@ const meta = {
 export default meta;
 export const DefaultPrimary = {
     args: {
-        appearance: 'defaultPrimary sizeL solid',
+        appearance: 'defaultPrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Choice, { ...args });
@@ -23,7 +23,7 @@ export const DefaultPrimary = {
 };
 export const ErrorPrimary = {
     args: {
-        appearance: 'errorPrimary sizeL solid',
+        appearance: 'errorPrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Choice, { ...args });
@@ -31,7 +31,7 @@ export const ErrorPrimary = {
 };
 export const SuccessPrimary = {
     args: {
-        appearance: 'successPrimary sizeL solid',
+        appearance: 'successPrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Choice, { ...args });
@@ -39,7 +39,7 @@ export const SuccessPrimary = {
 };
 export const RequirePrimary = {
     args: {
-        appearance: 'requirePrimary sizeL solid',
+        appearance: 'requirePrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Choice, { ...args });
@@ -47,7 +47,7 @@ export const RequirePrimary = {
 };
 export const Disabled = {
     args: {
-        appearance: 'disabledPrimary sizeL solid',
+        appearance: 'disabledPrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Choice, { ...args });