mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-22 11:22:43 +02:00
Typography design token color and docs update (#13758)
* Updating typography docs and removing some unused design-system constants * Adding boxProps controls to default story
This commit is contained in:
George Marshall
GitHub
parent
ac9f263e1a
commit
88154a4161
@ -1,16 +1,343 @@
|
||||
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
|
||||
import ActionableMessage from '../actionable-message';
|
||||
import Typography from '.';
|
||||
|
||||
# Typography
|
||||
|
||||
Good typography improves readability, legibility and hierarchy of information.
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-ui-typography-typography-stories-js--default-story" />
|
||||
</Canvas>
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-ui-typography-typography-stories-js--the-quick-orange-fox" />
|
||||
</Canvas>
|
||||
|
||||
## Component API
|
||||
|
||||
<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="ui-components-ui-typography-typography-stories-js--variant" />
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
// If importing from ui/components/app/[YOUR_COMPONENT]/ directory
|
||||
import Typography from '../../ui/typography';
|
||||
import { TYPOGRAPHY} from '../../../helpers/constants/design-system';
|
||||
|
||||
<Typography variant="TYPOGRAPHY.H1">h1</Typography>
|
||||
<Typography variant="TYPOGRAPHY.H2">h2</Typography>
|
||||
<Typography variant="TYPOGRAPHY.H3">h3</Typography>
|
||||
<Typography variant="TYPOGRAPHY.H4">h4</Typography>
|
||||
<Typography variant="TYPOGRAPHY.H5">h5</Typography>
|
||||
<Typography variant="TYPOGRAPHY.H6">h6</Typography>
|
||||
<Typography variant="TYPOGRAPHY.H7">h7</Typography>
|
||||
<Typography variant="TYPOGRAPHY.H8">h8</Typography>
|
||||
<Typography variant="TYPOGRAPHY.H9">h9</Typography>
|
||||
<Typography variant="TYPOGRAPHY.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="ui-components-ui-typography-typography-stories-js--color" />
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
// If importing from ui/components/app/[YOUR_COMPONENT]/ directory
|
||||
import Typography from '../../ui/typography';
|
||||
import { COLORS} from '../../../helpers/constants/design-system';
|
||||
|
||||
<Typography color={COLORS.TEXT_DEFAULT}>
|
||||
text-default
|
||||
</Typography>
|
||||
<Typography color={COLORS.TEXT_ALTERNATIVE}>
|
||||
text-alternative
|
||||
</Typography>
|
||||
<Typography color={COLORS.TEXT_MUTED}>
|
||||
text-muted
|
||||
</Typography>
|
||||
<Typography color={COLORS.OVERLAY_INVERSE} boxProps={{backgroundColor:{COLORS.OVERLAY_DEFAULT}}}>
|
||||
overlay-inverse
|
||||
</Typography>
|
||||
<Typography color={COLORS.PRIMARY_DEFAULT}>
|
||||
primary-default
|
||||
</Typography>
|
||||
<Typography color={COLORS.PRIMARY_INVERSE} boxProps={{backgroundColor:{COLORS.PRIMARY_DEFAULT}}}>
|
||||
primary-inverse
|
||||
</Typography>
|
||||
<Typography color={COLORS.SECONDARY_DEFAULT}>
|
||||
secondary-default
|
||||
</Typography>
|
||||
<Typography color={COLORS.SECONDARY_INVERSE} boxProps={{backgroundColor:{COLORS.SECONDARY_DEFAULT}}}>
|
||||
secondary-inverse
|
||||
</Typography>
|
||||
<Typography color={COLORS.ERROR_DEFAULT}>
|
||||
error-default
|
||||
</Typography>
|
||||
<Typography color={COLORS.ERROR_INVERSE} boxProps={{backgroundColor:{COLORS.ERROR_DEFAULT}}}>
|
||||
error-inverse
|
||||
</Typography>
|
||||
<Typography color={COLORS.SUCCESS_DEFAULT}>
|
||||
success-default
|
||||
</Typography>
|
||||
<Typography color={COLORS.SUCCESS_INVERSE} boxProps={{backgroundColor:{COLORS.SUCCESS_DEFAULT}}}>
|
||||
success-inverse
|
||||
</Typography>
|
||||
<Typography color={COLORS.WARNING_INVERSE} boxProps={{backgroundColor:{COLORS.WARNING_DEFAULT}}}>
|
||||
warning-inverse
|
||||
</Typography>
|
||||
<Typography color={COLORS.INFO_DEFAULT}>
|
||||
info-default
|
||||
</Typography>
|
||||
<Typography color={COLORS.INFO_INVERSE} boxProps={{backgroundColor:{COLORS.INFO_DEFAULT}}}>
|
||||
info-inverse
|
||||
</Typography>
|
||||
```
|
||||
|
||||
## Deprecated Colors
|
||||
|
||||
List of deprecated color props that are not theme compatible and should not be used.
|
||||
|
||||
```js
|
||||
/** !!! DEPRECATED DO NOT USE!!! */
|
||||
UI1: 'ui-1',
|
||||
UI2: 'ui-2',
|
||||
UI3: 'ui-3',
|
||||
UI4: 'ui-4',
|
||||
BLACK: 'black',
|
||||
GREY: 'grey',
|
||||
NEUTRAL_GREY: 'neutral-grey',
|
||||
WHITE: 'white',
|
||||
PRIMARY1: 'primary-1',
|
||||
PRIMARY2: 'primary-2',
|
||||
PRIMARY3: 'primary-3',
|
||||
SECONDARY1: 'secondary-1',
|
||||
SECONDARY2: 'secondary-2',
|
||||
SECONDARY3: 'secondary-3',
|
||||
SUCCESS1: 'success-1',
|
||||
SUCCESS2: 'success-2',
|
||||
SUCCESS3: 'success-3',
|
||||
ERROR1: 'error-1',
|
||||
ERROR2: 'error-2',
|
||||
ERROR3: 'error-3',
|
||||
ALERT1: 'alert-1',
|
||||
ALERT2: 'alert-2',
|
||||
ALERT3: 'alert-3',
|
||||
```
|
||||
|
||||
### 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="ui-components-ui-typography-typography-stories-js--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="ui-components-ui-typography-typography-stories-js--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="ui-components-ui-typography-typography-stories-js--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="ui-components-ui-typography-typography-stories-js--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>;
|
||||
```
|
||||
|
||||
### Tag
|
||||
|
||||
Use the `tag` prop to change the root html element of the Typography component
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-ui-typography-typography-stories-js--tag" />
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
// If importing from ui/components/app/[YOUR_COMPONENT]/ directory
|
||||
import Typography from '../../ui/typography';
|
||||
|
||||
<Typography tag="dd">dd</Typography>
|
||||
<Typography tag="div">div</Typography>
|
||||
<Typography tag="dt">dt</Typography>
|
||||
<Typography tag="em">em</Typography>
|
||||
<Typography tag="h1">h1</Typography>
|
||||
<Typography tag="h2">h2</Typography>
|
||||
<Typography tag="h3">h3</Typography>
|
||||
<Typography tag="h4">h4</Typography>
|
||||
<Typography tag="h5">h5</Typography>
|
||||
<Typography tag="h6">h6</Typography>
|
||||
<Typography tag="li">li</Typography>
|
||||
<Typography tag="p">p</Typography>
|
||||
<Typography tag="span">span</Typography>
|
||||
<Typography tag="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="ui-components-ui-typography-typography-stories-js--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/ui-components-ui-box-box-stories-js--default-story) component props to the Typography component. `boxProps` will overwrite the `margin` prop
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-ui-typography-typography-stories-js--box-props" />
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
// If importing from ui/components/app/[YOUR_COMPONENT]/ directory
|
||||
import Typography from '../../ui/typography';
|
||||
import { COLORS } from '../../../helpers/constants/design-system';
|
||||
|
||||
<Typography
|
||||
boxProps={{
|
||||
backgroundColor: COLORS.INFO_MUTED,
|
||||
borderColor: COLORS.INFO_DEFAULT,
|
||||
padding: 4,
|
||||
borderRadius: 4,
|
||||
}}
|
||||
color={COLORS.TEXT_DEFAULT}
|
||||
>
|
||||
This uses the boxProps prop
|
||||
</Typography>;
|
||||
```
|
||||
|
||||
### Class Name
|
||||
|
||||
Adds an additional class to the Typography component
|
||||
|
||||
### Children
|
||||
|
||||
The text content of the typography component
|
||||
|
||||
@ -13,24 +13,93 @@ import Box, { MultipleSizes } from '../box';
|
||||
|
||||
const { H6, H7, H8, H9 } = TYPOGRAPHY;
|
||||
|
||||
export const ValidColors = [
|
||||
COLORS.TEXT_DEFAULT,
|
||||
COLORS.TEXT_ALTERNATIVE,
|
||||
COLORS.TEXT_MUTED,
|
||||
COLORS.OVERLAY_INVERSE,
|
||||
COLORS.PRIMARY_DEFAULT,
|
||||
COLORS.PRIMARY_INVERSE,
|
||||
COLORS.SECONDARY_DEFAULT,
|
||||
COLORS.SECONDARY_INVERSE,
|
||||
COLORS.ERROR_DEFAULT,
|
||||
COLORS.ERROR_INVERSE,
|
||||
COLORS.SUCCESS_DEFAULT,
|
||||
COLORS.SUCCESS_INVERSE,
|
||||
COLORS.WARNING_INVERSE,
|
||||
COLORS.INFO_DEFAULT,
|
||||
COLORS.INFO_INVERSE,
|
||||
/**
|
||||
* COLORS BELOW HAVE BEEN DEPRECATED
|
||||
*/
|
||||
COLORS.UI1,
|
||||
COLORS.UI2,
|
||||
COLORS.UI3,
|
||||
COLORS.UI4,
|
||||
COLORS.BLACK,
|
||||
COLORS.GREY,
|
||||
COLORS.NEUTRAL_GREY,
|
||||
COLORS.WHITE,
|
||||
COLORS.PRIMARY1,
|
||||
COLORS.PRIMARY2,
|
||||
COLORS.PRIMARY3,
|
||||
COLORS.SECONDARY1,
|
||||
COLORS.SECONDARY2,
|
||||
COLORS.SECONDARY3,
|
||||
COLORS.SUCCESS1,
|
||||
COLORS.SUCCESS2,
|
||||
COLORS.SUCCESS3,
|
||||
COLORS.ERROR1,
|
||||
COLORS.ERROR2,
|
||||
COLORS.ERROR3,
|
||||
COLORS.ALERT1,
|
||||
COLORS.ALERT2,
|
||||
COLORS.ALERT3,
|
||||
];
|
||||
|
||||
export const ValidTags = [
|
||||
'dd',
|
||||
'div',
|
||||
'dt',
|
||||
'em',
|
||||
'h1',
|
||||
'h2',
|
||||
'h3',
|
||||
'h4',
|
||||
'h5',
|
||||
'h6',
|
||||
'li',
|
||||
'p',
|
||||
'span',
|
||||
'strong',
|
||||
'ul',
|
||||
];
|
||||
|
||||
export default function Typography({
|
||||
variant = TYPOGRAPHY.Paragraph,
|
||||
className,
|
||||
color = COLORS.TEXT_DEFAULT,
|
||||
tag,
|
||||
children,
|
||||
fontWeight = 'normal',
|
||||
fontStyle = 'normal',
|
||||
align,
|
||||
overflowWrap,
|
||||
boxProps = {},
|
||||
tag,
|
||||
margin = [1, 0],
|
||||
boxProps = {},
|
||||
className,
|
||||
children,
|
||||
}) {
|
||||
let Tag = tag ?? variant;
|
||||
let strongTagFontWeight;
|
||||
|
||||
if (Tag === 'strong') {
|
||||
strongTagFontWeight = FONT_WEIGHT.BOLD;
|
||||
}
|
||||
|
||||
const computedClassName = classnames(
|
||||
'typography',
|
||||
className,
|
||||
`typography--${variant}`,
|
||||
`typography--weight-${fontWeight}`,
|
||||
`typography--weight-${strongTagFontWeight || fontWeight}`,
|
||||
`typography--style-${fontStyle}`,
|
||||
{
|
||||
[`typography--align-${align}`]: Boolean(align),
|
||||
@ -39,8 +108,6 @@ export default function Typography({
|
||||
},
|
||||
);
|
||||
|
||||
let Tag = tag ?? variant;
|
||||
|
||||
if (Tag === TYPOGRAPHY.Paragraph) {
|
||||
Tag = 'p';
|
||||
} else if ([H7, H8, H9].includes(Tag)) {
|
||||
@ -59,33 +126,57 @@ export default function Typography({
|
||||
}
|
||||
|
||||
Typography.propTypes = {
|
||||
/**
|
||||
* The variation of font sizes of the Typography component
|
||||
*/
|
||||
variant: PropTypes.oneOf(Object.values(TYPOGRAPHY)),
|
||||
children: PropTypes.node.isRequired,
|
||||
color: PropTypes.oneOf(Object.values(COLORS)),
|
||||
className: PropTypes.string,
|
||||
/**
|
||||
* The color of the Typography component Should use the COLOR object from
|
||||
* ./ui/helpers/constants/design-system.js
|
||||
*/
|
||||
color: PropTypes.oneOf(ValidColors),
|
||||
/**
|
||||
* The font-weight of the Typography component. Should use the FONT_WEIGHT object from
|
||||
* ./ui/helpers/constants/design-system.js
|
||||
*/
|
||||
fontWeight: PropTypes.oneOf(Object.values(FONT_WEIGHT)),
|
||||
/**
|
||||
* The font-style of the Typography component. Should use the FONT_STYLE object from
|
||||
* ./ui/helpers/constants/design-system.js
|
||||
*/
|
||||
fontStyle: PropTypes.oneOf(Object.values(FONT_STYLE)),
|
||||
/**
|
||||
* The text-align of the Typography component. Should use the TEXT_ALIGN object from
|
||||
* ./ui/helpers/constants/design-system.js
|
||||
*/
|
||||
align: PropTypes.oneOf(Object.values(TEXT_ALIGN)),
|
||||
/**
|
||||
* The overflow-wrap of the Typography component. Should use the OVERFLOW_WRAP object from
|
||||
* ./ui/helpers/constants/design-system.js
|
||||
*/
|
||||
overflowWrap: PropTypes.oneOf(Object.values(OVERFLOW_WRAP)),
|
||||
/**
|
||||
* Changes the root html element tag of the Typography component.
|
||||
*/
|
||||
tag: PropTypes.oneOf(ValidTags),
|
||||
/**
|
||||
* Adds margin to the Typography component should use valid sizes
|
||||
* 1,2,4,6,8 or an array of those values
|
||||
*/
|
||||
margin: MultipleSizes,
|
||||
/**
|
||||
* Used to pass any valid Box component props such as margin or padding
|
||||
* to the Typography component
|
||||
*/
|
||||
boxProps: PropTypes.shape({
|
||||
...Box.propTypes,
|
||||
}),
|
||||
margin: MultipleSizes,
|
||||
fontWeight: PropTypes.oneOf(Object.values(FONT_WEIGHT)),
|
||||
fontStyle: PropTypes.oneOf(Object.values(FONT_STYLE)),
|
||||
overflowWrap: PropTypes.oneOf(Object.values(OVERFLOW_WRAP)),
|
||||
tag: PropTypes.oneOf([
|
||||
'p',
|
||||
'h1',
|
||||
'h2',
|
||||
'h3',
|
||||
'h4',
|
||||
'h5',
|
||||
'h6',
|
||||
'span',
|
||||
'strong',
|
||||
'em',
|
||||
'li',
|
||||
'div',
|
||||
'dt',
|
||||
'dd',
|
||||
'ul',
|
||||
]),
|
||||
/**
|
||||
* Additional className to assign the Typography component
|
||||
*/
|
||||
className: PropTypes.string,
|
||||
/**
|
||||
* The text content of the Typography component
|
||||
*/
|
||||
children: PropTypes.node.isRequired,
|
||||
};
|
||||
|
||||
@ -2,12 +2,20 @@ import React from 'react';
|
||||
import {
|
||||
COLORS,
|
||||
FONT_WEIGHT,
|
||||
FONT_STYLE,
|
||||
TEXT_ALIGN,
|
||||
TYPOGRAPHY,
|
||||
OVERFLOW_WRAP,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
|
||||
import { ValidColors, ValidTags } from './typography';
|
||||
|
||||
import README from './README.mdx';
|
||||
import Typography from '.';
|
||||
|
||||
const sizeKnobOptions = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
|
||||
const marginSizeKnobOptions = [...sizeKnobOptions, 'auto'];
|
||||
|
||||
export default {
|
||||
title: 'Components/UI/Typography',
|
||||
id: __filename,
|
||||
@ -17,49 +25,265 @@ export default {
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
variant: {
|
||||
control: { type: 'select' },
|
||||
options: Object.values(TYPOGRAPHY),
|
||||
},
|
||||
color: {
|
||||
control: { type: 'select' },
|
||||
options: COLORS,
|
||||
defaultValue: COLORS.BLACK,
|
||||
},
|
||||
align: {
|
||||
control: { type: 'select' },
|
||||
options: TEXT_ALIGN,
|
||||
defaultValue: TEXT_ALIGN.LEFT,
|
||||
options: ValidColors,
|
||||
},
|
||||
fontWeight: {
|
||||
control: { type: 'select' },
|
||||
options: FONT_WEIGHT,
|
||||
defaultValue: FONT_WEIGHT.NORMAL,
|
||||
options: Object.values(FONT_WEIGHT),
|
||||
},
|
||||
variant: {
|
||||
fontStyle: {
|
||||
control: { type: 'select' },
|
||||
options: TYPOGRAPHY,
|
||||
defaultValue: TYPOGRAPHY.Paragraph,
|
||||
options: Object.values(FONT_STYLE),
|
||||
},
|
||||
content: {
|
||||
align: {
|
||||
control: { type: 'select' },
|
||||
options: Object.values(TEXT_ALIGN),
|
||||
},
|
||||
overflowWrap: {
|
||||
control: { type: 'select' },
|
||||
options: Object.values(OVERFLOW_WRAP),
|
||||
},
|
||||
tag: {
|
||||
control: { type: 'select' },
|
||||
options: ValidTags,
|
||||
},
|
||||
margin: {
|
||||
options: marginSizeKnobOptions,
|
||||
control: 'select',
|
||||
},
|
||||
boxProps: {
|
||||
control: 'object',
|
||||
},
|
||||
className: {
|
||||
control: { type: 'text' },
|
||||
},
|
||||
children: {
|
||||
control: { type: 'text' },
|
||||
defaultValue: 'The quick orange fox jumped over the lazy dog.',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
function renderBackgroundColor(color) {
|
||||
let bgColor;
|
||||
switch (color) {
|
||||
case COLORS.OVERLAY_INVERSE:
|
||||
bgColor = COLORS.OVERLAY_DEFAULT;
|
||||
break;
|
||||
case COLORS.PRIMARY_INVERSE:
|
||||
bgColor = COLORS.PRIMARY_DEFAULT;
|
||||
break;
|
||||
case COLORS.SECONDARY_INVERSE:
|
||||
bgColor = COLORS.SECONDARY_DEFAULT;
|
||||
break;
|
||||
case COLORS.ERROR_INVERSE:
|
||||
bgColor = COLORS.ERROR_DEFAULT;
|
||||
break;
|
||||
case COLORS.WARNING_INVERSE:
|
||||
bgColor = COLORS.WARNING_DEFAULT;
|
||||
break;
|
||||
case COLORS.SUCCESS_INVERSE:
|
||||
bgColor = COLORS.SUCCESS_DEFAULT;
|
||||
break;
|
||||
case COLORS.INFO_INVERSE:
|
||||
bgColor = COLORS.INFO_DEFAULT;
|
||||
break;
|
||||
default:
|
||||
bgColor = null;
|
||||
break;
|
||||
}
|
||||
|
||||
return bgColor;
|
||||
}
|
||||
|
||||
export const DefaultStory = (args) => (
|
||||
<div style={{ width: '80%', flexDirection: 'column' }}>
|
||||
<Typography
|
||||
boxProps={{ backgroundColor: renderBackgroundColor(args.color) }}
|
||||
{...args}
|
||||
>
|
||||
{args.children}
|
||||
</Typography>
|
||||
);
|
||||
|
||||
DefaultStory.storyName = 'Default';
|
||||
|
||||
DefaultStory.args = {
|
||||
children: 'The quick orange fox jumped over the lazy dog.',
|
||||
};
|
||||
|
||||
export const Variant = (args) => (
|
||||
<>
|
||||
{Object.values(TYPOGRAPHY).map((variant) => (
|
||||
<div key={variant} style={{ width: '100%' }}>
|
||||
<Typography {...args}>{variant}</Typography>
|
||||
</div>
|
||||
<Typography
|
||||
boxProps={{ backgroundColor: renderBackgroundColor(args.color) }}
|
||||
{...args}
|
||||
variant={variant}
|
||||
key={variant}
|
||||
>
|
||||
{args.children || variant}
|
||||
</Typography>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
||||
export const Color = (args) => {
|
||||
// Index of last valid color in ValidColors array
|
||||
const LAST_VALID_COLORS_ARRAY_INDEX = 16;
|
||||
return (
|
||||
<>
|
||||
{Object.values(ValidColors).map((color, index) => {
|
||||
if (index === LAST_VALID_COLORS_ARRAY_INDEX) {
|
||||
return (
|
||||
<React.Fragment key={color}>
|
||||
<Typography
|
||||
color={COLORS.TEXT_DEFAULT}
|
||||
align={TEXT_ALIGN.CENTER}
|
||||
boxProps={{
|
||||
backgroundColor: COLORS.WARNING_MUTED,
|
||||
padding: 4,
|
||||
borderColor: COLORS.WARNING_DEFAULT,
|
||||
}}
|
||||
>
|
||||
DEPRECATED COLORS - DO NOT USE
|
||||
</Typography>
|
||||
<Typography
|
||||
{...args}
|
||||
boxProps={{ backgroundColor: renderBackgroundColor(color) }}
|
||||
color={color}
|
||||
>
|
||||
<strike>{color}</strike>
|
||||
</Typography>
|
||||
</React.Fragment>
|
||||
);
|
||||
} else if (index >= LAST_VALID_COLORS_ARRAY_INDEX) {
|
||||
return (
|
||||
<Typography
|
||||
{...args}
|
||||
boxProps={{ backgroundColor: renderBackgroundColor(color) }}
|
||||
color={color}
|
||||
key={color}
|
||||
>
|
||||
<strike>{color}</strike>
|
||||
</Typography>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Typography
|
||||
{...args}
|
||||
boxProps={{ backgroundColor: renderBackgroundColor(color) }}
|
||||
color={color}
|
||||
key={color}
|
||||
>
|
||||
{color}
|
||||
</Typography>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const FontWeight = (args) => (
|
||||
<>
|
||||
{Object.values(FONT_WEIGHT).map((weight) => (
|
||||
<Typography
|
||||
boxProps={{ backgroundColor: renderBackgroundColor(args.color) }}
|
||||
{...args}
|
||||
fontWeight={weight}
|
||||
key={weight}
|
||||
>
|
||||
{weight}
|
||||
</Typography>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
||||
export const FontStyle = (args) => (
|
||||
<>
|
||||
{Object.values(FONT_STYLE).map((style) => (
|
||||
<Typography
|
||||
boxProps={{ backgroundColor: renderBackgroundColor(args.color) }}
|
||||
{...args}
|
||||
fontStyle={style}
|
||||
key={style}
|
||||
>
|
||||
{style}
|
||||
</Typography>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
||||
export const Align = (args) => (
|
||||
<>
|
||||
{Object.values(TEXT_ALIGN).map((align) => (
|
||||
<Typography
|
||||
boxProps={{ backgroundColor: renderBackgroundColor(args.color) }}
|
||||
{...args}
|
||||
align={align}
|
||||
key={align}
|
||||
>
|
||||
{align}
|
||||
</Typography>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
||||
export const OverflowWrap = (args) => (
|
||||
<div
|
||||
style={{
|
||||
width: 250,
|
||||
border: '1px solid var(--color-error-default)',
|
||||
display: 'block',
|
||||
}}
|
||||
>
|
||||
<Typography {...args} overflowWrap={OVERFLOW_WRAP.NORMAL}>
|
||||
{OVERFLOW_WRAP.NORMAL}: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d
|
||||
</Typography>
|
||||
<Typography {...args} overflowWrap={OVERFLOW_WRAP.BREAK_WORD}>
|
||||
{OVERFLOW_WRAP.BREAK_WORD}: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d
|
||||
</Typography>
|
||||
</div>
|
||||
);
|
||||
|
||||
DefaultStory.storyName = 'List';
|
||||
|
||||
export const TheQuickOrangeFox = (args) => (
|
||||
<div style={{ width: '80%', flexDirection: 'column' }}>
|
||||
<div style={{ width: '100%' }}>
|
||||
<Typography {...args}>{args.content}</Typography>
|
||||
</div>
|
||||
</div>
|
||||
export const Tag = (args) => (
|
||||
<>
|
||||
{Object.values(ValidTags).map((tag) => (
|
||||
<Typography
|
||||
boxProps={{ backgroundColor: renderBackgroundColor(args.color) }}
|
||||
{...args}
|
||||
tag={tag}
|
||||
key={tag}
|
||||
>
|
||||
{tag}
|
||||
</Typography>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
||||
export const Margin = (args) => (
|
||||
<Typography {...args}>
|
||||
This Typography component has a margin of {args.margin * 4}px
|
||||
</Typography>
|
||||
);
|
||||
|
||||
Margin.args = {
|
||||
margin: 4,
|
||||
};
|
||||
|
||||
export const BoxProps = (args) => (
|
||||
<Typography {...args}>This uses the boxProps prop</Typography>
|
||||
);
|
||||
|
||||
BoxProps.args = {
|
||||
color: COLORS.TEXT_DEFAULT,
|
||||
boxProps: {
|
||||
backgroundColor: COLORS.INFO_MUTED,
|
||||
borderColor: COLORS.INFO_DEFAULT,
|
||||
padding: 4,
|
||||
borderRadius: 4,
|
||||
},
|
||||
};
|
||||
|
||||
@ -205,15 +205,6 @@ export const TEXT_ALIGN = {
|
||||
export const FONT_WEIGHT = {
|
||||
BOLD: 'bold',
|
||||
NORMAL: 'normal',
|
||||
100: 100,
|
||||
200: 200,
|
||||
300: 300,
|
||||
400: 400,
|
||||
500: 500,
|
||||
600: 600,
|
||||
700: 700,
|
||||
800: 800,
|
||||
900: 900,
|
||||
};
|
||||
|
||||
export const OVERFLOW_WRAP = {
|
||||
@ -224,7 +215,6 @@ export const OVERFLOW_WRAP = {
|
||||
export const FONT_STYLE = {
|
||||
ITALIC: 'italic',
|
||||
NORMAL: 'normal',
|
||||
OBLIQUE: 'oblique',
|
||||
};
|
||||
|
||||
export const SEVERITIES = {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user