-
Notifications
You must be signed in to change notification settings - Fork 64
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: updated Text component to latest design specification (#70)
- Loading branch information
1 parent
ab2cd68
commit bb727f7
Showing
6 changed files
with
122 additions
and
104 deletions.
There are no files selected for viewing
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import { Button } from 'src/views/components/common/Button/Button'; | ||
| import type { Meta, StoryObj } from '@storybook/react'; | ||
| import React from 'react'; | ||
| import Text from '../../views/components/common/Text/Text'; | ||
|
|
||
| // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export | ||
| const meta = { | ||
| title: 'Components/Common/Text', | ||
| component: Text, | ||
| parameters: { | ||
| // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout | ||
| layout: 'centered', | ||
| }, | ||
| // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs | ||
| tags: ['autodocs'], | ||
| // More on argTypes: https://storybook.js.org/docs/api/argtypes | ||
| args: { | ||
| children: 'The quick brown fox jumps over the lazy dog.', | ||
| }, | ||
| argTypes: { | ||
| children: { control: 'text' }, | ||
| }, | ||
| } satisfies Meta<typeof Text>; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof meta>; | ||
|
|
||
| // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args | ||
| export const Default: Story = { | ||
| args: {}, | ||
| }; | ||
|
|
||
| export const AllVariants: Story = { | ||
| args: { | ||
| children: 'The quick brown fox jumps over the lazy dog.', | ||
| }, | ||
| render: props => ( | ||
| <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}> | ||
| <Text {...props} variant='mini' /> | ||
| <Text {...props} variant='small' /> | ||
| <Text {...props} variant='p' /> | ||
| <Text {...props} variant='h4' /> | ||
| <Text {...props} variant='h3-course' /> | ||
| <Text {...props} variant='h3' /> | ||
| <Text {...props} variant='h2-course' /> | ||
| <Text {...props} variant='h2' /> | ||
| <Text {...props} variant='h1-course' /> | ||
| <Text {...props} variant='h1' /> | ||
| </div> | ||
| ), | ||
| parameters: { | ||
| design: { | ||
| type: 'figma', | ||
| url: 'https://www.figma.com/file/8tsCay2FRqctrdcZ3r9Ahw/UTRP?type=design&node-id=324-389&mode=design&t=BoS5xBrpSsjgQXqv-4', | ||
| }, | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,50 +1,32 @@ | ||
| import classNames from 'classnames'; | ||
| import React, { PropsWithChildren } from 'react'; | ||
| import colors, { Color } from '@views/styles/colors.module.scss'; | ||
| import { Size, Weight } from '@views/styles/fonts.module.scss'; | ||
| import styles from './Text.module.scss'; | ||
|
|
||
| /** | ||
| * | ||
| */ | ||
| export type TextProps = { | ||
| color?: Color; | ||
| weight?: Weight; | ||
| size?: Size; | ||
| span?: boolean; | ||
| className?: string; | ||
| onClick?: () => void; | ||
| title?: string; | ||
| align?: React.CSSProperties['textAlign']; | ||
| style?: React.CSSProperties; | ||
| }; | ||
| variant?: Variant; | ||
| } & ( | ||
| | (React.HTMLAttributes<HTMLSpanElement> & { as?: 'span' }) | ||
| | (React.HTMLAttributes<HTMLDivElement> & { as: 'div' }) | ||
| ); | ||
|
|
||
| const variants = ['mini', 'small', 'p', 'h4', 'h3-course', 'h3', 'h2-course', 'h2', 'h1-course', 'h1'] as const; | ||
|
|
||
| type Variant = (typeof variants)[number]; | ||
|
|
||
| /** | ||
| * A reusable Text component with props that build on top of the design system for the extension | ||
| */ | ||
| export default function Text(props: PropsWithChildren<TextProps>) { | ||
| const style: React.CSSProperties = { | ||
| ...props.style, | ||
| textAlign: props.align, | ||
| color: props.color ? colors[props.color] : undefined, | ||
| }; | ||
|
|
||
| const weightClass = `${props.weight ?? 'regular'}_weight`; | ||
| const fontSizeClass = `${props.size ?? 'medium'}_size`; | ||
|
|
||
| const className = classNames(styles.text, styles[weightClass], styles[fontSizeClass], props.className); | ||
| export default function Text({ variant, as, className, ...props }: PropsWithChildren<TextProps>) { | ||
| const mergedClassName = classNames(styles.text, styles[variant], className); | ||
|
|
||
| if (props.span) { | ||
| return ( | ||
| <span title={props.title} className={className} style={style} onClick={props.onClick}> | ||
| {props.children} | ||
| </span> | ||
| ); | ||
| } | ||
| if (as === 'div') return <div className={mergedClassName} {...props} />; | ||
|
|
||
| return ( | ||
| <div title={props.title} className={className} style={style} onClick={props.onClick}> | ||
| <span className={mergedClassName} {...props}> | ||
| {props.children} | ||
| </div> | ||
| </span> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters