From 9925b6f4623d8e93c4b7cc3399599b73b75c23ab Mon Sep 17 00:00:00 2001 From: sam-m-m Date: Mon, 28 Sep 2020 15:44:05 -0700 Subject: [PATCH 01/24] feat #92 - Demo input custom styles --- .storybook/manager.js | 4 +- package-lock.json | 16 +++++++ package.json | 3 ++ src/__snapshots__/storybook.test.ts.snap | 50 +++++++++++----------- src/components/Input/index.tsx | 38 +++++++++++++++- src/components/Input/utils.ts | 12 ++++++ src/components/assets/styles/styleguide.ts | 3 ++ src/components/utils.ts | 30 +++++++++++++ 8 files changed, 128 insertions(+), 28 deletions(-) create mode 100644 src/components/Input/utils.ts diff --git a/.storybook/manager.js b/.storybook/manager.js index 100d71c7..e17c9984 100644 --- a/.storybook/manager.js +++ b/.storybook/manager.js @@ -1,4 +1,5 @@ import { addons } from '@storybook/addons' +import { themes } from '@storybook/theming' addons.setConfig({ isFullscreen: false, @@ -11,5 +12,6 @@ addons.setConfig({ theme: undefined, selectedPanel: 'Controls', initialActive: 'sidebar', - showRoots: false + showRoots: false, + theme: themes.dark }) diff --git a/package-lock.json b/package-lock.json index c4948253..679987ec 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5649,6 +5649,22 @@ "integrity": "sha512-1UzDldn9GfYYEsWWnn/P4wkTlkZDH7lDb0wBMGbtIQc9zXEQq7FlKBdZUn6OBqD8sKZZ2RQO2mAjGpXiDGoRmQ==", "dev": true }, + "@types/color": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@types/color/-/color-3.0.1.tgz", + "integrity": "sha512-oeUWVaAwI+xINDUx+3F2vJkl/vVB03VChFF/Gl3iQCdbcakjuoJyMOba+3BXRtnBhxZ7uBYqQBi9EpLnvSoztA==", + "requires": { + "@types/color-convert": "*" + } + }, + "@types/color-convert": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/@types/color-convert/-/color-convert-1.9.0.tgz", + "integrity": "sha512-OKGEfULrvSL2VRbkl/gnjjgbbF7ycIlpSsX7Nkab4MOWi5XxmgBYvuiQ7lcCFY5cPDz7MUNaKgxte2VRmtr4Fg==", + "requires": { + "@types/color-name": "*" + } + }, "@types/color-name": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz", diff --git a/package.json b/package.json index 79d1345b..18272f3f 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", + "@types/color": "^3.0.1", "@types/jest": "^24.9.1", "@types/node": "^12.12.53", "@types/react": "^16.9.44", @@ -21,6 +22,7 @@ "antd": "^4.6.5", "bytes": "^3.1.0", "classnames": "^2.2.6", + "color": "^3.1.2", "fuse.js": "^6.4.1", "lodash": "^4.17.20", "moment": "^2.27.0", @@ -79,6 +81,7 @@ "@storybook/preset-create-react-app": "^3.1.4", "@storybook/react": "^6.0.21", "@svgr/rollup": "^5.4.0", + "@storybook/theming": "^6.0.21", "@types/bytes": "^3.1.0", "@types/classnames": "^2.2.10", "@types/enzyme": "^3.10.5", diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap index 75de3a7a..39cbef15 100644 --- a/src/__snapshots__/storybook.test.ts.snap +++ b/src/__snapshots__/storybook.test.ts.snap @@ -202,7 +202,7 @@ exports[`Storyshots Icon Predefined 1`] = ` exports[`Storyshots Input Default 1`] = `
  @@ -585,10 +585,10 @@ exports[`Storyshots Radio Group Partially Disabled 1`] = ` exports[`Storyshots Select Default 1`] = `
