m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-23 03:36:18 +02:00
Code
c5368c152b
metamask-extension/ui/components/component-library/text/README.mdx
Nidhi Kumari c5368c152b
Added storybook check to CI (#17092) 
* added storybook test runner

* added test runner in ci

* updated test for ci and fixed lint error

* updated lavamoat policy

* updated test command

* updated playwright

* changed command to storybook;ci

* updated command

* updated instance for test-storybook

* updated playwright

* added playwright step

* replaced concurrently with start-server-and-test

* updated the static storybook directory

* replaced first with last

* updated lock file

* replaced first with last

* updated test-storybook with maxworkers

* updated .depchechrc

* updated yml

* removed id from banner base

* replaced broken stories with .stories-to-do.js extesnsion

* updated token allowance story

* removed duplicacies from yarn

* fixed lavamoat

* removed filename comment

* updated links for docs

* fixed file extension for stories

* updated path for stories.json

* updated stories.json path

* yarn updated

* updated stories

* updated yarn

* updated wait on
2023-01-21 00:57:46 +05:30

335 lines
8.5 KiB
Plaintext
Raw Blame History

import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import ActionableMessage from '../../ui/actionable-message';
import { Text } from './text';
# Text
> This Text (fka Typography) component has breaking changes in variant options and the line heights associated to each variant.
Good typography improves readability, legibility and hierarchy of information.
<Canvas>
<Story id="components-componentlibrary-text--default-story" />
</Canvas>
## Props
The `Text` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
<ArgsTable of={Text} />
### Variant
Use the `variant` prop and the `TEXT` object from `./ui/helpers/constants/design-system.js` to change the font size of the component.
Optional: `TEXT_VARIANTS` from ./text object can also be used.
<Canvas>
<Story id="components-componentlibrary-text--variant" />
</Canvas>
```jsx
import { Text } from '../../ui/components/component-library';
import { TEXT } from '../../../helpers/constants/design-system';
<Text variant={TEXT.DISPLAY_MD}>display-md</Text>
<Text variant={TEXT.HEADING_LG}>heading-lg</Text>
<Text variant={TEXT.HEADING_MD}>heading-md</Text>
<Text variant={TEXT.HEADING_SM}>heading-sm</Text>
<Text variant={TEXT.BODY_LG_MEDIUM}>body-lg-medium</Text>
<Text variant={TEXT.BODY_MD}>body-md</Text>
<Text variant={TEXT.BODY_MD_BOLD}>body-md-bold</Text>
<Text variant={TEXT.BODY_SM}>body-sm</Text>
<Text variant={TEXT.BODY_SM_BOLD}>body-sm-bold</Text>
<Text variant={TEXT.BODY_XS}>body-xs</Text>
<Text variant={TEXT.INHERIT}>inherit</Text>
```
### Color
Use the `color` prop and the `COLORS` object from `./ui/helpers/constants/design-system.js` to change the color of the `Text` component.
<Canvas>
<Story id="components-componentlibrary-text--color" />
</Canvas>
```jsx
import { Text } from '../../ui/components/component-library';
import { COLORS } from '../../../helpers/constants/design-system';
<Text color={COLORS.TEXT_DEFAULT}>
text-default
</Text>
<Text color={COLORS.TEXT_ALTERNATIVE}>
text-alternative
</Text>
<Text color={COLORS.TEXT_MUTED}>
text-muted
</Text>
<Text color={COLORS.OVERLAY_INVERSE} backgroundColor={COLORS.OVERLAY_DEFAULT}>
overlay-inverse
</Text>
<Text color={COLORS.PRIMARY_DEFAULT}>
primary-default
</Text>
<Text color={COLORS.PRIMARY_INVERSE} backgroundColor={COLORS.PRIMARY_DEFAULT}>
primary-inverse
</Text>
<Text color={COLORS.ERROR_DEFAULT}>
error-default
</Text>
<Text color={COLORS.ERROR_INVERSE} backgroundColor={COLORS.ERROR_DEFAULT}>
error-inverse
</Text>
<Text color={COLORS.SUCCESS_DEFAULT}>
success-default
</Text>
<Text color={COLORS.SUCCESS_INVERSE} backgroundColor={COLORS.SUCCESS_DEFAULT}>
success-inverse
</Text>
<Text color={COLORS.WARNING_INVERSE} backgroundColor={COLORS.WARNING_DEFAULT}>
warning-inverse
</Text>
<Text color={COLORS.INFO_DEFAULT}>
info-default
</Text>
<Text color={COLORS.INFO_INVERSE} backgroundColor={COLORS.INFO_DEFAULT}>
info-inverse
</Text>
```
### 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 `Text` component. There are 3 font weights:
- `FONT_WEIGHT.NORMAL` = `normal` || `400`
- `FONT_WEIGHT.MEDIUM` = `medium` || `500`
- `FONT_WEIGHT.BOLD` = `bold` || `700`
<Canvas>
<Story id="components-componentlibrary-text--font-weight" />
</Canvas>
```jsx
import { Text } from '../../ui/components/component-library';
import { FONT_WEIGHT } from '../../../helpers/constants/design-system';
<Text fontWeight={FONT_WEIGHT.NORMAL}>
normal
</Text>
<Text fontWeight={FONT_WEIGHT.MEDIUM}>
medium
</Text>
<Text fontWeight={FONT_WEIGHT.BOLD}>
bold
</Text>
```
### 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 `Text` component. There are 2 font styles:
- `FONT_STYLE.NORMAL`
- `FONT_STYLE.ITALIC`
<Canvas>
<Story id="components-componentlibrary-text--font-style" />
</Canvas>
```jsx
import { Text } from '../../ui/components/component-library';
import { FONT_STYLE } from '../../../helpers/constants/design-system';
<Text fontStyle={FONT_STYLE.NORMAL}>
normal
</Text>
<Text fontStyle={FONT_STYLE.ITALIC}>
bold
</Text>
```
### Text Transform
Use the `textTransform` prop and the `TEXT_TRANSFORM` object from `./ui/helpers/constants/design-system.js` to change the text alignment of the `Text` component
<Canvas>
<Story id="components-componentlibrary-text--text-transform" />
</Canvas>
```jsx
import { Text } from '../../ui/components/component-library';
import { TEXT_TRANSFORM } from '../../../helpers/constants/design-system';
<Text textAlign={TEXT_TRANSFORM.UPPERCASE}>
uppercase
</Text>
<Text textAlign={TEXT_TRANSFORM.LOWERCASE}>
lowercase
</Text>
<Text textAlign={TEXT_TRANSFORM.CAPITALIZE}>
capitalize
</Text>
```
### Text Align
Use the `textAlign` prop and the `TEXT_ALIGN` object from `./ui/helpers/constants/design-system.js` to change the text alignment of the `Text` component
<Canvas>
<Story id="components-componentlibrary-text--text-align" />
</Canvas>
```jsx
import { Text } from '../../ui/components/component-library';
import { TEXT_ALIGN } from '../../../helpers/constants/design-system';
<Text textAlign={TEXT_ALIGN.LEFT}>
left
</Text>
<Text textAlign={TEXT_ALIGN.CENTER}>
center
</Text>
<Text textAlign={TEXT_ALIGN.RIGHT}>
right
</Text>
<Text textAlign={TEXT_ALIGN.JUSTIFY}>
justify
</Text>
<Text textAlign={TEXT_ALIGN.END}>
end
</Text>
```
### 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 `Text` component
<Canvas>
<Story id="components-componentlibrary-text--overflow-wrap" />
</Canvas>
```jsx
import { Text } from '../../ui/components/component-library';
import { OVERFLOW_WRAP } from '../../../helpers/constants/design-system';
<div
style={{
width: 250,
border: '1px solid var(--color-error-default)',
display: 'block',
}}
>
<Text overflowWrap={OVERFLOW_WRAP.NORMAL}>
{OVERFLOW_WRAP.NORMAL}: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d
</Text>
<Text overflowWrap={OVERFLOW_WRAP.BREAK_WORD}>
{OVERFLOW_WRAP.BREAK_WORD}: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d
</Text>
</div>;
```
### Ellipsis
Use the boolean `ellipsis` prop to change the if the `Text` component to have an ellipsis.
<Canvas>
<Story id="components-componentlibrary-text--ellipsis" />
</Canvas>
```jsx
import { Text } from '../../ui/components/component-library';
<div
style={{
width: 250,
border: '1px solid var(--color-error-default)',
display: 'block',
}}
>
<Text ellipsis>Ellipsis: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d</Text>
<Text>No Ellipsis: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d</Text>
</div>;
```
### As
Use the `as` prop to change the root html element of the `Text` component
<Canvas>
<Story id="components-componentlibrary-text--as" />
</Canvas>
```jsx
import { Text } from '../../ui/components/component-library';
<Text as="dd">dd</Text>
<Text as="div">div</Text>
<Text as="dt">dt</Text>
<Text as="em">em</Text>
<Text as="h1">h1</Text>
<Text as="h2">h2</Text>
<Text as="h3">h3</Text>
<Text as="h4">h4</Text>
<Text as="h5">h5</Text>
<Text as="h6">h6</Text>
<Text as="li">li</Text>
<Text as="p">p</Text>
<Text as="span">span</Text>
<Text as="strong">strong</Text>
<Text as="input" placeholder="input"></Text>
```
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>
<input placeholder="input" />
```
### Text Direction
Use the `textDirection` prop and the `TEXT_DIRECTIONS` object from `./text.constants.js` to change the text direction of `Text`
<Canvas>
<Story id="components-componentlibrary-text--text-direction" />
</Canvas>
```jsx
import { Text, TEXT_DIRECTIONS } from '../../ui/components/component-library';
<Text textDirection={TEXT_DIRECTIONS.LEFT_TO_RIGHT}>
This is left to right (ltr) for English and most languages
</Text>
<Text textDirection={TEXT_DIRECTIONS.RIGHT_TO_LEFT}>
This is right to left (rtl) for use with other laguanges such as Arabic. This Enlgish example is incorrect usage.
</Text>
<Text textDirection={TEXT_DIRECTIONS.AUTO}>
Let the user agent decide with the auto option
</Text>
```
### Box Props
Use any valid box props [Box](/?path=/story/ui-components-ui-box-box-stories-js--default-story) component props to the Text component.
### Class Name
Adds an additional class to the `Text` component
### Children
The text content of the `Text` component
View Git Blame Copy Permalink