diff --git a/CHANGELOG.md b/CHANGELOG.md index 6140d7bc1c..e2293b5161 100644 --- a/CHANGELOG.md +++ b/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](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) diff --git a/docs/src/examples/components/Text/Variations/TextExampleColor.shorthand.tsx b/docs/src/examples/components/Text/Variations/TextExampleColor.shorthand.tsx new file mode 100644 index 0000000000..7997c1b1e0 --- /dev/null +++ b/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 = () => ( + + _.keys({ ...emphasisColors, ...naturalColors }).map(color => ( + <> + +
+ + )) + } + /> +) + +export default TextExampleColor diff --git a/docs/src/examples/components/Text/Variations/TextExampleColor.tsx b/docs/src/examples/components/Text/Variations/TextExampleColor.tsx new file mode 100644 index 0000000000..79b78d5ae2 --- /dev/null +++ b/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 = () => ( + + _.keys({ ...emphasisColors, ...naturalColors }).map(color => ( + <> + + {_.startCase(color)} + +
+ + )) + } + /> +) + +export default TextExampleColor diff --git a/docs/src/examples/components/Text/Variations/index.tsx b/docs/src/examples/components/Text/Variations/index.tsx index b2721770bf..73d9b34082 100644 --- a/docs/src/examples/components/Text/Variations/index.tsx +++ b/docs/src/examples/components/Text/Variations/index.tsx @@ -4,6 +4,11 @@ import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection' const Variations = () => ( + , 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, diff --git a/src/lib/colorUtils.ts b/src/lib/colorUtils.ts new file mode 100644 index 0000000000..471b27aa54 --- /dev/null +++ b/src/lib/colorUtils.ts @@ -0,0 +1,11 @@ +import * as _ from 'lodash' +import { SiteVariablesInput, ColorVariants, ColorValues } from '../themes/types' + +export const mapColorsToScheme = ( + siteVars: SiteVariablesInput, + mapper: keyof ColorVariants | ((color: ColorVariants) => T), +): ColorValues => + _.mapValues( + { ...siteVars.emphasisColors, ...siteVars.naturalColors }, + typeof mapper === 'number' ? String(mapper) : (mapper as any), + ) as ColorValues diff --git a/src/lib/index.ts b/src/lib/index.ts index 4415498664..7ad00ecc6e 100644 --- a/src/lib/index.ts +++ b/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' diff --git a/src/themes/teams/colors.ts b/src/themes/teams/colors.ts index ab7bec2375..d342ea9d54 100644 --- a/src/themes/teams/colors.ts +++ b/src/themes/teams/colors.ts @@ -88,7 +88,6 @@ export const naturalColors: NaturalColors = { 800: '#F9D844', 900: '#F8D22A', }, - darkOrange: { 50: '#F9ECEA', 100: '#ECBCB3', diff --git a/src/themes/teams/components/Divider/dividerStyles.ts b/src/themes/teams/components/Divider/dividerStyles.ts index b912214933..6cfc94488b 100644 --- a/src/themes/teams/components/Divider/dividerStyles.ts +++ b/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 = { +const dividerStyles: ComponentSlotStylesInput = { 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 = { 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), }, }), } diff --git a/src/themes/teams/components/Divider/dividerVariables.ts b/src/themes/teams/components/Divider/dividerVariables.ts index 915a1a6907..ad11315098 100644 --- a/src/themes/teams/components/Divider/dividerVariables.ts +++ b/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 + colors: ColorValues 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, diff --git a/src/themes/teams/components/Text/textStyles.ts b/src/themes/teams/components/Text/textStyles.ts index 24861465a2..4c1ac02d67 100644 --- a/src/themes/teams/components/Text/textStyles.ts +++ b/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, diff --git a/src/themes/teams/components/Text/textVariables.ts b/src/themes/teams/components/Text/textVariables.ts index 6330b4b256..75292294de 100644 --- a/src/themes/teams/components/Text/textVariables.ts +++ b/src/themes/teams/components/Text/textVariables.ts @@ -1,4 +1,8 @@ +import { ColorValues } from '../../../types' +import { mapColorsToScheme } from '../../../../lib' + export interface TextVariables { + colors: ColorValues 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, diff --git a/src/themes/types.ts b/src/themes/types.ts index 076b84951f..646d876224 100644 --- a/src/themes/types.ts +++ b/src/themes/types.ts @@ -71,6 +71,16 @@ type EmphasisColorsStrict = Partial<{ export type EmphasisColors = Extendable +/** + * 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 = Extendable>, T> + /** * A type for a base colors. */