From b3b5dafa6a453118563c8b8f706e7ecdc9cc6e64 Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Tue, 18 Dec 2018 14:35:07 +0200 Subject: [PATCH 1/4] feat(header): header and header description color prop --- .../HeaderExampleColor.shorthand.tsx | 21 ++++++++++++++++++ .../Header/Variations/HeaderExampleColor.tsx | 22 +++++++++++++++++++ .../components/Header/Variations/index.tsx | 5 +++++ src/components/Header/Header.tsx | 6 +++-- src/components/Header/HeaderDescription.tsx | 6 +++-- .../Header/headerDescriptionStyles.ts | 14 ++++++++---- .../Header/headerDescriptionVariables.ts | 18 ++++++++++++--- .../teams/components/Header/headerStyles.ts | 19 +++++++++++----- .../components/Header/headerVariables.ts | 6 +++++ 9 files changed, 100 insertions(+), 17 deletions(-) create mode 100644 docs/src/examples/components/Header/Variations/HeaderExampleColor.shorthand.tsx create mode 100644 docs/src/examples/components/Header/Variations/HeaderExampleColor.tsx diff --git a/docs/src/examples/components/Header/Variations/HeaderExampleColor.shorthand.tsx b/docs/src/examples/components/Header/Variations/HeaderExampleColor.shorthand.tsx new file mode 100644 index 0000000000..7961954cc2 --- /dev/null +++ b/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 = () => ( + + _.keys({ ...emphasisColors, ...naturalColors }).map(color => ( +
+ )) + } + /> +) + +export default HeaderExampleColor diff --git a/docs/src/examples/components/Header/Variations/HeaderExampleColor.tsx b/docs/src/examples/components/Header/Variations/HeaderExampleColor.tsx new file mode 100644 index 0000000000..96cf6743cf --- /dev/null +++ b/docs/src/examples/components/Header/Variations/HeaderExampleColor.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import _ from 'lodash' +import { Header, ProviderConsumer } from '@stardust-ui/react' + +const HeaderExampleColor = () => ( + + _.keys({ ...emphasisColors, ...naturalColors }).map(color => ( +
+ {_.startCase(color)} +
+ )) + } + /> +) + +export default HeaderExampleColor diff --git a/docs/src/examples/components/Header/Variations/index.tsx b/docs/src/examples/components/Header/Variations/index.tsx index ca7a86be9c..346dfbbfc2 100644 --- a/docs/src/examples/components/Header/Variations/index.tsx +++ b/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" /> + ) diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index d9ade9af52..a563d68fca 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -9,6 +9,7 @@ import { ChildrenComponentProps, ContentComponentProps, commonPropTypes, + ColorComponentProps, } from '../../lib' import HeaderDescription from './HeaderDescription' import { Extendable, ShorthandValue } from '../../../types/utils' @@ -16,7 +17,8 @@ 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, any> { static displayName = 'Header' static propTypes = { - ...commonPropTypes.createCommon(), + ...commonPropTypes.createCommon({ color: true }), description: customPropTypes.itemShorthand, textAlign: PropTypes.oneOf(['left', 'center', 'right', 'justified']), } diff --git a/src/components/Header/HeaderDescription.tsx b/src/components/Header/HeaderDescription.tsx index 1943948043..adc25a6209 100644 --- a/src/components/Header/HeaderDescription.tsx +++ b/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, static displayName = 'HeaderDescription' static propTypes = { - ...commonPropTypes.createCommon(), + ...commonPropTypes.createCommon({ color: true }), } static defaultProps = { diff --git a/src/themes/teams/components/Header/headerDescriptionStyles.ts b/src/themes/teams/components/Header/headerDescriptionStyles.ts index b49c56d101..2df5647631 100644 --- a/src/themes/teams/components/Header/headerDescriptionStyles.ts +++ b/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 = { + 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 diff --git a/src/themes/teams/components/Header/headerDescriptionVariables.ts b/src/themes/teams/components/Header/headerDescriptionVariables.ts index 3de2fffb02..c41a19513c 100644 --- a/src/themes/teams/components/Header/headerDescriptionVariables.ts +++ b/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 + color: string +} + +export default (siteVariables: any): HeaderDescriptionVariables => { + const colorVariant = 500 + return { + colors: mapColorsToScheme(siteVariables, colorVariant), + color: siteVariables.gray04, + } +} diff --git a/src/themes/teams/components/Header/headerStyles.ts b/src/themes/teams/components/Header/headerStyles.ts index 668937a72d..ecf3789006 100644 --- a/src/themes/teams/components/Header/headerStyles.ts +++ b/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 = { + 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 diff --git a/src/themes/teams/components/Header/headerVariables.ts b/src/themes/teams/components/Header/headerVariables.ts index 2147b544b9..7891afe646 100644 --- a/src/themes/teams/components/Header/headerVariables.ts +++ b/src/themes/teams/components/Header/headerVariables.ts @@ -1,10 +1,16 @@ +import { ColorValues } from '../../../types' +import { mapColorsToScheme } from '../../../../lib' + export interface HeaderVariables { + colors: ColorValues color: string descriptionColor: string } export default (siteVars: any): HeaderVariables => { + const colorVariant = 500 return { + colors: mapColorsToScheme(siteVars, colorVariant), color: siteVars.black, descriptionColor: undefined, } From 946c8270212be89d166b2de7d8c5d219104eae8d Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Tue, 18 Dec 2018 15:20:03 +0200 Subject: [PATCH 2/4] changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e2293b5161..721a2c2f48 100644 --- a/CHANGELOG.md +++ b/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](https://github.com/stardust-ui/react/tree/v0.15.0) (2018-12-17) From 9f4023219d78e38d79cc4b3dfca136fa148fb3e5 Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Tue, 18 Dec 2018 15:28:22 +0200 Subject: [PATCH 3/4] fixed examples --- .../Header/Variations/HeaderExampleColor.shorthand.tsx | 2 +- .../Header/Variations/HeaderExampleColor.tsx | 10 ++++------ 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/docs/src/examples/components/Header/Variations/HeaderExampleColor.shorthand.tsx b/docs/src/examples/components/Header/Variations/HeaderExampleColor.shorthand.tsx index 7961954cc2..0ddbdd56f3 100644 --- a/docs/src/examples/components/Header/Variations/HeaderExampleColor.shorthand.tsx +++ b/docs/src/examples/components/Header/Variations/HeaderExampleColor.shorthand.tsx @@ -11,7 +11,7 @@ const HeaderExampleColor = () => ( as="h4" color={color} content={_.startCase(color)} - description={{ content: `Description of ${color} color`, color }} + description={{ content: `Description of ${_.lowerCase(color)} color`, color }} /> )) } diff --git a/docs/src/examples/components/Header/Variations/HeaderExampleColor.tsx b/docs/src/examples/components/Header/Variations/HeaderExampleColor.tsx index 96cf6743cf..9bd112cd00 100644 --- a/docs/src/examples/components/Header/Variations/HeaderExampleColor.tsx +++ b/docs/src/examples/components/Header/Variations/HeaderExampleColor.tsx @@ -6,13 +6,11 @@ const HeaderExampleColor = () => ( _.keys({ ...emphasisColors, ...naturalColors }).map(color => ( -
+
{_.startCase(color)} + + {`Description of ${_.lowerCase(color)} color`} +
)) } From c8a62d5e851f4106fc4fc758c6b89112cb23c869 Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Tue, 18 Dec 2018 17:40:55 +0200 Subject: [PATCH 4/4] addressed PR comments --- .../teams/components/Header/headerDescriptionStyles.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/themes/teams/components/Header/headerDescriptionStyles.ts b/src/themes/teams/components/Header/headerDescriptionStyles.ts index 2df5647631..9efcdd2d67 100644 --- a/src/themes/teams/components/Header/headerDescriptionStyles.ts +++ b/src/themes/teams/components/Header/headerDescriptionStyles.ts @@ -2,10 +2,10 @@ import * as _ from 'lodash' import { pxToRem } from '../../utils' import { ICSSInJSStyle, ComponentSlotStylesInput } from '../../../types' -import { HeaderProps } from '../../../../components/Header/Header' -import { HeaderVariables } from './headerVariables' +import { HeaderDescriptionProps } from '../../../../components/Header/HeaderDescription' +import { HeaderDescriptionVariables } from './headerDescriptionVariables' -const headerStyles: ComponentSlotStylesInput = { +const headerStyles: ComponentSlotStylesInput = { root: ({ props: p, variables: v }): ICSSInJSStyle => ({ display: 'block', color: _.get(v.colors, p.color, v.color),