@itcase/ui-web 1.9.112 → 1.9.113

package/dist/types/components/Badge/stories/BadgeDotIconCounter.stories.js

@@ -1,88 +1,49 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import * as storybookTest from 'storybook/test';
 import { icons24 } from '@itcase/icons-default';
 import { Badge } from '../Badge';
 const meta = {
-    title: 'Atoms / Badge / Dot + Icon + Counter',
+    title: 'Atoms / Badge',
     component: Badge,
     args: {
+        appearance: 'accentPrimary sizeXXL solid rounded',
+        dataTestId: 'badgeDotIconCounterTestId',
         dot: true,
         icon: icons24.Placeholder.Default,
         value: 3,
     },
     parameters: {
         layout: 'centered',
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/HmHn0BShJPXHU8SmuIP71M/ITCase---Atoms?node-id=0-1&t=n7EGLyP33amnXKYl-1',
+        },
     },
+    tags: ['test'],
 };
 export default meta;
-export const Accent = {
-    args: {
-        appearance: 'accentPrimary sizeXXL solid rounded',
-    },
-    render: (args) => {
-        return _jsx(Badge, { ...args });
-    },
-};
-export const Special = {
-    args: {
-        appearance: 'specialPrimary sizeXXL solid rounded',
-    },
-    render: (args) => {
-        return _jsx(Badge, { ...args });
-    },
-};
-export const Extra = {
-    args: {
-        appearance: 'extraPrimary sizeXXL solid rounded',
-    },
-    render: (args) => {
-        return _jsx(Badge, { ...args });
-    },
-};
-export const Surface = {
-    args: {
-        appearance: 'surfacePrimary sizeXXL solid rounded',
-    },
-    render: (args) => {
-        return _jsx(Badge, { ...args });
-    },
-};
-export const Success = {
-    args: {
-        appearance: 'successPrimary sizeXXL solid rounded',
-    },
-    render: (args) => {
-        return _jsx(Badge, { ...args });
-    },
-};
-export const Warning = {
-    args: {
-        appearance: 'warningPrimary sizeXXL solid rounded',
-    },
-    render: (args) => {
-        return _jsx(Badge, { ...args });
-    },
-};
-export const Danger = {
-    args: {
-        appearance: 'dangerPrimary sizeXXL solid rounded',
-    },
-    render: (args) => {
-        return _jsx(Badge, { ...args });
-    },
-};
-export const Info = {
-    args: {
-        appearance: 'infoPrimary sizeXXL solid rounded',
-    },
-    render: (args) => {
-        return _jsx(Badge, { ...args });
-    },
-};
-export const Disabled = {
-    args: {
-        appearance: 'disabledPrimary sizeXXL solid rounded',
-    },
-    render: (args) => {
-        return _jsx(Badge, { ...args });
-    },
+export const DotIconCounter = {
+    name: 'Dot + Icon + Counter',
+    play: async ({ args, canvas, step }) => {
+        await step('Badge: dot, icon and counter', async () => {
+            const badge = canvas.getByTestId(args.dataTestId);
+            await step(`Badge has class "badge_type_dot-icon-counter"`, async () => {
+                await storybookTest
+                    .expect(badge)
+                    .toHaveClass('badge_type_dot-icon-counter');
+            });
+            await step(`Badge has counter value is ${args.value}`, async () => {
+                await storybookTest.expect(badge).toHaveTextContent(String(args.value));
+            });
+            await step('Badge has icon', async () => {
+                await storybookTest.expect(badge.querySelector('.icon')).toBeTruthy();
+            });
+            await step('Badge has dot', async () => {
+                await storybookTest
+                    .expect(badge.querySelector('.badge__dot'))
+                    .toBeTruthy();
+            });
+        });
+    },
+    render: (args) => _jsx(Badge, { ...args }),
 };

package/dist/types/components/Divider/__test__/DividerTest.stories.js

@@ -25,6 +25,9 @@ export const Children = {
     render: (args) => _jsx(Divider, { ...args }),
 };
 export const Skeleton = {
+    args: {
+        isSkeleton: true,
+    },
     play: async ({ args, canvas, step }) => {
         await step('Divider renders with skelton class', async () => {
             const divider = canvas.getByTestId(args.dataTestId);
@@ -32,8 +35,5 @@ export const Skeleton = {
             await storybookTest.expect(divider).toHaveClass('skeleton');
         });
     },
-    args: {
-        isSkeleton: true,
-    },
     render: (args) => _jsx(Divider, { ...args }),
 };

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

@@ -79,6 +79,7 @@ declare const dropzoneAppearance: {
         hintTitle: string;
         hintTitleTextColor: "surfaceTextPrimary";
         hintTitleTextSize: "m";
+        removeThumbAppearance: "dangerPrimary sizeM solid rounded";
         removeThumbText: string;
         removeThumbTextColor: "errorTextPrimary";
         thumbBorderColor: "surfaceBorderTertiary";

package/dist/types/components/Dropzone/Dropzone.js

@@ -17,7 +17,7 @@ const dropzoneConfig = {
 };
 const Dropzone = React.memo(function Dropzone(props) {
     const { appearance, maxFiles = 5, maxSize = 10485760, // 10mb
-    dropzoneProps = {}, fieldValuesList: maybeFieldValuesList, fileErrorText, hintDescription, inputName, showFilename = true, thumbColumn, isSkeleton, isPreviews = true, onClickPreview, onAddFiles, onChangeFiles, onDeleteFile,
+    dropzoneProps = {}, fieldValuesList: maybeFieldValuesList, fileErrorText, hintDescription, inputName, showFilename = true, thumbColumn = 2, isSkeleton, isPreviews = true, onClickPreview, onAddFiles, onChangeFiles, onDeleteFile,
     // className, unused
     // size, unused
      } = props;

package/dist/types/components/Dropzone/appearance/dropzoneDefault.d.ts

@@ -5,6 +5,7 @@ declare const dropzoneAppearanceDefault: {
         hintTitle: string;
         hintTitleTextColor: "surfaceTextPrimary";
         hintTitleTextSize: "m";
+        removeThumbAppearance: "dangerPrimary sizeM solid rounded";
         removeThumbText: string;
         removeThumbTextColor: "errorTextPrimary";
         thumbBorderColor: "surfaceBorderTertiary";

package/dist/types/components/Dropzone/appearance/dropzoneDefault.js

@@ -5,6 +5,7 @@ const dropzoneAppearanceDefault = {
         hintTitle: 'Перетащите изображение или выберите файл с компьютера',
         hintTitleTextColor: 'surfaceTextPrimary',
         hintTitleTextSize: 'm',
+        removeThumbAppearance: 'dangerPrimary sizeM solid rounded',
         removeThumbText: 'удалить',
         removeThumbTextColor: 'errorTextPrimary',
         thumbBorderColor: 'surfaceBorderTertiary',

package/dist/types/components/Dropzone/stories/DropzoneDemo.stories.d.ts

@@ -11,4 +11,5 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const WithFiles: Story;
 export declare const Skeleton: Story;

package/dist/types/components/Dropzone/stories/DropzoneDemo.stories.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /* eslint-disable react-hooks/rules-of-hooks */
 import { useState } from 'react';
 import { Dropzone } from '../';
+import { dropzoneFieldValuesListMock } from './__mock__';
 const meta = {
     title: 'Molecules / Dropzone',
     component: Dropzone,
@@ -17,6 +18,12 @@ export const Default = {
         return (_jsx(Dropzone, { ...args, fieldValuesList: values, onChangeFiles: setValues }));
     },
 };
+export const WithFiles = {
+    render: (args) => {
+        const [values, setValues] = useState(dropzoneFieldValuesListMock);
+        return (_jsx(Dropzone, { ...args, fieldValuesList: values, onChangeFiles: setValues }));
+    },
+};
 export const Skeleton = {
     args: {
         isSkeleton: true,

package/dist/types/components/Dropzone/stories/__mock__/index.d.ts

@@ -0,0 +1,4 @@
+import type { DropzoneFileItem } from '../../Dropzone.interface';
+/** Form/backend values before hook converts them to DropzoneFileItem */
+declare const dropzoneFieldValuesListMock: DropzoneFileItem[];
+export { dropzoneFieldValuesListMock };

package/dist/types/components/Dropzone/stories/__mock__/index.js

@@ -0,0 +1,19 @@
+/** Form/backend values before hook converts them to DropzoneFileItem */
+const dropzoneFieldValuesListMock = [
+    {
+        id: 'dropzone-story-mock-1',
+        name: 'image-1.png',
+        image: '/avatar/Man.png',
+    },
+    {
+        id: 'dropzone-story-mock-2',
+        name: 'image-2.png',
+        image: '/avatar/Woman.png',
+    },
+    {
+        id: 'dropzone-story-mock-3',
+        name: 'image-3.png',
+        image: '/avatar/Woman2.png',
+    },
+];
+export { dropzoneFieldValuesListMock };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui-web",
-  "version": "1.9.112",
+  "version": "1.9.113",
   "description": "UI components",
   "keywords": "",
   "license": "MIT",
@@ -114,5 +114,5 @@
     "storybook": "^10.4.0",
     "typescript": "^6.0.3"
   },
-  "gitHead": "985b7cd49b2f7db7233d288d4561b5af826037f0"
+  "gitHead": "1a3cb82207abc56131b2ba26fa8f837886168942"
 }

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

@@ -1,21 +0,0 @@
-declare const avatarStackAppearance: {
-    size16: {
-        size: "16";
-    };
-    size20: {
-        size: "20";
-    };
-    size24: {
-        size: "24";
-    };
-    size32: {
-        size: "32";
-    };
-    size40: {
-        size: "40";
-    };
-    size56: {
-        size: "56";
-    };
-};
-export { avatarStackAppearance };

package/dist/types/components/AvatarStack/AvatarStack.appearance.js

@@ -1,5 +0,0 @@
-import { avatarStackAppearanceSize } from './appearance/avatarStackSize';
-const avatarStackAppearance = {
-    ...avatarStackAppearanceSize,
-};
-export { avatarStackAppearance };

package/dist/types/components/AvatarStack/__test__/AvatarStackTest.stories.js

@@ -1,45 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as storybookTest from 'storybook/test';
-import { AvatarStack } from '../AvatarStack';
-import { avatarsListMock } from '../stories/__mock__';
-const meta = {
-    title: 'Molecules / Avatar Stack / __test__',
-    component: AvatarStack,
-    args: {
-        dataTestId: 'avatarStackTestId',
-        avatarAppearance: `surfaceSecondary size56 solid rounded`,
-        avatarsList: avatarsListMock,
-    },
-    parameters: {
-        layout: 'centered',
-    },
-    tags: ['test'],
-};
-export default meta;
-export const Skeleton = {
-    play: async ({ args, canvas, step }) => {
-        await step('AvatarStack renders with skeleton class', async () => {
-            const avatarStack = canvas.getByTestId(args.dataTestId);
-            await storybookTest.expect(avatarStack).toBeInTheDocument();
-            await storybookTest.expect(avatarStack).toHaveClass('skeleton');
-        });
-    },
-    args: {
-        isSkeleton: true,
-    },
-    render: (args) => _jsx(AvatarStack, { ...args }),
-};
-export const Length = {
-    play: async ({ args, canvas, step }) => {
-        await step('AvatarStack renders with skeleton class', async () => {
-            const avatarStack = canvas.getByTestId(args.dataTestId);
-            await storybookTest.expect(avatarStack).toBeInTheDocument();
-            const avatarsItems = avatarStack.children;
-            await storybookTest.expect(avatarsItems.length).toBe(args.length);
-        });
-    },
-    args: {
-        length: 4,
-    },
-    render: (args) => _jsx(AvatarStack, { ...args }),
-};

package/dist/types/components/AvatarStack/appearance/avatarStackSize.d.ts

@@ -1,21 +0,0 @@
-declare const avatarStackAppearanceSize: {
-    size16: {
-        size: "16";
-    };
-    size20: {
-        size: "20";
-    };
-    size24: {
-        size: "24";
-    };
-    size32: {
-        size: "32";
-    };
-    size40: {
-        size: "40";
-    };
-    size56: {
-        size: "56";
-    };
-};
-export { avatarStackAppearanceSize };

package/dist/types/components/AvatarStack/appearance/avatarStackSize.js

@@ -1,21 +0,0 @@
-const avatarStackAppearanceSize = {
-    size16: {
-        size: '16',
-    },
-    size20: {
-        size: '20',
-    },
-    size24: {
-        size: '24',
-    },
-    size32: {
-        size: '32',
-    },
-    size40: {
-        size: '40',
-    },
-    size56: {
-        size: '56',
-    },
-};
-export { avatarStackAppearanceSize };