docs(Notification): Document Notification component in Styleguidist

src/components/Notification/Notification.jsx

@@ -10,6 +10,9 @@ const ErrorIcon = () => (
   <i className="icon icon-core-exclamation-point-circle c-notification__icon" />
 );
 
+/**
+  * A banner to highlight important notices.
+  */
 const Notification = ({ className, variant, children, ...rest }) => {
   if (className) {
     warn('Notification', 'Custom CSS classes are deprecated. This component does not support custom styling.');
@@ -37,13 +40,23 @@ const Notification = ({ className, variant, children, ...rest }) => {
 };
 
 Notification.propTypes = {
+  /**
+    * (DEPRECATED) Additional css classes
+    */
   className: PropTypes.string,
+  /**
+    * Adds a background color variation to the component
+    */
   variant: PropTypes.oneOf([
     'instructional',
     'branded',
     'success',
     'error'
   ]),
+  /**
+   * Content to be displayed within the Notification banner. Can be text, any HTML element,
+   * or any component.
+   */
   children: PropTypes.node.isRequired
 };
 

src/components/Notification/Notification.md

@@ -0,0 +1,38 @@
+
+## Minimal usage
+
+```
+<Notification>Lorem ipsum dolor sit amer.</Notification>
+```
+## Branded
+
+```
+<Notification variant="branded">Lorem ipsum dolor sit amer.</Notification>
+```
+
+## Success
+
+Use to denote a successful transaction.
+
+```
+<Notification variant="success">Lorem ipsum dolor sit amer.</Notification>
+```
+
+## Error
+
+Use to denote an error or a failed transaction.
+
+```
+<Notification variant="error">
+  <p>Looks like our registration system is temporarily down. You'll need to come back another time to register for My Account.</p>
+  <p>Lorem ipsum dolor sit amer.</p>
+</Notification>
+```
+
+## Instructional
+
+This is the same styling as default.
+
+```
+<Notification variant="instructional">Lorem ipsum dolor sit amer.</Notification>
+```