feat(menu): color prop and complex scheme

Author: bmdalex

docs/src/components/Knobs/KnobsSelect.tsx

@@ -0,0 +1,62 @@
+import * as PropTypes from 'prop-types'
+import * as React from 'react'
+import * as _ from 'lodash'
+
+import KnobsField from './KnobsField'
+import KnobsLabel from './KnobsLabel'
+import KnobsControl from './KnobsControl'
+import { ObjectOf } from 'types/utils'
+
+export type KnobsSelectItem = { name: string; value: string }
+
+export interface KnobsSelectProps {
+  onChange?: (data: KnobsSelectProps) => void
+  name?: string
+  items?: KnobsSelectItem[]
+  selectedItem?: KnobsSelectItem
+}
+
+class KnobsSelect extends React.Component<KnobsSelectProps, {}> {
+  private itemsMap: ObjectOf<KnobsSelectItem> = {}
+
+  public static propTypes = {
+    onChange: PropTypes.func,
+    name: PropTypes.string.isRequired,
+    items: PropTypes.arrayOf(PropTypes.shape({ name: PropTypes.string, value: PropTypes.string })),
+    selectedItem: PropTypes.shape({ name: PropTypes.string, value: PropTypes.string }),
+  }
+
+  componentDidMount() {
+    this.props.items.forEach(item => {
+      this.itemsMap[item.value] = item
+    })
+  }
+
+  render() {
+    const { name, items } = this.props
+    if (!items || !items.length) {
+      return null
+    }
+
+    const selectedItem = this.props.selectedItem || this.props.items[0]
+
+    return (
+      <KnobsField>
+        <KnobsControl>
+          <select value={selectedItem.value} onChange={this.handleChange}>
+            {items.map(({ name, value }) => (
+              <option value={value}>{name}</option>
+            ))}
+          </select>
+        </KnobsControl>
+        <KnobsLabel value={selectedItem.value} name={name} />
+      </KnobsField>
+    )
+  }
+
+  private handleChange = (e: React.SyntheticEvent<HTMLElement>) => {
+    this.props.onChange({ selectedItem: this.itemsMap[_.get(e, 'target.value')] })
+  }
+}
+
+export default KnobsSelect

docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react'
+import * as _ from 'lodash'
+import { Menu, ProviderConsumer, Grid, Text } from '@stardust-ui/react'
+
+const items = [
+  { key: 'editorials', content: 'Editorials' },
+  { key: 'review', content: 'Reviews' },
+  { key: 'events', content: 'Upcoming Events' },
+]
+
+const iconItems = [
+  { key: 'home', content: 'Home', icon: 'home' },
+  { key: 'users', content: 'Users', icon: 'users' },
+  { key: 'search', icon: 'search' },
+]
+
+const MenuExampleColor = () => (
+  <ProviderConsumer
+    render={({ siteVariables: { colorScheme } }) => {
+      const colorsArr = _.keys(colorScheme)
+      const colors = _.times(7, num => colorsArr[num % colorsArr.length])
+
+      return (
+        <Grid
+          columns="repeat(2, auto)"
+          styles={{ justifyContent: 'left', justifyItems: 'left', alignItems: 'center' }}
+          variables={{ gridGap: '10px' }}
+        >
+          <Text content={`${_.upperCase(colors[0])} DEFAULT MENU:`} weight="bold" />
+          <Menu defaultActiveIndex={0} color={colors[0]} items={items} />
+          <Text content={`${_.upperCase(colors[1])} PILLS MENU:`} weight="bold" />
+          <Menu defaultActiveIndex={0} color={colors[1]} pills items={items} />
+          <Text content={`${_.upperCase(colors[2])} POINTING MENU:`} weight="bold" />
+          <Menu defaultActiveIndex={0} color={colors[2]} pointing items={items} />
+          <Text content={`${_.upperCase(colors[3])} VERTICAL POINTING MENU:`} weight="bold" />
+          <Menu defaultActiveIndex={0} color={colors[3]} vertical pointing items={items} />
+          <Text content={`${_.upperCase(colors[4])} UNDERLINED MENU:`} weight="bold" />
+          <Menu defaultActiveIndex={0} color={colors[4]} underlined items={items} />
+          <Text content={`${_.upperCase(colors[5])} ICON MENU:`} weight="bold" />
+          <Menu defaultActiveIndex={0} color={colors[5]} items={iconItems} />
+          <Text content={`${_.upperCase(colors[6])} ICON ONLY MENU:`} weight="bold" />
+          <Menu
+            defaultActiveIndex={0}
+            color={colors[6]}
+            iconOnly
+            items={iconItems.map(item => _.pick(item, ['key', 'icon']))}
+          />
+          <Text content={`UNDERLINED MENU (mutiple colors):`} weight="bold" />
+          <Menu
+            defaultActiveIndex={0}
+            underlined
+            color={{ foreground: colors[4], background: colors[5], border: colors[1] }}
+            items={items}
+          />
+        </Grid>
+      )
+    }}
+  />
+)
+
+export default MenuExampleColor

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

