[WIP] docs: update row storybook

README.md

@@ -67,7 +67,7 @@ These are the **available** and **reserved** props that can be used on the `Row`
 | `gutter`         | integer,<br>string,<br>[object](#responsive-api-using-objects) | `'1rem'`<br>`'12px'`<br>`4`<br>(etc)                                                                 | `'1rem'`       | Sets the width of the gutter to be used between columns. For correct positioning you must set the same value (if custom) on children Col's.                                                                                                         |
 | `display`        | string,<br>[object](#responsive-api-using-objects)             | `'flex'`<br>`'inline-flex'`                                                                          | `'flex'`       | This defines a flex container; inline or block depending on the given value. [Read more about display.](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-2)                                                                |
 | `flexDirection`  | string,<br>[object](#responsive-api-using-objects)             | `'row'`<br>`'row-reverse'`<br>`'column'`<br>`'column‑reverse'`                                       | `'row'`        | This establishes the main-axis<br>thus defining the direction flex items are placed in the flex container. [Read more about flex-direction.](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-3)                           |
-| `flexWrap`       | string<br>[object](#responsive-api-using-objects)              | `'nowrap'`<br>`'wrap'`<br>`'wrap‑reverse'`                                                           | `'wrap'`     | By default<br>flex items will wrap to new lines as needed. You can change it to allow all items try to fit onto one line with this property. [Read more about flex-wrap.](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-4) |
+| `flexWrap`       | string<br>[object](#responsive-api-using-objects)              | `'nowrap'`<br>`'wrap'`<br>`'wrap‑reverse'`                                                           | `'wrap'`     | By default flex items will wrap to new lines as needed. You can change it to allow all items try to fit onto one line with this property. [Read more about flex-wrap.](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-4) |
 | `justifyContent` | string,<br>[object](#responsive-api-using-objects)             | `'flex‑start'`<br>`'flex‑end'`<br>`'center'`<br>`'space‑between'`<br>`'space‑around'`                | `'flex‑start'` | This defines the alignment along the main axis. It helps distribute extra free space left over. [Read more about justify-content.](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-6)                                     |
 | `alignItems`     | string,<br>[object](#responsive-api-using-objects)             | `'flex‑start'`<br>`'flex‑end'`<br>`'center'`<br>`'baseline'`<br>`'stretch'`                          | `'flex‑start'` | This defines the default behavior for how flex items are laid out along the cross axis on the current line. [Read more about align-items.](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-7)                             |
 | `alignContent`   | string,<br>[object](#responsive-api-using-objects)             | `'flex‑start'`<br>`'flex‑end'`<br>`'center'`<br>`'space‑between'`<br>`'space-around'`<br>`'stretch'` | `'flex‑start'` | This aligns a flex container's lines within when there is extra space in the cross-axis. [Read more about align-content.](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-8)                                              |

src/components/Col/README.md

@@ -14,6 +14,8 @@ View detailed property information in [Col props](https://github.com/aaronvansto
 - `order`: Controls the order in which they appear in the flex container.
 - `alignSelf`: Controls vertical alignment in the flex container.
 
+Flexbox descriptions sourced from [CSS-Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
+
 ## Usage
 
 ### Basic

src/components/Row/README.md

@@ -0,0 +1,48 @@
+# Row
+
+A component used to display and position children columns within a grid system.
+
+## Properties
+
+View detailed property information in [Row props](https://github.com/aaronvanston/react-flexa#row-props) within the react-flexa readme.
+
+- `gutter`: Sets the width of the gutter to be used between columns.
+- `display`: This defines a flex container; inline or block.
+- `flexDirection`: This establishes the main-axis of the flex container.
+- `flexWrap`: This enables `Col` elements to wrap onto a new line.
+- `justifyContent`: This defines the alignment along the main axis.
+- `alignItems`: This defines how flex items are laid out along the cross axis on the current line.
+- `alignContent`: This aligns a flex container's lines within when there is extra space in the cross-axis.
+
+Flexbox descriptions sourced from [CSS-Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
+
+
+## Usage
+
+### Basic
+
+```js
+import React from 'react';
+import { Row, Col } from 'react-flexa';
+
+export default () => (
+  <Row justifyContent="center" alignItems="baseline">
+    ...
+  </Row>
+);
+```
+
+### Responsive
+
+```js
+import React from 'react';
+import { Row, Col } from 'react-flexa';
+
+export default () => (
+  <Row justifyContent={{ sm: "center", lg: "flex-end" }} gutter="16px">
+    ...
+  </Row>
+);
+```
+
+Read more about react-flexa [responsive api using objects.](https://github.com/aaronvanston/react-flexa#responsive-api-using-objects)

src/components/Row/Row.js

@@ -35,12 +35,12 @@ Row.defaultProps = {
   elementType: 'div',
 };
 
-const displayOptions = ['flex', 'inline-flex'];
-const flexDirectionOptions = ['row', 'row-reverse', 'column', 'column-reverse'];
-const flexWrapOptions = ['nowrap', 'wrap', 'wrap-reverse'];
-const justifyContentOptions = ['flex-start', 'flex-end', 'center', 'space-between', 'space-around'];
-const alignItemsOptions = ['flex-start', 'flex-end', 'center', 'baseline', 'stretch'];
-const alignContentOptions = ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'stretch'];
+export const displayOptions = ['flex', 'inline-flex'];
+export const flexDirectionOptions = ['row', 'row-reverse', 'column', 'column-reverse'];
+export const flexWrapOptions = ['nowrap', 'wrap', 'wrap-reverse'];
+export const justifyContentOptions = ['flex-start', 'flex-end', 'center', 'space-between', 'space-around'];
+export const alignItemsOptions = ['flex-start', 'flex-end', 'center', 'baseline', 'stretch'];
+export const alignContentOptions = ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'stretch'];
 
 Row.propTypes = {
 

src/components/Row/Row.stories.js

@@ -0,0 +1,14 @@
+/* eslint-disable import/no-extraneous-dependencies */
+
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+import withReadme from 'storybook-readme/with-readme';
+
+import { Row } from './stories';
+import README from './README.md';
+
+storiesOf('Row', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withReadme(README))
+  .add('Default', () => <Row />);

src/components/Row/stories/Row.js

@@ -0,0 +1,36 @@
+/* eslint-disable import/no-extraneous-dependencies */
+
+import React from 'react';
+import { select, object } from '@storybook/addon-knobs';
+
+import { Box } from '../../../../stories/components';
+import { Row, Col } from '../../';
+
+import {
+  displayOptions,
+  flexDirectionOptions,
+  flexWrapOptions,
+  justifyContentOptions,
+  alignItemsOptions,
+  alignContentOptions,
+} from '../Row';
+
+export default () => (
+  <Row
+    style={{ padding: '10px 10px 0 10px', border: '2px solid #8bc34a', minHeight: '90vh' }}
+    gutter={object('gutter (rem)', { xs: 0.5, sm: 0.5, md: 1, lg: 1 })}
+    display={select('display', displayOptions, 'flex')}
+    flexDirection={select('flex-direction', flexDirectionOptions, 'row')}
+    flexWrap={select('flex-wrap', flexWrapOptions, 'wrap')}
+    justifyContent={select('justify-content', justifyContentOptions, 'flex-start')}
+    alignItems={select('align-items', alignItemsOptions, 'flex-start')}
+    alignContent={select('align-content', alignContentOptions, 'flex-start')}
+  >
+    <Col xs={3}><Box height="5rem">col 1</Box></Col>
+    <Col xs={3}><Box>col 2</Box></Col>
+    <Col xs={3}><Box>col 3</Box></Col>
+    <Col xs={3}><Box>col 4</Box></Col>
+    <Col xs={3}><Box>col 5</Box></Col>
+    <Col xs={3}><Box height="5rem">col 6</Box></Col>
+  </Row>
+);

src/components/Row/stories/index.js

@@ -0,0 +1 @@
+export Row from './Row';

stories/components/Wrapper/Wrapper.js

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+const Wrapper = styled.div`
+  border: 2px solid #8bc34a;
+  padding: 10px 10px 0 10px;
+`;
+
+Wrapper.defaultProps = {
+  border: true,
+};
+
+Wrapper.propTypes = {
+  border: PropTypes.bool,
+};
+
+export default Wrapper;

stories/components/index.js

@@ -1,3 +1,4 @@
 export Box from './Box/Box';
 export Section from './Section/Section';
 export Title from './Title/Title';
+export Wrapper from './Wrapper/Wrapper';