@salutejs/plasma-new-hope 0.141.2-canary.1429.10810544899.0 → 0.142.0-canary.1424.10789422667.0

package/emotion/cjs/examples/plasma_web/components/Badge/Badge.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ComponentProps } from 'react';
 import { disableProps } from '@salutejs/plasma-sb-utils';
 import type { StoryObj, Meta } from '@storybook/react';
 
@@ -8,6 +8,7 @@ import { Badge } from './Badge';
 
 const meta: Meta<typeof Badge> = {
     title: 'plasma_web/Badge',
+    component: Badge,
     decorators: [WithTheme],
     argTypes: {
         size: {
@@ -22,13 +23,25 @@ const meta: Meta<typeof Badge> = {
                 type: 'select',
             },
         },
+        pilled: {
+            control: { type: 'boolean' },
+            if: { arg: 'clear', truthy: false },
+        },
+        transparent: {
+            control: { type: 'boolean' },
+            if: { arg: 'clear', truthy: false },
+        },
         ...disableProps(['contentLeft', 'contentRight']),
     },
 };
 
 export default meta;
 
-type Story = StoryObj<typeof Badge>;
+type StoryProps = ComponentProps<typeof Badge> & {
+    enableContentLeft: boolean;
+    enableContentRight: boolean;
+};
+type Story = StoryObj<StoryProps>;
 
 const BellIcon = (props) => (
     <svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
@@ -40,16 +53,36 @@ const BellIcon = (props) => (
 );
 
 export const Default: Story = {
+    argTypes: {
+        enableContentLeft: {
+            control: { type: 'boolean' },
+            if: { arg: 'enableContentRight', truthy: false },
+        },
+        enableContentRight: {
+            control: { type: 'boolean' },
+            if: { arg: 'enableContentLeft', truthy: false },
+        },
+    },
     args: {
         text: 'Hello',
         view: 'default',
         size: 'm',
+        enableContentLeft: false,
+        enableContentRight: false,
         pilled: false,
         transparent: false,
+        clear: false,
     },
-};
+    render: ({ enableContentLeft, enableContentRight, size, ...rest }: StoryProps) => {
+        const iconSize = size === 'l' ? '1rem' : '0.75rem';
 
-export const WithIcon: Story = {
-    args: { ...Default.args },
-    render: (args) => <Badge contentLeft={<BellIcon width="1rem" height="1rem" />} {...args} />,
+        return (
+            <Badge
+                contentLeft={enableContentLeft ? <BellIcon width={iconSize} height={iconSize} /> : undefined}
+                contentRight={enableContentRight ? <BellIcon width={iconSize} height={iconSize} /> : undefined}
+                size={size}
+                {...rest}
+            />
+        );
+    },
 };