feat(input): Add sublabel for smaller text next to input label (#421)

* [DJR-471] [Ed Thome/Peter Marshall] Add sublabel for smaller text next to input label

* [DJR-471] [Ed Thome] Refactor tests to get Box instead of Text. Change docs to express intent of the sublabel property.

src/components/Input/Input.jsx

@@ -137,7 +137,7 @@ class Input extends React.Component {
   }
 
   render() {
-    const { type, label, feedback, error, helper, tooltip, ...rest } = this.props
+    const { type, label, sublabel, feedback, error, helper, tooltip, ...rest } = this.props
 
     const inputId = generateId(rest.id, rest.name, label)
     const helperId = helper && inputId.postfix('helper')
@@ -156,6 +156,14 @@ class Input extends React.Component {
               <Text size="medium" bold>
                 {label}
               </Text>
+
+              {sublabel &&
+                <Box inline spacing="margin" left={2} data-testid="sublabel">
+                  <Text size="small">
+                    {sublabel}
+                  </Text>
+                </Box>
+              }
             </label>
             {tooltip && React.cloneElement(tooltip, { connectedFieldLabel: label })}
           </Flexbox>
@@ -216,6 +224,10 @@ Input.propTypes = {
    * The label.
    */
   label: PropTypes.string.isRequired,
+  /**
+   * Clarify attributes of the expected input.
+   */
+  sublabel: PropTypes.string,
   /**
    * The value.
    */

src/components/Input/Input.md

@@ -78,6 +78,15 @@ const validate = (event) => {
 
 ### Supplying extra information
 
+Use `sublabel` to clarify attributes of the expected input.
+We recommend using this over the html `placeholder` attribute because it's more usable and accessible.
+
+```
+<Input
+  label="Transit number" sublabel="5 digits" type="number"
+/>
+```
+
 Use a `helper` to offer the user a detailed explanation of the input expected by a form field. Use the `Input.Helper`
 component, which can contain any content.
 

src/components/Input/__tests__/Input.spec.jsx

@@ -39,14 +39,37 @@ describe('Input', () => {
     expect(findInputElement(input)).toHaveProp('type', 'number')
   })
 
-  it('must have a label', () => {
-    const input = doShallow({ label: 'The label' })
+  describe('label', () => {
+    it('must have a label', () => {
+      const input = doShallow({ label: 'The label' })
 
-    expect(input.find('label')).toContainReact(
-      <Text size="medium" bold>
-        The label
-      </Text>
-    )
+      expect(input.find('label')).toContainReact(
+        <Text size="medium" bold>
+          The label
+        </Text>
+      )
+    })
+
+    it('should contain sublabel', () => {
+      const input = doShallow({ sublabel: 'The sublabel' })
+
+      const sublabel = input
+        .find('[data-testid="sublabel"]')
+
+      expect(sublabel).toContainReact(
+        <Text size="small">
+          The sublabel
+        </Text>
+      )
+    })
+
+    it('should not contain sublabel when not provided', () => {
+      const input = doShallow({ sublabel: undefined })
+
+      const sublabel = input.find('[data-testid="sublabel"]')
+
+      expect(sublabel).not.toBePresent()
+    })
   })
 
   // FIXME: Test for override of the global styles in forms.scss. This can be removed