docs(Button): custom css properties

gravity-ui · May 29, 2024 · 753d63d · 753d63d
1 parent 4dd0d85
commit 753d63d
Show file tree

Hide file tree

Showing 5 changed files with 158 additions and 21 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -12,6 +12,7 @@ const config: StorybookConfig = {
         './theme-addon/register.tsx',
         '@storybook/addon-a11y',
         '@storybook/addon-webpack5-compiler-babel',
+        '@ljcl/storybook-addon-cssprops',
     ],
     typescript: {
         check: false, // `false` is default value, but `checked` field is required in types.

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -120,6 +120,7 @@
         "@gravity-ui/prettier-config": "^1.1.0",
         "@gravity-ui/stylelint-config": "^4.0.1",
         "@gravity-ui/tsconfig": "^1.0.0",
+        "@ljcl/storybook-addon-cssprops": "^4.0.0",
         "@playwright/experimental-ct-react": "^1.42.1",
         "@playwright/test": "^1.42.1",
         "@storybook/addon-a11y": "^8.0.5",

diff --git a/src/components/Button/__stories__/Button.stories.tsx b/src/components/Button/__stories__/Button.stories.tsx
@@ -12,15 +12,102 @@ import {action} from '@storybook/addon-actions';
 import type {Meta, StoryObj} from '@storybook/react';
 
 import {Showcase} from '../../../demo/Showcase';
+import {createCssProperties} from '../../../stories/utils/custom-css-properties';
 import {Icon as IconComponent} from '../../Icon/Icon';
 import {Button} from '../Button';
 
 import {ButtonViewShowcase} from './ButtonViewShowcase';
 
+const {cssPropertiesParameters, customStoryCSSPropertiesParameters} = createCssProperties({
+    'g-button-text-color': {
+        control: 'color',
+        description: 'Text color',
+        example: '#fff',
+    },
+    'g-button-text-color-hover': {
+        control: 'color',
+        description: 'Text color on hover',
+        example: '#fff',
+    },
+    'g-button-background-color': {
+        control: 'color',
+        description: 'Background color',
+        example: '#9a2eff',
+    },
+    'g-button-background-color-hover': {
+        control: 'color',
+        description: 'Background color on hover',
+        example: '#8526de',
+    },
+    'g-button-border-width': {
+        control: 'text',
+        example: '5px',
+        description: 'Border width',
+    },
+    'g-button-border-color': {
+        control: 'color',
+        description: 'Border color',
+    },
+    'g-button-border-radius': {
+        control: 'text',
+        example: '40px 20px',
+        description: 'Border radius',
+    },
+    'g-button-border-style': {
+        control: 'text',
+        example: 'dotted',
+        description: 'Border style',
+    },
+    'g-button-focus-outline-width': {
+        control: 'color',
+        description: 'Focus outline color',
+    },
+    'g-button-focus-outline-color': {
+        control: 'color',
+        description: 'Focus outline color',
+        example: '#9a2eff',
+    },
+    'g-button-focus-outline-style': {
+        control: 'text',
+        example: '',
+        description: 'Focus outline style',
+    },
+    'g-button-focus-outline-offset': {
+        control: 'text',
+        example: '4px',
+        description: 'Focus outline offset',
+    },
+    'g-button-height': {
+        control: 'text',
+        example: '60px',
+        description: 'Height, line-height',
+    },
+    'g-button-padding': {
+        control: 'text',
+        example: '36px',
+        description: 'Side paddings',
+    },
+    'g-button-font-size': {
+        control: 'text',
+        example: '20px',
+        description: 'Text font size',
+    },
+    'g-button-icon-size': {
+        control: 'text',
+        example: '',
+        description: 'Icon size',
+    },
+    'g-button-icon-offset': {
+        control: 'text',
+        example: '',
+        description: 'Icon offset',
+    },
+});
 export default {
     title: 'Components/Inputs/Button',
     component: Button,
     parameters: {
+        ...cssPropertiesParameters,
         a11y: {
             element: '#storybook-root',
             config: {
@@ -204,25 +291,7 @@ export const Custom: Story = {
     args: {
         children: 'Fancy Button',
     },
-    render: (args) => (
-        <React.Fragment>
-            <style>
-                {`.g-root {
-                    --g-button-text-color: #fff;
-                    --g-button-text-color-hover: #fff;
-                    --g-button-background-color: #9a2eff;
-                    --g-button-background-color-hover: #8526de;
-                    --g-button-border-width: 5px;
-                    --g-button-border-style: dotted;
-                    --g-button-height: 60px;
-                    --g-button-padding: 36px;
-                    --g-button-font-size: 20px;
-                    --g-button-border-radius: 40px 20px;
-                    --g-button-focus-outline-color: #9a2eff;
-                    --g-button-focus-outline-offset: 4px;
-                }`}
-            </style>
-            <Button {...args} />
-        </React.Fragment>
-    ),
+    parameters: {
+        ...customStoryCSSPropertiesParameters,
+    },
 };
diff --git a/src/stories/utils/custom-css-properties.ts b/src/stories/utils/custom-css-properties.ts
@@ -0,0 +1,59 @@
+type CssPropertyName = string;
+
+type CssPropsProperty = {
+    control: 'color' | 'text';
+    description?: string;
+    value?: string;
+};
+
+export const createCssProperties = (
+    cssProperties: Record<
+        CssPropertyName,
+        {
+            control: 'color' | 'text';
+            description: string;
+            example: string;
+        }
+    >,
+) => {
+    const allCSSProperties = Object.keys(cssProperties);
+
+    const parametersCSSProps: Record<CssPropertyName, CssPropsProperty> = {};
+    const customStoryCSSProps: Record<CssPropertyName, CssPropsProperty> = {};
+
+    allCSSProperties.forEach((cssPropertyKey) => {
+        const cssProperty = cssProperties[cssPropertyKey];
+
+        customStoryCSSProps[cssPropertyKey] = {
+            control: cssProperty.control,
+            description: cssProperty.description,
+            value: cssProperty.example,
+        };
+
+        const exampleDescription = cssProperty.example ? ` (Ex. "${cssProperty.example}")` : '';
+
+        if (cssProperty.control === 'color') {
+            parametersCSSProps[cssPropertyKey] = {
+                control: cssProperty.control,
+                description: cssProperty.description + exampleDescription,
+            };
+        }
+
+        if (cssProperty.control === 'text') {
+            parametersCSSProps[cssPropertyKey] = {
+                control: cssProperty.control,
+                description: cssProperty.description + exampleDescription,
+                value: '',
+            };
+        }
+    });
+
+    return {
+        cssPropertiesParameters: {
+            cssprops: parametersCSSProps,
+        },
+        customStoryCSSPropertiesParameters: {
+            cssprops: customStoryCSSProps,
+        },
+    };
+};