mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
333 lines
8.9 KiB
Plaintext
333 lines
8.9 KiB
Plaintext
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
|
|
import ActionableMessage from '../actionable-message';
|
|
import Typography from '.';
|
|
import { SEVERITIES } from '../../../helpers/constants/design-system';
|
|
|
|
import { BannerAlert } from '../../component-library/banner-alert';
|
|
|
|
<BannerAlert
|
|
severity={SEVERITIES.WARNING}
|
|
title="Deprecated"
|
|
description="<Typography/> has been deprecated in favour of the <Text /> component"
|
|
actionButtonLabel="See details"
|
|
actionButtonProps={{
|
|
href: 'https://github.com/MetaMask/metamask-extension/issues/17670',
|
|
}}
|
|
/>
|
|
|
|
# Typography
|
|
|
|
Good typography improves readability, legibility and hierarchy of information.
|
|
|
|
<Canvas>
|
|
<Story id="components-ui-typography--default-story" />
|
|
</Canvas>
|
|
|
|
## Props
|
|
|
|
<ArgsTable of={Typography} />
|
|
|
|
## Usage
|
|
|
|
The following describes the props and example usage for this component.
|
|
|
|
### Variant
|
|
|
|
Use the `variant` prop and the `TYPOGRAPHY` object from `./ui/helpers/constants/design-system.js` to change the font size of the Typography component.
|
|
|
|
<Canvas>
|
|
<Story id="components-ui-typography--variant" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
// If importing from ui/components/app/[YOUR_COMPONENT]/ directory
|
|
import Typography from '../../ui/typography';
|
|
import { TypographyVariant } from '../../../helpers/constants/design-system';
|
|
|
|
<Typography variant="TypographyVariant.H1">h1</Typography>
|
|
<Typography variant="TypographyVariant.H2">h2</Typography>
|
|
<Typography variant="TypographyVariant.H3">h3</Typography>
|
|
<Typography variant="TypographyVariant.H4">h4</Typography>
|
|
<Typography variant="TypographyVariant.H5">h5</Typography>
|
|
<Typography variant="TypographyVariant.H6">h6</Typography>
|
|
<Typography variant="TypographyVariant.H7">h7</Typography>
|
|
<Typography variant="TypographyVariant.H8">h8</Typography>
|
|
<Typography variant="TypographyVariant.H9">h9</Typography>
|
|
<Typography variant="TypographyVariant.paragraph">p</Typography>
|
|
```
|
|
|
|
### Color
|
|
|
|
Use the `color` prop and the `COLOR` object from `./ui/helpers/constants/design-system.js` to change the color of the Typography component.
|
|
|
|
<ActionableMessage
|
|
type="warning"
|
|
message="Do not use any colors in the DEPRECATED COLORS list. This will ensure themability and consistency across the codebase."
|
|
/>
|
|
|
|
<Canvas>
|
|
<Story id="components-ui-typography--color" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
// If importing from ui/components/app/[YOUR_COMPONENT]/ directory
|
|
import Typography from '../../ui/typography';
|
|
import { TextColor, Color, BackgroundColor } from '../../../helpers/constants/design-system';
|
|
|
|
<Typography color={TextColor.textDefault}>
|
|
text-default
|
|
</Typography>
|
|
<Typography color={TextColor.textAlternative}>
|
|
text-alternative
|
|
</Typography>
|
|
<Typography color={TextColor.textMuted}>
|
|
text-muted
|
|
</Typography>
|
|
<Typography color={Color.overlayInverse} boxProps={{backgroundColor:{BackgroundColor.overlayDefault}}}>
|
|
overlay-inverse
|
|
</Typography>
|
|
<Typography color={TextColor.primaryDefault}>
|
|
primary-default
|
|
</Typography>
|
|
<Typography color={TextColor.primaryInverse} boxProps={{backgroundColor:{BackgroundColor.primaryDefault}}}>
|
|
primary-inverse
|
|
</Typography>
|
|
<Typography color={TextColor.errorDefault}>
|
|
error-default
|
|
</Typography>
|
|
<Typography color={TextColor.errorInverse} boxProps={{backgroundColor:{BackgroundColor.errorDefault}}}>
|
|
error-inverse
|
|
</Typography>
|
|
<Typography color={TextColor.successDefault}>
|
|
success-default
|
|
</Typography>
|
|
<Typography color={TextColor.successInverse} boxProps={{backgroundColor:{BackgroundColor.successDefault}}}>
|
|
success-inverse
|
|
</Typography>
|
|
<Typography color={TextColor.warningInverse} boxProps={{backgroundColor:{BackgroundColor.warningDefault}}}>
|
|
warning-inverse
|
|
</Typography>
|
|
<Typography color={TextColor.infoDefault}>
|
|
info-default
|
|
</Typography>
|
|
<Typography color={TextColor.infoInverse} boxProps={{backgroundColor:{BackgroundColor.infoDefault}}}>
|
|
info-inverse
|
|
</Typography>
|
|
```
|
|
|
|
### Font Weight
|
|
|
|
Use the `fontWeight` prop and the `FONT_WEIGHT` object from `./ui/helpers/constants/design-system.js` to change the font weight of the Typography component. There are 2 font weights:
|
|
|
|
- `FONT_WEIGHT.NORMAL` = `normal` || `400`
|
|
- `FONT_WEIGHT.BOLD` = `bold` || `700`
|
|
|
|
<Canvas>
|
|
<Story id="components-ui-typography--font-weight" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
// If importing from ui/components/app/[YOUR_COMPONENT]/ directory
|
|
import Typography from '../../ui/typography';
|
|
import { FONT_WEIGHT } from '../../../helpers/constants/design-system';
|
|
|
|
<Typography fontWeight={FONT_WEIGHT.NORMAL}>
|
|
normal
|
|
</Typography>
|
|
<Typography fontWeight={FONT_WEIGHT.BOLD}>
|
|
bold
|
|
</Typography>
|
|
```
|
|
|
|
### Font Style
|
|
|
|
Use the `fontStyle` prop and the `FONT_STYLE` object from `./ui/helpers/constants/design-system.js` to change the font style of the Typography component. There are 2 font styles:
|
|
|
|
- `FONT_STYLE.NORMAL`
|
|
- `FONT_STYLE.ITALIC`
|
|
|
|
<Canvas>
|
|
<Story id="components-ui-typography--font-style" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
// If importing from ui/components/app/[YOUR_COMPONENT]/ directory
|
|
import Typography from '../../ui/typography';
|
|
import { FONT_STYLE } from '../../../helpers/constants/design-system';
|
|
|
|
<Typography fontStyle={FONT_STYLE.NORMAL}>
|
|
normal
|
|
</Typography>
|
|
<Typography fontStyle={FONT_STYLE.ITALIC}>
|
|
bold
|
|
</Typography>
|
|
```
|
|
|
|
### Align
|
|
|
|
Use the `align` prop and the `TEXT_ALIGN` object from `./ui/helpers/constants/design-system.js` to change the text alignment of the Typography component.
|
|
|
|
<Canvas>
|
|
<Story id="components-ui-typography--align" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
// If importing from ui/components/app/[YOUR_COMPONENT]/ directory
|
|
import Typography from '../../ui/typography';
|
|
import { TEXT_ALIGN } from '../../../helpers/constants/design-system';
|
|
|
|
<Typography align={TEXT_ALIGN.LEFT}>
|
|
left
|
|
</Typography>
|
|
<Typography align={TEXT_ALIGN.CENTER}>
|
|
center
|
|
</Typography>
|
|
<Typography align={TEXT_ALIGN.RIGHT}>
|
|
right
|
|
</Typography>
|
|
<Typography align={TEXT_ALIGN.JUSTIFY}>
|
|
justify
|
|
</Typography>
|
|
<Typography align={TEXT_ALIGN.END}>
|
|
end
|
|
</Typography>
|
|
```
|
|
|
|
### Overflow Wrap
|
|
|
|
Use the `overflowWrap` prop and the `OVERFLOW_WRAP` object from `./ui/helpers/constants/design-system.js` to change the overflow wrap of the Typography component.
|
|
|
|
<Canvas>
|
|
<Story id="components-ui-typography--overflow-wrap" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
// If importing from ui/components/app/[YOUR_COMPONENT]/ directory
|
|
import Typography from '../../ui/typography';
|
|
import { OVERFLOW_WRAP } from '../../../helpers/constants/design-system';
|
|
|
|
<div
|
|
style={{
|
|
width: 250,
|
|
border: '1px solid var(--color-error-default)',
|
|
display: 'block',
|
|
}}
|
|
>
|
|
<Typography overflowWrap={OVERFLOW_WRAP.NORMAL}>
|
|
{OVERFLOW_WRAP.NORMAL}: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d
|
|
</Typography>
|
|
<Typography overflowWrap={OVERFLOW_WRAP.BREAK_WORD}>
|
|
{OVERFLOW_WRAP.BREAK_WORD}: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d
|
|
</Typography>
|
|
</div>;
|
|
```
|
|
|
|
### As
|
|
|
|
Use the `as` prop to change the root html element of the Typography component
|
|
|
|
<Canvas>
|
|
<Story id="components-ui-typography--as" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
// If importing from ui/components/app/[YOUR_COMPONENT]/ directory
|
|
import Typography from '../../ui/typography';
|
|
|
|
<Typography as="dd">dd</Typography>
|
|
<Typography as="div">div</Typography>
|
|
<Typography as="dt">dt</Typography>
|
|
<Typography as="em">em</Typography>
|
|
<Typography as="h1">h1</Typography>
|
|
<Typography as="h2">h2</Typography>
|
|
<Typography as="h3">h3</Typography>
|
|
<Typography as="h4">h4</Typography>
|
|
<Typography as="h5">h5</Typography>
|
|
<Typography as="h6">h6</Typography>
|
|
<Typography as="li">li</Typography>
|
|
<Typography as="p">p</Typography>
|
|
<Typography as="span">span</Typography>
|
|
<Typography as="strong">strong</Typography>
|
|
```
|
|
|
|
Renders the html:
|
|
|
|
```html
|
|
<dd>dd</dd>
|
|
|
|
<div>div</div>
|
|
|
|
<dt>dt</dt>
|
|
|
|
<em>em</em>
|
|
|
|
<h1>h1</h1>
|
|
|
|
<h2>h2</h2>
|
|
|
|
<h3>h3</h3>
|
|
|
|
<h4>h4</h4>
|
|
|
|
<h5>h5</h5>
|
|
|
|
<h6>h6</h6>
|
|
|
|
<li>li</li>
|
|
|
|
<p>p</p>
|
|
|
|
<span>span</span>
|
|
|
|
<strong>strong</strong>
|
|
```
|
|
|
|
### Margin
|
|
|
|
Use the `margin` prop to change margin of the Typography component. For more control over bounding box properties use the `boxProps` props object.
|
|
|
|
<Canvas>
|
|
<Story id="components-ui-typography--margin" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
// If importing from ui/components/app/[YOUR_COMPONENT]/ directory
|
|
import Typography from '../../ui/typography';
|
|
|
|
<Typography margin={4}>This uses the boxProps prop</Typography>;
|
|
```
|
|
|
|
### Box Props
|
|
|
|
Use the `boxProps` prop object to pass any valid [Box](/?path=/story/components-ui-box--default-story) component props to the Typography component. `boxProps` will overwrite the `margin` prop
|
|
|
|
<Canvas>
|
|
<Story id="components-ui-typography--box-props-story" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
// If importing from ui/components/app/[YOUR_COMPONENT]/ directory
|
|
import Typography from '../../ui/typography';
|
|
import { Color } from '../../../helpers/constants/design-system';
|
|
|
|
<Typography
|
|
boxProps={{
|
|
backgroundColor: Color.infoMuted,
|
|
borderColor: Color.infoDefault,
|
|
padding: 4,
|
|
borderRadius: 4,
|
|
}}
|
|
color={Color.textDefault}
|
|
>
|
|
This uses the boxProps prop
|
|
</Typography>;
|
|
```
|
|
|
|
### Class Name
|
|
|
|
Adds an additional class to the Typography component
|
|
|
|
### Children
|
|
|
|
The text content of the typography component
|