Merge pull request #84 from SparkPost/required-fields

SparkPost · Dec 1, 2017 · 681aac9 · 681aac9
2 parents 9f1ca4a + 2c3f2b6
commit 681aac9
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 4 deletions.
diff --git a/src/components/Checkbox/Checkbox.js b/src/components/Checkbox/Checkbox.js
@@ -12,12 +12,17 @@ class Checkbox extends Component {
 
   static Group = Group;
 
+  static defaultProps = {
+    required: false
+  }
+
   static propTypes = {
     id: PropTypes.string,
     checked: PropTypes.bool,
     label: PropTypes.string,
     labelHidden: PropTypes.bool,
     disabled: PropTypes.bool,
+    required: PropTypes.bool,
     value: PropTypes.oneOfType([
       PropTypes.bool,
       PropTypes.string
@@ -40,6 +45,7 @@ class Checkbox extends Component {
       label,
       labelHidden,
       disabled,
+      required,
       error,
       value,
       onChange,
@@ -54,10 +60,14 @@ class Checkbox extends Component {
       error && styles.error
     );
 
+    const requiredIndicator = required
+      ? ' *'
+      : '';
+
     const labelMarkup = label && !labelHidden
       ? <Label
           id={id}
-          label={label}
+          label={`${label}${requiredIndicator}`}
           className={styles.Label} />
       : null;
 

diff --git a/src/components/Select/Select.js b/src/components/Select/Select.js
@@ -20,7 +20,8 @@ class Select extends Component {
   static displayName = 'Select';
 
   static defaultProps = {
-    placeholderValue: ''
+    placeholderValue: '',
+    required: false
   }
 
   static propTypes = {
@@ -42,6 +43,7 @@ class Select extends Component {
     placeholder: PropTypes.string,
     placeholderValue: PropTypes.string,
     disabled: PropTypes.bool,
+    required: PropTypes.bool,
     label: PropTypes.string,
     helpText: PropTypes.oneOfType([
       PropTypes.string,
@@ -63,6 +65,7 @@ class Select extends Component {
       placeholder,
       placeholderValue,
       disabled,
+      required,
       error,
       ...rest
     } = this.props;
@@ -92,10 +95,14 @@ class Select extends Component {
       ? combined.map((option, key) => <Option option={option} key={key} />)
       : null;
 
+    const requiredIndicator = required
+      ? ' *'
+      : '';
+
     const labelMarkup = label
       ? <Label
           id={id}
-          label={label} />
+          label={`${label}${requiredIndicator}`} />
       : null;
 
     const errorMarkup = error

diff --git a/src/components/TextField/TextField.js b/src/components/TextField/TextField.js
@@ -20,6 +20,7 @@ class TextField extends Component {
     autoFocus: PropTypes.bool,
     disabled: PropTypes.bool,
     readOnly: PropTypes.bool,
+    required: PropTypes.bool,
     label: PropTypes.string,
     labelHidden: PropTypes.bool,
     helpText: PropTypes.oneOfType([
@@ -50,6 +51,7 @@ class TextField extends Component {
   };
 
   static defaultProps = {
+    required: false,
     type: 'text'
   };
 
@@ -85,6 +87,7 @@ class TextField extends Component {
       autoFocus,
       disabled,
       readOnly,
+      required,
       label,
       labelHidden,
       helpText,
@@ -106,10 +109,14 @@ class TextField extends Component {
       error && styles.error
     );
 
+    const requiredIndicator = required
+      ? ' *'
+      : '';
+
     const labelMarkup = label && !labelHidden
       ? <Label
           id={id}
-          label={label} />
+          label={`${label}${requiredIndicator}`} />
       : null;
 
     const errorMarkup = error

diff --git a/stories/Checkbox.js b/stories/Checkbox.js
@@ -60,6 +60,14 @@ export default storiesOf('Checkbox', module)
      />
   ))
 
+  .addWithInfo('Required', () => (
+    <Checkbox
+      id='id'
+      label='I agree to the Terms of Use and Privacy Policy'
+      required
+     />
+  ))
+
   .addWithInfo('With help text', () => (
     <Checkbox
       id='id'

diff --git a/stories/Select.js b/stories/Select.js
@@ -59,6 +59,15 @@ export default storiesOf('Select', module)
     />
   ))
 
+  .addWithInfo('required', () => (
+    <Select
+      id='id'
+      label='Select an option'
+      options={options2}
+      required
+    />
+  ))
+
   .addWithInfo('with help text', () => (
     <Select
       id='id'

diff --git a/stories/TextField.js b/stories/TextField.js
@@ -42,6 +42,15 @@ export default storiesOf('TextField', module)
     />
   ))
 
+  .addWithInfo('required', () => (
+    <TextField
+      id='id'
+      label='Template ID'
+      value='template-12'
+      required
+    />
+  ))
+
   .addWithInfo('with help text', () => (
       <TextField
         id='id'