feat(Text): add variant inherit (#1492)

gravity-ui · Apr 8, 2024 · 7157c70 · 7157c70
1 parent 9f6aa9c
commit 7157c70
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 68 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,10 +1,7 @@
 import type {StorybookConfig} from '@storybook/react-webpack5';
 
 const config: StorybookConfig = {
-    framework: {
-        name: '@storybook/react-webpack5',
-        options: {},
-    },
+    framework: '@storybook/react-webpack5',
     stories: ['../src/**/*.mdx', '../src/**/*.stories.@(ts|tsx)'],
     docs: {
         defaultName: 'Docs',
@@ -16,6 +13,10 @@ const config: StorybookConfig = {
         '@storybook/addon-a11y',
         '@storybook/addon-webpack5-compiler-babel',
     ],
+    typescript: {
+        check: false, // `false` is default value, but `checked` field is required in types.
+        reactDocgen: 'react-docgen-typescript',
+    },
 };
 
 export default config;
diff --git a/src/components/Text/__stories__/Text.stories.tsx b/src/components/Text/__stories__/Text.stories.tsx
@@ -1,12 +1,11 @@
 import React from 'react';
 
-import type {Meta, StoryFn} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 
 import {Flex} from '../../layout';
-import type {TextProps} from '../index';
 import {Text, colorText, text} from '../index';
 
-export default {
+const meta: Meta<typeof Text> = {
     title: 'Components/Data Display/Text',
     component: Text,
     parameters: {
@@ -22,75 +21,83 @@ export default {
             },
         },
     },
-} as Meta;
+};
 
-const DefaultText: StoryFn<TextProps> = (args) => <Text {...args} />;
+export default meta;
 
-export const Default = DefaultText.bind({});
+type Story = StoryObj<typeof Text>;
 
-Default.args = {
-    variant: 'display-1',
-    children: 'display-1 text',
-    title: 'Lorem ipsum',
+export const Default: Story = {
+    args: {
+        variant: 'display-1',
+        children: 'display-1 text',
+        title: 'Lorem ipsum',
+    },
 };
 
-export const UsingTextUtilities = () => (
-    <div className={text({variant: 'body-2'}, colorText({color: 'secondary'}))}>
-        some custom or existing element with text utilities
-    </div>
-);
+export const UsingTextUtilities: StoryObj<{}> = {
+    render: () => (
+        <div className={text({variant: 'body-2'}, colorText({color: 'secondary'}))}>
+            some custom or existing element with text utilities
+        </div>
+    ),
+    parameters: {
+        controls: {
+            disable: true,
+        },
+    },
+};
 
-const EllipsisDefault: StoryFn<TextProps> = (args) => (
-    <Flex gap={5} direction="column">
-        <Flex gap={5} width={200} direction="column">
-            <Text variant="header-1">With fixed container size (ellipsis=true)</Text>
-            <Text {...args} ellipsis />
-        </Flex>
-        <Flex gap={5} width={200} direction="column">
-            <Text variant="header-1">
-                With text utility and fixed container size (ellipsis=true)
-            </Text>
-            <span className={text({ellipsis: true})}>{args.children}</span>
-        </Flex>
+export const Ellipsis: Story = {
+    render: (args) => (
         <Flex gap={5} direction="column">
-            <Text variant="header-1">
-                With text utility (ellipsisLines=true, style: WebkitLineClamp: 3)
-            </Text>
-            <span style={{WebkitLineClamp: 3}} className={text({ellipsisLines: true})}>
-                {args.children}
-            </span>
+            <Flex gap={5} width={200} direction="column">
+                <Text variant="header-1">With fixed container size (ellipsis=true)</Text>
+                <Text {...args} ellipsis />
+            </Flex>
+            <Flex gap={5} width={200} direction="column">
+                <Text variant="header-1">
+                    With text utility and fixed container size (ellipsis=true)
+                </Text>
+                <span className={text({ellipsis: true})}>{args.children}</span>
+            </Flex>
+            <Flex gap={5} direction="column">
+                <Text variant="header-1">
+                    With text utility (ellipsisLines=true, style: WebkitLineClamp: 3)
+                </Text>
+                <span style={{WebkitLineClamp: 3}} className={text({ellipsisLines: true})}>
+                    {args.children}
+                </span>
+            </Flex>
+            <Flex gap={5} direction="column">
+                <Text variant="header-1">With line clamp property (ellipsisLines={3})</Text>
+                <Text {...args} ellipsisLines={3} />
+            </Flex>
         </Flex>
-        <Flex gap={5} direction="column">
-            <Text variant="header-1">With line clamp property (ellipsisLines={3})</Text>
-            <Text {...args} ellipsisLines={3} />
-        </Flex>
-    </Flex>
-);
-
-export const Ellipsis = EllipsisDefault.bind({});
-
-Ellipsis.args = {
-    children:
-        'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates asperiores accusamus est, ab rerum harum hic delectus fuga veniam! Hic, atque, quia sunt consectetur eius corrupti, expedita sapiente exercitationem aperiam quibusdam libero ipsa veritatis quisquam! Debitis eos unde, blanditiis ipsam adipisci, soluta incidunt architecto quidem, repellat commodi tempore! Enim assumenda nam esse laudantium sequi quaerat maiores, voluptatum quibusdam temporibus nulla perspiciatis! Corrupti error aliquid iure asperiores voluptate. Nisi temporibus nesciunt quasi animi, accusamus officia debitis voluptatum ratione ullam delectus, adipisci, repellendus vitae in amet sit magni iste impedit? Exercitationem rerum impedit sed earum iusto modi et officia aspernatur quibusdam? Fugit.',
+    ),
+    args: {
+        children:
+            'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates asperiores accusamus est, ab rerum harum hic delectus fuga veniam! Hic, atque, quia sunt consectetur eius corrupti, expedita sapiente exercitationem aperiam quibusdam libero ipsa veritatis quisquam! Debitis eos unde, blanditiis ipsam adipisci, soluta incidunt architecto quidem, repellat commodi tempore! Enim assumenda nam esse laudantium sequi quaerat maiores, voluptatum quibusdam temporibus nulla perspiciatis! Corrupti error aliquid iure asperiores voluptate. Nisi temporibus nesciunt quasi animi, accusamus officia debitis voluptatum ratione ullam delectus, adipisci, repellendus vitae in amet sit magni iste impedit? Exercitationem rerum impedit sed earum iusto modi et officia aspernatur quibusdam? Fugit.',
+    },
 };
 
-const WordBreakDefault: StoryFn<TextProps> = (args) => (
-    <div
-        style={{
-            width: 200,
-            height: 200,
-            border: '2px solid black',
-        }}
-    >
-        <Text {...args} />
-    </div>
-);
-
-export const WordBreak = WordBreakDefault.bind({});
+export const WordBreak: Story = {
+    render: (args) => (
+        <div
+            style={{
+                width: 200,
+                height: 200,
+                border: '2px solid black',
+            }}
+        >
+            <Text {...args} />
+        </div>
+    ),
 
-WordBreak.args = {
-    as: 'div',
-    children:
-        'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates asperiores accusamus est, ab rerum harum hic delectus fuga veniam! Hic, atque, quia sunt consectetur eius corrupti, expedita sapiente exercitationem aperiam quibusdam libero ipsa veritatis quisquam! Debitis eos unde, blanditiis ipsam adipisci, soluta incidunt architecto quidem, repellat commodi tempore! Enim assumenda nam esse laudantium sequi quaerat maiores, voluptatum quibusdam temporibus nulla perspiciatis! Corrupti error aliquid iure asperiores voluptate. Nisi temporibus nesciunt quasi animi, accusamus officia debitis voluptatum ratione ullam delectus, adipisci, repellendus vitae in amet sit magni iste impedit? Exercitationem rerum impedit sed earum iusto modi et officia aspernatur quibusdam? Fugit.',
-    wordBreak: 'break-all',
+    args: {
+        as: 'div',
+        children:
+            'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates asperiores accusamus est, ab rerum harum hic delectus fuga veniam! Hic, atque, quia sunt consectetur eius corrupti, expedita sapiente exercitationem aperiam quibusdam libero ipsa veritatis quisquam! Debitis eos unde, blanditiis ipsam adipisci, soluta incidunt architecto quidem, repellat commodi tempore! Enim assumenda nam esse laudantium sequi quaerat maiores, voluptatum quibusdam temporibus nulla perspiciatis! Corrupti error aliquid iure asperiores voluptate. Nisi temporibus nesciunt quasi animi, accusamus officia debitis voluptatum ratione ullam delectus, adipisci, repellendus vitae in amet sit magni iste impedit? Exercitationem rerum impedit sed earum iusto modi et officia aspernatur quibusdam? Fugit.',
+        wordBreak: 'break-all',
+    },
 };
diff --git a/src/components/Text/text/text.ts b/src/components/Text/text/text.ts
@@ -61,7 +61,7 @@ export interface TextBaseProps {
      *      - inline-2: font-size: 14px; line-height: 16px; font-weight: 400; font-family: var(--g-font-family-monospace);
      *      - inline-3: font-size: 16px; line-height: 20px; font-weight: 400; font-family: var(--g-font-family-monospace);
      */
-    variant?: (typeof TEXT_VARIANTS)[number];
+    variant?: (typeof TEXT_VARIANTS)[number] | 'inherit';
 
     /**
      * hidden overflow content will be displayed with ellipsis `…`