improved examples and select knob

Author: bmdalex

docs/src/components/Knobs/KnobsBoolean.tsx

@@ -24,7 +24,7 @@ class KnobsBoolean extends React.Component<any, any> {
 
     return (
       <KnobsField>
-        <KnobsControl>
+        <KnobsControl textAlign="center">
           <input type="checkbox" defaultChecked={booleanValue} onChange={this.handleChange} />
         </KnobsControl>
         <KnobsLabel value={value} name={name} />

docs/src/components/Knobs/KnobsControl.tsx

@@ -1,11 +1,12 @@
 import { createComponent } from 'react-fela'
+import { TextAlignProperty } from 'csstype'
 import { pxToRem } from 'src/lib'
 
 const KnobsControl = createComponent(
-  () => ({
+  ({ textAlign = 'initial' }: { textAlign?: TextAlignProperty }) => ({
     marginRight: pxToRem(5),
     verticalAlign: 'middle',
-    textAlign: 'center',
+    textAlign,
   }),
   'span',
 )

docs/src/components/Knobs/KnobsField.tsx

@@ -1,9 +1,10 @@
 import { createComponent } from 'react-fela'
 import { pxToRem } from 'src/lib'
 
-const KnobsField = createComponent(() => ({
+const KnobsField = createComponent(({ width = 60 }: { width?: number }) => ({
   display: 'grid',
-  gridTemplateColumns: `${pxToRem(60)} auto`,
+  alignItems: 'center',
+  gridTemplateColumns: `${pxToRem(width)} auto`,
 }))
 
 export default KnobsField

docs/src/components/Knobs/KnobsSelect.tsx

@@ -17,7 +17,7 @@ export interface KnobsSelectProps {
 }
 
 class KnobsSelect extends React.Component<KnobsSelectProps, {}> {
-  private itemsMap: ObjectOf<KnobsSelectItem> = {}
+  private itemsMap: ObjectOf<KnobsSelectItem>
 
   public static propTypes = {
     onChange: PropTypes.func,
@@ -27,11 +27,16 @@ class KnobsSelect extends React.Component<KnobsSelectProps, {}> {
   }
 
   componentDidMount() {
+    this.itemsMap = {}
     this.props.items.forEach(item => {
       this.itemsMap[item.value] = item
     })
   }
 
+  componentWillUnmount() {
+    this.itemsMap = {}
+  }
+
   render() {
     const { name, items } = this.props
     if (!items || !items.length) {
@@ -41,15 +46,17 @@ class KnobsSelect extends React.Component<KnobsSelectProps, {}> {
     const selectedItem = this.props.selectedItem || this.props.items[0]
 
     return (
-      <KnobsField>
+      <KnobsField width={120}>
         <KnobsControl>
           <select value={selectedItem.value} onChange={this.handleChange}>
             {items.map(({ name, value }) => (
-              <option value={value}>{name}</option>
+              <option key={value} value={value}>
+                {name}
+              </option>
             ))}
           </select>
         </KnobsControl>
-        <KnobsLabel value={selectedItem.value} name={name} />
+        <KnobsLabel value={selectedItem.name} name={name} />
       </KnobsField>
     )
   }

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

@@ -1,27 +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'
 
+import Knobs from 'docs/src/components/Knobs/Knobs'
+import { KnobsSelectItem } from 'docs/src/components/Knobs/KnobsSelect'
+
 type MenuExampleColorKnobsProps = {
   onKnobChange: () => void
+  overrides: { selectedItem?: KnobsSelectItem }
 }
 
-const MenuExampleColorKnobs = (props: MenuExampleColorKnobsProps) => {
-  const { onKnobChange } = props
-
+const MenuExampleColorKnobs = ({
+  onKnobChange,
+  overrides: { selectedItem },
+}: MenuExampleColorKnobsProps) => {
   return (
     <ProviderConsumer
       render={({ siteVariables: { colorScheme } }) => {
         const colorsArr = _.keys(colorScheme).map(color => ({
-          name: _.upperCase(color),
+          name: _.startCase(color),
           value: color,
         }))
 
         return (
           <Knobs>
-            <Knobs.Select name="Choose a color: " items={colorsArr} onChange={onKnobChange} />
+            <Knobs.Select
+              name="Color"
+              items={colorsArr}
+              onChange={onKnobChange}
+              selectedItem={selectedItem}
+            />
           </Knobs>
         )
       }}
@@ -31,6 +40,11 @@ const MenuExampleColorKnobs = (props: MenuExampleColorKnobsProps) => {
 
 MenuExampleColorKnobs.propTypes = {
   onKnobChange: PropTypes.func.isRequired,
+  selectedItem: PropTypes.shape({ name: PropTypes.string, value: PropTypes.string }),
+}
+
+MenuExampleColorKnobs.defaultProps = {
+  selectedItem: { name: 'Primary', value: 'primary' },
 }
 
 export default MenuExampleColorKnobs

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

@@ -26,32 +26,25 @@ const MenuExampleColor = ({
     styles={{ justifyContent: 'left', justifyItems: 'left', alignItems: 'center' }}
     variables={{ gridGap: '10px' }}
   >
-    <Text content={`${name} DEFAULT MENU:`} weight="bold" />
+    <Text content="Default menu:" weight="bold" />
     <Menu defaultActiveIndex={0} color={value} items={items} />
-    <Text content={`${name} PILLS MENU:`} weight="bold" />
+    <Text content="Pills menu:" weight="bold" />
     <Menu defaultActiveIndex={0} color={value} pills items={items} />
-    <Text content={`${name} POINTING MENU:`} weight="bold" />
+    <Text content="Pointing menu:" weight="bold" />
     <Menu defaultActiveIndex={0} color={value} pointing items={items} />
-    <Text content={`${name} VERTICAL POINTING MENU:`} weight="bold" />
+    <Text content="Vertical pointing menu:" weight="bold" />
     <Menu defaultActiveIndex={0} color={value} vertical pointing items={items} />
-    <Text content={`${name} UNDERLINED MENU:`} weight="bold" />
+    <Text content="Underlined menu:" weight="bold" />
     <Menu defaultActiveIndex={0} color={value} underlined items={items} />
-    <Text content={`${name} ICON MENU:`} weight="bold" />
+    <Text content="Icon menu:" weight="bold" />
     <Menu defaultActiveIndex={0} color={value} items={iconItems} />
-    <Text content={`${name} ICON ONLY MENU:`} weight="bold" />
+    <Text content="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>
 )
 

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

@@ -0,0 +1,28 @@
+import * as React from 'react'
+import * as _ from 'lodash'
+import { Menu, ProviderConsumer } from '@stardust-ui/react'
+
+const items = [
+  { key: 'editorials', content: 'Editorials' },
+  { key: 'review', content: 'Reviews' },
+  { key: 'events', content: 'Upcoming Events' },
+]
+
+const MenuExampleColorComplex = () => (
+  <ProviderConsumer
+    render={({ siteVariables: { colorScheme } }) => {
+      const colors = _.keys(colorScheme)
+
+      return (
+        <Menu
+          defaultActiveIndex={0}
+          underlined
+          color={{ foreground: colors[3], background: colors[1], border: colors[0] }}
+          items={items}
+        />
+      )
+    }}
+  />
+)
+
+export default MenuExampleColorComplex

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

@@ -24,6 +24,11 @@ const Variations = () => (
       description="A Menu can have different colors."
       examplePath="components/Menu/Variations/MenuExampleColor"
     />
+    <ComponentExample
+      title="Complex Colored Menu"
+      description="A Menu can have different colors for different areas (border, background, foregroung)."
+      examplePath="components/Menu/Variations/MenuExampleColorComplex"
+    />
   </ExampleSection>
 )