@@ -19,6 +19,11 @@ const Variations = () => (
       description="A vertical menu can be fluid which takes up the full space of its container. A horizontal menu does this by default."
       examplePath="components/Menu/Variations/MenuExampleFluid"
     />
+    <ComponentExample
+      title="Colored Menu"
+      description="A Menu can have different colors."
+      examplePath="components/Menu/Variations/MenuExampleColor"
+    />
   </ExampleSection>
 )
 

src/components/Label/Label.tsx

@@ -13,14 +13,14 @@ import {
   commonPropTypes,
   ColorComponentProps,
   rtlTextContainer,
+  ComplexColorPropType,
 } from '../../lib'
 
 import Icon from '../Icon/Icon'
 import Image from '../Image/Image'
 import Layout from '../Layout/Layout'
 import { Accessibility } from '../../lib/accessibility/types'
 import { ReactProps, ShorthandValue } from '../../../types/utils'
-import { ComplexColorPropType } from '../../lib/commonPropInterfaces'
 
 export interface LabelProps
   extends UIComponentProps,

src/components/Menu/Menu.tsx

@@ -12,6 +12,8 @@ import {
   commonPropTypes,
   getKindProp,
   rtlTextContainer,
+  ColorComponentProps,
+  ComplexColorPropType,
 } from '../../lib'
 import MenuItem from './MenuItem'
 import { menuBehavior } from '../../lib/accessibility'
@@ -23,7 +25,10 @@ import MenuDivider from './MenuDivider'
 
 export type MenuShorthandKinds = 'divider' | 'item'
 
