Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(Text): add variant inherit #1492

Merged
merged 1 commit into from
Apr 8, 2024
Merged

feat(Text): add variant inherit #1492

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions .storybook/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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',
Expand All @@ -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;
133 changes: 70 additions & 63 deletions src/components/Text/__stories__/Text.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: {
Expand All @@ -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',
},
};
2 changes: 1 addition & 1 deletion src/components/Text/text/text.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 `…`
Expand Down
Loading