Merge branch 'master' into date-input-blur

docs.md

@@ -1051,13 +1051,15 @@ For instance: `'person.firstName'` becomes `'First Name'`
 -   `hint` **[String][131]?** A usage hint for the associated input
 -   `label` **([String][131] \| [Boolean][133])?** Custom text for the label
 -   `tooltip` **[String][131]?** A message to display in a tooltip
+-   `required` **[Boolean][133]?** A boolean value to indicate whether the field is required
+-   `requiredIndicator` **[String][131]?** Custom character to denote a field is required (optional, default `''`)
 
 ### Examples
 
 ```javascript
 // A custom input to use with redux-forms
 
-function EmailInput ({  
+function EmailInput ({
   input: { name, value, onBlur, onChange },
   label,
 }) {
@@ -1069,7 +1071,7 @@ function EmailInput ({
          name,
          value,
          onBlur,
-         onChange,   
+         onChange,
       }}
     </div>
   )

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@launchpadlab/lp-components",
-  "version": "3.15.10",
+  "version": "3.16.0",
   "engines": {
     "node": "^8.0.0"
   },

src/forms/labels/input-label.js

@@ -7,7 +7,7 @@ import { toggle, togglePropTypes } from '../../utils'
 /**
  *
  * A dynamic label associated with an input component.
- * 
+ *
  * This component is used within {@link LabeledField}, and therefore is incorporated into most `lp-components` input components by default.
  *
  * The text of the label is set using the following rules:
@@ -18,19 +18,21 @@ import { toggle, togglePropTypes } from '../../utils'
  * If `name` is used to set the text, it will be stripped of its prefixes and converted to [start case](https://en.wikipedia.org/wiki/Letter_case#Stylistic_or_specialised_usage).
  *
  * For instance: `'person.firstName'` becomes `'First Name'`
- * 
+ *
  * @name InputLabel
  * @type Function
  * @param {String} name - The name of the associated input
  * @param {String} [hint] - A usage hint for the associated input
  * @param {String|Boolean} [label] - Custom text for the label
  * @param {String} [tooltip] - A message to display in a tooltip
+ * @param {Boolean} [required] - A boolean value to indicate whether the field is required
+ * @param {String} [requiredIndicator] - Custom character to denote a field is required (optional, default `''`)
 
  * @example
- * 
+ *
  * // A custom input to use with redux-forms
- * 
- * function EmailInput ({  
+ *
+ * function EmailInput ({
  *   input: { name, value, onBlur, onChange },
  *   label,
  * }) {
@@ -42,7 +44,7 @@ import { toggle, togglePropTypes } from '../../utils'
  *          name,
  *          value,
  *          onBlur,
- *          onChange,   
+ *          onChange,
  *       }}
  *     </div>
  *   )
@@ -55,34 +57,50 @@ const propTypes = {
   label: PropTypes.oneOfType([ PropTypes.string, PropTypes.bool ]),
   name: PropTypes.string.isRequired,
   tooltip: PropTypes.string,
+  required: PropTypes.bool,
+  requiredIndicator: PropTypes.string,
   ...togglePropTypes('tooltipShown')
 }
 
 const defaultProps = {
   hint: '',
   label: '',
   tooltip: '',
+  requiredIndicator: '',
 }
 
-function InputLabel ({ hint, label, name, tooltip, tooltipShown, toggleTooltipShown }) {
+function InputLabel ({
+  hint,
+  label,
+  name,
+  tooltip,
+  tooltipShown,
+  toggleTooltipShown,
+  required,
+  requiredIndicator,
+}) {
   const labelText = label || convertNameToLabel(name)
   return (
     <span>
-      {  
+      {
         label !== false &&
         <label htmlFor={ name }>
           { labelText }
-          { 
+          {
+            required && requiredIndicator &&
+            <span className="required-indicator" aria-hidden="true">{ requiredIndicator }</span>
+          }
+          {
             hint &&
             <i>{ hint }</i>
           }
         </label>
       }
-      { 
+      {
         tooltip &&
         <span className="tooltip-trigger" onClick={ toggleTooltipShown }/>
       }
-      { 
+      {
         tooltip &&
         <div className={ classnames('tooltip-content', { 'is-active': tooltipShown }) }>
           { tooltip }

src/forms/labels/labeled-field.js

@@ -61,12 +61,14 @@ function LabeledField ({
     hint,
     label,
     tooltip,
+    required,
+    requiredIndicator,
     children,
     hideErrorLabel,
   }) {
   return (
     <fieldset className={ classnames(className, { 'error': touched && invalid }) }>
-      <InputLabel { ...{ hint, label, name, tooltip } } />
+      <InputLabel { ...{ hint, label, name, tooltip, required, requiredIndicator } } />
         { children }
       { !hideErrorLabel && <InputError { ...{ error, invalid, touched } } /> }
     </fieldset>

stories/forms/inputs/input.story.js

@@ -15,33 +15,42 @@ const inputProps = {
 
 storiesOf('Input', module)
   .add('with default label', () => (
-    <Input 
-      input={inputProps} 
+    <Input
+      input={inputProps}
       meta={{}}
     />
   ))
   .add('with custom label', () => (
-    <Input 
+    <Input
       input={inputProps}
       meta={{}}
       label="Custom Label"
     />
   ))
   .add('with no label', () => (
-    <Input 
+    <Input
       input={inputProps}
       meta={{}}
       label={false}
     />
   ))
+  .add('with required true custom indicator', () => (
+    <Input
+      input={inputProps}
+      meta={{}}
+      label="Custom Label"
+      required
+      requiredIndicator={ '*' }
+    />
+  ))
   .add('with error', () => (
-    <Input 
+    <Input
       input={inputProps}
-      meta={{ 
+      meta={{
         invalid: true,
         touched: true,
-        error: 'Invalid input' 
+        error: 'Invalid input'
       }}
       value="0000"
     />
-  ))
+  ))

stories/forms/labels/input-label.story.js

@@ -4,7 +4,7 @@ import { InputLabel } from 'src'
 
 storiesOf('InputLabel', module)
   .add('with default label', () => (
-    <InputLabel 
+    <InputLabel
       name="nameOfInput"
     />
   ))
@@ -20,6 +20,21 @@ storiesOf('InputLabel', module)
       label={false}
     />
   ))
+  .add('with required true default indicator', () => (
+    <InputLabel
+      name="nameOfInput"
+      label="Custom Label"
+      required
+    />
+  ))
+  .add('with required true custom indicator', () => (
+    <InputLabel
+      name="nameOfInput"
+      label="Custom Label"
+      required
+      requiredIndicator={ '*' }
+    />
+  ))
   .add('with hint', () => (
     <InputLabel
       name="nameOfInput"

test/forms/labels/input-label.test.js

@@ -38,3 +38,13 @@ test('when tooltip provided - toggle tooltip', () => {
   wrapper.find('span.tooltip-trigger').simulate('click')
   expect(wrapper.find('div.tooltip-content.is-active').exists()).toEqual(false)
 })
+
+test('when no custom required indicator provided, do not show required indicator', () => {
+  const wrapper = mount(<InputLabel name={name} required />)
+  expect(wrapper.find('span.required-indicator').exists()).toEqual(false)
+})
+
+test('when required true and custom requiredIndicator provided, show custom indicator', () => {
+  const wrapper = mount(<InputLabel name={name} required requiredIndicator={ '*' } />)
+  expect(wrapper.find('label > span').text()).toEqual('*')
+})