feat: updated Text component to latest design specification (#70)
This commit is contained in:
Samuel Gunter
GitHub
57
src/stories/components/Text.stories.tsx
Normal file
57
src/stories/components/Text.stories.tsx
Normal file
@@ -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',
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
};
|
||||
export default function Text({ variant, as, className, ...props }: PropsWithChildren<TextProps>) {
|
||||
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 (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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 <Icon>, 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;
|
||||
}
|
||||
|
||||
11
src/views/styles/fonts.module.scss.d.ts
vendored
11
src/views/styles/fonts.module.scss.d.ts
vendored
@@ -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 */
|
||||
|
||||
Reference in New Issue
Block a user