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 initial and transparent to Box component (#15565)

Browse Source 
* Adding inital and transparent to Box component. Removing deprecated secondary colors

* Fixing prop type

* Fixing story

* removing duplicate prop
This commit is contained in:
George Marshall 2022-08-12 15:14:59 -07:00 committed by GitHub
parent 437acdb74c
commit 28440ba0d0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 226 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/components/app/ledger-instruction-field/ledger-instruction-field.js
View File

@ -201,7 +201,7 @@ export default function LedgerInstructionField({ showDataInstruction }) {
usingWebHID && usingWebHID &&
webHidConnectedStatus === webHidConnectedStatus ===
WEBHID_CONNECTED_STATUSES.NOT_CONNECTED, WEBHID_CONNECTED_STATUSES.NOT_CONNECTED,
COLORS.SECONDARY_DEFAULT, COLORS.WARNING_DEFAULT,
)} )}
</div> </div>
</Dialog> </Dialog>

2
ui/components/app/wallet-overview/index.scss
View File

@ -73,7 +73,7 @@
&__cached-secondary-balance { &__cached-secondary-balance {
@include Paragraph; @include Paragraph;
color: var(--color-secondary-muted); color: var(--color-warning-muted);
} }
&__secondary-balance { &__secondary-balance {

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

@ -14,35 +14,36 @@ Box is a utility component that can be used for layout or as a base for other UI
## Props ## Props
| Name | Description | Default | | Name | Description | Default |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------ |
| children | The children of the Box component. If `function` type will render the child as the Box node instead of a child of the Box | - | | children | The children of the Box component. If `function` type will render the child as the Box node instead of a child of the Box | - |
| className | Additional className of the Box component | - | | className | Additional className of the Box component | - |
| margin | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values [1, 2, 'auto'] | - | | margin | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values [1, 2, 'auto'] for responsive props | - |
| marginTop | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values [1, 2, 'auto'] | - | | marginTop | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
| marginBottom | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values [1, 2, 'auto'] | - | | marginBottom | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
| marginRight | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values [1, 2, 'auto'] | - | | marginRight | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
| marginLeft | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values [1, 2, 'auto'] | - | | marginLeft | 0, 1, 2, 4, 6, 8, 9, 10, 12, 'auto' or array of values for responsive props | - |
| padding | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] | - | | padding | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| paddingTop | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] | - | | paddingTop | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| paddingBottom | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] | - | | paddingBottom | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| paddingRight | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] | - | | paddingRight | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| paddingLeft | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] | - | | paddingLeft | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| display | [DISPLAY](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L125-L133) values or array of [DISPLAY](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L125-L133) values | - | | display | [DISPLAY](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L200-L210) values or array of [DISPLAY](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L200-L210) values for responsive props | - |
| flexDirection | [FLEX_DIRECTION](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L112-L117) values or array of [FLEX_DIRECTION](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L112-L117) values | FLEX_DIRECTION.ROW | | flexDirection | [FLEX_DIRECTION](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L187-L192) values or array of [FLEX_DIRECTION](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L187-L192) values for responsive props | FLEX_DIRECTION.ROW |
| flexWrap | [FLEX_WRAP](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L119-L123) values or array of [FLEX_WRAP](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L119-L123) values | - | | flexWrap | [FLEX_WRAP](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L194-L198) values or array of [FLEX_WRAP](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L194-L198) values for responsive props | - |
| alignItems | [ALIGN_ITEMS](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L95-L101) values or array of [ALIGN_ITEMS](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L95-L101) values | - | | alignItems | [ALIGN_ITEMS](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L170-L176) values or array of [ALIGN_ITEMS](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L170-L176) values for responsive props | - |
| justifyContent | [JUSTIFY_CONTENT](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L103-L110) values or array of [JUSTIFY_CONTENT](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L103-L110) values | - | | justifyContent | [JUSTIFY_CONTENT](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L178-L185) values or array of [JUSTIFY_CONTENT](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L178-L185) values | - |
| gap | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] | - | | gap | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| textAlign | [TEXT_ALIGN](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L172-L178) values or array of [TEXT_ALIGN](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L172-L178) values | - | | textAlign | [TEXT_ALIGN](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L249-L255) values or array of [TEXT_ALIGN](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L249-L255) values for responsive props | - |
| width | [BLOCK_SIZES](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L164-L170) values or array of [BLOCK_SIZES](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L164-L170) values | - | | width | [BLOCK_SIZES](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L241-L247) values or array of [BLOCK_SIZES](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L241-L247) values for responsive props | - |
| height | [BLOCK_SIZES](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L164-L170) values or array of [BLOCK_SIZES](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L164-L170) values | - | | height | [BLOCK_SIZES](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L241-L247) values or array of [BLOCK_SIZES](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#LL241-L247) values for responsive props | - |
| backgroundColor | COLORS values or array of COLORS values | - | | color | [COLORS](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L117-L133) values or array of [COLORS](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L117-L133) values for responsive props | - |
| borderColor | COLORS values or array of COLOR values | - | | backgroundColor | [BACKGROUND_COLORS](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L62-L88) values or array of [BACKGROUND_COLORS](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L62-L88) values for responsive props | - |
| borderWidth | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] | - | | borderColor | [BORDER_COLORS](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L90-L115) values or array of [BORDER_COLORS](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L90-L115) values for responsive props | - |
| borderRadius | [SIZES](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L74-L81) values or array of [SIZES](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L74-L81) values | - | | borderWidth | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
| borderStyle | [BORDER_STYLE](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L83-L88) values or array of [BORDER_STYLE](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L83-L88) values | - | | borderRadius | [SIZES](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L149-L156) values or array of [SIZES](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L149-L156) values for responsive props | - |
| as | The polymorphic `as` prop allows you to change the root HTML element of the Box component. Defaults to 'div' | 'div' | | borderStyle | [BORDER_STYLE](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L158-L164) values or array of [BORDER_STYLE](https://github.com/MetaMask/metamask-extension/blob/develop/ui/helpers/constants/design-system.js#L158-L164) values for responsive props | - |
| as | The polymorphic `as` prop allows you to change the root HTML element of the Box component. Defaults to 'div' | 'div' |
## Usage ## Usage
@ -131,7 +132,7 @@ import Box from '../ui/box';
### Color ### Color
The `color` prop can be used to set the color of the content in Box component. The `color` prop accepts [responsive props](#responsive-props) in the form of array props. The `color` prop can be used to set the color of the content in Box component. The `color` prop accepts [responsive props](#responsive-props) in the form of array props. Defaults to `COLORS.TEXT_DEFAULT`
<Canvas> <Canvas>
<Story id="ui-components-ui-box-box-stories-js--color" /> <Story id="ui-components-ui-box-box-stories-js--color" />
@ -143,12 +144,7 @@ Example of importing `COLORS` object with `Box` component
import { COLORS } from '../../../helpers/constants/design-system'; import { COLORS } from '../../../helpers/constants/design-system';
import Box from '../ui/box'; import Box from '../ui/box';
<Box <Box color={COLORS.TEXT_DEFAULT}>Text goes here</Box>;
backgroundColor={COLORS.BACKGROUND_DEFAULT}
color={COLORS.ERROR_DEFAULT}
>
Text goes here
</Box>;
``` ```
### Background Color ### Background Color
@ -192,7 +188,6 @@ import Box from '../ui/box';
</Box>; </Box>;
``` ```
### Responsive Props ### Responsive Props
The box component provides a responsive props api in the form of array props. Array props are inspired by [styled-systems array props](https://styled-system.com/guides/array-props). The responsive props follow a mobile first methodology with the first item in the array applying the style to the base level size e.g. `0px` and up. The second item overwrites the first items styles at the next breakpoint. The box component provides a responsive props api in the form of array props. Array props are inspired by [styled-systems array props](https://styled-system.com/guides/array-props). The responsive props follow a mobile first methodology with the first item in the array applying the style to the base level size e.g. `0px` and up. The second item overwrites the first items styles at the next breakpoint.
@ -255,7 +250,7 @@ import Box from '../ui/box';
### As ### As
Use the `as` prop to change the root html element of the Box component The polymorphic `as` prop allows you to change the root HTML element of the Box component. Defaults to `'div'`
<Canvas> <Canvas>
<Story id="ui-components-ui-box-box-stories-js--as" /> <Story id="ui-components-ui-box-box-stories-js--as" />
@ -264,7 +259,9 @@ Use the `as` prop to change the root html element of the Box component
```jsx ```jsx
import Box from '../../ui/box'; import Box from '../../ui/box';
<Box>div(default)</Box>
<Box as="ul">ul</Box> <Box as="ul">ul</Box>
<Box as="li">li</Box> <Box as="li">li</Box>
<Box as="button">button</Box> <Box as="button">button</Box>
<Box as="header">header</Box>
``` ```

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

@ -185,8 +185,8 @@ export default function Box({
children, children,
className, className,
backgroundColor, backgroundColor,
color = TEXT_COLORS.TEXT_DEFAULT,
as = 'div', as = 'div',
color,
...props ...props
}) { }) {
const boxClassName = classnames( const boxClassName = classnames(
@ -227,7 +227,6 @@ export default function Box({
borderColor && borderColor &&
generateClassNames('border-color', borderColor, isValidString), generateClassNames('border-color', borderColor, isValidString),
borderWidth && generateClassNames('border-width', borderWidth, isValidSize), borderWidth && generateClassNames('border-width', borderWidth, isValidSize),
{ {
// Auto applied classes // Auto applied classes
// ---Borders--- // ---Borders---
@ -313,11 +312,15 @@ Box.propTypes = {
PropTypes.arrayOf(PropTypes.oneOf(Object.values(BLOCK_SIZES))), PropTypes.arrayOf(PropTypes.oneOf(Object.values(BLOCK_SIZES))),
]), ]),
backgroundColor: MultipleBackgroundColors, backgroundColor: MultipleBackgroundColors,
color: MultipleTextColors,
className: PropTypes.string, className: PropTypes.string,
/** /**
* The polymorphic `as` prop allows you to change the root HTML element of the Box component * The polymorphic `as` prop allows you to change the root HTML element of the Box component
* Defaults to 'div' * Defaults to 'div'
*/ */
as: PropTypes.string, as: PropTypes.string,
/**
* The color of the Typography component Should use the COLOR object from
* ./ui/helpers/constants/design-system.js
*/
color: MultipleTextColors,
}; };

198
ui/components/ui/box/box.stories.js
View File

@ -21,8 +21,23 @@ import Box from './box';
import README from './README.mdx'; import README from './README.mdx';
const sizeKnobOptions = [undefined, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; const sizeControlOptions = [
const marginSizeKnobOptions = [...sizeKnobOptions, 'auto']; undefined,
0,
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
];
const marginSizeControlOptions = [...sizeControlOptions, 'auto'];
export default { export default {
title: 'Components/UI/Box', title: 'Components/UI/Box',
@ -34,6 +49,9 @@ export default {
}, },
}, },
argTypes: { argTypes: {
children: {
table: { category: 'children' },
},
size: { size: {
control: { type: 'range', min: 50, max: 500, step: 10 }, control: { type: 'range', min: 50, max: 500, step: 10 },
table: { category: 'children' }, table: { category: 'children' },
@ -62,6 +80,11 @@ export default {
defaultValue: BLOCK_SIZES.HALF, defaultValue: BLOCK_SIZES.HALF,
table: { category: 'display' }, table: { category: 'display' },
}, },
gap: {
control: 'select',
options: sizeControlOptions,
table: { category: 'display' },
},
backgroundColor: { backgroundColor: {
options: Object.values(BACKGROUND_COLORS), options: Object.values(BACKGROUND_COLORS),
control: 'select', control: 'select',
@ -81,8 +104,8 @@ export default {
table: { category: 'border' }, table: { category: 'border' },
}, },
borderWidth: { borderWidth: {
options: sizeKnobOptions, options: sizeControlOptions,
control: 'number', control: 'select',
table: { category: 'border' }, table: { category: 'border' },
}, },
borderColor: { borderColor: {
@ -125,58 +148,59 @@ export default {
table: { category: 'text' }, table: { category: 'text' },
}, },
margin: { margin: {
options: marginSizeKnobOptions, options: marginSizeControlOptions,
control: 'select', control: 'select',
table: { category: 'margin' }, table: { category: 'margin' },
}, },
marginTop: { marginTop: {
options: marginSizeKnobOptions, options: marginSizeControlOptions,
control: 'select', control: 'select',
table: { category: 'margin' }, table: { category: 'margin' },
}, },
marginRight: { marginRight: {
options: marginSizeKnobOptions, options: marginSizeControlOptions,
control: 'select', control: 'select',
table: { category: 'margin' }, table: { category: 'margin' },
}, },
marginBottom: { marginBottom: {
options: marginSizeKnobOptions, options: marginSizeControlOptions,
control: 'select', control: 'select',
table: { category: 'margin' }, table: { category: 'margin' },
}, },
marginLeft: { marginLeft: {
options: marginSizeKnobOptions, options: marginSizeControlOptions,
control: 'select', control: 'select',
table: { category: 'margin' }, table: { category: 'margin' },
}, },
padding: { padding: {
options: sizeKnobOptions, options: sizeControlOptions,
control: 'select', control: 'select',
table: { category: 'padding' }, table: { category: 'padding' },
}, },
paddingTop: { paddingTop: {
options: sizeKnobOptions, options: sizeControlOptions,
control: 'select', control: 'select',
table: { category: 'padding' }, table: { category: 'padding' },
}, },
paddingRight: { paddingRight: {
options: sizeKnobOptions, options: sizeControlOptions,
control: 'select', control: 'select',
table: { category: 'padding' }, table: { category: 'padding' },
}, },
paddingBottom: { paddingBottom: {
options: sizeKnobOptions, options: sizeControlOptions,
control: 'select', control: 'select',
table: { category: 'padding' }, table: { category: 'padding' },
}, },
paddingLeft: { paddingLeft: {
options: sizeKnobOptions, options: sizeControlOptions,
control: 'select', control: 'select',
table: { category: 'padding' }, table: { category: 'padding' },
}, },
as: { as: {
control: 'select', control: 'select',
options: ['div', 'ul', 'li', 'span', 'a', 'button'], options: ['div', 'ul', 'li', 'span', 'a', 'button'],
table: { category: 'as (root html element)' },
}, },
}, },
}; };
@ -186,7 +210,14 @@ export const DefaultStory = (args) => {
const children = []; const children = [];
for (let $i = 0; $i < items; $i++) { for (let $i = 0; $i < items; $i++) {
children.push( children.push(
<img key={$i} width={size} height={size} src="./images/eth_logo.svg" />, <Box
as="img"
backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
borderColor={COLORS.BORDER_MUTED}
key={$i}
style={{ width: size, height: size }}
src="./images/eth_logo.svg"
/>,
); );
} }
return <Box {...rest}>{children}</Box>; return <Box {...rest}>{children}</Box>;
@ -194,10 +225,11 @@ export const DefaultStory = (args) => {
DefaultStory.storyName = 'Default'; DefaultStory.storyName = 'Default';
export const Margin = () => { export const Margin = (args) => {
return ( return (
<Box borderColor={COLORS.BORDER_MUTED}> <Box borderColor={COLORS.BORDER_MUTED}>
<Box <Box
{...args}
margin={2} margin={2}
padding={4} padding={4}
backgroundColor={COLORS.BACKGROUND_ALTERNATIVE} backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
@ -206,6 +238,7 @@ export const Margin = () => {
Static margin Static margin
</Box> </Box>
<Box <Box
{...args}
margin={[2, 4, 8, 12]} margin={[2, 4, 8, 12]}
padding={[4]} padding={[4]}
backgroundColor={COLORS.BACKGROUND_ALTERNATIVE} backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
@ -217,10 +250,11 @@ export const Margin = () => {
); );
}; };
export const Padding = () => { export const Padding = (args) => {
return ( return (
<Box borderColor={COLORS.BORDER_MUTED}> <Box borderColor={COLORS.BORDER_MUTED}>
<Box <Box
{...args}
padding={4} padding={4}
backgroundColor={COLORS.BACKGROUND_ALTERNATIVE} backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
borderColor={COLORS.BORDER_MUTED} borderColor={COLORS.BORDER_MUTED}
@ -228,6 +262,7 @@ export const Padding = () => {
Static padding Static padding
</Box> </Box>
<Box <Box
{...args}
padding={[4, 8, 12]} padding={[4, 8, 12]}
backgroundColor={COLORS.BACKGROUND_ALTERNATIVE} backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
borderColor={COLORS.BORDER_MUTED} borderColor={COLORS.BORDER_MUTED}
@ -238,6 +273,83 @@ export const Padding = () => {
); );
}; };
export const Color = (args) => {
return (
<>
<Box {...args} padding={3} color={COLORS.TEXT_DEFAULT}>
COLORS.TEXT_DEFAULT
</Box>
<Box {...args} padding={3} color={COLORS.TEXT_ALTERNATIVE}>
COLORS.TEXT_ALTERNATIVE
</Box>
<Box {...args} padding={3} color={COLORS.TEXT_MUTED}>
COLORS.TEXT_MUTED
</Box>
<Box {...args} padding={3} color={COLORS.PRIMARY_DEFAULT}>
COLORS.PRIMARY_DEFAULT
</Box>
<Box
{...args}
padding={3}
color={COLORS.PRIMARY_INVERSE}
backgroundColor={COLORS.PRIMARY_DEFAULT}
>
COLORS.PRIMARY_INVERSE
</Box>
<Box {...args} padding={3} color={COLORS.ERROR_DEFAULT}>
COLORS.ERROR_DEFAULT
</Box>
<Box
{...args}
padding={3}
color={COLORS.ERROR_INVERSE}
backgroundColor={COLORS.ERROR_DEFAULT}
>
COLORS.ERROR_INVERSE
</Box>
<Box {...args} padding={3} color={COLORS.SUCCESS_DEFAULT}>
COLORS.SUCCESS_DEFAULT
</Box>
<Box
{...args}
padding={3}
color={COLORS.SUCCESS_INVERSE}
backgroundColor={COLORS.SUCCESS_DEFAULT}
{...args}
>
COLORS.SUCCESS_INVERSE
</Box>
<Box {...args} padding={3} color={COLORS.WARNING_DEFAULT} {...args}>
COLORS.WARNING_DEFAULT
</Box>
<Box
{...args}
padding={3}
color={COLORS.WARNING_INVERSE}
backgroundColor={COLORS.WARNING_DEFAULT}
{...args}
>
COLORS.WARNING_INVERSE
</Box>
<Box {...args} padding={3} color={COLORS.INFO_DEFAULT} {...args}>
COLORS.INFO_DEFAULT
</Box>
<Box
{...args}
padding={3}
color={COLORS.INFO_INVERSE}
backgroundColor={COLORS.INFO_DEFAULT}
{...args}
>
COLORS.INFO_INVERSE
</Box>
<Box {...args} padding={3} color={COLORS.INHERIT} {...args}>
COLORS.INHERIT
</Box>
</>
);
};
export const BackgroundColor = () => { export const BackgroundColor = () => {
return ( return (
<> <>
@ -266,16 +378,6 @@ export const BackgroundColor = () => {
COLORS.PRIMARY_MUTED COLORS.PRIMARY_MUTED
</Typography> </Typography>
</Box> </Box>
<Box padding={3} backgroundColor={COLORS.SECONDARY_DEFAULT}>
<Typography color={COLORS.SECONDARY_INVERSE}>
COLORS.SECONDARY_DEFAULT
</Typography>
</Box>
<Box padding={3} backgroundColor={COLORS.SECONDARY_MUTED}>
<Typography color={COLORS.TEXT_DEFAULT}>
COLORS.SECONDARY_MUTED
</Typography>
</Box>
<Box padding={3} backgroundColor={COLORS.ERROR_DEFAULT}> <Box padding={3} backgroundColor={COLORS.ERROR_DEFAULT}>
<Typography color={COLORS.ERROR_INVERSE}> <Typography color={COLORS.ERROR_INVERSE}>
COLORS.ERROR_DEFAULT COLORS.ERROR_DEFAULT
@ -315,6 +417,8 @@ export const BorderColor = () => {
padding={3} padding={3}
backgroundColor={COLORS.BACKGROUND_DEFAULT} backgroundColor={COLORS.BACKGROUND_DEFAULT}
borderColor={COLORS.BORDER_DEFAULT} borderColor={COLORS.BORDER_DEFAULT}
borderWidth={2}
marginBottom={1}
> >
<Typography color={COLORS.TEXT_DEFAULT}> <Typography color={COLORS.TEXT_DEFAULT}>
COLORS.BORDER_DEFAULT COLORS.BORDER_DEFAULT
@ -324,31 +428,28 @@ export const BorderColor = () => {
padding={3} padding={3}
backgroundColor={COLORS.BACKGROUND_DEFAULT} backgroundColor={COLORS.BACKGROUND_DEFAULT}
borderColor={COLORS.BORDER_MUTED} borderColor={COLORS.BORDER_MUTED}
borderWidth={2}
marginBottom={1}
> >
<Typography color={COLORS.TEXT_DEFAULT}>COLORS.BORDER_MUTED</Typography> <Typography color={COLORS.TEXT_DEFAULT}>COLORS.BORDER_MUTED</Typography>
</Box> </Box>
<Box <Box
padding={3} padding={3}
borderColor={COLORS.PRIMARY_DEFAULT} borderColor={COLORS.PRIMARY_DEFAULT}
borderWidth={2}
marginBottom={1}
backgroundColor={COLORS.PRIMARY_MUTED} backgroundColor={COLORS.PRIMARY_MUTED}
> >
<Typography color={COLORS.TEXT_DEFAULT}> <Typography color={COLORS.TEXT_DEFAULT}>
COLORS.PRIMARY_DEFAULT COLORS.PRIMARY_DEFAULT
</Typography> </Typography>
</Box> </Box>
<Box
padding={3}
backgroundColor={COLORS.SECONDARY_MUTED}
borderColor={COLORS.SECONDARY_DEFAULT}
>
<Typography color={COLORS.TEXT_DEFAULT}>
COLORS.SECONDARY_DEFAULT
</Typography>
</Box>
<Box <Box
padding={3} padding={3}
backgroundColor={COLORS.ERROR_MUTED} backgroundColor={COLORS.ERROR_MUTED}
borderColor={COLORS.ERROR_DEFAULT} borderColor={COLORS.ERROR_DEFAULT}
borderWidth={2}
marginBottom={1}
> >
<Typography color={COLORS.TEXT_DEFAULT}> <Typography color={COLORS.TEXT_DEFAULT}>
COLORS.ERROR_DEFAULT COLORS.ERROR_DEFAULT
@ -358,6 +459,8 @@ export const BorderColor = () => {
padding={3} padding={3}
backgroundColor={COLORS.SUCCESS_MUTED} backgroundColor={COLORS.SUCCESS_MUTED}
borderColor={COLORS.SUCCESS_DEFAULT} borderColor={COLORS.SUCCESS_DEFAULT}
borderWidth={2}
marginBottom={1}
> >
<Typography color={COLORS.TEXT_DEFAULT}> <Typography color={COLORS.TEXT_DEFAULT}>
COLORS.SUCCESS_DEFAULT COLORS.SUCCESS_DEFAULT
@ -367,6 +470,7 @@ export const BorderColor = () => {
padding={3} padding={3}
backgroundColor={COLORS.WARNING_MUTED} backgroundColor={COLORS.WARNING_MUTED}
borderColor={COLORS.WARNING_DEFAULT} borderColor={COLORS.WARNING_DEFAULT}
borderWidth={2}
> >
<Typography color={COLORS.TEXT_DEFAULT}> <Typography color={COLORS.TEXT_DEFAULT}>
COLORS.WARNING_DEFAULT COLORS.WARNING_DEFAULT
@ -434,25 +538,3 @@ export const As = (args) => {
</> </>
); );
}; };
export const Color = () => {
return (
<>
<Box padding={3} color={COLORS.TEXT_DEFAULT}>
<Typography>COLORS.TEXT_DEFAULT</Typography>
</Box>
<Box padding={3} color={COLORS.PRIMARY_DEFAULT}>
COLORS.PRIMARY_DEFAULT
</Box>
<Box padding={3} color={COLORS.SECONDARY_DEFAULT}>
COLORS.SECONDARY_DEFAULT
</Box>
<Box padding={3} color={COLORS.ERROR_DEFAULT}>
COLORS.ERROR_DEFAULT
</Box>
<Box padding={3} color={COLORS.SUCCESS_DEFAULT}>
COLORS.SUCCESS_DEFAULT
</Box>
</>
);
};

67
ui/components/ui/box/box.test.js
View File

@ -660,6 +660,39 @@ describe('Box', () => {
}); });
}); });
describe('color', () => {
it('should render the Box with the color class', () => {
const { getByText } = render(
<Box color={COLORS.TEXT_DEFAULT}>Box content</Box>,
);
expect(getByText('Box content')).toHaveClass('box--color-text-default');
});
it('should render the Box with the responsive color classes', () => {
const { getByText } = render(
<Box
color={[
COLORS.TEXT_DEFAULT,
COLORS.PRIMARY_DEFAULT,
COLORS.ERROR_DEFAULT,
COLORS.SUCCESS_DEFAULT,
]}
>
Box content
</Box>,
);
expect(getByText('Box content')).toHaveClass('box--color-text-default');
expect(getByText('Box content')).toHaveClass(
'box--sm:color-primary-default',
);
expect(getByText('Box content')).toHaveClass(
'box--md:color-error-default',
);
expect(getByText('Box content')).toHaveClass(
'box--lg:color-success-default',
);
});
});
describe('width, height', () => { describe('width, height', () => {
it('should render the Box with the width class', () => { it('should render the Box with the width class', () => {
const { getByText } = render( const { getByText } = render(
@ -748,38 +781,4 @@ describe('Box', () => {
); );
}); });
}); });
describe('color', () => {
it('should render the Box with the color class', () => {
const { getByText } = render(
<Box color={COLORS.TEXT_DEFAULT}>Box content</Box>,
);
expect(getByText('Box content')).toHaveClass('box--color-text-default');
});
it('should render the Box with the responsive color classes', () => {
const { getByText } = render(
<Box
color={[
COLORS.PRIMARY_DEFAULT,
COLORS.SECONDARY_DEFAULT,
COLORS.ERROR_DEFAULT,
COLORS.SUCCESS_DEFAULT,
]}
>
Box content
</Box>,
);
expect(getByText('Box content')).toHaveClass(
'box--color-primary-default',
);
expect(getByText('Box content')).toHaveClass(
'box--sm:color-secondary-default',
);
expect(getByText('Box content')).toHaveClass(
'box--md:color-error-default',
);
expect(getByText('Box content')).toHaveClass(
'box--lg:color-success-default',
);
});
});
}); });

6
ui/components/ui/typography/README.mdx
View File

@ -79,12 +79,6 @@ import { COLORS} from '../../../helpers/constants/design-system';
<Typography color={COLORS.PRIMARY_INVERSE} boxProps={{backgroundColor:{COLORS.PRIMARY_DEFAULT}}}> <Typography color={COLORS.PRIMARY_INVERSE} boxProps={{backgroundColor:{COLORS.PRIMARY_DEFAULT}}}>
primary-inverse primary-inverse
</Typography> </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}> <Typography color={COLORS.ERROR_DEFAULT}>
error-default error-default
</Typography> </Typography>

2
ui/components/ui/typography/typography.js
View File

@ -20,8 +20,6 @@ export const ValidColors = [
COLORS.OVERLAY_INVERSE, COLORS.OVERLAY_INVERSE,
COLORS.PRIMARY_DEFAULT, COLORS.PRIMARY_DEFAULT,
COLORS.PRIMARY_INVERSE, COLORS.PRIMARY_INVERSE,
COLORS.SECONDARY_DEFAULT,
COLORS.SECONDARY_INVERSE,
COLORS.ERROR_DEFAULT, COLORS.ERROR_DEFAULT,
COLORS.ERROR_INVERSE, COLORS.ERROR_INVERSE,
COLORS.SUCCESS_DEFAULT, COLORS.SUCCESS_DEFAULT,

3
ui/components/ui/typography/typography.stories.js
View File

@ -80,9 +80,6 @@ function renderBackgroundColor(color) {
case COLORS.PRIMARY_INVERSE: case COLORS.PRIMARY_INVERSE:
bgColor = COLORS.PRIMARY_DEFAULT; bgColor = COLORS.PRIMARY_DEFAULT;
break; break;
case COLORS.SECONDARY_INVERSE:
bgColor = COLORS.SECONDARY_DEFAULT;
break;
case COLORS.ERROR_INVERSE: case COLORS.ERROR_INVERSE:
bgColor = COLORS.ERROR_DEFAULT; bgColor = COLORS.ERROR_DEFAULT;
break; break;

9
ui/css/design-system/colors.scss
View File

@ -5,6 +5,7 @@ $color-map: (
'text-alternative': --color-text-alternative, 'text-alternative': --color-text-alternative,
'text-muted': --color-text-muted, 'text-muted': --color-text-muted,
'icon-default': --color-icon-default, 'icon-default': --color-icon-default,
'icon-alternative': --color-icon-alternative,
'icon-muted': --color-icon-muted, 'icon-muted': --color-icon-muted,
'border-default': --color-border-default, 'border-default': --color-border-default,
'border-muted': --color-border-muted, 'border-muted': --color-border-muted,
@ -15,11 +16,6 @@ $color-map: (
'primary-muted': --color-primary-muted, 'primary-muted': --color-primary-muted,
'primary-inverse': --color-primary-inverse, 'primary-inverse': --color-primary-inverse,
'primary-disabled': --color-primary-disabled, 'primary-disabled': --color-primary-disabled,
'secondary-default': --color-secondary-default,
'secondary-alternative': --color-secondary-alternative,
'secondary-muted': --color-secondary-muted,
'secondary-inverse': --color-secondary-inverse,
'secondary-disabled': --color-secondary-disabled,
'error-default': --color-error-default, 'error-default': --color-error-default,
'error-alternative': --color-error-alternative, 'error-alternative': --color-error-alternative,
'error-muted': --color-error-muted, 'error-muted': --color-error-muted,
@ -46,6 +42,7 @@ $color-map: (
'rinkeby': --rinkeby, 'rinkeby': --rinkeby,
'goerli': --goerli, 'goerli': --goerli,
'localhost': --localhost, 'localhost': --localhost,
'transparent': transparent, 'transparent': --transparent,
'flask-purple': --flask-purple, 'flask-purple': --flask-purple,
'inherit': --inherit,
); );

2
ui/css/utilities/colors.scss
View File

@ -8,6 +8,8 @@
--goerli: #3099f2; --goerli: #3099f2;
--localhost: #bbc0c5; --localhost: #bbc0c5;
--flask-purple: #8b45b6; --flask-purple: #8b45b6;
--inherit: inherit;
--transparent: transparent;
// DO NOT CHANGE // DO NOT CHANGE
// Required for the QR reader to work properly // Required for the QR reader to work properly

12
ui/helpers/constants/design-system.js
View File

@ -25,11 +25,6 @@ export const COLORS = {
PRIMARY_MUTED: 'primary-muted', PRIMARY_MUTED: 'primary-muted',
PRIMARY_INVERSE: 'primary-inverse', PRIMARY_INVERSE: 'primary-inverse',
PRIMARY_DISABLED: 'primary-disabled', PRIMARY_DISABLED: 'primary-disabled',
SECONDARY_DEFAULT: 'secondary-default',
SECONDARY_ALTERNATIVE: 'secondary-alternative',
SECONDARY_MUTED: 'secondary-muted',
SECONDARY_INVERSE: 'secondary-inverse',
SECONDARY_DISABLED: 'secondary-disabled',
ERROR_DEFAULT: 'error-default', ERROR_DEFAULT: 'error-default',
ERROR_ALTERNATIVE: 'error-alternative', ERROR_ALTERNATIVE: 'error-alternative',
ERROR_MUTED: 'error-muted', ERROR_MUTED: 'error-muted',
@ -55,8 +50,8 @@ export const COLORS = {
KOVAN: 'kovan', KOVAN: 'kovan',
RINKEBY: 'rinkeby', RINKEBY: 'rinkeby',
GOERLI: 'goerli', GOERLI: 'goerli',
TRANSPARENT: 'transparent',
LOCALHOST: 'localhost', LOCALHOST: 'localhost',
TRANSPARENT: 'transparent',
INHERIT: 'inherit', INHERIT: 'inherit',
}; };
export const BACKGROUND_COLORS = pick(COLORS, [ export const BACKGROUND_COLORS = pick(COLORS, [
@ -121,15 +116,15 @@ export const TEXT_COLORS = pick(COLORS, [
'OVERLAY_INVERSE', 'OVERLAY_INVERSE',
'PRIMARY_DEFAULT', 'PRIMARY_DEFAULT',
'PRIMARY_INVERSE', 'PRIMARY_INVERSE',
'SECONDARY_DEFAULT',
'SECONDARY_INVERSE',
'ERROR_DEFAULT', 'ERROR_DEFAULT',
'ERROR_INVERSE', 'ERROR_INVERSE',
'SUCCESS_DEFAULT', 'SUCCESS_DEFAULT',
'SUCCESS_INVERSE', 'SUCCESS_INVERSE',
'WARNING_DEFAULT',
'WARNING_INVERSE', 'WARNING_INVERSE',
'INFO_DEFAULT', 'INFO_DEFAULT',
'INFO_INVERSE', 'INFO_INVERSE',
'INHERIT',
]); ]);
export const TYPOGRAPHY = { export const TYPOGRAPHY = {
H1: 'h1', H1: 'h1',
@ -147,6 +142,7 @@ export const TYPOGRAPHY = {
const NONE = 'none'; const NONE = 'none';
export const SIZES = { export const SIZES = {
XXS: 'xxs',
XS: 'xs', XS: 'xs',
SM: 'sm', SM: 'sm',
MD: 'md', MD: 'md',

2
ui/pages/swaps/view-on-block-explorer/__snapshots__/view-on-block-explorer.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`ViewOnBlockExplorer renders the component with initial props 1`] = ` exports[`ViewOnBlockExplorer renders the component with initial props 1`] = `
<div> <div>
<div <div
class="box view-on-block-explorer box--margin-top-6 box--flex-direction-row" class="box view-on-block-explorer box--margin-top-6 box--flex-direction-row box--color-text-default"
> >
<button> <button>
View Swap at etherscan.io View Swap at etherscan.io