fix(asinput): Add danger theme to asInput component

Add danger theme to asInput component to add alert icon, red text for validation message, and red border to input element
openedx · Dec 6, 2017 · d545540 · d545540
1 parent 1d25dfc
commit d545540
Show file tree

Hide file tree

Showing 7 changed files with 147 additions and 22 deletions.
diff --git a/.storybook/__snapshots__/Storyshots.test.js.snap b/.storybook/__snapshots__/Storyshots.test.js.snap
@@ -499,6 +499,7 @@ exports[`Storyshots InputText focus test 1`] = `
       onChange={[Function]}
       placeholder={undefined}
       required={false}
+      themes={Array []}
       type="text"
       value=""
     />
@@ -527,6 +528,7 @@ exports[`Storyshots InputText minimal usage 1`] = `
     onChange={[Function]}
     placeholder={undefined}
     required={false}
+    themes={Array []}
     type="text"
     value="Foo Bar"
   />
@@ -554,6 +556,7 @@ exports[`Storyshots InputText validation 1`] = `
     onChange={[Function]}
     placeholder={undefined}
     required={false}
+    themes={Array []}
     type="text"
     value=""
   />
@@ -566,6 +569,44 @@ exports[`Storyshots InputText validation 1`] = `
 </div>
 `;
 
+exports[`Storyshots InputText validation with danger theme 1`] = `
+<div
+  className="form-group"
+>
+  <label
+    htmlFor="asInput3"
+    id="label-asInput3"
+  >
+    Username
+  </label>
+  <input
+    aria-describedby="undefined description-asInput3"
+    aria-invalid={false}
+    className="form-control"
+    disabled={false}
+    id="asInput3"
+    name="username"
+    onBlur={[Function]}
+    onChange={[Function]}
+    placeholder={undefined}
+    required={false}
+    themes={
+      Array [
+        "danger",
+      ]
+    }
+    type="text"
+    value=""
+  />
+  <small
+    className="form-text"
+    id="description-asInput3"
+  >
+    The unique name that identifies you throughout the site.
+  </small>
+</div>
+`;
+
 exports[`Storyshots Modal basic usage 1`] = `
 <div
   aria-labelledby="id5"
@@ -1058,6 +1099,7 @@ exports[`Storyshots Modal modal with element body 1`] = `
               onChange={[Function]}
               placeholder={undefined}
               required={false}
+              themes={Array []}
               type="text"
               value=""
             />
@@ -2044,6 +2086,11 @@ exports[`Storyshots Textarea minimal usage 1`] = `
     onChange={[Function]}
     placeholder={undefined}
     required={false}
+    themes={
+      Array [
+        "danger",
+      ]
+    }
     value="Foo Bar"
   />
 </div>
@@ -2070,6 +2117,11 @@ exports[`Storyshots Textarea scrollable 1`] = `
     onChange={[Function]}
     placeholder={undefined}
     required={false}
+    themes={
+      Array [
+        "danger",
+      ]
+    }
     value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
   />
 </div>
@@ -2096,6 +2148,11 @@ exports[`Storyshots Textarea validation 1`] = `
     onChange={[Function]}
     placeholder={undefined}
     required={false}
+    themes={
+      Array [
+        "danger",
+      ]
+    }
     value=""
   />
   <small

diff --git a/src/InputText/InputText.stories.jsx b/src/InputText/InputText.stories.jsx
@@ -65,6 +65,24 @@ storiesOf('InputText', module)
       }}
     />
   ))
+  .add('validation with danger theme', () => (
+    <InputText
+      name="username"
+      label="Username"
+      description="The unique name that identifies you throughout the site."
+      validator={(value) => {
+        let feedback = { isValid: true };
+        if (value.length < 3) {
+          feedback = {
+            isValid: false,
+            validationMessage: 'Username must be at least 3 characters in length.',
+          };
+        }
+        return feedback;
+      }}
+      themes={['danger']}
+    />
+  ))
   .add('focus test', () => (
     <FocusInputWrapper />
   ));
diff --git a/src/InputText/index.jsx b/src/InputText/index.jsx
@@ -19,6 +19,7 @@ function Text(props) {
       disabled={props.disabled}
       required={props.required}
       ref={props.inputRef}
+      themes={props.themes}
     />
   );
 }

diff --git a/src/TextArea/index.jsx b/src/TextArea/index.jsx
@@ -18,6 +18,7 @@ function Text(props) {
       disabled={props.disabled}
       required={props.required}
       ref={props.inputRef}
+      themes={['danger']}
     />
   );
 }

diff --git a/src/asInput/asInput.scss b/src/asInput/asInput.scss
@@ -1 +1,6 @@
 @import "~bootstrap/scss/_forms";
+@import "~bootstrap/scss/mixins/_forms";
+
+.fa-icon-spacing {
+    padding: 0px 5px 0px 0px;
+}
diff --git a/src/asInput/asInput.test.jsx b/src/asInput/asInput.test.jsx
@@ -117,23 +117,47 @@ describe('asInput()', () => {
         expect(spy).toHaveBeenCalledTimes(1);
       });
 
