@itcase/ui-web 1.10.8 → 1.10.10

package/dist/types/components/Avatar/stories/AvatarDemo.stories.js

@@ -1,52 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { AVATAR_SRC_OPTIONS } from 'src/storybook/avatarSrcOptions';
-import { createComponentGallery } from 'src/storybook/createComponentGallery';
-import { avatarAppearanceShape } from '../appearance/avatarShape';
-import { avatarAppearanceSize } from '../appearance/avatarSize';
-import { avatarAppearanceStyle } from '../appearance/avatarStyle';
-import { avatarAppearanceSurface } from '../appearance/avatarSurface';
-import { Avatar } from '../Avatar';
-const gallery = createComponentGallery({
-    size: avatarAppearanceSize,
-    src: AVATAR_SRC_OPTIONS,
-    appearanceGroups: {
-        surface: avatarAppearanceSurface,
-    },
-    shape: avatarAppearanceShape,
-    style: avatarAppearanceStyle,
-});
-const meta = {
-    title: 'Molecules / Avatar',
-    component: Avatar,
-    args: {
-        appearance: 'surface sizeM solid rounded',
-        tier: 'Primary',
-        count: '5',
-        style: 'solid',
-        shape: 'circular',
-        badgeValue: '3',
-        firstName: 'John',
-        secondName: 'Doe',
-        badge: true,
-        src: '/avatar/Man.png',
-        isSkeleton: false,
-    },
-    parameters: {
-        design: {
-            type: 'figma',
-            url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=3-2&t=nC7GgbHgKhjeziiL-1',
-        },
-        layout: 'centered',
-    },
-    argTypes: {
-        appearance: gallery.argTypes.appearance,
-        tier: gallery.argTypes.tier,
-        style: gallery.argTypes.style,
-        shape: gallery.argTypes.shape,
-        src: gallery.argTypes.src,
-    },
-};
-export default meta;
-export const Demo = {
-    render: (args) => gallery.render(args, ({ appearance, args: args }) => (_jsx(Avatar, { appearance: appearance, src: args.src, firstName: args.firstName, secondName: args.secondName, badge: args.badge, badgeValue: args.badgeValue, count: args.count, isSkeleton: args.isSkeleton }))),
-};

package/dist/types/components/Avatar/stories/AvatarImage.stories.d.ts

