feat(header): header and header description color prop

CHANGELOG.md

@@ -19,6 +19,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Features
 - Add `color` prop to `Text` component @Bugaa92 ([#597](https://github.com/stardust-ui/react/pull/597))
+- Add `color` prop to `Header` and `HeaderDescription` components @Bugaa92 ([#628](https://github.com/stardust-ui/react/pull/628))
 
 <!--------------------------------[ v0.15.0 ]------------------------------- -->
 ## [v0.15.0](https://github.com/stardust-ui/react/tree/v0.15.0) (2018-12-17)

docs/src/examples/components/Header/Variations/HeaderExampleColor.shorthand.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import _ from 'lodash'
+import { Header, ProviderConsumer } from '@stardust-ui/react'
+
+const HeaderExampleColor = () => (
+  <ProviderConsumer
+    render={({ siteVariables: { emphasisColors, naturalColors } }) =>
+      _.keys({ ...emphasisColors, ...naturalColors }).map(color => (
+        <Header
+          key={color}
+          as="h4"
+          color={color}
+          content={_.startCase(color)}
+          description={{ content: `Description of ${_.lowerCase(color)} color`, color }}
+        />
+      ))
+    }
+  />
+)
+
+export default HeaderExampleColor

docs/src/examples/components/Header/Variations/HeaderExampleColor.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import _ from 'lodash'
+import { Header, ProviderConsumer } from '@stardust-ui/react'
+
+const HeaderExampleColor = () => (
+  <ProviderConsumer
+    render={({ siteVariables: { emphasisColors, naturalColors } }) =>
+      _.keys({ ...emphasisColors, ...naturalColors }).map(color => (
+        <Header key={color} as="h4" color={color}>
+          {_.startCase(color)}
+          <Header.Description color={color}>
+            {`Description of ${_.lowerCase(color)} color`}
+          </Header.Description>
+        </Header>
+      ))
+    }
+  />
+)
+
+export default HeaderExampleColor

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

@@ -19,6 +19,11 @@ const Variations = () => (
       description="Headers may be aligned to the left, right, center or be justified."
       examplePath="components/Header/Variations/HeaderExampleTextAlign"
     />
+    <ComponentExample
+      title="Color"
+      description="Headers and descriptions can have colors."
+      examplePath="components/Header/Variations/HeaderExampleColor"
+    />
   </ExampleSection>
 )
 

src/components/Header/Header.tsx

@@ -9,14 +9,16 @@ import {
   ChildrenComponentProps,
   ContentComponentProps,
   commonPropTypes,
+  ColorComponentProps,
 } from '../../lib'
 import HeaderDescription from './HeaderDescription'
 import { Extendable, ShorthandValue } from '../../../types/utils'
 
 export interface HeaderProps
   extends UIComponentProps,
     ChildrenComponentProps,
-    ContentComponentProps {
+    ContentComponentProps,
+    ColorComponentProps {
   /** Shorthand for Header.Description. */
   description?: ShorthandValue
 
@@ -40,7 +42,7 @@ class Header extends UIComponent<Extendable<HeaderProps>, any> {
   static displayName = 'Header'
 
   static propTypes = {
-    ...commonPropTypes.createCommon(),
+    ...commonPropTypes.createCommon({ color: true }),
     description: customPropTypes.itemShorthand,
     textAlign: PropTypes.oneOf(['left', 'center', 'right', 'justified']),
   }

src/components/Header/HeaderDescription.tsx

@@ -8,13 +8,15 @@ import {
   ChildrenComponentProps,
   ContentComponentProps,
   commonPropTypes,
+  ColorComponentProps,
 } from '../../lib'
 import { Extendable } from '../../../types/utils'
 
 export interface HeaderDescriptionProps
   extends UIComponentProps,
     ChildrenComponentProps,
-    ContentComponentProps {}
+    ContentComponentProps,
+    ColorComponentProps {}
 
 /**
  * A header's description provides more detailed information.
@@ -27,7 +29,7 @@ class HeaderDescription extends UIComponent<Extendable<HeaderDescriptionProps>,
   static displayName = 'HeaderDescription'
 
   static propTypes = {
-    ...commonPropTypes.createCommon(),
+    ...commonPropTypes.createCommon({ color: true }),
   }
 
   static defaultProps = {

src/themes/teams/components/Header/headerDescriptionStyles.ts

@@ -1,11 +1,17 @@
+import * as _ from 'lodash'
+
 import { pxToRem } from '../../utils'
-import { ICSSInJSStyle } from '../../../types'
+import { ICSSInJSStyle, ComponentSlotStylesInput } from '../../../types'
+import { HeaderProps } from '../../../../components/Header/Header'
+import { HeaderVariables } from './headerVariables'
 
-export default {
-  root: ({ variables: v }): ICSSInJSStyle => ({
+const headerStyles: ComponentSlotStylesInput<HeaderProps, HeaderVariables> = {
+  root: ({ props: p, variables: v }): ICSSInJSStyle => ({
     display: 'block',
+    color: _.get(v.colors, p.color, v.color),
     fontSize: pxToRem(22),
-    color: v.color,
     fontWeight: 400,
   }),
 }
+
+export default headerStyles

src/themes/teams/components/Header/headerDescriptionVariables.ts

@@ -1,3 +1,15 @@
-export default siteVariables => ({
-  color: siteVariables.gray04,
-})
+import { ColorValues } from '../../../types'
+import { mapColorsToScheme } from '../../../../lib'
+
+export interface HeaderDescriptionVariables {
+  colors: ColorValues<string>
+  color: string
+}
+
+export default (siteVariables: any): HeaderDescriptionVariables => {
+  const colorVariant = 500
+  return {
+    colors: mapColorsToScheme(siteVariables, colorVariant),
+    color: siteVariables.gray04,
+  }
+}

src/themes/teams/components/Header/headerStyles.ts

@@ -1,10 +1,17 @@
-import { ICSSInJSStyle } from '../../../types'
+import * as _ from 'lodash'
+import { TextAlignProperty } from 'csstype'
 
-export default {
-  root: ({ props, variables: v }): ICSSInJSStyle => ({
-    color: v.color,
-    textAlign: props.textAlign,
+import { ICSSInJSStyle, ComponentSlotStylesInput } from '../../../types'
+import { HeaderProps } from '../../../../components/Header/Header'
+import { HeaderVariables } from './headerVariables'
+
+const headerStyles: ComponentSlotStylesInput<HeaderProps, HeaderVariables> = {
+  root: ({ props: p, variables: v }): ICSSInJSStyle => ({
     display: 'block',
-    ...(props.description && { marginBottom: 0 }),
+    color: _.get(v.colors, p.color, v.color),
+    textAlign: p.textAlign as TextAlignProperty,
+    ...(p.description && { marginBottom: 0 }),
   }),
 }
+
+export default headerStyles

src/themes/teams/components/Header/headerVariables.ts

@@ -1,10 +1,16 @@
+import { ColorValues } from '../../../types'
+import { mapColorsToScheme } from '../../../../lib'
+
 export interface HeaderVariables {
+  colors: ColorValues<string>
   color: string
   descriptionColor: string
 }
 
 export default (siteVars: any): HeaderVariables => {
+  const colorVariant = 500
   return {
+    colors: mapColorsToScheme(siteVars, colorVariant),
     color: siteVars.black,
     descriptionColor: undefined,
   }