-export interface MenuProps extends UIComponentProps, ChildrenComponentProps {
+export interface MenuProps
+  extends UIComponentProps,
+    ChildrenComponentProps,
+    ColorComponentProps<ComplexColorPropType> {
   /**
    * Accessibility behavior if overridden by the user.
    * @default menuBehavior
@@ -93,6 +98,7 @@ class Menu extends AutoControlledComponent<ReactProps<MenuProps>, MenuState> {
   static propTypes = {
     ...commonPropTypes.createCommon({
       content: false,
+      color: 'complex',
     }),
     accessibility: PropTypes.func,
     activeIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -141,6 +147,7 @@ class Menu extends AutoControlledComponent<ReactProps<MenuProps>, MenuState> {
 
   renderItems = (variables: ComponentVariablesObject) => {
     const {
+      color,
       iconOnly,
       items,
       pills,
@@ -172,6 +179,7 @@ class Menu extends AutoControlledComponent<ReactProps<MenuProps>, MenuState> {
 
       return MenuItem.create(item, {
         defaultProps: {
+          color,
           iconOnly,
           pills,
           pointing,

src/components/Menu/MenuItem.tsx

@@ -16,6 +16,8 @@ import {
   isFromKeyboard,
   EventStack,
   rtlTextContainer,
+  ColorComponentProps,
+  ComplexColorPropType,
 } from '../../lib'
 import Icon from '../Icon/Icon'
 import Menu from '../Menu/Menu'
@@ -30,7 +32,8 @@ import Indicator from '../Indicator/Indicator'
 export interface MenuItemProps
   extends UIComponentProps,
     ChildrenComponentProps,
-    ContentComponentProps {
+    ContentComponentProps,
+    ColorComponentProps<ComplexColorPropType> {
   /**
    * Accessibility behavior if overridden by the user.
    * @default menuItemBehavior
@@ -128,7 +131,7 @@ class MenuItem extends AutoControlledComponent<ReactProps<MenuItemProps>, MenuIt
   static create: Function
 
   static propTypes = {
-    ...commonPropTypes.createCommon(),
+    ...commonPropTypes.createCommon({ color: 'complex' }),
     accessibility: PropTypes.func,
     active: PropTypes.bool,
     disabled: PropTypes.bool,
@@ -180,6 +183,7 @@ class MenuItem extends AutoControlledComponent<ReactProps<MenuItemProps>, MenuIt
   renderComponent({ ElementType, classes, accessibility, unhandledProps, styles }) {
     const {
       children,
+      color,
       content,
       icon,
       wrapper,
@@ -230,6 +234,7 @@ class MenuItem extends AutoControlledComponent<ReactProps<MenuItemProps>, MenuIt
           {Menu.create(menu, {
             defaultProps: {
               accessibility: submenuBehavior,
+              color,
               vertical: true,
               primary,
               secondary,

src/lib/colorUtils.ts

@@ -5,10 +5,12 @@ import {
   ColorValues,
   ColorSchemeMapping,
   ColorScheme,
+  ColorSchemeStates,
 } from '../themes/types'
-import { Partial } from '../../types/utils'
 import { ComplexColorPropType } from './commonPropInterfaces'
 
+const mapColorToInitialScheme = (color: string): ColorSchemeStates => ({ initial: color })
+
 export const mapColorsToScheme = <T>(
   siteVars: SiteVariablesInput,
   mapper: keyof ColorVariants | ((color: ColorVariants) => T),
@@ -18,24 +20,27 @@ export const mapColorsToScheme = <T>(
     typeof mapper === 'number' ? String(mapper) : (mapper as any),
   ) as ColorValues<T>
 
-export const getColorSchemeFn = <T>(colorProp: string, colorScheme: ColorValues<T>) => {
-  const colors = _.get(colorScheme, colorProp)
-  return (area: keyof T, defaultColor: string) => (colors ? colors[area] : defaultColor)
-}
+export const getColorFromScheme = <T extends {}>(
+  colorScheme: T,
+  area: keyof T,
+  defaultColor: string,
+): ColorSchemeStates => _.get(colorScheme, area, mapColorToInitialScheme(defaultColor))
 
 export const getColorSchemeFromObject = (
-  colorScheme: ColorValues<Partial<ColorScheme>>,
+  colorScheme: ColorValues<ColorScheme>,
   colors: ComplexColorPropType,
-): Partial<ColorScheme> =>
+): ColorScheme =>
   _.mapValues(colors, (color, colorName) => {
     // if the color scheme contains the color, then get the value from it, otherwise return the color provided
     const colorSchemeValue = _.get(colorScheme, color, colorScheme.default[color])
-    return colorSchemeValue ? colorSchemeValue[colorName] : colors[colorName]
+    return colorSchemeValue
+      ? colorSchemeValue[colorName]
+      : mapColorToInitialScheme(colors[colorName])
   })
 
 export const getColorSchemeWithCustomDefaults = (
   colorScheme: ColorSchemeMapping,
-  customDefaultValues: Partial<ColorScheme>,
+  customDefaultValues: ColorScheme,
 ) => {
   const mergedDefaultValues = {
     ...colorScheme.default,
@@ -49,8 +54,8 @@ export const getColorSchemeWithCustomDefaults = (
 
 export const generateColorScheme = (
   colorProp: ComplexColorPropType,
-  colorScheme: ColorValues<Partial<ColorScheme>>,
-): Partial<ColorScheme> => {
+  colorScheme: ColorValues<ColorScheme>,
+): ColorScheme => {
   // if both color prop and color scheme are defined, we are merging them
   if (colorProp && colorScheme) {
     return typeof colorProp === 'string'
@@ -61,14 +66,14 @@ export const generateColorScheme = (
   // if the color prop is not defined, but the the color scheme is defined, then we are returning
   // the defaults from the color scheme if they exists
   if (colorScheme) {
-    return colorScheme && colorScheme.default ? colorScheme.default : {}
+    return colorScheme.default || {}
   }
 
   // if the color scheme is not defined, then if the color prop is a scheme object we are
   // returning it, otherwise we return an empty object, as it means that the component is
   // implementing the simple color prop
   if (colorProp) {
-    return typeof colorProp === 'string' ? {} : colorProp
+    return typeof colorProp === 'string' ? {} : _.mapValues(colorProp, mapColorToInitialScheme)
   }
 
   // if neither the color prop, nor the color scheme are defined, we are returning empty object

src/lib/commonPropInterfaces.ts

@@ -40,13 +40,8 @@ export type ColorValue =
   | string
 
 export type ComplexColorPropType =
-  | {
-      foreground?: ColorValue
-      background?: ColorValue
-      border?: ColorValue
-      shadow?: ColorValue
-    }
   | ColorValue
+  | Partial<Record<'foreground' | 'background' | 'border' | 'shadow', ColorValue>>
 
 export interface ColorComponentProps<TColor = ColorValue> {
   /** A component can have a color. */