metamask-extension/ui/components/ui/typography

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 favor 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 `TextAlign` enum 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 { TextAlign } from '../../../helpers/constants/design-system';

<Typography align={TextAlign.Left}>
  left
</Typography>
<Typography align={TextAlign.Center}>
  center
</Typography>
<Typography align={TextAlign.Right}>
  right
</Typography>
<Typography align={TextAlign.Justify}>
  justify
</Typography>
<Typography align={TextAlign.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