From 0244c6298c67d9c73be338488ebd7a3c800a0f53 Mon Sep 17 00:00:00 2001 From: George Marshall Date: Tue, 1 Mar 2022 10:23:20 -0800 Subject: [PATCH] Feat/13662 box design token updates (#13725) * Updating Box component and adding dark theme to storybook toolbar * Updating box props table manually * Fixing linting issues * Updating design-tokens to v.1.3.0 * Reverting theme/background changes in .storybook/preview.js so we can use implementation in #13651 * Updating yarn.lock * Updating titles --- ui/components/ui/box/README.mdx | 124 +++++++++++++++++ ui/components/ui/box/box.stories.js | 186 +++++++++++++++++++++++--- ui/css/design-system/colors.scss | 62 +++++++-- ui/helpers/constants/design-system.js | 58 +++++++- 4 files changed, 395 insertions(+), 35 deletions(-) create mode 100644 ui/components/ui/box/README.mdx diff --git a/ui/components/ui/box/README.mdx b/ui/components/ui/box/README.mdx new file mode 100644 index 000000000..71f7dd42a --- /dev/null +++ b/ui/components/ui/box/README.mdx @@ -0,0 +1,124 @@ +import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'; + +import ActionableMessage from '../actionable-message'; + +import Box from '.'; + +# Box + +Box is a utility component that can be used for layout or as a base for other UI components. + + + + + +## Component API + +| Name | Description | Default | +| --------------- | ----------------------------------- | ------------------ | +| children | node func | - | +| flexDirection | Object.values(FLEX_DIRECTION) | FLEX_DIRECTION.ROW | +| flexWrap | Object.values(FLEX_WRAP) | - | +| gap | 1,2,4,6,8 | - | +| margin | 1,2,4,6,8 or array of numbers [1,2] | - | +| marginTop | 1,2,4,6,8 | - | +| marginBottom | 1,2,4,6,8 | - | +| marginRight | 1,2,4,6,8 | - | +| marginLeft | 1,2,4,6,8 | - | +| padding | 1,2,4,6,8 or array of numbers [1,2] | - | +| paddingTop | 1,2,4,6,8 | - | +| paddingBottom | 1,2,4,6,8 | - | +| paddingRight | 1,2,4,6,8 | - | +| paddingLeft | 1,2,4,6,8 | - | +| borderColor | Object.values(COLORS) | - | +| borderWidth | number | - | +| borderRadius | Object.values(SIZES) | - | +| borderStyle | Object.values(BORDER_STYLE) | - | +| alignItems | Object.values(ALIGN_ITEMS) | - | +| justifyContent | Object.values(JUSTIFY_CONTENT) | - | +| textAlign | Object.values(TEXT_ALIGN) | - | +| display | Object.values(DISPLAY) | - | +| width | Object.values(BLOCK_SIZES) | - | +| height | Object.values(BLOCK_SIZES) | - | +| backgroundColor | Object.values(COLORS) | - | +| className | string | | + +## Usage + +The following describes the props and example usage for this component. + +### Background Color + +Use the `backgroundColor` prop along with the `COLORS` object from `ui/helpers/constants/design-system.js` to change background color. + + + + + +**NOTE**: The `` and `` color combinations above follow our design system color rules and should cover most general UI applications. Click "Show code" to see the code example. Do not use the [deprecated colors](#deprecated-colors) + +Example of importing `COLORS` object with `Box` component + +```jsx +import { COLORS } from '../../../helpers/constants/design-system'; +import Box from '../ui/box'; + + + COLORS.BACKGROUND_DEFAULT +; +``` + +### Border Color + +Use the `borderColor` prop along with the `COLORS` object from `ui/helpers/constants/design-system.js` to change border color + + + + + +**NOTE**: The `` and `` color combinations above follow our design system color rules and should cover most general UI applications. Click "Show code" to see the code example. Do not use the [deprecated colors](#deprecated-colors) + +Example of importing `COLORS` object with `Box` component + +```jsx +import { COLORS } from '../../../helpers/constants/design-system'; +import Box from '../ui/box'; + + + COLORS.BORDER_DEFAULT +; +``` + +## Deprecated Colors + +List of deprecated background and border color props that are not theme compatible and should not be used. + +```js +/** !!! DEPRECATED DO NOT USE!!! */ +UI1: 'ui-1', +UI2: 'ui-2', +UI3: 'ui-3', +UI4: 'ui-4', +BLACK: 'black', +GREY: 'grey', +NEUTRAL_GREY: 'neutral-grey', +WHITE: 'white', +PRIMARY1: 'primary-1', +PRIMARY2: 'primary-2', +PRIMARY3: 'primary-3', +SECONDARY1: 'secondary-1', +SECONDARY2: 'secondary-2', +SECONDARY3: 'secondary-3', +SUCCESS1: 'success-1', +SUCCESS2: 'success-2', +SUCCESS3: 'success-3', +ERROR1: 'error-1', +ERROR2: 'error-2', +ERROR3: 'error-3', +ALERT1: 'alert-1', +ALERT2: 'alert-2', +ALERT3: 'alert-3', +``` diff --git a/ui/components/ui/box/box.stories.js b/ui/components/ui/box/box.stories.js index 382927a78..a342ecd4d 100644 --- a/ui/components/ui/box/box.stories.js +++ b/ui/components/ui/box/box.stories.js @@ -8,8 +8,12 @@ import { JUSTIFY_CONTENT, TEXT_ALIGN, } from '../../../helpers/constants/design-system'; + +import Typography from '../typography'; 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']; @@ -17,6 +21,11 @@ export default { title: 'Components/UI/Box', id: __filename, component: Box, + parameters: { + docs: { + page: README, + }, + }, argTypes: { size: { control: { type: 'range', min: 50, max: 500, step: 10 }, @@ -29,37 +38,50 @@ export default { defaultValue: 1, }, display: { - options: DISPLAY, + options: Object.values(DISPLAY), control: 'select', defaultValue: DISPLAY.BLOCK, table: { category: 'display' }, }, width: { - options: BLOCK_SIZES, + options: Object.values(BLOCK_SIZES), control: 'select', defaultValue: BLOCK_SIZES.HALF, table: { category: 'display' }, }, height: { - options: BLOCK_SIZES, + options: Object.values(BLOCK_SIZES), control: 'select', defaultValue: BLOCK_SIZES.HALF, table: { category: 'display' }, }, + backgroundColor: { + options: Object.values(COLORS), + control: 'select', + table: { + category: 'background', + }, + }, + borderColor: { + options: Object.values(COLORS), + control: 'select', + defaultValue: COLORS.BORDER_DEFAULT, + table: { category: 'border' }, + }, justifyContent: { - options: JUSTIFY_CONTENT, + options: Object.values(JUSTIFY_CONTENT), control: 'select', defaultValue: JUSTIFY_CONTENT.FLEX_START, table: { category: 'display' }, }, alignItems: { - options: ALIGN_ITEMS, + options: Object.values(ALIGN_ITEMS), control: 'select', defaultValue: ALIGN_ITEMS.FLEX_START, table: { category: 'display' }, }, textAlign: { - options: TEXT_ALIGN, + options: Object.values(TEXT_ALIGN), control: 'select', defaultValue: TEXT_ALIGN.LEFT, table: { category: 'left' }, @@ -115,7 +137,7 @@ export default { table: { category: 'padding' }, }, borderStyle: { - options: BORDER_STYLE, + options: Object.values(BORDER_STYLE), control: 'select', defaultValue: BORDER_STYLE.DASHED, table: { category: 'border' }, @@ -126,18 +148,6 @@ export default { defaultValue: 1, table: { category: 'border' }, }, - borderColor: { - options: COLORS, - control: 'select', - defaultValue: COLORS.BLACK, - table: { category: 'border' }, - }, - backgroundColor: { - options: COLORS, - defaultValue: COLORS.WHITE, - control: 'select', - table: { category: 'background' }, - }, }, }; @@ -153,3 +163,141 @@ export const DefaultStory = (args) => { }; DefaultStory.storyName = 'Default'; + +export const BackgroundColor = () => { + return ( + <> + + + COLORS.BACKGROUND_DEFAULT + + + + + COLORS.BACKGROUND_ALTERNATIVE + + + + + COLORS.OVERLAY_DEFAULT + + + + + COLORS.PRIMARY_DEFAULT + + + + + COLORS.PRIMARY_MUTED + + + + + COLORS.SECONDARY_DEFAULT + + + + + COLORS.SECONDARY_MUTED + + + + + COLORS.ERROR_DEFAULT + + + + COLORS.ERROR_MUTED + + + + COLORS.SUCCESS_DEFAULT + + + + + COLORS.SUCCESS_MUTED + + + + + COLORS.WARNING_DEFAULT + + + + + COLORS.WARNING_MUTED + + + + ); +}; + +export const BorderColor = () => { + return ( + <> + + + COLORS.BORDER_DEFAULT + + + + COLORS.BORDER_MUTED + + + + COLORS.PRIMARY_DEFAULT + + + + + COLORS.SECONDARY_DEFAULT + + + + + COLORS.ERROR_DEFAULT + + + + + COLORS.SUCCESS_DEFAULT + + + + + COLORS.WARNING_DEFAULT + + + + ); +}; diff --git a/ui/css/design-system/colors.scss b/ui/css/design-system/colors.scss index ac21d9cc9..ec3e6fdf3 100644 --- a/ui/css/design-system/colors.scss +++ b/ui/css/design-system/colors.scss @@ -1,4 +1,56 @@ $color-map: ( + 'background-default': --color-background-default, + 'background-alternative': --color-background-alternative, + 'text-default': --color-text-default, + 'text-alternative': --color-text-alternative, + 'text-muted': --color-text-muted, + 'icon-default': --color-icon-default, + 'icon-muted': --color-icon-muted, + 'border-default': --color-border-default, + 'border-muted': --color-border-muted, + 'overlay-default': --color-overlay-default, + 'overlay-inverse': --color-overlay-inverse, + 'primary-default': --color-primary-default, + 'primary-alternative': --color-primary-alternative, + '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, + 'error-inverse': --color-error-inverse, + 'error-disabled': --color-error-disabled, + 'warning-default': --color-warning-default, + 'warning-alternative': --color-warning-alternative, + 'warning-muted': --color-warning-muted, + 'warning-inverse': --color-warning-inverse, + 'warning-disabled': --color-warning-disabled, + 'success-default': --color-success-default, + 'success-alternative': --color-success-alternative, + 'success-muted': --color-success-muted, + 'success-inverse': --color-success-inverse, + 'success-disabled': --color-success-disabled, + 'info-default': --color-info-default, + 'info-alternative': --color-info-alternative, + 'info-muted': --color-info-muted, + 'info-inverse': --color-info-inverse, + 'info-disabled': --color-info-disabled, + 'mainnet': --mainnet, + 'ropsten': --ropsten, + 'kovan': --kovan, + 'rinkeby': --rinkeby, + 'goerli': --goerli, + 'localhost': --localhost, + 'transparent': transparent, + 'flask-purple': --flask-purple, + /** + * !!! DEPRECATED DO NOT USE!!! + */ 'ui-1': --ui-1, 'ui-2': --ui-2, 'ui-3': --ui-3, @@ -22,13 +74,5 @@ $color-map: ( 'error-3': --error-3, 'success-1': --success-1, 'success-2': --success-2, - 'success-3': --success-3, - 'mainnet': --mainnet, - 'ropsten': --ropsten, - 'kovan': --kovan, - 'rinkeby': --rinkeby, - 'goerli': --goerli, - 'localhost': --localhost, - 'transparent': transparent, - 'flask-purple': --flask-purple + 'success-3': --success-3 ); diff --git a/ui/helpers/constants/design-system.js b/ui/helpers/constants/design-system.js index 89b0a3801..650655330 100644 --- a/ui/helpers/constants/design-system.js +++ b/ui/helpers/constants/design-system.js @@ -5,6 +5,57 @@ * match the plural form of the thing. e.g. COLORS, TYPOGRAPHY */ export const COLORS = { + BACKGROUND_DEFAULT: 'background-default', + BACKGROUND_ALTERNATIVE: 'background-alternative', + TEXT_DEFAULT: 'text-default', + TEXT_ALTERNATIVE: 'text-alternative', + TEXT_MUTED: 'text-muted', + ICON_DEFAULT: 'icon-default', + ICON_MUTED: 'icon-muted', + BORDER_DEFAULT: 'border-default', + BORDER_MUTED: 'border-muted', + OVERLAY_DEFAULT: 'overlay-default', + OVERLAY_INVERSE: 'overlay-inverse', + PRIMARY_DEFAULT: 'primary-default', + PRIMARY_ALTERNATIVE: 'primary-alternative', + 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', + ERROR_INVERSE: 'error-inverse', + ERROR_DISABLED: 'error-disabled', + WARNING_DEFAULT: 'warning-default', + WARNING_ALTERNATIVE: 'warning-alternative', + WARNING_MUTED: 'warning-muted', + WARNING_INVERSE: 'warning-inverse', + WARNING_DISABLED: 'warning-disabled', + SUCCESS_DEFAULT: 'success-default', + SUCCESS_ALTERNATIVE: 'success-alternative', + SUCCESS_MUTED: 'success-muted', + SUCCESS_INVERSE: 'success-inverse', + SUCCESS_DISABLED: 'success-disabled', + INFO_DEFAULT: 'info-default', + INFO_ALTERNATIVE: 'info-alternative', + INFO_MUTED: 'info-muted', + INFO_INVERSE: 'info-inverse', + INFO_DISABLED: 'info-disabled', + MAINNET: 'mainnet', + ROPSTEN: 'ropsten', + KOVAN: 'kovan', + RINKEBY: 'rinkeby', + GOERLI: 'goerli', + TRANSPARENT: 'transparent', + LOCALHOST: 'localhost', + /** + * !!! DEPRECATED DO NOT USE!!! + */ UI1: 'ui-1', UI2: 'ui-2', UI3: 'ui-3', @@ -28,13 +79,6 @@ export const COLORS = { ALERT1: 'alert-1', ALERT2: 'alert-2', ALERT3: 'alert-3', - MAINNET: 'mainnet', - ROPSTEN: 'ropsten', - KOVAN: 'kovan', - RINKEBY: 'rinkeby', - GOERLI: 'goerli', - TRANSPARENT: 'transparent', - LOCALHOST: 'localhost', }; export const TYPOGRAPHY = {