feat(new-hope): add icon xxs to button story

salute-developers · Dec 20, 2024 · f64faa0 · f64faa0
1 parent 6dd42a3
commit f64faa0
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 15 deletions.
diff --git a/...components/Button/Button.component-test.tsx/plasma-b2c Button -- _size.snap.png b/...components/Button/Button.component-test.tsx/plasma-b2c Button -- _size.snap.png
diff --git a/...ents/Button/Button.component-test.tsx/plasma-web Button -- with Loader.snap.png b/...ents/Button/Button.component-test.tsx/plasma-web Button -- with Loader.snap.png
diff --git a/packages/plasma-b2c/src/components/Button/Button.component-test.tsx b/packages/plasma-b2c/src/components/Button/Button.component-test.tsx
@@ -131,6 +131,8 @@ describe('plasma-b2c: Button', () => {
     it('_size', () => {
         mount(
             <CypressTestDecorator>
+                <Button text="Button_size_xl" size="xl" contentLeft={<Icon />} />
+                <PadMe />
                 <Button text="Button_size_l" size="l" contentLeft={<Icon />} />
                 <PadMe />
                 <Button text="Button_size_m" size="m" contentLeft={<Icon />} />

diff --git a/packages/plasma-new-hope/src/components/_Icon/IconRoot.tsx b/packages/plasma-new-hope/src/components/_Icon/IconRoot.tsx
@@ -26,6 +26,13 @@ export interface IconProps {
      * <Icon sizeCustomProperty={token} {...rest}/>
      */
     sizeCustomProperty?: string;
+    /*
+     * Прорпс, который принимает значение ширины иконки
+     * В значении может быть как rem, так и другая единица измерения.
+     * @example
+     * <Icon sizeCustomValue="1.5rem" {...rest}/>
+     */
+    sizeCustomValue?: string;
 }
 
 interface IconRootProps extends IconProps {
@@ -46,10 +53,11 @@ export const IconRoot: React.FC<IconRootProps> = ({
     color,
     className,
     sizeCustomProperty,
+    sizeCustomValue,
 }) => {
     const c = color || 'var(--text-primary)';
 
-    const w = sizeCustomProperty ? `var(${sizeCustomProperty})` : `${sizeMap[size]}rem`;
+    const w = sizeCustomProperty ? `var(${sizeCustomProperty})` : sizeCustomValue || `${sizeMap[size]}rem`;
 
     return (
         <StyledRoot aria-hidden w={w} className={className}>

diff --git a/packages/plasma-new-hope/src/components/_Icon/Icons/IconMic.tsx b/packages/plasma-new-hope/src/components/_Icon/Icons/IconMic.tsx
@@ -3,6 +3,6 @@ import React from 'react';
 import { Mic } from '../Icon.assets/Mic';
 import { IconRoot, IconProps } from '../IconRoot';
 
-export const IconMic: React.FC<IconProps> = ({ size = 's', color, className }) => {
-    return <IconRoot className={className} size={size} color={color} icon={Mic} />;
+export const IconMic: React.FC<IconProps> = ({ size = 's', color, className, sizeCustomValue }) => {
+    return <IconRoot className={className} sizeCustomValue={sizeCustomValue} size={size} color={color} icon={Mic} />;
 };
diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Button/Button.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Button/Button.stories.tsx
@@ -22,6 +22,15 @@ const pinValues = [
     'circle-circle',
 ];
 const contentPlacinValues = ['default', 'relaxed'];
+const sizeMap = {
+    xxs: '0.75rem', // 12px
+    xs: '1rem', // 16px
+    s: '1.5rem', // 24px
+    m: '1.5rem', // 36px
+    l: '1.5rem', // 44px
+    xl: '1.5rem', // 56px
+    xxl: '1.5rem', // 100px
+};
 
 const meta: Meta<typeof Button> = {
     title: 'b2c/Data Entry/Button',
@@ -33,7 +42,6 @@ const meta: Meta<typeof Button> = {
         contentPlacing: 'default',
         stretching: 'auto',
         text: 'Hello',
-        value: 'Value',
         disabled: false,
         focused: true,
         square: false,
@@ -71,6 +79,7 @@ const meta: Meta<typeof Button> = {
             },
             table: { defaultValue: { summary: 'bottom' } },
         },
+        ...disableProps(['value']),
     },
 };
 
@@ -82,14 +91,10 @@ type StoryPropsDefault = ComponentProps<typeof Button> & {
 };
 
 const StoryDefault = ({ enableContentLeft, enableContentRight, size, ...rest }: StoryPropsDefault) => {
-    const iconSize = size === 'xs' ? 'xs' : 's';
-
     return (
         <Button
-            contentLeft={enableContentLeft && size !== 'xxs' ? <IconMic size={iconSize} color="inherit" /> : undefined}
-            contentRight={
-                enableContentRight && size !== 'xxs' ? <IconMic size={iconSize} color="inherit" /> : undefined
-            }
+            contentLeft={enableContentLeft ? <IconMic sizeCustomValue={sizeMap[size]} color="inherit" /> : undefined}
+            contentRight={enableContentRight ? <IconMic sizeCustomValue={sizeMap[size]} color="inherit" /> : undefined}
             size={size}
             {...rest}
         />
@@ -121,7 +126,7 @@ export const AccessibilityWithChildren: StoryObj<ComponentProps<typeof Button>>
 
         return (
             <Button {...args}>
-                <IconMic color="inherit" />
+                <IconMic color="inherit" sizeCustomValue={sizeMap[args.size]} />
                 <span>Включить микрофон</span>
             </Button>
         );

diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Button/Button.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_web/components/Button/Button.stories.tsx
@@ -22,6 +22,15 @@ const pinValues = [
     'circle-circle',
 ];
 const contentPlacinValues = ['default', 'relaxed'];
+const sizeMap = {
+    xxs: '0.75rem', // 12px
+    xs: '1rem', // 16px
+    s: '1.5rem', // 24px
+    m: '1.5rem', // 36px
+    l: '1.5rem', // 44px
+    xl: '1.5rem', // 56px
+    xxl: '1.5rem', // 100px
+};
 
 const meta: Meta<typeof Button> = {
     title: 'web/Data Entry/Button',
@@ -33,7 +42,6 @@ const meta: Meta<typeof Button> = {
         contentPlacing: 'default',
         stretching: 'auto',
         text: 'Hello',
-        value: 'Value',
         disabled: false,
         focused: true,
         square: false,
@@ -71,6 +79,7 @@ const meta: Meta<typeof Button> = {
             },
             table: { defaultValue: { summary: 'bottom' } },
         },
+        ...disableProps(['value']),
     },
 };
 
@@ -86,9 +95,15 @@ const StoryDefault = ({ enableContentLeft, enableContentRight, size, ...rest }:
 
     return (
         <Button
-            contentLeft={enableContentLeft && size !== 'xxs' ? <IconMic size={iconSize} color="inherit" /> : undefined}
+            contentLeft={
+                enableContentLeft ? (
+                    <IconMic sizeCustomValue={sizeMap[size]} size={iconSize} color="inherit" />
+                ) : undefined
+            }
             contentRight={
-                enableContentRight && size !== 'xxs' ? <IconMic size={iconSize} color="inherit" /> : undefined
+                enableContentRight ? (
+                    <IconMic sizeCustomValue={sizeMap[size]} size={iconSize} color="inherit" />
+                ) : undefined
             }
             size={size}
             {...rest}
@@ -121,7 +136,7 @@ export const AccessibilityWithChildren: StoryObj<ComponentProps<typeof Button>>
 
         return (
             <Button {...args}>
-                <IconMic color="inherit" />
+                <IconMic color="inherit" sizeCustomValue={sizeMap[args.size]} />
                 <span>Включить микрофон</span>
             </Button>
         );

diff --git a/packages/plasma-web/src/components/Button/Button.component-test.tsx b/packages/plasma-web/src/components/Button/Button.component-test.tsx
@@ -87,6 +87,8 @@ describe('plasma-web: Button', () => {
     it('with Loader', () => {
         mount(
             <CypressTestDecoratorWithTypo>
+                <Button size="xl" view="default" text="Button_view_default" contentLeft={<Icon />} isLoading />
+                <PadMe />
                 <Button size="l" view="default" text="Button_view_default" contentLeft={<Icon />} isLoading />
                 <PadMe />
                 <Button size="m" view="default" text="Button_view_default" contentLeft={<Icon />} isLoading />