Feat: add an example with modal and redux form

Author: RyanCCollins

app/src/components/Divider/README.md

@@ -0,0 +1,8 @@
+## Divider Component
+A component that acts as a section divider.
+
+### Example
+
+```js
+<Divider />
+```

app/src/components/Divider/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import styles from './index.module.scss';
+import cssModules from 'react-css-modules';
+
+const Divider = () => (
+  <span className={styles.divider} />
+);
+
+
+export default cssModules(Divider, styles);

app/src/components/Divider/index.module.scss

@@ -0,0 +1,9 @@
+.divider {
+  background-color: #7d97ad;
+  width: 150px;
+  height: 3px;
+  display: block;
+  margin: 35px 0;
+  margin-right: auto;
+  margin-left: auto;
+}

app/src/components/Divider/tests/index.test.js

@@ -0,0 +1,13 @@
+import Divider from '../index';
+import { shallow } from 'enzyme';
+import { shallowToJson } from 'enzyme-to-json';
+import React from 'react';
+
+describe('<Divider />', () => {
+  it('should render with default props', () => {
+    const wrapper = shallow(
+      <Divider />
+    );
+    expect(shallowToJson(wrapper)).toMatchSnapshot();
+  });
+});

app/src/components/WelcomeModal/README.md

@@ -0,0 +1,17 @@
+## WelcomeModal Component
+A component that ...
+
+### Example
+
+```js
+<WelcomeModal />
+```
+
+### Props
+
+| Prop          | Type     | Default     | Possible Values
+| ------------- | -------- | ----------- | ---------------------------------------------
+| **myProp**    | String   |             | Any string value
+
+
+### Other Information

app/src/components/WelcomeModal/index.js

@@ -0,0 +1,68 @@
+import React, { PropTypes } from 'react';
+import Layer from 'grommet-udacity/components/Layer';
+import Form from 'grommet-udacity/components/Form';
+import FormFields from 'grommet-udacity/components/FormFields';
+import FormField from 'grommet-udacity/components/FormField';
+import Box from 'grommet-udacity/components/Box';
+import Heading from 'grommet-udacity/components/Heading';
+import Button from 'grommet-udacity/components/Button';
+import Footer from 'grommet-udacity/components/Footer';
+import { Divider } from 'components';
+import error from './utils/error';
+
+const WelcomeModal = ({
+  onClose,
+  isVisible,
+  nameInput,
+  onSubmit,
+}) => (
+  <Layer
+    align="center"
+    closer
+    hidden={!isVisible}
+    onClose={onClose}
+  >
+    <Box align="center" justify="center" pad="large">
+      <Heading align="center">
+        What should we call you?
+      </Heading>
+      <Divider />
+      <Form>
+        <FormFields>
+          <FormField
+            help="What should we call you?"
+            error={error(nameInput)}
+            label="Enter your name"
+            htmlFor="nameInput"
+          >
+          <input
+            {...nameInput}
+            required
+            autoFocus
+            placeholder="Ryan Collins"
+            id="nameInput"
+            autoComplete="on"
+            name="name"
+            type="text"
+            aria-invalid={nameInput.error}
+            aria-required
+            className="input"
+          />
+          </FormField>
+        </FormFields>
+      </Form>
+      <Footer align="center" justify="center" pad="large">
+        <Button primary label="Submit" onClick={onSubmit} />
+      </Footer>
+    </Box>
+  </Layer>
+);
+
+WelcomeModal.propTypes = {
+  onClose: PropTypes.func.isRequired,
+  nameInput: PropTypes.object.isRequired,
+  isVisible: PropTypes.bool.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+};
+
+export default WelcomeModal;

app/src/components/WelcomeModal/tests/index.test.js

@@ -0,0 +1,13 @@
+import WelcomeModal from '../index';
+import { shallow } from 'enzyme';
+import { shallowToJson } from 'enzyme-to-json';
+import React from 'react';
+
+describe('<WelcomeModal />', () => {
+  it('should render with default props', () => {
+    const wrapper = shallow(
+      <WelcomeModal />
+    );
+    expect(shallowToJson(wrapper)).toMatchSnapshot();
+  });
+});

app/src/components/WelcomeModal/utils/error.js

@@ -0,0 +1,4 @@
+const error = (input) =>
+  input.dirty || input.touched && input.error ? input.error : null;
+
+export default error;

app/src/components/index.js

@@ -1,4 +1,6 @@
 /* Assemble all components for export */
+export WelcomeModal from './WelcomeModal';
+export Divider from './Divider';
 export AppFooter from './AppFooter';
 export LoadingIndicator from './LoadingIndicator';
 export Navbar from './Navbar';

app/src/containers/LandingContainer/README.md

@@ -1,11 +1,8 @@
 ## LandingContainer
-A container that does ...
+The main container for the demo site.
 
 ### Example Usage
 
 ```js
 <LandingContainer  />
 ```
-
-
-### Other Information