mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Adding initial and transparent to Box component (#15565)
* 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
GitHub
parent
437acdb74c
commit
28440ba0d0
@ -201,7 +201,7 @@ export default function LedgerInstructionField({ showDataInstruction }) {
|
||||
usingWebHID &&
|
||||
webHidConnectedStatus ===
|
||||
WEBHID_CONNECTED_STATUSES.NOT_CONNECTED,
|
||||
COLORS.SECONDARY_DEFAULT,
|
||||
COLORS.WARNING_DEFAULT,
|
||||
)}
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
@ -73,7 +73,7 @@
|
||||
&__cached-secondary-balance {
|
||||
@include Paragraph;
|
||||
|
||||
color: var(--color-secondary-muted);
|
||||
color: var(--color-warning-muted);
|
||||
}
|
||||
|
||||
&__secondary-balance {
|
||||
|
||||
@ -14,35 +14,36 @@ Box is a utility component that can be used for layout or as a base for other UI
|
||||
|
||||
## Props
|
||||
|
||||
| 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 | - |
|
||||
| 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'] | - |
|
||||
| marginTop | 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 [1, 2, 'auto'] | - |
|
||||
| marginRight | 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 [1, 2, 'auto'] | - |
|
||||
| padding | 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] | - |
|
||||
| paddingBottom | 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] | - |
|
||||
| paddingLeft | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] | - |
|
||||
| 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 | - |
|
||||
| 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 |
|
||||
| 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 | - |
|
||||
| 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 | - |
|
||||
| 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 | - |
|
||||
| gap | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] | - |
|
||||
| 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 | - |
|
||||
| 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 | - |
|
||||
| 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 | - |
|
||||
| backgroundColor | COLORS values or array of COLORS values | - |
|
||||
| borderColor | COLORS values or array of COLOR values | - |
|
||||
| borderWidth | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] | - |
|
||||
| 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 | - |
|
||||
| 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 | - |
|
||||
| as | The polymorphic `as` prop allows you to change the root HTML element of the Box component. Defaults to 'div' | 'div' |
|
||||
| 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 | - |
|
||||
| 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'] for responsive props | - |
|
||||
| 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 for responsive props | - |
|
||||
| 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 for responsive props | - |
|
||||
| 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] for responsive props | - |
|
||||
| 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] for responsive props | - |
|
||||
| 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#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#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#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#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#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] for responsive props | - |
|
||||
| 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#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#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 | - |
|
||||
| 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 | - |
|
||||
| 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 | - |
|
||||
| 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 | - |
|
||||
| borderWidth | 0, 1, 2, 4, 6, 8, 9, 10, 12 or array of numbers [1, 2] for responsive props | - |
|
||||
| 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 | - |
|
||||
| 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
|
||||
|
||||
@ -131,7 +132,7 @@ import Box from '../ui/box';
|
||||
|
||||
### 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>
|
||||
<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 Box from '../ui/box';
|
||||
|
||||
<Box
|
||||
backgroundColor={COLORS.BACKGROUND_DEFAULT}
|
||||
color={COLORS.ERROR_DEFAULT}
|
||||
>
|
||||
Text goes here
|
||||
</Box>;
|
||||
<Box color={COLORS.TEXT_DEFAULT}>Text goes here</Box>;
|
||||
```
|
||||
|
||||
### Background Color
|
||||
@ -192,7 +188,6 @@ import Box from '../ui/box';
|
||||
</Box>;
|
||||
```
|
||||
|
||||
|
||||
### 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.
|
||||
@ -255,7 +250,7 @@ import Box from '../ui/box';
|
||||
|
||||
### 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>
|
||||
<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
|
||||
import Box from '../../ui/box';
|
||||
|
||||
<Box>div(default)</Box>
|
||||
<Box as="ul">ul</Box>
|
||||
<Box as="li">li</Box>
|
||||
<Box as="button">button</Box>
|
||||
<Box as="header">header</Box>
|
||||
```
|
||||
|
||||
@ -185,8 +185,8 @@ export default function Box({
|
||||
children,
|
||||
className,
|
||||
backgroundColor,
|
||||
color = TEXT_COLORS.TEXT_DEFAULT,
|
||||
as = 'div',
|
||||
color,
|
||||
...props
|
||||
}) {
|
||||
const boxClassName = classnames(
|
||||
@ -227,7 +227,6 @@ export default function Box({
|
||||
borderColor &&
|
||||
generateClassNames('border-color', borderColor, isValidString),
|
||||
borderWidth && generateClassNames('border-width', borderWidth, isValidSize),
|
||||
|
||||
{
|
||||
// Auto applied classes
|
||||
// ---Borders---
|
||||
@ -313,11 +312,15 @@ Box.propTypes = {
|
||||
PropTypes.arrayOf(PropTypes.oneOf(Object.values(BLOCK_SIZES))),
|
||||
]),
|
||||
backgroundColor: MultipleBackgroundColors,
|
||||
color: MultipleTextColors,
|
||||
className: PropTypes.string,
|
||||
/**
|
||||
* The polymorphic `as` prop allows you to change the root HTML element of the Box component
|
||||
* Defaults to 'div'
|
||||
*/
|
||||
as: PropTypes.string,
|
||||
/**
|
||||
* The color of the Typography component Should use the COLOR object from
|
||||
* ./ui/helpers/constants/design-system.js
|
||||
*/
|
||||
color: MultipleTextColors,
|
||||
};
|
||||
|
||||
@ -21,8 +21,23 @@ import Box from './box';
|
||||
|
||||
import README from './README.mdx';
|
||||
|
||||
const sizeKnobOptions = [undefined, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
|
||||
const marginSizeKnobOptions = [...sizeKnobOptions, 'auto'];
|
||||
const sizeControlOptions = [
|
||||
undefined,
|
||||
0,
|
||||
1,
|
||||
2,
|
||||
3,
|
||||
4,
|
||||
5,
|
||||
6,
|
||||
7,
|
||||
8,
|
||||
9,
|
||||
10,
|
||||
11,
|
||||
12,
|
||||
];
|
||||
const marginSizeControlOptions = [...sizeControlOptions, 'auto'];
|
||||
|
||||
export default {
|
||||
title: 'Components/UI/Box',
|
||||
@ -34,6 +49,9 @@ export default {
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
children: {
|
||||
table: { category: 'children' },
|
||||
},
|
||||
size: {
|
||||
control: { type: 'range', min: 50, max: 500, step: 10 },
|
||||
table: { category: 'children' },
|
||||
@ -62,6 +80,11 @@ export default {
|
||||
defaultValue: BLOCK_SIZES.HALF,
|
||||
table: { category: 'display' },
|
||||
},
|
||||
gap: {
|
||||
control: 'select',
|
||||
options: sizeControlOptions,
|
||||
table: { category: 'display' },
|
||||
},
|
||||
backgroundColor: {
|
||||
options: Object.values(BACKGROUND_COLORS),
|
||||
control: 'select',
|
||||
@ -81,8 +104,8 @@ export default {
|
||||
table: { category: 'border' },
|
||||
},
|
||||
borderWidth: {
|
||||
options: sizeKnobOptions,
|
||||
control: 'number',
|
||||
options: sizeControlOptions,
|
||||
control: 'select',
|
||||
table: { category: 'border' },
|
||||
},
|
||||
borderColor: {
|
||||
@ -125,58 +148,59 @@ export default {
|
||||
table: { category: 'text' },
|
||||
},
|
||||
margin: {
|
||||
options: marginSizeKnobOptions,
|
||||
options: marginSizeControlOptions,
|
||||
control: 'select',
|
||||
table: { category: 'margin' },
|
||||
},
|
||||
marginTop: {
|
||||
options: marginSizeKnobOptions,
|
||||
options: marginSizeControlOptions,
|
||||
control: 'select',
|
||||
table: { category: 'margin' },
|
||||
},
|
||||
marginRight: {
|
||||
options: marginSizeKnobOptions,
|
||||
options: marginSizeControlOptions,
|
||||
control: 'select',
|
||||
table: { category: 'margin' },
|
||||
},
|
||||
marginBottom: {
|
||||
options: marginSizeKnobOptions,
|
||||
options: marginSizeControlOptions,
|
||||
control: 'select',
|
||||
table: { category: 'margin' },
|
||||
},
|
||||
marginLeft: {
|
||||
options: marginSizeKnobOptions,
|
||||
options: marginSizeControlOptions,
|
||||
control: 'select',
|
||||
table: { category: 'margin' },
|
||||
},
|
||||
padding: {
|
||||
options: sizeKnobOptions,
|
||||
options: sizeControlOptions,
|
||||
control: 'select',
|
||||
table: { category: 'padding' },
|
||||
},
|
||||
paddingTop: {
|
||||
options: sizeKnobOptions,
|
||||
options: sizeControlOptions,
|
||||
control: 'select',
|
||||
table: { category: 'padding' },
|
||||
},
|
||||
paddingRight: {
|
||||
options: sizeKnobOptions,
|
||||
options: sizeControlOptions,
|
||||
control: 'select',
|
||||
table: { category: 'padding' },
|
||||
},
|
||||
paddingBottom: {
|
||||
options: sizeKnobOptions,
|
||||
options: sizeControlOptions,
|
||||
control: 'select',
|
||||
table: { category: 'padding' },
|
||||
},
|
||||
paddingLeft: {
|
||||
options: sizeKnobOptions,
|
||||
options: sizeControlOptions,
|
||||
control: 'select',
|
||||
table: { category: 'padding' },
|
||||
},
|
||||
as: {
|
||||
control: 'select',
|
||||
options: ['div', 'ul', 'li', 'span', 'a', 'button'],
|
||||
table: { category: 'as (root html element)' },
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -186,7 +210,14 @@ export const DefaultStory = (args) => {
|
||||
const children = [];
|
||||
for (let $i = 0; $i < items; $i++) {
|
||||
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>;
|
||||
@ -194,10 +225,11 @@ export const DefaultStory = (args) => {
|
||||
|
||||
DefaultStory.storyName = 'Default';
|
||||
|
||||
export const Margin = () => {
|
||||
export const Margin = (args) => {
|
||||
return (
|
||||
<Box borderColor={COLORS.BORDER_MUTED}>
|
||||
<Box
|
||||
{...args}
|
||||
margin={2}
|
||||
padding={4}
|
||||
backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
|
||||
@ -206,6 +238,7 @@ export const Margin = () => {
|
||||
Static margin
|
||||
</Box>
|
||||
<Box
|
||||
{...args}
|
||||
margin={[2, 4, 8, 12]}
|
||||
padding={[4]}
|
||||
backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
|
||||
@ -217,10 +250,11 @@ export const Margin = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export const Padding = () => {
|
||||
export const Padding = (args) => {
|
||||
return (
|
||||
<Box borderColor={COLORS.BORDER_MUTED}>
|
||||
<Box
|
||||
{...args}
|
||||
padding={4}
|
||||
backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
|
||||
borderColor={COLORS.BORDER_MUTED}
|
||||
@ -228,6 +262,7 @@ export const Padding = () => {
|
||||
Static padding
|
||||
</Box>
|
||||
<Box
|
||||
{...args}
|
||||
padding={[4, 8, 12]}
|
||||
backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
|
||||
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 = () => {
|
||||
return (
|
||||
<>
|
||||
@ -266,16 +378,6 @@ export const BackgroundColor = () => {
|
||||
COLORS.PRIMARY_MUTED
|
||||
</Typography>
|
||||
</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}>
|
||||
<Typography color={COLORS.ERROR_INVERSE}>
|
||||
COLORS.ERROR_DEFAULT
|
||||
@ -315,6 +417,8 @@ export const BorderColor = () => {
|
||||
padding={3}
|
||||
backgroundColor={COLORS.BACKGROUND_DEFAULT}
|
||||
borderColor={COLORS.BORDER_DEFAULT}
|
||||
borderWidth={2}
|
||||
marginBottom={1}
|
||||
>
|
||||
<Typography color={COLORS.TEXT_DEFAULT}>
|
||||
COLORS.BORDER_DEFAULT
|
||||
@ -324,31 +428,28 @@ export const BorderColor = () => {
|
||||
padding={3}
|
||||
backgroundColor={COLORS.BACKGROUND_DEFAULT}
|
||||
borderColor={COLORS.BORDER_MUTED}
|
||||
borderWidth={2}
|
||||
marginBottom={1}
|
||||
>
|
||||
<Typography color={COLORS.TEXT_DEFAULT}>COLORS.BORDER_MUTED</Typography>
|
||||
</Box>
|
||||
<Box
|
||||
padding={3}
|
||||
borderColor={COLORS.PRIMARY_DEFAULT}
|
||||
borderWidth={2}
|
||||
marginBottom={1}
|
||||
backgroundColor={COLORS.PRIMARY_MUTED}
|
||||
>
|
||||
<Typography color={COLORS.TEXT_DEFAULT}>
|
||||
COLORS.PRIMARY_DEFAULT
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box
|
||||
padding={3}
|
||||
backgroundColor={COLORS.SECONDARY_MUTED}
|
||||
borderColor={COLORS.SECONDARY_DEFAULT}
|
||||
>
|
||||
<Typography color={COLORS.TEXT_DEFAULT}>
|
||||
COLORS.SECONDARY_DEFAULT
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box
|
||||
padding={3}
|
||||
backgroundColor={COLORS.ERROR_MUTED}
|
||||
borderColor={COLORS.ERROR_DEFAULT}
|
||||
borderWidth={2}
|
||||
marginBottom={1}
|
||||
>
|
||||
<Typography color={COLORS.TEXT_DEFAULT}>
|
||||
COLORS.ERROR_DEFAULT
|
||||
@ -358,6 +459,8 @@ export const BorderColor = () => {
|
||||
padding={3}
|
||||
backgroundColor={COLORS.SUCCESS_MUTED}
|
||||
borderColor={COLORS.SUCCESS_DEFAULT}
|
||||
borderWidth={2}
|
||||
marginBottom={1}
|
||||
>
|
||||
<Typography color={COLORS.TEXT_DEFAULT}>
|
||||
COLORS.SUCCESS_DEFAULT
|
||||
@ -367,6 +470,7 @@ export const BorderColor = () => {
|
||||
padding={3}
|
||||
backgroundColor={COLORS.WARNING_MUTED}
|
||||
borderColor={COLORS.WARNING_DEFAULT}
|
||||
borderWidth={2}
|
||||
>
|
||||
<Typography color={COLORS.TEXT_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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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', () => {
|
||||
it('should render the Box with the width class', () => {
|
||||
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',
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -79,12 +79,6 @@ import { COLORS} from '../../../helpers/constants/design-system';
|
||||
<Typography color={COLORS.PRIMARY_INVERSE} boxProps={{backgroundColor:{COLORS.PRIMARY_DEFAULT}}}>
|
||||
primary-inverse
|
||||
</Typography>
|
||||
<Typography color={COLORS.SECONDARY_DEFAULT}>
|
||||
secondary-default
|
||||
</Typography>
|
||||
<Typography color={COLORS.SECONDARY_INVERSE} boxProps={{backgroundColor:{COLORS.SECONDARY_DEFAULT}}}>
|
||||
secondary-inverse
|
||||
</Typography>
|
||||
<Typography color={COLORS.ERROR_DEFAULT}>
|
||||
error-default
|
||||
</Typography>
|
||||
|
||||
@ -20,8 +20,6 @@ export const ValidColors = [
|
||||
COLORS.OVERLAY_INVERSE,
|
||||
COLORS.PRIMARY_DEFAULT,
|
||||
COLORS.PRIMARY_INVERSE,
|
||||
COLORS.SECONDARY_DEFAULT,
|
||||
COLORS.SECONDARY_INVERSE,
|
||||
COLORS.ERROR_DEFAULT,
|
||||
COLORS.ERROR_INVERSE,
|
||||
COLORS.SUCCESS_DEFAULT,
|
||||
|
||||
@ -80,9 +80,6 @@ function renderBackgroundColor(color) {
|
||||
case COLORS.PRIMARY_INVERSE:
|
||||
bgColor = COLORS.PRIMARY_DEFAULT;
|
||||
break;
|
||||
case COLORS.SECONDARY_INVERSE:
|
||||
bgColor = COLORS.SECONDARY_DEFAULT;
|
||||
break;
|
||||
case COLORS.ERROR_INVERSE:
|
||||
bgColor = COLORS.ERROR_DEFAULT;
|
||||
break;
|
||||
|
||||
@ -5,6 +5,7 @@ $color-map: (
|
||||
'text-alternative': --color-text-alternative,
|
||||
'text-muted': --color-text-muted,
|
||||
'icon-default': --color-icon-default,
|
||||
'icon-alternative': --color-icon-alternative,
|
||||
'icon-muted': --color-icon-muted,
|
||||
'border-default': --color-border-default,
|
||||
'border-muted': --color-border-muted,
|
||||
@ -15,11 +16,6 @@ $color-map: (
|
||||
'primary-muted': --color-primary-muted,
|
||||
'primary-inverse': --color-primary-inverse,
|
||||
'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-alternative': --color-error-alternative,
|
||||
'error-muted': --color-error-muted,
|
||||
@ -46,6 +42,7 @@ $color-map: (
|
||||
'rinkeby': --rinkeby,
|
||||
'goerli': --goerli,
|
||||
'localhost': --localhost,
|
||||
'transparent': transparent,
|
||||
'transparent': --transparent,
|
||||
'flask-purple': --flask-purple,
|
||||
'inherit': --inherit,
|
||||
);
|
||||
|
||||
@ -8,6 +8,8 @@
|
||||
--goerli: #3099f2;
|
||||
--localhost: #bbc0c5;
|
||||
--flask-purple: #8b45b6;
|
||||
--inherit: inherit;
|
||||
--transparent: transparent;
|
||||
|
||||
// DO NOT CHANGE
|
||||
// Required for the QR reader to work properly
|
||||
|
||||
@ -25,11 +25,6 @@ export const COLORS = {
|
||||
PRIMARY_MUTED: 'primary-muted',
|
||||
PRIMARY_INVERSE: 'primary-inverse',
|
||||
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_ALTERNATIVE: 'error-alternative',
|
||||
ERROR_MUTED: 'error-muted',
|
||||
@ -55,8 +50,8 @@ export const COLORS = {
|
||||
KOVAN: 'kovan',
|
||||
RINKEBY: 'rinkeby',
|
||||
GOERLI: 'goerli',
|
||||
TRANSPARENT: 'transparent',
|
||||
LOCALHOST: 'localhost',
|
||||
TRANSPARENT: 'transparent',
|
||||
INHERIT: 'inherit',
|
||||
};
|
||||
export const BACKGROUND_COLORS = pick(COLORS, [
|
||||
@ -121,15 +116,15 @@ export const TEXT_COLORS = pick(COLORS, [
|
||||
'OVERLAY_INVERSE',
|
||||
'PRIMARY_DEFAULT',
|
||||
'PRIMARY_INVERSE',
|
||||
'SECONDARY_DEFAULT',
|
||||
'SECONDARY_INVERSE',
|
||||
'ERROR_DEFAULT',
|
||||
'ERROR_INVERSE',
|
||||
'SUCCESS_DEFAULT',
|
||||
'SUCCESS_INVERSE',
|
||||
'WARNING_DEFAULT',
|
||||
'WARNING_INVERSE',
|
||||
'INFO_DEFAULT',
|
||||
'INFO_INVERSE',
|
||||
'INHERIT',
|
||||
]);
|
||||
export const TYPOGRAPHY = {
|
||||
H1: 'h1',
|
||||
@ -147,6 +142,7 @@ export const TYPOGRAPHY = {
|
||||
const NONE = 'none';
|
||||
|
||||
export const SIZES = {
|
||||
XXS: 'xxs',
|
||||
XS: 'xs',
|
||||
SM: 'sm',
|
||||
MD: 'md',
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
exports[`ViewOnBlockExplorer renders the component with initial props 1`] = `
|
||||
<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>
|
||||
View Swap at etherscan.io
|
||||
|
||||
Loading…
Reference in New Issue
Block a user