feat(segment): color prop (#632)

* feat(segment): color prop

* changelog

* fixed color again

* simplified example

* introduced fix to make segment inverted work without specifying color

Author: Alexandru Buliga

CHANGELOG.md

@@ -33,6 +33,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add and export compose icons in Teams theme @joheredi ([#639](https://github.com/stardust-ui/react/pull/639))
 - Add `menu` prop to `MenuItem` @mnajdova ([#539](https://github.com/stardust-ui/react/pull/539))
 - Enable RTL for `FocusZone` @sophieH29 ([#646](https://github.com/stardust-ui/react/pull/646))
+- Add `color` prop to `Segment` component @Bugaa92 ([#632](https://github.com/stardust-ui/react/pull/632))
 
 ### Documentation
 - Add more accessibility descriptions to components and behaviors @jurokapsiar  ([#648](https://github.com/stardust-ui/react/pull/648))

docs/src/examples/components/Segment/Variations/SegmentExampleColor.shorthand.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react'
+import * as _ from 'lodash'
+import { Segment, ProviderConsumer } from '@stardust-ui/react'
+
+const SegmentExampleColor = () => (
+  <ProviderConsumer
+    render={({ siteVariables: { emphasisColors, naturalColors } }) =>
+      _.keys({ ...emphasisColors, ...naturalColors }).map(color => (
+        <Segment key={color} color={color} content={_.startCase(color)} inverted />
+      ))
+    }
+  />
+)
+
+export default SegmentExampleColor

docs/src/examples/components/Segment/Variations/SegmentExampleColor.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react'
+import * as _ from 'lodash'
+import { Segment, ProviderConsumer } from '@stardust-ui/react'
+
+const SegmentExampleColor = () => (
+  <ProviderConsumer
+    render={({ siteVariables: { emphasisColors, naturalColors } }) =>
+      _.keys({ ...emphasisColors, ...naturalColors }).map(color => (
+        <Segment key={color} color={color} inverted>
+          {_.startCase(color)}
+        </Segment>
+      ))
+    }
+  />
+)
+
+export default SegmentExampleColor

docs/src/examples/components/Segment/Variations/SegmentExampleInverted.shorthand.tsx

@@ -3,9 +3,9 @@ import { Segment } from '@stardust-ui/react'
 
 const SegmentExampleInvertedShorthand = () => (
   <div>
-    <Segment content="Colored segment." color="purple" />
+    <Segment content="Colored segment." color="red" />
     <br />
-    <Segment inverted content="Colored inverted segment" color="purple" />
+    <Segment inverted content="Colored inverted segment." color="red" />
   </div>
 )
 

docs/src/examples/components/Segment/Variations/SegmentExampleInverted.tsx

@@ -3,10 +3,10 @@ import { Segment } from '@stardust-ui/react'
 
 const SegmentExampleInvertedShorthand = () => (
   <div>
-    <Segment color="purple">Colored segment.</Segment>
+    <Segment color="red">Colored segment.</Segment>
     <br />
-    <Segment inverted color="purple">
-      Colored inverted segment
+    <Segment inverted color="red">
+      Colored inverted segment.
     </Segment>
   </div>
 )

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

@@ -9,6 +9,11 @@ const Variations = () => (
       description="A segment can have its colors inverted for contrast."
       examplePath="components/Segment/Variations/SegmentExampleInverted"
     />
+    <ComponentExample
+      title="Color"
+      description="A segment can have different colors."
+      examplePath="components/Segment/Variations/SegmentExampleColor"
+    />
   </ExampleSection>
 )
 

src/themes/teams/components/Segment/segmentStyles.ts

@@ -1,24 +1,25 @@
+import * as _ from 'lodash'
+
 import { SegmentProps } from '../../../../components/Segment/Segment'
 import { ICSSInJSStyle, ComponentSlotStylesInput } from '../../../types'
 import { SegmentVariables } from './segmentVariables'
 
 const segmentStyles: ComponentSlotStylesInput<SegmentProps, SegmentVariables> = {
   root: ({ props: p, variables: v }): ICSSInJSStyle => {
-    const color = p.color || v.color
+    const segmentColor = _.get(v.colors, p.color)
+
     return {
       padding: v.padding,
-      background: v.background,
+      borderTop: `2px solid transparent`,
       borderRadius: v.borderRadius,
-      boxShadow: '0 1px 1px 1px rgba(34,36,38,.15)',
-      ...(color &&
-        (p.inverted
-          ? {
-              background: color,
-              color: '#eee',
-            }
-          : {
-              borderTop: `2px solid ${color}`,
-            })),
+      boxShadow: `0 1px 1px 1px ${v.boxShadowColor}`,
+      color: v.color,
+      backgroundColor: v.backgroundColor,
+      borderColor: segmentColor,
+      ...(p.inverted && {
+        color: v.backgroundColor,
+        backgroundColor: segmentColor || v.color,
+      }),
     }
   },
 }

src/themes/teams/components/Segment/segmentVariables.ts

@@ -1,17 +1,24 @@
-import { ComponentVariablesPrepared } from '@stardust-ui/react'
+import { ColorValues } from '../../../types'
+import { mapColorsToScheme } from '../../../../lib'
 
 export interface SegmentVariables {
-  padding: string
-  background: string
-  borderRadius: string
+  colors: ColorValues<string>
   color: string
+  backgroundColor: string
+  padding: string
+  borderRadius: string | number
+  boxShadowColor: string
 }
 
-const segmentVariables: ComponentVariablesPrepared = siteVariables => ({
-  padding: '1em',
-  background: siteVariables.bodyBackground,
-  borderRadius: 0,
-  color: undefined,
-})
+export default (siteVariables): SegmentVariables => {
+  const colorVariant = 500
 
-export default segmentVariables
+  return {
+    colors: mapColorsToScheme(siteVariables, colorVariant),
+    color: siteVariables.black,
+    backgroundColor: siteVariables.bodyBackground,
+    padding: '1em',
+    borderRadius: 0,
+    boxShadowColor: 'rgba(34,36,38,.15)',
+  }
+}