feat(inputfeedback): add separate component

- include documentation in styleguide
- usage notes in Textarea

config/styleguide.config.js

@@ -267,6 +267,10 @@ module.exports = {
               path.resolve('src/components/Radio/Radio.jsx'),
               toggleByEnv('Select', path.resolve('src/components/Select/Select.jsx')),
               toggleByEnv('Textarea', path.resolve('src/components/Textarea/Textarea.jsx')),
+              toggleByEnv(
+                'InputFeedback',
+                path.resolve('src/components/InputFeedback/InputFeedback.jsx')
+              ),
               path.resolve('src/components/Tooltip/Tooltip.jsx'),
               path.resolve('src/old-components/SelectorCounter/SelectorCounter.jsx'),
             ])

src/components/InputFeedback/InputFeedback.jsx

@@ -7,6 +7,9 @@ import safeRest from '../../utils/safeRest'
 
 import styles from './InputFeedback.modules.scss'
 
+/**
+ * <span class="docs--badge__new">new</span> <span class="docs--badge__version">v0.33.0</span>
+ */
 const InputFeedback = ({ feedback, children, ...rest }) => (
   <Box
     {...safeRest(rest)}
@@ -18,7 +21,13 @@ const InputFeedback = ({ feedback, children, ...rest }) => (
 )
 
 InputFeedback.propTypes = {
+  /**
+   * A feedback state that changes the background colour of InputFeedback.
+   */
   feedback: PropTypes.oneOf(['success', 'error']),
+  /**
+   * Description of your feedback.
+   */
   children: PropTypes.node.isRequired,
 }
 

src/components/InputFeedback/InputFeedback.md

@@ -0,0 +1,24 @@
+### Minimal usage
+
+InputFeedback displays a feedback box. Its primary use is to facilitate feedback states for other Form components such as [Input](#input) or [Checkbox](#checkbox). Rather than basic text, you may utilise [Typography](#typography) components as well as other components to customise your feedback message.
+
+```jsx
+<InputFeedback>
+  <Paragraph>Provide a brief description of your issue</Paragraph>
+</InputFeedback>
+```
+
+```jsx
+<InputFeedback>
+  <Text block size="small">
+    <Box between={2}>
+      <Paragraph size="small" bold>Be sure to include your:</Paragraph>
+      <UnorderedList>
+        <UnorderedList.Item>Name</UnorderedList.Item>
+        <UnorderedList.Item>Address</UnorderedList.Item>
+        <UnorderedList.Item>Country</UnorderedList.Item>
+      </UnorderedList>
+    </Box>
+  </Text>
+</InputFeedback>
+```

src/components/Textarea/Textarea.jsx

@@ -13,6 +13,9 @@ import addRightPadding from '../FormField/addRightPadding'
 import styles from './Textarea.modules.scss'
 import positionStyles from '../Position.modules.scss'
 
+/**
+ * <span class="docs--badge__new">new</span> <span class="docs--badge__version">v0.33.0</span>
+ */
 const Textarea = props => (
   <FormField {...props}>
     {({ className, ...textareaProps }, showFeedbackIcon, feedback) => (
@@ -58,7 +61,7 @@ Textarea.propTypes = {
    * A detailed explanation of the input expected by a form field. Can be text,
    * other components, or HTML elements.
    *
-   * If a function is provided, it must return a `InputFeedback`. The function will be
+   * If a function is provided, it must return an `InputFeedback`. The function will be
    * invoked with the following arguments.
    *
    * @param {String} feedback The input's current feedback state.