From ab6f7ec27e97a968f7ee1a6b199f085eda531561 Mon Sep 17 00:00:00 2001 From: Michael Altamirano Date: Fri, 18 Sep 2020 10:25:42 -0500 Subject: [PATCH 01/10] Add emotion-theming and use with Toggle component --- .storybook/preview.js | 2 +- package.json | 1 + src/shared-components/toggle/index.js | 81 +++++++++++++++++---------- src/shared-components/toggle/style.js | 2 +- yarn.lock | 2 +- 5 files changed, 56 insertions(+), 32 deletions(-) diff --git a/.storybook/preview.js b/.storybook/preview.js index 29a92a5a7..6ae6715ca 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -105,7 +105,7 @@ addParameters({ }, }); -const req = require.context('../stories', true, /.(ts|tsx|js)$/); +const req = require.context('../stories/toggle', true, /.(ts|tsx|js)$/); function loadStories() { req.keys().forEach(req); } diff --git a/package.json b/package.json index df5ca69f4..95f81600a 100644 --- a/package.json +++ b/package.json @@ -131,6 +131,7 @@ "@emotion/core": "^10.0.35", "@emotion/styled": "^10.0.27", "@react-aria/focus": "^3.0.2", + "emotion-theming": "^10.0.27", "lodash.round": "^4.0.4", "lodash.throttle": "^4.1.1", "lodash.uniqueid": "^4.0.1", diff --git a/src/shared-components/toggle/index.js b/src/shared-components/toggle/index.js index 6aedc4aef..94c46a9fd 100644 --- a/src/shared-components/toggle/index.js +++ b/src/shared-components/toggle/index.js @@ -1,9 +1,12 @@ import PropTypes from 'prop-types'; import React from 'react'; import ToggleButton from 'react-toggle-button'; +import { ThemeProvider } from 'emotion-theming'; import { COLORS } from '../../constants'; -import { Container, Label, trackStyle, thumbStyle } from './style'; +import { + Container, Label, trackStyle, thumbStyle, +} from './style'; const propTypes = { checked: PropTypes.bool, @@ -16,34 +19,54 @@ const defaultProps = { label: '', }; -const Toggle = ({ checked, label, onChange }) => ( - - {label && } - - -); +// placeholders for actual theme logic +const darkTheme = { + COLORS: { + primaryTint1: '#000000', + primaryTint5: '#cccccc', + secondary: '#414a4c', + activeThumb: COLORS.white, + inactiveThumb: COLORS.white, + }, +}; + +// mock +const useTheme = theme => (theme === 'someTheme' ? {} : darkTheme); + +const Toggle = ({ checked, label, onChange }) => { + const theme = useTheme(); + + return ( + + + {label && } + + + + ); +}; Toggle.propTypes = propTypes; Toggle.defaultProps = defaultProps; diff --git a/src/shared-components/toggle/style.js b/src/shared-components/toggle/style.js index 674f7d23c..76749862e 100644 --- a/src/shared-components/toggle/style.js +++ b/src/shared-components/toggle/style.js @@ -17,7 +17,7 @@ export const Container = styled.div` `; export const Label = styled.span` - color: ${COLORS.primaryTint1}; + color: ${({ theme }) => theme.COLORS.primaryTint1}; margin: 0; font-size: ${SPACER.medium}; line-height: ${SPACER.large}; diff --git a/yarn.lock b/yarn.lock index 1bbaa12ad..24c81ac2c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5926,7 +5926,7 @@ emojis-list@^3.0.0: resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78" integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q== -emotion-theming@^10.0.19: +emotion-theming@^10.0.19, emotion-theming@^10.0.27: version "10.0.27" resolved "https://registry.yarnpkg.com/emotion-theming/-/emotion-theming-10.0.27.tgz#1887baaec15199862c89b1b984b79806f2b9ab10" integrity sha512-MlF1yu/gYh8u+sLUqA0YuA9JX0P4Hb69WlKc/9OLo+WCXuX6sy/KoIa+qJimgmr2dWqnypYKYPX37esjDBbhdw== From dea7c1d4fd26bc1f1ce31db99d088bd51bc2f13b Mon Sep 17 00:00:00 2001 From: Michael Altamirano Date: Fri, 18 Sep 2020 10:27:17 -0500 Subject: [PATCH 02/10] Add emotion-theming to peerDependencies, peg version --- package.json | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 95f81600a..dfaa81947 100644 --- a/package.json +++ b/package.json @@ -128,10 +128,10 @@ "yarn-run-all": "^3.1.1" }, "dependencies": { - "@emotion/core": "^10.0.35", - "@emotion/styled": "^10.0.27", + "@emotion/core": "10.0.35", + "@emotion/styled": "10.0.27", "@react-aria/focus": "^3.0.2", - "emotion-theming": "^10.0.27", + "emotion-theming": "10.0.27", "lodash.round": "^4.0.4", "lodash.throttle": "^4.1.1", "lodash.uniqueid": "^4.0.1", @@ -147,6 +147,7 @@ "peerDependencies": { "@emotion/core": "10.0.35", "@emotion/styled": "10.0.27", + "emotion-theming": "10.0.27", "react": "^16.13.1", "react-dom": "^16.13.1" }, From 9f06fb00f0a80bdc62874560bd7de1b7666cd030 Mon Sep 17 00:00:00 2001 From: Michael Altamirano Date: Fri, 18 Sep 2020 10:39:49 -0500 Subject: [PATCH 03/10] Add Swap Theme button --- src/shared-components/toggle/index.js | 23 ++++++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/src/shared-components/toggle/index.js b/src/shared-components/toggle/index.js index 94c46a9fd..08b039fbe 100644 --- a/src/shared-components/toggle/index.js +++ b/src/shared-components/toggle/index.js @@ -21,6 +21,7 @@ const defaultProps = { // placeholders for actual theme logic const darkTheme = { + __type: 'darkTheme', COLORS: { primaryTint1: '#000000', primaryTint5: '#cccccc', @@ -30,14 +31,30 @@ const darkTheme = { }, }; -// mock -const useTheme = theme => (theme === 'someTheme' ? {} : darkTheme); +const lightTheme = { + __type: 'lightTheme', + COLORS: { + primaryTint1: COLORS.primaryTint1, + primaryTint5: COLORS.primaryTint3, + secondary: COLORS.secondary, + activeThumb: COLORS.white, + inactiveThumb: COLORS.white, + }, +}; const Toggle = ({ checked, label, onChange }) => { - const theme = useTheme(); + const [theme, setTheme] = React.useState(lightTheme); + + const toggleTheme = () => + theme.__type === 'lightTheme' ? setTheme(darkTheme) : setTheme(lightTheme); return ( +
+ +
{label && } Date: Fri, 18 Sep 2020 10:43:23 -0500 Subject: [PATCH 04/10] Update snapshot --- .../toggle/__snapshots__/test.js.snap | 236 +++++++++--------- 1 file changed, 123 insertions(+), 113 deletions(-) diff --git a/src/shared-components/toggle/__snapshots__/test.js.snap b/src/shared-components/toggle/__snapshots__/test.js.snap index 63093c9a1..64a9b765c 100644 --- a/src/shared-components/toggle/__snapshots__/test.js.snap +++ b/src/shared-components/toggle/__snapshots__/test.js.snap @@ -1,7 +1,16 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[` UI snapshot renders the component 1`] = ` -.emotion-2 { +Array [ +
+ +
, + .emotion-2 { position: relative; display: -webkit-box; display: -webkit-flex; @@ -41,49 +50,35 @@ exports[` UI snapshot renders the component 1`] = ` }
- - Label Text - -
+ + Label Text +
@@ -91,101 +86,116 @@ exports[` UI snapshot renders the component 1`] = ` style={ Object { "alignItems": "center", - "color": "#FAFAFA", + "backgroundColor": "rgb(195,192,205)", + "borderRadius": 100, "display": "flex", - "fontFamily": "'Helvetica Neue', Helvetica, sans-serif", - "fontSize": 11, - "height": 20, + "height": 24, "justifyContent": "center", - "left": 4, - "lineHeight": 0, - "marginBottom": "auto", - "marginTop": "auto", - "opacity": 0, - "position": "relative", - "width": 26, + "padding": 0, + "width": 40, } } > - +
+ +
+
+ +
- +
-
-
-
- -
-
+
, +] `; From bc85a6205d7ed07ae2babaaf86242f37685c42e1 Mon Sep 17 00:00:00 2001 From: Michael Altamirano Date: Fri, 18 Sep 2020 11:00:06 -0500 Subject: [PATCH 05/10] Fix lockfile --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index 24c81ac2c..56154f3c6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1672,7 +1672,7 @@ "@emotion/utils" "0.11.3" "@emotion/weak-memoize" "0.2.5" -"@emotion/core@^10.0.20", "@emotion/core@^10.0.35", "@emotion/core@^10.0.9": +"@emotion/core@10.0.35", "@emotion/core@^10.0.20", "@emotion/core@^10.0.9": version "10.0.35" resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.35.tgz#513fcf2e22cd4dfe9d3894ed138c9d7a859af9b3" integrity sha512-sH++vJCdk025fBlRZSAhkRlSUoqSqgCzYf5fMOmqqi3bM6how+sQpg3hkgJonj8GxXM4WbD7dRO+4tegDB9fUw== @@ -1752,7 +1752,7 @@ "@emotion/serialize" "^0.11.15" "@emotion/utils" "0.11.3" -"@emotion/styled@^10.0.17", "@emotion/styled@^10.0.27": +"@emotion/styled@10.0.27", "@emotion/styled@^10.0.17": version "10.0.27" resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.0.27.tgz#12cb67e91f7ad7431e1875b1d83a94b814133eaf" integrity sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q== @@ -5926,7 +5926,7 @@ emojis-list@^3.0.0: resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78" integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q== -emotion-theming@^10.0.19, emotion-theming@^10.0.27: +emotion-theming@10.0.27, emotion-theming@^10.0.19: version "10.0.27" resolved "https://registry.yarnpkg.com/emotion-theming/-/emotion-theming-10.0.27.tgz#1887baaec15199862c89b1b984b79806f2b9ab10" integrity sha512-MlF1yu/gYh8u+sLUqA0YuA9JX0P4Hb69WlKc/9OLo+WCXuX6sy/KoIa+qJimgmr2dWqnypYKYPX37esjDBbhdw== From b358d772130286ab58093e5885eb5ffe4fef50b1 Mon Sep 17 00:00:00 2001 From: Michael Altamirano Date: Tue, 22 Sep 2020 13:32:59 -0500 Subject: [PATCH 06/10] WIP 2--no snapshots updated and type errors due to breaking existing COLORS functionality --- src/constants/colors/index.ts | 56 --------------------- src/constants/colors/primary.ts | 61 +++++++++++++++++++++++ src/constants/colors/secondary.ts | 61 +++++++++++++++++++++++ src/constants/colors/test.ts | 10 ++++ src/constants/themes/index.ts | 2 + src/constants/themes/primary.ts | 7 +++ src/constants/themes/secondary.ts | 7 +++ src/constants/themes/types.ts | 14 ++++++ src/shared-components/accordion/index.tsx | 2 +- src/shared-components/carousel/style.ts | 2 +- src/shared-components/toggle/index.js | 40 ++++----------- src/shared-components/typography/index.js | 6 +-- stories/tooltip/index.js | 2 +- 13 files changed, 177 insertions(+), 93 deletions(-) create mode 100644 src/constants/colors/primary.ts create mode 100644 src/constants/colors/secondary.ts create mode 100644 src/constants/colors/test.ts create mode 100644 src/constants/themes/index.ts create mode 100644 src/constants/themes/primary.ts create mode 100644 src/constants/themes/secondary.ts create mode 100644 src/constants/themes/types.ts diff --git a/src/constants/colors/index.ts b/src/constants/colors/index.ts index 1b4c0b598..a32b236c0 100644 --- a/src/constants/colors/index.ts +++ b/src/constants/colors/index.ts @@ -65,61 +65,6 @@ export const legacyColors = { purple60: '#858298', }; -export const colorAliases = { - // Legacy - purple: brandColors.purple100, - purpleTint1: brandColors.purple85, - purpleTint2: brandColors.purple70, - - // brand colors - primary: brandColors.purple100, - primaryTint1: brandColors.purple85, - primaryTint2: brandColors.purple70, - primaryTint3: brandColors.purple30, - secondary: brandColors.lavender100, - tertiary: brandColors.purple4, - - // general colors - success: brandColors.statusGreen, - successBackground: brandColors.statusGreenBackground, - successBorder: brandColors.statusGreenBorder, - info: brandColors.statusPurple, - infoBackground: brandColors.statusPurpleBackground, - infoBorder: brandColors.statusPurpleBorder, - error: brandColors.statusRed, - errorBackground: brandColors.statusRedBackground, - errorBorder: brandColors.statusRedBorder, - default: brandColors.purple70, - defaultBackground: brandColors.purple10, - defaultBorder: brandColors.purple15, - accent: brandColors.red, - disabled: brandColors.purple10, - failure: brandColors.red, - hover: brandColors.purple4, - warning: legacyColors.yellowLight, - - // ui colors - background: brandColors.purple4, - backgroundDark: brandColors.purple4, - border: brandColors.purple10, - divider: brandColors.purple10, - - // form colors - radioBorder: brandColors.purple30, - radioBorderSelected: brandColors.lavender100, - - // typography - textMuted: brandColors.purple70, - textGhost: brandColors.purple30, - textDisabled: brandColors.purple30, - - // overlay - overlay: 'rgba(45, 45, 48, 0.7)', - overlayHidden: 'rgba(45, 45, 48, 0)', - overlaySolid: 'rgba(45, 45, 48, 1)', - overlayTransition: 'rgba(45, 45, 48, 0.3)', -}; - export const postcardColors = { postcardSocialBg: '#f2f2f2', postcardWhite: brandColors.purple4, @@ -154,7 +99,6 @@ export const guideColors = { const sharedColors = { ...brandColors, - ...colorAliases, ...postcardColors, ...guideColors, }; diff --git a/src/constants/colors/primary.ts b/src/constants/colors/primary.ts new file mode 100644 index 000000000..1e5d87219 --- /dev/null +++ b/src/constants/colors/primary.ts @@ -0,0 +1,61 @@ +import PropTypes from 'prop-types'; + +import COLORS from '.'; + +const PRIMARY_COLORS = { + // brand colors + primary: COLORS.purple100, + primaryTint1: COLORS.purple85, + primaryTint2: COLORS.purple70, + primaryTint3: COLORS.purple30, + secondary: COLORS.lavender100, + tertiary: COLORS.purple4, + + // general colors + success: COLORS.statusGreen, + successBackground: COLORS.statusGreenBackground, + successBorder: COLORS.statusGreenBorder, + info: COLORS.statusPurple, + infoBackground: COLORS.statusPurpleBackground, + infoBorder: COLORS.statusPurpleBorder, + error: COLORS.statusRed, + errorBackground: COLORS.statusRedBackground, + errorBorder: COLORS.statusRedBorder, + default: COLORS.purple70, + defaultBackground: COLORS.purple10, + defaultBorder: COLORS.purple15, + accent: COLORS.red, + disabled: COLORS.purple10, + failure: COLORS.red, + hover: COLORS.purple4, + warning: COLORS.yellowLight, + + // ui colors + background: COLORS.purple4, + backgroundDark: COLORS.purple4, + border: COLORS.purple10, + divider: COLORS.purple10, + + // form colors + radioBorder: COLORS.purple30, + radioBorderSelected: COLORS.lavender100, + + // typography + textMuted: COLORS.purple70, + textGhost: COLORS.purple30, + textDisabled: COLORS.purple30, + + // overlay + overlay: 'rgba(45, 45, 48, 0.7)', + overlayHidden: 'rgba(45, 45, 48, 0)', + overlaySolid: 'rgba(45, 45, 48, 1)', + overlayTransition: 'rgba(45, 45, 48, 0.3)', + + white: COLORS.white, +}; + +export const PRIMARY_COLORS_PROP_TYPES = PropTypes.oneOf( + Object.values(PRIMARY_COLORS), +); + +export default PRIMARY_COLORS; diff --git a/src/constants/colors/secondary.ts b/src/constants/colors/secondary.ts new file mode 100644 index 000000000..38b05973e --- /dev/null +++ b/src/constants/colors/secondary.ts @@ -0,0 +1,61 @@ +import PropTypes from 'prop-types'; + +import { COLORS } from '..'; + +const SECONDARY_COLORS = { + // brand colors + primary: null, + primaryTint1: '#000000', + primaryTint2: null, + primaryTint3: '#cccccc', + secondary: '#414a4c', + tertiary: null, + + // general colors + success: null, + successBackground: null, + successBorder: null, + info: null, + infoBackground: null, + infoBorder: null, + error: null, + errorBackground: null, + errorBorder: null, + default: null, + defaultBackground: null, + defaultBorder: null, + accent: null, + disabled: null, + failure: null, + hover: null, + warning: null, + + // ui colors + background: null, + backgroundDark: null, + border: null, + divider: null, + + // form colors + radioBorder: null, + radioBorderSelected: null, + + // typography + textMuted: null, + textGhost: null, + textDisabled: null, + + // overlay + overlay: null, + overlayHidden: null, + overlaySolid: null, + overlayTransition: null, + + white: COLORS.white, +}; + +export const SECONDARY_COLORS_PROP_TYPES = PropTypes.oneOf( + Object.values(SECONDARY_COLORS), +); + +export default SECONDARY_COLORS; diff --git a/src/constants/colors/test.ts b/src/constants/colors/test.ts new file mode 100644 index 000000000..4a8666abe --- /dev/null +++ b/src/constants/colors/test.ts @@ -0,0 +1,10 @@ +import PRIMARY_COLORS from './primary'; +import SECONDARY_COLORS from './secondary'; + +describe('theme colors', () => { + it('primary and secondary colors have the same number of properties', () => { + expect(Object.keys(PRIMARY_COLORS).length).toEqual( + Object.keys(SECONDARY_COLORS).length, + ); + }); +}); diff --git a/src/constants/themes/index.ts b/src/constants/themes/index.ts new file mode 100644 index 000000000..7cadc793d --- /dev/null +++ b/src/constants/themes/index.ts @@ -0,0 +1,2 @@ +export { default as primaryTheme } from './primary'; +export { default as secondaryTheme } from './secondary'; diff --git a/src/constants/themes/primary.ts b/src/constants/themes/primary.ts new file mode 100644 index 000000000..51dadaef1 --- /dev/null +++ b/src/constants/themes/primary.ts @@ -0,0 +1,7 @@ +import PRIMARY_COLORS from '../colors/primary'; + +export default { + __type: 'primary', + BOX_SHADOW: {}, + COLORS: PRIMARY_COLORS, +} as const; diff --git a/src/constants/themes/secondary.ts b/src/constants/themes/secondary.ts new file mode 100644 index 000000000..e4545e604 --- /dev/null +++ b/src/constants/themes/secondary.ts @@ -0,0 +1,7 @@ +import SECONDARY_COLORS from '../colors/secondary'; + +export default { + __type: 'secondary', + BOX_SHADOW: {}, + COLORS: SECONDARY_COLORS, +} as const; diff --git a/src/constants/themes/types.ts b/src/constants/themes/types.ts new file mode 100644 index 000000000..e97624573 --- /dev/null +++ b/src/constants/themes/types.ts @@ -0,0 +1,14 @@ +import primaryTheme from './primary'; +import secondaryTheme from './secondary'; + +type BoxShadow = + | typeof primaryTheme['BOX_SHADOW'] + | typeof secondaryTheme['BOX_SHADOW']; + +type Colors = typeof primaryTheme['COLORS'] | typeof secondaryTheme['COLORS']; + +export type ThemeType = { + __type: 'primary' | 'secondary'; + BOX_SHADOW: BoxShadow; + COLORS: Colors; +}; diff --git a/src/shared-components/accordion/index.tsx b/src/shared-components/accordion/index.tsx index 545c823f5..181addeb2 100644 --- a/src/shared-components/accordion/index.tsx +++ b/src/shared-components/accordion/index.tsx @@ -150,7 +150,7 @@ class Accordion extends React.Component< rotate={isOpen ? 90 : 0} width={16} height={16} - fill={COLORS.purple} + fill={COLORS.primary} /> diff --git a/src/shared-components/carousel/style.ts b/src/shared-components/carousel/style.ts index 7b52f20f8..706c7eddb 100644 --- a/src/shared-components/carousel/style.ts +++ b/src/shared-components/carousel/style.ts @@ -14,7 +14,7 @@ export const Card = styled.div` const primaryStyles = css` .slick-dots { li { - background-color: ${COLORS.purple}; + background-color: ${COLORS.primary}; } } `; diff --git a/src/shared-components/toggle/index.js b/src/shared-components/toggle/index.js index 08b039fbe..fb82a683a 100644 --- a/src/shared-components/toggle/index.js +++ b/src/shared-components/toggle/index.js @@ -2,11 +2,10 @@ import PropTypes from 'prop-types'; import React from 'react'; import ToggleButton from 'react-toggle-button'; import { ThemeProvider } from 'emotion-theming'; +import { primaryTheme, secondaryTheme } from 'src/constants/themes'; import { COLORS } from '../../constants'; -import { - Container, Label, trackStyle, thumbStyle, -} from './style'; +import { Container, Label, trackStyle, thumbStyle } from './style'; const propTypes = { checked: PropTypes.bool, @@ -19,34 +18,13 @@ const defaultProps = { label: '', }; -// placeholders for actual theme logic -const darkTheme = { - __type: 'darkTheme', - COLORS: { - primaryTint1: '#000000', - primaryTint5: '#cccccc', - secondary: '#414a4c', - activeThumb: COLORS.white, - inactiveThumb: COLORS.white, - }, -}; - -const lightTheme = { - __type: 'lightTheme', - COLORS: { - primaryTint1: COLORS.primaryTint1, - primaryTint5: COLORS.primaryTint3, - secondary: COLORS.secondary, - activeThumb: COLORS.white, - inactiveThumb: COLORS.white, - }, -}; - const Toggle = ({ checked, label, onChange }) => { - const [theme, setTheme] = React.useState(lightTheme); + const [theme, setTheme] = React.useState(primaryTheme); const toggleTheme = () => - theme.__type === 'lightTheme' ? setTheme(darkTheme) : setTheme(lightTheme); + theme.__type === 'primary' + ? setTheme(secondaryTheme) + : setTheme(primaryTheme); return ( @@ -70,13 +48,13 @@ const Toggle = ({ checked, label, onChange }) => { base: theme.COLORS.secondary, }, inactive: { - base: theme.COLORS.primaryTint5, + base: theme.COLORS.primaryTint3, }, activeThumb: { - base: theme.COLORS.activeThumb, + base: theme.COLORS.white, }, inactiveThumb: { - base: theme.COLORS.inactiveThumb, + base: theme.COLORS.white, }, }} /> diff --git a/src/shared-components/typography/index.js b/src/shared-components/typography/index.js index f7cd31ad3..0465ff348 100644 --- a/src/shared-components/typography/index.js +++ b/src/shared-components/typography/index.js @@ -27,7 +27,7 @@ const titleStyle = css` `; export const baseBodyStyles = ` - color: ${COLORS.purpleTint1}; + color: ${COLORS.primaryTint1}; font-size: ${TYPOGRAPHY_CONSTANTS.fontSize.body}; line-height: ${round(28 / 16, 2)}; `; @@ -37,7 +37,7 @@ const bodyStyle = css` `; const captionStyle = css` - color: ${COLORS.purpleTint2}; + color: ${COLORS.primaryTint2}; font-size: ${TYPOGRAPHY_CONSTANTS.fontSize.caption}; line-height: ${round(24 / 14, 2)}; `; @@ -53,7 +53,7 @@ const successStyle = css` `; const labelStyle = css` - color: ${COLORS.purpleTint1}; + color: ${COLORS.primaryTint1}; font-size: ${TYPOGRAPHY_CONSTANTS.fontSize.label}; line-height: ${round(20 / 12, 2)}; `; diff --git a/stories/tooltip/index.js b/stories/tooltip/index.js index a12f84093..78d96f538 100644 --- a/stories/tooltip/index.js +++ b/stories/tooltip/index.js @@ -23,7 +23,7 @@ const TooltipContainer = styled.div` `; const TriggerContainer = styled.div` - background: ${COLORS.purple}; + background: ${COLORS.primary}; margin: 0 auto; padding: ${SPACER.small}; color: ${COLORS.white}; From cdbe9d1051d6a85ab76afe583ff921a4cadcb734 Mon Sep 17 00:00:00 2001 From: Michael Altamirano Date: Tue, 22 Sep 2020 13:52:03 -0500 Subject: [PATCH 07/10] Lift ThemeProvider to storybook preview, add withTheme class examples (WIP) --- .storybook/preview.js | 133 ++++++++++++---------- src/shared-components/accordion/index.tsx | 9 +- src/shared-components/toggle/index.js | 72 +++++------- src/shared-components/toggle/style.js | 6 +- 4 files changed, 112 insertions(+), 108 deletions(-) diff --git a/.storybook/preview.js b/.storybook/preview.js index 6ae6715ca..4e1b9c301 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,74 +1,89 @@ +import { useState } from 'react'; import { addDecorator, addParameters, configure } from '@storybook/react'; import { withA11y } from '@storybook/addon-a11y'; import { addReadme, configureReadme } from 'storybook-readme'; import centered from '@storybook/addon-centered/react'; import { Global, css } from '@emotion/core'; +import { ThemeProvider } from 'emotion-theming'; import Theme from './theme'; import { resetStyles, brandStyles, } from '../src/utils/injectGlobalStyles/style'; +import { primaryTheme, secondaryTheme } from '../src/constants/themes'; -const InjectGlobalStyles = (storyFn) => ( -
- - - - - { + const [theme, setTheme] = useState(primaryTheme); + + const toggleTheme = () => + theme.__type === 'primary' + ? setTheme(secondaryTheme) + : setTheme(primaryTheme); + + return ( +
- {storyFn()} -
-); + > + + + + + + + + {storyFn()} + +
+ ); +}; addDecorator(InjectGlobalStyles); addDecorator(centered); diff --git a/src/shared-components/accordion/index.tsx b/src/shared-components/accordion/index.tsx index 181addeb2..76d90a492 100644 --- a/src/shared-components/accordion/index.tsx +++ b/src/shared-components/accordion/index.tsx @@ -1,7 +1,8 @@ import PropTypes from 'prop-types'; import React from 'react'; -import { COLORS } from 'src/constants'; import ChevronIcon from 'src/svgs/icons/chevron-icon.svg'; +import { withTheme } from 'emotion-theming'; +import { ThemeType } from 'src/constants/themes/types'; import Thumbnails from './thumbnails'; import { @@ -25,6 +26,7 @@ type AccordionProps = { ) => void; rightAlignArrow?: boolean; title: React.ReactNode; + theme: ThemeType; }; /** @@ -125,6 +127,7 @@ class Accordion extends React.Component< noBorder, disabled, rightAlignArrow, + theme, } = this.props; return ( @@ -150,7 +153,7 @@ class Accordion extends React.Component< rotate={isOpen ? 90 : 0} width={16} height={16} - fill={COLORS.primary} + fill={theme.COLORS.primary} /> @@ -166,4 +169,4 @@ class Accordion extends React.Component< } } -export default Accordion; +export default withTheme(Accordion); diff --git a/src/shared-components/toggle/index.js b/src/shared-components/toggle/index.js index fb82a683a..2ac26314b 100644 --- a/src/shared-components/toggle/index.js +++ b/src/shared-components/toggle/index.js @@ -1,11 +1,9 @@ import PropTypes from 'prop-types'; import React from 'react'; import ToggleButton from 'react-toggle-button'; -import { ThemeProvider } from 'emotion-theming'; -import { primaryTheme, secondaryTheme } from 'src/constants/themes'; +import { useTheme } from 'emotion-theming'; -import { COLORS } from '../../constants'; -import { Container, Label, trackStyle, thumbStyle } from './style'; +import { Container, Label, trackStyle, getThumbStyle } from './style'; const propTypes = { checked: PropTypes.bool, @@ -19,47 +17,35 @@ const defaultProps = { }; const Toggle = ({ checked, label, onChange }) => { - const [theme, setTheme] = React.useState(primaryTheme); - - const toggleTheme = () => - theme.__type === 'primary' - ? setTheme(secondaryTheme) - : setTheme(primaryTheme); + const theme = useTheme(); return ( - -
- -
- - {label && } - - - + + {label && } + + ); }; diff --git a/src/shared-components/toggle/style.js b/src/shared-components/toggle/style.js index 76749862e..0434044d4 100644 --- a/src/shared-components/toggle/style.js +++ b/src/shared-components/toggle/style.js @@ -33,11 +33,11 @@ export const trackStyle = { width: 40, }; -export const thumbStyle = { +export const getThumbStyle = (theme) => ({ height: 22, width: 22, - border: `1px solid ${COLORS.border}`, + border: `1px solid ${theme.COLORS.border}`, boxShadow: `none`, background: COLORS.white, backgroundColor: COLORS.white, -}; +}); From e8af052308d8e0a1ae6783e81ce38ffeaf02f2d3 Mon Sep 17 00:00:00 2001 From: Michael Altamirano Date: Tue, 22 Sep 2020 15:18:32 -0500 Subject: [PATCH 08/10] Revert old color changes, fix build and build on theming conversion --- .eslintrc | 4 +- src/constants/colors/index.ts | 56 +++++ src/constants/colors/primary.ts | 3 +- src/constants/colors/secondary.ts | 3 +- src/shared-components/accordion/style.ts | 36 +-- src/shared-components/accordion/test.tsx | 26 +- src/shared-components/field/style.js | 4 +- src/shared-components/selectorButton/style.js | 8 +- .../toggle/__snapshots__/test.js.snap | 236 +++++++++--------- src/shared-components/toggle/test.js | 18 +- stories/progressBar/index.js | 13 +- 11 files changed, 235 insertions(+), 172 deletions(-) diff --git a/.eslintrc b/.eslintrc index 661ea8754..d932fbaeb 100644 --- a/.eslintrc +++ b/.eslintrc @@ -36,6 +36,7 @@ "@typescript-eslint/naming-convention": "off", "@typescript-eslint/no-shadow": "error", "@typescript-eslint/no-use-before-define": "error", + "arrow-parens": "off", "no-shadow": "off", "no-use-before-define": "off", "react/jsx-filename-extension": ["warn", { "extensions": [".js", ".tsx"] }], @@ -56,7 +57,8 @@ "emotion/jsx-import": "error", "emotion/no-vanilla": "error", "emotion/import-from-emotion": "error", - "emotion/styled-import": "error" + "emotion/styled-import": "error", + "react/jsx-props-no-spreading": "off" } }, { diff --git a/src/constants/colors/index.ts b/src/constants/colors/index.ts index a32b236c0..1b4c0b598 100644 --- a/src/constants/colors/index.ts +++ b/src/constants/colors/index.ts @@ -65,6 +65,61 @@ export const legacyColors = { purple60: '#858298', }; +export const colorAliases = { + // Legacy + purple: brandColors.purple100, + purpleTint1: brandColors.purple85, + purpleTint2: brandColors.purple70, + + // brand colors + primary: brandColors.purple100, + primaryTint1: brandColors.purple85, + primaryTint2: brandColors.purple70, + primaryTint3: brandColors.purple30, + secondary: brandColors.lavender100, + tertiary: brandColors.purple4, + + // general colors + success: brandColors.statusGreen, + successBackground: brandColors.statusGreenBackground, + successBorder: brandColors.statusGreenBorder, + info: brandColors.statusPurple, + infoBackground: brandColors.statusPurpleBackground, + infoBorder: brandColors.statusPurpleBorder, + error: brandColors.statusRed, + errorBackground: brandColors.statusRedBackground, + errorBorder: brandColors.statusRedBorder, + default: brandColors.purple70, + defaultBackground: brandColors.purple10, + defaultBorder: brandColors.purple15, + accent: brandColors.red, + disabled: brandColors.purple10, + failure: brandColors.red, + hover: brandColors.purple4, + warning: legacyColors.yellowLight, + + // ui colors + background: brandColors.purple4, + backgroundDark: brandColors.purple4, + border: brandColors.purple10, + divider: brandColors.purple10, + + // form colors + radioBorder: brandColors.purple30, + radioBorderSelected: brandColors.lavender100, + + // typography + textMuted: brandColors.purple70, + textGhost: brandColors.purple30, + textDisabled: brandColors.purple30, + + // overlay + overlay: 'rgba(45, 45, 48, 0.7)', + overlayHidden: 'rgba(45, 45, 48, 0)', + overlaySolid: 'rgba(45, 45, 48, 1)', + overlayTransition: 'rgba(45, 45, 48, 0.3)', +}; + export const postcardColors = { postcardSocialBg: '#f2f2f2', postcardWhite: brandColors.purple4, @@ -99,6 +154,7 @@ export const guideColors = { const sharedColors = { ...brandColors, + ...colorAliases, ...postcardColors, ...guideColors, }; diff --git a/src/constants/colors/primary.ts b/src/constants/colors/primary.ts index 1e5d87219..2c1274e72 100644 --- a/src/constants/colors/primary.ts +++ b/src/constants/colors/primary.ts @@ -47,10 +47,9 @@ const PRIMARY_COLORS = { // overlay overlay: 'rgba(45, 45, 48, 0.7)', - overlayHidden: 'rgba(45, 45, 48, 0)', overlaySolid: 'rgba(45, 45, 48, 1)', - overlayTransition: 'rgba(45, 45, 48, 0.3)', + black: COLORS.black, white: COLORS.white, }; diff --git a/src/constants/colors/secondary.ts b/src/constants/colors/secondary.ts index 38b05973e..35016327a 100644 --- a/src/constants/colors/secondary.ts +++ b/src/constants/colors/secondary.ts @@ -47,10 +47,9 @@ const SECONDARY_COLORS = { // overlay overlay: null, - overlayHidden: null, overlaySolid: null, - overlayTransition: null, + black: COLORS.black, white: COLORS.white, }; diff --git a/src/shared-components/accordion/style.ts b/src/shared-components/accordion/style.ts index a15548867..a75edad2f 100644 --- a/src/shared-components/accordion/style.ts +++ b/src/shared-components/accordion/style.ts @@ -1,14 +1,9 @@ -import styled from '@emotion/styled'; -import { css } from '@emotion/core'; import { - ANIMATION, - BREAKPOINTS, - BOX_SHADOWS, - COLORS, - SPACER, + ANIMATION, BREAKPOINTS, BOX_SHADOWS, SPACER, } from 'src/constants'; - -const border = `1px solid ${COLORS.border}`; +import styled from '@emotion/styled'; +import { ThemeType } from 'src/constants/themes/types'; +import { css } from '@emotion/core'; export const Content = styled.div` padding: ${SPACER.medium}; @@ -21,11 +16,11 @@ export const ExpansionWrapper = styled.div<{ contentHeight: string }>` transition: max-height ${ANIMATION.defaultTiming} ease-in-out; `; -const getBorderStyle = (isOpen: boolean) => css` - border: ${border}; +const getBorderStyle = (theme: ThemeType, isOpen: boolean) => css` + border: 1px solid ${theme.COLORS.border}; ${ExpansionWrapper} { - ${isOpen && `border-top: ${border};`}; + ${isOpen && `border-top: 1px solid ${theme.COLORS.border};`}; } `; @@ -33,8 +28,10 @@ export const AccordionBox = styled.div<{ noBorder: boolean; isOpen: boolean; disabled: boolean; + theme?: ThemeType; }>` - ${({ noBorder, isOpen }) => (!noBorder ? getBorderStyle(isOpen) : '')}; + ${({ noBorder, isOpen, theme }) => + !noBorder ? getBorderStyle(theme, isOpen) : ''}; width: 100%; @@ -42,12 +39,12 @@ export const AccordionBox = styled.div<{ border-bottom: none; } - ${({ disabled }) => + ${({ disabled, theme }) => disabled ? ` opacity: 0.4; - background-color: ${COLORS.disabled}; - border-color: ${COLORS.purple30}; + background-color: ${theme.COLORS.disabled}; + border-color: ${theme.COLORS.primaryTint3}; ` : ''}; `; @@ -98,9 +95,12 @@ export const Truncate = styled.div` * borderRadius must match borderRadius passed to main * component if opting out of default values. */ -export const Container = styled.div<{ borderRadius?: string }>` +export const Container = styled.div<{ + borderRadius?: string; + theme?: ThemeType; +}>` box-shadow: ${BOX_SHADOWS.clickable}; - background-color: ${COLORS.white}; + background-color: ${({ theme }) => theme.COLORS.white}; max-width: ${BREAKPOINTS.md}px; ${({ borderRadius = '4px' }) => ` diff --git a/src/shared-components/accordion/test.tsx b/src/shared-components/accordion/test.tsx index 25d4995d7..030e95e11 100644 --- a/src/shared-components/accordion/test.tsx +++ b/src/shared-components/accordion/test.tsx @@ -1,10 +1,12 @@ import React from 'react'; import renderer from 'react-test-renderer'; import { shallow } from 'enzyme'; +import { primaryTheme } from 'src/constants/themes'; +import { ThemeProvider } from 'emotion-theming'; import Accordion from './index'; -const testAccordion = { +const testAccordionProps = { title:
title
, isOpen: false, onClick: (): void => undefined, @@ -12,27 +14,32 @@ const testAccordion = { }; /* eslint-disable react/jsx-props-no-spreading */ +const AccordionWithTheme = (additionalProps?: Record) => ( + + + +); +/* eslint-enable react/jsx-props-no-spreading */ + describe('', () => { test('renders regular accordion', () => { - const component = renderer.create(); + const component = renderer.create( + , + ); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); }); test('renders no border accordion', () => { - const component = renderer.create( - , - ); + const component = renderer.create(); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); }); test('renders disabled accordion', () => { - const component = renderer.create( - , - ); + const component = renderer.create(); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); @@ -42,11 +49,10 @@ describe('', () => { const spy = jest.fn(); const titleIndex = 0; - const component = shallow(); + const component = shallow(); const title = component.childAt(titleIndex); title.simulate('click'); expect(spy).toHaveBeenCalled(); }); }); -/* eslint-enable react/jsx-props-no-spreading */ diff --git a/src/shared-components/field/style.js b/src/shared-components/field/style.js index 335c42f27..e125af8ea 100644 --- a/src/shared-components/field/style.js +++ b/src/shared-components/field/style.js @@ -20,7 +20,7 @@ export const FieldContainer = styled.div` export const Label = styled.label` ${TYPOGRAPHY_STYLE.label}; - ${({ disabled }) => disabled && `color:${COLORS.purple30};`}; + ${({ disabled }) => disabled && `color:${COLORS.primaryTint3};`}; `; const inputStyles = css` @@ -80,7 +80,7 @@ export const Textarea = styled.textarea` width: 100%; `; -const applyMessagesStyles = messagesType => css` +const applyMessagesStyles = (messagesType) => css` svg.radiance-field-input-icon { opacity: 1; } diff --git a/src/shared-components/selectorButton/style.js b/src/shared-components/selectorButton/style.js index b930eece7..1a5206604 100644 --- a/src/shared-components/selectorButton/style.js +++ b/src/shared-components/selectorButton/style.js @@ -40,19 +40,19 @@ export const SelectorIcon = styled.div` `}; `; -const primarySelectorStyle = checked => css` +const primarySelectorStyle = (checked) => css` background-color: ${checked ? COLORS.primary : 'transparent'}; border-color: ${COLORS.primary}; `; -const secondarySelectorStyle = checked => css` +const secondarySelectorStyle = (checked) => css` background-color: ${checked ? COLORS.secondary : 'transparent'}; border-color: ${checked ? COLORS.secondary : COLORS.primary}; `; const disabledSelectorStyle = css` - background-color: ${COLORS.purple30}; - border-color: ${COLORS.purple30}; + background-color: ${COLORS.primaryTint3}; + border-color: ${COLORS.primaryTint3}; cursor: not-allowed; `; diff --git a/src/shared-components/toggle/__snapshots__/test.js.snap b/src/shared-components/toggle/__snapshots__/test.js.snap index 64a9b765c..56fe2ba6e 100644 --- a/src/shared-components/toggle/__snapshots__/test.js.snap +++ b/src/shared-components/toggle/__snapshots__/test.js.snap @@ -1,16 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[` UI snapshot renders the component 1`] = ` -Array [ -
- -
, - .emotion-2 { +.emotion-2 { position: relative; display: -webkit-box; display: -webkit-flex; @@ -50,35 +41,49 @@ Array [ }
+ + Label Text + +
- - Label Text -
@@ -86,116 +91,101 @@ Array [ style={ Object { "alignItems": "center", - "backgroundColor": "rgb(195,192,205)", - "borderRadius": 100, + "color": "#FAFAFA", "display": "flex", - "height": 24, + "fontFamily": "'Helvetica Neue', Helvetica, sans-serif", + "fontSize": 11, + "height": 20, "justifyContent": "center", - "padding": 0, - "width": 40, + "left": 4, + "lineHeight": 0, + "marginBottom": "auto", + "marginTop": "auto", + "opacity": 0, + "position": "relative", + "width": 26, } } > -
- -
-
- -
+
-
+
- +
+
-
, -] + +
+
`; diff --git a/src/shared-components/toggle/test.js b/src/shared-components/toggle/test.js index b668dc8e0..1d3d1e862 100644 --- a/src/shared-components/toggle/test.js +++ b/src/shared-components/toggle/test.js @@ -1,16 +1,24 @@ import React from 'react'; import { shallow, mount } from 'enzyme'; import renderer from 'react-test-renderer'; +import { primaryTheme } from 'src/constants/themes'; +import { ThemeProvider } from 'emotion-theming'; import Toggle from './index'; +const ToggleWithTheme = (props) => ( + + + +); + describe('', () => { const labelText = 'Label Text'; describe('UI snapshot', () => { it('renders the component', () => { const component = renderer.create( - + , ); const tree = component.toJSON(); @@ -20,14 +28,16 @@ describe('', () => { describe('when label is undefined', () => { test('does not render a label component', () => { - const wrapper = shallow(); + const wrapper = shallow(); expect(wrapper.html().indexOf('label') === -1).toBe(true); }); }); describe('when label is a string', () => { test('renders a text component', () => { - const wrapper = shallow(); + const wrapper = shallow( + , + ); expect(wrapper.html().indexOf(labelText) > 0).toBe(true); }); @@ -36,7 +46,7 @@ describe('', () => { describe('when checkbox is clicked', () => { test('fires onChange function with correct argument when function exists', () => { const spy = jest.fn(); - const wrapper = mount(); + const wrapper = mount(); wrapper.find('[type="checkbox"]').simulate('click'); expect(spy).toHaveBeenCalled(); diff --git a/stories/progressBar/index.js b/stories/progressBar/index.js index 0cf11cce3..780295f9e 100644 --- a/stories/progressBar/index.js +++ b/stories/progressBar/index.js @@ -1,11 +1,12 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; import { withDocs } from 'storybook-readme'; -import { withKnobs, text, select, number, color } from '@storybook/addon-knobs'; +import { + withKnobs, text, select, number, color, +} from '@storybook/addon-knobs'; import styled from '@emotion/styled'; import { css } from '@emotion/core'; - -import ProgressBarReadme from 'docs/progressBar.md'; +import ProgressBarReadme from 'docs/progressBar'; import { ProgressBar, Typography } from 'src/shared-components'; import { COLORS, PROGRESS_BAR_STATUS } from 'src/constants'; @@ -25,7 +26,7 @@ const BarContainer = styled.div` :before { content: 'PAGE CONTENT'; - color: ${COLORS.purple30}; + color: ${COLORS.primaryTint3}; } `; @@ -71,10 +72,10 @@ stories.add( status={select( 'status', PROGRESS_BAR_STATUS, - PROGRESS_BAR_STATUS.loading + PROGRESS_BAR_STATUS.loading, )} /> - )) + )), ); From c6ab095dcaa7d5624b3cf9253da47f471dbb7b92 Mon Sep 17 00:00:00 2001 From: Michael Altamirano Date: Tue, 22 Sep 2020 15:35:43 -0500 Subject: [PATCH 09/10] Rebuild commit --- src/shared-components/accordion/test.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/shared-components/accordion/test.tsx b/src/shared-components/accordion/test.tsx index 030e95e11..8f72ca1ef 100644 --- a/src/shared-components/accordion/test.tsx +++ b/src/shared-components/accordion/test.tsx @@ -13,13 +13,11 @@ const testAccordionProps = { children:
expansion
, }; -/* eslint-disable react/jsx-props-no-spreading */ const AccordionWithTheme = (additionalProps?: Record) => ( ); -/* eslint-enable react/jsx-props-no-spreading */ describe('', () => { test('renders regular accordion', () => { From 09844742fc51251be12779e7cd91efadedd03eee Mon Sep 17 00:00:00 2001 From: Michael Altamirano Date: Tue, 22 Sep 2020 15:42:50 -0500 Subject: [PATCH 10/10] Push again --- src/shared-components/accordion/test.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/shared-components/accordion/test.tsx b/src/shared-components/accordion/test.tsx index 8f72ca1ef..e8441d2b1 100644 --- a/src/shared-components/accordion/test.tsx +++ b/src/shared-components/accordion/test.tsx @@ -21,9 +21,7 @@ const AccordionWithTheme = (additionalProps?: Record) => ( describe('', () => { test('renders regular accordion', () => { - const component = renderer.create( - , - ); + const component = renderer.create(); const tree = component.toJSON(); expect(tree).toMatchSnapshot();