From 7157c70a9817470db6a8643a6c9c7f713361b8f5 Mon Sep 17 00:00:00 2001
From: Valerii Sidorenko <balepas@nebius.com>
Date: Mon, 8 Apr 2024 18:01:22 +0200
Subject: [PATCH] feat(Text): add variant inherit (#1492)

---
 .storybook/main.ts                            |   9 +-
 .../Text/__stories__/Text.stories.tsx         | 133 +++++++++---------
 src/components/Text/text/text.ts              |   2 +-
 3 files changed, 76 insertions(+), 68 deletions(-)

diff --git a/.storybook/main.ts b/.storybook/main.ts
index 51cea02417..8d00b405aa 100644
--- 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
index 56d2dc5d02..8c7d2e5ff2 100644
--- 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
index 7d596a9506..337323f50c 100644
--- 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 `…`