🔅 Minor fixes

.eslintignore

@@ -1 +1,2 @@
 docs
+*.js

.storybook/TableComponent.js

@@ -2,16 +2,25 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { outlines } from '../src/utils/system';
+import { palette, colors } from '../src/utils/theme';
+
 import { basePropTypes, gridPropTypes } from '../src/Box';
 
 const stylePropTypes = { ...basePropTypes, ...gridPropTypes, ...outlines.propTypes };
 const stylePropNames = Object.keys(stylePropTypes).map(d => d);
 
-const getPropTypes = (property, propType) => {
+const sorter = (a, b) => {
+  if (a.property < b.property) return -1;
+  if (a.property > b.property) return 1;
+  return 0;
+};
+
+const getPropTypes = (property, propType, description) => {
   let type = typeof propType === 'string' ? propType : propType.name;
 
   if (stylePropNames.includes(property)) {
     const prop = stylePropTypes[property];
+
     if (!prop.meta) {
       type = 'string';
     } else if (prop.meta.styleType === 'responsive') {
@@ -21,12 +30,51 @@ const getPropTypes = (property, propType) => {
     }
   }
 
+  if (property === 'size') {
+    if (description === 'sizesAllPropTypes') {
+      type = `oneOf: 'xs', 'sm', 'md', 'lg', 'xl'`;
+    } else {
+      type = `oneOf: 'sm', 'md', 'lg'`;
+    }
+  }
+
+  if (property === 'level') {
+    type = 'oneOf: 1, 2, 3, 4, 5, 6';
+  }
+
+  if (property === 'variant') {
+    type = `oneOf: '${[...Object.keys(palette), ...Object.keys(colors)].join("', '")}'`;
+  }
+
+  if (property === 'as' && propType === 'other') {
+    type = `oneOf: 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'`;
+  }
+  if (description) {
+    console.log(property, description);
+  }
+  if (property === 'type' && description === 'buttonTypes') {
+    type = `oneOf: 'button', 'submit', 'reset'`;
+  }
+
   return type;
 };
 
 const splitProps = props => {
   const componentProps = props.filter(d => !stylePropNames.includes(d.property));
-  const componentStyles = props.filter(d => stylePropNames.includes(d.property));
+  let componentStyles = props.filter(d => stylePropNames.includes(d.property));
+
+  if (componentStyles.length < 3) {
+    componentStyles = Object.keys(basePropTypes).map(d => {
+      const prop = basePropTypes[d];
+
+      return {
+        property: d,
+        propType: 'string|number|array',
+        required: false,
+        description: '',
+      };
+    });
+  }
 
   return { componentProps, componentStyles };
 };
@@ -59,33 +107,29 @@ const Text = styled.p`
 const TableComponent = ({ propDefinitions }) => {
   const { componentProps, componentStyles } = splitProps(propDefinitions);
   const props = [
-    ...componentProps,
+    ...componentProps.sort(sorter),
     { title: 'Style Props' },
-    ...componentStyles.sort((a, b) => {
-      if (a.property < b.property) return -1;
-      if (a.property > b.property) return 1;
-      return 0;
-    }),
+    ...componentStyles.sort(sorter),
   ].map(({ property, propType, required, description, defaultValue, title }) => {
     if (title) {
       return (
-        <tr>
+        <tr key={title}>
           <td colSpan={4}>
             <SubTitle>{title}</SubTitle>
             <Text>These can be used directly on the component to avoid using inline styles</Text>
           </td>
         </tr>
       );
     }
+
     return (
       <tr key={property}>
-        <td>
+        <td width="150">
           {property}
           {required && !stylePropNames.includes(property) && <Red>*</Red>}
         </td>
-        <td>{getPropTypes(property, propType)}</td>
+        <td>{getPropTypes(property, propType, description)}</td>
         <td>{defaultValue}</td>
-        <td>{description}</td>
       </tr>
     );
   });
@@ -97,7 +141,6 @@ const TableComponent = ({ propDefinitions }) => {
           <Th>name</Th>
           <Th>type</Th>
           <Th>default</Th>
-          <Th>description</Th>
         </tr>
       </thead>
       <tbody>{props}</tbody>

src/Button.jsx

@@ -2,13 +2,7 @@ import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
 
 import { getColor, getStyles, getTheme, isDefined, px } from './utils/helpers';
-import {
-  baseStyles,
-  buttonPropTypes,
-  outlines,
-  sizesAllPropTypes,
-  variantPropTypes,
-} from './utils/system';
+import { baseStyles, outlines, sizesAllPropTypes, variantPropTypes } from './utils/system';
 
 import Badge from './Badge';
 import Box, { basePropTypes } from './Box';
@@ -62,8 +56,10 @@ Button.propTypes = {
   dark: PropTypes.bool,
   disabled: PropTypes.bool,
   onClick: PropTypes.func,
+  /** sizesAllPropTypes */
   size: sizesAllPropTypes,
-  type: buttonPropTypes,
+  /** buttonTypes */
+  type: PropTypes.oneOf(['button', 'submit', 'reset']),
   variant: variantPropTypes,
   ...basePropTypes,
   ...outlines.propTypes,

src/ButtonGroup.jsx

@@ -31,15 +31,10 @@ export const StyledButtonGroup = styled(Box)`
 `;
 
 const ButtonGroup = ({ children, size, variant, ...props }) => {
-  const buttonProps = {};
-
-  if (typeof size !== 'undefined') {
-    buttonProps.size = size;
-  }
-
-  if (typeof variant !== 'undefined') {
-    buttonProps.variant = variant;
-  }
+  const buttonProps = {
+    size,
+    variant,
+  };
 
   return (
     <StyledButtonGroup {...props}>

src/Input.jsx

@@ -93,6 +93,7 @@ Input.propTypes = {
   required: PropTypes.bool,
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
   tabindex: PropTypes.number,
+  /** inputTypes */
   type: PropTypes.oneOf([
     'checkbox',
     'color',

src/Switch.jsx

@@ -86,6 +86,7 @@ class Switch extends React.PureComponent {
   static propTypes = {
     name: PropTypes.string.isRequired,
     onChange: PropTypes.func,
+    /** sizesAllPropTypes */
     size: sizesAllPropTypes,
     value: PropTypes.bool,
     variant: variantPropTypes,

src/utils/system.js

@@ -59,10 +59,8 @@ export const inputTextTypes = [
   'text',
 ];
 
-export const buttonPropTypes = PropTypes.oneOf(['button', 'submit', 'reset']);
 export const sizesPropTypes = PropTypes.oneOf(['sm', 'md', 'lg']);
 export const sizesAllPropTypes = PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']);
-export const textAlignPropTypes = PropTypes.oneOf(['left', 'center', 'right', 'justify']);
 export const variantPropTypes = PropTypes.oneOf([
   ...Object.keys(palette),
   ...Object.keys(colorsTheme),

stories/ButtonGroup.stories.js

@@ -14,22 +14,59 @@ storiesOf('ButtonGroup', module)
       propTablesExclude: [Example, Button],
     },
   })
-  .add('default', () => (
-    <Example skipSpacer>
-      <ButtonGroup
-        size={select('Size', sizesOptions, 'md')}
-        variant={select('Variant', variantOptions, 'primary')}
-      >
-        <Button dark={boolean('Dark', false)} outline>
-          First
-        </Button>
-        <Button>Second</Button>
-        <Button dark={boolean('Dark', false)} outline>
-          Third
-        </Button>
-        <Button dark={boolean('Dark', false)} outline>
-          Forth
-        </Button>
-      </ButtonGroup>
-    </Example>
-  ));
+  .add('default', () => {
+    class BTG extends React.Component {
+      state = { active: 'two' };
+
+      setActive = ({ target }) => {
+        this.setState({ active: target.dataset.name });
+      };
+
+      render() {
+        const { active } = this.state;
+
+        return (
+          <Example skipSpacer>
+            <ButtonGroup
+              size={select('Size', sizesOptions, 'md')}
+              variant={select('Variant', variantOptions, 'primary')}
+            >
+              <Button
+                dark={boolean('Dark', false)}
+                bordered={active !== 'one'}
+                data-name="one"
+                onClick={this.setActive}
+              >
+                First
+              </Button>
+              <Button bordered={active !== 'two'} data-name="two" onClick={this.setActive}>
+                Second
+              </Button>
+              <Button
+                dark={boolean('Dark', false)}
+                bordered={active !== 'three'}
+                data-name="three"
+                onClick={this.setActive}
+              >
+                Third
+              </Button>
+              <Button
+                dark={boolean('Dark', false)}
+                bordered={active !== 'four'}
+                data-name="four"
+                onClick={this.setActive}
+              >
+                Forth
+              </Button>
+            </ButtonGroup>
+          </Example>
+        );
+      }
+    }
+
+    BTG.displayName = 'ButtonGroup';
+
+    BTG.propTypes = ButtonGroup.propTypes;
+
+    return <BTG />;
+  });

stories/Form.stories.js

@@ -70,7 +70,7 @@ storiesOf('Form', module)
         <Flex flexWrap="wrap">
           <FormGroup width={[1, 1, 1 / 2]}>
             <Label>First Name</Label>
-            <Input type="text" name="firstname" placeholder="First Name" />
+            <Input type="text" name="firstname" placeholder="First Name" required />
           </FormGroup>
           <FormGroup width={[1, 1, 1 / 2]} pl={[0, 0, 2]}>
             <Label>Last Name</Label>
@@ -139,7 +139,7 @@ storiesOf('Form', module)
           <Textarea name="comment" placeholder="Your Comment" />
         </FormGroup>
         <Button type="submit">SEND</Button>{' '}
-        <Button type="reset" outline>
+        <Button type="reset" bordered>
           RESET
         </Button>
       </Form>

stories/helpers/components.js

@@ -48,9 +48,7 @@ const StyledExample = styled.div`
 const Example = ({ children, ...props }) => (
   <ThemeProvider
     theme={{
-      breakpoints: [400, 580, 768, 1024, 1280, 1920],
-      fontSizes: [12, 14, 16, 18, 22, 26, 32, 48],
-      space: [0, 4, 8, 12, 16, 24, 32, 64, 128],
+      space: [0, 5, 10, 15, 20, 25, 50, 100],
     }}
   >
     <StyledExample {...props}>{children}</StyledExample>