From 7988f7b15c75b7c6903cb08cab69325a69d9bc80 Mon Sep 17 00:00:00 2001 From: olfedias Date: Tue, 6 Nov 2018 14:07:35 +0200 Subject: [PATCH 1/3] feat(Divider): add `color` prop --- .../DividerExampleColor.shorthand.tsx | 27 +++++++++++ .../Variations/DividerExampleColor.tsx | 31 ++++++++++++ .../DividerExampleSize.shorthand.tsx | 4 +- .../components/Divider/Variations/index.tsx | 5 ++ src/components/Divider/Divider.tsx | 31 ++++++++++-- src/lib/getColorValue.ts | 9 ++++ src/lib/index.ts | 1 + .../components/Divider/dividerVariables.ts | 2 +- .../components/Divider/dividerVariables.ts | 2 +- .../teams/components/Divider/dividerStyles.ts | 22 +++++---- .../components/Divider/dividerVariables.ts | 40 +++++++++++----- src/themes/teams/siteVariables.ts | 13 +++++ src/themes/types.ts | 47 +++++++++++++++++++ 13 files changed, 206 insertions(+), 28 deletions(-) create mode 100644 docs/src/examples/components/Divider/Variations/DividerExampleColor.shorthand.tsx create mode 100644 docs/src/examples/components/Divider/Variations/DividerExampleColor.tsx create mode 100644 src/lib/getColorValue.ts diff --git a/docs/src/examples/components/Divider/Variations/DividerExampleColor.shorthand.tsx b/docs/src/examples/components/Divider/Variations/DividerExampleColor.shorthand.tsx new file mode 100644 index 0000000000..294d638169 --- /dev/null +++ b/docs/src/examples/components/Divider/Variations/DividerExampleColor.shorthand.tsx @@ -0,0 +1,27 @@ +import _ from 'lodash' +import React from 'react' +import { Divider } from '@stardust-ui/react' + +const colors = [ + 'primary', + 'secondary', + 'red', + 'orange', + 'yellow', + 'olive', + 'green', + 'teal', + 'blue', + 'violet', + 'purple', + 'pink', + 'brown', + 'grey', + 'black', + 'white', +] + +const DividerExampleColorShorthand = () => + _.map(colors, color => ) + +export default DividerExampleColorShorthand diff --git a/docs/src/examples/components/Divider/Variations/DividerExampleColor.tsx b/docs/src/examples/components/Divider/Variations/DividerExampleColor.tsx new file mode 100644 index 0000000000..1bef9bfd51 --- /dev/null +++ b/docs/src/examples/components/Divider/Variations/DividerExampleColor.tsx @@ -0,0 +1,31 @@ +import _ from 'lodash' +import React from 'react' +import { Divider } from '@stardust-ui/react' + +const colors = [ + 'primary', + 'secondary', + 'red', + 'orange', + 'yellow', + 'olive', + 'green', + 'teal', + 'blue', + 'violet', + 'purple', + 'pink', + 'brown', + 'grey', + 'black', + 'white', +] + +const DividerExampleColor = () => + _.map(colors, color => ( + + {_.startCase(color)} + + )) + +export default DividerExampleColor diff --git a/docs/src/examples/components/Divider/Variations/DividerExampleSize.shorthand.tsx b/docs/src/examples/components/Divider/Variations/DividerExampleSize.shorthand.tsx index 4dafd3f733..3b9f6e3144 100644 --- a/docs/src/examples/components/Divider/Variations/DividerExampleSize.shorthand.tsx +++ b/docs/src/examples/components/Divider/Variations/DividerExampleSize.shorthand.tsx @@ -2,11 +2,11 @@ import _ from 'lodash' import React from 'react' import { Divider } from '@stardust-ui/react' -const DividerExampleSize = () => +const DividerExampleSizeShorthand = () => _.times(11, i => { const size = i return }) -export default DividerExampleSize +export default DividerExampleSizeShorthand diff --git a/docs/src/examples/components/Divider/Variations/index.tsx b/docs/src/examples/components/Divider/Variations/index.tsx index b5eb43aba6..43151f0cdc 100644 --- a/docs/src/examples/components/Divider/Variations/index.tsx +++ b/docs/src/examples/components/Divider/Variations/index.tsx @@ -4,6 +4,11 @@ import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection' const Variations = () => ( + , any> { static className = 'ui-divider' static propTypes = { + /** An element type to render as (string or function). */ as: customPropTypes.as, /** @@ -40,13 +42,36 @@ class Divider extends UIComponent, any> { /** Additional CSS class name(s) to apply. */ className: PropTypes.string, + /** A divider can have different colors. */ + color: PropTypes.oneOfType([ + PropTypes.oneOf([ + 'primary', + 'secondary', + 'red', + 'orange', + 'yellow', + 'olive', + 'green', + 'teal', + 'blue', + 'violet', + 'purple', + 'pink', + 'brown', + 'grey', + 'black', + 'white', + ]), + PropTypes.string, + ]), + /** Shorthand for primary content. */ content: customPropTypes.contentShorthand, /** A divider can be fitted, without any space above or below it. */ fitted: PropTypes.bool, - /** Size multiplier (default 0) * */ + /** Size multiplier (default 0). */ size: PropTypes.number, /** A Divider can be formatted to show different levels of emphasis. */ @@ -55,7 +80,7 @@ class Divider extends UIComponent, any> { /** A divider can appear more important and draw the user's attention. */ important: PropTypes.bool, - /** Additional CSS styles to apply to the component instance. */ + /** Additional CSS styles to apply to the component instance. */ styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), /** Override for theme site variables to allow modifications of component styling via themes. */ diff --git a/src/lib/getColorValue.ts b/src/lib/getColorValue.ts new file mode 100644 index 0000000000..c1ccf459b6 --- /dev/null +++ b/src/lib/getColorValue.ts @@ -0,0 +1,9 @@ +import * as _ from 'lodash' + +const getColorValue = (variables, color) => { + const colorVariable = _.camelCase(`color-${color}`) + + return variables[colorVariable] || color +} + +export default getColorValue diff --git a/src/lib/index.ts b/src/lib/index.ts index 8a06f59b93..bffd22345f 100644 --- a/src/lib/index.ts +++ b/src/lib/index.ts @@ -11,6 +11,7 @@ export * from './factories' export { default as callable } from './callable' export { default as constants } from './constants' export { default as getClasses } from './getClasses' +export { default as getColorValue } from './getColorValue' export { default as getElementType } from './getElementType' export { default as getUnhandledProps } from './getUnhandledProps' export { default as mergeThemes } from './mergeThemes' diff --git a/src/themes/teams-dark/components/Divider/dividerVariables.ts b/src/themes/teams-dark/components/Divider/dividerVariables.ts index 6178d5f597..3b7345119f 100644 --- a/src/themes/teams-dark/components/Divider/dividerVariables.ts +++ b/src/themes/teams-dark/components/Divider/dividerVariables.ts @@ -2,6 +2,6 @@ import { DividerVariables } from '../../../teams/components/Divider/dividerVaria import { Partial } from 'types/utils' export default (siteVars: any): Partial => ({ - primaryColor: siteVars.brand06, + colorPrimary: siteVars.brand06, textColor: siteVars.gray02, }) diff --git a/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts b/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts index 193a92452d..77b609516d 100644 --- a/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts +++ b/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts @@ -4,5 +4,5 @@ import { Partial } from 'types/utils' export default (siteVars: any): Partial => ({ dividerColor: siteVars.white, textColor: siteVars.white, - primaryColor: siteVars.white, + colorPrimary: siteVars.white, }) diff --git a/src/themes/teams/components/Divider/dividerStyles.ts b/src/themes/teams/components/Divider/dividerStyles.ts index 5dae860af6..795b0d8f8c 100644 --- a/src/themes/teams/components/Divider/dividerStyles.ts +++ b/src/themes/teams/components/Divider/dividerStyles.ts @@ -1,4 +1,4 @@ -import { childrenExist, pxToRem } from '../../../../lib' +import { childrenExist, getColorValue, pxToRem } from '../../../../lib' import { ComponentSlotStylesInput, ICSSInJSStyle, ICSSPseudoElementStyle } from '../../../types' import { DividerPropsWithDefaults } from '../../../../components/Divider/Divider' @@ -7,18 +7,21 @@ const dividerBorderStyle = (size, color): ICSSInJSStyle => ({ background: color, }) -const beforeAndAfter = (size, type, variables): ICSSPseudoElementStyle => ({ +const beforeAndAfter = (color, size, type, variables): ICSSPseudoElementStyle => ({ content: '""', flex: 1, ...dividerBorderStyle(size, variables.dividerColor), ...(type === 'primary' && { - ...dividerBorderStyle(size, variables.primaryColor), + ...dividerBorderStyle(size, variables.colorPrimary), + }), + ...(color && { + ...dividerBorderStyle(size, getColorValue(variables, color)), }), }) const dividerStyles: ComponentSlotStylesInput = { root: ({ props, variables }): ICSSInJSStyle => { - const { children, fitted, size, type, important, content } = props + const { children, color, fitted, size, type, important, content } = props return { color: variables.textColor, display: 'flex', @@ -28,7 +31,10 @@ const dividerStyles: ComponentSlotStylesInput = { paddingBottom: variables.dividerPadding, }), ...(type === 'primary' && { - color: variables.primaryColor, + color: variables.colorPrimary, + }), + ...(color && { + color: getColorValue(variables, color), }), ...(important && { fontWeight: variables.importantFontWeight, @@ -39,17 +45,17 @@ const dividerStyles: ComponentSlotStylesInput = { fontSize: pxToRem(12 + size), lineHeight: variables.textLineHeight, '::before': { - ...beforeAndAfter(size, type, variables), + ...beforeAndAfter(color, size, type, variables), marginRight: pxToRem(20), }, '::after': { - ...beforeAndAfter(size, type, variables), + ...beforeAndAfter(color, size, type, variables), marginLeft: pxToRem(20), }, } : { '::before': { - ...beforeAndAfter(size, type, variables), + ...beforeAndAfter(color, size, type, variables), }, }), } diff --git a/src/themes/teams/components/Divider/dividerVariables.ts b/src/themes/teams/components/Divider/dividerVariables.ts index b363fbd31f..124e65cef9 100644 --- a/src/themes/teams/components/Divider/dividerVariables.ts +++ b/src/themes/teams/components/Divider/dividerVariables.ts @@ -1,23 +1,37 @@ import { pxToRem } from '../../../../lib' +import { ColorPaletteVariables } from '../../../types' -export interface DividerVariables { +export interface DividerVariables extends ColorPaletteVariables { dividerColor: string textColor: string textFontSize: string textLineHeight: string - primaryColor: string importantFontWeight: string dividerPadding: string } -export default (siteVars: any): DividerVariables => { - return { - dividerColor: siteVars.gray09, - textColor: siteVars.gray03, - textFontSize: siteVars.fontSizeSmall, - textLineHeight: siteVars.lineHeightSmall, - primaryColor: siteVars.brand, - importantFontWeight: siteVars.fontWeightBold, - dividerPadding: pxToRem(4), - } -} +export default (siteVars: any): DividerVariables => ({ + dividerColor: siteVars.gray09, + textColor: siteVars.gray03, + textFontSize: siteVars.fontSizeSmall, + textLineHeight: siteVars.lineHeightSmall, + importantFontWeight: siteVars.fontWeightBold, + dividerPadding: pxToRem(4), + + colorPrimary: siteVars.primary, + colorSecondary: siteVars.secondary, + colorRed: siteVars.red, + colorOrange: siteVars.orange, + colorYellow: siteVars.yellow, + colorOlive: siteVars.olive, + colorGreen: siteVars.green, + colorTeal: siteVars.teal, + colorBlue: siteVars.blue, + colorViolet: siteVars.violet, + colorPurple: siteVars.purple, + colorPink: siteVars.pink, + colorBrown: siteVars.brown, + colorGrey: siteVars.white, + colorBlack: siteVars.black, + colorWhite: siteVars.white, +}) diff --git a/src/themes/teams/siteVariables.ts b/src/themes/teams/siteVariables.ts index 78703a3bab..22c4181fb1 100644 --- a/src/themes/teams/siteVariables.ts +++ b/src/themes/teams/siteVariables.ts @@ -38,6 +38,19 @@ export const yellow = '#F8D22A' export const green = '#92C353' export const green04 = '#237b4b' +export const primary = brand +export const secondary = gray02 // ?? + +export const orange = orange04 +export const olive = 'olive' // ?? +export const teal = 'teal' // ?? +export const blue = 'blue' // ?? +export const violet = brand02 // ?? +export const purple = orchid // ?? +export const pink = magenta // ?? +export const brown = 'brown' // ?? +export const grey = gray02 // ?? + // // SHADOW LEVELS // diff --git a/src/themes/types.ts b/src/themes/types.ts index 1392d18259..11e79196e3 100644 --- a/src/themes/types.ts +++ b/src/themes/types.ts @@ -138,6 +138,7 @@ export interface ThemeInput { componentStyles?: ThemeComponentStylesInput rtl?: boolean renderer?: Renderer + colors?: ColorPalette fontFaces?: FontFaces staticStyles?: StaticStyles icons?: ThemeIcons @@ -312,6 +313,52 @@ export interface ThemeComponentVariablesPrepared { export interface Renderer extends FelaRenderer {} +// ======================================================== +// Colors +// ======================================================== + +export type ColorPalette = Partial<{ + primary: string + secondary: string + + red: string + orange: string + yellow: string + olive: string + green: string + teal: string + blue: string + violet: string + purple: string + pink: string + brown: string + grey: string + black: string + white: string +}> + +export interface ColorPaletteVariables { + colorPrimary: string + colorSecondary: string + + colorRed: string + colorOrange: string + colorYellow: string + colorOlive: string + colorGreen: string + colorTeal: string + colorBlue: string + colorViolet: string + colorPurple: string + colorPink: string + colorBrown: string + colorGrey: string + colorBlack: string + colorWhite: string +} + +export type ComponentColors = keyof ColorPalette + // ======================================================== // Fonts // ======================================================== From 34e3847137cc9d7705db222668bced24d6dde19d Mon Sep 17 00:00:00 2001 From: olfedias Date: Tue, 6 Nov 2018 14:15:18 +0200 Subject: [PATCH 2/3] fix(types): remove useless types --- src/themes/types.ts | 39 +++++++++++++++++---------------------- 1 file changed, 17 insertions(+), 22 deletions(-) diff --git a/src/themes/types.ts b/src/themes/types.ts index 11e79196e3..8afcbd667a 100644 --- a/src/themes/types.ts +++ b/src/themes/types.ts @@ -138,7 +138,6 @@ export interface ThemeInput { componentStyles?: ThemeComponentStylesInput rtl?: boolean renderer?: Renderer - colors?: ColorPalette fontFaces?: FontFaces staticStyles?: StaticStyles icons?: ThemeIcons @@ -317,26 +316,6 @@ export interface Renderer extends FelaRenderer {} // Colors // ======================================================== -export type ColorPalette = Partial<{ - primary: string - secondary: string - - red: string - orange: string - yellow: string - olive: string - green: string - teal: string - blue: string - violet: string - purple: string - pink: string - brown: string - grey: string - black: string - white: string -}> - export interface ColorPaletteVariables { colorPrimary: string colorSecondary: string @@ -357,7 +336,23 @@ export interface ColorPaletteVariables { colorWhite: string } -export type ComponentColors = keyof ColorPalette +export type ComponentColors = + | 'primary' + | 'secondary' + | 'red' + | 'orange' + | 'yellow' + | 'olive' + | 'green' + | 'teal' + | 'blue' + | 'violet' + | 'purple' + | 'pink' + | 'brown' + | 'grey' + | 'black' + | 'white' // ======================================================== // Fonts From e4a83d9782d5e18b0a69fc838adb3e35052f7977 Mon Sep 17 00:00:00 2001 From: olfedias Date: Tue, 6 Nov 2018 14:38:00 +0200 Subject: [PATCH 3/3] refactor(types): rework color types --- src/lib/getColorValue.ts | 8 +-- .../components/Divider/dividerVariables.ts | 4 +- .../components/Divider/dividerVariables.ts | 4 +- .../teams/components/Divider/dividerStyles.ts | 8 +-- .../components/Divider/dividerVariables.ts | 23 ++------ src/themes/teams/siteVariables.ts | 30 +++++++---- src/themes/types.ts | 54 +++++++------------ 7 files changed, 54 insertions(+), 77 deletions(-) diff --git a/src/lib/getColorValue.ts b/src/lib/getColorValue.ts index c1ccf459b6..2c547993cd 100644 --- a/src/lib/getColorValue.ts +++ b/src/lib/getColorValue.ts @@ -1,9 +1,5 @@ -import * as _ from 'lodash' +import { ColorPalette, ComponentColors } from '@stardust-ui/react' -const getColorValue = (variables, color) => { - const colorVariable = _.camelCase(`color-${color}`) - - return variables[colorVariable] || color -} +const getColorValue = (colors: ColorPalette, color: ComponentColors) => colors[color] || color export default getColorValue diff --git a/src/themes/teams-dark/components/Divider/dividerVariables.ts b/src/themes/teams-dark/components/Divider/dividerVariables.ts index 3b7345119f..12e49bb143 100644 --- a/src/themes/teams-dark/components/Divider/dividerVariables.ts +++ b/src/themes/teams-dark/components/Divider/dividerVariables.ts @@ -2,6 +2,8 @@ import { DividerVariables } from '../../../teams/components/Divider/dividerVaria import { Partial } from 'types/utils' export default (siteVars: any): Partial => ({ - colorPrimary: siteVars.brand06, + colors: { + primary: siteVars.brand06, + }, textColor: siteVars.gray02, }) diff --git a/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts b/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts index 77b609516d..7d3217de75 100644 --- a/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts +++ b/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts @@ -2,7 +2,9 @@ import { DividerVariables } from '../../../teams/components/Divider/dividerVaria import { Partial } from 'types/utils' export default (siteVars: any): Partial => ({ + colors: { + primary: siteVars.white, + }, dividerColor: siteVars.white, textColor: siteVars.white, - colorPrimary: siteVars.white, }) diff --git a/src/themes/teams/components/Divider/dividerStyles.ts b/src/themes/teams/components/Divider/dividerStyles.ts index 795b0d8f8c..98e7bf3606 100644 --- a/src/themes/teams/components/Divider/dividerStyles.ts +++ b/src/themes/teams/components/Divider/dividerStyles.ts @@ -12,10 +12,10 @@ const beforeAndAfter = (color, size, type, variables): ICSSPseudoElementStyle => flex: 1, ...dividerBorderStyle(size, variables.dividerColor), ...(type === 'primary' && { - ...dividerBorderStyle(size, variables.colorPrimary), + ...dividerBorderStyle(size, variables.colors.primary), }), ...(color && { - ...dividerBorderStyle(size, getColorValue(variables, color)), + ...dividerBorderStyle(size, getColorValue(variables.colors, color)), }), }) @@ -31,10 +31,10 @@ const dividerStyles: ComponentSlotStylesInput = { paddingBottom: variables.dividerPadding, }), ...(type === 'primary' && { - color: variables.colorPrimary, + color: variables.colors.primary, }), ...(color && { - color: getColorValue(variables, color), + color: getColorValue(variables.colors, color), }), ...(important && { fontWeight: variables.importantFontWeight, diff --git a/src/themes/teams/components/Divider/dividerVariables.ts b/src/themes/teams/components/Divider/dividerVariables.ts index 124e65cef9..1120c2c36d 100644 --- a/src/themes/teams/components/Divider/dividerVariables.ts +++ b/src/themes/teams/components/Divider/dividerVariables.ts @@ -1,7 +1,8 @@ import { pxToRem } from '../../../../lib' -import { ColorPaletteVariables } from '../../../types' +import { ColorPalette } from '../../../types' -export interface DividerVariables extends ColorPaletteVariables { +export interface DividerVariables { + colors: Partial dividerColor: string textColor: string textFontSize: string @@ -11,27 +12,11 @@ export interface DividerVariables extends ColorPaletteVariables { } export default (siteVars: any): DividerVariables => ({ + colors: siteVars.colors, dividerColor: siteVars.gray09, textColor: siteVars.gray03, textFontSize: siteVars.fontSizeSmall, textLineHeight: siteVars.lineHeightSmall, importantFontWeight: siteVars.fontWeightBold, dividerPadding: pxToRem(4), - - colorPrimary: siteVars.primary, - colorSecondary: siteVars.secondary, - colorRed: siteVars.red, - colorOrange: siteVars.orange, - colorYellow: siteVars.yellow, - colorOlive: siteVars.olive, - colorGreen: siteVars.green, - colorTeal: siteVars.teal, - colorBlue: siteVars.blue, - colorViolet: siteVars.violet, - colorPurple: siteVars.purple, - colorPink: siteVars.pink, - colorBrown: siteVars.brown, - colorGrey: siteVars.white, - colorBlack: siteVars.black, - colorWhite: siteVars.white, }) diff --git a/src/themes/teams/siteVariables.ts b/src/themes/teams/siteVariables.ts index 22c4181fb1..e8a6211b9f 100644 --- a/src/themes/teams/siteVariables.ts +++ b/src/themes/teams/siteVariables.ts @@ -1,4 +1,5 @@ import { pxToRem } from '../../lib' +import { ColorPalette } from '../types' // // VARIABLES @@ -38,18 +39,25 @@ export const yellow = '#F8D22A' export const green = '#92C353' export const green04 = '#237b4b' -export const primary = brand -export const secondary = gray02 // ?? +export const colors: ColorPalette = { + primary: brand, + secondary: gray02, // ?? -export const orange = orange04 -export const olive = 'olive' // ?? -export const teal = 'teal' // ?? -export const blue = 'blue' // ?? -export const violet = brand02 // ?? -export const purple = orchid // ?? -export const pink = magenta // ?? -export const brown = 'brown' // ?? -export const grey = gray02 // ?? + black, + blue: 'blue', // ?? + brown: 'brown', // ?? + green, + gray: gray02, // ?? + olive: 'olive', // ?? + orange: orange04, + pink: magenta, // ?? + purple: orchid, // ?? + red, + teal: 'teal', // ?? + violet: brand02, // ?? + white, + yellow, +} // // SHADOW LEVELS diff --git a/src/themes/types.ts b/src/themes/types.ts index 8afcbd667a..0ed806f120 100644 --- a/src/themes/types.ts +++ b/src/themes/types.ts @@ -316,43 +316,27 @@ export interface Renderer extends FelaRenderer {} // Colors // ======================================================== -export interface ColorPaletteVariables { - colorPrimary: string - colorSecondary: string - - colorRed: string - colorOrange: string - colorYellow: string - colorOlive: string - colorGreen: string - colorTeal: string - colorBlue: string - colorViolet: string - colorPurple: string - colorPink: string - colorBrown: string - colorGrey: string - colorBlack: string - colorWhite: string +export interface ColorPalette { + primary: string + secondary: string + + black: string + brown: string + blue: string + green: string + gray: string + olive: string + orange: string + pink: string + purple: string + teal: string + red: string + violet: string + white: string + yellow: string } -export type ComponentColors = - | 'primary' - | 'secondary' - | 'red' - | 'orange' - | 'yellow' - | 'olive' - | 'green' - | 'teal' - | 'blue' - | 'violet' - | 'purple' - | 'pink' - | 'brown' - | 'grey' - | 'black' - | 'white' +export type ComponentColors = keyof ColorPalette | string // ======================================================== // Fonts