-      it('and displays error message when invalid', () => {
-        const spy = jest.fn();
-        const validationResult = {
-          isValid: false,
-          validationMessage: 'Invalid!!1',
-        };
-        spy.mockReturnValueOnce(validationResult);
-        const props = {
-          ...baseProps,
-          validator: spy,
-        };
-        const wrapper = mount(<InputTestComponent {...props} />);
-        wrapper.find('input').simulate('blur');
-        expect(spy).toHaveBeenCalledTimes(1);
-        const err = wrapper.find('.form-control-feedback');
-        expect(err.exists()).toEqual(true);
-        expect(err.text()).toEqual(validationResult.validationMessage);
+      describe('and display error message when invalid', () => {
+        let spy;
+        let validationResult;
+        let wrapper;
+
+        beforeEach(() => {
+          spy = jest.fn();
+          validationResult = {
+            isValid: false,
+            validationMessage: 'Invalid!!1',
+          };
+          spy.mockReturnValueOnce(validationResult);
+          const props = {
+            ...baseProps,
+            validator: spy,
+          };
+          wrapper = mount(<InputTestComponent {...props} />);
+        });
+        it('without theme', () => {
+          wrapper.find('input').simulate('blur');
+          expect(spy).toHaveBeenCalledTimes(1);
+          const err = wrapper.find('.form-control-feedback');
+          expect(err.exists()).toEqual(true);
+          expect(err.text()).toEqual(validationResult.validationMessage);
+        });
+        it('with danger theme', () => {
+          wrapper.setProps({ themes: ['danger'] });
+          wrapper.find('input').simulate('blur');
+          expect(spy).toHaveBeenCalledTimes(1);
+          const err = wrapper.find('.form-control-feedback');
+          expect(err.exists()).toEqual(true);
+          expect(err.text()).toEqual(validationResult.validationMessage);
+          // expect(err.hasClass('invalid-feedback')).toEqual(true);
+
+          const dangerIcon = wrapper.find('.fa-exclamation-circle');
+          expect(dangerIcon.exists()).toEqual(true);
+          expect(dangerIcon.hasClass('fa')).toEqual(true);
+
+          const inputElement = wrapper.find('.form-control');
+          expect(inputElement.hasClass('is-invalid')).toEqual(true);
+        });
       });
     });
   });

diff --git a/src/asInput/index.jsx b/src/asInput/index.jsx
@@ -1,6 +1,8 @@
 /* eslint-disable react/no-unused-prop-types */
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import FontAwesomeStyles from 'font-awesome/css/font-awesome.min.css';
 
 import newId from '../utils/newId';
 import styles from './asInput.scss';
@@ -23,6 +25,7 @@ export const inputProps = {
   onBlur: PropTypes.func,
   validator: PropTypes.func,
   className: PropTypes.arrayOf(PropTypes.string),
+  themes: PropTypes.arrayOf(PropTypes.string),
 };
 
 const asInput = (WrappedComponent, labelFirst = true) => {
@@ -50,9 +53,19 @@ const asInput = (WrappedComponent, labelFirst = true) => {
       const desc = {};
 
       if (!this.state.isValid) {
+        const hasDangerTheme = this.hasDangerTheme();
+
         desc.error = (
-          <div className={styles['form-control-feedback']} id={errorId} key="0">
-            {this.state.validationMessage}
+          <div className={classNames(styles['form-control-feedback'], { [styles['invalid-feedback']]: hasDangerTheme })} id={errorId} key="0">
+            { hasDangerTheme &&
+            <span
+              className={classNames(FontAwesomeStyles.fa, FontAwesomeStyles['fa-exclamation-circle'], styles['fa-icon-spacing'])}
+              aria-hidden
+            />
+            }
+            <span>
+              {this.state.validationMessage}
+            </span>
           </div>
         );
         desc.describedBy = errorId;
@@ -70,6 +83,10 @@ const asInput = (WrappedComponent, labelFirst = true) => {
       return desc;
     }
 
+    hasDangerTheme() {
+      return this.props.themes.includes('danger');
+    }
+
     handleBlur(event) {
       const val = event.target.value;
 
@@ -95,10 +112,11 @@ const asInput = (WrappedComponent, labelFirst = true) => {
           <WrappedComponent
             {...this.props}
             {...this.state}
-            className={[
+            className={[classNames(
               styles['form-control'],
-              ...this.props.className,
-            ]}
+              { [styles['is-invalid']]: !this.state.isValid && this.hasDangerTheme() },
+              { ...this.props.className },
+            )]}
             describedBy={describedBy}
             onChange={this.handleChange}
             onBlur={this.handleBlur}
@@ -125,6 +143,7 @@ const asInput = (WrappedComponent, labelFirst = true) => {
     required: false,
     validator: undefined,
     className: [],
+    themes: [],
   };
 
   return NewComponent;