m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Adding design-system enums and deprecating consts (#19133)

Browse Source 
Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
This commit is contained in:
Nazrul Hassan 2023-05-18 04:14:51 +05:30 committed by GitHub
parent 577e4cba0b
commit 9ef9327507
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 661 additions and 242 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

144
ui/components/ui/box/README.mdx
View File

@ -34,15 +34,15 @@ Box is a utility component that can be used for layout or as a base for other UI
| paddingInline | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - | | paddingInline | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| paddingInlineStart | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - | | paddingInlineStart | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| paddingInlineEnd | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - | | paddingInlineEnd | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| display | DISPLAY values or array of DISPLAY values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | | display | Display values or array of Display values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| flexDirection | FLEX_DIRECTION values or array of FLEX_DIRECTION values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | FLEX_DIRECTION.ROW | | flexDirection | FlexDirection values or array of FlexDirection values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | FlexDirection.Row |
| flexWrap | FLEX_WRAP values or array of FLEX_WRAP values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | | flexWrap | FlexWrap values or array of FlexWrap values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| alignItems | AlignItems values or array of AlignItems values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | | alignItems | AlignItems values or array of AlignItems values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| justifyContent | JustifyContent values or array of JustifyContent values from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | | justifyContent | JustifyContent values or array of JustifyContent values from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| gap | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - | | gap | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| textAlign | TEXT_ALIGN values or array of TEXT_ALIGN values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | | textAlign | TEXT_ALIGN values or array of TEXT_ALIGN values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| width | BLOCK_SIZES values or array of BLOCK_SIZES values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | | width | BlockSize values or array of BlockSize values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| height | BLOCK_SIZES values or array of BLOCK_SIZES values for responsive props [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | | height | BlockSize values or array of BlockSize values for responsive props [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| color | Color values or array of Color values for responsive props [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | | color | Color values or array of Color values for responsive props [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| backgroundColor | BackgroundColor values or array of BackgroundColor values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | | backgroundColor | BackgroundColor values or array of BackgroundColor values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
| borderColor | BorderColor values or array of BorderColor values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - | | borderColor | BorderColor values or array of BorderColor values for responsive props from [../ui/helpers/constants/design-system.js](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js) | - |
@ -115,31 +115,31 @@ Accepted props are: `0, 1, 2, 4, 6, 8, 9, 10, 12` or array of these values
The `display` prop can be used to set the display of the `Box` component. All of the display props accept [responsive props](#responsive-props) in the form of array props. The `display` prop can be used to set the display of the `Box` component. All of the display props accept [responsive props](#responsive-props) in the form of array props.
Accepted props imported from the design system `DISPLAY` const are: Accepted props imported from the design system `Display` const are:
- `DISPLAY.BLOCK` - `Display.Block`
- `DISPLAY.FLEX` - `Display.Flex`
- `DISPLAY.GRID` - `Display.Grid`
- `DISPLAY.INLINE_BLOCK` - `Display.InlineBlock`
- `DISPLAY.INLINE_FLEX` - `Display.InlineFlex`
- `DISPLAY.INLINE_GRID` - `Display.InlineGrid`
- `DISPLAY.INLINE` - `Display.Inline`
- `DISPLAY.LIST_ITEM` - `Display.ListItem`
- `DISPLAY.NONE` - `Display.None`
or array of these values. or array of these values.
```jsx ```jsx
import { DISPLAY } from '../../../helpers/constants/design-system'; import { Display } from '../../../helpers/constants/design-system';
import Box from '../ui/box'; import Box from '../ui/box';
<Box display={DISPLAY.BLOCK} /> <Box display={Display.Block} />
<Box display={DISPLAY.FLEX} /> <Box display={Display.Flex} />
<Box display={DISPLAY.GRID} /> <Box display={Display.Grid} />
<Box display={DISPLAY.INLINE_BLOCK} /> <Box display={Display.InlineBlock} />
<Box display={DISPLAY.INLINE_FLEX} /> <Box display={Display.InlineFlex} />
<Box display={DISPLAY.INLINE} /> <Box display={Display.Inline} />
<Box display={DISPLAY.NONE} /> <Box display={Display.None} />
``` ```
### Color ### Color
@ -318,16 +318,16 @@ import Box from '../../ui/box';
### Width ### Width
Use the `width` prop to pass a singular `BLOCK_SIZES` or for a responsive width pass an array up to 4 `BLOCK_SIZES` Use the `width` prop to pass a singular `BlockSize` or for a responsive width pass an array up to 4 `BlockSize`
Responsive widths go from smallest to largest screen sizes Responsive widths go from smallest to largest screen sizes
Example: [BLOCK_SIZES.HALF, BLOCK_SIZES.THREE_FOURTHS, BLOCK_SIZES.ONE_FIFTH, BLOCK_SIZES.THREE_SIXTHS] Example: [BlockSize.Half, BlockSize.ThreeFourths, BlockSize.OneFifth, BlockSize.ThreeSixths]
- BLOCK_SIZES.HALF is the default width for `base screen size (0px)` and up - BlockSize.Half is the default width for `base screen size (0px)` and up
- BLOCK_SIZES.THREE_FOURTHS is the width for `small screen size (576px) ` and up - BlockSize.ThreeFourths is the width for `small screen size (576px) ` and up
- BLOCK_SIZES.ONE_FIFTH is the width for `medium screen size (768px)` and up - BlockSize.OneFifth is the width for `medium screen size (768px)` and up
- BLOCK_SIZES.THREE_SIXTHS is the width for `large screen size (1280px)` and up - BlockSize.ThreeSixths is the width for `large screen size (1280px)` and up
<Canvas> <Canvas>
<Story id="components-ui-box--width" /> <Story id="components-ui-box--width" />
@ -335,74 +335,82 @@ Example: [BLOCK_SIZES.HALF, BLOCK_SIZES.THREE_FOURTHS, BLOCK_SIZES.ONE_FIFTH, BL
```jsx ```jsx
import { import {
BLOCK_SIZES, BlockSize,
DISPLAY, Display,
FLEX_WRAP, FlexWrap,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import Box from '../../ui/box'; import Box from '../../ui/box';
<> <>
<p>Static widths</p> <p>Static widths</p>
<Box display={DISPLAY.FLEX}> <Box display={Display.Flex}>
<Box width={BLOCK_SIZES.FULL}>BLOCK_SIZES.FULL</Box> <Box width={BlockSize.Full}>BlockSize.Full</Box>
<Box width={BLOCK_SIZES.HALF}>BLOCK_SIZES.HALF</Box> <Box width={BlockSize.Half}>BlockSize.Half</Box>
<Box width={BLOCK_SIZES.HALF}>BLOCK_SIZES.HALF</Box> <Box width={BlockSize.Half}>BlockSize.Half</Box>
<Box width={BLOCK_SIZES.ONE_THIRD}>BLOCK_SIZES.ONE_THIRD</Box> <Box width={BlockSize.OneThird}>BlockSize.OneThird</Box>
<Box width={BLOCK_SIZES.ONE_THIRD}>BLOCK_SIZES.ONE_THIRD</Box> <Box width={BlockSize.OneThird}>BlockSize.OneThird</Box>
<Box width={BLOCK_SIZES.ONE_THIRD}>BLOCK_SIZES.ONE_THIRD</Box> <Box width={BlockSize.OneThird}>BlockSize.OneThird</Box>
<Box width={BLOCK_SIZES.ONE_FOURTH}>BLOCK_SIZES.ONE_FOURTH</Box> <Box width={BlockSize.OneFourth}>BlockSize.OneFourth</Box>
<Box width={BLOCK_SIZES.ONE_FOURTH}>BLOCK_SIZES.ONE_FOURTH</Box> <Box width={BlockSize.OneFourth}>BlockSize.OneFourth</Box>
<Box width={BLOCK_SIZES.ONE_FOURTH}>BLOCK_SIZES.ONE_FOURTH</Box> <Box width={BlockSize.OneFourth}>BlockSize.OneFourth</Box>
<Box width={BLOCK_SIZES.ONE_FOURTH}>BLOCK_SIZES.ONE_FOURTH</Box> <Box width={BlockSize.OneFourth}>BlockSize.OneFourth</Box>
</Box> </Box>
<p>Responsive widths</p> <p>Responsive widths</p>
<Box display={DISPLAY.FLEX} flexWrap={FLEX_WRAP.WRAP}> <Box display={Display.Flex} flexWrap={FlexWrap.Wrap}>
<Box <Box
width={[ width={[
BLOCK_SIZES.FULL, BlockSize.Full,
BLOCK_SIZES.HALF, BlockSize.Half,
BLOCK_SIZES.ONE_THIRD, BlockSize.OneThird,
BLOCK_SIZES.ONE_FOURTH, BlockSize.OneFourth,
]} ]}
> >
BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD, BlockSize.Full,
BLOCK_SIZES.ONE_FOURTH, BlockSize.Half,
BlockSize.OneThird,
BlockSize.OneFourth,
</Box> </Box>
<Box <Box
width={[ width={[
BLOCK_SIZES.FULL, BlockSize.Full,
BLOCK_SIZES.HALF, BlockSize.Half,
BLOCK_SIZES.ONE_THIRD, BlockSize.OneThird,
BLOCK_SIZES.ONE_FOURTH, BlockSize.OneFourth,
]} ]}
> >
BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD, BlockSize.Full,
BLOCK_SIZES.ONE_FOURTH, BlockSize.Half,
BlockSize.OneThird,
BlockSize.OneFourth,
</Box> </Box>
<Box <Box
width={[ width={[
BLOCK_SIZES.FULL, BlockSize.Full,
BLOCK_SIZES.HALF, BlockSize.Half,
BLOCK_SIZES.ONE_THIRD, BlockSize.OneThird,
BLOCK_SIZES.ONE_FOURTH, BlockSize.OneFourth,
]} ]}
> >
BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD, BlockSize.Full,
BLOCK_SIZES.ONE_FOURTH, BlockSize.Half,
BlockSize.OneThird,
BlockSize.OneFourth,
</Box> </Box>
<Box <Box
width={[ width={[
BLOCK_SIZES.FULL, BlockSize.Full,
BLOCK_SIZES.HALF, BlockSize.Half,
BLOCK_SIZES.ONE_THIRD, BlockSize.OneThird,
BLOCK_SIZES.ONE_FOURTH, BlockSize.OneFourth,
]} ]}
> >
BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD, BlockSize.Full,
BLOCK_SIZES.ONE_FOURTH, BlockSize.Half,
BlockSize.OneThird,
BlockSize.OneFourth,
</Box> </Box>
</Box> </Box>
</>; </>;

101
ui/components/ui/box/box.d.ts vendored
View File

@ -2,61 +2,109 @@ import * as React from 'react';
import { import {
AlignItems, AlignItems,
BlockSize,
BLOCK_SIZES, BLOCK_SIZES,
BorderStyle, BorderStyle,
BackgroundColor, BackgroundColor,
BorderColor, BorderColor,
TextColor, TextColor,
IconColor, IconColor,
Display,
DISPLAY, DISPLAY,
JustifyContent, JustifyContent,
TextAlign,
TEXT_ALIGN, TEXT_ALIGN,
FlexDirection,
FLEX_DIRECTION, FLEX_DIRECTION,
FlexWrap,
FLEX_WRAP, FLEX_WRAP,
BorderRadius, BorderRadius,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
export type BoxChildren = React.ReactNode | ((...args: any[]) => any); export type BoxChildren = React.ReactNode | ((...args: any[]) => any);
export type BoxFlexDirection = export type FlexDirectionArray = [
FlexDirection,
FlexDirection?,
FlexDirection?,
FlexDirection?,
];
/**
* @deprecated BoxFlexDirection is deprecated. Use FlexDirection instead.
*/
type BoxFlexDirection =
| (typeof FLEX_DIRECTION)[keyof typeof FLEX_DIRECTION] | (typeof FLEX_DIRECTION)[keyof typeof FLEX_DIRECTION]
| null; | null;
export type BoxFlexDirectionArray = [
/**
* @deprecated BoxFlexDirectionArray is deprecated. Use FlexDirectionArray instead.
*/
type BoxFlexDirectionArray = [
BoxFlexDirection, BoxFlexDirection,
BoxFlexDirection?, BoxFlexDirection?,
BoxFlexDirection?, BoxFlexDirection?,
BoxFlexDirection?, BoxFlexDirection?,
]; ];
export type BoxFlexWrap = (typeof FLEX_WRAP)[keyof typeof FLEX_WRAP] | null; export type FlexWrapArray = [FlexWrap, FlexWrap?, FlexWrap?, FlexWrap?];
export type BoxFlexWrapArray = [
BoxFlexWrap,
BoxFlexWrap?,
BoxFlexWrap?,
BoxFlexWrap?,
];
export type BoxTextAlign = (typeof TEXT_ALIGN)[keyof typeof TEXT_ALIGN] | null; /**
export type BoxTextAlignArray = [ * @deprecated BoxFlexWrap is deprecated. Use FlexWrap instead.
*/
type BoxFlexWrap = (typeof FLEX_WRAP)[keyof typeof FLEX_WRAP] | null;
/**
* @deprecated BoxFlexWrapArray is deprecated. Use FlexWrapArray instead.
*/
type BoxFlexWrapArray = [BoxFlexWrap, BoxFlexWrap?, BoxFlexWrap?, BoxFlexWrap?];
export type TextAlignArray = [TextAlign, TextAlign?, TextAlign?, TextAlign?];
/**
* @deprecated BoxTextAlign is deprecated. Use TextAlign instead.
*/
type BoxTextAlign = (typeof TEXT_ALIGN)[keyof typeof TEXT_ALIGN] | null;
/**
* @deprecated BoxTextAlignArray is deprecated. Use TextAlignArray instead.
*/
type BoxTextAlignArray = [
BoxTextAlign, BoxTextAlign,
BoxTextAlign?, BoxTextAlign?,
BoxTextAlign?, BoxTextAlign?,
BoxTextAlign?, BoxTextAlign?,
]; ];
export type BoxDisplay = (typeof DISPLAY)[keyof typeof DISPLAY] | null; export type DisplayArray = [Display, Display?, Display?, Display?];
export type BoxDisplayArray = [
BoxDisplay,
BoxDisplay?,
BoxDisplay?,
BoxDisplay?,
];
/**
* @deprecated BoxDisplay is deprecated. Use Display instead.
*/
type BoxDisplay = (typeof DISPLAY)[keyof typeof DISPLAY] | null;
/**
* @deprecated BoxDisplayArray is deprecated. Use DisplayArray instead.
*/
type BoxDisplayArray = [BoxDisplay, BoxDisplay?, BoxDisplay?, BoxDisplay?];
export type BlockSizeArray = [BlockSize, BlockSize?, BlockSize?, BlockSize?];
/**
* @deprecated BoxWidth is deprecated. Use BlockSize instead.
*/
export type BoxWidth = (typeof BLOCK_SIZES)[keyof typeof BLOCK_SIZES] | null; export type BoxWidth = (typeof BLOCK_SIZES)[keyof typeof BLOCK_SIZES] | null;
/**
* @deprecated BoxWidthArray is deprecated. Use BlockSizeArray instead.
*/
export type BoxWidthArray = [BoxWidth, BoxWidth?, BoxWidth?, BoxWidth?]; export type BoxWidthArray = [BoxWidth, BoxWidth?, BoxWidth?, BoxWidth?];
export type BoxHeight = (typeof BLOCK_SIZES)[keyof typeof BLOCK_SIZES] | null; /**
export type BoxHeightArray = [BoxHeight, BoxHeight?, BoxHeight?, BoxHeight?]; * @deprecated BoxHeight is deprecated. Use BlockSize instead.
*/
type BoxHeight = (typeof BLOCK_SIZES)[keyof typeof BLOCK_SIZES] | null;
/**
* @deprecated BoxHeightArray is deprecated. Use BlockSizeArray instead.
*/
type BoxHeightArray = [BoxHeight, BoxHeight?, BoxHeight?, BoxHeight?];
export type SizeNumber = export type SizeNumber =
| 0 | 0
@ -130,6 +178,7 @@ export type BackgroundColorArray = [
BackgroundColor?, BackgroundColor?,
BackgroundColor?, BackgroundColor?,
]; ];
export interface BoxProps extends React.HTMLAttributes<HTMLElement> { export interface BoxProps extends React.HTMLAttributes<HTMLElement> {
/** /**
* The content of the Box component. * The content of the Box component.
@ -140,7 +189,11 @@ export interface BoxProps extends React.HTMLAttributes<HTMLElement> {
* Use the FLEX_DIRECTION object from '../../../helpers/constants/design-system'; * Use the FLEX_DIRECTION object from '../../../helpers/constants/design-system';
* Accepts responsive props in the form of an array. * Accepts responsive props in the form of an array.
*/ */
flexDirection?: BoxFlexDirection | BoxFlexDirectionArray; flexDirection?:
| FlexDirection
| FlexDirectionArray
| BoxFlexDirection
| BoxFlexDirectionArray;
/** /**
* The flex wrap of the Box component. * The flex wrap of the Box component.
* Use the FLEX_WRAP object from '../../../helpers/constants/design-system'; * Use the FLEX_WRAP object from '../../../helpers/constants/design-system';
@ -296,19 +349,19 @@ export interface BoxProps extends React.HTMLAttributes<HTMLElement> {
* Use DISPLAY const from '../../../helpers/constants/design-system'; * Use DISPLAY const from '../../../helpers/constants/design-system';
* Accepts responsive props in the form of an array. * Accepts responsive props in the form of an array.
*/ */
display?: BoxDisplay | BoxDisplayArray; display?: Display | DisplayArray | BoxDisplay | BoxDisplayArray;
/** /**
* The width of the Box component. * The width of the Box component.
* Use BLOCK_SIZES const from '../../../helpers/constants/design-system'; * Use BLOCK_SIZES const from '../../../helpers/constants/design-system';
* Accepts responsive props in the form of an array. * Accepts responsive props in the form of an array.
*/ */
width?: BoxWidth | BoxWidthArray; width?: BlockSize | BlockSizeArray | BoxWidth | BoxWidthArray;
/** /**
* The height of the Box component. * The height of the Box component.
* Use BLOCK_SIZES const from '../../../helpers/constants/design-system'; * Use BLOCK_SIZES const from '../../../helpers/constants/design-system';
* Accepts responsive props in the form of an array. * Accepts responsive props in the form of an array.
*/ */
height?: BoxHeight | BoxHeightArray; height?: BlockSize | BlockSizeArray | BoxHeight | BoxHeightArray;
/** /**
* The background-color of the Box component. * The background-color of the Box component.
* Use BackgroundColor enum from '../../../helpers/constants/design-system'; * Use BackgroundColor enum from '../../../helpers/constants/design-system';

24
ui/components/ui/box/box.js
View File

@ -4,26 +4,26 @@ import classnames from 'classnames';
import { memoize } from 'lodash'; import { memoize } from 'lodash';
import { import {
AlignItems, AlignItems,
BLOCK_SIZES, BlockSize,
BorderStyle, BorderStyle,
BackgroundColor, BackgroundColor,
BorderColor, BorderColor,
TextColor, TextColor,
IconColor, IconColor,
DISPLAY,
JustifyContent, JustifyContent,
TEXT_ALIGN, TEXT_ALIGN,
FLEX_DIRECTION, FlexDirection,
FLEX_WRAP, FlexWrap,
BREAKPOINTS, BREAKPOINTS,
BorderRadius, BorderRadius,
Display,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
const BASE_CLASS_NAME = 'box'; const BASE_CLASS_NAME = 'box';
const Sizes = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; const Sizes = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
const ValidSize = PropTypes.oneOf(Sizes); const ValidSize = PropTypes.oneOf(Sizes);
const ValidBlockSize = PropTypes.oneOf(Object.values(BLOCK_SIZES)); const ValidBlockSize = PropTypes.oneOf(Object.values(BlockSize));
const ValidSizeAndAuto = PropTypes.oneOf([...Sizes, 'auto']); const ValidSizeAndAuto = PropTypes.oneOf([...Sizes, 'auto']);
export const ValidBackgroundColor = PropTypes.oneOf( export const ValidBackgroundColor = PropTypes.oneOf(
Object.values(BackgroundColor), Object.values(BackgroundColor),
@ -212,7 +212,7 @@ const Box = React.forwardRef(function Box(
alignItems, alignItems,
justifyContent, justifyContent,
textAlign, textAlign,
flexDirection = FLEX_DIRECTION.ROW, flexDirection = FlexDirection.Row,
flexWrap, flexWrap,
gap, gap,
display, display,
@ -329,12 +329,12 @@ function isCustomComponent(element) {
Box.propTypes = { Box.propTypes = {
children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]), children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
flexDirection: PropTypes.oneOfType([ flexDirection: PropTypes.oneOfType([
PropTypes.oneOf(Object.values(FLEX_DIRECTION)), PropTypes.oneOf(Object.values(FlexDirection)),
PropTypes.arrayOf(PropTypes.oneOf(Object.values(FLEX_DIRECTION))), PropTypes.arrayOf(PropTypes.oneOf(Object.values(FlexDirection))),
]), ]),
flexWrap: PropTypes.oneOfType([ flexWrap: PropTypes.oneOfType([
PropTypes.oneOf(Object.values(FLEX_WRAP)), PropTypes.oneOf(Object.values(FlexWrap)),
PropTypes.arrayOf(PropTypes.oneOf(Object.values(FLEX_WRAP))), PropTypes.arrayOf(PropTypes.oneOf(Object.values(FlexWrap))),
]), ]),
gap: MultipleSizes, gap: MultipleSizes,
margin: MultipleSizesAndAuto, margin: MultipleSizesAndAuto,
@ -373,8 +373,8 @@ Box.propTypes = {
PropTypes.arrayOf(PropTypes.oneOf(Object.values(TEXT_ALIGN))), PropTypes.arrayOf(PropTypes.oneOf(Object.values(TEXT_ALIGN))),
]), ]),
display: PropTypes.oneOfType([ display: PropTypes.oneOfType([
PropTypes.oneOf(Object.values(DISPLAY)), PropTypes.oneOf(Object.values(Display)),
PropTypes.arrayOf(PropTypes.oneOf(Object.values(DISPLAY))), PropTypes.arrayOf(PropTypes.oneOf(Object.values(Display))),
]), ]),
width: MultipleBlockSizes, width: MultipleBlockSizes,
height: MultipleBlockSizes, height: MultipleBlockSizes,

178
ui/components/ui/box/box.stories.tsx
View File

@ -2,18 +2,18 @@ import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react'; import { ComponentStory, ComponentMeta } from '@storybook/react';
import { import {
BLOCK_SIZES, BlockSize,
BorderStyle, BorderStyle,
BorderRadius, BorderRadius,
TextColor, TextColor,
BorderColor, BorderColor,
BackgroundColor, BackgroundColor,
DISPLAY, Display,
AlignItems, AlignItems,
JustifyContent, JustifyContent,
TEXT_ALIGN, TEXT_ALIGN,
FLEX_DIRECTION, FlexDirection,
FLEX_WRAP, FlexWrap,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import { Text } from '../../component-library'; import { Text } from '../../component-library';
@ -53,17 +53,17 @@ export default {
table: { category: 'children' }, table: { category: 'children' },
}, },
display: { display: {
options: Object.values(DISPLAY), options: Object.values(Display),
control: 'select', control: 'select',
table: { category: 'display' }, table: { category: 'display' },
}, },
width: { width: {
options: Object.values(BLOCK_SIZES), options: Object.values(BlockSize),
control: 'multi-select', control: 'multi-select',
table: { category: 'display' }, table: { category: 'display' },
}, },
height: { height: {
options: Object.values(BLOCK_SIZES), options: Object.values(BlockSize),
control: 'select', control: 'select',
table: { category: 'display' }, table: { category: 'display' },
}, },
@ -105,12 +105,12 @@ export default {
table: { category: 'border' }, table: { category: 'border' },
}, },
flexWrap: { flexWrap: {
options: Object.values(FLEX_WRAP), options: Object.values(FlexWrap),
control: 'select', control: 'select',
table: { category: 'display' }, table: { category: 'display' },
}, },
flexDirection: { flexDirection: {
options: Object.values(FLEX_DIRECTION), options: Object.values(FlexDirection),
control: 'select', control: 'select',
table: { category: 'display' }, table: { category: 'display' },
}, },
@ -223,11 +223,11 @@ export const DefaultStory: ComponentStory<typeof Box> = (args) => (
DefaultStory.args = { DefaultStory.args = {
children: 'Box component', children: 'Box component',
display: DISPLAY.FLEX, display: Display.Flex,
justifyContent: JustifyContent.center, justifyContent: JustifyContent.center,
alignItems: AlignItems.center, alignItems: AlignItems.center,
width: BLOCK_SIZES.HALF, width: BlockSize.Half,
height: BLOCK_SIZES.HALF, height: BlockSize.Half,
borderColor: BorderColor.borderDefault, borderColor: BorderColor.borderDefault,
padding: 4, padding: 4,
}; };
@ -497,7 +497,7 @@ export const BorderRadiusStory = () => {
return ( return (
<> <>
<Box <Box
display={DISPLAY.GRID} display={Display.Grid}
style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))' }} style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))' }}
gap={4} gap={4}
> >
@ -572,7 +572,7 @@ export const BorderRadiusStory = () => {
borderWidth={2} borderWidth={2}
borderRadius={BorderRadius.full} borderRadius={BorderRadius.full}
margin={4} margin={4}
display={DISPLAY.FLEX} display={Display.Flex}
alignItems={AlignItems.center} alignItems={AlignItems.center}
style={{ height: '250px', width: '250px' }} style={{ height: '250px', width: '250px' }}
> >
@ -596,11 +596,11 @@ export const ResponsiveProps = () => {
marginBottom={[0]} marginBottom={[0]}
padding={[2, 4]} padding={[2, 4]}
gap={[2, 4]} gap={[2, 4]}
display={[DISPLAY.FLEX, null, null, DISPLAY.NONE]} display={[Display.Flex, null, null, Display.None]}
flexDirection={[ flexDirection={[
FLEX_DIRECTION.COLUMN, FlexDirection.Column,
FLEX_DIRECTION.COLUMN, FlexDirection.Column,
FLEX_DIRECTION.ROW, FlexDirection.Row,
]} ]}
borderColor={BorderColor.borderDefault} borderColor={BorderColor.borderDefault}
> >
@ -699,7 +699,7 @@ export const Width: ComponentStory<typeof Box> = () => {
? BackgroundColor.errorMuted ? BackgroundColor.errorMuted
: BackgroundColor.warningMuted : BackgroundColor.warningMuted
} }
width={BLOCK_SIZES.ONE_TWELFTH} width={BlockSize.OneTwelfth}
/>, />,
); );
} }
@ -712,7 +712,7 @@ export const Width: ComponentStory<typeof Box> = () => {
<b>Static widths</b> <b>Static widths</b>
</p> </p>
<Box <Box
display={DISPLAY.FLEX} display={Display.Flex}
borderColor={BorderColor.borderMuted} borderColor={BorderColor.borderMuted}
style={{ style={{
height: '100vh', height: '100vh',
@ -723,9 +723,9 @@ export const Width: ComponentStory<typeof Box> = () => {
{getColumns()} {getColumns()}
<Box <Box
width={BLOCK_SIZES.FULL} width={BlockSize.Full}
display={DISPLAY.FLEX} display={Display.Flex}
flexWrap={FLEX_WRAP.WRAP} flexWrap={FlexWrap.Wrap}
style={{ style={{
position: 'absolute', position: 'absolute',
top: 0, top: 0,
@ -738,107 +738,107 @@ export const Width: ComponentStory<typeof Box> = () => {
borderColor={BorderColor.borderMuted} borderColor={BorderColor.borderMuted}
borderWidth={6} borderWidth={6}
marginBottom={6} marginBottom={6}
width={BLOCK_SIZES.FULL} width={BlockSize.Full}
display={DISPLAY.FLEX} display={Display.Flex}
alignItems={AlignItems.center} alignItems={AlignItems.center}
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}
> >
BLOCK_SIZES.FULL BlockSize.Full
</Box> </Box>
<Box <Box
borderColor={BorderColor.borderMuted} borderColor={BorderColor.borderMuted}
borderWidth={6} borderWidth={6}
marginBottom={6} marginBottom={6}
width={BLOCK_SIZES.HALF} width={BlockSize.Half}
display={DISPLAY.FLEX} display={Display.Flex}
alignItems={AlignItems.center} alignItems={AlignItems.center}
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}
> >
BLOCK_SIZES.HALF BlockSize.Half
</Box> </Box>
<Box <Box
borderColor={BorderColor.borderMuted} borderColor={BorderColor.borderMuted}
borderWidth={6} borderWidth={6}
marginBottom={6} marginBottom={6}
width={BLOCK_SIZES.HALF} width={BlockSize.Half}
display={DISPLAY.FLEX} display={Display.Flex}
alignItems={AlignItems.center} alignItems={AlignItems.center}
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}
> >
BLOCK_SIZES.HALF BlockSize.Half
</Box> </Box>
<Box <Box
borderColor={BorderColor.borderMuted} borderColor={BorderColor.borderMuted}
borderWidth={6} borderWidth={6}
marginBottom={6} marginBottom={6}
width={BLOCK_SIZES.ONE_THIRD} width={BlockSize.OneThird}
display={DISPLAY.FLEX} display={Display.Flex}
alignItems={AlignItems.center} alignItems={AlignItems.center}
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}
> >
BLOCK_SIZES.ONE_THIRD BlockSize.OneThird
</Box> </Box>
<Box <Box
borderColor={BorderColor.borderMuted} borderColor={BorderColor.borderMuted}
borderWidth={6} borderWidth={6}
marginBottom={6} marginBottom={6}
width={BLOCK_SIZES.ONE_THIRD} width={BlockSize.OneThird}
display={DISPLAY.FLEX} display={Display.Flex}
alignItems={AlignItems.center} alignItems={AlignItems.center}
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}
> >
BLOCK_SIZES.ONE_THIRD BlockSize.OneThird
</Box> </Box>
<Box <Box
borderColor={BorderColor.borderMuted} borderColor={BorderColor.borderMuted}
borderWidth={6} borderWidth={6}
marginBottom={6} marginBottom={6}
width={BLOCK_SIZES.ONE_THIRD} width={BlockSize.OneThird}
display={DISPLAY.FLEX} display={Display.Flex}
alignItems={AlignItems.center} alignItems={AlignItems.center}
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}
> >
BLOCK_SIZES.ONE_THIRD BlockSize.OneThird
</Box> </Box>
<Box <Box
borderColor={BorderColor.borderMuted} borderColor={BorderColor.borderMuted}
borderWidth={6} borderWidth={6}
width={BLOCK_SIZES.ONE_FOURTH} width={BlockSize.OneFourth}
display={DISPLAY.FLEX} display={Display.Flex}
alignItems={AlignItems.center} alignItems={AlignItems.center}
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}
> >
BLOCK_SIZES.ONE_FOURTH BlockSize.OneFourth
</Box> </Box>
<Box <Box
borderColor={BorderColor.borderMuted} borderColor={BorderColor.borderMuted}
borderWidth={6} borderWidth={6}
width={BLOCK_SIZES.ONE_FOURTH} width={BlockSize.OneFourth}
display={DISPLAY.FLEX} display={Display.Flex}
alignItems={AlignItems.center} alignItems={AlignItems.center}
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}
> >
BLOCK_SIZES.ONE_FOURTH BlockSize.OneFourth
</Box> </Box>
<Box <Box
borderColor={BorderColor.borderMuted} borderColor={BorderColor.borderMuted}
borderWidth={6} borderWidth={6}
width={BLOCK_SIZES.ONE_FOURTH} width={BlockSize.OneFourth}
display={DISPLAY.FLEX} display={Display.Flex}
alignItems={AlignItems.center} alignItems={AlignItems.center}
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}
> >
BLOCK_SIZES.ONE_FOURTH BlockSize.OneFourth
</Box> </Box>
<Box <Box
borderColor={BorderColor.borderMuted} borderColor={BorderColor.borderMuted}
borderWidth={6} borderWidth={6}
width={BLOCK_SIZES.ONE_FOURTH} width={BlockSize.OneFourth}
display={DISPLAY.FLEX} display={Display.Flex}
alignItems={AlignItems.center} alignItems={AlignItems.center}
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}
> >
BLOCK_SIZES.ONE_FOURTH BlockSize.OneFourth
</Box> </Box>
</Box> </Box>
</Box> </Box>
@ -846,16 +846,16 @@ export const Width: ComponentStory<typeof Box> = () => {
<b>Responsive widths</b> <b>Responsive widths</b>
</p> </p>
<Box <Box
display={DISPLAY.FLEX} display={Display.Flex}
borderColor={BorderColor.borderMuted} borderColor={BorderColor.borderMuted}
style={{ height: '100vh', position: 'relative', textAlign: 'center' }} style={{ height: '100vh', position: 'relative', textAlign: 'center' }}
> >
{getColumns()} {getColumns()}
<Box <Box
width={BLOCK_SIZES.FULL} width={BlockSize.Full}
display={DISPLAY.FLEX} display={Display.Flex}
flexWrap={FLEX_WRAP.WRAP} flexWrap={FlexWrap.Wrap}
style={{ style={{
position: 'absolute', position: 'absolute',
top: 0, top: 0,
@ -868,65 +868,65 @@ export const Width: ComponentStory<typeof Box> = () => {
borderColor={BorderColor.borderMuted} borderColor={BorderColor.borderMuted}
borderWidth={6} borderWidth={6}
width={[ width={[
BLOCK_SIZES.FULL, BlockSize.Full,
BLOCK_SIZES.HALF, BlockSize.Half,
BLOCK_SIZES.ONE_THIRD, BlockSize.OneThird,
BLOCK_SIZES.ONE_FOURTH, BlockSize.OneFourth,
]} ]}
display={DISPLAY.FLEX} display={Display.Flex}
alignItems={AlignItems.center} alignItems={AlignItems.center}
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}
> >
BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD, BlockSize.Full, BlockSize.Half, BlockSize.OneThird,
BLOCK_SIZES.ONE_FOURTH, BlockSize.OneFourth,
</Box> </Box>
<Box <Box
borderColor={BorderColor.borderMuted} borderColor={BorderColor.borderMuted}
borderWidth={6} borderWidth={6}
width={[ width={[
BLOCK_SIZES.FULL, BlockSize.Full,
BLOCK_SIZES.HALF, BlockSize.Half,
BLOCK_SIZES.ONE_THIRD, BlockSize.OneThird,
BLOCK_SIZES.ONE_FOURTH, BlockSize.OneFourth,
]} ]}
display={DISPLAY.FLEX} display={Display.Flex}
alignItems={AlignItems.center} alignItems={AlignItems.center}
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}
> >
BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD, BlockSize.Full, BlockSize.Half, BlockSize.OneThird,
BLOCK_SIZES.ONE_FOURTH, BlockSize.OneFourth,
</Box> </Box>
<Box <Box
borderColor={BorderColor.borderMuted} borderColor={BorderColor.borderMuted}
borderWidth={6} borderWidth={6}
width={[ width={[
BLOCK_SIZES.FULL, BlockSize.Full,
BLOCK_SIZES.HALF, BlockSize.Half,
BLOCK_SIZES.ONE_THIRD, BlockSize.OneThird,
BLOCK_SIZES.ONE_FOURTH, BlockSize.OneFourth,
]} ]}
display={DISPLAY.FLEX} display={Display.Flex}
alignItems={AlignItems.center} alignItems={AlignItems.center}
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}
> >
BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD, BlockSize.Full, BlockSize.Half, BlockSize.OneThird,
BLOCK_SIZES.ONE_FOURTH, BlockSize.OneFourth,
</Box> </Box>
<Box <Box
borderColor={BorderColor.borderMuted} borderColor={BorderColor.borderMuted}
borderWidth={6} borderWidth={6}
width={[ width={[
BLOCK_SIZES.FULL, BlockSize.Full,
BLOCK_SIZES.HALF, BlockSize.Half,
BLOCK_SIZES.ONE_THIRD, BlockSize.OneThird,
BLOCK_SIZES.ONE_FOURTH, BlockSize.OneFourth,
]} ]}
display={DISPLAY.FLEX} display={Display.Flex}
alignItems={AlignItems.center} alignItems={AlignItems.center}
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}
> >
BLOCK_SIZES.FULL, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_THIRD, BlockSize.Full, BlockSize.Half, BlockSize.OneThird,
BLOCK_SIZES.ONE_FOURTH, BlockSize.OneFourth,
</Box> </Box>
</Box> </Box>
</Box> </Box>
@ -936,9 +936,9 @@ export const Width: ComponentStory<typeof Box> = () => {
Width.args = { Width.args = {
width: [ width: [
BLOCK_SIZES.HALF, BlockSize.Half,
BLOCK_SIZES.ONE_FIFTH, BlockSize.OneFifth,
BLOCK_SIZES.THREE_FOURTHS, BlockSize.ThreeFourths,
BLOCK_SIZES.ONE_FOURTH, BlockSize.OneFourth,
], ],
}; };

353
ui/components/ui/box/box.test.tsx
View File

@ -2,12 +2,17 @@ import * as React from 'react';
import { render } from '@testing-library/react'; import { render } from '@testing-library/react';
import { import {
BorderStyle, BorderStyle,
Display,
DISPLAY, DISPLAY,
FlexDirection,
FLEX_DIRECTION, FLEX_DIRECTION,
FlexWrap,
FLEX_WRAP, FLEX_WRAP,
AlignItems, AlignItems,
JustifyContent, JustifyContent,
TEXT_ALIGN, TEXT_ALIGN,
TextAlign,
BlockSize,
BLOCK_SIZES, BLOCK_SIZES,
BorderRadius, BorderRadius,
BorderColor, BorderColor,
@ -487,15 +492,32 @@ describe('Box', () => {
it('should render the Box with the display classes', () => { it('should render the Box with the display classes', () => {
const { getByText } = render( const { getByText } = render(
<> <>
<Box display={DISPLAY.BLOCK}>Box display-block</Box> <Box display={Display.Block}>Box display-block</Box>
<Box display={DISPLAY.FLEX}>Box display-flex</Box> <Box display={Display.Flex}>Box display-flex</Box>
<Box display={DISPLAY.GRID}>Box display-grid</Box> <Box display={Display.Grid}>Box display-grid</Box>
<Box display={DISPLAY.INLINE}>Box display-inline</Box> <Box display={Display.Inline}>Box display-inline</Box>
<Box display={DISPLAY.INLINE_BLOCK}>Box display-inline-block</Box> <Box display={Display.InlineBlock}>Box display-inline-block</Box>
<Box display={DISPLAY.INLINE_FLEX}>Box display-inline-flex</Box> <Box display={Display.InlineFlex}>Box display-inline-flex</Box>
<Box display={DISPLAY.INLINE_GRID}>Box display-inline-grid</Box> <Box display={Display.InlineGrid}>Box display-inline-grid</Box>
<Box display={DISPLAY.LIST_ITEM}>Box display-list-item</Box> <Box display={Display.ListItem}>Box display-list-item</Box>
<Box display={DISPLAY.NONE}>Box display-none</Box> <Box display={Display.None}>Box display-none</Box>
<Box display={DISPLAY.BLOCK}>DEPRECATED Box display-block</Box>
<Box display={DISPLAY.FLEX}>DEPRECATED Box display-flex</Box>
<Box display={DISPLAY.GRID}>DEPRECATED Box display-grid</Box>
<Box display={DISPLAY.INLINE}>DEPRECATED Box display-inline</Box>
<Box display={DISPLAY.INLINE_BLOCK}>
DEPRECATED Box display-inline-block
</Box>
<Box display={DISPLAY.INLINE_FLEX}>
DEPRECATED Box display-inline-flex
</Box>
<Box display={DISPLAY.INLINE_GRID}>
DEPRECATED Box display-inline-grid
</Box>
<Box display={DISPLAY.LIST_ITEM}>
DEPRECATED Box display-list-item
</Box>
<Box display={DISPLAY.NONE}>DEPRECATED Box display-none</Box>
</>, </>,
); );
@ -517,21 +539,64 @@ describe('Box', () => {
expect(getByText('Box display-list-item')).toHaveClass( expect(getByText('Box display-list-item')).toHaveClass(
'box--display-list-item', 'box--display-list-item',
); );
expect(getByText('DEPRECATED Box display-block')).toHaveClass(
'box--display-block',
);
expect(getByText('DEPRECATED Box display-flex')).toHaveClass(
'box--display-flex',
);
expect(getByText('DEPRECATED Box display-grid')).toHaveClass(
'box--display-grid',
);
expect(getByText('DEPRECATED Box display-inline')).toHaveClass(
'box--display-inline',
);
expect(getByText('DEPRECATED Box display-inline-block')).toHaveClass(
'box--display-inline-block',
);
expect(getByText('DEPRECATED Box display-inline-flex')).toHaveClass(
'box--display-inline-flex',
);
expect(getByText('DEPRECATED Box display-inline-grid')).toHaveClass(
'box--display-inline-grid',
);
expect(getByText('DEPRECATED Box display-list-item')).toHaveClass(
'box--display-list-item',
);
}); });
it('should render the Box with the responsive display classes', () => { it('should render the Box with the responsive display classes', () => {
const { getByText } = render( const { getByText } = render(
<> <>
<Box <Box
display={[DISPLAY.BLOCK, DISPLAY.FLEX, DISPLAY.GRID, DISPLAY.NONE]} display={[Display.Block, Display.Flex, Display.Grid, Display.None]}
> >
Box content Box content
</Box> </Box>
<Box
display={[DISPLAY.BLOCK, DISPLAY.FLEX, DISPLAY.GRID, DISPLAY.NONE]}
>
DEPRECATED Box content
</Box>
</>, </>,
); );
expect(getByText('Box content')).toHaveClass('box--display-block'); expect(getByText('Box content')).toHaveClass('box--display-block');
expect(getByText('Box content')).toHaveClass('box--sm:display-flex'); expect(getByText('Box content')).toHaveClass('box--sm:display-flex');
expect(getByText('Box content')).toHaveClass('box--md:display-grid'); expect(getByText('Box content')).toHaveClass('box--md:display-grid');
expect(getByText('Box content')).toHaveClass('box--lg:display-none'); expect(getByText('Box content')).toHaveClass('box--lg:display-none');
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--display-block',
);
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--sm:display-flex',
);
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--md:display-grid',
);
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--lg:display-none',
);
}); });
it('should render the Box with the gap class', () => { it('should render the Box with the gap class', () => {
const { getByText } = render(<Box gap={1}>Box content</Box>); const { getByText } = render(<Box gap={1}>Box content</Box>);
@ -549,16 +614,29 @@ describe('Box', () => {
it('should render the Box with the flexDirection classes', () => { it('should render the Box with the flexDirection classes', () => {
const { getByText } = render( const { getByText } = render(
<> <>
<Box flexDirection={FLEX_DIRECTION.ROW}>Box flex-direction-row</Box> <Box flexDirection={FlexDirection.Row}>Box flex-direction-row</Box>
<Box flexDirection={FLEX_DIRECTION.ROW_REVERSE}> <Box flexDirection={FlexDirection.RowReverse}>
Box flex-direction-row-reverse Box flex-direction-row-reverse
</Box> </Box>
<Box flexDirection={FLEX_DIRECTION.COLUMN}> <Box flexDirection={FlexDirection.Column}>
Box flex-direction-column Box flex-direction-column
</Box> </Box>
<Box flexDirection={FLEX_DIRECTION.COLUMN_REVERSE}> <Box flexDirection={FlexDirection.ColumnReverse}>
Box flex-direction-column-reverse Box flex-direction-column-reverse
</Box> </Box>
<Box flexDirection={FlexDirection.Row}>
DEPRECATED Box flex-direction-row
</Box>
<Box flexDirection={FlexDirection.RowReverse}>
DEPRECATED Box flex-direction-row-reverse
</Box>
<Box flexDirection={FlexDirection.Column}>
DEPRECATED Box flex-direction-column
</Box>
<Box flexDirection={FlexDirection.ColumnReverse}>
DEPRECATED Box flex-direction-column-reverse
</Box>
</>, </>,
); );
@ -574,10 +652,33 @@ describe('Box', () => {
expect(getByText('Box flex-direction-column-reverse')).toHaveClass( expect(getByText('Box flex-direction-column-reverse')).toHaveClass(
'box--flex-direction-column-reverse', 'box--flex-direction-column-reverse',
); );
expect(getByText('DEPRECATED Box flex-direction-row')).toHaveClass(
'box--flex-direction-row',
);
expect(
getByText('DEPRECATED Box flex-direction-row-reverse'),
).toHaveClass('box--flex-direction-row-reverse');
expect(getByText('DEPRECATED Box flex-direction-column')).toHaveClass(
'box--flex-direction-column',
);
expect(
getByText('DEPRECATED Box flex-direction-column-reverse'),
).toHaveClass('box--flex-direction-column-reverse');
}); });
it('should render the Box with the responsive flexDirection classes', () => { it('should render the Box with the responsive flexDirection classes', () => {
const { getByText } = render( const { getByText } = render(
<> <>
<Box
flexDirection={[
FlexDirection.Row,
FlexDirection.RowReverse,
FlexDirection.Column,
FlexDirection.ColumnReverse,
]}
>
Box content
</Box>
<Box <Box
flexDirection={[ flexDirection={[
FLEX_DIRECTION.ROW, FLEX_DIRECTION.ROW,
@ -586,7 +687,7 @@ describe('Box', () => {
FLEX_DIRECTION.COLUMN_REVERSE, FLEX_DIRECTION.COLUMN_REVERSE,
]} ]}
> >
Box content DEPRECATED Box content
</Box> </Box>
</>, </>,
); );
@ -600,15 +701,34 @@ describe('Box', () => {
expect(getByText('Box content')).toHaveClass( expect(getByText('Box content')).toHaveClass(
'box--lg:flex-direction-column-reverse', 'box--lg:flex-direction-column-reverse',
); );
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--flex-direction-row',
);
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--sm:flex-direction-row-reverse',
);
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--md:flex-direction-column',
);
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--lg:flex-direction-column-reverse',
);
}); });
it('should render the Box with the flexWrap classes', () => { it('should render the Box with the flexWrap classes', () => {
const { getByText } = render( const { getByText } = render(
<> <>
<Box flexWrap={FLEX_WRAP.WRAP}>Box flex-wrap-wrap</Box> <Box flexWrap={FlexWrap.Wrap}>Box flex-wrap-wrap</Box>
<Box flexWrap={FlexWrap.WrapReverse}>Box flex-wrap-wrap-reverse</Box>
<Box flexWrap={FlexWrap.NoWrap}>Box flex-wrap-nowrap</Box>
<Box flexWrap={FLEX_WRAP.WRAP}>DEPRECATED Box flex-wrap-wrap</Box>
<Box flexWrap={FLEX_WRAP.WRAP_REVERSE}> <Box flexWrap={FLEX_WRAP.WRAP_REVERSE}>
Box flex-wrap-wrap-reverse DEPRECATED Box flex-wrap-wrap-reverse
</Box>
<Box flexWrap={FLEX_WRAP.NO_WRAP}>
DEPRECATED Box flex-wrap-nowrap
</Box> </Box>
<Box flexWrap={FLEX_WRAP.NO_WRAP}>Box flex-wrap-nowrap</Box>
</>, </>,
); );
@ -621,19 +741,30 @@ describe('Box', () => {
expect(getByText('Box flex-wrap-nowrap')).toHaveClass( expect(getByText('Box flex-wrap-nowrap')).toHaveClass(
'box--flex-wrap-nowrap', 'box--flex-wrap-nowrap',
); );
expect(getByText('DEPRECATED Box flex-wrap-wrap')).toHaveClass(
'box--flex-wrap-wrap',
);
expect(getByText('DEPRECATED Box flex-wrap-wrap-reverse')).toHaveClass(
'box--flex-wrap-wrap-reverse',
);
expect(getByText('DEPRECATED Box flex-wrap-nowrap')).toHaveClass(
'box--flex-wrap-nowrap',
);
}); });
it('should render the Box with the responsive flexWrap classes', () => { it('should render the Box with the responsive flexWrap classes', () => {
const { getByText } = render( const { getByText } = render(
<> <>
<Box <Box
flexWrap={[ flexWrap={[FlexWrap.Wrap, FlexWrap.WrapReverse, FlexWrap.NoWrap]}
FLEX_WRAP.WRAP,
FLEX_WRAP.WRAP_REVERSE,
FLEX_WRAP.NO_WRAP,
]}
> >
Box content Box content
</Box> </Box>
<Box
flexWrap={[FlexWrap.Wrap, FlexWrap.WrapReverse, FlexWrap.NoWrap]}
>
DEPRECATED Box content
</Box>
</>, </>,
); );
expect(getByText('Box content')).toHaveClass('box--flex-wrap-wrap'); expect(getByText('Box content')).toHaveClass('box--flex-wrap-wrap');
@ -641,6 +772,16 @@ describe('Box', () => {
'box--sm:flex-wrap-wrap-reverse', 'box--sm:flex-wrap-wrap-reverse',
); );
expect(getByText('Box content')).toHaveClass('box--md:flex-wrap-nowrap'); expect(getByText('Box content')).toHaveClass('box--md:flex-wrap-nowrap');
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--flex-wrap-wrap',
);
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--sm:flex-wrap-wrap-reverse',
);
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--md:flex-wrap-nowrap',
);
}); });
it('should render the Box with the alignItems classes', () => { it('should render the Box with the alignItems classes', () => {
const { getByText } = render( const { getByText } = render(
@ -772,11 +913,17 @@ describe('Box', () => {
it('should render the Box with the textAlign auto class', () => { it('should render the Box with the textAlign auto class', () => {
const { getByText } = render( const { getByText } = render(
<> <>
<Box textAlign={TEXT_ALIGN.LEFT}>Box left</Box> <Box textAlign={TextAlign.Left}>Box left</Box>
<Box textAlign={TEXT_ALIGN.CENTER}>Box center</Box> <Box textAlign={TextAlign.Center}>Box center</Box>
<Box textAlign={TEXT_ALIGN.RIGHT}>Box right</Box> <Box textAlign={TextAlign.Right}>Box right</Box>
<Box textAlign={TEXT_ALIGN.JUSTIFY}>Box justify</Box> <Box textAlign={TextAlign.Justify}>Box justify</Box>
<Box textAlign={TEXT_ALIGN.END}>Box end</Box> <Box textAlign={TextAlign.End}>Box end</Box>
<Box textAlign={TEXT_ALIGN.LEFT}>DEPRECATED Box left</Box>
<Box textAlign={TEXT_ALIGN.CENTER}>DEPRECATED Box center</Box>
<Box textAlign={TEXT_ALIGN.RIGHT}>DEPRECATED Box right</Box>
<Box textAlign={TEXT_ALIGN.JUSTIFY}>DEPRECATED Box justify</Box>
<Box textAlign={TEXT_ALIGN.END}>DEPRECATED Box end</Box>
</>, </>,
); );
@ -785,19 +932,47 @@ describe('Box', () => {
expect(getByText('Box right')).toHaveClass('box--text-align-right'); expect(getByText('Box right')).toHaveClass('box--text-align-right');
expect(getByText('Box justify')).toHaveClass('box--text-align-justify'); expect(getByText('Box justify')).toHaveClass('box--text-align-justify');
expect(getByText('Box end')).toHaveClass('box--text-align-end'); expect(getByText('Box end')).toHaveClass('box--text-align-end');
expect(getByText('DEPRECATED Box left')).toHaveClass(
'box--text-align-left',
);
expect(getByText('DEPRECATED Box center')).toHaveClass(
'box--text-align-center',
);
expect(getByText('DEPRECATED Box right')).toHaveClass(
'box--text-align-right',
);
expect(getByText('DEPRECATED Box justify')).toHaveClass(
'box--text-align-justify',
);
expect(getByText('DEPRECATED Box end')).toHaveClass(
'box--text-align-end',
);
}); });
it('should render the Box with the responsive textAlign classes', () => { it('should render the Box with the responsive textAlign classes', () => {
const { getByText } = render( const { getByText } = render(
<Box <>
textAlign={[ <Box
TEXT_ALIGN.LEFT, textAlign={[
TEXT_ALIGN.CENTER, TextAlign.Left,
TEXT_ALIGN.RIGHT, TextAlign.Center,
TEXT_ALIGN.JUSTIFY, TextAlign.Right,
]} TextAlign.Justify,
> ]}
Box content >
</Box>, Box content
</Box>
<Box
textAlign={[
TEXT_ALIGN.LEFT,
TEXT_ALIGN.CENTER,
TEXT_ALIGN.RIGHT,
TEXT_ALIGN.JUSTIFY,
]}
>
DEPRECATED Box content
</Box>
</>,
); );
expect(getByText('Box content')).toHaveClass('box--text-align-left'); expect(getByText('Box content')).toHaveClass('box--text-align-left');
@ -806,6 +981,19 @@ describe('Box', () => {
expect(getByText('Box content')).toHaveClass( expect(getByText('Box content')).toHaveClass(
'box--lg:text-align-justify', 'box--lg:text-align-justify',
); );
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--text-align-left',
);
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--sm:text-align-center',
);
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--md:text-align-right',
);
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--lg:text-align-justify',
);
}); });
}); });
describe('background', () => { describe('background', () => {
@ -884,20 +1072,43 @@ describe('Box', () => {
it('should render the Box with the width class', () => { it('should render the Box with the width class', () => {
const { getByText } = render( const { getByText } = render(
<> <>
<Box width={BLOCK_SIZES.HALF}>Box half</Box> <Box width={BlockSize.Half}>Box half</Box>
<Box width={BLOCK_SIZES.ONE_FOURTH}>Box one fourth</Box> <Box width={BlockSize.OneFourth}>Box one fourth</Box>
<Box width={BLOCK_SIZES.MAX}>Box max</Box> <Box width={BlockSize.Max}>Box max</Box>
<Box width={BLOCK_SIZES.MIN}>Box min</Box> <Box width={BlockSize.Min}>Box min</Box>
<Box width={BLOCK_SIZES.HALF}>DEPRECATED Box half</Box>
<Box width={BLOCK_SIZES.ONE_FOURTH}>DEPRECATED Box one fourth</Box>
<Box width={BLOCK_SIZES.MAX}>DEPRECATED Box max</Box>
<Box width={BLOCK_SIZES.MIN}>DEPRECATED Box min</Box>
</>, </>,
); );
expect(getByText('Box half')).toHaveClass('box--width-1/2'); expect(getByText('Box half')).toHaveClass('box--width-1/2');
expect(getByText('Box one fourth')).toHaveClass('box--width-1/4'); expect(getByText('Box one fourth')).toHaveClass('box--width-1/4');
expect(getByText('Box max')).toHaveClass('box--width-max'); expect(getByText('Box max')).toHaveClass('box--width-max');
expect(getByText('Box min')).toHaveClass('box--width-min'); expect(getByText('Box min')).toHaveClass('box--width-min');
expect(getByText('DEPRECATED Box half')).toHaveClass('box--width-1/2');
expect(getByText('DEPRECATED Box one fourth')).toHaveClass(
'box--width-1/4',
);
expect(getByText('DEPRECATED Box max')).toHaveClass('box--width-max');
expect(getByText('DEPRECATED Box min')).toHaveClass('box--width-min');
}); });
it('should render the Box with the responsive width classes', () => { it('should render the Box with the responsive width classes', () => {
const { getByText } = render( const { getByText } = render(
<> <>
<Box
width={[
BlockSize.Half,
BlockSize.OneFourth,
BlockSize.Max,
BlockSize.Min,
]}
>
Box content
</Box>
<Box <Box
width={[ width={[
BLOCK_SIZES.HALF, BLOCK_SIZES.HALF,
@ -906,7 +1117,7 @@ describe('Box', () => {
BLOCK_SIZES.MIN, BLOCK_SIZES.MIN,
]} ]}
> >
Box content DEPRECATED Box content
</Box> </Box>
</>, </>,
); );
@ -914,24 +1125,57 @@ describe('Box', () => {
expect(getByText('Box content')).toHaveClass('box--sm:width-1/4'); expect(getByText('Box content')).toHaveClass('box--sm:width-1/4');
expect(getByText('Box content')).toHaveClass('box--md:width-max'); expect(getByText('Box content')).toHaveClass('box--md:width-max');
expect(getByText('Box content')).toHaveClass('box--lg:width-min'); expect(getByText('Box content')).toHaveClass('box--lg:width-min');
expect(getByText('DEPRECATED Box content')).toHaveClass('box--width-1/2');
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--sm:width-1/4',
);
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--md:width-max',
);
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--lg:width-min',
);
}); });
it('should render the Box with the height class', () => { it('should render the Box with the height class', () => {
const { getByText } = render( const { getByText } = render(
<> <>
<Box height={BLOCK_SIZES.HALF}>Box half</Box> <Box height={BlockSize.Half}>Box half</Box>
<Box height={BLOCK_SIZES.ONE_FOURTH}>Box one fourth</Box> <Box height={BlockSize.OneFourth}>Box one fourth</Box>
<Box height={BLOCK_SIZES.MAX}>Box max</Box> <Box height={BlockSize.Max}>Box max</Box>
<Box height={BLOCK_SIZES.MIN}>Box min</Box> <Box height={BlockSize.Min}>Box min</Box>
<Box height={BLOCK_SIZES.HALF}>DEPRECATED Box half</Box>
<Box height={BLOCK_SIZES.ONE_FOURTH}>DEPRECATED Box one fourth</Box>
<Box height={BLOCK_SIZES.MAX}>DEPRECATED Box max</Box>
<Box height={BLOCK_SIZES.MIN}>DEPRECATED Box min</Box>
</>, </>,
); );
expect(getByText('Box half')).toHaveClass('box--height-1/2'); expect(getByText('Box half')).toHaveClass('box--height-1/2');
expect(getByText('Box one fourth')).toHaveClass('box--height-1/4'); expect(getByText('Box one fourth')).toHaveClass('box--height-1/4');
expect(getByText('Box max')).toHaveClass('box--height-max'); expect(getByText('Box max')).toHaveClass('box--height-max');
expect(getByText('Box min')).toHaveClass('box--height-min'); expect(getByText('Box min')).toHaveClass('box--height-min');
expect(getByText('DEPRECATED Box half')).toHaveClass('box--height-1/2');
expect(getByText('DEPRECATED Box one fourth')).toHaveClass(
'box--height-1/4',
);
expect(getByText('DEPRECATED Box max')).toHaveClass('box--height-max');
expect(getByText('DEPRECATED Box min')).toHaveClass('box--height-min');
}); });
it('should render the Box with the responsive height classes', () => { it('should render the Box with the responsive height classes', () => {
const { getByText } = render( const { getByText } = render(
<> <>
<Box
height={[
BlockSize.Half,
BlockSize.OneFourth,
BlockSize.Max,
BlockSize.Min,
]}
>
Box content
</Box>
<Box <Box
height={[ height={[
BLOCK_SIZES.HALF, BLOCK_SIZES.HALF,
@ -940,7 +1184,7 @@ describe('Box', () => {
BLOCK_SIZES.MIN, BLOCK_SIZES.MIN,
]} ]}
> >
Box content DEPRECATED Box content
</Box> </Box>
</>, </>,
); );
@ -948,6 +1192,19 @@ describe('Box', () => {
expect(getByText('Box content')).toHaveClass('box--sm:height-1/4'); expect(getByText('Box content')).toHaveClass('box--sm:height-1/4');
expect(getByText('Box content')).toHaveClass('box--md:height-max'); expect(getByText('Box content')).toHaveClass('box--md:height-max');
expect(getByText('Box content')).toHaveClass('box--lg:height-min'); expect(getByText('Box content')).toHaveClass('box--lg:height-min');
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--height-1/2',
);
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--sm:height-1/4',
);
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--md:height-max',
);
expect(getByText('DEPRECATED Box content')).toHaveClass(
'box--lg:height-min',
);
}); });
}); });
describe('polymorphic "as" prop', () => { describe('polymorphic "as" prop', () => {

103
ui/helpers/constants/design-system.ts
View File

@ -2,7 +2,7 @@
* A note about the existence of both singular and plural variable names here: * A note about the existence of both singular and plural variable names here:
* When dealing with a literal property name, e.g. AlignItems, the constant * When dealing with a literal property name, e.g. AlignItems, the constant
* should match the property. When detailing a collection of things, it should * should match the property. When detailing a collection of things, it should
* match the plural form of the thing. e.g. Color, TypographyVariant * match the plural form of the thing. e.g. Color, TextVariant, Size
*/ */
export enum Color { export enum Color {
@ -235,6 +235,19 @@ export enum JustifyContent {
spaceEvenly = 'space-evenly', spaceEvenly = 'space-evenly',
} }
export enum FlexDirection {
Row = 'row',
RowReverse = 'row-reverse',
Column = 'column',
ColumnReverse = 'column-reverse',
}
/**
* @deprecated `FLEX_DIRECTION` const has been deprecated in favour of the `FlexDirection` enum which can still be imported from `ui/helpers/constants/design-system.ts`
*
* Help to replace `FLEX_DIRECTION` with `FlexDirection` by submitting PRs against https://github.com/MetaMask/metamask-extension/issues/18714
*/
export const FLEX_DIRECTION = { export const FLEX_DIRECTION = {
ROW: 'row', ROW: 'row',
ROW_REVERSE: 'row-reverse', ROW_REVERSE: 'row-reverse',
@ -242,12 +255,42 @@ export const FLEX_DIRECTION = {
COLUMN_REVERSE: 'column-reverse', COLUMN_REVERSE: 'column-reverse',
}; };
export enum FlexWrap {
Wrap = 'wrap',
WrapReverse = 'wrap-reverse',
NoWrap = 'nowrap',
}
/**
* @deprecated `FLEX_WRAP` const has been deprecated in favour of the `FlexWrap` enum which can still be imported from `ui/helpers/constants/design-system.ts`
*
* Help to replace `FLEX_WRAP` with `FlexWrap` by submitting PRs against https://github.com/MetaMask/metamask-extension/issues/18714
*/
export const FLEX_WRAP = { export const FLEX_WRAP = {
WRAP: 'wrap', WRAP: 'wrap',
WRAP_REVERSE: 'wrap-reverse', WRAP_REVERSE: 'wrap-reverse',
NO_WRAP: 'nowrap', NO_WRAP: 'nowrap',
}; };
export enum Display {
Block = 'block',
Flex = 'flex',
Grid = 'grid',
InlineBlock = 'inline-block',
Inline = 'inline',
InlineFlex = 'inline-flex',
InlineGrid = 'inline-grid',
ListItem = 'list-item',
None = 'none',
}
/**
* @deprecated `DISPLAY` const has been deprecated in favour of the `Display` enum which can still be imported from `ui/helpers/constants/design-system.ts`
*
* Help to replace `DISPLAY` with `Display` by submitting PRs against https://github.com/MetaMask/metamask-extension/issues/18714
*/
export const DISPLAY = { export const DISPLAY = {
BLOCK: 'block', BLOCK: 'block',
FLEX: 'flex', FLEX: 'flex',
@ -260,6 +303,12 @@ export const DISPLAY = {
NONE: 'none', NONE: 'none',
}; };
/**
* @deprecated `FRACTIONS` const has been deprecated in favour of the `BlockSize` enum which can still be imported from `ui/helpers/constants/design-system.ts`
*
* Help to replace `FRACTIONS` with `BlockSize` by submitting PRs against https://github.com/MetaMask/metamask-extension/issues/18714
*/
export const FRACTIONS = { export const FRACTIONS = {
HALF: '1/2', HALF: '1/2',
ONE_THIRD: '1/3', ONE_THIRD: '1/3',
@ -289,6 +338,45 @@ export const FRACTIONS = {
ELEVEN_TWELFTHS: '11/12', ELEVEN_TWELFTHS: '11/12',
}; };
export enum BlockSize {
Half = '1/2',
OneThird = '1/3',
TwoThirds = '2/3',
OneFourth = '1/4',
TwoFourths = '2/4',
ThreeFourths = '3/4',
OneFifth = '1/5',
TwoFifths = '2/5',
ThreeFifths = '3/5',
FourFifths = '4/5',
OneSixth = '1/6',
TwoSixths = '2/6',
ThreeSixths = '3/6',
FourSixths = '4/6',
FiveSixths = '5/6',
OneTwelfth = '1/12',
TwoTwelfths = '2/12',
ThreeTwelfths = '3/12',
FourTwelfths = '4/12',
FiveTwelfths = '5/12',
SixTwelfths = '6/12',
SevenTwelfths = '7/12',
EightTwelfths = '8/12',
NineTwelfths = '9/12',
TenTwelfths = '10/12',
ElevenTwelfths = '11/12',
Screen = 'screen',
Max = 'max',
Min = 'min',
Full = 'full',
}
/**
* @deprecated `BLOCK_SIZES` const has been deprecated in favour of the `BlockSize` enum which can still be imported from `ui/helpers/constants/design-system.ts`
*
* Help to replace `BLOCK_SIZES` with `BlockSize` by submitting PRs against https://github.com/MetaMask/metamask-extension/issues/18714
*/
export const BLOCK_SIZES = { export const BLOCK_SIZES = {
...FRACTIONS, ...FRACTIONS,
SCREEN: 'screen', SCREEN: 'screen',
@ -389,6 +477,19 @@ export const FONT_STYLE = {
NORMAL: 'normal', NORMAL: 'normal',
}; };
export enum Severity {
Danger = 'danger',
Warning = 'warning',
Info = 'info',
Success = 'success',
}
/**
* @deprecated `SEVERITIES` const has been deprecated in favour of the `Severity` enum which can still be imported from `ui/helpers/constants/design-system.ts`
*
* Help to replace `SEVERITIES` with `FontStyle` by submitting PRs against https://github.com/MetaMask/metamask-extension/issues/18714
*/
export const SEVERITIES = { export const SEVERITIES = {
DANGER: 'danger', DANGER: 'danger',
WARNING: 'warning', WARNING: 'warning',