error message and aria handling added

SpareBank1 · Aug 28, 2017 · dd6e263 · dd6e263
1 parent a50e794
commit dd6e263
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,15 +1,20 @@
 # Changelog for ffe-search-dropdown-react
 
-## v.2.0.0
-* Set inputValue outside the component to be able to reset and 
-change the value without interfering with the component. 
+
+## v2.1.0
+* Added errorMessage prop
+* Explicit aria-invalid handling in searchable-dropdown.less
+
+## v2.0.0
+* Set inputValue outside the component to be able to reset and
+change the value without interfering with the component.
 * attributes onSelect, onReset and onChange should now update inputValue and not return it.
 * Removed attribute initialInputValue, added attribute inputValue.
 
 ## v1.1.4
 * hotfix div wrapper classname with version for npm
 
-## v.1.1.3
+## v1.1.3
 * Bumped version due to prepublish 1.1.2(unknown why)
 
 ## v1.1.2

diff --git a/less/searchable-dropdown.less b/less/searchable-dropdown.less
@@ -26,17 +26,25 @@
     transition: all @ffe-transition-duration @ffe-ease;
     width: 100%;
 
-    &:hover {
+    &[aria-invalid="true"] {
+      .ffe-chevron-icon-with-color(@ffe-orange-fire);
+    }
+
+    &:not([aria-invalid="true"]):hover {
       border-color: @ffe-blue-azure;
     }
 
     &:focus,
     &:active {
-      border-color: @ffe-blue-azure;
       box-shadow: 0 0 0 2px @ffe-blue-focus;
       outline: none;
     }
 
+    &:not([aria-invalid="true"]):focus,
+    &:not([aria-invalid="true"]):active {
+      border-color: @ffe-blue-azure;
+    }
+
     &:-moz-focusring {
       color: transparent;
       text-shadow: 0 0 0 @ffe-black;
@@ -53,7 +61,7 @@
     }
   }
   &__display-reset {
-    background-image:none;
+    background-image:none!important;
   }
   &__reset-button {
     position: absolute;

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ffe-searchable-dropdown-react",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Dropdown with search option",
   "scripts": {
     "build": "babel -d lib --ignore=*.test.js src",

diff --git a/src/InputField.js b/src/InputField.js
@@ -28,7 +28,7 @@ class Input extends Component {
                         "ffe-searchable-dropdown__dropdown-input-field",
                         {"ffe-searchable-dropdown__display-reset": this.displayReset()}
                     )}
-                    aria-invalid={ariaInvalid}
+                    aria-invalid={ String(ariaInvalid) }
                     id={inputId}
                     onBlur={onBlur}
                     onChange={onInputChange}

diff --git a/src/SearchableDropdown.js b/src/SearchableDropdown.js
@@ -136,9 +136,10 @@ class SearchableDropdown extends Component {
     }
 
     render() {
-        const { dropdownAttributes, noMatch, placeholder, renderDropdownElement, label } = this.props;
+        const { dropdownAttributes, noMatch, placeholder, renderDropdownElement, label, errorMessage } = this.props;
         const { highlightedElementIndex, showListContainer, searchTerm } = this.state;
         const filteredList = this.filterList(searchTerm);
+
         return (
           <div className={ classNames(this.props.className) }>
             {label?
@@ -147,12 +148,7 @@ class SearchableDropdown extends Component {
               </label>
               : null
             }
-            <div
-                className={classNames(
-                    "ffe-searchable-dropdown",
-                    this.props.className
-                )}
-            >
+            <div className="ffe-searchable-dropdown">
                 <Input
                     displayResetWhenInputHasValue = {this.props.displayResetWhenInputHasValue}
                     onBlur={this.onBlur}
@@ -181,6 +177,11 @@ class SearchableDropdown extends Component {
                     />
                 }
               </div>
+              {errorMessage &&
+                <div className="ffe-field-error-message">
+                    {errorMessage}
+                </div>
+              }
             </div>
         );
     }
@@ -221,6 +222,8 @@ SearchableDropdown.propTypes = {
     ariaInvalid: bool,
     /** css class for main div searchableDropdown */
     className: string,
+    /** Error message */
+    errorMessage: string,
 };
 
 SearchableDropdown.defaultProps = {

diff --git a/src/SearchableDropdown.test.js b/src/SearchableDropdown.test.js
@@ -23,13 +23,16 @@ describe('<SearchableDropdown>', () => {
         inputValue:'',
         displayResetWhenInputHasValue:true,
         label:"Foo",
-        inputId: "inputid"
+        inputId: "inputid",
+        errorMessage: "404"
     };
 
     const setHighlightedIndexSpy = jest.spyOn(SearchableDropdown.prototype, 'setHighlightedIndex');
     const component = mountDropdownWithProps(props);
 
-
+    test('errorMessage <div> ', () =>
+      expect(component.find('.ffe-field-error-message')).toHaveLength(1));
+
     test('renders', () =>
         expect(component.find('.ffe-searchable-dropdown')).toHaveLength(1));
 
@@ -49,6 +52,7 @@ describe('<SearchableDropdown>', () => {
         expect(component.find(ScrollContainer)).toHaveLength(1);
         expect(component.state('showListContainer')).toEqual(true);
     });
+
     test('renders <ScrollContainer> on arrowDown', () => {
         const arrowDownEvent = {key: 'ArrowDown', preventDefault: i};
         component.find(Input).prop('onKeyDown')(arrowDownEvent);