[RFC] feat(Divider): add color prop

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 => <Divider color={color} content={_.startCase(color)} key={color} />)
+
+export default DividerExampleColorShorthand

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 => (
+    <Divider color={color} key={color}>
+      {_.startCase(color)}
+    </Divider>
+  ))
+
+export default DividerExampleColor

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 <Divider key={size} size={size} content={`Size ${size}`} />
   })
 
-export default DividerExampleSize
+export default DividerExampleSizeShorthand

docs/src/examples/components/Divider/Variations/index.tsx

@@ -4,6 +4,11 @@ import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
 const Variations = () => (
   <ExampleSection title="Variations">
+    <ComponentExample
+      title="Color"
+      description="A divider can have different colors."
+      examplePath="components/Divider/Variations/DividerExampleColor"
+    />
     <ComponentExample
       title="Size"
       description="A divider can have different sizes."

src/components/Divider/Divider.tsx

@@ -2,13 +2,14 @@ import * as React from 'react'
 import * as PropTypes from 'prop-types'
 
 import { childrenExist, createShorthandFactory, customPropTypes, UIComponent } from '../../lib'
-import { ComponentVariablesInput, ComponentSlotStyle } from '../../themes/types'
+import { ComponentColors, ComponentVariablesInput, ComponentSlotStyle } from '../../themes/types'
 import { Extendable, ReactChildren } from '../../../types/utils'
 
 export interface DividerProps {
   as?: any
   children?: ReactChildren
   className?: string
+  color?: ComponentColors | string
   content?: React.ReactNode
   fitted?: boolean
   size?: number
@@ -29,6 +30,7 @@ class Divider extends UIComponent<Extendable<DividerProps>, 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<Extendable<DividerProps>, 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<Extendable<DividerProps>, 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. */

src/lib/getColorValue.ts

@@ -0,0 +1,5 @@
+import { ColorPalette, ComponentColors } from '@stardust-ui/react'
+
+const getColorValue = (colors: ColorPalette, color: ComponentColors) => colors[color] || color
+
+export default getColorValue

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'

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<DividerVariables> => ({
-  primaryColor: siteVars.brand06,
+  colors: {
+    primary: siteVars.brand06,
+  },
   textColor: siteVars.gray02,
 })

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<DividerVariables> => ({
+  colors: {
+    primary: siteVars.white,
+  },
   dividerColor: siteVars.white,
   textColor: siteVars.white,
-  primaryColor: siteVars.white,
 })

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.colors.primary),
+  }),
+  ...(color && {
+    ...dividerBorderStyle(size, getColorValue(variables.colors, color)),
   }),
 })
 
 const dividerStyles: ComponentSlotStylesInput<DividerPropsWithDefaults, any> = {
   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<DividerPropsWithDefaults, any> = {
         paddingBottom: variables.dividerPadding,
       }),
       ...(type === 'primary' && {
-        color: variables.primaryColor,
+        color: variables.colors.primary,
+      }),
+      ...(color && {
+        color: getColorValue(variables.colors, color),
       }),
       ...(important && {
         fontWeight: variables.importantFontWeight,
@@ -39,17 +45,17 @@ const dividerStyles: ComponentSlotStylesInput<DividerPropsWithDefaults, any> = {
             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),
             },
           }),
     }

src/themes/teams/components/Divider/dividerVariables.ts

@@ -1,23 +1,22 @@
 import { pxToRem } from '../../../../lib'
+import { ColorPalette } from '../../../types'
 
 export interface DividerVariables {
+  colors: Partial<ColorPalette>
   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 => ({
+  colors: siteVars.colors,
+  dividerColor: siteVars.gray09,
+  textColor: siteVars.gray03,
+  textFontSize: siteVars.fontSizeSmall,
+  textLineHeight: siteVars.lineHeightSmall,
+  importantFontWeight: siteVars.fontWeightBold,
+  dividerPadding: pxToRem(4),
+})

src/themes/teams/siteVariables.ts

@@ -1,4 +1,5 @@
 import { pxToRem } from '../../lib'
+import { ColorPalette } from '../types'
 
 //
 // VARIABLES
@@ -38,6 +39,26 @@ export const yellow = '#F8D22A'
 export const green = '#92C353'
 export const green04 = '#237b4b'
 
+export const colors: ColorPalette = {
+  primary: brand,
+  secondary: 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
 //

src/themes/types.ts

@@ -312,6 +312,32 @@ export interface ThemeComponentVariablesPrepared {
 
 export interface Renderer extends FelaRenderer {}
 
+// ========================================================
+// Colors
+// ========================================================
+
+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 = keyof ColorPalette | string
+
 // ========================================================
 // Fonts
 // ========================================================