docs(icon): Add description for Decorative and Standalone icon compon…

…ents

src/components/Icons/DecorativeIcon/DecorativeIcon.jsx

@@ -3,6 +3,11 @@ import PropTypes from 'prop-types'
 
 import Icon from '../Icon/Icon'
 
+/**
+ * An icon that is used just for visual aesthetics.
+ *
+ * <span class="docs--badge green">wip</span>
+ */
 const DecorativeIcon = ({ symbol, variant, size, ...rest }) => (
   <Icon {...rest} symbol={symbol} variant={variant} size={size} aria-hidden="true" />
 )

src/components/Icons/DecorativeIcon/DecorativeIcon.md

@@ -19,3 +19,26 @@
   <DecorativeIcon symbol="times" />
 </div>
 ```
+
+### Modifying color
+
+Use the `variant` prop to alter the icon's color. Each variant has semantic meaning.
+
+```
+<div className="docs--horizontal-spacing">
+  <DecorativeIcon symbol="checkmark" variant="primary" />
+  <DecorativeIcon symbol="incomplete" variant="secondary" />
+  <DecorativeIcon symbol="exclamationPointCircle" variant="error" />
+</div>
+```
+
+### Adjusting size
+
+Use the `size` prop to adjust the icon's size.
+
+```
+<div className="docs--horizontal-spacing">
+  <DecorativeIcon symbol="chevron" variant="primary" size={16} />
+  <DecorativeIcon symbol="exclamationPointCircle" variant="error" size={24} />
+</div>
+```

src/components/Icons/StandaloneIcon/StandaloneIcon.jsx

@@ -3,6 +3,12 @@ import PropTypes from 'prop-types'
 
 import Icon from '../Icon/Icon'
 
+  /**
+   * An icon that has meaning within the context of the page,
+   * which should be communicated to screen readers.
+   *
+   * <span class="docs--badge green">wip</span>
+   */
 const StandaloneIcon = ({ symbol, variant, size, a11yText, ...rest }) => (
   <Icon {...rest} symbol={symbol} variant={variant} size={size} aria-label={a11yText} />
 )