@itcase/ui-web 1.9.104 → 1.9.105

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

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

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

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

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

@@ -13,7 +13,7 @@ const meta = {
 export default meta;
 export const Default = {
     args: {
-        appearance: 'defaultSecondary rounded',
+        appearance: 'defaultSecondary sizeM solid rounded',
     },
     render: (args) => {
         return _jsx(Dropzone, { ...args });
@@ -21,7 +21,7 @@ export const Default = {
 };
 export const Require = {
     args: {
-        appearance: 'requireTertiary rounded',
+        appearance: 'requireTertiary sizeM solid rounded',
     },
     render: (args) => {
         return _jsx(Dropzone, { ...args });
@@ -29,7 +29,7 @@ export const Require = {
 };
 export const Error = {
     args: {
-        appearance: 'errorTertiary rounded',
+        appearance: 'errorTertiary sizeM solid rounded',
     },
     render: (args) => {
         return _jsx(Dropzone, { ...args });
@@ -37,7 +37,7 @@ export const Error = {
 };
 export const Success = {
     args: {
-        appearance: 'successTertiary rounded',
+        appearance: 'successTertiary sizeM solid rounded',
     },
     render: (args) => {
         return _jsx(Dropzone, { ...args });
@@ -45,7 +45,7 @@ export const Success = {
 };
 export const Disabled = {
     args: {
-        appearance: 'disabledTertiary rounded',
+        appearance: 'disabledTertiary sizeM solid rounded',
     },
     render: (args) => {
         return _jsx(Dropzone, { ...args });

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

@@ -4,7 +4,7 @@ declare const meta: {
     title: string;
     component: import("react").MemoExoticComponent<(props: DropzoneProps) => import("react/jsx-runtime").JSX.Element>;
     args: {
-        appearance: "defaultSecondary rounded";
+        appearance: "defaultSecondary sizeM solid rounded";
         inputName: string;
     };
 };

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

@@ -6,7 +6,7 @@ const meta = {
     title: 'Molecules / Dropzone',
     component: Dropzone,
     args: {
-        appearance: 'defaultSecondary rounded',
+        appearance: 'defaultSecondary sizeM solid rounded',
         inputName: 'file',
     },
 };

package/dist/types/components/Flex/__test__/FlexTest.stories.d.ts

@@ -0,0 +1,18 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Flex, FlexProps } from '..';
+declare const meta: {
+    title: string;
+    component: typeof Flex;
+    args: {
+        dataTestId: string;
+        maxHeight: "300px";
+    };
+    parameters: {
+        layout: string;
+    };
+    render: (args: FlexProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Children: Story;
+export declare const Click: Story;

package/dist/types/components/Flex/__test__/FlexTest.stories.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as storybookTest from 'storybook/test';
+import { Group } from 'src/components/Group';
+import { Text } from 'src/components/Text';
+import { Flex, FlexItem } from '..';
+const meta = {
+    title: 'Layout / Flex / __test__',
+    component: Flex,
+    args: {
+        dataTestId: 'flexTestId',
+        maxHeight: '300px',
+    },
+    parameters: {
+        layout: 'centered',
+    },
+    render: (args) => (_jsxs(Flex, { direction: "horizontal", flex: "1", maxWidthWrapper: "100%", fill: "white", ...args, children: [_jsx(FlexItem, { maxWidth: "260px", fill: "infoPrimary", padding: "20", children: _jsx(Text, { size: "xl", textColor: "white", children: "Menu" }) }), _jsxs(FlexItem, { direction: "vertical", grow: 1, children: [_jsx(Group, { fill: "accentPrimary", padding: "20", children: _jsx(Text, { size: "xl", textColor: "white", children: "Header" }) }), _jsx(Group, { fill: "specialPrimary", padding: "20", children: _jsx(Text, { size: "xl", textColor: "white", children: "Component" }) }), _jsx(Group, { fill: "extraPrimary", padding: "20", children: _jsx(Text, { size: "xl", textColor: "white", children: "Footer" }) })] })] })),
+};
+export default meta;
+export const Children = {
+    play: async ({ args, canvas, step }) => {
+        await step('Flex is renderer', async () => {
+            const flex = canvas.getByTestId(args.dataTestId);
+            await storybookTest.expect(flex).toBeInTheDocument();
+            const children = flex.children;
+            await storybookTest.expect(children.length).toBeGreaterThan(0);
+            await storybookTest.expect(flex).toHaveTextContent('Menu');
+        });
+    },
+};
+export const Click = {
+    play: async ({ args, canvas, step }) => {
+        const grid = canvas.getByTestId(args.dataTestId);
+        await step('Flex is renderer', async () => {
+            await storybookTest.expect(grid).toBeInTheDocument();
+        });
+        await step('Click via userEvent', async () => {
+            await storybookTest.userEvent.click(grid);
+        });
+        await step('onClick called once', async () => {
+            const onClick = args?.onClick;
+            await storybookTest.expect(onClick).toHaveBeenCalled();
+        });
+    },
+    args: {
+        onClick: storybookTest['fn'](),
+    },
+};

package/dist/types/components/Grid/__test__/GridTest.stories.d.ts

@@ -0,0 +1,23 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Grid, GridProps } from '..';
+declare const meta: {
+    title: string;
+    component: typeof Grid;
+    args: {
+        dataTestId: string;
+        width: "600px";
+        height: "400px";
+        fill: "white";
+        borderColor: "surfaceBorderTertiary";
+        padding: "20";
+        gap: string;
+    };
+    parameters: {
+        layout: string;
+    };
+    render: (args: GridProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Children: Story;
+export declare const Click: Story;

package/dist/types/components/Grid/__test__/GridTest.stories.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as storybookTest from 'storybook/test';
+import { Text } from 'src/components/Text';
+import { Grid, GridItem, GridRow } from '..';
+const meta = {
+    title: 'Layout / Grid / __test__',
+    component: Grid,
+    args: {
+        dataTestId: 'gridTestId',
+        width: '600px',
+        height: '400px',
+        fill: 'white',
+        borderColor: 'surfaceBorderTertiary',
+        padding: '20',
+        gap: '10',
+    },
+    parameters: {
+        layout: 'centered',
+    },
+    render: (args) => (_jsxs(Grid, { ...args, children: [_jsxs(GridRow, { gap: "10", gridTemplateColumns: "1fr 1fr 1fr", children: [_jsx(GridItem, { fill: "accentPrimary", padding: "20", children: _jsx(Text, { size: "xl", textColor: "white", children: "1" }) }), _jsx(GridItem, { fill: "specialPrimary", padding: "20", children: _jsx(Text, { size: "xl", textColor: "white", children: "2" }) }), _jsx(GridItem, { fill: "extraPrimary", padding: "20", children: _jsx(Text, { size: "xl", textColor: "white", children: "3" }) })] }), _jsxs(GridRow, { gap: "10", gridTemplateColumns: "1fr 1fr 1fr", children: [_jsx(GridItem, { fill: "infoPrimary", padding: "20", children: _jsx(Text, { size: "xl", textColor: "white", children: "4" }) }), _jsx(GridItem, { fill: "surfaceQuaternary", padding: "20", children: _jsx(Text, { size: "xl", textColor: "white", children: "5" }) }), _jsx(GridItem, { fill: "warningPrimary", padding: "20", children: _jsx(Text, { size: "xl", textColor: "white", children: "6" }) })] })] })),
+};
+export default meta;
+export const Children = {
+    play: async ({ args, canvas, step }) => {
+        await step('Grid is renderer', async () => {
+            const grid = canvas.getByTestId(args.dataTestId);
+            await storybookTest.expect(grid).toBeInTheDocument();
+            const children = grid.children;
+            await storybookTest.expect(children.length).toBeGreaterThan(0);
+            await storybookTest.expect(grid).toHaveTextContent('1');
+        });
+    },
+};
+export const Click = {
+    play: async ({ args, canvas, step }) => {
+        const grid = canvas.getByTestId(args.dataTestId);
+        await step('Grid is renderer', async () => {
+            await storybookTest.expect(grid).toBeInTheDocument();
+        });
+        await step('onClick called once', async () => {
+            await step('Click via userEvent', async () => {
+                await storybookTest.userEvent.click(grid);
+            });
+            await step('onClick called', async () => {
+                const onClick = args?.onClick;
+                await storybookTest.expect(onClick).toHaveBeenCalled();
+            });
+        });
+        await step('onClick called double', async () => {
+            await step('Click via userEvent', async () => {
+                await storybookTest.userEvent.dblClick(grid);
+            });
+            await step('onClick called', async () => {
+                const onDoubleClick = args?.onDoubleClick;
+                await storybookTest.expect(onDoubleClick).toHaveBeenCalled();
+            });
+        });
+    },
+    args: {
+        onClick: storybookTest['fn'](),
+        onDoubleClick: storybookTest['fn'](),
+    },
+};

package/dist/types/components/Group/__test__/GroupTest.stories.d.ts

@@ -0,0 +1,72 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<{
+        align?: import("@itcase/types-ui").AlignProps;
+        alignDirection?: import("@itcase/types-ui").DirectionProps;
+        border?: import("@itcase/types-ui").BorderColorProps;
+        borderColor?: import("@itcase/types-ui").BorderColorProps;
+        borderColorActive?: import("@itcase/types-ui").BorderColorActiveProps;
+        borderColorActiveHover?: import("@itcase/types-ui").BorderColorProps;
+        borderColorHover?: import("@itcase/types-ui").BorderColorProps;
+        borderType?: import("@itcase/types-ui").BorderTypeProps;
+        borderWidth?: import("@itcase/types-ui").BorderWidthProps;
+        columns?: number;
+        direction?: import("@itcase/types-ui").DirectionProps;
+        elevation?: import("@itcase/types-ui").ElevationProps;
+        fill?: import("@itcase/types-ui").FillProps;
+        fillActive?: import("@itcase/types-ui").FillActiveProps;
+        fillActiveHover?: import("@itcase/types-ui").FillActiveHoverProps;
+        fillDisabled?: import("@itcase/types-ui").FillProps;
+        fillHover?: import("@itcase/types-ui").FillHoverProps;
+        flexGrow?: string;
+        height?: import("@itcase/types-ui").HeightProps;
+        hoverFilter?: string;
+        iconFillHover?: import("../../Icon").IconProps["fillHover"];
+        justifyContent?: import("@itcase/types-ui").JustifyContentProps;
+        labelTextColor?: import("../../Label").LabelProps["labelTextColor"];
+        shape?: import("@itcase/types-ui").ShapeProps;
+        stacking?: import("@itcase/types-ui").StackingProps;
+        textColor?: import("src/components/Text").TextProps["textColor"];
+        textColorActive?: import("src/components/Text").TextProps["textColorActive"];
+        textColorHover?: import("src/components/Text").TextProps["textColorHover"];
+        width?: import("@itcase/types-ui").WidthProps;
+        wrap?: import("@itcase/types-ui").WrapProps;
+    } & import("@itcase/ui-core/hooks").StyleAttributes & {
+        id?: import("@itcase/types-core").GeneratedId;
+        appearance?: import("@itcase/types-ui").AppearanceKeysDefault;
+        children?: import("react").ReactNode;
+        className?: string;
+        dataId?: string;
+        dataTestId?: string;
+        dataTour?: string;
+        easing?: boolean;
+        htmlFor?: string;
+        isActive?: boolean;
+        isDisabled?: boolean;
+        name?: string;
+        onClick?: () => void;
+        onMouseDown?: () => void;
+        onMouseEnter?: import("react").MouseEventHandler;
+        onMouseLeave?: import("react").MouseEventHandler;
+        print?: boolean;
+        scroll?: boolean | import("@itcase/types-ui").DirectionProps;
+        set?: string;
+        style?: import("react").CSSProperties;
+        tag?: import("react").ElementType;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    args: {
+        dataTestId: string;
+        width: "30vw";
+        height: "5vh";
+        fill: "accentPrimary";
+        padding: "2m";
+    };
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Children: Story;
+export declare const Click: Story;

package/dist/types/components/Group/__test__/GroupTest.stories.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as storybookTest from 'storybook/test';
+import { Text } from 'src/components/Text';
+import { Group } from '..';
+const meta = {
+    title: 'Layout / Group / __test__',
+    component: Group,
+    args: {
+        dataTestId: 'groupTestId',
+        width: '30vw',
+        height: '5vh',
+        fill: 'accentPrimary',
+        padding: '2m',
+    },
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Children = {
+    play: async ({ args, canvas, step }) => {
+        await step('Group is renderer', async () => {
+            const group = canvas.getByTestId(args.dataTestId);
+            await storybookTest.expect(group).toBeInTheDocument();
+            const children = group.children;
+            await storybookTest.expect(children.length).toBeGreaterThan(0);
+            await storybookTest.expect(group).toHaveTextContent('1');
+        });
+    },
+    render: (args) => (_jsx(Group, { ...args, children: _jsx(Text, { size: "xl", textColor: "white", children: "1" }) })),
+};
+export const Click = {
+    play: async ({ args, canvas, step }) => {
+        const group = canvas.getByTestId(args.dataTestId);
+        await step('Group is renderer', async () => {
+            await storybookTest.expect(group).toBeInTheDocument();
+        });
+        await step('Click via userEvent', async () => {
+            await storybookTest.userEvent.click(group);
+        });
+        await step('onClick called once', async () => {
+            const onClick = args?.onClick;
+            await storybookTest.expect(onClick).toHaveBeenCalled();
+            await storybookTest.expect(group).toHaveClass('cursor_type_pointer');
+        });
+    },
+    args: {
+        onClick: storybookTest['fn'](),
+    },
+    render: (args) => (_jsx(Group, { ...args, children: _jsx(Text, { size: "xl", textColor: "white", children: "1" }) })),
+};

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

@@ -10,6 +10,7 @@ type HeroTitleAppearanceProps = {
     directionWrapper?: string;
     fill?: FillProps;
     iconAfter?: IconProps['SvgImage'];
+    iconAfterAppearance?: IconProps['appearance'];
     iconAfterFill?: IconProps['fill'];
     iconAfterFillIcon?: IconProps['iconFill'];
     iconAfterFillSize?: IconProps['fillSize'];
@@ -23,6 +24,7 @@ type HeroTitleAppearanceProps = {
     iconBadgeTextSize?: IconProps['badgeTextSize'];
     iconBadgeValue?: IconProps['badgeValue'];
     iconBefore?: IconProps['SvgImage'];
+    iconBeforeAppearance?: IconProps['appearance'];
     iconBeforeFill?: IconProps['fill'];
     iconBeforeFillIcon?: IconProps['iconFill'];
     iconBeforeFillSize?: IconProps['fillSize'];

package/dist/types/components/HeroTitle/HeroTitle.js

@@ -14,7 +14,7 @@ function HeroTitle(props) {
     const { appearance, className, dataTestId, dataTour, text, afterWrapper, beforeWrapper, tag = 'span', before, after, isDisabled, isSkeleton, onClick, children, } = props;
     const appearanceConfig = useAppearanceConfig(appearance, heroTitleConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    const { directionClass, size, fillClass, textAlignClass, textColorActiveClass, textColorClass, textColorGradientClass, textColorHoverClass, textFontClass, textStyleClass, textTruncateClass, textWeightClass, textWrap, heightClass, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBadgeAppearance, iconBadgeShape, iconBadgeSize, iconBadgeTextColor, iconBadgeTextSize, iconBadgeValue, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, svgFillClass, svgFillHoverClass, typeClass, widthClass, wrapperDirectionClass, } = propsGenerator;
+    const { directionClass, size, fillClass, textAlignClass, textColorActiveClass, textColorClass, textColorGradientClass, textColorHoverClass, textFontClass, textStyleClass, textTruncateClass, textWeightClass, textWrap, heightClass, iconAfter, iconAfterAppearance, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBadgeAppearance, iconBadgeShape, iconBadgeSize, iconBadgeTextColor, iconBadgeTextSize, iconBadgeValue, iconBefore, iconBeforeAppearance, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, svgFillClass, svgFillHoverClass, typeClass, widthClass, wrapperDirectionClass, } = propsGenerator;
     const { styles: heroTitleStyles, wrapper: heroTitleWrapperStyles } = useStyles(props);
     const Tag = useMemo(() => {
         if (tag) {
@@ -23,6 +23,6 @@ function HeroTitle(props) {
         return size ? size : 'span';
     }, [size, tag]);
     return (_jsxs(Tag, { className: clsx(className, 'heroTitle', fillClass && `fill_${fillClass}`, svgFillClass && `svg_fill_${svgFillClass}`, svgFillHoverClass && `svg_fill_hover_${svgFillHoverClass}`, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, size && `hero-title_size_${size}`, directionClass && `hero-title_direction_${directionClass}`, 'text', textColorClass && `text-color_${textColorClass}`, textColorActiveClass && `text-color_active_${textColorActiveClass}`, textColorHoverClass && `text-color_hover_${textColorHoverClass}`, typeClass && `hero-title_type_${typeClass}`, textColorGradientClass && `text-gradient_${textColorGradientClass}`, textFontClass && `text-font_${textFontClass}`, textStyleClass && `text-style_${textStyleClass}`, textWeightClass && `text-weight_${textWeightClass}`, textWrap && `word-wrap_${textWrap}`, isSkeleton && 'skeleton'), "data-testid": dataTestId, "data-tour": dataTour, style: heroTitleStyles, onClick: onClick, children: [before, _jsxs("span", { className: clsx(textAlignClass && `text-align_${textAlignClass}`, wrapperDirectionClass &&
-                    `hero-title-direction_${wrapperDirectionClass}`, 'hero-title__wrapper', textTruncateClass && `text-truncate_${textTruncateClass}`), style: heroTitleWrapperStyles, children: [(iconBefore || iconBeforeSrc) && (_jsx(Icon, { className: clsx('title__icon_before', iconBadgeValue && 'title__icon_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'title__icon_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), beforeWrapper, children || text, afterWrapper, (iconAfter || iconAfterSrc) && (_jsx(Icon, { className: clsx('title__icon_after', iconBadgeValue && 'title__icon_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'title__icon_after_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] }), after] }));
+                    `hero-title-direction_${wrapperDirectionClass}`, 'hero-title__wrapper', textTruncateClass && `text-truncate_${textTruncateClass}`), style: heroTitleWrapperStyles, children: [(iconBefore || iconBeforeSrc) && (_jsx(Icon, { appearance: iconBeforeAppearance, className: clsx('title__icon_before', iconBadgeValue && 'title__icon_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'title__icon_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), beforeWrapper, children || text, afterWrapper, (iconAfter || iconAfterSrc) && (_jsx(Icon, { appearance: iconAfterAppearance, className: clsx('title__icon_after', iconBadgeValue && 'title__icon_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'title__icon_after_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] }), after] }));
 }
 export { HeroTitle, heroTitleConfig };

package/dist/types/components/HeroTitle/__test__/HeroTitleTest.stories.d.ts

@@ -0,0 +1,20 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { HeroTitle } from '..';
+declare const meta: {
+    title: string;
+    component: typeof HeroTitle;
+    args: {
+        appearance: "sizeH2";
+        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;
+export declare const WithIcon: Story;

package/dist/types/components/HeroTitle/__test__/HeroTitleTest.stories.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as storybookTest from 'storybook/test';
+import { icons40 } from '@itcase/icons-default';
+import { HeroTitle } from '..';
+const meta = {
+    title: 'Typography / Hero Title / __test__',
+    component: HeroTitle,
+    args: {
+        appearance: 'sizeH2',
+        dataTestId: 'heroTitleTestId',
+        children: 'Hero Title',
+    },
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['test'],
+};
+export default meta;
+export const Skeleton = {
+    play: async ({ args, canvas, step }) => {
+        await step('HeroTitle renders with skeleton class', async () => {
+            const heroTitle = canvas.getByTestId(args.dataTestId);
+            await storybookTest.expect(heroTitle).toBeInTheDocument();
+            await storybookTest.expect(heroTitle).toHaveClass('skeleton');
+        });
+    },
+    args: {
+        isSkeleton: true,
+    },
+    render: (args) => _jsx(HeroTitle, { ...args }),
+};
+export const Children = {
+    play: async ({ args, canvas, step }) => {
+        await step('HeroTitle renders with children content', async () => {
+            const heroTitle = canvas.getByTestId(args.dataTestId);
+            await storybookTest.expect(heroTitle).toBeInTheDocument();
+            await storybookTest
+                .expect(heroTitle)
+                .toHaveTextContent(String(args.children));
+        });
+    },
+    render: (args) => _jsx(HeroTitle, { ...args }),
+};
+export const WithIcon = {
+    play: async ({ args, canvas, step }) => {
+        await step('HeroTitle has an icon', async () => {
+            const heroTitle = canvas.getByTestId(args.dataTestId);
+            await storybookTest.expect(heroTitle).toBeInTheDocument();
+            const icon = heroTitle.querySelector('.icon');
+            await storybookTest.expect(icon).toBeInTheDocument();
+        });
+    },
+    args: {
+        iconAfter: icons40.Placeholder.Default,
+        iconAfterAppearance: 'surfaceSecondary size40_40 ghost rounded',
+    },
+    render: (args) => _jsx(HeroTitle, { ...args }),
+};

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

@@ -3,59 +3,59 @@ declare const iconAppearance: {
         fill: "warningPrimary";
         fillHover: "warningHoverPrimary";
         borderColor: "warningBorderSecondary";
-        badgeAppearance: "surfacePrimary";
+        badgeAppearance: "surfacePrimary sizeM solid rounded";
         iconFill: "warningItemPrimary";
     };
     surfacePrimary: {
         fill: "surfacePrimary";
         fillHover: "surfaceHoverSecondary";
         borderColor: "surfaceBorderTertiary";
-        badgeAppearance: "surfacePrimary";
+        badgeAppearance: "surfacePrimary sizeM solid rounded";
         iconFill: "surfaceItemPrimary";
     };
     surfaceQuaternary: {
         fill: "surfaceQuaternary";
         fillHover: "surfaceHoverQuaternary";
-        badgeAppearance: "accentPrimary";
+        badgeAppearance: "accentPrimary sizeM solid rounded";
         iconFill: "surfaceItemPrimary";
     };
     surfaceSecondary: {
         fill: "surfaceSecondary";
         fillHover: "surfaceHoverTertiary";
-        badgeAppearance: "accentPrimary solid rounded";
+        badgeAppearance: "accentPrimary sizeM solid rounded";
         iconFill: "surfaceItemPrimary";
     };
     surfaceTertiary: {
         fill: "surfaceTertiary";
         fillHover: "surfaceHoverTertiary";
-        badgeAppearance: "accentPrimary";
+        badgeAppearance: "accentPrimary sizeM solid rounded";
         iconFill: "surfaceItemPrimary";
     };
     successPrimary: {
         fill: "successPrimary";
         fillHover: "successHoverPrimary";
         borderColor: "successBorderPrimary";
-        badgeAppearance: "surfacePrimary";
+        badgeAppearance: "surfacePrimary sizeM solid rounded";
         iconFill: "successItemPrimary";
     };
     extraPrimary: {
         fill: "extraPrimary";
         fillHover: "extraHoverPrimary";
         borderColor: "extraBorderQuaternary";
-        badgeAppearance: "surfacePrimary";
+        badgeAppearance: "surfacePrimary sizeM solid rounded";
         iconFill: "extraItemPrimary";
     };
     specialPrimary: {
         fill: "specialPrimary";
         fillHover: "specialHoverPrimary";
         borderColor: "specialBorderQuaternary";
-        badgeAppearance: "surfacePrimary";
+        badgeAppearance: "surfacePrimary sizeM solid rounded";
         iconFill: "specialItemPrimary";
     };
     infoPrimary: {
         fill: "infoPrimary";
         borderColor: "infoBorderPrimary";
-        badgeAppearance: "surfacePrimary";
+        badgeAppearance: "surfacePrimary sizeM solid rounded";
         iconFill: "infoItemPrimary";
     };
     infoSecondary: {
@@ -68,14 +68,14 @@ declare const iconAppearance: {
         fill: "errorPrimary";
         fillHover: "errorHoverPrimary";
         borderColor: "errorBorderPrimary";
-        badgeAppearance: "surfacePrimary";
+        badgeAppearance: "surfacePrimary sizeM solid rounded";
         iconFill: "errorItemPrimary";
     };
     dangerPrimary: {
         fill: "dangerPrimary";
         fillHover: "dangerHoverPrimary";
         borderColor: "dangerBorderSecondary";
-        badgeAppearance: "surfacePrimary";
+        badgeAppearance: "surfacePrimary sizeM solid rounded";
         iconFill: "dangerItemPrimary";
     };
     circular: {
@@ -85,22 +85,22 @@ declare const iconAppearance: {
         shape: "rounded";
     };
     roundedXL: {
-        shape: "rounded";
+        shape: "roundedXL";
     };
     roundedL: {
-        shape: "rounded";
+        shape: "roundedL";
     };
     roundedM: {
-        shape: "rounded";
+        shape: "roundedM";
     };
     roundedS: {
-        shape: "rounded";
+        shape: "roundedS";
     };
     accentPrimary: {
         fill: "accentPrimary";
         fillHover: "accentHoverPrimary";
         borderColor: "accentBorderPrimary";
-        badgeAppearance: "surfacePrimary";
+        badgeAppearance: "surfacePrimary sizeM solid rounded";
         iconFill: "accentItemPrimary";
     };
     accentSecondary: {
@@ -291,7 +291,7 @@ declare const iconAppearance: {
     disabledPrimary: {
         fill: "surfacePrimary";
         borderColor: "surfaceBorderPrimary";
-        badgeAppearance: "surfacePrimary";
+        badgeAppearance: "surfacePrimary sizeM solid rounded";
         iconFill: "surfaceItemQuaternary";
     };
 };

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

@@ -2,6 +2,7 @@ import { CSSProperties, FunctionComponent, MouseEvent, ReactNode, SVGAttributes,
 import { AlignmentProps, AlignProps, AppearanceConfig, AppearanceIconSizeKey, AppearanceKeysIcon, AppearanceShapeKey, AppearanceSizeKey, AppearanceStyleKey, BorderColorHoverProps, BorderColorProps, BorderTypeProps, BorderWidthProps, CenteringProps, CompositeAppearanceIconKeys, DirectionProps, FillActiveHoverProps, FillActiveProps, FillDisabledProps, FillHoverProps, FillProps, FillSizeProps, IconFillSizeProps, IconSizeProps, ItemFillProps, ShapeProps, SizePXProps, TextColorProps, TextSizeProps } from '@itcase/types-ui';
 import type { AppearancePartialRecord, AppearanceRecord } from '@itcase/types-ui';
 import { StyleAttributes } from '@itcase/ui-core/hooks';
+import type { ComponentGalleryArgs } from 'src/storybook/createComponentGallery';
 import { BadgeProps } from '../Badge/Badge.interface';
 import { LinkWrapperProps } from '../Link/Link.interface';
 import { TitleProps } from '../Title/Title.interface';
@@ -86,4 +87,8 @@ type IconAppearance = IconConfig['appearance'];
 type IconAppearanceStyle = AppearanceRecord<AppearanceStyleKey, IconAppearanceProps, 'borderColor' | 'fill'>;
 type IconAppearanceShape = Partial<Record<AppearanceShapeKey, Partial<Pick<IconAppearanceProps, 'shape'>>>>;
 type IconAppearanceSize = AppearancePartialRecord<AppearanceIconSizeKey, IconAppearanceProps, Extract<keyof IconAppearanceProps, 'badgeAppearanceSize' | 'badgeSize' | 'fillSize' | 'iconSize'>>;
-export type { IconAppearance, IconAppearanceProps, IconAppearanceShape, IconAppearanceSize, IconAppearanceStyle, IconConfig, IconProps, };
+type IconAppearanceKey = NonNullable<IconProps['appearance']>;
+type IconGalleryStory = ComponentGalleryArgs & Pick<IconProps, 'badgeValue' | 'isDisabled' | 'isSkeleton'> & {
+    showIcon?: boolean;
+};
+export type { IconAppearance, IconAppearanceKey, IconAppearanceProps, IconAppearanceShape, IconAppearanceSize, IconAppearanceStyle, IconConfig, IconGalleryStory, IconProps, };