Lorem @@ -774,10 +774,10 @@ exports[`Storyshots Select Full Width 1`] = ` exports[`Storyshots Select Icon 1`] = `
  @@ -983,27 +983,27 @@ exports[`Storyshots Skeleton Circle 1`] = ` exports[`Storyshots Skeleton Count 1`] = ` Array [   ,   ,   ,   ,   , @@ -1012,7 +1012,7 @@ Array [ exports[`Storyshots Skeleton Default 1`] = `   diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx index 134e774b..e9715bf4 100644 --- a/src/components/Input/index.tsx +++ b/src/components/Input/index.tsx @@ -3,6 +3,7 @@ import { Input as AntDInput } from 'antd' import { BaseFormElementProps } from '../types' import cn from 'classnames' import { createUseStyles } from 'react-jss' +import { generateInputCSSVals } from './utils' import { getDataTestAttributeProp } from '../utils' import Skeleton from '../Skeleton' import { @@ -11,8 +12,41 @@ import { } from '../assets/styles/styleguide' import React, { FC } from 'react' +const { + defaultBgColor, + defaultBorderColor, + defaultColor, + defaultFocusBoxShadow, + disabledBgColor, + focusBorderColor, + hoverBorderColor +} = generateInputCSSVals() + +const errorAnimationKeyFrames = fieldErrorStyles['@global'] + const useStyles = createUseStyles({ - ...fieldErrorStyles, + '@global': { + ...errorAnimationKeyFrames, + 'input.ant-input': { + '&:hover': { + borderColor: hoverBorderColor + }, + backgroundColor: defaultBgColor, + borderColor: defaultBorderColor, + color: defaultColor + }, + 'input.ant-input-disabled, .ant-input[disabled]': { + '&:hover': { + borderColor: disabledBgColor + }, + backgroundColor: disabledBgColor + }, + 'input.ant-input-focused, input.ant-input:focus': { + borderColor: focusBorderColor, + boxShadow: defaultFocusBoxShadow + }, + 'input.ant-input.error': fieldErrorStyles.error + }, container: { width: props => (props.fullWidth ? '100%' : defaultFieldWidth) }, @@ -60,7 +94,7 @@ const Input: FC = (props: InputProps) => { const inputClasses: string = cn( { - [componentClasses.error]: error + error }, classes ) diff --git a/src/components/Input/utils.ts b/src/components/Input/utils.ts new file mode 100644 index 00000000..9e948b76 --- /dev/null +++ b/src/components/Input/utils.ts @@ -0,0 +1,12 @@ +import { darkenColor, fadeColor, lightenColor } from '../utils' +import { demoBlue, demoGray, demoGreen } from '../assets/styles/styleguide' + +export const generateInputCSSVals = () => ({ + defaultBgColor: lightenColor(demoBlue, 50), + defaultBorderColor: lightenColor(demoGray, 55), + defaultColor: darkenColor(demoGreen, 25), + defaultFocusBoxShadow: `0 0 0 2px ${fadeColor(demoGreen, 85)}`, + disabledBgColor: lightenColor(demoGray, 85), + focusBorderColor: darkenColor(demoGreen, 3), + hoverBorderColor: darkenColor(demoGreen, 3) +}) diff --git a/src/components/assets/styles/styleguide.ts b/src/components/assets/styles/styleguide.ts index 12f44ef3..2c1220b2 100644 --- a/src/components/assets/styles/styleguide.ts +++ b/src/components/assets/styles/styleguide.ts @@ -15,3 +15,6 @@ export const fieldErrorStyles = { export const fontSizeRegular = '14px' export const linkColor = '#1EA7FD' export const skeletonButtonBorderColor = '#DFDFDF' +export const demoGreen = '#00d287' +export const demoGray = '#676c77' +export const demoBlue = '#5183f5' diff --git a/src/components/utils.ts b/src/components/utils.ts index fb355f80..96a12e45 100644 --- a/src/components/utils.ts +++ b/src/components/utils.ts @@ -1,3 +1,4 @@ +import Color from 'color' import { TooltipPlacement } from 'antd/es/tooltip' export const TAG = 'data-test' @@ -23,3 +24,32 @@ export const placementOptions: TooltipPlacement[] = [ 'topLeft', 'topRight' ] +export const getRgba = ([r, g, b]: number[], a: number) => + `rgba(${r} ,${g} ,${b} ,${a})` + +export const darkenColor = (color: string, darkenPercent: number) => { + if (darkenPercent < 0 || darkenPercent > 100) + throw new Error('please provide a valid percentage') + + return Color(color) + .darken(darkenPercent / 100) + .hex() +} + +export const lightenColor = (color: string, lightenPercent: number) => { + if (lightenPercent < 0 || lightenPercent > 100) + throw new Error('please provide a valid percentage') + + return Color(color) + .lighten(lightenPercent / 100) + .hex() +} + +export const fadeColor = (color: string, fadePercent: number) => { + if (fadePercent < 0 || fadePercent > 100) + throw new Error('please provide a valid percentage') + + const fadedColor = Color(color).fade(fadePercent / 100) + + return getRgba(fadedColor.rgb().array(), fadedColor.alpha()) +} From bcaf2426f9afeef93373735d7d93fe9e2ca58b8a Mon Sep 17 00:00:00 2001 From: sam-m-m Date: Tue, 29 Sep 2020 16:25:41 -0700 Subject: [PATCH 02/24] feat #92 - Update input default styles --- src/__snapshots__/storybook.test.ts.snap | 63 +++++++++++------- src/components/Input/Input.stories.tsx | 3 + src/components/Input/index.tsx | 33 +--------- src/components/Input/utils.ts | 83 ++++++++++++++++++++---- src/components/assets/styles/colors.ts | 56 ++++++++++++++++ src/components/assets/styles/themes.ts | 38 +++++++++++ src/components/utils.ts | 37 +++++++---- 7 files changed, 235 insertions(+), 78 deletions(-) create mode 100644 src/components/assets/styles/colors.ts create mode 100644 src/components/assets/styles/themes.ts diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap index 39cbef15..60438de4 100644 --- a/src/__snapshots__/storybook.test.ts.snap +++ b/src/__snapshots__/storybook.test.ts.snap @@ -221,7 +221,7 @@ exports[`Storyshots Input Default 1`] = ` exports[`Storyshots Input Error 1`] = `
  @@ -273,6 +273,25 @@ exports[`Storyshots Input Loading 1`] = `
`; +exports[`Storyshots Input Placeholder 1`] = ` +
+ +
+`; + exports[`Storyshots Link Click 1`] = `
Lorem @@ -774,10 +793,10 @@ exports[`Storyshots Select Full Width 1`] = ` exports[`Storyshots Select Icon 1`] = `
  @@ -983,27 +1002,27 @@ exports[`Storyshots Skeleton Circle 1`] = ` exports[`Storyshots Skeleton Count 1`] = ` Array [   ,   ,   ,   ,   , @@ -1012,7 +1031,7 @@ Array [ exports[`Storyshots Skeleton Default 1`] = `   diff --git a/src/components/Input/Input.stories.tsx b/src/components/Input/Input.stories.tsx index b862bc01..e084b833 100644 --- a/src/components/Input/Input.stories.tsx +++ b/src/components/Input/Input.stories.tsx @@ -15,6 +15,9 @@ const Template: Story = args => export const Default = Template.bind({}) +export const Placeholder = Template.bind({}) +Placeholder.args = { placeholder: 'Search' } + export const Loading = Template.bind({}) Loading.args = { loading: true } diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx index e9715bf4..139eabbb 100644 --- a/src/components/Input/index.tsx +++ b/src/components/Input/index.tsx @@ -3,7 +3,7 @@ import { Input as AntDInput } from 'antd' import { BaseFormElementProps } from '../types' import cn from 'classnames' import { createUseStyles } from 'react-jss' -import { generateInputCSSVals } from './utils' +import { generateInputStyles } from './utils' import { getDataTestAttributeProp } from '../utils' import Skeleton from '../Skeleton' import { @@ -12,40 +12,13 @@ import { } from '../assets/styles/styleguide' import React, { FC } from 'react' -const { - defaultBgColor, - defaultBorderColor, - defaultColor, - defaultFocusBoxShadow, - disabledBgColor, - focusBorderColor, - hoverBorderColor -} = generateInputCSSVals() - const errorAnimationKeyFrames = fieldErrorStyles['@global'] const useStyles = createUseStyles({ '@global': { ...errorAnimationKeyFrames, - 'input.ant-input': { - '&:hover': { - borderColor: hoverBorderColor - }, - backgroundColor: defaultBgColor, - borderColor: defaultBorderColor, - color: defaultColor - }, - 'input.ant-input-disabled, .ant-input[disabled]': { - '&:hover': { - borderColor: disabledBgColor - }, - backgroundColor: disabledBgColor - }, - 'input.ant-input-focused, input.ant-input:focus': { - borderColor: focusBorderColor, - boxShadow: defaultFocusBoxShadow - }, - 'input.ant-input.error': fieldErrorStyles.error + // '.dark input': generateInputStyles('dark'), + input: generateInputStyles('light') }, container: { width: props => (props.fullWidth ? '100%' : defaultFieldWidth) diff --git a/src/components/Input/utils.ts b/src/components/Input/utils.ts index 9e948b76..ae03bbe4 100644 --- a/src/components/Input/utils.ts +++ b/src/components/Input/utils.ts @@ -1,12 +1,71 @@ -import { darkenColor, fadeColor, lightenColor } from '../utils' -import { demoBlue, demoGray, demoGreen } from '../assets/styles/styleguide' - -export const generateInputCSSVals = () => ({ - defaultBgColor: lightenColor(demoBlue, 50), - defaultBorderColor: lightenColor(demoGray, 55), - defaultColor: darkenColor(demoGreen, 25), - defaultFocusBoxShadow: `0 0 0 2px ${fadeColor(demoGreen, 85)}`, - disabledBgColor: lightenColor(demoGray, 85), - focusBorderColor: darkenColor(demoGreen, 3), - hoverBorderColor: darkenColor(demoGreen, 3) -}) +import { fieldErrorStyles } from '../assets/styles/styleguide' +import { getRgba } from '../utils' +import { dassanaBlues, dassanaGrays } from '../assets/styles/colors' +import { + generateThemeVars, + PaletteType, + ThemesType +} from '../assets/styles/themes' + +export const generateInputCSSVals = ({ + background, + primary, + text +}: PaletteType) => { + const base = { + bgColor: background, + borderColor: dassanaGrays[6], + color: text.primary + } + + const disabled = { + bgColor: dassanaGrays[3], + color: text.disabled + } + + const hover = { + borderColor: dassanaBlues[5] + } + + const focus = { + ...hover, + boxShadow: `0px 0px 4px ${getRgba(primary, 50)}` + } + + const placeholder = { + color: text.disabled + } + + return { base, disabled, focus, hover, placeholder } +} + +export const generateInputStyles = (themeType: ThemesType) => { + const { base, disabled, focus, hover, placeholder } = generateInputCSSVals( + generateThemeVars(themeType) + ) + + return { + '&.ant-input': { + '&::placeholder': { + color: placeholder.color + }, + '&:hover': { + borderColor: hover.borderColor + }, + backgroundColor: base.bgColor, + borderColor: base.borderColor, + color: base.color + }, + '&.ant-input-disabled, &.ant-input[disabled]': { + '&:hover': { + borderColor: base.borderColor + }, + backgroundColor: disabled.bgColor + }, + '&.ant-input-focused, &.ant-input:focus': { + borderColor: focus.borderColor, + boxShadow: focus.boxShadow + }, + '&.ant-input.error': fieldErrorStyles.error + } +} diff --git a/src/components/assets/styles/colors.ts b/src/components/assets/styles/colors.ts new file mode 100644 index 00000000..ccbebfcd --- /dev/null +++ b/src/components/assets/styles/colors.ts @@ -0,0 +1,56 @@ +/* eslint-disable sort-keys */ +export const dassanaBlues = { + 1: '#EBEEFE', + 2: '#D5DDFB', + 3: '#ACBBF7', + 4: '#8298F3', + 5: '#5976EF', + 6: '#2F54EB', + 7: '#233FB0', + 8: '#182A76', + 9: '#0C153B', + 10: '#050818' +} + +export const dassanaGrays = { + 1: '#F7F7F7', + 2: '#EEEEEF', + 3: '#DCDDDF', + 4: '#CBCDCE', + 5: '#B9BCBE', + 6: '#A8ABAE', + 7: '#7E8083', + 8: '#545657', + 9: '#2A2B2C', + 10: '#111111' +} + +export const dassanaWhites = { + 1: '#FFFFFF', + 2: '#FEFEFE', + 3: '#FDFDFD', + 4: '#FCFCFC', + 5: '#FAFAFA', + 6: '#F9F9F9', + 7: '#F7F7F7', + 8: '#F1F1F1', + 9: '#E7E7E7', + 10: '#DCDCDC' +} + +export const dassanaReds = { + 1: '#FDF0EE', + 2: '#F9E1DD', + 3: '#F5CAC2', + 4: '#F0AFA4', + 5: '##E78676', + 6: '#E16854', + 7: '#A94E3F', + 8: '#71342A', + 9: '#381A15', + 10: '#381A15' +} + +export const dassanaBlue = dassanaBlues[6] +export const pureWhite = dassanaWhites[1] +export const dassanaWhite = dassanaWhites[2] diff --git a/src/components/assets/styles/themes.ts b/src/components/assets/styles/themes.ts new file mode 100644 index 00000000..723eef49 --- /dev/null +++ b/src/components/assets/styles/themes.ts @@ -0,0 +1,38 @@ +import { dassanaBlue, dassanaGrays, dassanaReds, dassanaWhite } from './colors' + +interface TextColorType { + disabled: string + primary: string +} +export interface PaletteType { + background: string + primary: string + error: string + text: TextColorType +} + +export const light: PaletteType = { + background: dassanaWhite, + error: dassanaReds[6], + primary: dassanaBlue, + text: { + disabled: dassanaGrays[6], + primary: dassanaGrays[8] + } +} + +export const dark: PaletteType = { + background: dassanaWhite, + error: dassanaReds[6], + primary: dassanaBlue, + text: { + disabled: dassanaGrays[6], + primary: dassanaGrays[8] + } +} + +const themes = { dark, light } + +export type ThemesType = keyof typeof themes + +export const generateThemeVars = (theme: ThemesType) => themes[theme] diff --git a/src/components/utils.ts b/src/components/utils.ts index 96a12e45..3764a5e3 100644 --- a/src/components/utils.ts +++ b/src/components/utils.ts @@ -24,25 +24,34 @@ export const placementOptions: TooltipPlacement[] = [ 'topLeft', 'topRight' ] -export const getRgba = ([r, g, b]: number[], a: number) => - `rgba(${r} ,${g} ,${b} ,${a})` -export const darkenColor = (color: string, darkenPercent: number) => { - if (darkenPercent < 0 || darkenPercent > 100) - throw new Error('please provide a valid percentage') +export const getRgba = (color: string, a: number) => { + const [r, g, b] = Color(color).rgb().array() + + return `rgba(${r} ,${g} ,${b} ,${a})` +} - return Color(color) - .darken(darkenPercent / 100) - .hex() +enum LigtenOrDarkenType { + light, + dark } -export const lightenColor = (color: string, lightenPercent: number) => { - if (lightenPercent < 0 || lightenPercent > 100) +export const lightenOrDarkenColor = ( + color: string, + percent: number, + colorChangeType?: keyof typeof LigtenOrDarkenType +) => { + if (percent < 0 || percent > 100) throw new Error('please provide a valid percentage') - return Color(color) - .lighten(lightenPercent / 100) - .hex() + const clr = Color(color) + + const changedClr = + colorChangeType === 'dark' + ? clr.darken(percent / 100) + : clr.lighten(percent / 100) + + return changedClr.hex() } export const fadeColor = (color: string, fadePercent: number) => { @@ -51,5 +60,5 @@ export const fadeColor = (color: string, fadePercent: number) => { const fadedColor = Color(color).fade(fadePercent / 100) - return getRgba(fadedColor.rgb().array(), fadedColor.alpha()) + return getRgba(fadedColor.hex(), fadedColor.alpha()) } From c8f678e1799c68f4c42034bed0d2a4ed61e01ee2 Mon Sep 17 00:00:00 2001 From: sam-m-m Date: Wed, 30 Sep 2020 21:24:28 -0700 Subject: [PATCH 03/24] feat #92 - WIP: sb bug canvas bg color --- .storybook/main.js | 3 +- .storybook/manager.js | 5 +- .storybook/preview.ts | 23 - .storybook/preview.tsx | 68 +++ package-lock.json | 763 +++++++++++++++---------- package.json | 17 +- src/components/Input/index.tsx | 2 +- src/components/assets/styles/themes.ts | 6 +- 8 files changed, 546 insertions(+), 341 deletions(-) delete mode 100644 .storybook/preview.ts create mode 100644 .storybook/preview.tsx diff --git a/.storybook/main.js b/.storybook/main.js index 866086e2..301b2c87 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -4,6 +4,7 @@ module.exports = { '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-actions', - '@storybook/preset-create-react-app' + '@storybook/preset-create-react-app', + 'storybook-dark-mode/register' ] } diff --git a/.storybook/manager.js b/.storybook/manager.js index e17c9984..a0fa6ff7 100644 --- a/.storybook/manager.js +++ b/.storybook/manager.js @@ -1,5 +1,4 @@ import { addons } from '@storybook/addons' -import { themes } from '@storybook/theming' addons.setConfig({ isFullscreen: false, @@ -9,9 +8,7 @@ addons.setConfig({ sidebarAnimations: true, enableShortcuts: true, isToolshown: true, - theme: undefined, selectedPanel: 'Controls', initialActive: 'sidebar', - showRoots: false, - theme: themes.dark + showRoots: false }) diff --git a/.storybook/preview.ts b/.storybook/preview.ts deleted file mode 100644 index 6e007cc2..00000000 --- a/.storybook/preview.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport' -import './index.css' - -export const parameters = { - actions: { argTypesRegex: '^on[A-Z].*' }, - // controls: { expanded: true }, // uncomment to display controls with description and defaults - viewport: { - viewports: INITIAL_VIEWPORTS - }, - backgrounds: { - default: 'light', - values: [ - { - name: 'dark', - value: '#212121' - }, - { - name: 'light', - value: '#ffffff' - } - ] - } -} diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx new file mode 100644 index 00000000..17681d4e --- /dev/null +++ b/.storybook/preview.tsx @@ -0,0 +1,68 @@ +import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport' +import './index.css' +// import { StoryContext } from '@storybook/addons' +// import { Story } from '@storybook/react/types-6-0' +// import React from 'react' +import { themes } from '@storybook/theming' +// import { useDarkMode } from 'storybook-dark-mode' +// import { addParameters } from '@storybook/react' + +export const parameters = { + actions: { argTypesRegex: '^on[A-Z].*' }, + // controls: { expanded: true }, // uncomment to display controls with description and defaults + viewport: { + viewports: INITIAL_VIEWPORTS + }, + backgrounds: { + default: 'light', + values: [ + { + name: 'dark', + value: '#212121' + }, + { + name: 'light', + value: '#ffffff' + } + ] + }, + darkMode: { + current: 'light', + dark: { ...themes.dark }, + light: { ...themes.normal }, + darkClass: 'dark', + lightClass: 'light', + stylePreview: true + } +} + +// export const withThemeProvider = ( +// ComponentStory: Story, +// context: StoryContext +// ) => { +// console.log(context) +// console.log(useDarkMode()) +// const themeClass = useDarkMode() ? 'dark' : '' + +// return ( +//
+// +//
+// ) +// } + +// export const globalTypes = { +// theme: { +// name: 'Theme', +// description: 'Global theme for components', +// defaultValue: 'light', +// toolbar: { +// items: [ +// { value: 'light', title: 'light', icon: 'circlehollow' }, +// { value: 'dark', title: 'dark', icon: 'circle' } +// ] +// } +// } +// } + +// export const decorators = [withThemeProvider] diff --git a/package-lock.json b/package-lock.json index 679987ec..1d11c173 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1962,13 +1962,13 @@ } }, "@mdx-js/loader": { - "version": "1.6.16", - "resolved": "https://registry.npmjs.org/@mdx-js/loader/-/loader-1.6.16.tgz", - "integrity": "sha512-jYIAav17lXmEvweO6bzbsqY9mRTm49UeXXSZPAB81uCX8j91Pgi50Z0NnEN777yQEgGm2Z5PMtnJdxGFQIAjJQ==", + "version": "1.6.18", + "resolved": "https://registry.npmjs.org/@mdx-js/loader/-/loader-1.6.18.tgz", + "integrity": "sha512-mCIt3dFc4p7y3ZqVda07grZDWgMcwSePT3k9vQfgfUcGWLeTFhp46fTbzagXVR/izldFSBLVYkouuH2PaI7Ecw==", "dev": true, "requires": { - "@mdx-js/mdx": "1.6.16", - "@mdx-js/react": "1.6.16", + "@mdx-js/mdx": "1.6.18", + "@mdx-js/react": "1.6.18", "loader-utils": "2.0.0" }, "dependencies": { @@ -1986,46 +1986,46 @@ } }, "@mdx-js/mdx": { - "version": "1.6.16", - "resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-1.6.16.tgz", - "integrity": "sha512-jnYyJ0aCafCIehn3GjYcibIapaLBgs3YkoenNQBPcPFyyuUty7B3B07OE+pMllhJ6YkWeP/R5Ax19x0nqTzgJw==", + "version": "1.6.18", + "resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-1.6.18.tgz", + "integrity": "sha512-RXtdFBP3cnf/RILx/ipp5TsSY1k75bYYmjorv7jTaPcHPQwhQdI6K4TrVUed/GL4f8zX5TN2QwO5g+3E/8RsXA==", "dev": true, "requires": { - "@babel/core": "7.10.5", + "@babel/core": "7.11.6", "@babel/plugin-syntax-jsx": "7.10.4", "@babel/plugin-syntax-object-rest-spread": "7.8.3", - "@mdx-js/util": "1.6.16", - "babel-plugin-apply-mdx-type-prop": "1.6.16", - "babel-plugin-extract-import-names": "1.6.16", + "@mdx-js/util": "1.6.18", + "babel-plugin-apply-mdx-type-prop": "1.6.18", + "babel-plugin-extract-import-names": "1.6.18", "camelcase-css": "2.0.1", "detab": "2.0.3", - "hast-util-raw": "6.0.0", + "hast-util-raw": "6.0.1", "lodash.uniq": "4.5.0", - "mdast-util-to-hast": "9.1.0", - "remark-footnotes": "1.0.0", - "remark-mdx": "1.6.16", + "mdast-util-to-hast": "9.1.1", + "remark-footnotes": "2.0.0", + "remark-mdx": "1.6.18", "remark-parse": "8.0.3", "remark-squeeze-paragraphs": "4.0.0", "style-to-object": "0.3.0", - "unified": "9.1.0", + "unified": "9.2.0", "unist-builder": "2.0.3", "unist-util-visit": "2.0.3" }, "dependencies": { "@babel/core": { - "version": "7.10.5", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.10.5.tgz", - "integrity": "sha512-O34LQooYVDXPl7QWCdW9p4NR+QlzOr7xShPPJz8GsuCU3/8ua/wqTr7gmnxXv+WBESiGU/G5s16i6tUvHkNb+w==", + "version": "7.11.6", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.11.6.tgz", + "integrity": "sha512-Wpcv03AGnmkgm6uS6k8iwhIwTrcP0m17TL1n1sy7qD0qelDu4XNeW0dN0mHfa+Gei211yDaLoEe/VlbXQzM4Bg==", "dev": true, "requires": { "@babel/code-frame": "^7.10.4", - "@babel/generator": "^7.10.5", - "@babel/helper-module-transforms": "^7.10.5", + "@babel/generator": "^7.11.6", + "@babel/helper-module-transforms": "^7.11.0", "@babel/helpers": "^7.10.4", - "@babel/parser": "^7.10.5", + "@babel/parser": "^7.11.5", "@babel/template": "^7.10.4", - "@babel/traverse": "^7.10.5", - "@babel/types": "^7.10.5", + "@babel/traverse": "^7.11.5", + "@babel/types": "^7.11.5", "convert-source-map": "^1.7.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.1", @@ -2036,6 +2036,75 @@ "source-map": "^0.5.0" } }, + "@babel/generator": { + "version": "7.11.6", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.11.6.tgz", + "integrity": "sha512-DWtQ1PV3r+cLbySoHrwn9RWEgKMBLLma4OBQloPRyDYvc5msJM9kvTLo1YnlJd1P/ZuKbdli3ijr5q3FvAF3uA==", + "dev": true, + "requires": { + "@babel/types": "^7.11.5", + "jsesc": "^2.5.1", + "source-map": "^0.5.0" + } + }, + "@babel/helper-module-transforms": { + "version": "7.11.0", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.11.0.tgz", + "integrity": "sha512-02EVu8COMuTRO1TAzdMtpBPbe6aQ1w/8fePD2YgQmxZU4gpNWaL9gK3Jp7dxlkUlUCJOTaSeA+Hrm1BRQwqIhg==", + "dev": true, + "requires": { + "@babel/helper-module-imports": "^7.10.4", + "@babel/helper-replace-supers": "^7.10.4", + "@babel/helper-simple-access": "^7.10.4", + "@babel/helper-split-export-declaration": "^7.11.0", + "@babel/template": "^7.10.4", + "@babel/types": "^7.11.0", + "lodash": "^4.17.19" + } + }, + "@babel/helper-split-export-declaration": { + "version": "7.11.0", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.11.0.tgz", + "integrity": "sha512-74Vejvp6mHkGE+m+k5vHY93FX2cAtrw1zXrZXRlG4l410Nm9PxfEiVTn1PjDPV5SnmieiueY4AFg2xqhNFuuZg==", + "dev": true, + "requires": { + "@babel/types": "^7.11.0" + } + }, + "@babel/parser": { + "version": "7.11.5", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.5.tgz", + "integrity": "sha512-X9rD8qqm695vgmeaQ4fvz/o3+Wk4ZzQvSHkDBgpYKxpD4qTAUm88ZKtHkVqIOsYFFbIQ6wQYhC6q7pjqVK0E0Q==", + "dev": true + }, + "@babel/traverse": { + "version": "7.11.5", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.11.5.tgz", + "integrity": "sha512-EjiPXt+r7LiCZXEfRpSJd+jUMnBd4/9OUv7Nx3+0u9+eimMwJmG0Q98lw4/289JCoxSE8OolDMNZaaF/JZ69WQ==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.10.4", + "@babel/generator": "^7.11.5", + "@babel/helper-function-name": "^7.10.4", + "@babel/helper-split-export-declaration": "^7.11.0", + "@babel/parser": "^7.11.5", + "@babel/types": "^7.11.5", + "debug": "^4.1.0", + "globals": "^11.1.0", + "lodash": "^4.17.19" + } + }, + "@babel/types": { + "version": "7.11.5", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.5.tgz", + "integrity": "sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.10.4", + "lodash": "^4.17.19", + "to-fast-properties": "^2.0.0" + } + }, "semver": { "version": "5.7.1", "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", @@ -2045,15 +2114,15 @@ } }, "@mdx-js/react": { - "version": "1.6.16", - "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-1.6.16.tgz", - "integrity": "sha512-+FhuSVOPo7+4fZaRwWuCSRUcZkJOkZu0rfAbBKvoCg1LWb1Td8Vzi0DTLORdSvgWNbU6+EL40HIgwTOs00x2Jw==", + "version": "1.6.18", + "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-1.6.18.tgz", + "integrity": "sha512-aFHsZVu7r9WamlP+WO/lyvHHZAubkQjkcRYlvS7fQElypfJvjKdHevjC3xiqlsQpasx/4KqRMoEIb++wNtd+6w==", "dev": true }, "@mdx-js/util": { - "version": "1.6.16", - "resolved": "https://registry.npmjs.org/@mdx-js/util/-/util-1.6.16.tgz", - "integrity": "sha512-SFtLGIGZummuyMDPRL5KdmpgI8U19Ble28UjEWihPjGxF1Lgj8aDjLWY8KiaUy9eqb9CKiVCqEIrK9jbnANfkw==", + "version": "1.6.18", + "resolved": "https://registry.npmjs.org/@mdx-js/util/-/util-1.6.18.tgz", + "integrity": "sha512-axMe+NoLF55OlXPbhRn4GNCHcL1f5W3V3c0dWzg05S9JXm3Ecpxzxaht3g3vTP0dcqBL/yh/xCvzK0ZpO54Eug==", "dev": true }, "@mrmlnc/readdir-enhanced": { @@ -2185,17 +2254,17 @@ } }, "@storybook/addon-actions": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-6.0.21.tgz", - "integrity": "sha512-9y3ve+3GK1TsxQ5pxDjhB7E/XJXY+WqcSNlOX8Mb+XbS6AAgpFbkZCw1q8CGzyEUclHsQ6UK2+lo+IRGs4TLpA==", + "version": "6.0.22", + "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-6.0.22.tgz", + "integrity": "sha512-yP8BCxHscKhrXha0Z2nw+8OuFJDSCBAygju2HAr915g8+mAMIlpKmlPu6QOhwY9gP/Cn9HQCmrtPzuTeV2Ogug==", "dev": true, "requires": { - "@storybook/addons": "6.0.21", - "@storybook/api": "6.0.21", - "@storybook/client-api": "6.0.21", - "@storybook/components": "6.0.21", - "@storybook/core-events": "6.0.21", - "@storybook/theming": "6.0.21", + "@storybook/addons": "6.0.22", + "@storybook/api": "6.0.22", + "@storybook/client-api": "6.0.22", + "@storybook/components": "6.0.22", + "@storybook/core-events": "6.0.22", + "@storybook/theming": "6.0.22", "core-js": "^3.0.1", "fast-deep-equal": "^3.1.1", "global": "^4.3.2", @@ -2219,17 +2288,17 @@ } }, "@storybook/addon-backgrounds": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-6.0.21.tgz", - "integrity": "sha512-Ma13udL3txuJk6HSwqLWUyfshCV6biVdeBa9bxr5PtRtBiosrIGqWltAgGvQwhhbRiqcI5ZDKqZJlkNbywODsA==", + "version": "6.0.22", + "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-6.0.22.tgz", + "integrity": "sha512-O3cU/DYO2ORaOLWINGtgpQSqS4hbXGFs5AShjrsVjSt7+G7uF83zo8UttG6zcuEYlGXAPs6/Z7oNr3OWHth/RA==", "dev": true, "requires": { - "@storybook/addons": "6.0.21", - "@storybook/api": "6.0.21", - "@storybook/client-logger": "6.0.21", - "@storybook/components": "6.0.21", - "@storybook/core-events": "6.0.21", - "@storybook/theming": "6.0.21", + "@storybook/addons": "6.0.22", + "@storybook/api": "6.0.22", + "@storybook/client-logger": "6.0.22", + "@storybook/components": "6.0.22", + "@storybook/core-events": "6.0.22", + "@storybook/theming": "6.0.22", "core-js": "^3.0.1", "memoizerific": "^1.11.3", "react": "^16.8.3", @@ -2237,25 +2306,25 @@ } }, "@storybook/addon-controls": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-6.0.21.tgz", - "integrity": "sha512-ksL+BqzWVTezY3u0AeSuQBZdiDzTImfLx1xjmLkPTeFgfVBzHRKN4sqIWHzy1zVCCVL0fAzZ8g3Sgk5iVNs3uw==", + "version": "6.0.22", + "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-6.0.22.tgz", + "integrity": "sha512-14ZzkM0h88+wSuYmupYyRYJroe3MUfmayAcMuMAKbmDxu40mRKohB353JVtqK+71X4CqPX8HIu6rDam6pi7CEQ==", "dev": true, "requires": { - "@storybook/addons": "6.0.21", - "@storybook/api": "6.0.21", - "@storybook/client-api": "6.0.21", - "@storybook/components": "6.0.21", - "@storybook/node-logger": "6.0.21", - "@storybook/theming": "6.0.21", + "@storybook/addons": "6.0.22", + "@storybook/api": "6.0.22", + "@storybook/client-api": "6.0.22", + "@storybook/components": "6.0.22", + "@storybook/node-logger": "6.0.22", + "@storybook/theming": "6.0.22", "core-js": "^3.0.1", "ts-dedent": "^1.1.1" } }, "@storybook/addon-docs": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-6.0.21.tgz", - "integrity": "sha512-uvlNayXq2W0+LeYDf2hrll9I4fuVdrZZizhQPRiBuJDRuQ8EVP8R62tr1rjfbLdONngOy0k2C9QJgfL32Ohu7w==", + "version": "6.0.22", + "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-6.0.22.tgz", + "integrity": "sha512-/XhL0/6Cq8rT8AbBujoy3TeZXL/oIfTyhbhyq0a4+KQuvaov0SUAQ2movOu0k/WgRu0sHR9Eu3/Dcca2MGwQ8Q==", "dev": true, "requires": { "@babel/generator": "^7.9.6", @@ -2266,18 +2335,18 @@ "@mdx-js/loader": "^1.5.1", "@mdx-js/mdx": "^1.5.1", "@mdx-js/react": "^1.5.1", - "@storybook/addons": "6.0.21", - "@storybook/api": "6.0.21", - "@storybook/client-api": "6.0.21", - "@storybook/client-logger": "6.0.21", - "@storybook/components": "6.0.21", - "@storybook/core": "6.0.21", - "@storybook/core-events": "6.0.21", + "@storybook/addons": "6.0.22", + "@storybook/api": "6.0.22", + "@storybook/client-api": "6.0.22", + "@storybook/client-logger": "6.0.22", + "@storybook/components": "6.0.22", + "@storybook/core": "6.0.22", + "@storybook/core-events": "6.0.22", "@storybook/csf": "0.0.1", - "@storybook/node-logger": "6.0.21", - "@storybook/postinstall": "6.0.21", - "@storybook/source-loader": "6.0.21", - "@storybook/theming": "6.0.21", + "@storybook/node-logger": "6.0.22", + "@storybook/postinstall": "6.0.22", + "@storybook/source-loader": "6.0.22", + "@storybook/theming": "6.0.22", "acorn": "^7.1.0", "acorn-jsx": "^5.1.0", "acorn-walk": "^7.0.0", @@ -2344,9 +2413,9 @@ } }, "@types/yargs": { - "version": "15.0.5", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.5.tgz", - "integrity": "sha512-Dk/IDOPtOgubt/IaevIUbTgV7doaKkoorvOyYM2CMwuDyP89bekI7H4xLIwunNYiK9jhCkmc6pUrJk3cj2AB9w==", + "version": "15.0.7", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.7.tgz", + "integrity": "sha512-Gf4u3EjaPNcC9cTu4/j2oN14nSVhr8PQ+BvBcBQHAhDZfl0bVIiLgvnRXv/dn58XhTm9UXvBpvJpDlwV65QxOA==", "dev": true, "requires": { "@types/yargs-parser": "*" @@ -2599,36 +2668,36 @@ } }, "@storybook/addon-essentials": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-6.0.21.tgz", - "integrity": "sha512-5axeIvoglQ2lB2mAgrbqpbiGWl/pXe0/Nz7XrEPfl4e5gjXi5bli7yio/gt1TzXWOnNELX5PCZ9UuCz/Hjih4Q==", + "version": "6.0.22", + "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-6.0.22.tgz", + "integrity": "sha512-kncZNHjEgI7OLQRa8T7R6E+ZvKrI1ZaCeGN5bA+M+nYKBz9yyFfCIZkS40pXZ1ktInpcWqOfr8JRberi0CIUgw==", "dev": true, "requires": { - "@storybook/addon-actions": "6.0.21", - "@storybook/addon-backgrounds": "6.0.21", - "@storybook/addon-controls": "6.0.21", - "@storybook/addon-docs": "6.0.21", - "@storybook/addon-toolbars": "6.0.21", - "@storybook/addon-viewport": "6.0.21", - "@storybook/addons": "6.0.21", - "@storybook/api": "6.0.21", - "@storybook/node-logger": "6.0.21", + "@storybook/addon-actions": "6.0.22", + "@storybook/addon-backgrounds": "6.0.22", + "@storybook/addon-controls": "6.0.22", + "@storybook/addon-docs": "6.0.22", + "@storybook/addon-toolbars": "6.0.22", + "@storybook/addon-viewport": "6.0.22", + "@storybook/addons": "6.0.22", + "@storybook/api": "6.0.22", + "@storybook/node-logger": "6.0.22", "core-js": "^3.0.1", "regenerator-runtime": "^0.13.3", "ts-dedent": "^1.1.1" } }, "@storybook/addon-links": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-6.0.21.tgz", - "integrity": "sha512-5cRFxXS9BviDbS+DCKElr1vSafDcRhX74iIAWl/yOBUldUZvR+gX3WOZ7bO+OBSlQ1NJkt1NUAMag3aiJa4UUw==", + "version": "6.0.22", + "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-6.0.22.tgz", + "integrity": "sha512-1zD2RxNcwTnPJM4650UvIUTHsoCYbo6iy6VWpzxrK8LHEst0/DZ+XQOYxH8Yy8fyMQTJzOMlTqnlhvM5skOdjQ==", "dev": true, "requires": { - "@storybook/addons": "6.0.21", - "@storybook/client-logger": "6.0.21", - "@storybook/core-events": "6.0.21", + "@storybook/addons": "6.0.22", + "@storybook/client-logger": "6.0.22", + "@storybook/core-events": "6.0.22", "@storybook/csf": "0.0.1", - "@storybook/router": "6.0.21", + "@storybook/router": "6.0.22", "@types/qs": "^6.9.0", "core-js": "^3.0.1", "global": "^4.3.2", @@ -2647,15 +2716,15 @@ } }, "@storybook/addon-storyshots": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@storybook/addon-storyshots/-/addon-storyshots-6.0.21.tgz", - "integrity": "sha512-nWJlJ5uAUrnO2PLrsTKsLRbqXODH/9I7MaIRDFGgho3prqd8H7W5jksP0XCxa/SDRgmY3jJ+R1qCVnsRZV/Bow==", + "version": "6.0.22", + "resolved": "https://registry.npmjs.org/@storybook/addon-storyshots/-/addon-storyshots-6.0.22.tgz", + "integrity": "sha512-l4h5OTwbORwdi2GxAOzCF3avmGwbxdJFmXgagzq74iHooCE/H7FF3VfY1vu3ZXWz5LTqe5INNJyfhwHxocntpg==", "dev": true, "requires": { "@jest/transform": "^26.0.0", - "@storybook/addons": "6.0.21", - "@storybook/client-api": "6.0.21", - "@storybook/core": "6.0.21", + "@storybook/addons": "6.0.22", + "@storybook/client-api": "6.0.22", + "@storybook/core": "6.0.22", "@types/glob": "^7.1.1", "@types/jest": "^25.1.1", "@types/jest-specific-snapshot": "^0.5.3", @@ -2772,9 +2841,9 @@ } }, "@types/yargs": { - "version": "15.0.5", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.5.tgz", - "integrity": "sha512-Dk/IDOPtOgubt/IaevIUbTgV7doaKkoorvOyYM2CMwuDyP89bekI7H4xLIwunNYiK9jhCkmc6pUrJk3cj2AB9w==", + "version": "15.0.7", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.7.tgz", + "integrity": "sha512-Gf4u3EjaPNcC9cTu4/j2oN14nSVhr8PQ+BvBcBQHAhDZfl0bVIiLgvnRXv/dn58XhTm9UXvBpvJpDlwV65QxOA==", "dev": true, "requires": { "@types/yargs-parser": "*" @@ -3180,30 +3249,30 @@ } }, "@storybook/addon-toolbars": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-6.0.21.tgz", - "integrity": "sha512-bmPXQZ8LL/jP6SGfSmOs7P3hNJsTLKkJRwRlmki6MqRzBfjlNWD4Zo9l+9Yw99nhpa6/xZ3vHxv7pgBoNPvLZw==", + "version": "6.0.22", + "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-6.0.22.tgz", + "integrity": "sha512-s008Dug6xIvekaTgLCMCXI5PB2C5mdGRbZRqaBvoy5DVG7HXgJT6i8F7YDtAJDuOgqBeeLUjy4j8/5GCF8vGmw==", "dev": true, "requires": { - "@storybook/addons": "6.0.21", - "@storybook/api": "6.0.21", - "@storybook/client-api": "6.0.21", - "@storybook/components": "6.0.21", + "@storybook/addons": "6.0.22", + "@storybook/api": "6.0.22", + "@storybook/client-api": "6.0.22", + "@storybook/components": "6.0.22", "core-js": "^3.0.1" } }, "@storybook/addon-viewport": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-6.0.21.tgz", - "integrity": "sha512-FFUkhpZy7npRTaqX9SwMz5Yzo0/ivuApwr47xqblDEEyq7edWqo7YKsPnpAGeM9MlRpQNf6aU9huwDqKeRfKuQ==", + "version": "6.0.22", + "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-6.0.22.tgz", + "integrity": "sha512-Liqa+dBNLuuS4lbUFNFEcFxWLGSIcvQ8mJqbk+TOqic/Tv3R234l+EY3BlHQrzrM6YjPii/wjYj666lEwrW2dA==", "dev": true, "requires": { - "@storybook/addons": "6.0.21", - "@storybook/api": "6.0.21", - "@storybook/client-logger": "6.0.21", - "@storybook/components": "6.0.21", - "@storybook/core-events": "6.0.21", - "@storybook/theming": "6.0.21", + "@storybook/addons": "6.0.22", + "@storybook/api": "6.0.22", + "@storybook/client-logger": "6.0.22", + "@storybook/components": "6.0.22", + "@storybook/core-events": "6.0.22", + "@storybook/theming": "6.0.22", "core-js": "^3.0.1", "global": "^4.3.2", "memoizerific": "^1.11.3", @@ -3212,36 +3281,36 @@ } }, "@storybook/addons": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.0.21.tgz", - "integrity": "sha512-yDttNLc3vXqBxwK795ykgzTC6MpvuXDQuF4LHSlHZQe6wsMu1m3fljnbYdafJWdx6cNZwUblU3KYcR11PqhkPg==", + "version": "6.0.22", + "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.0.22.tgz", + "integrity": "sha512-D7GfOZ16DAyIUoNXY/aisKlXxHlk61XDIAvN102n/GGrmiNQhCKO2cuwjrmpqQGIXW/+QAsc0YUUAptEKpw9vw==", "dev": true, "requires": { - "@storybook/api": "6.0.21", - "@storybook/channels": "6.0.21", - "@storybook/client-logger": "6.0.21", - "@storybook/core-events": "6.0.21", - "@storybook/router": "6.0.21", - "@storybook/theming": "6.0.21", + "@storybook/api": "6.0.22", + "@storybook/channels": "6.0.22", + "@storybook/client-logger": "6.0.22", + "@storybook/core-events": "6.0.22", + "@storybook/router": "6.0.22", + "@storybook/theming": "6.0.22", "core-js": "^3.0.1", "global": "^4.3.2", "regenerator-runtime": "^0.13.3" } }, "@storybook/api": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@storybook/api/-/api-6.0.21.tgz", - "integrity": "sha512-cRRGf/KGFwYiDouTouEcDdp45N1AbYnAfvLqYZ3KuUTGZ+CiU/PN/vavkp07DQeM4FIQO8TLhzHdsLFpLT7Lkw==", + "version": "6.0.22", + "resolved": "https://registry.npmjs.org/@storybook/api/-/api-6.0.22.tgz", + "integrity": "sha512-GfGRXAe0h5cFTwJUJ7XqhaaE4+aXk/f+QCWfuUQkipUsGhGL+KLY80OU5cqC7LDB2nbhZ2bKUaLCzXu1Qsw5pw==", "dev": true, "requires": { "@reach/router": "^1.3.3", - "@storybook/channels": "6.0.21", - "@storybook/client-logger": "6.0.21", - "@storybook/core-events": "6.0.21", + "@storybook/channels": "6.0.22", + "@storybook/client-logger": "6.0.22", + "@storybook/core-events": "6.0.22", "@storybook/csf": "0.0.1", - "@storybook/router": "6.0.21", + "@storybook/router": "6.0.22", "@storybook/semver": "^7.3.2", - "@storybook/theming": "6.0.21", + "@storybook/theming": "6.0.22", "@types/reach__router": "^1.3.5", "core-js": "^3.0.1", "fast-deep-equal": "^3.1.1", @@ -3303,14 +3372,14 @@ } }, "@storybook/channel-postmessage": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-6.0.21.tgz", - "integrity": "sha512-ArRnoaS+b7qpAku/SO27z/yjRDCXb37mCPYGX0ntPbiQajootUbGO7otfnjFkaP44hCEC9uDYlOfMU1hYU1N6A==", + "version": "6.0.22", + "resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-6.0.22.tgz", + "integrity": "sha512-Upa2rG9H65MPdVxT9pNeDL9VlX5VeP7bpvR/TTEf2cRCiq6SC93pAs45XPWBcD8Jhq3p5+uFDARKReb2iF49+w==", "dev": true, "requires": { - "@storybook/channels": "6.0.21", - "@storybook/client-logger": "6.0.21", - "@storybook/core-events": "6.0.21", + "@storybook/channels": "6.0.22", + "@storybook/client-logger": "6.0.22", + "@storybook/core-events": "6.0.22", "core-js": "^3.0.1", "global": "^4.3.2", "qs": "^6.6.0", @@ -3326,9 +3395,9 @@ } }, "@storybook/channels": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.0.21.tgz", - "integrity": "sha512-G6gjcEotSwDmOlxSmOMgsO3VhQ42RLJK7kFp6D5eg0Q6S8vsypltdT8orxdu+6+AbcBrL+5Sla8lThzaCvXsVQ==", + "version": "6.0.22", + "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.0.22.tgz", + "integrity": "sha512-d/RlPFDq9NXA/Y3CVDsSVsWgvYiiiifxQN9hz5+y3T6MnRJPEfAPWYkbv+wLixWbDF2ULzjQHp4zcfTm6T7A4w==", "dev": true, "requires": { "core-js": "^3.0.1", @@ -3337,16 +3406,16 @@ } }, "@storybook/client-api": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-6.0.21.tgz", - "integrity": "sha512-emBXd/ml6pc3G8gP3MsR9zQsAq1zZbqof9MxB51tG/jpTXdqWQ8ce1pt1tJS8Xj0QDM072jR6wsY+mmro0GZnA==", + "version": "6.0.22", + "resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-6.0.22.tgz", + "integrity": "sha512-GP9m1LW3C79EJxTGToCvBZDEApMRCl9tVXGfB9yEB0dIFC9jTwsPfpwjnhh2Imp9xJjszahSqxkhv4rAZ8C44Q==", "dev": true, "requires": { - "@storybook/addons": "6.0.21", - "@storybook/channel-postmessage": "6.0.21", - "@storybook/channels": "6.0.21", - "@storybook/client-logger": "6.0.21", - "@storybook/core-events": "6.0.21", + "@storybook/addons": "6.0.22", + "@storybook/channel-postmessage": "6.0.22", + "@storybook/channels": "6.0.22", + "@storybook/client-logger": "6.0.22", + "@storybook/core-events": "6.0.22", "@storybook/csf": "0.0.1", "@types/qs": "^6.9.0", "@types/webpack-env": "^1.15.2", @@ -3370,9 +3439,9 @@ } }, "@storybook/client-logger": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.0.21.tgz", - "integrity": "sha512-8aUEbhjXV+UMYQWukVYnp+kZafF+LD4Dm7eMo37IUZvt3VIjV1VvhxIDVJtqjk2vv0KZTepESFBkZQLmBzI9Zg==", + "version": "6.0.22", + "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.0.22.tgz", + "integrity": "sha512-AQD2Zz7BIIwrP0/sNZMXgP/BEZo5qK1YPDl2mPppSJdFocVCYDlc6HgYPZZHtPvD5BVWAENg2NQoGBOivuMl3g==", "dev": true, "requires": { "core-js": "^3.0.1", @@ -3380,14 +3449,14 @@ } }, "@storybook/components": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@storybook/components/-/components-6.0.21.tgz", - "integrity": "sha512-r6btqFW/rcXIU5v231EifZfdh9O0fy7bJDXwwDf8zVUgLx8JRc0VnSs3nvK3Is9HF1wZ9vjx/7Lh4rTIDZAjgg==", + "version": "6.0.22", + "resolved": "https://registry.npmjs.org/@storybook/components/-/components-6.0.22.tgz", + "integrity": "sha512-sc7O4djNLajyJdVY4dUSO73L/+VM8IyzYKK9c5kSw4pN+l6M3EUBi4Zt/jdQc+WxSBmmriSe7aBOKrOSxBBSiA==", "dev": true, "requires": { - "@storybook/client-logger": "6.0.21", + "@storybook/client-logger": "6.0.22", "@storybook/csf": "0.0.1", - "@storybook/theming": "6.0.21", + "@storybook/theming": "6.0.22", "@types/overlayscrollbars": "^1.9.0", "@types/react-color": "^3.0.1", "@types/react-syntax-highlighter": "11.0.4", @@ -3410,9 +3479,9 @@ } }, "@storybook/core": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@storybook/core/-/core-6.0.21.tgz", - "integrity": "sha512-/Et5NLabB12dnuPdhHDA/Q1pj0Mm2DGdL3KiLO4IC2VZeICCLGmU3/EGJBgjLK+anQ59pkclOiQ8i9eMXFiJ6A==", + "version": "6.0.22", + "resolved": "https://registry.npmjs.org/@storybook/core/-/core-6.0.22.tgz", + "integrity": "sha512-VgzybAKw5Jd5HzpVukvKLj2ScZ8bzJAvhoFAab3zegNyk1bK+qUK8vYDWP5dzaINvW63zA/D5kyjfZP8T9EofQ==", "dev": true, "requires": { "@babel/plugin-proposal-class-properties": "^7.8.3", @@ -3436,20 +3505,20 @@ "@babel/preset-react": "^7.8.3", "@babel/preset-typescript": "^7.9.0", "@babel/register": "^7.10.5", - "@storybook/addons": "6.0.21", - "@storybook/api": "6.0.21", - "@storybook/channel-postmessage": "6.0.21", - "@storybook/channels": "6.0.21", - "@storybook/client-api": "6.0.21", - "@storybook/client-logger": "6.0.21", - "@storybook/components": "6.0.21", - "@storybook/core-events": "6.0.21", + "@storybook/addons": "6.0.22", + "@storybook/api": "6.0.22", + "@storybook/channel-postmessage": "6.0.22", + "@storybook/channels": "6.0.22", + "@storybook/client-api": "6.0.22", + "@storybook/client-logger": "6.0.22", + "@storybook/components": "6.0.22", + "@storybook/core-events": "6.0.22", "@storybook/csf": "0.0.1", - "@storybook/node-logger": "6.0.21", - "@storybook/router": "6.0.21", + "@storybook/node-logger": "6.0.22", + "@storybook/router": "6.0.22", "@storybook/semver": "^7.3.2", - "@storybook/theming": "6.0.21", - "@storybook/ui": "6.0.21", + "@storybook/theming": "6.0.22", + "@storybook/ui": "6.0.22", "@types/glob-base": "^0.3.0", "@types/micromatch": "^4.0.1", "@types/node-fetch": "^2.5.4", @@ -3706,9 +3775,9 @@ "dev": true }, "ajv": { - "version": "6.12.4", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.4.tgz", - "integrity": "sha512-eienB2c9qVQs2KWexhkrdMLVDoIQCz5KSeLxwg9Lzk4DOfBtIK9PQwwufcsn1jjGuf9WZmqPMbGxOzfcuphJCQ==", + "version": "6.12.5", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.5.tgz", + "integrity": "sha512-lRF8RORchjpKG50/WFf8xmg7sgCLFiYNNnqdKflk63whMQcWR5ngGjiSXkL9bjxy6B2npOK2HSMN49jEBMSkag==", "dev": true, "requires": { "fast-deep-equal": "^3.1.1", @@ -3997,9 +4066,9 @@ "dev": true }, "html-webpack-plugin": { - "version": "4.4.1", - "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-4.4.1.tgz", - "integrity": "sha512-nEtdEIsIGXdXGG7MjTTZlmhqhpHU9pJFc1OYxcP36c5/ZKP6b0BJMww2QTvJGQYA9aMxUnjDujpZdYcVOXiBCQ==", + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-4.5.0.tgz", + "integrity": "sha512-MouoXEYSjTzCrjIxWwg8gxL5fE2X2WZJLmBYXlaJhQUH5K/b5OrqmV7T4dB7iu0xkmJ6JlUuV6fFVtnqbPopZw==", "dev": true, "requires": { "@types/html-minifier-terser": "^5.0.0", @@ -4210,9 +4279,9 @@ } }, "webpack": { - "version": "4.44.1", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.44.1.tgz", - "integrity": "sha512-4UOGAohv/VGUNQJstzEywwNxqX417FnjZgZJpJQegddzPmTvph37eBIRbRTfdySXzVtJXLJfbMN3mMYhM6GdmQ==", + "version": "4.44.2", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.44.2.tgz", + "integrity": "sha512-6KJVGlCxYdISyurpQ0IPTklv+DULv05rs2hseIXer6D7KrUicRDLFb4IUM1S6LUAKypPM/nSiVSuv8jHu1m3/Q==", "dev": true, "requires": { "@webassemblyjs/ast": "1.9.0", @@ -4294,9 +4363,9 @@ } }, "@storybook/core-events": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.0.21.tgz", - "integrity": "sha512-p84fbPcsAhnqDhp+HJ4P8+vI2BqJus4IRoVAemLAwuPjyPElrV9UvOa/RHy1BN8Z6jXwFA+FFzfGl2kPJ3WYcA==", + "version": "6.0.22", + "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.0.22.tgz", + "integrity": "sha512-XQplzZwC9o4OQbKPjBruIOSFGto6qtmIAuh94NaHB6Hpv8YpsDwy1fXxEr990fj/5bOXmL4YV3x1AD6fOK/1sA==", "dev": true, "requires": { "core-js": "^3.0.1" @@ -4312,9 +4381,9 @@ } }, "@storybook/node-logger": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-6.0.21.tgz", - "integrity": "sha512-KRBf+Fz7fgtwHdnYt70JTZbcYMZ1pQPtDyqbrFYCjwkbx5GPX5vMOozlxCIj9elseqPIsF8CKgHOW7cFHVyWYw==", + "version": "6.0.22", + "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-6.0.22.tgz", + "integrity": "sha512-H5j0zjMmg6o+wQgiY1GWlgz6cciHJN5vw7/B/hUksMHOwc+30nrGa89dDouj2ze1vJfiY3AaOMrsgtuMYFXaHQ==", "dev": true, "requires": { "@types/npmlog": "^4.1.2", @@ -4377,9 +4446,9 @@ } }, "@storybook/postinstall": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@storybook/postinstall/-/postinstall-6.0.21.tgz", - "integrity": "sha512-DnfMD332J6J/0bx75rE5i3LvlPFGosmkUz1N2opfFV5RQt3gCKVYjm9oAyFpqm1pKx0Hnzhij93QjlTABHWq0w==", + "version": "6.0.22", + "resolved": "https://registry.npmjs.org/@storybook/postinstall/-/postinstall-6.0.22.tgz", + "integrity": "sha512-7ttH4GXLBnVyk0+BEQo79jBLp9wN+52atRIaqNxrefiCa24wWc9o/Cj/MZigheOYDYYXCCFFhjHp+IOtQaEiEw==", "dev": true, "requires": { "core-js": "^3.0.1" @@ -4408,16 +4477,16 @@ } }, "@storybook/react": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@storybook/react/-/react-6.0.21.tgz", - "integrity": "sha512-L3PcoBJq5aK1aTaJNfwsSJ8Kxgcyk0WknN4TDqhP7a+oXmuMY1YEi96hEvQVIm0TBCkQxs61K70/T7vlilEtHg==", + "version": "6.0.22", + "resolved": "https://registry.npmjs.org/@storybook/react/-/react-6.0.22.tgz", + "integrity": "sha512-sErMo8+KxuELTbx4VboAYEsgDEXXio1Tqmp1jfLoUhXIvQtcfbT9DrtwOoR4mixf7LwISuLikorTyOL+Z6Vg3g==", "dev": true, "requires": { "@babel/preset-flow": "^7.0.0", "@babel/preset-react": "^7.0.0", - "@storybook/addons": "6.0.21", - "@storybook/core": "6.0.21", - "@storybook/node-logger": "6.0.21", + "@storybook/addons": "6.0.22", + "@storybook/core": "6.0.22", + "@storybook/node-logger": "6.0.22", "@storybook/semver": "^7.3.2", "@svgr/webpack": "^5.4.0", "@types/webpack-env": "^1.15.2", @@ -4924,9 +4993,9 @@ } }, "webpack": { - "version": "4.44.1", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.44.1.tgz", - "integrity": "sha512-4UOGAohv/VGUNQJstzEywwNxqX417FnjZgZJpJQegddzPmTvph37eBIRbRTfdySXzVtJXLJfbMN3mMYhM6GdmQ==", + "version": "4.44.2", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.44.2.tgz", + "integrity": "sha512-6KJVGlCxYdISyurpQ0IPTklv+DULv05rs2hseIXer6D7KrUicRDLFb4IUM1S6LUAKypPM/nSiVSuv8jHu1m3/Q==", "dev": true, "requires": { "@webassemblyjs/ast": "1.9.0", @@ -4979,9 +5048,9 @@ } }, "@storybook/router": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.0.21.tgz", - "integrity": "sha512-46SsKJfcd12lRrISnfrWhicJx8EylkgGDGohfH0n5p7inkkGOkKV8QFZoYPRKZueMXmUKpzJ0Z3HmVsLTCrCDw==", + "version": "6.0.22", + "resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.0.22.tgz", + "integrity": "sha512-Gu3PmWXaDDhDqTY/S8/ag2OCdTb0S+aD/QkXvQzSht5gt5d8M2tQxBlhXDVFNhYGRz7zQtjRmTxqT/3YX9tjrg==", "dev": true, "requires": { "@reach/router": "^1.3.3", @@ -5001,13 +5070,13 @@ } }, "@storybook/source-loader": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@storybook/source-loader/-/source-loader-6.0.21.tgz", - "integrity": "sha512-Duzpz8udadR7wzH8/4F3GnMRe23oBOxTm4jBZw/T8NA+HqBtd9Y16swWw4BfwsRwfdZS4EVw3PtWgsAfoqF7ow==", + "version": "6.0.22", + "resolved": "https://registry.npmjs.org/@storybook/source-loader/-/source-loader-6.0.22.tgz", + "integrity": "sha512-PqtNZgcD/EEoBffftls2OsU8gF2Ioub/0Zxw8tVJOTQT2J6JB6eXkWtJQVBlRwtZdtAQStlZKKWeZeqt6pkFlQ==", "dev": true, "requires": { - "@storybook/addons": "6.0.21", - "@storybook/client-logger": "6.0.21", + "@storybook/addons": "6.0.22", + "@storybook/client-logger": "6.0.22", "@storybook/csf": "0.0.1", "core-js": "^3.0.1", "estraverse": "^4.2.0", @@ -5032,15 +5101,15 @@ } }, "@storybook/theming": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.0.21.tgz", - "integrity": "sha512-n97DfB9kG6WrV1xBGDyeQibTrh8pBBCp3dSL3UTGH+KX3C2+4sm6QHlTgyekbi5FrbFEbnuZOKAS3YbLVONsRQ==", + "version": "6.0.22", + "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.0.22.tgz", + "integrity": "sha512-aR11z70vq0G+F61PIJHW1Kt1lmA2vYxGWF1TL6rsECXNt4fN+X9ig082G0Uhag0mV/FJZdKhhpv360paJFYF2g==", "dev": true, "requires": { "@emotion/core": "^10.0.20", "@emotion/is-prop-valid": "^0.8.6", "@emotion/styled": "^10.0.17", - "@storybook/client-logger": "6.0.21", + "@storybook/client-logger": "6.0.22", "core-js": "^3.0.1", "deep-object-diff": "^1.1.0", "emotion-theming": "^10.0.19", @@ -5060,21 +5129,21 @@ } }, "@storybook/ui": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@storybook/ui/-/ui-6.0.21.tgz", - "integrity": "sha512-50QYF8tHUgpVq7B7PWp7kmyf79NySWJO0piQFjHv027vV8GfbXMWVswAXwo3IfCihPlnLKe01WbsigM/9T1HCQ==", + "version": "6.0.22", + "resolved": "https://registry.npmjs.org/@storybook/ui/-/ui-6.0.22.tgz", + "integrity": "sha512-iueyQ3EnLHhbV6xWQWMoN1aenEh3jLAXFmabxrf1s/l0JKn0u6qr7BHZcu3VZJ4EJCEsh6wDFNWjaUbTpfDU5g==", "dev": true, "requires": { "@emotion/core": "^10.0.20", - "@storybook/addons": "6.0.21", - "@storybook/api": "6.0.21", - "@storybook/channels": "6.0.21", - "@storybook/client-logger": "6.0.21", - "@storybook/components": "6.0.21", - "@storybook/core-events": "6.0.21", - "@storybook/router": "6.0.21", + "@storybook/addons": "6.0.22", + "@storybook/api": "6.0.22", + "@storybook/channels": "6.0.22", + "@storybook/client-logger": "6.0.22", + "@storybook/components": "6.0.22", + "@storybook/core-events": "6.0.22", + "@storybook/router": "6.0.22", "@storybook/semver": "^7.3.2", - "@storybook/theming": "6.0.21", + "@storybook/theming": "6.0.22", "@types/markdown-to-jsx": "^6.11.0", "copy-to-clipboard": "^3.0.8", "core-js": "^3.0.1", @@ -5743,15 +5812,15 @@ } }, "@types/history": { - "version": "4.7.7", - "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.7.tgz", - "integrity": "sha512-2xtoL22/3Mv6a70i4+4RB7VgbDDORoWwjcqeNysojZA0R7NK17RbY5Gof/2QiFfJgX+KkWghbwJ+d/2SB8Ndzg==", + "version": "4.7.8", + "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.8.tgz", + "integrity": "sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA==", "dev": true }, "@types/html-minifier-terser": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.0.tgz", - "integrity": "sha512-iYCgjm1dGPRuo12+BStjd1HiVQqhlRhWDOQigNxn023HcjnhsiFz9pc6CzJj4HwDCSQca9bxTL4PxJDbkdm3PA==", + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz", + "integrity": "sha512-giAlZwstKbmvMk1OO7WXSj4OZ0keXAcl2TQq4LWHiiPH2ByaH7WeUzng+Qej8UPxxv+8lRTuouo0iaNDBuzIBA==", "dev": true }, "@types/is-function": { @@ -5922,15 +5991,15 @@ "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==" }, "@types/qs": { - "version": "6.9.4", - "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.4.tgz", - "integrity": "sha512-+wYo+L6ZF6BMoEjtf8zB2esQsqdV6WsjRK/GP9WOgLPrq87PbNWgIxS76dS5uvl/QXtHGakZmwTznIfcPXcKlQ==", + "version": "6.9.5", + "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.5.tgz", + "integrity": "sha512-/JHkVHtx/REVG0VVToGRGH2+23hsYLHdyG+GrvoUGlGAd0ErauXDyvHtRI/7H7mzLm+tBCKA7pfcpkQ1lf58iQ==", "dev": true }, "@types/reach__router": { - "version": "1.3.5", - "resolved": "https://registry.npmjs.org/@types/reach__router/-/reach__router-1.3.5.tgz", - "integrity": "sha512-h0NbqXN/tJuBY/xggZSej1SKQEstbHO7J/omt1tYoFGmj3YXOodZKbbqD4mNDh7zvEGYd7YFrac1LTtAr3xsYQ==", + "version": "1.3.6", + "resolved": "https://registry.npmjs.org/@types/reach__router/-/reach__router-1.3.6.tgz", + "integrity": "sha512-RHYataCUPQnt+GHoASyRLq6wmZ0n8jWlBW8Lxcwd30NN6vQfbmTeoSDfkgxO0S1lEzArp8OFDsq5KIs7FygjtA==", "dev": true, "requires": { "@types/history": "*", @@ -6155,9 +6224,9 @@ } }, "@types/webpack-env": { - "version": "1.15.2", - "resolved": "https://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.15.2.tgz", - "integrity": "sha512-67ZgZpAlhIICIdfQrB5fnDvaKFcDxpKibxznfYRVAT4mQE41Dido/3Ty+E3xGBmTogc5+0Qb8tWhna+5B8z1iQ==", + "version": "1.15.3", + "resolved": "https://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.15.3.tgz", + "integrity": "sha512-5oiXqR7kwDGZ6+gmzIO2lTC+QsriNuQXZDWNYRV3l2XRN/zmPgnC21DLSx2D05zvD8vnXW6qUg7JnXZ4I6qLVQ==", "dev": true }, "@types/webpack-sources": { @@ -7430,13 +7499,13 @@ "dev": true }, "babel-plugin-apply-mdx-type-prop": { - "version": "1.6.16", - "resolved": "https://registry.npmjs.org/babel-plugin-apply-mdx-type-prop/-/babel-plugin-apply-mdx-type-prop-1.6.16.tgz", - "integrity": "sha512-hjUd24Yhnr5NKtHpC2mcRBGjC6RUKGzSzjN9g5SdjT4WpL/JDlpmjyBf7vWsJJSXFvMIbzRyxF4lT9ukwOnj/w==", + "version": "1.6.18", + "resolved": "https://registry.npmjs.org/babel-plugin-apply-mdx-type-prop/-/babel-plugin-apply-mdx-type-prop-1.6.18.tgz", + "integrity": "sha512-lcpbj/GatKQp48jsJ8Os/ZXv381ZYFNKA27EPllcpFMpqiS696XkoK+xie/2GjzQSe5IIbo3srsXpd6/ik8PsQ==", "dev": true, "requires": { "@babel/helper-plugin-utils": "7.10.4", - "@mdx-js/util": "1.6.16" + "@mdx-js/util": "1.6.18" } }, "babel-plugin-dynamic-import-node": { @@ -7466,9 +7535,9 @@ } }, "babel-plugin-extract-import-names": { - "version": "1.6.16", - "resolved": "https://registry.npmjs.org/babel-plugin-extract-import-names/-/babel-plugin-extract-import-names-1.6.16.tgz", - "integrity": "sha512-Da6Ra0sbA/1Iavli8LdMbTjyrsOPaxMm4lrKl8VJN4sJI5F64qy2EpLj3+5INLvNPfW4ddwpStbfP3Rf3jIgcw==", + "version": "1.6.18", + "resolved": "https://registry.npmjs.org/babel-plugin-extract-import-names/-/babel-plugin-extract-import-names-1.6.18.tgz", + "integrity": "sha512-2EyZia3Ezl3UdhBcgDl6KZTNkYa2VhmAHHbJdhCroa1pZD/E56BulVsSKIhm/kza9agnabDR2VEHO+ZnqpfxbQ==", "dev": true, "requires": { "@babel/helper-plugin-utils": "7.10.4" @@ -14272,9 +14341,9 @@ "dev": true }, "hast-util-raw": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/hast-util-raw/-/hast-util-raw-6.0.0.tgz", - "integrity": "sha512-IQo6tv3bMMKxk53DljswliucCJOQxaZFCuKEJ7X80249dmJ1nA9LtOnnylsLlqTG98NjQ+iGcoLAYo9q5FRhRg==", + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/hast-util-raw/-/hast-util-raw-6.0.1.tgz", + "integrity": "sha512-ZMuiYA+UF7BXBtsTBNcLBF5HzXzkyE6MLzJnL605LKE8GJylNjGc4jjxazAHUtcwT5/CEt6afRKViYB4X66dig==", "dev": true, "requires": { "@types/hast": "^2.0.0", @@ -15782,15 +15851,15 @@ } }, "@types/prettier": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.1.0.tgz", - "integrity": "sha512-hiYA88aHiEIgDmeKlsyVsuQdcFn3Z2VuFd/Xm/HCnGnPD8UFU5BM128uzzRVVGEzKDKYUrRsRH9S2o+NUy/3IA==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.1.1.tgz", + "integrity": "sha512-2zs+O+UkDsJ1Vcp667pd3f8xearMdopz/z54i99wtRDI5KLmngk7vlrYZD0ZjKHaROR03EznlBbVY9PfAEyJIQ==", "dev": true }, "@types/yargs": { - "version": "15.0.5", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.5.tgz", - "integrity": "sha512-Dk/IDOPtOgubt/IaevIUbTgV7doaKkoorvOyYM2CMwuDyP89bekI7H4xLIwunNYiK9jhCkmc6pUrJk3cj2AB9w==", + "version": "15.0.7", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.7.tgz", + "integrity": "sha512-Gf4u3EjaPNcC9cTu4/j2oN14nSVhr8PQ+BvBcBQHAhDZfl0bVIiLgvnRXv/dn58XhTm9UXvBpvJpDlwV65QxOA==", "dev": true, "requires": { "@types/yargs-parser": "*" @@ -17350,18 +17419,15 @@ } }, "mdast-util-to-hast": { - "version": "9.1.0", - "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-9.1.0.tgz", - "integrity": "sha512-Akl2Vi9y9cSdr19/Dfu58PVwifPXuFt1IrHe7l+Crme1KvgUT+5z+cHLVcQVGCiNTZZcdqjnuv9vPkGsqWytWA==", + "version": "9.1.1", + "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-9.1.1.tgz", + "integrity": "sha512-vpMWKFKM2mnle+YbNgDXxx95vv0CoLU0v/l3F5oFAG5DV7qwkZVWA206LsAdOnEVyf5vQcLnb3cWJywu7mUxsQ==", "dev": true, "requires": { "@types/mdast": "^3.0.0", "@types/unist": "^2.0.3", - "collapse-white-space": "^1.0.0", - "detab": "^2.0.0", "mdast-util-definitions": "^3.0.0", "mdurl": "^1.0.0", - "trim-lines": "^1.0.0", "unist-builder": "^2.0.0", "unist-util-generated": "^1.0.0", "unist-util-position": "^3.0.0", @@ -18804,9 +18870,9 @@ } }, "polished": { - "version": "3.6.6", - "resolved": "https://registry.npmjs.org/polished/-/polished-3.6.6.tgz", - "integrity": "sha512-yiB2ims2DZPem0kCD6V0wnhcVGFEhNh0Iw0axNpKU+oSAgFt6yx6HxIT23Qg0WWvgS379cS35zT4AOyZZRzpQQ==", + "version": "3.6.7", + "resolved": "https://registry.npmjs.org/polished/-/polished-3.6.7.tgz", + "integrity": "sha512-b4OViUOihwV0icb9PHmWbR+vPqaSzSAEbgLskvb7ANPATVXGiYv/TQFHQo65S53WU9i5EQ1I03YDOJW7K0bmYg==", "dev": true, "requires": { "@babel/runtime": "^7.9.2" @@ -21058,16 +21124,27 @@ "dev": true }, "react-helmet-async": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-1.0.6.tgz", - "integrity": "sha512-t+bhAI4NgxfEv8ez4r77cLfR4O4Z55E/FH2DT+uiE4U7yfWgAk7OAOi7IxHxuYEVLI26bqjZvlVCkpC5/5AoNA==", + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-1.0.7.tgz", + "integrity": "sha512-By90p5uxAriGukbyejq2poK41DwTxpNWOpOjN8mIyX/BKrCd3+sXZ5pHUZXjHyjR5OYS7PGsOD9dbM61YxfFmA==", "dev": true, "requires": { - "@babel/runtime": "^7.9.2", + "@babel/runtime": "^7.11.2", "invariant": "^2.2.4", "prop-types": "^15.7.2", - "react-fast-compare": "^3.0.1", + "react-fast-compare": "^3.2.0", "shallowequal": "^1.1.0" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.11.2", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.2.tgz", + "integrity": "sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==", + "dev": true, + "requires": { + "regenerator-runtime": "^0.13.4" + } + } } }, "react-hook-form": { @@ -21688,41 +21765,41 @@ } }, "remark-footnotes": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/remark-footnotes/-/remark-footnotes-1.0.0.tgz", - "integrity": "sha512-X9Ncj4cj3/CIvLI2Z9IobHtVi8FVdUrdJkCNaL9kdX8ohfsi18DXHsCVd/A7ssARBdccdDb5ODnt62WuEWaM/g==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/remark-footnotes/-/remark-footnotes-2.0.0.tgz", + "integrity": "sha512-3Clt8ZMH75Ayjp9q4CorNeyjwIxHFcTkaektplKGl2A1jNGEUey8cKL0ZC5vJwfcD5GFGsNLImLG/NGzWIzoMQ==", "dev": true }, "remark-mdx": { - "version": "1.6.16", - "resolved": "https://registry.npmjs.org/remark-mdx/-/remark-mdx-1.6.16.tgz", - "integrity": "sha512-xqZhBQ4TonFiSFpVt6SnTLRnxstu7M6pcaOibKZhqzk4zMRVacVenD7iECjfESK+72LkPm/NW+0r5ahJAg7zlQ==", + "version": "1.6.18", + "resolved": "https://registry.npmjs.org/remark-mdx/-/remark-mdx-1.6.18.tgz", + "integrity": "sha512-xNhjv4kJZ8L6RV68yK8fQ6XWlvSIFOE5VPmM7wMKSwkvwBu6tlUJy0gRF2WiZ4fPPOj6jpqlVB9QakipvZuEqg==", "dev": true, "requires": { - "@babel/core": "7.10.5", + "@babel/core": "7.11.6", "@babel/helper-plugin-utils": "7.10.4", - "@babel/plugin-proposal-object-rest-spread": "7.10.4", + "@babel/plugin-proposal-object-rest-spread": "7.11.0", "@babel/plugin-syntax-jsx": "7.10.4", - "@mdx-js/util": "1.6.16", + "@mdx-js/util": "1.6.18", "is-alphabetical": "1.0.4", "remark-parse": "8.0.3", - "unified": "9.1.0" + "unified": "9.2.0" }, "dependencies": { "@babel/core": { - "version": "7.10.5", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.10.5.tgz", - "integrity": "sha512-O34LQooYVDXPl7QWCdW9p4NR+QlzOr7xShPPJz8GsuCU3/8ua/wqTr7gmnxXv+WBESiGU/G5s16i6tUvHkNb+w==", + "version": "7.11.6", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.11.6.tgz", + "integrity": "sha512-Wpcv03AGnmkgm6uS6k8iwhIwTrcP0m17TL1n1sy7qD0qelDu4XNeW0dN0mHfa+Gei211yDaLoEe/VlbXQzM4Bg==", "dev": true, "requires": { "@babel/code-frame": "^7.10.4", - "@babel/generator": "^7.10.5", - "@babel/helper-module-transforms": "^7.10.5", + "@babel/generator": "^7.11.6", + "@babel/helper-module-transforms": "^7.11.0", "@babel/helpers": "^7.10.4", - "@babel/parser": "^7.10.5", + "@babel/parser": "^7.11.5", "@babel/template": "^7.10.4", - "@babel/traverse": "^7.10.5", - "@babel/types": "^7.10.5", + "@babel/traverse": "^7.11.5", + "@babel/types": "^7.11.5", "convert-source-map": "^1.7.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.1", @@ -21733,6 +21810,86 @@ "source-map": "^0.5.0" } }, + "@babel/generator": { + "version": "7.11.6", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.11.6.tgz", + "integrity": "sha512-DWtQ1PV3r+cLbySoHrwn9RWEgKMBLLma4OBQloPRyDYvc5msJM9kvTLo1YnlJd1P/ZuKbdli3ijr5q3FvAF3uA==", + "dev": true, + "requires": { + "@babel/types": "^7.11.5", + "jsesc": "^2.5.1", + "source-map": "^0.5.0" + } + }, + "@babel/helper-module-transforms": { + "version": "7.11.0", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.11.0.tgz", + "integrity": "sha512-02EVu8COMuTRO1TAzdMtpBPbe6aQ1w/8fePD2YgQmxZU4gpNWaL9gK3Jp7dxlkUlUCJOTaSeA+Hrm1BRQwqIhg==", + "dev": true, + "requires": { + "@babel/helper-module-imports": "^7.10.4", + "@babel/helper-replace-supers": "^7.10.4", + "@babel/helper-simple-access": "^7.10.4", + "@babel/helper-split-export-declaration": "^7.11.0", + "@babel/template": "^7.10.4", + "@babel/types": "^7.11.0", + "lodash": "^4.17.19" + } + }, + "@babel/helper-split-export-declaration": { + "version": "7.11.0", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.11.0.tgz", + "integrity": "sha512-74Vejvp6mHkGE+m+k5vHY93FX2cAtrw1zXrZXRlG4l410Nm9PxfEiVTn1PjDPV5SnmieiueY4AFg2xqhNFuuZg==", + "dev": true, + "requires": { + "@babel/types": "^7.11.0" + } + }, + "@babel/parser": { + "version": "7.11.5", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.5.tgz", + "integrity": "sha512-X9rD8qqm695vgmeaQ4fvz/o3+Wk4ZzQvSHkDBgpYKxpD4qTAUm88ZKtHkVqIOsYFFbIQ6wQYhC6q7pjqVK0E0Q==", + "dev": true + }, + "@babel/plugin-proposal-object-rest-spread": { + "version": "7.11.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.11.0.tgz", + "integrity": "sha512-wzch41N4yztwoRw0ak+37wxwJM2oiIiy6huGCoqkvSTA9acYWcPfn9Y4aJqmFFJ70KTJUu29f3DQ43uJ9HXzEA==", + "dev": true, + "requires": { + "@babel/helper-plugin-utils": "^7.10.4", + "@babel/plugin-syntax-object-rest-spread": "^7.8.0", + "@babel/plugin-transform-parameters": "^7.10.4" + } + }, + "@babel/traverse": { + "version": "7.11.5", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.11.5.tgz", + "integrity": "sha512-EjiPXt+r7LiCZXEfRpSJd+jUMnBd4/9OUv7Nx3+0u9+eimMwJmG0Q98lw4/289JCoxSE8OolDMNZaaF/JZ69WQ==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.10.4", + "@babel/generator": "^7.11.5", + "@babel/helper-function-name": "^7.10.4", + "@babel/helper-split-export-declaration": "^7.11.0", + "@babel/parser": "^7.11.5", + "@babel/types": "^7.11.5", + "debug": "^4.1.0", + "globals": "^11.1.0", + "lodash": "^4.17.19" + } + }, + "@babel/types": { + "version": "7.11.5", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.5.tgz", + "integrity": "sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.10.4", + "lodash": "^4.17.19", + "to-fast-properties": "^2.0.0" + } + }, "semver": { "version": "5.7.1", "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", @@ -23195,6 +23352,16 @@ "integrity": "sha512-7t+/wpKLanLzSnQPX8WAcuLCCeuSHoWdQuh9SB3xD0kNOM38DNf+0Oa+wmvxmYueRzkmh6IcdKFtvTa+ecgPDw==", "dev": true }, + "storybook-dark-mode": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/storybook-dark-mode/-/storybook-dark-mode-1.0.3.tgz", + "integrity": "sha512-mjHLrv/dwtqKmbOoQ2CMtGKDttWSnUybutujsIPxLcEC77EujjWiRBFv46LtXAZEyZLm8sGFUz0s6HJJfJ3tSw==", + "dev": true, + "requires": { + "fast-deep-equal": "^3.0.0", + "memoizerific": "^1.11.3" + } + }, "stream-browserify": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz", @@ -24171,12 +24338,6 @@ "integrity": "sha1-WFhUf2spB1fulczMZm+1AITEYN0=", "dev": true }, - "trim-lines": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-1.1.3.tgz", - "integrity": "sha512-E0ZosSWYK2mkSu+KEtQ9/KqarVjA9HztOSX+9FDdNacRAq29RRV6ZQNgob3iuW8Htar9vAfEa6yyt5qBAHZDBA==", - "dev": true - }, "trim-newlines": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-3.0.0.tgz", @@ -24302,9 +24463,9 @@ "integrity": "sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw==" }, "unfetch": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/unfetch/-/unfetch-4.1.0.tgz", - "integrity": "sha512-crP/n3eAPUJxZXM9T80/yv0YhkTEx2K1D3h7D1AJM6fzsWZrxdyRuLN0JH/dkZh1LNH8LxCnBzoPFCPbb2iGpg==", + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/unfetch/-/unfetch-4.2.0.tgz", + "integrity": "sha512-F9p7yYCn6cIW9El1zi0HI6vqpeIvBsr3dSuRO6Xuppb1u5rXpCPmMvLSyECLhybr9isec8Ohl0hPekMVrEinDA==", "dev": true }, "unherit": { @@ -24342,9 +24503,9 @@ "integrity": "sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg==" }, "unified": { - "version": "9.1.0", - "resolved": "https://registry.npmjs.org/unified/-/unified-9.1.0.tgz", - "integrity": "sha512-VXOv7Ic6twsKGJDeZQ2wwPqXs2hM0KNu5Hkg9WgAZbSD1pxhZ7p8swqg583nw1Je2fhwHy6U8aEjiI79x1gvag==", + "version": "9.2.0", + "resolved": "https://registry.npmjs.org/unified/-/unified-9.2.0.tgz", + "integrity": "sha512-vx2Z0vY+a3YoTj8+pttM3tiJHCwY5UFbYdiWrwBEbHmK8pvsPj2rtAX2BFfgXen8T39CJWblWRDT4L5WGXtDdg==", "dev": true, "requires": { "bail": "^1.0.0", diff --git a/package.json b/package.json index 18272f3f..016123a9 100644 --- a/package.json +++ b/package.json @@ -73,15 +73,15 @@ "@rollup/plugin-commonjs": "^14.0.0", "@rollup/plugin-image": "^2.0.5", "@rollup/plugin-node-resolve": "^8.4.0", - "@storybook/addon-actions": "^6.0.21", - "@storybook/addon-essentials": "^6.0.21", - "@storybook/addon-links": "^6.0.21", - "@storybook/addon-storyshots": "^6.0.21", - "@storybook/addons": "^6.0.21", + "@storybook/addon-actions": "^6.0.22", + "@storybook/addon-essentials": "^6.0.22", + "@storybook/addon-links": "^6.0.22", + "@storybook/addon-storyshots": "^6.0.22", + "@storybook/addons": "^6.0.22", "@storybook/preset-create-react-app": "^3.1.4", - "@storybook/react": "^6.0.21", + "@storybook/react": "^6.0.22", + "@storybook/theming": "^6.0.22", "@svgr/rollup": "^5.4.0", - "@storybook/theming": "^6.0.21", "@types/bytes": "^3.1.0", "@types/classnames": "^2.2.10", "@types/enzyme": "^3.10.5", @@ -97,7 +97,8 @@ "react-test-renderer": "^16.13.1", "rollup": "^2.26.4", "rollup-plugin-styles": "^3.10.0", - "rollup-plugin-typescript2": "^0.27.2" + "rollup-plugin-typescript2": "^0.27.2", + "storybook-dark-mode": "^1.0.3" }, "peerDependencies": { "react": ">=16.13", diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx index 139eabbb..ccb26b02 100644 --- a/src/components/Input/index.tsx +++ b/src/components/Input/index.tsx @@ -17,7 +17,7 @@ const errorAnimationKeyFrames = fieldErrorStyles['@global'] const useStyles = createUseStyles({ '@global': { ...errorAnimationKeyFrames, - // '.dark input': generateInputStyles('dark'), + '.dark input': generateInputStyles('dark'), input: generateInputStyles('light') }, container: { diff --git a/src/components/assets/styles/themes.ts b/src/components/assets/styles/themes.ts index 723eef49..9fbdbbc3 100644 --- a/src/components/assets/styles/themes.ts +++ b/src/components/assets/styles/themes.ts @@ -22,12 +22,12 @@ export const light: PaletteType = { } export const dark: PaletteType = { - background: dassanaWhite, + background: dassanaGrays[9], error: dassanaReds[6], primary: dassanaBlue, text: { - disabled: dassanaGrays[6], - primary: dassanaGrays[8] + disabled: dassanaWhite, + primary: dassanaWhite } } From 7841c8d767d6464ddeb28a71ace5cdc8c118e0d7 Mon Sep 17 00:00:00 2001 From: sam-m-m Date: Thu, 1 Oct 2020 12:15:31 -0700 Subject: [PATCH 04/24] feat #92 - Add dark mode theming switcher to sb --- .storybook/preview.tsx | 75 +- src/__snapshots__/storybook.test.ts.snap | 1737 ++++++++++++---------- src/components/Tree/Tree.stories.tsx | 4 + 3 files changed, 967 insertions(+), 849 deletions(-) diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 17681d4e..0c6a2bd4 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -1,68 +1,35 @@ +import { useDarkMode } from 'storybook-dark-mode' import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport' import './index.css' -// import { StoryContext } from '@storybook/addons' -// import { Story } from '@storybook/react/types-6-0' -// import React from 'react' import { themes } from '@storybook/theming' -// import { useDarkMode } from 'storybook-dark-mode' -// import { addParameters } from '@storybook/react' +import { StoryContext } from '@storybook/addons' +import { Story } from '@storybook/react/types-6-0' +import React from 'react' export const parameters = { actions: { argTypesRegex: '^on[A-Z].*' }, // controls: { expanded: true }, // uncomment to display controls with description and defaults viewport: { viewports: INITIAL_VIEWPORTS - }, - backgrounds: { - default: 'light', - values: [ - { - name: 'dark', - value: '#212121' - }, - { - name: 'light', - value: '#ffffff' - } - ] - }, - darkMode: { - current: 'light', - dark: { ...themes.dark }, - light: { ...themes.normal }, - darkClass: 'dark', - lightClass: 'light', - stylePreview: true } } -// export const withThemeProvider = ( -// ComponentStory: Story, -// context: StoryContext -// ) => { -// console.log(context) -// console.log(useDarkMode()) -// const themeClass = useDarkMode() ? 'dark' : '' +/* +TODO: Uninstall storybook-dark-mode and use sb's native theming with toolbar when it comes out. +Look at this comment for examples of various ways to implement: https://github.com/storybookjs/storybook/pull/12368#issuecomment-702339916 +Also follow thread for updates. +*/ +export const withThemeProvider = ( + ComponentStory: Story, + context: StoryContext +) => { + const themeClass = useDarkMode() ? 'dark' : '' -// return ( -//
-// -//
-// ) -// } - -// export const globalTypes = { -// theme: { -// name: 'Theme', -// description: 'Global theme for components', -// defaultValue: 'light', -// toolbar: { -// items: [ -// { value: 'light', title: 'light', icon: 'circlehollow' }, -// { value: 'dark', title: 'dark', icon: 'circle' } -// ] -// } -// } -// } + return ( +
+ +
+ ) +} -// export const decorators = [withThemeProvider] +export const decorators = [withThemeProvider] diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap index 60438de4..e7dbd631 100644 --- a/src/__snapshots__/storybook.test.ts.snap +++ b/src/__snapshots__/storybook.test.ts.snap @@ -34,160 +34,192 @@ exports[`Storyshots Avatar Icon 1`] = ` `; exports[`Storyshots Button Default 1`] = ` - + +
`; exports[`Storyshots Button Disabled 1`] = ` - + +
`; exports[`Storyshots Button Google 1`] = ` - + + + + Sign in with Google + + +
`; exports[`Storyshots Button Loading 1`] = ` - -   - + +   + +
`; exports[`Storyshots Button Pending 1`] = ` - + + +
+ + + Pending + + +
`; exports[`Storyshots Button Primary 1`] = ` - + +
`; exports[`Storyshots Button Primary Disabled 1`] = ` - + +
`; exports[`Storyshots Icon Custom 1`] = ` -https://dummyimage.com/600x400/000/fff&text=Dassana +
+ https://dummyimage.com/600x400/000/fff&text=Dassana +
`; exports[`Storyshots Icon Predefined 1`] = ` @@ -202,158 +234,194 @@ exports[`Storyshots Icon Predefined 1`] = ` exports[`Storyshots Input Default 1`] = `
- +
+ +
`; exports[`Storyshots Input Error 1`] = `
- +
+ +
`; exports[`Storyshots Input Full Width 1`] = `
- +
+ +
`; exports[`Storyshots Input Loading 1`] = `
- -   - + +   + +
`; exports[`Storyshots Input Placeholder 1`] = `
- +
+ +
`; exports[`Storyshots Link Click 1`] = ` - - - Click - - + + + Click + + +
`; exports[`Storyshots Link Href 1`] = ` - - - Href - - + + + Href + + +
`; exports[`Storyshots Notifications Error 1`] = ` - + +
`; exports[`Storyshots Notifications Info 1`] = ` - + +
`; exports[`Storyshots Notifications Success 1`] = ` @@ -434,419 +502,403 @@ exports[`Storyshots Popover Title 1`] = ` exports[`Storyshots Radio Group Default 1`] = `
- - - +
`; -exports[`Storyshots Radio Group Partially Disabled 1`] = ` +exports[`Storyshots Notifications Warning 1`] = `
- - - +
`; -exports[`Storyshots Select Default 1`] = ` +exports[`Storyshots Radio Group Default 1`] = `
-
+ + + High + + +
- + Medium + + +
`; -exports[`Storyshots Select Full Width 1`] = ` +exports[`Storyshots Radio Group Partially Disabled 1`] = `
-
+ + + High + + +
- + Medium + + +
`; -exports[`Storyshots Select Icon 1`] = ` +exports[`Storyshots Select Default 1`] = `
- - + + + + + +
+ + } + unselectable="on" + > + + + +
+
+
+`; + +exports[`Storyshots Select Full Width 1`] = ` +
+
+
+
+ + + + +
+ + Lorem + +
+ +
-
-
- - - - -
`; -exports[`Storyshots Select Search 1`] = ` +exports[`Storyshots Select Icon 1`] = `
- + + + + +
+ + aws.svg + + + AWS + +
+ +
- + + +
- +
+`; + +exports[`Storyshots Select Search 1`] = ` +
+
+
- - + + + + +
+ + + + - +
`; exports[`Storyshots Skeleton Circle 1`] = ` - -   - + +   + +
`; exports[`Storyshots Skeleton Count 1`] = ` -Array [ +
  - , +   - , +   - , +   - , +   - , -] + +
`; exports[`Storyshots Skeleton Default 1`] = ` - -   - + +   + +
`; exports[`Storyshots Tag Colored 1`] = ` - - Colored - + + Colored + +
`; exports[`Storyshots Tag Colored Preset 1`] = ` - - Blue - + + Blue + +
`; exports[`Storyshots Tag Default 1`] = ` - - Default - + + Default + + `; exports[`Storyshots Toggle Checked Disabled 1`] = ` - + + `; exports[`Storyshots Toggle Default 1`] = ` - + + `; exports[`Storyshots Toggle Disabled 1`] = ` - + + `; exports[`Storyshots Toggle Small 1`] = ` @@ -1182,71 +1376,24 @@ exports[`Storyshots Tree Default 1`] = ` +> + + `; diff --git a/src/components/Tree/Tree.stories.tsx b/src/components/Tree/Tree.stories.tsx index b431dd28..78417ed5 100644 --- a/src/components/Tree/Tree.stories.tsx +++ b/src/components/Tree/Tree.stories.tsx @@ -24,6 +24,10 @@ export default { } }, component: Tree, + parameters: { + // disabled because shallow rendering gives warning, but FormTree only works with shallow render + storyshots: { disable: true } + }, title: 'Tree' } as Meta From f02e9717f4ebc78ce406c0871bcc8b62249b4ba3 Mon Sep 17 00:00:00 2001 From: sam-m-m Date: Thu, 1 Oct 2020 12:21:36 -0700 Subject: [PATCH 05/24] feat #92 - Update Tree.stories comment & input stories text --- src/components/Input/Input.stories.tsx | 2 +- src/components/Tree/Tree.stories.tsx | 2 +- src/components/assets/styles/styleguide.ts | 3 --- 3 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/Input/Input.stories.tsx b/src/components/Input/Input.stories.tsx index e084b833..b47aa95d 100644 --- a/src/components/Input/Input.stories.tsx +++ b/src/components/Input/Input.stories.tsx @@ -16,7 +16,7 @@ const Template: Story = args => export const Default = Template.bind({}) export const Placeholder = Template.bind({}) -Placeholder.args = { placeholder: 'Search' } +Placeholder.args = { placeholder: 'Search...' } export const Loading = Template.bind({}) Loading.args = { loading: true } diff --git a/src/components/Tree/Tree.stories.tsx b/src/components/Tree/Tree.stories.tsx index 78417ed5..c845ed66 100644 --- a/src/components/Tree/Tree.stories.tsx +++ b/src/components/Tree/Tree.stories.tsx @@ -25,7 +25,7 @@ export default { }, component: Tree, parameters: { - // disabled because shallow rendering gives warning, but FormTree only works with shallow render + // disabled because shallow rendering doesn't work with decorator and hook inside decorator. storyshots: { disable: true } }, title: 'Tree' diff --git a/src/components/assets/styles/styleguide.ts b/src/components/assets/styles/styleguide.ts index 2c1220b2..12f44ef3 100644 --- a/src/components/assets/styles/styleguide.ts +++ b/src/components/assets/styles/styleguide.ts @@ -15,6 +15,3 @@ export const fieldErrorStyles = { export const fontSizeRegular = '14px' export const linkColor = '#1EA7FD' export const skeletonButtonBorderColor = '#DFDFDF' -export const demoGreen = '#00d287' -export const demoGray = '#676c77' -export const demoBlue = '#5183f5' From 9fa064ad0a22890d72bb748924fa4e646d28cb65 Mon Sep 17 00:00:00 2001 From: sam-m-m Date: Thu, 1 Oct 2020 14:58:39 -0700 Subject: [PATCH 06/24] feat #92 - Add tests for color utils --- src/__snapshots__/storybook.test.ts.snap | 2 +- src/components/utils.test.ts | 63 +++++++++++++++++++++++- src/components/utils.ts | 2 +- 3 files changed, 64 insertions(+), 3 deletions(-) diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap index e7dbd631..f8ac2bcc 100644 --- a/src/__snapshots__/storybook.test.ts.snap +++ b/src/__snapshots__/storybook.test.ts.snap @@ -336,7 +336,7 @@ exports[`Storyshots Input Placeholder 1`] = ` onChange={[Function]} onFocus={[Function]} onKeyDown={[Function]} - placeholder="Search" + placeholder="Search..." type="text" value="" /> diff --git a/src/components/utils.test.ts b/src/components/utils.test.ts index 98853194..460bbe85 100644 --- a/src/components/utils.test.ts +++ b/src/components/utils.test.ts @@ -1,4 +1,10 @@ -import { getDataTestAttributeProp, TAG } from './utils' +import Color from 'color' +import { + fadeColor, + getDataTestAttributeProp, + lightenOrDarkenColor, + TAG +} from './utils' const mockCmpName = 'input' const mockDataTag = 'foo' @@ -18,3 +24,58 @@ describe('getDataTestAttributeProp', () => { }) }) }) + +describe('Color utils', () => { + const mockColor = 'hsl(100, 50%, 50%)' + const mockPercent = 50 + + describe('lightenOrDarkenColor', () => { + it('should lighten the input color by given percentage if colorChangeType is not provided', () => { + const mockLightenedColor = lightenOrDarkenColor( + mockColor, + mockPercent + ) + + expect(mockLightenedColor).toBe(Color('hsl(100, 50%, 75%)').hex()) + }) + + it('should darken the input color by given percentage if colorChangeType is provided as "dark"', () => { + const mockDarkenedColor = lightenOrDarkenColor( + mockColor, + mockPercent, + 'dark' + ) + + expect(mockDarkenedColor).toBe(Color('hsl(100, 50%, 25%)').hex()) + }) + + it('should throw an error if percent value is out of bounds', () => { + expect(() => { + lightenOrDarkenColor(mockColor, -1) + }).toThrow() + + expect(() => { + lightenOrDarkenColor(mockColor, 101) + }).toThrow() + }) + }) + + describe('fadeColor', () => { + it('should fade color by given percentage', () => { + const mockColor = 'rgba(10, 10, 10, 0.8)' + const mockFadedColor = fadeColor(mockColor, mockPercent) + + expect(mockFadedColor).toBe('rgba(10, 10, 10, 0.4)') + }) + + it('should throw an error if percent value is out of bounds', () => { + expect(() => { + fadeColor(mockColor, -1) + }).toThrow() + + expect(() => { + fadeColor(mockColor, 101) + }).toThrow() + }) + }) +}) diff --git a/src/components/utils.ts b/src/components/utils.ts index 3764a5e3..68e592f2 100644 --- a/src/components/utils.ts +++ b/src/components/utils.ts @@ -28,7 +28,7 @@ export const placementOptions: TooltipPlacement[] = [ export const getRgba = (color: string, a: number) => { const [r, g, b] = Color(color).rgb().array() - return `rgba(${r} ,${g} ,${b} ,${a})` + return `rgba(${r}, ${g}, ${b}, ${a})` } enum LigtenOrDarkenType { From aa4f422dcd8afa9f1e1b20385690460e751efdc4 Mon Sep 17 00:00:00 2001 From: sam-m-m Date: Thu, 1 Oct 2020 15:14:32 -0700 Subject: [PATCH 07/24] feat #92 - Rebase with dev & update failing snapshot tests --- src/__snapshots__/storybook.test.ts.snap | 105 +++++++++++++++++------ 1 file changed, 78 insertions(+), 27 deletions(-) diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap index f8ac2bcc..6706a1b7 100644 --- a/src/__snapshots__/storybook.test.ts.snap +++ b/src/__snapshots__/storybook.test.ts.snap @@ -536,6 +536,58 @@ exports[`Storyshots Notifications Warning 1`] = ` `; +exports[`Storyshots Popover Default 1`] = ` +
+
+ + dassana + +
+
+`; + +exports[`Storyshots Popover Title 1`] = ` +
+
+ + dassana + +
+
+`; + exports[`Storyshots Radio Group Default 1`] = `
- - @@ -1397,3 +1422,29 @@ exports[`Storyshots Tree Default 1`] = `
`; + +exports[`Storyshots Tooltip Default 1`] = ` +
+
+ + dassana + +
+
+`; From 4268f3b5170bfa58a562aca5082786cef6070f39 Mon Sep 17 00:00:00 2001 From: github-actions Date: Thu, 1 Oct 2020 15:28:21 -0700 Subject: [PATCH 08/24] feat #97 - Update failing snapshot and run npm audit --- src/__snapshots__/storybook.test.ts.snap | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap index 6706a1b7..7967116a 100644 --- a/src/__snapshots__/storybook.test.ts.snap +++ b/src/__snapshots__/storybook.test.ts.snap @@ -1119,15 +1119,15 @@ exports[`Storyshots Select Search 1`] = ` onKeyDown={[Function]} onMouseDown={[Function]} onPaste={[Function]} - readOnly={true} + readOnly={false} role="combobox" style={ Object { - "opacity": 0, + "opacity": null, } } type="search" - unselectable="on" + unselectable={null} value="" /> From 25ea1f021dcc07d2cc591a338d10ee4b2ebc43f6 Mon Sep 17 00:00:00 2001 From: sam-m-m Date: Thu, 1 Oct 2020 23:07:03 -0700 Subject: [PATCH 09/24] feat #92 - Update to use sb native theming --- .storybook/main.js | 2 +- .storybook/preview.tsx | 147 +- package-lock.json | 199 +-- package.json | 1 + src/__snapshots__/storybook.test.ts.snap | 1759 +++++++++------------- 5 files changed, 924 insertions(+), 1184 deletions(-) diff --git a/.storybook/main.js b/.storybook/main.js index 301b2c87..78908f1d 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -5,6 +5,6 @@ module.exports = { '@storybook/addon-essentials', '@storybook/addon-actions', '@storybook/preset-create-react-app', - 'storybook-dark-mode/register' + '@storybook/addon-cssresources' ] } diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 0c6a2bd4..5784a859 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -1,35 +1,128 @@ -import { useDarkMode } from 'storybook-dark-mode' -import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport' -import './index.css' -import { themes } from '@storybook/theming' +// import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport' +// import './index.css' import { StoryContext } from '@storybook/addons' import { Story } from '@storybook/react/types-6-0' -import React from 'react' +// import React from 'react' + +// export const parameters = { +// actions: { argTypesRegex: '^on.*' } +// } + +// export const globalTypes = { +// viewport: { +// viewports: INITIAL_VIEWPORTS +// }, +// theme: { +// name: 'Theme', +// description: 'Global theme for components', +// defaultValue: 'light', +// toolbar: { +// items: [ +// { value: 'light', title: 'light', icon: 'circlehollow' }, +// { value: 'dark', title: 'dark', icon: 'circle' } +// ] +// } +// } +// } + +// export const withThemeProvider = ( +// ComponentStory: Story, +// context: StoryContext +// ) => { +// return ( +//
+// +//
+// ) +// } + +// export const decorators = [withThemeProvider] + +// import { document } from 'global' +var document = require('global/document') + +import isChromatic from 'chromatic/isChromatic' +import React, { useEffect } from 'react' +import { + Global, + ThemeProvider, + themes, + createReset, + convert, + useTheme, + Theme +} from '@storybook/theming' +import { withCssResources } from '@storybook/addon-cssresources' +import { DocsPage } from '@storybook/addon-docs/blocks' + +const ThemedSetRoot = () => { + const theme: Theme = useTheme() + + useEffect(() => { + document.body.style.background = theme.background.app + document.body.style.color = theme.defaultText + + theme.base === 'dark' + ? document.body.classList.add('dark') + : document.body.classList.remove('dark') + + return () => { + // + } + }) + + return null +} + +export const decorators = [ + withCssResources, + (ComponentStory: Story, { globals: { theme = 'light' } }: StoryContext) => { + switch (theme) { + default: { + return ( + + + + + + ) + } + } + } +] export const parameters = { - actions: { argTypesRegex: '^on[A-Z].*' }, - // controls: { expanded: true }, // uncomment to display controls with description and defaults - viewport: { - viewports: INITIAL_VIEWPORTS + exportedParameter: 'exportedParameter', + a11y: { + config: {}, + options: { + checks: { 'color-contrast': { options: { noScroll: true } } }, + restoreScroll: true + } + }, + options: { + storySort: (a: any, b: any) => + a[1].kind === b[1].kind + ? 0 + : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }) + }, + docs: { + theme: themes.light, + page: () => } } -/* -TODO: Uninstall storybook-dark-mode and use sb's native theming with toolbar when it comes out. -Look at this comment for examples of various ways to implement: https://github.com/storybookjs/storybook/pull/12368#issuecomment-702339916 -Also follow thread for updates. -*/ -export const withThemeProvider = ( - ComponentStory: Story, - context: StoryContext -) => { - const themeClass = useDarkMode() ? 'dark' : '' - - return ( -
- -
- ) +export const globalTypes = { + theme: { + name: 'Theme', + description: 'Global theme for components', + defaultValue: isChromatic() ? 'stacked' : 'light', + toolbar: { + icon: 'circlehollow', + items: [ + { value: 'light', icon: 'circlehollow', title: 'light' }, + { value: 'dark', icon: 'circle', title: 'dark' } + ] + } + } } - -export const decorators = [withThemeProvider] diff --git a/package-lock.json b/package-lock.json index 1d11c173..33effbb0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1278,7 +1278,6 @@ "version": "10.0.29", "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz", "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==", - "dev": true, "requires": { "@emotion/sheet": "0.9.4", "@emotion/stylis": "0.8.5", @@ -1290,7 +1289,6 @@ "version": "10.0.35", "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.0.35.tgz", "integrity": "sha512-sH++vJCdk025fBlRZSAhkRlSUoqSqgCzYf5fMOmqqi3bM6how+sQpg3hkgJonj8GxXM4WbD7dRO+4tegDB9fUw==", - "dev": true, "requires": { "@babel/runtime": "^7.5.5", "@emotion/cache": "^10.0.27", @@ -1304,7 +1302,6 @@ "version": "10.0.27", "resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.27.tgz", "integrity": "sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==", - "dev": true, "requires": { "@emotion/serialize": "^0.11.15", "@emotion/utils": "0.11.3", @@ -1314,14 +1311,12 @@ "@emotion/hash": { "version": "0.8.0", "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", - "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==", - "dev": true + "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==" }, "@emotion/is-prop-valid": { "version": "0.8.8", "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", - "dev": true, "requires": { "@emotion/memoize": "0.7.4" } @@ -1329,14 +1324,12 @@ "@emotion/memoize": { "version": "0.7.4", "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", - "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", - "dev": true + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" }, "@emotion/serialize": { "version": "0.11.16", "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz", "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==", - "dev": true, "requires": { "@emotion/hash": "0.8.0", "@emotion/memoize": "0.7.4", @@ -1348,14 +1341,12 @@ "@emotion/sheet": { "version": "0.9.4", "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz", - "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==", - "dev": true + "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==" }, "@emotion/styled": { "version": "10.0.27", "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.0.27.tgz", "integrity": "sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==", - "dev": true, "requires": { "@emotion/styled-base": "^10.0.27", "babel-plugin-emotion": "^10.0.27" @@ -1365,7 +1356,6 @@ "version": "10.0.31", "resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.0.31.tgz", "integrity": "sha512-wTOE1NcXmqMWlyrtwdkqg87Mu6Rj1MaukEoEmEkHirO5IoHDJ8LgCQL4MjJODgxWxXibGR3opGp1p7YvkNEdXQ==", - "dev": true, "requires": { "@babel/runtime": "^7.5.5", "@emotion/is-prop-valid": "0.8.8", @@ -1376,26 +1366,22 @@ "@emotion/stylis": { "version": "0.8.5", "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", - "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==", - "dev": true + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" }, "@emotion/unitless": { "version": "0.7.5", "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", - "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==", - "dev": true + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" }, "@emotion/utils": { "version": "0.11.3", "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz", - "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==", - "dev": true + "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==" }, "@emotion/weak-memoize": { "version": "0.2.5", "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz", - "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==", - "dev": true + "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==" }, "@hapi/address": { "version": "2.1.4", @@ -1434,8 +1420,7 @@ "@icons/material": { "version": "0.2.4", "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz", - "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==", - "dev": true + "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==" }, "@istanbuljs/load-nyc-config": { "version": "1.1.0", @@ -2160,7 +2145,6 @@ "version": "1.3.4", "resolved": "https://registry.npmjs.org/@reach/router/-/router-1.3.4.tgz", "integrity": "sha512-+mtn9wjlB9NN2CNnnC/BRYtwdKBfSyyasPYraNAyvaV1occr/5NnB4CVzjEZipNHwYebQwcndGUmpFzxAUoqSA==", - "dev": true, "requires": { "create-react-context": "0.3.0", "invariant": "^2.2.3", @@ -2321,6 +2305,22 @@ "ts-dedent": "^1.1.1" } }, + "@storybook/addon-cssresources": { + "version": "6.0.22", + "resolved": "https://registry.npmjs.org/@storybook/addon-cssresources/-/addon-cssresources-6.0.22.tgz", + "integrity": "sha512-cBitKfkajR3xAxTNCblFOCGYcGaHpFtK2e4/j4Sc3ZlBGTHN2/00WJxPPj/wh3UFvMGj7lYJsS2bwIMMqlPojg==", + "requires": { + "@storybook/addons": "6.0.22", + "@storybook/api": "6.0.22", + "@storybook/components": "6.0.22", + "@storybook/core-events": "6.0.22", + "@storybook/theming": "6.0.22", + "core-js": "^3.0.1", + "global": "^4.3.2", + "react": "^16.8.3", + "regenerator-runtime": "^0.13.3" + } + }, "@storybook/addon-docs": { "version": "6.0.22", "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-6.0.22.tgz", @@ -3284,7 +3284,6 @@ "version": "6.0.22", "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.0.22.tgz", "integrity": "sha512-D7GfOZ16DAyIUoNXY/aisKlXxHlk61XDIAvN102n/GGrmiNQhCKO2cuwjrmpqQGIXW/+QAsc0YUUAptEKpw9vw==", - "dev": true, "requires": { "@storybook/api": "6.0.22", "@storybook/channels": "6.0.22", @@ -3301,7 +3300,6 @@ "version": "6.0.22", "resolved": "https://registry.npmjs.org/@storybook/api/-/api-6.0.22.tgz", "integrity": "sha512-GfGRXAe0h5cFTwJUJ7XqhaaE4+aXk/f+QCWfuUQkipUsGhGL+KLY80OU5cqC7LDB2nbhZ2bKUaLCzXu1Qsw5pw==", - "dev": true, "requires": { "@reach/router": "^1.3.3", "@storybook/channels": "6.0.22", @@ -3329,7 +3327,6 @@ "version": "7.3.2", "resolved": "https://registry.npmjs.org/@storybook/semver/-/semver-7.3.2.tgz", "integrity": "sha512-SWeszlsiPsMI0Ps0jVNtH64cI5c0UF3f7KgjVKJoNP30crQ6wUSddY2hsdeczZXEKVJGEn50Q60flcGsQGIcrg==", - "dev": true, "requires": { "core-js": "^3.6.5", "find-up": "^4.1.0" @@ -3339,7 +3336,6 @@ "version": "4.1.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", - "dev": true, "requires": { "locate-path": "^5.0.0", "path-exists": "^4.0.0" @@ -3349,7 +3345,6 @@ "version": "5.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", - "dev": true, "requires": { "p-locate": "^4.1.0" } @@ -3358,7 +3353,6 @@ "version": "4.1.0", "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", - "dev": true, "requires": { "p-limit": "^2.2.0" } @@ -3366,8 +3360,7 @@ "path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", - "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", - "dev": true + "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==" } } }, @@ -3398,7 +3391,6 @@ "version": "6.0.22", "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.0.22.tgz", "integrity": "sha512-d/RlPFDq9NXA/Y3CVDsSVsWgvYiiiifxQN9hz5+y3T6MnRJPEfAPWYkbv+wLixWbDF2ULzjQHp4zcfTm6T7A4w==", - "dev": true, "requires": { "core-js": "^3.0.1", "ts-dedent": "^1.1.1", @@ -3442,7 +3434,6 @@ "version": "6.0.22", "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.0.22.tgz", "integrity": "sha512-AQD2Zz7BIIwrP0/sNZMXgP/BEZo5qK1YPDl2mPppSJdFocVCYDlc6HgYPZZHtPvD5BVWAENg2NQoGBOivuMl3g==", - "dev": true, "requires": { "core-js": "^3.0.1", "global": "^4.3.2" @@ -3452,7 +3443,6 @@ "version": "6.0.22", "resolved": "https://registry.npmjs.org/@storybook/components/-/components-6.0.22.tgz", "integrity": "sha512-sc7O4djNLajyJdVY4dUSO73L/+VM8IyzYKK9c5kSw4pN+l6M3EUBi4Zt/jdQc+WxSBmmriSe7aBOKrOSxBBSiA==", - "dev": true, "requires": { "@storybook/client-logger": "6.0.22", "@storybook/csf": "0.0.1", @@ -4366,7 +4356,6 @@ "version": "6.0.22", "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.0.22.tgz", "integrity": "sha512-XQplzZwC9o4OQbKPjBruIOSFGto6qtmIAuh94NaHB6Hpv8YpsDwy1fXxEr990fj/5bOXmL4YV3x1AD6fOK/1sA==", - "dev": true, "requires": { "core-js": "^3.0.1" } @@ -4375,7 +4364,6 @@ "version": "0.0.1", "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.1.tgz", "integrity": "sha512-USTLkZze5gkel8MYCujSRBVIrUQ3YPBrLOx7GNk/0wttvVtlzWXAq9eLbQ4p/NicGxP+3T7KPEMVV//g+yubpw==", - "dev": true, "requires": { "lodash": "^4.17.15" } @@ -5051,7 +5039,6 @@ "version": "6.0.22", "resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.0.22.tgz", "integrity": "sha512-Gu3PmWXaDDhDqTY/S8/ag2OCdTb0S+aD/QkXvQzSht5gt5d8M2tQxBlhXDVFNhYGRz7zQtjRmTxqT/3YX9tjrg==", - "dev": true, "requires": { "@reach/router": "^1.3.3", "@types/reach__router": "^1.3.5", @@ -5064,8 +5051,7 @@ "qs": { "version": "6.9.4", "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.4.tgz", - "integrity": "sha512-A1kFqHekCTM7cz0udomYUoYNWjBebHm/5wzU/XqrBRBNWectVH0QIiN+NEcZ0Dte5hvzHwbr8+XQmguPhJ6WdQ==", - "dev": true + "integrity": "sha512-A1kFqHekCTM7cz0udomYUoYNWjBebHm/5wzU/XqrBRBNWectVH0QIiN+NEcZ0Dte5hvzHwbr8+XQmguPhJ6WdQ==" } } }, @@ -5104,7 +5090,6 @@ "version": "6.0.22", "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.0.22.tgz", "integrity": "sha512-aR11z70vq0G+F61PIJHW1Kt1lmA2vYxGWF1TL6rsECXNt4fN+X9ig082G0Uhag0mV/FJZdKhhpv360paJFYF2g==", - "dev": true, "requires": { "@emotion/core": "^10.0.20", "@emotion/is-prop-valid": "^0.8.6", @@ -5123,8 +5108,7 @@ "resolve-from": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz", - "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==", - "dev": true + "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==" } } }, @@ -5814,8 +5798,7 @@ "@types/history": { "version": "4.7.8", "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.8.tgz", - "integrity": "sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA==", - "dev": true + "integrity": "sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA==" }, "@types/html-minifier-terser": { "version": "5.1.1", @@ -5826,8 +5809,7 @@ "@types/is-function": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@types/is-function/-/is-function-1.0.0.tgz", - "integrity": "sha512-iTs9HReBu7evG77Q4EC8hZnqRt57irBDkK9nvmHroiOIVwYMQc4IvYvdRgwKfYepunIY7Oh/dBuuld+Gj9uo6w==", - "dev": true + "integrity": "sha512-iTs9HReBu7evG77Q4EC8hZnqRt57irBDkK9nvmHroiOIVwYMQc4IvYvdRgwKfYepunIY7Oh/dBuuld+Gj9uo6w==" }, "@types/istanbul-lib-coverage": { "version": "2.0.3", @@ -5960,8 +5942,7 @@ "@types/overlayscrollbars": { "version": "1.12.0", "resolved": "https://registry.npmjs.org/@types/overlayscrollbars/-/overlayscrollbars-1.12.0.tgz", - "integrity": "sha512-h/pScHNKi4mb+TrJGDon8Yb06ujFG0mSg12wIO0sWMUF3dQIe2ExRRdNRviaNt9IjxIiOfnRr7FsQAdHwK4sMg==", - "dev": true + "integrity": "sha512-h/pScHNKi4mb+TrJGDon8Yb06ujFG0mSg12wIO0sWMUF3dQIe2ExRRdNRviaNt9IjxIiOfnRr7FsQAdHwK4sMg==" }, "@types/parse-json": { "version": "4.0.0", @@ -6000,7 +5981,6 @@ "version": "1.3.6", "resolved": "https://registry.npmjs.org/@types/reach__router/-/reach__router-1.3.6.tgz", "integrity": "sha512-RHYataCUPQnt+GHoASyRLq6wmZ0n8jWlBW8Lxcwd30NN6vQfbmTeoSDfkgxO0S1lEzArp8OFDsq5KIs7FygjtA==", - "dev": true, "requires": { "@types/history": "*", "@types/react": "*" @@ -6026,7 +6006,6 @@ "version": "3.0.4", "resolved": "https://registry.npmjs.org/@types/react-color/-/react-color-3.0.4.tgz", "integrity": "sha512-EswbYJDF1kkrx93/YU+BbBtb46CCtDMvTiGmcOa/c5PETnwTiSWoseJ1oSWeRl/4rUXkhME9bVURvvPg0W5YQw==", - "dev": true, "requires": { "@types/react": "*", "@types/reactcss": "*" @@ -6044,7 +6023,6 @@ "version": "11.0.4", "resolved": "https://registry.npmjs.org/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.4.tgz", "integrity": "sha512-9GfTo3a0PHwQeTVoqs0g5bS28KkSY48pp5659wA+Dp4MqceDEa8EHBqrllJvvtyusszyJhViUEap0FDvlk/9Zg==", - "dev": true, "requires": { "@types/react": "*" } @@ -6053,7 +6031,6 @@ "version": "1.2.3", "resolved": "https://registry.npmjs.org/@types/reactcss/-/reactcss-1.2.3.tgz", "integrity": "sha512-d2gQQ0IL6hXLnoRfVYZukQNWHuVsE75DzFTLPUuyyEhJS8G2VvlE+qfQQ91SJjaMqlURRCNIsX7Jcsw6cEuJlA==", - "dev": true, "requires": { "@types/react": "*" } @@ -7520,7 +7497,6 @@ "version": "10.0.33", "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz", "integrity": "sha512-bxZbTTGz0AJQDHm8k6Rf3RQJ8tX2scsfsRyKVgAbiUPUNIRtlK+7JxP+TAd1kRLABFxe0CFm2VdK4ePkoA9FxQ==", - "dev": true, "requires": { "@babel/helper-module-imports": "^7.0.0", "@emotion/hash": "0.8.0", @@ -7735,8 +7711,7 @@ "babel-plugin-syntax-jsx": { "version": "6.18.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", - "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=", - "dev": true + "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=" }, "babel-plugin-syntax-object-rest-spread": { "version": "6.13.0", @@ -8694,20 +8669,17 @@ "character-entities": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz", - "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==", - "dev": true + "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==" }, "character-entities-legacy": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz", - "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==", - "dev": true + "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==" }, "character-reference-invalid": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz", - "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==", - "dev": true + "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==" }, "chardet": { "version": "0.7.0", @@ -10773,7 +10745,6 @@ "version": "2.0.6", "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.6.tgz", "integrity": "sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==", - "dev": true, "optional": true, "requires": { "good-listener": "^1.2.2", @@ -10921,8 +10892,7 @@ "comma-separated-tokens": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz", - "integrity": "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==", - "dev": true + "integrity": "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==" }, "commander": { "version": "2.20.3", @@ -11214,7 +11184,6 @@ "version": "0.3.0", "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.3.0.tgz", "integrity": "sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw==", - "dev": true, "requires": { "gud": "^1.0.0", "warning": "^4.0.3" @@ -11544,8 +11513,7 @@ "csstype": { "version": "2.6.13", "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.13.tgz", - "integrity": "sha512-ul26pfSQTZW8dcOnD2iiJssfXw0gdNVX9IJDH/X3K5DGPfj+fUYe3kB+swUY6BF3oZDxaID3AJt+9/ojSAE05A==", - "dev": true + "integrity": "sha512-ul26pfSQTZW8dcOnD2iiJssfXw0gdNVX9IJDH/X3K5DGPfj+fUYe3kB+swUY6BF3oZDxaID3AJt+9/ojSAE05A==" }, "cyclist": { "version": "1.0.1", @@ -11682,8 +11650,7 @@ "deep-object-diff": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/deep-object-diff/-/deep-object-diff-1.1.0.tgz", - "integrity": "sha512-b+QLs5vHgS+IoSNcUE4n9HP2NwcHj7aqnJWsjPtuG75Rh5TOaGt0OjAYInh77d5T16V5cRDC+Pw/6ZZZiETBGw==", - "dev": true + "integrity": "sha512-b+QLs5vHgS+IoSNcUE4n9HP2NwcHj7aqnJWsjPtuG75Rh5TOaGt0OjAYInh77d5T16V5cRDC+Pw/6ZZZiETBGw==" }, "deepmerge": { "version": "4.2.2", @@ -11804,7 +11771,6 @@ "version": "3.2.0", "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz", "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==", - "dev": true, "optional": true }, "delegates": { @@ -11979,8 +11945,7 @@ "dom-walk": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz", - "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==", - "dev": true + "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==" }, "domain-browser": { "version": "1.2.0", @@ -12188,7 +12153,6 @@ "version": "10.0.27", "resolved": "https://registry.npmjs.org/emotion-theming/-/emotion-theming-10.0.27.tgz", "integrity": "sha512-MlF1yu/gYh8u+sLUqA0YuA9JX0P4Hb69WlKc/9OLo+WCXuX6sy/KoIa+qJimgmr2dWqnypYKYPX37esjDBbhdw==", - "dev": true, "requires": { "@babel/runtime": "^7.5.5", "@emotion/weak-memoize": "0.2.5", @@ -13440,7 +13404,6 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz", "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==", - "dev": true, "requires": { "format": "^0.2.0" } @@ -13609,8 +13572,7 @@ "find-root": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", - "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==", - "dev": true + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==" }, "find-up": { "version": "3.0.0", @@ -13731,8 +13693,7 @@ "format": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz", - "integrity": "sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=", - "dev": true + "integrity": "sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=" }, "forwarded": { "version": "0.1.2", @@ -14068,7 +14029,6 @@ "version": "4.4.0", "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz", "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==", - "dev": true, "requires": { "min-document": "^2.19.0", "process": "^0.11.10" @@ -14143,7 +14103,6 @@ "version": "1.2.2", "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz", "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=", - "dev": true, "optional": true, "requires": { "delegate": "^3.1.2" @@ -14162,8 +14121,7 @@ "gud": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz", - "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==", - "dev": true + "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==" }, "gzip-size": { "version": "5.1.1", @@ -14337,8 +14295,7 @@ "hast-util-parse-selector": { "version": "2.2.4", "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.4.tgz", - "integrity": "sha512-gW3sxfynIvZApL4L07wryYF4+C9VvH3AUi7LAnVXV4MneGEgwOByXvFo18BgmTWnm7oHAe874jKbIB1YhHSIzA==", - "dev": true + "integrity": "sha512-gW3sxfynIvZApL4L07wryYF4+C9VvH3AUi7LAnVXV4MneGEgwOByXvFo18BgmTWnm7oHAe874jKbIB1YhHSIzA==" }, "hast-util-raw": { "version": "6.0.1", @@ -14383,7 +14340,6 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-5.1.2.tgz", "integrity": "sha512-WlztFuK+Lrvi3EggsqOkQ52rKbxkXL3RwB6t5lwoa8QLMemoWfBuL43eDrwOamJyR7uKQKdmKYaBH1NZBiIRrQ==", - "dev": true, "requires": { "comma-separated-tokens": "^1.0.0", "hast-util-parse-selector": "^2.0.0", @@ -14404,8 +14360,7 @@ "highlight.js": { "version": "9.15.10", "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.15.10.tgz", - "integrity": "sha512-RoV7OkQm0T3os3Dd2VHLNMoaoDVx77Wygln3n9l5YV172XonWG6rgQD3XnF/BuFFZw9A0TJgmMSO8FEWQgvcXw==", - "dev": true + "integrity": "sha512-RoV7OkQm0T3os3Dd2VHLNMoaoDVx77Wygln3n9l5YV172XonWG6rgQD3XnF/BuFFZw9A0TJgmMSO8FEWQgvcXw==" }, "hmac-drbg": { "version": "1.0.1", @@ -14921,14 +14876,12 @@ "is-alphabetical": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz", - "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==", - "dev": true + "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==" }, "is-alphanumerical": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz", "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==", - "dev": true, "requires": { "is-alphabetical": "^1.0.0", "is-decimal": "^1.0.0" @@ -15005,8 +14958,7 @@ "is-decimal": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz", - "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==", - "dev": true + "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==" }, "is-descriptor": { "version": "0.1.6", @@ -15063,8 +15015,7 @@ "is-function": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz", - "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==", - "dev": true + "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==" }, "is-generator-fn": { "version": "2.1.0", @@ -15082,8 +15033,7 @@ "is-hexadecimal": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz", - "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==", - "dev": true + "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==" }, "is-in-browser": { "version": "1.1.3", @@ -17279,7 +17229,6 @@ "version": "1.12.1", "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.12.1.tgz", "integrity": "sha512-OqaVxMGIESnawn+TU/QMV5BJLbUghUfjDWPAtFqDYDmDtr4FnB+op8xM+pR7nKlauHNUHXGt0VgWatFB8voS5w==", - "dev": true, "requires": { "fault": "^1.0.2", "highlight.js": "~9.15.0" @@ -17357,8 +17306,7 @@ "map-or-similar": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/map-or-similar/-/map-or-similar-1.5.0.tgz", - "integrity": "sha1-beJlMXSt+12e3DPGnT6Sobdvrwg=", - "dev": true + "integrity": "sha1-beJlMXSt+12e3DPGnT6Sobdvrwg=" }, "map-visit": { "version": "1.0.0", @@ -17378,7 +17326,6 @@ "version": "6.11.4", "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-6.11.4.tgz", "integrity": "sha512-3lRCD5Sh+tfA52iGgfs/XZiw33f7fFX9Bn55aNnVNUd2GzLDkOWyKYYD8Yju2B1Vn+feiEdgJs8T6Tg0xNokPw==", - "dev": true, "requires": { "prop-types": "^15.6.2", "unquote": "^1.1.0" @@ -17387,8 +17334,7 @@ "material-colors": { "version": "1.2.6", "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz", - "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==", - "dev": true + "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==" }, "md5.js": { "version": "1.3.5", @@ -17460,7 +17406,6 @@ "version": "1.11.3", "resolved": "https://registry.npmjs.org/memoizerific/-/memoizerific-1.11.3.tgz", "integrity": "sha1-fIekZGREwy11Q4VwkF8tvRsagFo=", - "dev": true, "requires": { "map-or-similar": "^1.5.0" } @@ -17725,7 +17670,6 @@ "version": "2.19.0", "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz", "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=", - "dev": true, "requires": { "dom-walk": "^0.1.0" } @@ -18538,8 +18482,7 @@ "overlayscrollbars": { "version": "1.13.0", "resolved": "https://registry.npmjs.org/overlayscrollbars/-/overlayscrollbars-1.13.0.tgz", - "integrity": "sha512-p8oHrMeRAKxXDMPI/EBNITj/zTVHKNnAnM59Im+xnoZUlV07FyTg46wom2286jJlXGGfcPFG/ba5NUiCwWNd4w==", - "dev": true + "integrity": "sha512-p8oHrMeRAKxXDMPI/EBNITj/zTVHKNnAnM59Im+xnoZUlV07FyTg46wom2286jJlXGGfcPFG/ba5NUiCwWNd4w==" }, "p-each-series": { "version": "1.0.0", @@ -18695,7 +18638,6 @@ "version": "1.2.2", "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-1.2.2.tgz", "integrity": "sha512-NzfpbxW/NPrzZ/yYSoQxyqUZMZXIdCfE0OIN4ESsnptHJECoUk3FZktxNuzQf4tjt5UEopnxpYJbvYuxIFDdsg==", - "dev": true, "requires": { "character-entities": "^1.0.0", "character-entities-legacy": "^1.0.0", @@ -18873,7 +18815,6 @@ "version": "3.6.7", "resolved": "https://registry.npmjs.org/polished/-/polished-3.6.7.tgz", "integrity": "sha512-b4OViUOihwV0icb9PHmWbR+vPqaSzSAEbgLskvb7ANPATVXGiYv/TQFHQo65S53WU9i5EQ1I03YDOJW7K0bmYg==", - "dev": true, "requires": { "@babel/runtime": "^7.9.2" } @@ -18881,8 +18822,7 @@ "popper.js": { "version": "1.16.1", "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz", - "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==", - "dev": true + "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==" }, "portfinder": { "version": "1.0.28", @@ -19892,7 +19832,6 @@ "version": "1.21.0", "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.21.0.tgz", "integrity": "sha512-uGdSIu1nk3kej2iZsLyDoJ7e9bnPzIgY0naW/HdknGj61zScaprVEVGHrPoXqI+M9sP0NDnTK2jpkvmldpuqDw==", - "dev": true, "requires": { "clipboard": "^2.0.0" } @@ -19999,7 +19938,6 @@ "version": "5.5.0", "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.5.0.tgz", "integrity": "sha512-RgEbCx2HLa1chNgvChcx+rrCWD0ctBmGSE0M7lVm1yyv4UbvbrWoXp/BkVLZefzjrRBGW8/Js6uh/BnlHXFyjA==", - "dev": true, "requires": { "xtend": "^4.0.0" } @@ -20750,7 +20688,6 @@ "version": "2.18.1", "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.18.1.tgz", "integrity": "sha512-X5XpyJS6ncplZs74ak0JJoqPi+33Nzpv5RYWWxn17bslih+X7OlgmfpmGC1fNvdkK7/SGWYf1JJdn7D2n5gSuQ==", - "dev": true, "requires": { "@icons/material": "^0.2.4", "lodash": "^4.17.11", @@ -21219,7 +21156,6 @@ "version": "1.3.7", "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.7.tgz", "integrity": "sha512-nmqYTx7QVjCm3WUZLeuOomna138R1luC4EqkW3hxJUrAe+3eNz3oFCLYdnPwILfn0mX1Ew2c3wctrjlUMYYUww==", - "dev": true, "requires": { "@babel/runtime": "^7.1.2", "create-react-context": "^0.3.0", @@ -21234,7 +21170,6 @@ "version": "2.11.1", "resolved": "https://registry.npmjs.org/react-popper-tooltip/-/react-popper-tooltip-2.11.1.tgz", "integrity": "sha512-04A2f24GhyyMicKvg/koIOQ5BzlrRbKiAgP6L+Pdj1MVX3yJ1NeZ8+EidndQsbejFT55oW1b++wg2Z8KlAyhfQ==", - "dev": true, "requires": { "@babel/runtime": "^7.9.2", "react-popper": "^1.3.7" @@ -21476,7 +21411,6 @@ "version": "12.2.1", "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-12.2.1.tgz", "integrity": "sha512-CTsp0ZWijwKRYFg9xhkWD4DSpQqE4vb2NKVMdPAkomnILSmsNBHE0n5GuI5zB+PU3ySVvXvdt9jo+ViD9XibCA==", - "dev": true, "requires": { "@babel/runtime": "^7.3.1", "highlight.js": "~9.15.1", @@ -21501,7 +21435,6 @@ "version": "8.2.0", "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.2.0.tgz", "integrity": "sha512-grajUlVbkx6VdtSxCgzloUIphIZF5bKr21OYMceWPKkniy7H0mRAT/AXPrRtObAe+zUePnNlBwUc4ivVjUGIjw==", - "dev": true, "requires": { "@babel/runtime": "^7.10.2", "use-composed-ref": "^1.0.0", @@ -21512,7 +21445,6 @@ "version": "1.2.3", "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz", "integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==", - "dev": true, "requires": { "lodash": "^4.0.1" } @@ -21624,7 +21556,6 @@ "version": "2.10.1", "resolved": "https://registry.npmjs.org/refractor/-/refractor-2.10.1.tgz", "integrity": "sha512-Xh9o7hQiQlDbxo5/XkOX6H+x/q8rmlmZKr97Ie1Q8ZM32IRRd3B/UxuA/yXDW79DBSXGWxm2yRTbcTVmAciJRw==", - "dev": true, "requires": { "hastscript": "^5.0.0", "parse-entities": "^1.1.2", @@ -21635,7 +21566,6 @@ "version": "1.17.1", "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.17.1.tgz", "integrity": "sha512-PrEDJAFdUGbOP6xK/UsfkC5ghJsPJviKgnQOoxaDbBjwc8op68Quupwt1DeAFoG8GImPhiKXAvvsH7wDSLsu1Q==", - "dev": true, "requires": { "clipboard": "^2.0.0" } @@ -22652,7 +22582,6 @@ "version": "1.1.2", "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz", "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=", - "dev": true, "optional": true }, "select-hose": { @@ -23201,8 +23130,7 @@ "space-separated-tokens": { "version": "1.1.5", "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz", - "integrity": "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==", - "dev": true + "integrity": "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==" }, "spdx-correct": { "version": "3.1.1", @@ -23349,8 +23277,7 @@ "store2": { "version": "2.12.0", "resolved": "https://registry.npmjs.org/store2/-/store2-2.12.0.tgz", - "integrity": "sha512-7t+/wpKLanLzSnQPX8WAcuLCCeuSHoWdQuh9SB3xD0kNOM38DNf+0Oa+wmvxmYueRzkmh6IcdKFtvTa+ecgPDw==", - "dev": true + "integrity": "sha512-7t+/wpKLanLzSnQPX8WAcuLCCeuSHoWdQuh9SB3xD0kNOM38DNf+0Oa+wmvxmYueRzkmh6IcdKFtvTa+ecgPDw==" }, "storybook-dark-mode": { "version": "1.0.3", @@ -23848,7 +23775,6 @@ "version": "5.0.2", "resolved": "https://registry.npmjs.org/telejson/-/telejson-5.0.2.tgz", "integrity": "sha512-XCrDHGbinczsscs8LXFr9jDhvy37yBk9piB7FJrCfxE8oP66WDkolNMpaBkWYgQqB9dQGBGtTDzGQPedc9KJmw==", - "dev": true, "requires": { "@types/is-function": "^1.0.0", "global": "^4.4.0", @@ -23864,7 +23790,6 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.1.tgz", "integrity": "sha512-1+QkEcxiLlB7VEyFtyBg94e08OAsvq7FUBgApTq/w2ymCLyKJgDPsybBENVtA7XCQEgEXxKPonG+mvYRxh/LIg==", - "dev": true, "requires": { "has-symbols": "^1.0.1" } @@ -23872,8 +23797,7 @@ "isobject": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/isobject/-/isobject-4.0.0.tgz", - "integrity": "sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA==", - "dev": true + "integrity": "sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA==" } } }, @@ -24215,7 +24139,6 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz", "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==", - "dev": true, "optional": true }, "tiny-warning": { @@ -24359,14 +24282,12 @@ "ts-dedent": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-1.1.1.tgz", - "integrity": "sha512-UGTRZu1evMw4uTPyYF66/KFd22XiU+jMaIuHrkIHQ2GivAXVlLV0v/vHrpOuTRf9BmpNHi/SO7Vd0rLu0y57jg==", - "dev": true + "integrity": "sha512-UGTRZu1evMw4uTPyYF66/KFd22XiU+jMaIuHrkIHQ2GivAXVlLV0v/vHrpOuTRf9BmpNHi/SO7Vd0rLu0y57jg==" }, "ts-essentials": { "version": "2.0.12", "resolved": "https://registry.npmjs.org/ts-essentials/-/ts-essentials-2.0.12.tgz", - "integrity": "sha512-3IVX4nI6B5cc31/GFFE+i8ey/N2eA0CZDbo6n0yrz0zDX8ZJ8djmU1p+XRz7G3is0F3bB3pu2pAroFdAWQKU3w==", - "dev": true + "integrity": "sha512-3IVX4nI6B5cc31/GFFE+i8ey/N2eA0CZDbo6n0yrz0zDX8ZJ8djmU1p+XRz7G3is0F3bB3pu2pAroFdAWQKU3w==" }, "ts-pnp": { "version": "1.1.6", @@ -24440,8 +24361,7 @@ "typed-styles": { "version": "0.0.7", "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz", - "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==", - "dev": true + "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==" }, "typedarray": { "version": "0.0.6", @@ -24752,7 +24672,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.0.0.tgz", "integrity": "sha512-RVqY3NFNjZa0xrmK3bIMWNmQ01QjKPDc7DeWR3xa/N8aliVppuutOE5bZzPkQfvL+5NRWMMp0DJ99Trd974FIw==", - "dev": true, "requires": { "ts-essentials": "^2.0.3" } @@ -24760,14 +24679,12 @@ "use-isomorphic-layout-effect": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.0.0.tgz", - "integrity": "sha512-JMwJ7Vd86NwAt1jH7q+OIozZSIxA4ND0fx6AsOe2q1H8ooBUp5aN6DvVCqZiIaYU6JaMRJGyR0FO7EBCIsb/Rg==", - "dev": true + "integrity": "sha512-JMwJ7Vd86NwAt1jH7q+OIozZSIxA4ND0fx6AsOe2q1H8ooBUp5aN6DvVCqZiIaYU6JaMRJGyR0FO7EBCIsb/Rg==" }, "use-latest": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.1.0.tgz", "integrity": "sha512-gF04d0ZMV3AMB8Q7HtfkAWe+oq1tFXP6dZKwBHQF5nVXtGsh2oAYeeqma5ZzxtlpOcW8Ro/tLcfmEodjDeqtuw==", - "dev": true, "requires": { "use-isomorphic-layout-effect": "^1.0.0" } diff --git a/package.json b/package.json index 016123a9..46bff0de 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ }, "dependencies": { "@ant-design/icons": "^4.2.2", + "@storybook/addon-cssresources": "^6.0.22", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap index 7967116a..b4b303d1 100644 --- a/src/__snapshots__/storybook.test.ts.snap +++ b/src/__snapshots__/storybook.test.ts.snap @@ -34,192 +34,160 @@ exports[`Storyshots Avatar Icon 1`] = ` `; exports[`Storyshots Button Default 1`] = ` -
- -
+ + Default + + `; exports[`Storyshots Button Disabled 1`] = ` -
- -
+ + Disabled + + `; exports[`Storyshots Button Google 1`] = ` -
- -
+ + + + + Sign in with Google + + `; exports[`Storyshots Button Loading 1`] = ` -
- -   - -
+   + `; exports[`Storyshots Button Pending 1`] = ` -
- -
+ + + + + + + Pending + + `; exports[`Storyshots Button Primary 1`] = ` -
- -
+ + Primary + + `; exports[`Storyshots Button Primary Disabled 1`] = ` -
- -
+ + Primary Disabled + + `; exports[`Storyshots Icon Custom 1`] = ` -
- https://dummyimage.com/600x400/000/fff&text=Dassana -
+https://dummyimage.com/600x400/000/fff&text=Dassana `; exports[`Storyshots Icon Predefined 1`] = ` @@ -234,194 +202,158 @@ exports[`Storyshots Icon Predefined 1`] = ` exports[`Storyshots Input Default 1`] = `
-
- -
+
`; exports[`Storyshots Input Error 1`] = `
-
- -
+
`; exports[`Storyshots Input Full Width 1`] = `
-
- -
+
`; exports[`Storyshots Input Loading 1`] = `
-
- -   - -
+   +
`; exports[`Storyshots Input Placeholder 1`] = `
-
- -
+
`; exports[`Storyshots Link Click 1`] = ` - + } + target="_self" +> + + Click + + `; exports[`Storyshots Link Href 1`] = ` - + } + target="_self" +> + + Href + + `; exports[`Storyshots Notifications Error 1`] = ` -
- -
+ + Error + + `; exports[`Storyshots Notifications Info 1`] = ` -
- -
+ + Info + + `; exports[`Storyshots Notifications Success 1`] = ` @@ -502,455 +434,419 @@ exports[`Storyshots Popover Title 1`] = ` exports[`Storyshots Radio Group Default 1`] = `
- -
-`; - -exports[`Storyshots Notifications Warning 1`] = ` -
- -
-`; - -exports[`Storyshots Popover Default 1`] = ` -
-
+
+ + Low + +
`; -exports[`Storyshots Popover Title 1`] = ` +exports[`Storyshots Radio Group Partially Disabled 1`] = `
-
- dassana - -
+ + + + High + + + +
`; -exports[`Storyshots Radio Group Default 1`] = ` +exports[`Storyshots Select Default 1`] = `
- - - +
`; -exports[`Storyshots Radio Group Partially Disabled 1`] = ` +exports[`Storyshots Select Full Width 1`] = `
- - - -
-
-`; - -exports[`Storyshots Select Default 1`] = ` -
-
-
+ -
- - - - - - -
- + + -
+
`; -exports[`Storyshots Select Full Width 1`] = ` +exports[`Storyshots Select Icon 1`] = `
-
- - - - -
- - Lorem - -
- -
- + + - -
-
-
-`; - -exports[`Storyshots Select Icon 1`] = ` -
-
-
-
- - - - -
- - aws.svg - - - AWS - -
- -
- + + -
+
`; exports[`Storyshots Select Search 1`] = `
-
- - - - - - -
- + + + + +
+ + - + + -
+
`; exports[`Storyshots Skeleton Circle 1`] = ` -
- -   - -
+   + `; exports[`Storyshots Skeleton Count 1`] = ` -
+Array [   - + ,   - + ,   - + ,   - + ,   - -
+ , +] `; exports[`Storyshots Skeleton Default 1`] = ` -
- -   - -
+   + `; exports[`Storyshots Tag Colored 1`] = ` -
- - Colored - -
+ } +> + Colored + `; exports[`Storyshots Tag Colored Preset 1`] = ` -
- - Blue - -
+ } +> + Blue + `; exports[`Storyshots Tag Default 1`] = ` -
- - Default - -
+ } +> + Default + `; exports[`Storyshots Toggle Checked Disabled 1`] = ` -
- -
+
+ + `; exports[`Storyshots Toggle Default 1`] = ` -
- -
+
+ + `; exports[`Storyshots Toggle Disabled 1`] = ` -
- -
+
+ + `; exports[`Storyshots Toggle Small 1`] = ` @@ -1396,55 +1177,3 @@ exports[`Storyshots Tooltip Default 1`] = `
`; - -exports[`Storyshots Tree Default 1`] = ` - - -
-`; - -exports[`Storyshots Tooltip Default 1`] = ` -
-
- - dassana - -
-
-`; From 43edc81ff2f98a19b336a33921c5a2adde48f35a Mon Sep 17 00:00:00 2001 From: sam-m-m Date: Fri, 2 Oct 2020 12:36:56 -0700 Subject: [PATCH 10/24] feat #92 - Add side-by-side theming views --- .storybook/index.css | 7 + .storybook/preview.tsx | 211 +-- src/__snapshots__/storybook.test.ts.snap | 1803 ++++++++++++---------- 3 files changed, 1105 insertions(+), 916 deletions(-) diff --git a/.storybook/index.css b/.storybook/index.css index f5bbb9dc..f3368fd0 100644 --- a/.storybook/index.css +++ b/.storybook/index.css @@ -7,3 +7,10 @@ body { font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; } + +/* Storybook styles */ + +.sb-show-main { + /* For side-by-side theme view */ + padding: 0 !important; +} diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 5784a859..91a86e4c 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -1,59 +1,57 @@ -// import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport' -// import './index.css' -import { StoryContext } from '@storybook/addons' -import { Story } from '@storybook/react/types-6-0' -// import React from 'react' - -// export const parameters = { -// actions: { argTypesRegex: '^on.*' } -// } - -// export const globalTypes = { -// viewport: { -// viewports: INITIAL_VIEWPORTS -// }, -// theme: { -// name: 'Theme', -// description: 'Global theme for components', -// defaultValue: 'light', -// toolbar: { -// items: [ -// { value: 'light', title: 'light', icon: 'circlehollow' }, -// { value: 'dark', title: 'dark', icon: 'circle' } -// ] -// } -// } -// } - -// export const withThemeProvider = ( -// ComponentStory: Story, -// context: StoryContext -// ) => { -// return ( -//
-// -//
-// ) -// } - -// export const decorators = [withThemeProvider] - -// import { document } from 'global' -var document = require('global/document') - +import './index.css' +import cn from 'classnames' +import { createUseStyles } from 'react-jss' +import document from 'global/document' +import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport' import isChromatic from 'chromatic/isChromatic' -import React, { useEffect } from 'react' +import { Story } from '@storybook/react/types-6-0' +import { StoryContext } from '@storybook/addons' +import { withCssResources } from '@storybook/addon-cssresources' import { + convert, + createReset, Global, + styled, + Theme, ThemeProvider, themes, - createReset, - convert, - useTheme, - Theme + useTheme } from '@storybook/theming' -import { withCssResources } from '@storybook/addon-cssresources' -import { DocsPage } from '@storybook/addon-docs/blocks' +import React, { FC, ReactNode, useEffect } from 'react' + +const useStyles = createUseStyles({ + storyContainer: { + display: 'flex' + }, + storyWrapper: { + padding: '1rem' + } +}) + +const ThemeBlock = styled.div( + { + height: '100vh', + left: 0, + overflow: 'auto', + right: '50vw', + width: '50vw' + }, + ({ theme }) => ({ + background: theme.background.app, + color: theme.color.defaultText + }), + // @ts-ignore + ({ side }) => + side === 'left' + ? { + left: 0, + right: '50vw' + } + : { + left: '50vw', + right: 0 + } +) const ThemedSetRoot = () => { const theme: Theme = useTheme() @@ -61,68 +59,99 @@ const ThemedSetRoot = () => { useEffect(() => { document.body.style.background = theme.background.app document.body.style.color = theme.defaultText + }) - theme.base === 'dark' - ? document.body.classList.add('dark') - : document.body.classList.remove('dark') + return null +} - return () => { - // - } +interface StoryWrapperProps { + children: ReactNode + dark?: boolean +} +/* +This wrapper does two things: + 1. Adds padding to the story since it was removed from .sb-show-main in ./index.css + 2. Toggles 'dark' theme class +*/ +const StoryWrapper: FC = ({ + children, + dark = false +}: StoryWrapperProps) => { + const classes = useStyles() + const wrapperClasses = cn({ + dark, + [classes.storyWrapper]: true }) - return null + return
{children}
} -export const decorators = [ - withCssResources, - (ComponentStory: Story, { globals: { theme = 'light' } }: StoryContext) => { - switch (theme) { - default: { - return ( - +const ThemeWrapper = ( + ComponentStory: Story, + { globals: { theme = 'light' } }: StoryContext +) => { + const classes = useStyles() + + switch (theme) { + case 'side-by-side': { + return ( +
+ - - - ) - } + + {/* @ts-ignore */} + + {} + + + + {/* @ts-ignore */} + + + {} + + + +
+ ) } - } -] -export const parameters = { - exportedParameter: 'exportedParameter', - a11y: { - config: {}, - options: { - checks: { 'color-contrast': { options: { noScroll: true } } }, - restoreScroll: true + default: { + return ( + + + + + {} + + + ) } - }, - options: { - storySort: (a: any, b: any) => - a[1].kind === b[1].kind - ? 0 - : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }) - }, - docs: { - theme: themes.light, - page: () => } } export const globalTypes = { theme: { - name: 'Theme', + defaultValue: isChromatic() ? 'side-by-side' : 'light', description: 'Global theme for components', - defaultValue: isChromatic() ? 'stacked' : 'light', + name: 'Theme', toolbar: { icon: 'circlehollow', items: [ - { value: 'light', icon: 'circlehollow', title: 'light' }, - { value: 'dark', icon: 'circle', title: 'dark' } + { icon: 'circlehollow', title: 'light', value: 'light' }, + { icon: 'circle', title: 'dark', value: 'dark' }, + { + icon: 'sidebar', + title: 'side by side', + value: 'side-by-side' + } ] } + }, + viewport: { + viewports: INITIAL_VIEWPORTS } } + +export const decorators = [withCssResources, ThemeWrapper] diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap index b4b303d1..f45bcd55 100644 --- a/src/__snapshots__/storybook.test.ts.snap +++ b/src/__snapshots__/storybook.test.ts.snap @@ -34,160 +34,192 @@ exports[`Storyshots Avatar Icon 1`] = ` `; exports[`Storyshots Button Default 1`] = ` - + +
`; exports[`Storyshots Button Disabled 1`] = ` - + + `; exports[`Storyshots Button Google 1`] = ` - + + + + Sign in with Google + + + `; exports[`Storyshots Button Loading 1`] = ` - -   - + +   + + `; exports[`Storyshots Button Pending 1`] = ` - + + + + + + Pending + + + `; exports[`Storyshots Button Primary 1`] = ` - + + `; exports[`Storyshots Button Primary Disabled 1`] = ` - + + `; exports[`Storyshots Icon Custom 1`] = ` -https://dummyimage.com/600x400/000/fff&text=Dassana +
+ https://dummyimage.com/600x400/000/fff&text=Dassana +
`; exports[`Storyshots Icon Predefined 1`] = ` @@ -202,200 +234,206 @@ exports[`Storyshots Icon Predefined 1`] = ` exports[`Storyshots Input Default 1`] = `
- +
+ +
`; exports[`Storyshots Input Error 1`] = `
- +
+ +
`; exports[`Storyshots Input Full Width 1`] = `
- +
+ +
`; exports[`Storyshots Input Loading 1`] = `
- -   - + +   + +
`; exports[`Storyshots Input Placeholder 1`] = `
- +
+ +
`; exports[`Storyshots Link Click 1`] = ` - - - Click - - + + + Click + + + `; exports[`Storyshots Link Href 1`] = ` - - - Href - - + + + Href + + + `; exports[`Storyshots Notifications Error 1`] = ` - + + `; exports[`Storyshots Notifications Info 1`] = ` - + + `; exports[`Storyshots Notifications Success 1`] = ` - -`; - -exports[`Storyshots Notifications Warning 1`] = ` - -`; - -exports[`Storyshots Popover Default 1`] = `
- `; -exports[`Storyshots Popover Title 1`] = ` +exports[`Storyshots Notifications Warning 1`] = `
- `; -exports[`Storyshots Radio Group Default 1`] = ` +exports[`Storyshots Popover Default 1`] = `
- - -
+`; + +exports[`Storyshots Popover Title 1`] = ` +
+
- - - - Low - - +
`; -exports[`Storyshots Radio Group Partially Disabled 1`] = ` +exports[`Storyshots Radio Group Default 1`] = `
- - + - + + className="ant-radio-button" + style={Object {}} + > + + + + + Low + + +
`; -exports[`Storyshots Select Default 1`] = ` +exports[`Storyshots Radio Group Partially Disabled 1`] = `
-
+ + + + High + +
- + Medium + + +
`; -exports[`Storyshots Select Full Width 1`] = ` +exports[`Storyshots Select Default 1`] = `
- - + - + type="search" + unselectable="on" + value="" + /> + + + + +
-
- - Lorem - -
+ +
- +
+`; + +exports[`Storyshots Select Full Width 1`] = ` +
+
+
- - + + +
+ + Lorem + +
+ +
+ + + + - +
`; exports[`Storyshots Select Icon 1`] = `
- - + - + type="search" + unselectable="on" + value="" + /> + + +
+ + aws.svg + + + AWS + +
+ +
-
-
- - - - -
`; exports[`Storyshots Select Search 1`] = `
- - + - + type="search" + unselectable={null} + value="" + /> + + + + +
- - -
- - - + + - +
`; exports[`Storyshots Skeleton Circle 1`] = ` - -   - + +   + + `; exports[`Storyshots Skeleton Count 1`] = ` -Array [ +
  - , +   - , +   - , +   - , +   - , -] + +
`; exports[`Storyshots Skeleton Default 1`] = ` - -   - + +   + + `; exports[`Storyshots Tag Colored 1`] = ` - - Colored - + + Colored + + `; exports[`Storyshots Tag Colored Preset 1`] = ` - - Blue - + + Blue + + `; exports[`Storyshots Tag Default 1`] = ` - - Default - + + Default + + `; exports[`Storyshots Toggle Checked Disabled 1`] = ` - + + `; exports[`Storyshots Toggle Default 1`] = ` - + + `; exports[`Storyshots Toggle Disabled 1`] = ` - + + `; exports[`Storyshots Toggle Small 1`] = ` - + + `; exports[`Storyshots Tooltip Default 1`] = `
- Date: Fri, 2 Oct 2020 12:40:43 -0700 Subject: [PATCH 11/24] feat #92 - Remove package storybook-dark-mode & bump v to 0.4.1 --- package-lock.json | 10 ---------- package.json | 3 +-- 2 files changed, 1 insertion(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index 33effbb0..f6671b7c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23279,16 +23279,6 @@ "resolved": "https://registry.npmjs.org/store2/-/store2-2.12.0.tgz", "integrity": "sha512-7t+/wpKLanLzSnQPX8WAcuLCCeuSHoWdQuh9SB3xD0kNOM38DNf+0Oa+wmvxmYueRzkmh6IcdKFtvTa+ecgPDw==" }, - "storybook-dark-mode": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/storybook-dark-mode/-/storybook-dark-mode-1.0.3.tgz", - "integrity": "sha512-mjHLrv/dwtqKmbOoQ2CMtGKDttWSnUybutujsIPxLcEC77EujjWiRBFv46LtXAZEyZLm8sGFUz0s6HJJfJ3tSw==", - "dev": true, - "requires": { - "fast-deep-equal": "^3.0.0", - "memoizerific": "^1.11.3" - } - }, "stream-browserify": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz", diff --git a/package.json b/package.json index 46bff0de..875b951f 100644 --- a/package.json +++ b/package.json @@ -98,8 +98,7 @@ "react-test-renderer": "^16.13.1", "rollup": "^2.26.4", "rollup-plugin-styles": "^3.10.0", - "rollup-plugin-typescript2": "^0.27.2", - "storybook-dark-mode": "^1.0.3" + "rollup-plugin-typescript2": "^0.27.2" }, "peerDependencies": { "react": ">=16.13", From 3d93e9a2dfe6e7e6b44f7a3ef8f0b65b6f4eedeb Mon Sep 17 00:00:00 2001 From: sam-m-m Date: Fri, 2 Oct 2020 14:35:02 -0700 Subject: [PATCH 12/24] feat #92 - Fix bug input focused fadeColor --- src/components/Input/utils.ts | 4 ++-- src/components/utils.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Input/utils.ts b/src/components/Input/utils.ts index ae03bbe4..d55b802a 100644 --- a/src/components/Input/utils.ts +++ b/src/components/Input/utils.ts @@ -1,5 +1,5 @@ +import { fadeColor } from '../utils' import { fieldErrorStyles } from '../assets/styles/styleguide' -import { getRgba } from '../utils' import { dassanaBlues, dassanaGrays } from '../assets/styles/colors' import { generateThemeVars, @@ -29,7 +29,7 @@ export const generateInputCSSVals = ({ const focus = { ...hover, - boxShadow: `0px 0px 4px ${getRgba(primary, 50)}` + boxShadow: `0px 0px 4px ${fadeColor(primary, 50)}` } const placeholder = { diff --git a/src/components/utils.ts b/src/components/utils.ts index 68e592f2..86d324bd 100644 --- a/src/components/utils.ts +++ b/src/components/utils.ts @@ -25,7 +25,7 @@ export const placementOptions: TooltipPlacement[] = [ 'topRight' ] -export const getRgba = (color: string, a: number) => { +const getRgba = (color: string, a: number) => { const [r, g, b] = Color(color).rgb().array() return `rgba(${r}, ${g}, ${b}, ${a})` From bea42931ccf4399133e30a86239f2d06871b4d05 Mon Sep 17 00:00:00 2001 From: sam-m-m Date: Fri, 2 Oct 2020 18:22:56 -0700 Subject: [PATCH 13/24] feat #92 - Address PR comments --- .storybook/preview.tsx | 25 +++++++----- src/components/Input/index.tsx | 9 +++-- src/components/Input/utils.ts | 47 +++------------------- src/components/assets/styles/baseStyles.ts | 44 ++++++++++++++++++++ src/components/assets/styles/themes.ts | 23 ++++++----- src/components/utils.test.ts | 40 +++++++----------- src/components/utils.ts | 33 +++++++-------- 7 files changed, 114 insertions(+), 107 deletions(-) create mode 100644 src/components/assets/styles/baseStyles.ts diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 91a86e4c..3babfdc0 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -6,6 +6,7 @@ import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport' import isChromatic from 'chromatic/isChromatic' import { Story } from '@storybook/react/types-6-0' import { StoryContext } from '@storybook/addons' +import { ThemesType } from '../src/components/assets/styles/themes' import { withCssResources } from '@storybook/addon-cssresources' import { convert, @@ -19,6 +20,8 @@ import { } from '@storybook/theming' import React, { FC, ReactNode, useEffect } from 'react' +const { dark, light } = ThemesType + const useStyles = createUseStyles({ storyContainer: { display: 'flex' @@ -68,6 +71,7 @@ interface StoryWrapperProps { children: ReactNode dark?: boolean } + /* This wrapper does two things: 1. Adds padding to the story since it was removed from .sb-show-main in ./index.css @@ -88,7 +92,7 @@ const StoryWrapper: FC = ({ const ThemeWrapper = ( ComponentStory: Story, - { globals: { theme = 'light' } }: StoryContext + { globals: { theme = light } }: StoryContext ) => { const classes = useStyles() @@ -102,14 +106,16 @@ const ThemeWrapper = ( {/* @ts-ignore */} - {} + + + {/* @ts-ignore */} - - {} + + @@ -122,8 +128,8 @@ const ThemeWrapper = ( - - {} + + ) @@ -133,14 +139,15 @@ const ThemeWrapper = ( export const globalTypes = { theme: { - defaultValue: isChromatic() ? 'side-by-side' : 'light', + /* Setting side-by-side as default for chromatic allows for visual regression testing on both dark and light themed stories. */ + defaultValue: isChromatic() ? 'side-by-side' : light, description: 'Global theme for components', name: 'Theme', toolbar: { icon: 'circlehollow', items: [ - { icon: 'circlehollow', title: 'light', value: 'light' }, - { icon: 'circle', title: 'dark', value: 'dark' }, + { icon: 'circlehollow', title: light, value: light }, + { icon: 'circle', title: dark, value: dark }, { icon: 'sidebar', title: 'side by side', diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx index ccb26b02..6acc9981 100644 --- a/src/components/Input/index.tsx +++ b/src/components/Input/index.tsx @@ -6,19 +6,20 @@ import { createUseStyles } from 'react-jss' import { generateInputStyles } from './utils' import { getDataTestAttributeProp } from '../utils' import Skeleton from '../Skeleton' +import { ThemesType } from '../assets/styles/themes' import { defaultFieldWidth, fieldErrorStyles } from '../assets/styles/styleguide' import React, { FC } from 'react' -const errorAnimationKeyFrames = fieldErrorStyles['@global'] +const { dark, light } = ThemesType const useStyles = createUseStyles({ '@global': { - ...errorAnimationKeyFrames, - '.dark input': generateInputStyles('dark'), - input: generateInputStyles('light') + ...fieldErrorStyles['@global'], + [`.${dark} input`]: generateInputStyles(dark), + input: generateInputStyles(light) }, container: { width: props => (props.fullWidth ? '100%' : defaultFieldWidth) diff --git a/src/components/Input/utils.ts b/src/components/Input/utils.ts index d55b802a..6ed09a9f 100644 --- a/src/components/Input/utils.ts +++ b/src/components/Input/utils.ts @@ -1,48 +1,11 @@ -import { fadeColor } from '../utils' import { fieldErrorStyles } from '../assets/styles/styleguide' -import { dassanaBlues, dassanaGrays } from '../assets/styles/colors' -import { - generateThemeVars, - PaletteType, - ThemesType -} from '../assets/styles/themes' - -export const generateInputCSSVals = ({ - background, - primary, - text -}: PaletteType) => { - const base = { - bgColor: background, - borderColor: dassanaGrays[6], - color: text.primary - } - - const disabled = { - bgColor: dassanaGrays[3], - color: text.disabled - } - - const hover = { - borderColor: dassanaBlues[5] - } - - const focus = { - ...hover, - boxShadow: `0px 0px 4px ${fadeColor(primary, 50)}` - } - - const placeholder = { - color: text.disabled - } - - return { base, disabled, focus, hover, placeholder } -} +import { generalColors } from '../assets/styles/baseStyles' +import { ThemesType } from '../assets/styles/themes' export const generateInputStyles = (themeType: ThemesType) => { - const { base, disabled, focus, hover, placeholder } = generateInputCSSVals( - generateThemeVars(themeType) - ) + const { base, disabled, focus, hover, placeholder } = generalColors[ + themeType + ] return { '&.ant-input': { diff --git a/src/components/assets/styles/baseStyles.ts b/src/components/assets/styles/baseStyles.ts new file mode 100644 index 00000000..d84aaf71 --- /dev/null +++ b/src/components/assets/styles/baseStyles.ts @@ -0,0 +1,44 @@ +import { ColorManipulationTypes, manipulateColor } from '../../utils' +import { dassanaBlues, dassanaGrays } from './colors' +import { getThemePalette, ThemePalette, ThemesType } from './themes' + +export const generateBaseStyles = ({ + background, + primary, + text +}: ThemePalette) => { + const base = { + bgColor: background, + borderColor: dassanaGrays[6], + color: text.primary + } + + const disabled = { + bgColor: dassanaGrays[3], + color: text.disabled + } + + const hover = { + borderColor: dassanaBlues[5] + } + + const focus = { + ...hover, + boxShadow: `0px 0px 4px ${manipulateColor( + primary, + 50, + ColorManipulationTypes.fade + )}` + } + + const placeholder = { + color: text.disabled + } + + return { base, disabled, focus, hover, placeholder } +} + +export const generalColors = { + [ThemesType.dark]: generateBaseStyles(getThemePalette(ThemesType.dark)), + [ThemesType.light]: generateBaseStyles(getThemePalette(ThemesType.light)) +} diff --git a/src/components/assets/styles/themes.ts b/src/components/assets/styles/themes.ts index 9fbdbbc3..206c6af3 100644 --- a/src/components/assets/styles/themes.ts +++ b/src/components/assets/styles/themes.ts @@ -1,17 +1,13 @@ import { dassanaBlue, dassanaGrays, dassanaReds, dassanaWhite } from './colors' -interface TextColorType { - disabled: string - primary: string -} -export interface PaletteType { +export interface ThemePalette { background: string primary: string error: string - text: TextColorType + text: { disabled: string; primary: string } } -export const light: PaletteType = { +export const lightPalette: ThemePalette = { background: dassanaWhite, error: dassanaReds[6], primary: dassanaBlue, @@ -21,7 +17,7 @@ export const light: PaletteType = { } } -export const dark: PaletteType = { +export const darkPalette: ThemePalette = { background: dassanaGrays[9], error: dassanaReds[6], primary: dassanaBlue, @@ -31,8 +27,13 @@ export const dark: PaletteType = { } } -const themes = { dark, light } +export enum ThemesType { + dark = 'dark', + light = 'light' +} + +const { dark, light } = ThemesType -export type ThemesType = keyof typeof themes +const themes = { [dark]: darkPalette, [light]: lightPalette } -export const generateThemeVars = (theme: ThemesType) => themes[theme] +export const getThemePalette = (theme: ThemesType) => themes[theme] diff --git a/src/components/utils.test.ts b/src/components/utils.test.ts index 460bbe85..1b1cdb6c 100644 --- a/src/components/utils.test.ts +++ b/src/components/utils.test.ts @@ -1,8 +1,8 @@ import Color from 'color' import { - fadeColor, + ColorManipulationTypes, getDataTestAttributeProp, - lightenOrDarkenColor, + manipulateColor, TAG } from './utils' @@ -28,53 +28,43 @@ describe('getDataTestAttributeProp', () => { describe('Color utils', () => { const mockColor = 'hsl(100, 50%, 50%)' const mockPercent = 50 + const { darken, fade, lighten } = ColorManipulationTypes - describe('lightenOrDarkenColor', () => { - it('should lighten the input color by given percentage if colorChangeType is not provided', () => { - const mockLightenedColor = lightenOrDarkenColor( + describe('manipulateColor', () => { + it('should lighten the input color by given percentage for argument type lighten', () => { + const mockLightenedColor = manipulateColor( mockColor, - mockPercent + mockPercent, + lighten ) expect(mockLightenedColor).toBe(Color('hsl(100, 50%, 75%)').hex()) }) - it('should darken the input color by given percentage if colorChangeType is provided as "dark"', () => { - const mockDarkenedColor = lightenOrDarkenColor( + it('should darken the input color by given percentage for argument type darken', () => { + const mockDarkenedColor = manipulateColor( mockColor, mockPercent, - 'dark' + darken ) expect(mockDarkenedColor).toBe(Color('hsl(100, 50%, 25%)').hex()) }) - it('should throw an error if percent value is out of bounds', () => { - expect(() => { - lightenOrDarkenColor(mockColor, -1) - }).toThrow() - - expect(() => { - lightenOrDarkenColor(mockColor, 101) - }).toThrow() - }) - }) - - describe('fadeColor', () => { - it('should fade color by given percentage', () => { + it('should fade the input color by given percentage for argument type fade', () => { const mockColor = 'rgba(10, 10, 10, 0.8)' - const mockFadedColor = fadeColor(mockColor, mockPercent) + const mockFadedColor = manipulateColor(mockColor, mockPercent, fade) expect(mockFadedColor).toBe('rgba(10, 10, 10, 0.4)') }) it('should throw an error if percent value is out of bounds', () => { expect(() => { - fadeColor(mockColor, -1) + manipulateColor(mockColor, -1, lighten) }).toThrow() expect(() => { - fadeColor(mockColor, 101) + manipulateColor(mockColor, 101, darken) }).toThrow() }) }) diff --git a/src/components/utils.ts b/src/components/utils.ts index 86d324bd..b0a49cd5 100644 --- a/src/components/utils.ts +++ b/src/components/utils.ts @@ -31,34 +31,35 @@ const getRgba = (color: string, a: number) => { return `rgba(${r}, ${g}, ${b}, ${a})` } -enum LigtenOrDarkenType { - light, - dark +export enum ColorManipulationTypes { + darken = 'darken', + fade = 'fade', + lighten = 'lighten' } -export const lightenOrDarkenColor = ( +export const manipulateColor = ( color: string, percent: number, - colorChangeType?: keyof typeof LigtenOrDarkenType + colorChangeType: ColorManipulationTypes ) => { if (percent < 0 || percent > 100) throw new Error('please provide a valid percentage') const clr = Color(color) - const changedClr = - colorChangeType === 'dark' - ? clr.darken(percent / 100) - : clr.lighten(percent / 100) + const ratio = percent / 100 - return changedClr.hex() -} + switch (colorChangeType) { + case ColorManipulationTypes.darken: + return clr.darken(ratio).hex() -export const fadeColor = (color: string, fadePercent: number) => { - if (fadePercent < 0 || fadePercent > 100) - throw new Error('please provide a valid percentage') + case ColorManipulationTypes.fade: { + const fadedColor = clr.fade(ratio) - const fadedColor = Color(color).fade(fadePercent / 100) + return getRgba(fadedColor.hex(), fadedColor.alpha()) + } - return getRgba(fadedColor.hex(), fadedColor.alpha()) + case ColorManipulationTypes.lighten: + return clr.lighten(ratio).hex() + } } From 7a6d84f7e243a1b2b758cadd075ec8afae3422a4 Mon Sep 17 00:00:00 2001 From: sam-m-m Date: Mon, 5 Oct 2020 12:17:59 -0700 Subject: [PATCH 14/24] feat #92 - Refac preview.tsx to use react-jss --- .storybook/preview.tsx | 119 ++++++++++----------- src/components/assets/styles/baseStyles.ts | 14 ++- src/components/assets/styles/themes.ts | 15 ++- 3 files changed, 69 insertions(+), 79 deletions(-) diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 3babfdc0..ccb33de0 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -1,23 +1,17 @@ import './index.css' import cn from 'classnames' -import { createUseStyles } from 'react-jss' import document from 'global/document' import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport' import isChromatic from 'chromatic/isChromatic' import { Story } from '@storybook/react/types-6-0' import { StoryContext } from '@storybook/addons' -import { ThemesType } from '../src/components/assets/styles/themes' -import { withCssResources } from '@storybook/addon-cssresources' import { - convert, - createReset, - Global, - styled, - Theme, - ThemeProvider, themes, - useTheme -} from '@storybook/theming' + Theme, + ThemesType +} from '../src/components/assets/styles/themes' +import { createUseStyles, ThemeProvider, useTheme } from 'react-jss' +import { withCssResources } from '@storybook/addon-cssresources' import React, { FC, ReactNode, useEffect } from 'react' const { dark, light } = ThemesType @@ -31,47 +25,27 @@ const useStyles = createUseStyles({ } }) -const ThemeBlock = styled.div( - { +const useStylesWithTheme = createUseStyles({ + themeBlock: { + background: ({ theme }: { theme: Theme }) => theme.background, height: '100vh', - left: 0, + left: props => (props.side === 'left' ? 0 : '50vw'), overflow: 'auto', - right: '50vw', + right: props => (props.side === 'right' ? '50vw' : 0), width: '50vw' - }, - ({ theme }) => ({ - background: theme.background.app, - color: theme.color.defaultText - }), - // @ts-ignore - ({ side }) => - side === 'left' - ? { - left: 0, - right: '50vw' - } - : { - left: '50vw', - right: 0 - } -) - -const ThemedSetRoot = () => { + } +}) + +const ThemedCanvasBg = () => { const theme: Theme = useTheme() useEffect(() => { - document.body.style.background = theme.background.app - document.body.style.color = theme.defaultText + document.body.style.background = theme.background }) return null } -interface StoryWrapperProps { - children: ReactNode - dark?: boolean -} - /* This wrapper does two things: 1. Adds padding to the story since it was removed from .sb-show-main in ./index.css @@ -90,7 +64,36 @@ const StoryWrapper: FC = ({ return
{children}
} -const ThemeWrapper = ( +interface StoryWrapperProps { + children: ReactNode + dark?: boolean +} + +/* This adds a wrapper to style the left and right blocks for side-by-side viewing of dark and light themes. */ +const ThemedBlock: FC = ({ + children, + ...props +}: ThemedBlockProps) => { + const theme = useTheme() + const classes = useStylesWithTheme({ ...props, theme }) + const { side } = props + + return ( +
+ + {children} + +
+ ) +} + +interface ThemedBlockProps { + children: ReactNode + side: 'left' | 'right' +} + +/* This is the decorator that wraps the stories with a theme provider and a wrapper div for side-by-side view. */ +const ThemeDecorator = ( ComponentStory: Story, { globals: { theme = light } }: StoryContext ) => { @@ -100,24 +103,15 @@ const ThemeWrapper = ( case 'side-by-side': { return (
- - - - - {/* @ts-ignore */} - - - - - + + + + - - {/* @ts-ignore */} - - - - - + + + +
) @@ -125,9 +119,8 @@ const ThemeWrapper = ( default: { return ( - - - + + @@ -161,4 +154,4 @@ export const globalTypes = { } } -export const decorators = [withCssResources, ThemeWrapper] +export const decorators = [withCssResources, ThemeDecorator] diff --git a/src/components/assets/styles/baseStyles.ts b/src/components/assets/styles/baseStyles.ts index d84aaf71..e4a20020 100644 --- a/src/components/assets/styles/baseStyles.ts +++ b/src/components/assets/styles/baseStyles.ts @@ -1,12 +1,8 @@ import { ColorManipulationTypes, manipulateColor } from '../../utils' import { dassanaBlues, dassanaGrays } from './colors' -import { getThemePalette, ThemePalette, ThemesType } from './themes' +import { Theme, themes, ThemesType } from './themes' -export const generateBaseStyles = ({ - background, - primary, - text -}: ThemePalette) => { +export const generateBaseStyles = ({ background, primary, text }: Theme) => { const base = { bgColor: background, borderColor: dassanaGrays[6], @@ -38,7 +34,9 @@ export const generateBaseStyles = ({ return { base, disabled, focus, hover, placeholder } } +const { dark, light } = ThemesType + export const generalColors = { - [ThemesType.dark]: generateBaseStyles(getThemePalette(ThemesType.dark)), - [ThemesType.light]: generateBaseStyles(getThemePalette(ThemesType.light)) + [ThemesType.dark]: generateBaseStyles(themes[dark]), + [ThemesType.light]: generateBaseStyles(themes[light]) } diff --git a/src/components/assets/styles/themes.ts b/src/components/assets/styles/themes.ts index 206c6af3..b1e319d7 100644 --- a/src/components/assets/styles/themes.ts +++ b/src/components/assets/styles/themes.ts @@ -1,13 +1,13 @@ import { dassanaBlue, dassanaGrays, dassanaReds, dassanaWhite } from './colors' -export interface ThemePalette { +export interface Theme { background: string primary: string error: string text: { disabled: string; primary: string } } -export const lightPalette: ThemePalette = { +export const lightPalette: Theme = { background: dassanaWhite, error: dassanaReds[6], primary: dassanaBlue, @@ -17,7 +17,7 @@ export const lightPalette: ThemePalette = { } } -export const darkPalette: ThemePalette = { +export const darkPalette: Theme = { background: dassanaGrays[9], error: dassanaReds[6], primary: dassanaBlue, @@ -32,8 +32,7 @@ export enum ThemesType { light = 'light' } -const { dark, light } = ThemesType - -const themes = { [dark]: darkPalette, [light]: lightPalette } - -export const getThemePalette = (theme: ThemesType) => themes[theme] +export const themes = { + [ThemesType.dark]: darkPalette, + [ThemesType.light]: lightPalette +} From 2ceeaa41955964bbc426f7a98c76f7c64dbe54cc Mon Sep 17 00:00:00 2001 From: sam-m-m Date: Tue, 6 Oct 2020 17:51:15 -0700 Subject: [PATCH 15/24] feat #92 - Update colors --- src/components/assets/styles/baseStyles.ts | 8 +- src/components/assets/styles/colors.ts | 141 +++++++++++++-------- src/components/assets/styles/themes.ts | 22 ++-- 3 files changed, 101 insertions(+), 70 deletions(-) diff --git a/src/components/assets/styles/baseStyles.ts b/src/components/assets/styles/baseStyles.ts index e4a20020..301d8234 100644 --- a/src/components/assets/styles/baseStyles.ts +++ b/src/components/assets/styles/baseStyles.ts @@ -1,21 +1,21 @@ +import { blues, grays } from './colors' import { ColorManipulationTypes, manipulateColor } from '../../utils' -import { dassanaBlues, dassanaGrays } from './colors' import { Theme, themes, ThemesType } from './themes' export const generateBaseStyles = ({ background, primary, text }: Theme) => { const base = { bgColor: background, - borderColor: dassanaGrays[6], + borderColor: grays.base, color: text.primary } const disabled = { - bgColor: dassanaGrays[3], + bgColor: grays['lighten-50'], color: text.disabled } const hover = { - borderColor: dassanaBlues[5] + borderColor: blues['lighten-10'] } const focus = { diff --git a/src/components/assets/styles/colors.ts b/src/components/assets/styles/colors.ts index ccbebfcd..ee70bbc0 100644 --- a/src/components/assets/styles/colors.ts +++ b/src/components/assets/styles/colors.ts @@ -1,56 +1,87 @@ +import { ColorManipulationTypes, manipulateColor } from '../../utils' + +const { lighten, darken } = ColorManipulationTypes + +const white = '#FEFEFE' +const black = '#111111' + +const blue = '#2F54EB' +const gray = '#7E8083' +const green = '#81E154' +const orange = '#F9BB5D' +const red = '#E16854' +const yellow = '#F9D75D' + +const lightenPercentages = [10, 30, 50, 70, 90] +const darkenPercentages = [10, 20, 50, 70] + +interface LightShadeType { + 'lighten-90': string + 'lighten-70': string + 'lighten-50': string + 'lighten-30': string + 'lighten-10': string +} + +interface DarkShadeType { + 'darken-10': string + 'darken-20': string + 'darken-50': string + 'darken-70': string +} + +interface ShadeType extends LightShadeType, DarkShadeType { + base: string +} + +const generateLightShades = (baseColor: string, percentArr: number[]) => { + const shades: LightShadeType = {} as LightShadeType + + percentArr.forEach(percentage => { + const shadeKey = `lighten-${percentage}` as keyof LightShadeType + shades[shadeKey] = manipulateColor(baseColor, percentage, lighten) + }) + + return shades +} + +const generateDarkShades = (baseColor: string, percentArr: number[]) => { + const shades: DarkShadeType = {} as DarkShadeType + + percentArr.forEach(percentage => { + const shadeKey = `darken-${percentage}` as keyof DarkShadeType + shades[shadeKey] = manipulateColor(baseColor, percentage, darken) + }) + + return shades +} + +const generateShades = (baseColor: string) => { + const shades: ShadeType = { + base: baseColor, + ...generateLightShades(baseColor, lightenPercentages), + ...generateDarkShades(baseColor, darkenPercentages) + } + + return shades +} + /* eslint-disable sort-keys */ -export const dassanaBlues = { - 1: '#EBEEFE', - 2: '#D5DDFB', - 3: '#ACBBF7', - 4: '#8298F3', - 5: '#5976EF', - 6: '#2F54EB', - 7: '#233FB0', - 8: '#182A76', - 9: '#0C153B', - 10: '#050818' -} - -export const dassanaGrays = { - 1: '#F7F7F7', - 2: '#EEEEEF', - 3: '#DCDDDF', - 4: '#CBCDCE', - 5: '#B9BCBE', - 6: '#A8ABAE', - 7: '#7E8083', - 8: '#545657', - 9: '#2A2B2C', - 10: '#111111' -} - -export const dassanaWhites = { - 1: '#FFFFFF', - 2: '#FEFEFE', - 3: '#FDFDFD', - 4: '#FCFCFC', - 5: '#FAFAFA', - 6: '#F9F9F9', - 7: '#F7F7F7', - 8: '#F1F1F1', - 9: '#E7E7E7', - 10: '#DCDCDC' -} - -export const dassanaReds = { - 1: '#FDF0EE', - 2: '#F9E1DD', - 3: '#F5CAC2', - 4: '#F0AFA4', - 5: '##E78676', - 6: '#E16854', - 7: '#A94E3F', - 8: '#71342A', - 9: '#381A15', - 10: '#381A15' -} - -export const dassanaBlue = dassanaBlues[6] -export const pureWhite = dassanaWhites[1] -export const dassanaWhite = dassanaWhites[2] +export const whites = { + base: white, + 'darken-5': manipulateColor(white, 5, darken), + 'darken-10': manipulateColor(white, 10, darken), + 'darken-15': manipulateColor(white, 15, darken), + 'darken-20': manipulateColor(white, 20, darken) +} +export const blacks = { + ...generateLightShades(black, lightenPercentages), + base: black +} + +export const blues = generateShades(blue) +export const grays = generateShades(gray) +export const greens = generateShades(green) +export const oranges = generateShades(orange) +export const reds = generateShades(red) +export const yellows = generateShades(yellow) diff --git a/src/components/assets/styles/themes.ts b/src/components/assets/styles/themes.ts index b1e319d7..d21584a1 100644 --- a/src/components/assets/styles/themes.ts +++ b/src/components/assets/styles/themes.ts @@ -1,4 +1,4 @@ -import { dassanaBlue, dassanaGrays, dassanaReds, dassanaWhite } from './colors' +import { blues, grays, reds, whites } from './colors' export interface Theme { background: string @@ -8,22 +8,22 @@ export interface Theme { } export const lightPalette: Theme = { - background: dassanaWhite, - error: dassanaReds[6], - primary: dassanaBlue, + background: whites.base, + error: reds.base, + primary: blues.base, text: { - disabled: dassanaGrays[6], - primary: dassanaGrays[8] + disabled: grays.base, + primary: grays['darken-20'] } } export const darkPalette: Theme = { - background: dassanaGrays[9], - error: dassanaReds[6], - primary: dassanaBlue, + background: grays['darken-50'], + error: reds.base, + primary: blues.base, text: { - disabled: dassanaWhite, - primary: dassanaWhite + disabled: whites.base, + primary: whites.base } } From 55cf427d119d7874711f863788699b94d7d7a101 Mon Sep 17 00:00:00 2001 From: sam-m-m Date: Tue, 6 Oct 2020 22:06:52 -0700 Subject: [PATCH 16/24] feat #92 - Address PR comments --- .storybook/preview.tsx | 44 ++++++++++++---------- src/components/Input/index.tsx | 4 +- src/components/Input/utils.ts | 8 ++-- src/components/assets/styles/baseStyles.ts | 10 ++--- src/components/assets/styles/themes.ts | 6 +-- 5 files changed, 38 insertions(+), 34 deletions(-) diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index ccb33de0..76892630 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -8,13 +8,21 @@ import { StoryContext } from '@storybook/addons' import { themes, Theme, - ThemesType + ThemeType } from '../src/components/assets/styles/themes' import { createUseStyles, ThemeProvider, useTheme } from 'react-jss' import { withCssResources } from '@storybook/addon-cssresources' import React, { FC, ReactNode, useEffect } from 'react' -const { dark, light } = ThemesType +enum LayoutTypes { + sideBySide = 'side-by-side', + left = 'left', + right = 'right' +} + +const { sideBySide, left, right } = LayoutTypes + +const { dark, light } = ThemeType const useStyles = createUseStyles({ storyContainer: { @@ -29,9 +37,9 @@ const useStylesWithTheme = createUseStyles({ themeBlock: { background: ({ theme }: { theme: Theme }) => theme.background, height: '100vh', - left: props => (props.side === 'left' ? 0 : '50vw'), + left: props => (props.side === left ? 0 : '50vw'), overflow: 'auto', - right: props => (props.side === 'right' ? '50vw' : 0), + right: props => (props.side === right ? '50vw' : 0), width: '50vw' } }) @@ -46,6 +54,10 @@ const ThemedCanvasBg = () => { return null } +interface StoryWrapperProps { + children: ReactNode + dark?: boolean +} /* This wrapper does two things: 1. Adds padding to the story since it was removed from .sb-show-main in ./index.css @@ -64,11 +76,10 @@ const StoryWrapper: FC = ({ return
{children}
} -interface StoryWrapperProps { +interface ThemedBlockProps { children: ReactNode - dark?: boolean + side: LayoutTypes.left | LayoutTypes.right } - /* This adds a wrapper to style the left and right blocks for side-by-side viewing of dark and light themes. */ const ThemedBlock: FC = ({ children, @@ -80,18 +91,11 @@ const ThemedBlock: FC = ({ return (
- - {children} - + {children}
) } -interface ThemedBlockProps { - children: ReactNode - side: 'left' | 'right' -} - /* This is the decorator that wraps the stories with a theme provider and a wrapper div for side-by-side view. */ const ThemeDecorator = ( ComponentStory: Story, @@ -100,16 +104,16 @@ const ThemeDecorator = ( const classes = useStyles() switch (theme) { - case 'side-by-side': { + case sideBySide: { return (
- + - + @@ -133,7 +137,7 @@ const ThemeDecorator = ( export const globalTypes = { theme: { /* Setting side-by-side as default for chromatic allows for visual regression testing on both dark and light themed stories. */ - defaultValue: isChromatic() ? 'side-by-side' : light, + defaultValue: isChromatic() ? sideBySide : light, description: 'Global theme for components', name: 'Theme', toolbar: { @@ -144,7 +148,7 @@ export const globalTypes = { { icon: 'sidebar', title: 'side by side', - value: 'side-by-side' + value: sideBySide } ] } diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx index 6acc9981..7e5569c7 100644 --- a/src/components/Input/index.tsx +++ b/src/components/Input/index.tsx @@ -6,14 +6,14 @@ import { createUseStyles } from 'react-jss' import { generateInputStyles } from './utils' import { getDataTestAttributeProp } from '../utils' import Skeleton from '../Skeleton' -import { ThemesType } from '../assets/styles/themes' +import { ThemeType } from '../assets/styles/themes' import { defaultFieldWidth, fieldErrorStyles } from '../assets/styles/styleguide' import React, { FC } from 'react' -const { dark, light } = ThemesType +const { dark, light } = ThemeType const useStyles = createUseStyles({ '@global': { diff --git a/src/components/Input/utils.ts b/src/components/Input/utils.ts index 6ed09a9f..fb85e342 100644 --- a/src/components/Input/utils.ts +++ b/src/components/Input/utils.ts @@ -1,9 +1,9 @@ import { fieldErrorStyles } from '../assets/styles/styleguide' -import { generalColors } from '../assets/styles/baseStyles' -import { ThemesType } from '../assets/styles/themes' +import { generalStyles } from '../assets/styles/baseStyles' +import { ThemeType } from '../assets/styles/themes' -export const generateInputStyles = (themeType: ThemesType) => { - const { base, disabled, focus, hover, placeholder } = generalColors[ +export const generateInputStyles = (themeType: ThemeType) => { + const { base, disabled, focus, hover, placeholder } = generalStyles[ themeType ] diff --git a/src/components/assets/styles/baseStyles.ts b/src/components/assets/styles/baseStyles.ts index 301d8234..c4dc9777 100644 --- a/src/components/assets/styles/baseStyles.ts +++ b/src/components/assets/styles/baseStyles.ts @@ -1,6 +1,6 @@ import { blues, grays } from './colors' import { ColorManipulationTypes, manipulateColor } from '../../utils' -import { Theme, themes, ThemesType } from './themes' +import { Theme, themes, ThemeType } from './themes' export const generateBaseStyles = ({ background, primary, text }: Theme) => { const base = { @@ -34,9 +34,9 @@ export const generateBaseStyles = ({ background, primary, text }: Theme) => { return { base, disabled, focus, hover, placeholder } } -const { dark, light } = ThemesType +const { dark, light } = ThemeType -export const generalColors = { - [ThemesType.dark]: generateBaseStyles(themes[dark]), - [ThemesType.light]: generateBaseStyles(themes[light]) +export const generalStyles = { + [ThemeType.dark]: generateBaseStyles(themes[dark]), + [ThemeType.light]: generateBaseStyles(themes[light]) } diff --git a/src/components/assets/styles/themes.ts b/src/components/assets/styles/themes.ts index d21584a1..810f5345 100644 --- a/src/components/assets/styles/themes.ts +++ b/src/components/assets/styles/themes.ts @@ -27,12 +27,12 @@ export const darkPalette: Theme = { } } -export enum ThemesType { +export enum ThemeType { dark = 'dark', light = 'light' } export const themes = { - [ThemesType.dark]: darkPalette, - [ThemesType.light]: lightPalette + [ThemeType.dark]: darkPalette, + [ThemeType.light]: lightPalette } From 0a915ea2ea427352566d752562db805b869a9794 Mon Sep 17 00:00:00 2001 From: sam-m-m Date: Wed, 7 Oct 2020 13:24:43 -0700 Subject: [PATCH 17/24] feat #92 - Address PR comments, update colors --- .storybook/preview.tsx | 2 +- src/components/assets/styles/colors.ts | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 76892630..adb3de19 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -91,7 +91,7 @@ const ThemedBlock: FC = ({ return (
- {children} + {children}
) } diff --git a/src/components/assets/styles/colors.ts b/src/components/assets/styles/colors.ts index ee70bbc0..40e03110 100644 --- a/src/components/assets/styles/colors.ts +++ b/src/components/assets/styles/colors.ts @@ -81,7 +81,7 @@ export const blacks = { export const blues = generateShades(blue) export const grays = generateShades(gray) -export const greens = generateShades(green) -export const oranges = generateShades(orange) -export const reds = generateShades(red) -export const yellows = generateShades(yellow) +export const greens = { base: green } +export const oranges = { base: orange } +export const reds = { base: red } +export const yellows = { base: yellow } From 57a6199aad24d6bcb0c0634e5e23325fb81683c5 Mon Sep 17 00:00:00 2001 From: sam-m-m Date: Thu, 8 Oct 2020 17:50:38 -0700 Subject: [PATCH 18/24] feat #92 - Add colors, refac, add story decorator --- .storybook/Decorator.tsx | 38 +++++ .storybook/preview.tsx | 4 +- src/__snapshots__/storybook.test.ts.snap | 172 ++++++++++++--------- src/components/Form/Form.stories.tsx | 8 + src/components/Input/Input.stories.tsx | 8 + src/components/Input/utils.ts | 11 +- src/components/assets/styles/baseStyles.ts | 42 ----- src/components/assets/styles/colors.ts | 45 ++---- src/components/assets/styles/styleguide.ts | 4 + src/components/assets/styles/themes.ts | 107 +++++++++++-- src/components/index.ts | 1 + src/components/utils.test.ts | 21 ++- src/components/utils.ts | 45 +++++- 13 files changed, 320 insertions(+), 186 deletions(-) create mode 100644 .storybook/Decorator.tsx delete mode 100644 src/components/assets/styles/baseStyles.ts diff --git a/.storybook/Decorator.tsx b/.storybook/Decorator.tsx new file mode 100644 index 00000000..ef9ac45d --- /dev/null +++ b/.storybook/Decorator.tsx @@ -0,0 +1,38 @@ +import React, { FC, ReactNode } from 'react' +import { createUseStyles } from 'react-jss' +import { ThemeType, themes } from '../src/components/assets/styles/themes' +import cn from 'classnames' +const { dark } = ThemeType + +const useStyles = createUseStyles({ + '@global': { + [`.${dark}`]: { + backgroundColor: themes[dark].background.secondary + } + }, + decorator: { + padding: '1rem' + } +}) + +interface DecoratorProps { + children: ReactNode + classes?: string[] +} + +const Decorator: FC = ({ + children, + classes = [] +}: DecoratorProps) => { + const decoratorClasses = useStyles() + + return ( +
+ {children} +
+ ) +} + +export default Decorator diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index adb3de19..dbd4ef60 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -35,7 +35,7 @@ const useStyles = createUseStyles({ const useStylesWithTheme = createUseStyles({ themeBlock: { - background: ({ theme }: { theme: Theme }) => theme.background, + background: ({ theme }: { theme: Theme }) => theme.background.primary, height: '100vh', left: props => (props.side === left ? 0 : '50vw'), overflow: 'auto', @@ -48,7 +48,7 @@ const ThemedCanvasBg = () => { const theme: Theme = useTheme() useEffect(() => { - document.body.style.background = theme.background + document.body.style.background = theme.background.primary }) return null diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap index f45bcd55..cc36d6b3 100644 --- a/src/__snapshots__/storybook.test.ts.snap +++ b/src/__snapshots__/storybook.test.ts.snap @@ -237,20 +237,24 @@ exports[`Storyshots Input Default 1`] = ` className="storyWrapper-0-2-2" >
- +
+ +
`; @@ -260,20 +264,24 @@ exports[`Storyshots Input Error 1`] = ` className="storyWrapper-0-2-2" >
- +
+ +
`; @@ -283,20 +291,24 @@ exports[`Storyshots Input Full Width 1`] = ` className="storyWrapper-0-2-2" >
- +
+ +
`; @@ -306,16 +318,20 @@ exports[`Storyshots Input Loading 1`] = ` className="storyWrapper-0-2-2" >
- -   - + +   + +
@@ -326,20 +342,24 @@ exports[`Storyshots Input Placeholder 1`] = ` className="storyWrapper-0-2-2" >
- +
+ +
`; @@ -703,10 +723,10 @@ exports[`Storyshots Select Default 1`] = ` className="storyWrapper-0-2-2" >
Lorem @@ -900,10 +920,10 @@ exports[`Storyshots Select Icon 1`] = ` className="storyWrapper-0-2-2" >
aws.svg
  @@ -1125,27 +1145,27 @@ exports[`Storyshots Skeleton Count 1`] = ` className="storyWrapper-0-2-2" >           @@ -1157,7 +1177,7 @@ exports[`Storyshots Skeleton Default 1`] = ` className="storyWrapper-0-2-2" >   diff --git a/src/components/Form/Form.stories.tsx b/src/components/Form/Form.stories.tsx index 542fc5b5..94f99558 100644 --- a/src/components/Form/Form.stories.tsx +++ b/src/components/Form/Form.stories.tsx @@ -1,4 +1,5 @@ import { basicOptions } from '../RadioGroup/fixtures/sample_options' +import Decorator from '../../../.storybook/Decorator' import { iconOptions } from '../Select/fixtures/sample_options' import React from 'react' import treeData from '../Tree/fixtures/0_sample_data' @@ -11,6 +12,13 @@ export default { onSubmit: { control: { disable: true } } }, component: Form, + decorators: [ + (ComponentStory: Story) => ( + + + + ) + ], parameters: { // disabled because shallow rendering gives warning, but FormTree only works with shallow render storyshots: { disable: true } diff --git a/src/components/Input/Input.stories.tsx b/src/components/Input/Input.stories.tsx index b47aa95d..3a46c764 100644 --- a/src/components/Input/Input.stories.tsx +++ b/src/components/Input/Input.stories.tsx @@ -1,3 +1,4 @@ +import Decorator from '../../../.storybook/Decorator' import React from 'react' import Input, { InputProps } from './index' import { Meta, Story } from '@storybook/react/types-6-0' @@ -8,6 +9,13 @@ export default { value: { control: { disable: true } } }, component: Input, + decorators: [ + (ComponentStory: Story) => ( + + + + ) + ], title: 'Input' } as Meta diff --git a/src/components/Input/utils.ts b/src/components/Input/utils.ts index fb85e342..7688f823 100644 --- a/src/components/Input/utils.ts +++ b/src/components/Input/utils.ts @@ -1,9 +1,8 @@ import { fieldErrorStyles } from '../assets/styles/styleguide' -import { generalStyles } from '../assets/styles/baseStyles' -import { ThemeType } from '../assets/styles/themes' +import { themedStyles, ThemeType } from '../assets/styles/themes' export const generateInputStyles = (themeType: ThemeType) => { - const { base, disabled, focus, hover, placeholder } = generalStyles[ + const { base, disabled, error, focus, hover, placeholder } = themedStyles[ themeType ] @@ -15,7 +14,7 @@ export const generateInputStyles = (themeType: ThemeType) => { '&:hover': { borderColor: hover.borderColor }, - backgroundColor: base.bgColor, + backgroundColor: base.backgroundColor, borderColor: base.borderColor, color: base.color }, @@ -23,12 +22,12 @@ export const generateInputStyles = (themeType: ThemeType) => { '&:hover': { borderColor: base.borderColor }, - backgroundColor: disabled.bgColor + backgroundColor: disabled.backgroundColor }, '&.ant-input-focused, &.ant-input:focus': { borderColor: focus.borderColor, boxShadow: focus.boxShadow }, - '&.ant-input.error': fieldErrorStyles.error + '&.ant-input.error': { ...fieldErrorStyles.error, border: error.border } } } diff --git a/src/components/assets/styles/baseStyles.ts b/src/components/assets/styles/baseStyles.ts deleted file mode 100644 index c4dc9777..00000000 --- a/src/components/assets/styles/baseStyles.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { blues, grays } from './colors' -import { ColorManipulationTypes, manipulateColor } from '../../utils' -import { Theme, themes, ThemeType } from './themes' - -export const generateBaseStyles = ({ background, primary, text }: Theme) => { - const base = { - bgColor: background, - borderColor: grays.base, - color: text.primary - } - - const disabled = { - bgColor: grays['lighten-50'], - color: text.disabled - } - - const hover = { - borderColor: blues['lighten-10'] - } - - const focus = { - ...hover, - boxShadow: `0px 0px 4px ${manipulateColor( - primary, - 50, - ColorManipulationTypes.fade - )}` - } - - const placeholder = { - color: text.disabled - } - - return { base, disabled, focus, hover, placeholder } -} - -const { dark, light } = ThemeType - -export const generalStyles = { - [ThemeType.dark]: generateBaseStyles(themes[dark]), - [ThemeType.light]: generateBaseStyles(themes[light]) -} diff --git a/src/components/assets/styles/colors.ts b/src/components/assets/styles/colors.ts index 40e03110..495530b9 100644 --- a/src/components/assets/styles/colors.ts +++ b/src/components/assets/styles/colors.ts @@ -1,33 +1,33 @@ import { ColorManipulationTypes, manipulateColor } from '../../utils' -const { lighten, darken } = ColorManipulationTypes +const { shade, tint } = ColorManipulationTypes -const white = '#FEFEFE' -const black = '#111111' +const black = '#282A35' +const white = '#FFFFFF' const blue = '#2F54EB' -const gray = '#7E8083' -const green = '#81E154' -const orange = '#F9BB5D' -const red = '#E16854' -const yellow = '#F9D75D' +const green = '#59C93D' +const orange = 'EEAB47' +const red = '#EE5C47' -const lightenPercentages = [10, 30, 50, 70, 90] -const darkenPercentages = [10, 20, 50, 70] +const lightenPercentages = [10, 20, 30, 40, 50, 60, 70, 80, 90] +const darkenPercentages = [10, 20] interface LightShadeType { 'lighten-90': string + 'lighten-80': string 'lighten-70': string + 'lighten-60': string 'lighten-50': string + 'lighten-40': string 'lighten-30': string + 'lighten-20': string 'lighten-10': string } interface DarkShadeType { 'darken-10': string 'darken-20': string - 'darken-50': string - 'darken-70': string } interface ShadeType extends LightShadeType, DarkShadeType { @@ -39,7 +39,7 @@ const generateLightShades = (baseColor: string, percentArr: number[]) => { percentArr.forEach(percentage => { const shadeKey = `lighten-${percentage}` as keyof LightShadeType - shades[shadeKey] = manipulateColor(baseColor, percentage, lighten) + shades[shadeKey] = manipulateColor(baseColor, percentage, tint) }) return shades @@ -50,7 +50,7 @@ const generateDarkShades = (baseColor: string, percentArr: number[]) => { percentArr.forEach(percentage => { const shadeKey = `darken-${percentage}` as keyof DarkShadeType - shades[shadeKey] = manipulateColor(baseColor, percentage, darken) + shades[shadeKey] = manipulateColor(baseColor, percentage, shade) }) return shades @@ -66,22 +66,9 @@ const generateShades = (baseColor: string) => { return shades } -/* eslint-disable sort-keys */ -export const whites = { - base: white, - 'darken-5': manipulateColor(white, 5, darken), - 'darken-10': manipulateColor(white, 10, darken), - 'darken-15': manipulateColor(white, 15, darken), - 'darken-20': manipulateColor(white, 20, darken) -} -export const blacks = { - ...generateLightShades(black, lightenPercentages), - base: black -} - +export const whites = { base: white } export const blues = generateShades(blue) -export const grays = generateShades(gray) +export const blacks = generateShades(black) export const greens = { base: green } export const oranges = { base: orange } export const reds = { base: red } -export const yellows = { base: yellow } diff --git a/src/components/assets/styles/styleguide.ts b/src/components/assets/styles/styleguide.ts index 12f44ef3..15f7f837 100644 --- a/src/components/assets/styles/styleguide.ts +++ b/src/components/assets/styles/styleguide.ts @@ -1,3 +1,4 @@ +export * from './colors' export const defaultFieldWidth = '300px' export const fieldErrorStyles = { '@global': { @@ -15,3 +16,6 @@ export const fieldErrorStyles = { export const fontSizeRegular = '14px' export const linkColor = '#1EA7FD' export const skeletonButtonBorderColor = '#DFDFDF' +/* eslint-disable sort-keys */ +export const spacing = { s: 8, m: 16, l: 24, xl: 32 } +export * from './themes' diff --git a/src/components/assets/styles/themes.ts b/src/components/assets/styles/themes.ts index 810f5345..71fd81c4 100644 --- a/src/components/assets/styles/themes.ts +++ b/src/components/assets/styles/themes.ts @@ -1,38 +1,119 @@ -import { blues, grays, reds, whites } from './colors' +import { blacks, blues, greens, oranges, reds, whites } from './colors' +import { ColorManipulationTypes, manipulateColor } from '../../utils' + +export enum ThemeType { + dark = 'dark', + light = 'light' +} export interface Theme { - background: string + action: { + active: string + disabled: string + } + background: { + primary: string + secondary: string + } + border: string primary: string error: string + success: string text: { disabled: string; primary: string } + warning: string } export const lightPalette: Theme = { - background: whites.base, + action: { + active: blacks.base, + disabled: blacks['lighten-90'] // update when defined by Design + }, + background: { + primary: whites.base, + secondary: blacks['lighten-90'] + }, + border: blacks['lighten-80'], error: reds.base, primary: blues.base, + success: greens.base, text: { - disabled: grays.base, - primary: grays['darken-20'] - } + disabled: blacks['lighten-70'], // update when defined by Design + primary: blacks['lighten-30'] + }, + warning: oranges.base } export const darkPalette: Theme = { - background: grays['darken-50'], + action: { + active: whites.base, + disabled: blacks['lighten-20'] // update when defined by Design + }, + background: { + primary: blacks['darken-20'], + secondary: blacks.base + }, + border: blacks['darken-20'], error: reds.base, primary: blues.base, + success: greens.base, text: { - disabled: whites.base, - primary: whites.base - } + disabled: blacks['lighten-20'], // update when defined by Design + primary: blacks['lighten-50'] + }, + warning: oranges.base } -export enum ThemeType { - dark = 'dark', - light = 'light' +export const generateThemedStyles = ({ + action, + background, + border, + error, + primary, + text +}: Theme) => { + const base = { + backgroundColor: background.primary, + borderColor: border, + color: text.primary + } + + const disabled = { + backgroundColor: action.disabled, + color: text.disabled + } + + const errorStyles = { + border: `1px solid ${error}` + } + + const hover = { + borderColor: blues['lighten-10'] // update when defined by Design + } + + const focus = { + ...hover, + boxShadow: `0px 0px 4px ${manipulateColor( + primary, + 50, + ColorManipulationTypes.fade + )}` // update when defined by Design + } + + const placeholder = { + color: text.disabled // update when defined by Design + } + + return { base, disabled, error: errorStyles, focus, hover, placeholder } } export const themes = { [ThemeType.dark]: darkPalette, [ThemeType.light]: lightPalette } + +const { dark, light } = ThemeType + +export const themedStyles = { + [ThemeType.dark]: generateThemedStyles(themes[dark]), + [ThemeType.light]: generateThemedStyles(themes[light]) +} diff --git a/src/components/index.ts b/src/components/index.ts index 25b9c141..97990a34 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,4 +1,5 @@ export { default as Avatar } from './Avatar' +export * from './assets/styles/styleguide' export { default as Button } from './Button' export { default as Form } from './Form' export { default as Input } from './Input' diff --git a/src/components/utils.test.ts b/src/components/utils.test.ts index 1b1cdb6c..57a826cd 100644 --- a/src/components/utils.test.ts +++ b/src/components/utils.test.ts @@ -1,4 +1,3 @@ -import Color from 'color' import { ColorManipulationTypes, getDataTestAttributeProp, @@ -26,29 +25,29 @@ describe('getDataTestAttributeProp', () => { }) describe('Color utils', () => { - const mockColor = 'hsl(100, 50%, 50%)' + const mockColor = '#2F54EB' const mockPercent = 50 - const { darken, fade, lighten } = ColorManipulationTypes + const { fade, shade, tint } = ColorManipulationTypes describe('manipulateColor', () => { - it('should lighten the input color by given percentage for argument type lighten', () => { + it('should tint the input color by given percentage for argument type tint', () => { const mockLightenedColor = manipulateColor( mockColor, mockPercent, - lighten + tint ) - expect(mockLightenedColor).toBe(Color('hsl(100, 50%, 75%)').hex()) + expect(mockLightenedColor.toUpperCase()).toBe('#97AAF5') }) - it('should darken the input color by given percentage for argument type darken', () => { + it('should shade the input color by given percentage for argument type shade', () => { const mockDarkenedColor = manipulateColor( mockColor, mockPercent, - darken + shade ) - expect(mockDarkenedColor).toBe(Color('hsl(100, 50%, 25%)').hex()) + expect(mockDarkenedColor.toUpperCase()).toBe('#182A76') }) it('should fade the input color by given percentage for argument type fade', () => { @@ -60,11 +59,11 @@ describe('Color utils', () => { it('should throw an error if percent value is out of bounds', () => { expect(() => { - manipulateColor(mockColor, -1, lighten) + manipulateColor(mockColor, -1, tint) }).toThrow() expect(() => { - manipulateColor(mockColor, 101, darken) + manipulateColor(mockColor, 101, shade) }).toThrow() }) }) diff --git a/src/components/utils.ts b/src/components/utils.ts index b0a49cd5..65451093 100644 --- a/src/components/utils.ts +++ b/src/components/utils.ts @@ -25,18 +25,34 @@ export const placementOptions: TooltipPlacement[] = [ 'topRight' ] +interface RGB { + r: number + g: number + b: number +} + +const rgbToHex = (rgb: RGB) => Color(rgb).hex() + +const getRgb = (colorValue: string) => Color(colorValue).rgb().object() + const getRgba = (color: string, a: number) => { const [r, g, b] = Color(color).rgb().array() return `rgba(${r}, ${g}, ${b}, ${a})` } +const tintFormula = (colorVal: number, ratio: number) => + colorVal + (255 - colorVal) * ratio + +const shadeFormula = (colorVal: number, ratio: number) => colorVal * (1 - ratio) + export enum ColorManipulationTypes { - darken = 'darken', fade = 'fade', - lighten = 'lighten' + shade = 'shade', + tint = 'tint' } +/* eslint-disable sort-keys */ export const manipulateColor = ( color: string, percent: number, @@ -45,21 +61,36 @@ export const manipulateColor = ( if (percent < 0 || percent > 100) throw new Error('please provide a valid percentage') + const rgb = getRgb(color) const clr = Color(color) const ratio = percent / 100 switch (colorChangeType) { - case ColorManipulationTypes.darken: - return clr.darken(ratio).hex() - case ColorManipulationTypes.fade: { const fadedColor = clr.fade(ratio) return getRgba(fadedColor.hex(), fadedColor.alpha()) } - case ColorManipulationTypes.lighten: - return clr.lighten(ratio).hex() + case ColorManipulationTypes.shade: { + const shade = { + r: shadeFormula(rgb.r, ratio), + g: shadeFormula(rgb.g, ratio), + b: shadeFormula(rgb.b, ratio) + } + + return rgbToHex(shade) + } + + case ColorManipulationTypes.tint: { + const shade = { + r: tintFormula(rgb.r, ratio), + g: tintFormula(rgb.g, ratio), + b: tintFormula(rgb.b, ratio) + } + + return rgbToHex(shade) + } } } From 6058367e4bbbae762f567777e38bbf8ed97c88f0 Mon Sep 17 00:00:00 2001 From: sam-m-m Date: Thu, 8 Oct 2020 22:02:31 -0700 Subject: [PATCH 19/24] feat #92 - Fix bug: missing decorator class, update failing snapshots --- .storybook/Decorator.tsx | 4 +- .storybook/__tests__/Decorator.test.tsx | 13 ++ src/__snapshots__/storybook.test.ts.snap | 157 ++++++++++++----------- 3 files changed, 98 insertions(+), 76 deletions(-) create mode 100644 .storybook/__tests__/Decorator.test.tsx diff --git a/.storybook/Decorator.tsx b/.storybook/Decorator.tsx index ef9ac45d..95ed2ba7 100644 --- a/.storybook/Decorator.tsx +++ b/.storybook/Decorator.tsx @@ -6,7 +6,7 @@ const { dark } = ThemeType const useStyles = createUseStyles({ '@global': { - [`.${dark}`]: { + [`.${dark} .decorator`]: { backgroundColor: themes[dark].background.secondary } }, @@ -15,7 +15,7 @@ const useStyles = createUseStyles({ } }) -interface DecoratorProps { +export interface DecoratorProps { children: ReactNode classes?: string[] } diff --git a/.storybook/__tests__/Decorator.test.tsx b/.storybook/__tests__/Decorator.test.tsx new file mode 100644 index 00000000..925f7fa2 --- /dev/null +++ b/.storybook/__tests__/Decorator.test.tsx @@ -0,0 +1,13 @@ +import React from 'react' +import Decorator, { DecoratorProps } from '../Decorator' +import { shallow, ShallowWrapper } from 'enzyme' + +let wrapper: ShallowWrapper + +describe('Avatar', () => { + it('renders', () => { + wrapper = shallow(A) + + expect(wrapper).toHaveLength(1) + }) +}) diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap index cc36d6b3..c40339d2 100644 --- a/src/__snapshots__/storybook.test.ts.snap +++ b/src/__snapshots__/storybook.test.ts.snap @@ -1,36 +1,44 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Storyshots Avatar Default 1`] = ` - - D + + D + - +
`; exports[`Storyshots Avatar Icon 1`] = ` - - - dassana.svg - - + + dassana.svg + + +
`; exports[`Storyshots Button Default 1`] = ` @@ -223,13 +231,17 @@ exports[`Storyshots Icon Custom 1`] = ` `; exports[`Storyshots Icon Predefined 1`] = ` - - dassana.svg - + + dassana.svg + +
`; exports[`Storyshots Input Default 1`] = ` @@ -455,14 +467,10 @@ exports[`Storyshots Notifications Success 1`] = ` onClick={[Function]} type="button" > - - dassana.svg - - + + Success + +
`; @@ -477,14 +485,10 @@ exports[`Storyshots Notifications Warning 1`] = ` onClick={[Function]} type="button" > - - dassana.svg - - + + Warning + +
`; @@ -504,11 +508,13 @@ exports[`Storyshots Popover Default 1`] = ` onMouseEnter={[Function]} onMouseLeave={[Function]} > - dassana + width={32} + > + dassana.svg +
@@ -530,11 +536,13 @@ exports[`Storyshots Popover Title 1`] = ` onMouseEnter={[Function]} onMouseLeave={[Function]} > - dassana + width={32} + > + dassana.svg +
@@ -975,11 +983,13 @@ exports[`Storyshots Select Icon 1`] = ` - aws.svg + width={15} + > + aws.svg + AWS @@ -1014,18 +1024,11 @@ exports[`Storyshots Select Icon 1`] = ` viewBox="64 64 896 896" width="1em" > - - aws.svg - - - - AWS - -
+ + + @@ -1340,13 +1343,19 @@ exports[`Storyshots Tooltip Default 1`] = ` } } > - - dassana.svg - - + + dassana.svg + + + `; From d86d62f4e186af3a1a54dd61f59d37b559324779 Mon Sep 17 00:00:00 2001 From: sam-m-m Date: Fri, 9 Oct 2020 11:00:57 -0700 Subject: [PATCH 20/24] feat #92 - Address PR comments --- src/components/utils.ts | 19 +++++-------------- 1 file changed, 5 insertions(+), 14 deletions(-) diff --git a/src/components/utils.ts b/src/components/utils.ts index 65451093..373d0c2c 100644 --- a/src/components/utils.ts +++ b/src/components/utils.ts @@ -1,4 +1,5 @@ import Color from 'color' +import mapValues from 'lodash/mapValues' import { TooltipPlacement } from 'antd/es/tooltip' export const TAG = 'data-test' @@ -25,7 +26,7 @@ export const placementOptions: TooltipPlacement[] = [ 'topRight' ] -interface RGB { +type RGB = { r: number g: number b: number @@ -33,8 +34,6 @@ interface RGB { const rgbToHex = (rgb: RGB) => Color(rgb).hex() -const getRgb = (colorValue: string) => Color(colorValue).rgb().object() - const getRgba = (color: string, a: number) => { const [r, g, b] = Color(color).rgb().array() @@ -61,8 +60,8 @@ export const manipulateColor = ( if (percent < 0 || percent > 100) throw new Error('please provide a valid percentage') - const rgb = getRgb(color) const clr = Color(color) + const rgb = Color(color).rgb().object() as RGB const ratio = percent / 100 @@ -74,21 +73,13 @@ export const manipulateColor = ( } case ColorManipulationTypes.shade: { - const shade = { - r: shadeFormula(rgb.r, ratio), - g: shadeFormula(rgb.g, ratio), - b: shadeFormula(rgb.b, ratio) - } + const shade = mapValues(rgb, value => shadeFormula(value, ratio)) return rgbToHex(shade) } case ColorManipulationTypes.tint: { - const shade = { - r: tintFormula(rgb.r, ratio), - g: tintFormula(rgb.g, ratio), - b: tintFormula(rgb.b, ratio) - } + const shade = mapValues(rgb, value => tintFormula(value, ratio)) return rgbToHex(shade) } From 504682fe1a911cc3fb560d47a37639de705a4f5e Mon Sep 17 00:00:00 2001 From: sam-m-m Date: Fri, 9 Oct 2020 11:31:01 -0700 Subject: [PATCH 21/24] feat #92 - Update font to Inter --- .storybook/index.css | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/.storybook/index.css b/.storybook/index.css index f3368fd0..499022d6 100644 --- a/.storybook/index.css +++ b/.storybook/index.css @@ -1,11 +1,14 @@ /* This is the global dassana stylesheet. It should match the global stylesheet in web-orchestrator. */ @import '~normalize.css'; -@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap'); -body { - font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, - Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; +html, +body, +#root, +.App { + font-family: 'Inter', sans-serif; + height: 100%; } /* Storybook styles */ From 3874802e860aef651b95d5efd49ed9779714e2ca Mon Sep 17 00:00:00 2001 From: sam-m-m Date: Fri, 9 Oct 2020 11:42:03 -0700 Subject: [PATCH 22/24] feat #92 - Fix Decorator test typo --- .storybook/__tests__/Decorator.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.storybook/__tests__/Decorator.test.tsx b/.storybook/__tests__/Decorator.test.tsx index 925f7fa2..34f5525f 100644 --- a/.storybook/__tests__/Decorator.test.tsx +++ b/.storybook/__tests__/Decorator.test.tsx @@ -4,9 +4,9 @@ import { shallow, ShallowWrapper } from 'enzyme' let wrapper: ShallowWrapper -describe('Avatar', () => { +describe('Decorator', () => { it('renders', () => { - wrapper = shallow(A) + wrapper = shallow(Decorator) expect(wrapper).toHaveLength(1) }) From d990d296c077a49cc4b3705cc95d3d4d8becea4b Mon Sep 17 00:00:00 2001 From: sam-m-m Date: Fri, 9 Oct 2020 15:08:17 -0700 Subject: [PATCH 23/24] feat #92 - Fix bug: Add missing index file to assets/styles --- src/components/assets/styles/index.ts | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 src/components/assets/styles/index.ts diff --git a/src/components/assets/styles/index.ts b/src/components/assets/styles/index.ts new file mode 100644 index 00000000..0aa05eac --- /dev/null +++ b/src/components/assets/styles/index.ts @@ -0,0 +1,3 @@ +export * from './colors' +export * from './styleguide' +export * from './themes' From e608fc903b6edef27682985d2288ed87786b2d75 Mon Sep 17 00:00:00 2001 From: sam-m-m Date: Fri, 9 Oct 2020 16:03:12 -0700 Subject: [PATCH 24/24] feat #92 - Fix bug: exported types not working --- src/components/Form/Form.stories.tsx | 2 +- src/components/Form/Form.test.tsx | 2 +- src/components/Form/index.tsx | 3 +-- src/components/Table/Table.stories.mdx | 2 +- src/components/Table/Table.stories.tsx | 2 +- src/components/Table/__tests__/Table.test.tsx | 2 +- src/components/Table/index.tsx | 3 +-- src/components/index.ts | 6 +++--- 8 files changed, 10 insertions(+), 12 deletions(-) diff --git a/src/components/Form/Form.stories.tsx b/src/components/Form/Form.stories.tsx index 94f99558..98a04dd0 100644 --- a/src/components/Form/Form.stories.tsx +++ b/src/components/Form/Form.stories.tsx @@ -3,7 +3,7 @@ import Decorator from '../../../.storybook/Decorator' import { iconOptions } from '../Select/fixtures/sample_options' import React from 'react' import treeData from '../Tree/fixtures/0_sample_data' -import Form, { FormProps } from './index' +import { Form, FormProps } from './index' import { Meta, Story } from '@storybook/react/types-6-0' export default { diff --git a/src/components/Form/Form.test.tsx b/src/components/Form/Form.test.tsx index 59146043..99277643 100644 --- a/src/components/Form/Form.test.tsx +++ b/src/components/Form/Form.test.tsx @@ -1,7 +1,7 @@ import FieldContext from './FieldContext' import FormSubmitButton from './FormSubmitButton' import React from 'react' -import Form, { FormProps } from './index' +import { Form, FormProps } from './index' import { mount, shallow, ShallowWrapper } from 'enzyme' jest.mock('react-hook-form', () => ({ diff --git a/src/components/Form/index.tsx b/src/components/Form/index.tsx index d13224f2..1069c087 100644 --- a/src/components/Form/index.tsx +++ b/src/components/Form/index.tsx @@ -24,7 +24,7 @@ export interface FormProps { onSubmit: SubmitHandler } -function Form({ +export function Form({ children, initialValues = {} as Model, loading = false, @@ -59,4 +59,3 @@ Form.Select = FormSelect Form.Tree = FormTree export * from './types' -export default Form diff --git a/src/components/Table/Table.stories.mdx b/src/components/Table/Table.stories.mdx index ec796a8e..d355eee9 100644 --- a/src/components/Table/Table.stories.mdx +++ b/src/components/Table/Table.stories.mdx @@ -1,5 +1,5 @@ import * as stories from './Table.stories.tsx' -import Table from '.' +import { Table } from '.' import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks' # Table diff --git a/src/components/Table/Table.stories.tsx b/src/components/Table/Table.stories.tsx index f9a63116..cad284fe 100644 --- a/src/components/Table/Table.stories.tsx +++ b/src/components/Table/Table.stories.tsx @@ -1,6 +1,6 @@ import React from 'react' import { Story } from '@storybook/react/types-6-0' -import Table, { TableProps } from '.' +import { Table, TableProps } from '.' import tableData0, { Person } from './fixtures/0_sample_data' import tableData1, { File } from './fixtures/1_sample_data' import tableData2, { Client } from './fixtures/2_sample_data' diff --git a/src/components/Table/__tests__/Table.test.tsx b/src/components/Table/__tests__/Table.test.tsx index 04f0ccd9..5975db8e 100644 --- a/src/components/Table/__tests__/Table.test.tsx +++ b/src/components/Table/__tests__/Table.test.tsx @@ -7,7 +7,7 @@ import mockData, { } from '../../../__mocks__/table_mock_data' import mockData0, { Person } from '../fixtures/0_sample_data' import { mount, ReactWrapper } from 'enzyme' -import Table, { TableProps } from '..' +import { Table, TableProps } from '..' /* Helper functions */ export function createTable(tableProps: TableProps) { diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx index a63c4fd8..6f9a7da3 100644 --- a/src/components/Table/index.tsx +++ b/src/components/Table/index.tsx @@ -25,7 +25,7 @@ export interface TableProps extends CommonComponentProps { search?: boolean } -function Table({ +export function Table({ columns, data, dataTag, @@ -88,4 +88,3 @@ function Table({ } export * from './types' -export default Table diff --git a/src/components/index.ts b/src/components/index.ts index 97990a34..ca7204a5 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,7 +1,7 @@ export { default as Avatar } from './Avatar' -export * from './assets/styles/styleguide' +export * from './assets/styles' export { default as Button } from './Button' -export { default as Form } from './Form' +export * from './Form' export { default as Input } from './Input' export { default as Icon } from './Icon' export { default as Link } from './Link' @@ -10,7 +10,7 @@ export { default as Popover } from './Popover' export { default as RadioGroup } from './RadioGroup' export { default as Select } from './Select' export { default as Skeleton } from './Skeleton' -export { default as Table } from './Table' +export * from './Table' export { default as Tag } from './Tag' export { default as Toggle } from './Toggle' export { default as Tooltip } from './Tooltip'