feat(Header): add descriptionColor variable (#78)

* introduce variables to renderComponent() function

* add descriptionColor property

* remove file that was introduced after merge

* adjust changes with the last theming strategy

* remove unused import

* changelog

* introduce important changes to button

* simplify expression for applying variables for Description

* remove temp changes

CHANGELOG.md

@@ -25,6 +25,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Features
 - Add basic `Radio` component @alinais ([#100](https://github.com/stardust-ui/react/pull/100))
+- Add `descriptionColor` to Header @kuzhelov ([#78](https://github.com/stardust-ui/react/pull/78))
 
 <!--------------------------------[ v0.3.0 ]------------------------------- -->
 ## [v0.3.0](https://github.com/stardust-ui/react/tree/v0.3.0) (2018-08-22)
@@ -50,7 +51,6 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.2.6...v0.2.7)
 
 ### Fixes
-
 - Add selection property to child items in ListExampleSelection so that styles and roles are applied properly @jurokapsiar ([#70](https://github.com/stardust-ui/react/pull/70))
 - Menu `onClick` handler moved from `li` to `a` (accessibility) @miroslavstastny ([#61](https://github.com/stardust-ui/react/pull/61))
 - Image `fluid` is applied on the avatar variations @mnajdova ([#77](https://github.com/stardust-ui/react/pull/77))
@@ -61,16 +61,13 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Features
 - Add `color` variables to Header and Header.Description @kuzhelov ([#72](https://github.com/stardust-ui/react/pull/72))
 - Add `ItemLayout` component @mnajdova ([#60](https://github.com/stardust-ui/react/pull/60))
-
-## Features
 - Add Input `clearable` prop @alinais ([#37](https://github.com/stardust-ui/react/pull/37))
 
 <!--------------------------------[ v0.2.6 ]------------------------------- -->
 ## [v0.2.6](https://github.com/stardust-ui/react/tree/v0.2.6) (2018-08-09)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.2.5...v0.2.6)
 
 ### Fixes
-
 - Remove unused dependencies and move development dependencies to devDependencies @levithomason ([#51](https://github.com/stardust-ui/react/pull/51))
 - Fix Avatar alignment issue and initials for long names @mnajdova ([#38](https://github.com/stardust-ui/react/pull/38))
 - Changing the default styles for Input component @alinais ([#25](https://github.com/stardust-ui/react/pull/25))
@@ -98,7 +95,6 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.2.3...v0.2.4)
 
 ### Fixes
-
 - Replaced Header `subheader` with `description` and fixed it to render well-formed HTML @mnajdova ([#17](https://github.com/stardust-ui/react/pull/17))
 - Removed allowSyntheticDefaultImports from shared tsconfig but allow it on docs @aniknafs ([#46](https://github.com/stardust-ui/react/pull/46))
 

src/components/Header/Header.tsx

@@ -58,8 +58,8 @@ class Header extends UIComponent<any, any> {
 
   static Description = HeaderDescription
 
-  renderComponent({ ElementType, classes, rest }) {
-    const { children, content, description } = this.props
+  renderComponent({ ElementType, classes, variables: v, rest }) {
+    const { children, content, description: descriptionContentOrProps } = this.props
 
     if (childrenExist(children)) {
       return (
@@ -69,7 +69,14 @@ class Header extends UIComponent<any, any> {
       )
     }
 
-    const descriptionElement = HeaderDescription.create(description, { generateKey: false })
+    const descriptionElement = HeaderDescription.create(descriptionContentOrProps, {
+      defaultProps: {
+        variables: {
+          ...(v.descriptionColor && { color: v.descriptionColor }),
+        },
+      },
+      generateKey: false,
+    })
 
     return (
       <ElementType {...rest} className={classes.root}>

src/lib/renderComponent.tsx

@@ -7,7 +7,6 @@ import felaRenderer from './felaRenderer'
 import getClasses from './getClasses'
 import getElementType from './getElementType'
 import getUnhandledProps from './getUnhandledProps'
-import toCompactArray from './toCompactArray'
 
 import {
   ComponentStyleFunctionParam,

src/themes/teams/componentVariables.ts

@@ -10,6 +10,9 @@ export { default as Divider } from './components/Divider/dividerVariables'
 
 export { default as Grid } from './components/Grid/gridVariables'
 
+export { default as Header } from './components/Header/headerVariables'
+export { default as HeaderDescription } from './components/Header/headerDescriptionVariables'
+
 export { default as Icon } from './components/Icon/iconVariables'
 
 export { default as Image } from './components/Image/imageVariables'

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

@@ -1,3 +1,4 @@
 export default siteVariables => ({
   color: 'black',
+  descriptionColor: undefined,
 })