Merge b59af2d into d2b0dd3

SAP · Jan 15, 2019 · 083415c · 083415c
2 parents d2b0dd3 + b59af2d
commit 083415c
Show file tree

Hide file tree

Showing 17 changed files with 964 additions and 382 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -107,7 +107,7 @@ rules:
     #no-undefined: 2
     no-underscore-dangle: 0
     no-unreachable: 2
-    #no-unused-vars: [2, { ignoreRestSiblings: true }]
+    no-unused-vars: [2, { ignoreRestSiblings: true }]
     quote-props: [2, 'as-needed', { 'keywords': true, 'unnecessary': false }]
     quotes: [2, 'single']
     radix: 2

diff --git a/src/Dropdown/Dropdown.test.js b/src/Dropdown/Dropdown.test.js
@@ -1,4 +1,3 @@
-import { mount } from 'enzyme';
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { Dropdown } from './Dropdown';

diff --git a/src/InlineHelp/InlineHelp.test.js b/src/InlineHelp/InlineHelp.test.js
@@ -4,7 +4,6 @@ import renderer from 'react-test-renderer';
 import { InlineHelp } from './InlineHelp';
 
 describe('<InlineHelp />', () => {
-    const handleClick = jest.fn();
     const defaultInlineHelp = (
         <InlineHelp
             className='blue'

diff --git a/src/MegaMenu/MegaMenu.js b/src/MegaMenu/MegaMenu.js
@@ -47,7 +47,7 @@ export class MegaMenuList extends Component {
     const { itemStates } = this.state;
     let iStates = itemStates;
     iStates[id] = !iStates[id];
-    Object.keys(iStates).map((key, item) => {
+    Object.keys(iStates).map((key) => {
       if (key === id) {
         iStates[key] = true;
       } else {

diff --git a/src/Modal/Modal.Component.js b/src/Modal/Modal.Component.js
@@ -118,9 +118,9 @@ export class ModalComponent extends Component {
                 if (this.state.bShowFormModal) {
                     this.txtEmailRef.current.focus();
                 } else {
-                    this.setState(prevState => ({
+                    this.setState({
                         emailAddress: ''
-                    }));
+                    });
                 }
             }
         );
@@ -129,9 +129,9 @@ export class ModalComponent extends Component {
     updateEmailAddress = event => {
         const newEmail = event.target.value;
 
-        this.setState(prevState => ({
+        this.setState({
             emailAddress: newEmail
-        }));
+        });
     };
 
     render() {

diff --git a/src/MultiInput/MultiInput.Component.js b/src/MultiInput/MultiInput.Component.js
@@ -1,113 +1,127 @@
 import React, { Component } from 'react';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
+import {
+  DocsTile,
+  DocsText,
+  Separator,
+  Header,
+  Description,
+  Import,
+  Properties
+} from '../';
 import { MultiInput } from '../';
 
 export class MultiInputComponent extends Component {
-    data = [
-        'Apple',
-        'Apricot',
-        'Acai',
-        'African Moringa',
-        'Bearberry',
-        'Bilberry',
-        'Blood orange',
-        'Barbadine',
-        'Barbados cherry',
-        'Balsam Apple',
-        'Chokeberry',
-        'Cranberry',
-        'Cupuacu'
-    ];
+  data = [
+    'Apple',
+    'Apricot',
+    'Acai',
+    'African Moringa',
+    'Bearberry',
+    'Bilberry',
+    'Blood orange',
+    'Barbadine',
+    'Barbados cherry',
+    'Balsam Apple',
+    'Chokeberry',
+    'Cranberry',
+    'Cupuacu'
+  ];
 
-    constructor(props) {
-        super(props);
+  constructor(props) {
+    super(props);
 
-        this.state = {
-            data: []
-        };
-    }
-
-    performTagsUpdate = aTags => {
-        // console.log(aTags);
+    this.state = {
+      data: []
     };
+  }
+
+  performTagsUpdate = aTags => {
+    alert(aTags);
+  };
 
-    multiInputCode = `<MultiInput
+  multiInputCode = `<MultiInput
   data={this.data}
   onTagsUpdate={this.performTagsUpdate}
   placeHolder="Select a Fruit"
 />`;
 
-    multiInputCompactCode = `<MultiInput
+  multiInputCompactCode = `<MultiInput
   data={this.data}
   onTagsUpdate={this.performTagsUpdate}
   placeHolder="Select a Fruit"
   compact={true}
 />`;
 
-    render() {
-        return (
-            <div>
-                <Header>Multi Input</Header>
-                <Description />
-                <Import module='MultiInput' path='/fundamental-react/src/' />
+  render() {
+    return (
+        <div>
+            <Header>Multi Input</Header>
+            <Description />
+            <Import module='MultiInput' path='/fundamental-react/src/' />
 
-                <Separator />
+            <Separator />
 
-                <Properties
-                    type='Inputs'
-                    properties={[
-                        {
-                            name: 'data',
-                            description: 'array (Required) - Collection of items to display in the list.'
-                        },
-                        {
-                            name: 'placeHolder',
-                            description: 'string - The text to use as placeholder when no text is entered.'
-                        },
-                        {
-                            name: 'onTagsUpdate',
-                            description:
-                                'func - Method to fire on add or remove of tag. Component returns array of tags selected.'
-                        },
-                        {
-                            name: 'compact',
-                            description: 'bool - true: display compact style, false: default style'
-                        }
-                    ]} />
+            <Properties
+                type='Inputs'
+                properties={[
+            {
+              name: 'data',
+              description:
+                'array (Required) - Collection of items to display in the list.'
+            },
+            {
+              name: 'placeHolder',
+              description:
+                'string - The text to use as placeholder when no text is entered.'
+            },
+            {
+              name: 'onTagsUpdate',
+              description:
+                'func - Method to fire on add or remove of tag. Component returns array of tags selected.'
+            },
+            {
+              name: 'compact',
+              description:
+                'bool - true: display compact style, false: default style'
+            }
+          ]} />
 
-                <Separator />
+            <Separator />
 
-                <h2>Default</h2>
-                <Description>A text input when on focus will show list of items to select.</Description>
-                <DocsTile>
-                    <div>
-                        <MultiInput
-                            data={this.data}
-                            onTagsUpdate={this.performTagsUpdate}
-                            placeHolder='Select a Fruit' />
-                    </div>
-                </DocsTile>
-                <DocsText>{this.multiInputCode}</DocsText>
+            <h2>Default</h2>
+            <Description>
+          A text input when on focus will show list of items to select.
+            </Description>
+            <DocsTile>
+                <div>
+                    <MultiInput
+                        data={this.data}
+                        onTagsUpdate={this.performTagsUpdate}
+                        placeHolder='Select a Fruit' />
+                </div>
+            </DocsTile>
+            <DocsText>{this.multiInputCode}</DocsText>
 
-                <Separator />
+            <Separator />
 
-                <h2>Compact Style</h2>
-                <Description>
-                    A text input when on focus will show list of items to select, but with a compact input box.
-                </Description>
-                <DocsTile>
-                    <div>
-                        <MultiInput
-                            data={this.data}
-                            onTagsUpdate={this.performTagsUpdate}
-                            placeHolder='Select a Fruit'
-                            compact />
-                    </div>
-                </DocsTile>
-                <DocsText>{this.multiInputCompactCode}</DocsText>
+            <h2>Compact Style</h2>
+            <Description>
+          A text input when on focus will show list of items to select, but with
+          a compact input box.
+            </Description>
+            <DocsTile>
+                <div>
+                    <MultiInput
+                        data={this.data}
+                        onTagsUpdate={this.performTagsUpdate}
+                        placeHolder='Select a Fruit'
+                        compact />
+                </div>
+            </DocsTile>
+            <DocsText>{this.multiInputCompactCode}</DocsText>
 
-                <Separator />
-            </div>
-        );
-    }
+            <Separator />
+        </div>
+    );
+  }
 }
diff --git a/src/MultiInput/MultiInput.js b/src/MultiInput/MultiInput.js
@@ -31,7 +31,7 @@ export class MultiInput extends Component {
   };
 
   // create tag elements to display below input box
-  createTags = tags => {
+  createTags = () => {
     return this.state.tags.map((tag, index) => (
         <span
             key={index}
@@ -104,7 +104,14 @@ export class MultiInput extends Component {
   };
 
   render() {
-    const { placeHolder, data, compact, className, ...rest} = this.props;
+    const {
+      placeHolder,
+      data,
+      compact,
+      className,
+      onTagsUpdate,
+      ...rest
+    } = this.props;
 
     const inputGroupClassNames = `fd-input-group fd-input-group--after${
       compact ? ' fd-input-group--compact' : ''
@@ -113,7 +120,9 @@ export class MultiInput extends Component {
     const inputClassNames = `fd-input${compact ? ' fd-input--compact' : ''}`;
 
     return (
-        <div className={`fd-multi-input${className ? ' ' + className : ''}`} {...rest}>
+        <div
+            className={`fd-multi-input${className ? ' ' + className : ''}`}
+            {...rest}>
             <div className='fd-multi-input-field'>
                 <div className='fd-popover'>
                     <div className='fd-popover__control'>

diff --git a/src/MultiInput/MultiInput.test.js b/src/MultiInput/MultiInput.test.js
@@ -55,23 +55,23 @@ describe('<MultiInput />', () => {
     });
 
     // create a default multi-input control
-    test('create multi-input', () => {
+    xtest('create multi-input', () => {
         const component = renderer.create(multiInput);
         const tree = component.toJSON();
 
         // todo: multi-input uses randon number for some elements which cause snapshot to fail
         // todo: work on testing solution
-        // expect(tree).toMatchSnapshot();
+        expect(tree).toMatchSnapshot();
     });
 
     // create a compact multi-input control
-    test('create compact multi-input', () => {
+    xtest('create compact multi-input', () => {
         const component = renderer.create(compactMultiInput);
         const tree = component.toJSON();
 
         // todo: multi-input uses randon number for some elements which cause snapshot to fail
         // todo: work on testing solution
-        // expect(tree).toMatchSnapshot();
+        expect(tree).toMatchSnapshot();
     });
 
     // check that the tag list is hidden