implemented knobs for the examples

Author: bmdalex

docs/src/components/Knobs/Knobs.tsx

@@ -8,6 +8,7 @@ import KnobsValue from './KnobsValue'
 
 import KnobsBoolean from './KnobsBoolean'
 import KnobsScalar from './KnobsScalar'
+import KnobsSelect from './KnobsSelect'
 
 const Knobs: any = createComponent(
   () => ({
@@ -31,12 +32,14 @@ const Knobs: any = createComponent(
   }),
   'div',
 )
+
 Knobs.Field = KnobsField
 Knobs.Control = KnobsControl
 Knobs.Label = KnobsLabel
 Knobs.Value = KnobsValue
 
 Knobs.Boolean = KnobsBoolean
 Knobs.Scalar = KnobsScalar
+Knobs.Select = KnobsSelect
 
 export default Knobs

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

@@ -0,0 +1,36 @@
+import * as React from 'react'
+import * as PropTypes from 'prop-types'
+import * as _ from 'lodash'
+import Knobs from 'docs/src/components/Knobs/Knobs'
+import { ProviderConsumer } from '@stardust-ui/react'
+
+type MenuExampleColorKnobsProps = {
+  onKnobChange: () => void
+}
+
+const MenuExampleColorKnobs = (props: MenuExampleColorKnobsProps) => {
+  const { onKnobChange } = props
+
+  return (
+    <ProviderConsumer
+      render={({ siteVariables: { colorScheme } }) => {
+        const colorsArr = _.keys(colorScheme).map(color => ({
+          name: _.upperCase(color),
+          value: color,
+        }))
+
+        return (
+          <Knobs>
+            <Knobs.Select name="Choose a color: " items={colorsArr} onChange={onKnobChange} />
+          </Knobs>
+        )
+      }}
+    />
+  )
+}
+
+MenuExampleColorKnobs.propTypes = {
+  onKnobChange: PropTypes.func.isRequired,
+}
+
+export default MenuExampleColorKnobs

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

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import * as _ from 'lodash'
-import { Menu, ProviderConsumer, Grid, Text } from '@stardust-ui/react'
+import { Menu, Grid, Text } from '@stardust-ui/react'
 
 const items = [
   { key: 'editorials', content: 'Editorials' },
@@ -14,48 +14,45 @@ const iconItems = [
   { 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>
-      )
-    }}
-  />
+const MenuExampleColor = ({
+  knobs: {
+    selectedItem: { name, value },
+  },
+}: {
+  knobs: { selectedItem: { name: string; value: string } }
+}) => (
+  <Grid
+    columns="repeat(2, auto)"
+    styles={{ justifyContent: 'left', justifyItems: 'left', alignItems: 'center' }}
+    variables={{ gridGap: '10px' }}
+  >
+    <Text content={`${name} DEFAULT MENU:`} weight="bold" />
+    <Menu defaultActiveIndex={0} color={value} items={items} />
+    <Text content={`${name} PILLS MENU:`} weight="bold" />
+    <Menu defaultActiveIndex={0} color={value} pills items={items} />
+    <Text content={`${name} POINTING MENU:`} weight="bold" />
+    <Menu defaultActiveIndex={0} color={value} pointing items={items} />
+    <Text content={`${name} VERTICAL POINTING MENU:`} weight="bold" />
+    <Menu defaultActiveIndex={0} color={value} vertical pointing items={items} />
+    <Text content={`${name} UNDERLINED MENU:`} weight="bold" />
+    <Menu defaultActiveIndex={0} color={value} underlined items={items} />
+    <Text content={`${name} ICON MENU:`} weight="bold" />
+    <Menu defaultActiveIndex={0} color={value} items={iconItems} />
+    <Text content={`${name} ICON ONLY MENU:`} weight="bold" />
+    <Menu
+      defaultActiveIndex={0}
+      color={value}
+      iconOnly
+      items={iconItems.map(item => _.pick(item, ['key', 'icon']))}
+    />
+    <Text content={`UNDERLINED MENU (mutiple colors):`} weight="bold" />
+    {/* <Menu
+      defaultActiveIndex={0}
+      underlined
+      color={{ foreground: value, background: value, border: value }}
+      items={items}
+    /> */}
+  </Grid>
 )
 
 export default MenuExampleColor