feat(text): color prop (#597)

* feat(text): color prop

* addressed comments

* changelog

* amended changelog

* made text color override other props that change color

Author: Alexandru Buliga

CHANGELOG.md

@@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### Features
+- Add `color` prop to `Text` component @Bugaa92 ([#597](https://github.com/stardust-ui/react/pull/597))
+
 <!--------------------------------[ v0.15.0 ]------------------------------- -->
 ## [v0.15.0](https://github.com/stardust-ui/react/tree/v0.15.0) (2018-12-17)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.14.0...v0.15.0)

docs/src/examples/components/Text/Variations/TextExampleColor.shorthand.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import _ from 'lodash'
+import { Text, ProviderConsumer } from '@stardust-ui/react'
+
+const TextExampleColor = () => (
+  <ProviderConsumer
+    render={({ siteVariables: { emphasisColors, naturalColors } }) =>
+      _.keys({ ...emphasisColors, ...naturalColors }).map(color => (
+        <>
+          <Text key={color} color={color} content={_.startCase(color)} />
+          <br />
+        </>
+      ))
+    }
+  />
+)
+
+export default TextExampleColor

docs/src/examples/components/Text/Variations/TextExampleColor.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import _ from 'lodash'
+import { Text, ProviderConsumer } from '@stardust-ui/react'
+
+const TextExampleColor = () => (
+  <ProviderConsumer
+    render={({ siteVariables: { emphasisColors, naturalColors } }) =>
+      _.keys({ ...emphasisColors, ...naturalColors }).map(color => (
+        <>
+          <Text key={color} color={color}>
+            {_.startCase(color)}
+          </Text>
+          <br />
+        </>
+      ))
+    }
+  />
+)
+
+export default TextExampleColor

docs/src/examples/components/Text/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 Text component can have different colors."
+      examplePath="components/Text/Variations/TextExampleColor"
+    />
     <ComponentExample
       title="@ mention"
       description="A Text component for @ mentions."

src/components/Text/Text.tsx

@@ -9,11 +9,16 @@ import {
   ContentComponentProps,
   ChildrenComponentProps,
   commonPropTypes,
+  ColorComponentProps,
 } from '../../lib'
 
 import { Extendable } from '../../../types/utils'
 
-export interface TextProps extends UIComponentProps, ContentComponentProps, ChildrenComponentProps {
+export interface TextProps
+  extends UIComponentProps,
+    ContentComponentProps,
+    ChildrenComponentProps,
+    ColorComponentProps {
   /** At mentions can be formatted to draw users' attention. Mentions for "me" can be formatted to appear differently. */
   atMention?: boolean | 'me'
 
@@ -63,7 +68,7 @@ class Text extends UIComponent<Extendable<TextProps>, any> {
   static displayName = 'Text'
 
   static propTypes = {
-    ...commonPropTypes.createCommon(),
+    ...commonPropTypes.createCommon({ color: true }),
     atMention: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['me'])]),
     disabled: PropTypes.bool,
     error: PropTypes.bool,

src/lib/colorUtils.ts

@@ -0,0 +1,11 @@
+import * as _ from 'lodash'
+import { SiteVariablesInput, ColorVariants, ColorValues } from '../themes/types'
+
+export const mapColorsToScheme = <T>(
+  siteVars: SiteVariablesInput,
+  mapper: keyof ColorVariants | ((color: ColorVariants) => T),
+): ColorValues<T> =>
+  _.mapValues(
+    { ...siteVars.emphasisColors, ...siteVars.naturalColors },
+    typeof mapper === 'number' ? String(mapper) : (mapper as any),
+  ) as ColorValues<T>

src/lib/index.ts

@@ -3,6 +3,7 @@ import * as commonPropTypes from './commonPropTypes'
 
 export { default as AutoControlledComponent } from './AutoControlledComponent'
 export { default as childrenExist } from './childrenExist'
+export { mapColorsToScheme } from './colorUtils'
 export { default as UIComponent } from './UIComponent'
 export { EventStack } from './eventStack'
 export { felaRenderer, felaRtlRenderer } from './felaRenderer'

src/themes/teams/colors.ts

@@ -88,7 +88,6 @@ export const naturalColors: NaturalColors = {
     800: '#F9D844',
     900: '#F8D22A',
   },
-
   darkOrange: {
     50: '#F9ECEA',
     100: '#ECBCB3',

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

@@ -2,37 +2,32 @@ import * as _ from 'lodash'
 
 import { childrenExist } from '../../../../lib'
 import { pxToRem } from '../../utils'
-import { ComponentSlotStylesInput, ICSSInJSStyle, ICSSPseudoElementStyle } from '../../../types'
+import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { DividerPropsWithDefaults } from '../../../../components/Divider/Divider'
+import { DividerVariables } from './dividerVariables'
 
-const dividerBorderStyle = (size, color): ICSSInJSStyle => ({
-  height: `${size + 1}px`,
-  background: color,
-})
-
-const beforeAndAfter = (color, size, type, variables): ICSSPseudoElementStyle => ({
+const beforeAndAfter = (
+  color: string,
+  size: number,
+  variables: DividerVariables,
+): ICSSInJSStyle => ({
   content: '""',
   flex: 1,
-  ...dividerBorderStyle(size, variables.dividerColor),
-  ...(color && {
-    ...dividerBorderStyle(size, _.get(variables.colors, color)),
-  }),
+  height: `${size + 1}px`,
+  background: _.get(variables.colors, color, variables.dividerColor),
 })
 
-const dividerStyles: ComponentSlotStylesInput<DividerPropsWithDefaults, any> = {
+const dividerStyles: ComponentSlotStylesInput<DividerPropsWithDefaults, DividerVariables> = {
   root: ({ props, variables }): ICSSInJSStyle => {
-    const { children, color, fitted, size, type, important, content } = props
+    const { children, color, fitted, size, important, content } = props
     return {
-      color: variables.textColor,
+      color: _.get(variables.colors, color, variables.textColor),
       display: 'flex',
       alignItems: 'center',
       ...(!fitted && {
         paddingTop: variables.dividerPadding,
         paddingBottom: variables.dividerPadding,
       }),
-      ...(color && {
-        color: _.get(variables.colors, color),
-      }),
       ...(important && {
         fontWeight: variables.importantFontWeight,
       }),
@@ -42,17 +37,17 @@ const dividerStyles: ComponentSlotStylesInput<DividerPropsWithDefaults, any> = {
             fontSize: pxToRem(12 + size),
             lineHeight: variables.textLineHeight,
             '::before': {
-              ...beforeAndAfter(color, size, type, variables),
+              ...beforeAndAfter(color, size, variables),
               marginRight: pxToRem(20),
             },
             '::after': {
-              ...beforeAndAfter(color, size, type, variables),
+              ...beforeAndAfter(color, size, variables),
               marginLeft: pxToRem(20),
             },
           }
         : {
             '::before': {
-              ...beforeAndAfter(color, size, type, variables),
+              ...beforeAndAfter(color, size, variables),
             },
           }),
     }

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

@@ -1,23 +1,25 @@
 import * as _ from 'lodash'
-import { pxToRem } from '../../utils'
+import { FontWeightProperty } from 'csstype'
 
-import { EmphasisColors, NaturalColors } from '../../../types'
+import { pxToRem } from '../../utils'
+import { ColorValues } from '../../../types'
+import { mapColorsToScheme } from '../../../../lib'
 
 export interface DividerVariables {
-  colors: Record<keyof (EmphasisColors & NaturalColors), string>
+  colors: ColorValues<string>
   dividerColor: string
   textColor: string
   textFontSize: string
   textLineHeight: string
-  importantFontWeight: string
+  importantFontWeight: FontWeightProperty
   dividerPadding: string
 }
 
 export default (siteVars: any): DividerVariables => {
-  const colorVariant = '500'
+  const colorVariant = 500
 
   return {
-    colors: _.mapValues({ ...siteVars.emphasisColors, ...siteVars.naturalColors }, colorVariant),
+    colors: mapColorsToScheme(siteVars, colorVariant),
     dividerColor: siteVars.gray09,
     textColor: siteVars.gray03,
     textFontSize: siteVars.fontSizeSmall,

src/themes/teams/components/Text/textStyles.ts

@@ -1,3 +1,5 @@
+import * as _ from 'lodash'
+
 import { ComponentStyleFunctionParam, ICSSInJSStyle } from '../../../types'
 import { truncateStyle } from '../../../../styles/customCSS'
 import { TextVariables } from './textVariables'
@@ -7,6 +9,7 @@ export default {
   root: ({
     props: {
       atMention,
+      color,
       disabled,
       error,
       size,
@@ -43,6 +46,7 @@ export default {
         fontWeight: v.importantWeight,
         color: v.importantColor,
       }),
+      ...(color && { color: _.get(v.colors, color) }),
 
       ...(weight === 'light' && {
         fontWeight: v.fontWeightLight,

src/themes/teams/components/Text/textVariables.ts

@@ -1,4 +1,8 @@
+import { ColorValues } from '../../../types'
+import { mapColorsToScheme } from '../../../../lib'
+
 export interface TextVariables {
+  colors: ColorValues<string>
   atMentionMeColor: string
   atMentionMeFontWeight: number
   atMentionOtherColor: string
@@ -29,7 +33,10 @@ export interface TextVariables {
 }
 
 export default (siteVariables): TextVariables => {
+  const colorVariant = 500
+
   return {
+    colors: mapColorsToScheme(siteVariables, colorVariant),
     atMentionOtherColor: siteVariables.brand06,
     atMentionMeColor: siteVariables.orange04,
     atMentionMeFontWeight: siteVariables.fontWeightBold,

src/themes/types.ts

@@ -71,6 +71,16 @@ type EmphasisColorsStrict = Partial<{
 
 export type EmphasisColors = Extendable<EmphasisColorsStrict, ColorVariants>
 
+/**
+ * A type for extracting the color names.
+ */
+type ColorNames = keyof (EmphasisColorsStrict & NaturalColorsStrict)
+
+/**
+ * A type for an extendable set of ColorNames properties of type T
+ */
+export type ColorValues<T> = Extendable<Partial<Record<ColorNames, T>>, T>
+
 /**
  * A type for a base colors.
  */