@@ -1,24 +0,0 @@
-import type { StoryObj } from '@storybook/react-vite';
-import { Avatar } from '../Avatar';
-declare const meta: {
-    title: string;
-    component: typeof Avatar;
-    args: {
-        appearance: "surfacePrimary size96 full circular";
-        dataTestId: string;
-        src: string;
-    };
-    parameters: {
-        layout: string;
-        design: {
-            type: string;
-            url: string;
-        };
-    };
-    tags: string[];
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Image: Story;
-export declare const ImageWithIcon: Story;
-export declare const ImageWithBadge: Story;

package/dist/types/components/Avatar/stories/AvatarImage.stories.js

@@ -1,51 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as storybookTest from 'storybook/test';
-import { Avatar } from '../Avatar';
-const meta = {
-    title: 'Molecules / Avatar / Image',
-    component: Avatar,
-    args: {
-        appearance: 'surfacePrimary size96 full circular',
-        dataTestId: 'avatarTestId',
-        src: '/avatar/Man.png',
-    },
-    parameters: {
-        layout: 'centered',
-        design: {
-            type: 'figma',
-            url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=3-2&t=nC7GgbHgKhjeziiL-1',
-        },
-    },
-    tags: ['test'],
-};
-export default meta;
-export const Image = {
-    play: async ({ args, canvas, step }) => {
-        await step('Avatar shows image with matching src', async () => {
-            const avatar = canvas.getByTestId(args.dataTestId);
-            await storybookTest.expect(avatar).toBeInTheDocument();
-            const img = canvas.getByRole('img');
-            await storybookTest.expect(img).toBeInTheDocument();
-            await storybookTest.expect(img).toHaveAttribute('src', args.src);
-        });
-    },
-    render: (args) => {
-        return _jsx(Avatar, { ...args });
-    },
-};
-export const ImageWithIcon = {
-    args: {
-        iconSrc: '/icons/placeholder.svg',
-    },
-    render: (args) => {
-        return _jsx(Avatar, { ...args });
-    },
-};
-export const ImageWithBadge = {
-    args: {
-        badge: true,
-    },
-    render: (args) => {
-        return _jsx(Avatar, { ...args });
-    },
-};

package/dist/types/components/Avatar/stories/AvatarInteraction.stories.d.ts

@@ -1,21 +0,0 @@
-import type { StoryObj } from '@storybook/react-vite';
-import { Avatar } from '../Avatar';
-declare const meta: {
-    title: string;
-    component: typeof Avatar;
-    args: {
-        appearance: "surfacePrimary size96 full circular";
-        dataTestId: string;
-    };
-    parameters: {
-        layout: string;
-        design: {
-            type: string;
-            url: string;
-        };
-    };
-    tags: string[];
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const onClick: Story;

package/dist/types/components/Avatar/stories/AvatarInteraction.stories.js

@@ -1,36 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as storybookTest from 'storybook/test';
-import { Avatar } from '../Avatar';
-const meta = {
-    title: 'Molecules / Avatar / Interaction',
-    component: Avatar,
-    args: {
-        appearance: 'surfacePrimary size96 full circular',
-        dataTestId: 'avatarTestId',
-    },
-    parameters: {
-        layout: 'centered',
-        design: {
-            type: 'figma',
-            url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=3-2&t=nC7GgbHgKhjeziiL-1',
-        },
-    },
-    tags: ['test'],
-};
-export default meta;
-export const onClick = {
-    args: {
-        onClick: storybookTest['fn'](),
-    },
-    play: async ({ args, canvas, step }) => {
-        await step('Avatar should call onClick once on click', async () => {
-            const avatar = canvas.getByTestId(args.dataTestId);
-            await storybookTest.expect(avatar).toBeInTheDocument();
-            await storybookTest.userEvent.click(avatar);
-            await storybookTest.expect(args.onClick).toHaveBeenCalled();
-        });
-    },
-    render: (args) => {
-        return _jsx(Avatar, { ...args });
-    },
-};

package/dist/types/components/Avatar/stories/AvatarLetters.stories.d.ts

@@ -1,25 +0,0 @@
-import type { StoryObj } from '@storybook/react-vite';
-import { Avatar } from '../Avatar';
-declare const meta: {
-    title: string;
-    component: typeof Avatar;
-    args: {
-        appearance: "surfacePrimary size96 full circular";
-        dataTestId: string;
-        firstName: string;
-        secondName: string;
-    };
-    parameters: {
-        layout: string;
-        design: {
-            type: string;
-            url: string;
-        };
-    };
-    tags: string[];
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Letters: Story;
-export declare const LettersWithIcon: Story;
-export declare const LettersWithBadge: Story;

package/dist/types/components/Avatar/stories/AvatarLetters.stories.js

@@ -1,75 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as storybookTest from 'storybook/test';
-import { Avatar } from '../Avatar';
-const meta = {
-    title: 'Molecules / Avatar / Letters',
-    component: Avatar,
-    args: {
-        appearance: 'surfacePrimary size96 full circular',
-        dataTestId: 'avatarTestId',
-        firstName: 'John',
-        secondName: 'Doe',
-    },
-    parameters: {
-        layout: 'centered',
-        design: {
-            type: 'figma',
-            url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=3-2&t=nC7GgbHgKhjeziiL-1',
-        },
-    },
-    tags: ['test'],
-};
-export default meta;
-export const Letters = {
-    play: async ({ args, canvas, step }) => {
-        await step('Avatar shows initials', async () => {
-            const avatar = canvas.getByTestId(args.dataTestId);
-            await storybookTest.expect(avatar).toBeInTheDocument();
-            await storybookTest
-                .expect(avatar)
-                .toHaveTextContent(`${args.firstName[0]}${args.secondName[0]}`);
-        });
-    },
-    render: (args) => {
-        return _jsx(Avatar, { ...args });
-    },
-};
-export const LettersWithIcon = {
-    args: {
-        iconSrc: '/icons/placeholder.svg',
-    },
-    play: async ({ args, canvas, step }) => {
-        await step('Avatar shows initials and icon', async () => {
-            const avatar = canvas.getByTestId(args.dataTestId);
-            await storybookTest.expect(avatar).toBeInTheDocument();
-            await storybookTest
-                .expect(avatar)
-                .toHaveTextContent(`${args.firstName[0]}${args.secondName[0]}`);
-            const icon = avatar.querySelector('.icon');
-            await storybookTest.expect(icon).toBeInTheDocument();
-        });
-    },
-    render: (args) => {
-        return _jsx(Avatar, { ...args });
-    },
-};
-export const LettersWithBadge = {
-    args: {
-        badge: true,
-        badgeValue: '5',
-    },
-    play: async ({ args, canvas, step }) => {
-        await step('Avatar shows initials and badge', async () => {
-            const avatar = canvas.getByTestId(args.dataTestId);
-            await storybookTest.expect(avatar).toBeInTheDocument();
-            await storybookTest
-                .expect(avatar)
-                .toHaveTextContent(`${args.firstName[0]}${args.secondName[0]}`);
-            const badge = avatar.querySelector('.badge');
-            await storybookTest.expect(badge).toBeInTheDocument();
-        });
-    },
-    render: (args) => {
-        return _jsx(Avatar, { ...args });
-    },
-};

package/dist/types/components/Avatar/stories/AvatarSkeleton.stories.d.ts

@@ -1,22 +0,0 @@
-import type { StoryObj } from '@storybook/react-vite';
-import { Avatar } from '../Avatar';
-declare const meta: {
-    title: string;
-    component: typeof Avatar;
-    args: {
-        appearance: "surfaceSecondary size96 solid circular";
-        dataTestId: string;
-        isSkeleton: true;
-    };
-    parameters: {
-        layout: string;
-        design: {
-            type: string;
-            url: string;
-        };
-    };
-    tags: string[];
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Skeleton: Story;

package/dist/types/components/Avatar/stories/AvatarSkeleton.stories.js

@@ -1,31 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as storybookTest from 'storybook/test';
-import { Avatar } from '../Avatar';
-const meta = {
-    title: 'Molecules / Avatar / Skeleton',
-    component: Avatar,
-    args: {
-        appearance: 'surfaceSecondary size96 solid circular',
-        dataTestId: 'avatarTestId',
-        isSkeleton: true,
-    },
-    parameters: {
-        layout: 'centered',
-        design: {
-            type: 'figma',
-            url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=3-2&t=nC7GgbHgKhjeziiL-1',
-        },
-    },
-    tags: ['test'],
-};
-export default meta;
-export const Skeleton = {
-    play: async ({ args, canvas, step }) => {
-        await step('Avatar renders with skeleton class', async () => {
-            const avatar = canvas.getByTestId(args.dataTestId);
-            await storybookTest.expect(avatar).toBeInTheDocument();
-            await storybookTest.expect(avatar).toHaveClass('skeleton');
-        });
-    },
-    render: (args) => _jsx(Avatar, { ...args }),
-};

package/dist/types/components/AvatarStack/stories/AvatarStackCount.stories.d.ts

@@ -1,32 +0,0 @@
-import type { StoryObj } from '@storybook/react-vite';
-import { AvatarStack } from '..';
-declare const meta: {
-    title: string;
-    component: typeof AvatarStack;
-    args: {
-        dataTestId: string;
-        size: "56";
-        avatarAppearance: "surfaceSecondary solid circular";
-        avatarsList: {
-            id: string;
-            src: string;
-            firstName: string;
-            lastName: string;
-        }[];
-    };
-    parameters: {
-        layout: string;
-        design: {
-            type: string;
-            url: string;
-        };
-    };
-    tags: string[];
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Length1: Story;
-export declare const Length2: Story;
-export declare const Length3: Story;
-export declare const Length4: Story;
-export declare const Length5: Story;

package/dist/types/components/AvatarStack/stories/AvatarStackCount.stories.js

@@ -1,76 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as storybookTest from 'storybook/test';
-import { AvatarStack } from '..';
-import { avatarsListMock } from './__mock__';
-const meta = {
-    title: 'Molecules / Avatar Stack / Length',
-    component: AvatarStack,
-    args: {
-        dataTestId: 'avatarStackLengthTestId',
-        size: '56',
-        avatarAppearance: 'surfaceSecondary solid circular',
-        avatarsList: avatarsListMock,
-    },
-    parameters: {
-        layout: 'centered',
-        design: {
-            type: 'figma',
-            url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=726-536&t=nC7GgbHgKhjeziiL-1',
-        },
-    },
-    tags: ['test'],
-};
-export default meta;
-const lengthPlay = async ({ args, canvas, step }) => {
-    const { dataTestId, avatarsList = avatarsListMock, length = 0 } = args;
-    const overflow = avatarsList.length - length;
-    await step(`AvatarStack: ${length} avatar(s)${overflow > 0 ? ` and +${overflow} badge` : ', no overflow badge'}`, async () => {
-        const root = canvas.getByTestId(dataTestId);
-        const items = root.querySelectorAll(':scope > .avatar-stack__item:not(.avatar-stack__item-text)');
-        const badge = root.querySelector(':scope > .avatar-stack__item-text');
-        await storybookTest
-            .expect({
-            overflow: badge?.textContent ?? null,
-            avatars: items.length,
-        })
-            .toEqual({
-            overflow: overflow > 0 ? `+${overflow}` : null,
-            avatars: length,
-        });
-    });
-};
-export const Length1 = {
-    args: {
-        length: 1,
-    },
-    play: lengthPlay,
-    render: (args) => _jsx(AvatarStack, { ...args }),
-};
-export const Length2 = {
-    args: {
-        length: 2,
-    },
-    play: lengthPlay,
-    render: (args) => _jsx(AvatarStack, { ...args }),
-};
-export const Length3 = {
-    args: {
-        length: 3,
-    },
-    play: lengthPlay,
-    render: (args) => _jsx(AvatarStack, { ...args }),
-};
-export const Length4 = {
-    args: {
-        length: 4,
-    },
-    play: lengthPlay,
-    render: (args) => _jsx(AvatarStack, { ...args }),
-};
-export const Length5 = {
-    args: {
-        length: 5,
-    },
-    play: lengthPlay,
-    render: (args) => _jsx(AvatarStack, { ...args }),
-};

package/dist/types/components/AvatarStack/stories/AvatarStackDemo.stories.d.ts

@@ -1,26 +0,0 @@
-import type { StoryObj } from '@storybook/react-vite';
-import { AvatarStack } from '..';
-declare const meta: {
-    title: string;
-    component: typeof AvatarStack;
-    args: {
-        size: "56";
-        avatarAppearance: "surfaceSecondary solid circular";
-        avatarsList: {
-            id: string;
-            src: string;
-            firstName: string;
-            lastName: string;
-        }[];
-    };
-    parameters: {
-        layout: string;
-        design: {
-            type: string;
-            url: string;
-        };
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Demo: Story;

package/dist/types/components/AvatarStack/stories/AvatarStackDemo.stories.js

@@ -1,23 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { AvatarStack } from '..';
-import { avatarsListMock } from './__mock__';
-const meta = {
-    title: 'Molecules / Avatar Stack',
-    component: AvatarStack,
-    args: {
-        size: '56',
-        avatarAppearance: 'surfaceSecondary solid circular',
-        avatarsList: avatarsListMock,
-    },
-    parameters: {
-        layout: 'centered',
-        design: {
-            type: 'figma',
-            url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=726-536&t=nC7GgbHgKhjeziiL-1',
-        },
-    },
-};
-export default meta;
-export const Demo = {
-    render: (args) => _jsx(AvatarStack, { ...args }),
-};

package/dist/types/components/AvatarStack/stories/AvatarStackSize.stories.d.ts

@@ -1,34 +0,0 @@
-import type { StoryObj } from '@storybook/react-vite';
-import { AvatarStack } from '..';
-declare const meta: {
-    title: string;
-    component: typeof AvatarStack;
-    args: {
-        dataTestId: string;
-        size: "56";
-        avatarAppearance: "surfaceSecondary solid circular";
-        avatarsList: {
-            id: string;
-            src: string;
-            firstName: string;
-            lastName: string;
-        }[];
-        length: number;
-    };
-    parameters: {
-        layout: string;
-        design: {
-            type: string;
-            url: string;
-        };
-    };
-    tags: string[];
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Size56: Story;
-export declare const Size40: Story;
-export declare const Size32: Story;
-export declare const Size24: Story;
-export declare const Size20: Story;
-export declare const Size16: Story;

package/dist/types/components/AvatarStack/stories/AvatarStackSize.stories.js

@@ -1,77 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as storybookTest from 'storybook/test';
-import { AvatarStack } from '..';
-import { avatarsListMock } from './__mock__';
-const meta = {
-    title: 'Molecules / Avatar Stack / Size',
-    component: AvatarStack,
-    args: {
-        dataTestId: 'avatarStackSizeTestId',
-        size: '56',
-        avatarAppearance: 'surfaceSecondary solid circular',
-        avatarsList: avatarsListMock,
-        length: 1,
-    },
-    parameters: {
-        layout: 'centered',
-        design: {
-            type: 'figma',
-            url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=726-536&t=nC7GgbHgKhjeziiL-1',
-        },
-    },
-    tags: ['test'],
-};
-export default meta;
-const sizePlay = async ({ args, canvas, step }) => {
-    const { dataTestId, size, avatarsList = avatarsListMock, length = avatarsListMock.length, } = args;
-    const root = canvas.getByTestId(dataTestId);
-    const item = root.querySelector(':scope > .avatar-stack__item:not(.avatar-stack__item-text)');
-    await step(`AvatarStack: avatar ${size}px`, async () => {
-        await storybookTest.expect(root).toHaveClass(`avatar-stack_size_${size}`);
-        await storybookTest.expect(item).toHaveClass(`avatar_size_${size}`);
-        await storybookTest
-            .expect([item.clientWidth, item.clientHeight])
-            .toEqual([Number(size), Number(size)]);
-    });
-    const badge = root.querySelector(':scope > .avatar-stack__item-text');
-    await step(`Badge text is +${avatarsList.length - length}`, async () => {
-        await storybookTest
-            .expect(badge)
-            .toHaveTextContent(`+${avatarsList.length - length}`);
-    });
-    await step(`Badge size is ${size}px`, async () => {
-        await storybookTest
-            .expect([badge.clientWidth, badge.clientHeight])
-            .toEqual([Number(size), Number(size)]);
-    });
-};
-export const Size56 = {
-    args: { size: '56' },
-    play: sizePlay,
-    render: (args) => _jsx(AvatarStack, { ...args }),
-};
-export const Size40 = {
-    args: { size: '40' },
-    play: sizePlay,
-    render: (args) => _jsx(AvatarStack, { ...args }),
-};
-export const Size32 = {
-    args: { size: '32' },
-    play: sizePlay,
-    render: (args) => _jsx(AvatarStack, { ...args }),
-};
-export const Size24 = {
-    args: { size: '24' },
-    play: sizePlay,
-    render: (args) => _jsx(AvatarStack, { ...args }),
-};
-export const Size20 = {
-    args: { size: '20' },
-    play: sizePlay,
-    render: (args) => _jsx(AvatarStack, { ...args }),
-};
-export const Size16 = {
-    args: { size: '16' },
-    play: sizePlay,
-    render: (args) => _jsx(AvatarStack, { ...args }),
-};

package/dist/types/components/AvatarStack/stories/AvatarStackSkeleton.stories.d.ts

@@ -1,29 +0,0 @@
-import type { StoryObj } from '@storybook/react-vite';
-import { AvatarStack } from '../AvatarStack';
-declare const meta: {
-    title: string;
-    component: typeof AvatarStack;
-    args: {
-        dataTestId: string;
-        size: "56";
-        avatarAppearance: "surfaceSecondary solid circular";
-        avatarsList: {
-            id: string;
-            src: string;
-            firstName: string;
-            lastName: string;
-        }[];
-        isSkeleton: true;
-    };
-    parameters: {
-        layout: string;
-        design: {
-            type: string;
-            url: string;
-        };
-    };
-    tags: string[];
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Skeleton: Story;