diff --git a/public/fonts/roboto-flex.woff2 b/public/fonts/roboto-flex.woff2 new file mode 100644 index 00000000..a572fdad Binary files /dev/null and b/public/fonts/roboto-flex.woff2 differ diff --git a/src/stories/components/Text.stories.tsx b/src/stories/components/Text.stories.tsx new file mode 100644 index 00000000..ecedaf92 --- /dev/null +++ b/src/stories/components/Text.stories.tsx @@ -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; + +export default meta; +type Story = StoryObj; + +// 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 => ( +
+ + + + + + + + + + +
+ ), + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/8tsCay2FRqctrdcZ3r9Ahw/UTRP?type=design&node-id=324-389&mode=design&t=BoS5xBrpSsjgQXqv-4', + }, + }, +}; diff --git a/src/views/components/common/Text/Text.module.scss b/src/views/components/common/Text/Text.module.scss index be6fd28b..1f52a96b 100644 --- a/src/views/components/common/Text/Text.module.scss +++ b/src/views/components/common/Text/Text.module.scss @@ -2,59 +2,64 @@ @use 'src/views/styles/fonts.module.scss'; .text { - font-family: 'Inter', sans-serif; - color: colors.$charcoal; - line-height: initial; + font-family: 'Roboto Flex', sans-serif; + line-height: normal; + font-style: normal; } -.light_weight { - font-weight: fonts.$light_weight; +.mini { + font-size: 0.79rem; + font-weight: 500; } -.regular_weight { - font-weight: fonts.$regular_weight; +.small { + font-size: 0.88875rem; + font-weight: 500; } -.normal_weight { - font-weight: fonts.$normal_weight; +.p { + font-size: 1rem; + font-weight: 400; + letter-spacing: 0.025rem; } -.semi_bold_weight { - font-weight: fonts.$semi_bold_weight; +.h4 { + font-size: 1.125rem; + font-weight: 500; } -.bold_weight { - font-weight: fonts.$bold_weight; +.h3-course { + font-size: 0.6875rem; + font-weight: 400; + line-height: 100%; /* 0.6875rem */ } -.black_weight { - font-weight: fonts.$black_weight; +.h3 { + font-size: 1.26563rem; + font-weight: 600; + text-transform: uppercase; } -.x_small_size { - font-size: fonts.$x_small_size; +.h2-course { + font-size: 1rem; + font-weight: 500; + letter-spacing: 0.03125rem; + text-transform: capitalize; } -.xx_small_size { - font-size: fonts.$xx_small_size; +.h2 { + font-size: 1.42375rem; + font-weight: 500; } -.small_size { - font-size: fonts.$small_size; +.h1-course { + font-size: 1rem; + font-weight: 600; + text-transform: capitalize; } -.medium_size { - font-size: fonts.$medium_size; -} - -.large_size { - font-size: fonts.$large_size; -} - -.x_large_size { - font-size: fonts.$x_large_size; -} - -.xx_large_size { - font-size: fonts.$xx_large_size; +.h1 { + font-size: 1.60188rem; + font-weight: 700; + text-transform: uppercase; } diff --git a/src/views/components/common/Text/Text.tsx b/src/views/components/common/Text/Text.tsx index 15ce7c82..99d62d28 100644 --- a/src/views/components/common/Text/Text.tsx +++ b/src/views/components/common/Text/Text.tsx @@ -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 & { as?: 'span' }) + | (React.HTMLAttributes & { 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) { - const style: React.CSSProperties = { - ...props.style, - textAlign: props.align, - color: props.color ? colors[props.color] : undefined, - }; +export default function Text({ variant, as, className, ...props }: PropsWithChildren) { + const mergedClassName = classNames(styles.text, styles[variant], className); - const weightClass = `${props.weight ?? 'regular'}_weight`; - const fontSizeClass = `${props.size ?? 'medium'}_size`; - - const className = classNames(styles.text, styles[weightClass], styles[fontSizeClass], props.className); - - if (props.span) { - return ( - - {props.children} - - ); - } + if (as === 'div') return
; return ( -
+ {props.children} -
+ ); } diff --git a/src/views/styles/fonts.module.scss b/src/views/styles/fonts.module.scss index 5e609a2f..13459619 100644 --- a/src/views/styles/fonts.module.scss +++ b/src/views/styles/fonts.module.scss @@ -1,13 +1,20 @@ -@each $weights in '100' '200' '300' '400' '500' '600' '700' '800' '900' { +@each $weight in '100' '200' '300' '400' '500' '600' '700' '800' '900' { @font-face { font-family: 'Inter'; - src: url('@public/fonts/inter-#{$weights}.woff2') format('woff2'); + src: url('@public/fonts/inter-#{$weight}.woff2') format('woff2'); font-display: auto; font-style: normal; - font-weight: #{$weights}; + font-weight: #{$weight}; } } +@font-face { + font-family: 'Roboto Flex'; + src: url('@public/fonts/roboto-flex.woff2') format('woff2'); + font-display: swap; + font-style: normal; +} + @font-face { font-family: 'Material Icons Round'; font-style: normal; @@ -16,34 +23,12 @@ src: url('@public/fonts/material-icons.woff2') format('woff2'); } -$light_weight: 300; -$regular_weight: 400; -$normal_weight: 500; -$semi_bold_weight: 600; -$bold_weight: 700; -$black_weight: 900; +$normal_weight: 500; // Used by , will be removed later -$xx_small_size: 4px; -$x_small_size: 8px; -$small_size: 12px; $medium_size: 16px; -$large_size: 20px; -$x_large_size: 32px; -$xx_large_size: 48px; :export { - light_weight: $light_weight; - regular_weight: $regular_weight; normal_weight: $normal_weight; - semi_bold_weight: $semi_bold_weight; - bold_weight: $bold_weight; - black_weight: $black_weight; - xx_small_size: $xx_small_size; - x_small_size: $x_small_size; - small_size: $small_size; medium_size: $medium_size; - large_size: $large_size; - x_large_size: $x_large_size; - xx_large_size: $xx_large_size; } diff --git a/src/views/styles/fonts.module.scss.d.ts b/src/views/styles/fonts.module.scss.d.ts index 4d426ae1..f51017c4 100644 --- a/src/views/styles/fonts.module.scss.d.ts +++ b/src/views/styles/fonts.module.scss.d.ts @@ -2,25 +2,14 @@ * the type for all the weight scss variables exported from fonts.module.scss */ export interface IWeights { - light_weight: number; - regular_weight: number; normal_weight: number; - bold_weight: number; - semi_bold_weight: number; - black_weight: number; } /** * the type for all the size scss variables exported from fonts.module.scss */ export interface ISizes { - xx_small_size: number; - x_small_size: number; - small_size: number; medium_size: number; - large_size: number; - x_large_size: number; - xx_large_size: number; } /** A utility type that removes the _weight postfix from the variable names for weights */