diff --git a/.eslintrc b/.eslintrc index 0b1ddc62d..a1bfd87e7 100644 --- 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 index bdc2a1515..ce5037711 100644 --- 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 index 66255098e..2a7867922 100644 --- 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('', () => { - const handleClick = jest.fn(); const defaultInlineHelp = ( { + 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 index e893b203d..b219d0c0d 100644 --- 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 index 79f8bfbd0..b4e7f3a35 100644 --- 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 = ``; - multiInputCompactCode = ``; - render() { - return ( -
-
Multi Input
- - + render() { + return ( +
+
Multi Input
+ + - + - + - + -

Default

- A text input when on focus will show list of items to select. - -
- -
- - {this.multiInputCode} +

Default

+ + A text input when on focus will show list of items to select. + + +
+ +
+ + {this.multiInputCode} - + -

Compact Style

- - A text input when on focus will show list of items to select, but with a compact input box. - - -
- -
- - {this.multiInputCompactCode} +

Compact Style

+ + A text input when on focus will show list of items to select, but with + a compact input box. + + +
+ +
+ + {this.multiInputCompactCode} - -
- ); - } + +
+ ); + } } diff --git a/src/MultiInput/MultiInput.js b/src/MultiInput/MultiInput.js index 3b76d24a5..dadb24b54 100644 --- 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) => ( +
diff --git a/src/MultiInput/MultiInput.test.js b/src/MultiInput/MultiInput.test.js index 90ed36dfb..d41de9ca1 100644 --- a/src/MultiInput/MultiInput.test.js +++ b/src/MultiInput/MultiInput.test.js @@ -55,23 +55,23 @@ describe('', () => { }); // 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 diff --git a/src/Pagination/Pagination.Component.js b/src/Pagination/Pagination.Component.js index 7b8a7f75b..99c85c8c7 100644 --- a/src/Pagination/Pagination.Component.js +++ b/src/Pagination/Pagination.Component.js @@ -1,114 +1,154 @@ import React from 'react'; -import { DocsTile, DocsText, Separator, Header, Description, Import, Properties, Pagination } from '../'; +import { + DocsTile, + DocsText, + Separator, + Header, + Description, + Import, + Properties, + Pagination +} from '../'; export const PaginationComponent = () => { - const handleClick = event => { - // console.log(`Page clicked - ${event}`); - }; - return ( -
-
Pagination
- - Pagination is commonly used for tables and tiles. It allows users to see how many pages of content - exist, to navigate and highlights which page they are currently viewing. This control does not handle - how many tiles or rows to display in a table. This control simply adds a nice user experience to handle - how to navigate through a collection. The handling of which items to display needs to be handled in the - function that is passed in the onClick method of the Pagination control. - - + const handleClick = event => { + alert(`Page clicked - ${event}`); + }; + return ( +
+
Pagination
+ + Pagination is commonly used for tables and tiles. It allows users to see + how many pages of content exist, to navigate and highlights which page + they are currently viewing. This control does not handle how many tiles + or rows to display in a table. This control simply adds a nice user + experience to handle how to navigate through a collection. The handling + of which items to display needs to be handled in the function that is + passed in the onClick method of the Pagination control. + + - + - + - + -

First Page

- When the first page is active, the Back arrow should be disabled. - - - - {''} - +

First Page

+ + When the first page is active, the Back arrow should be disabled. + + + + + + {''} + + -

Last Page

- When the last page is active, the Next arrow should be disabled. - - - - {''} - +

Last Page

+ + When the last page is active, the Next arrow should be disabled. + + + + + + {''} + + -

Items per Page

- Set how many items per page. - - - - {''} +

Items per Page

+ Set how many items per page. + + + + + { + '' + } + - + -

Set Initial Page

- Set initial page to be selected - - - - {''} - +

Set Initial Page

+ Set initial page to be selected + + + + + {''} + + -

Hide Total

- Only show page numbers, Previous and Next controls - - - - {''} - +

Hide Total

+ + Only show page numbers, Previous and Next controls + + + + + + { + '' + } + + -

Total Text

- Customize text to show next to item total - - - - - {' '} - {''} - - -
- ); +

Total Text

+ Customize text to show next to item total + + + + + {' '} + { + '' + } + + +
+ ); }; diff --git a/src/SearchInput/SearchInput.js b/src/SearchInput/SearchInput.js index 02f56b7bd..33ac1b8d0 100644 --- a/src/SearchInput/SearchInput.js +++ b/src/SearchInput/SearchInput.js @@ -1,5 +1,4 @@ import React, { Component } from 'react'; -import PropTypes from 'prop-types'; export class SearchInput extends Component { constructor(props) { diff --git a/src/SearchInput/SearchInput.test.js b/src/SearchInput/SearchInput.test.js index cb7784e87..e59c1a7ba 100644 --- a/src/SearchInput/SearchInput.test.js +++ b/src/SearchInput/SearchInput.test.js @@ -135,7 +135,7 @@ describe('', () => { expect(wrapper.state('isExpanded')).toBeTruthy(); // enter text into search input - const itemClicked = wrapper + wrapper .find('.fd-menu__item') .at(0) .simulate('click', searchData[0]); diff --git a/src/Shellbar/Shellbar.test.js b/src/Shellbar/Shellbar.test.js index 85fcbf234..69dcbe291 100644 --- a/src/Shellbar/Shellbar.test.js +++ b/src/Shellbar/Shellbar.test.js @@ -5,169 +5,173 @@ import { Shellbar } from './Shellbar'; import { Menu, MenuList, MenuItem } from '../Menu/Menu'; describe('', () => { - const profile1 = { - initials: 'JS', - userName: 'John Snow', - colorAccent: 8 - }; - - const profileMenu = [ - { - name: 'Settings', - glyph: 'action-settings', - size: 's', - callback: () => alert('Settings selected!') - }, - { - name: 'Sign Out', - glyph: 'log', - size: 's', - callback: () => alert('Sign Out selected!') - } - ]; - - const simpleShellBar = ( - - } - productTitle='Corporate Portal' - profile={profile1} - profileMenu={profileMenu} /> - ); - - const simpleShellBarWithClass = ( - - } - productTitle='Corporate Portal' - profile={profile1} - profileMenu={profileMenu} /> - ); - - const searchInput = { - label: 'Search', - placeholder: 'Enter a fruit', - onSearch: function(searchTerm) { - alert(`Search fired for ${searchTerm}`); - }, - callback: () => alert('Search selected!') - }; - - const actions = [ - { - glyph: 'settings', - label: 'Settings', - notificationCount: 5, - callback: () => alert('Settings selected!'), - menu: ( - - - Option 1 - Option 2 - Option 3 - - - ) - } - ]; - - const notifications = { - notificationCount: 2, - label: 'Notifications', - notificationsBody: ( - - - Notification 1 - Notification 2 - Notification 3 - - - ), - noNotificationsBody: ( - - - There are no notifications - - - ), - callback: () => alert('Notification selected!') - }; - - const profile = { - initials: 'JS', - userName: 'John Snow', - colorAccent: 8 - }; - - const productMenu = [ - { name: 'Application A', callback: () => alert('Application A selected!') }, - { name: 'Application B', callback: () => alert('Application B selected!') }, - { name: 'Application C', callback: () => alert('Application C selected!') }, - { name: 'Application D', callback: () => alert('Application D selected!') } - ]; - - const productSwitcherList = [ - { - title: 'Fiori Home', - glyph: 'home', - callback: () => alert('Fiori Home selected!') - }, - { - title: 'S/4 HANA Cloud', - glyph: 'cloud', - callback: () => alert('S/4 HANA Cloud selected!') - } - ]; - - const productSwitcher = { - label: 'Product Switcher' - }; - - const coPilotShell = ( - - ); - - test('create shellbar', () => { - let component = renderer.create(simpleShellBar); - let tree = component.toJSON(); - expect(tree).toMatchSnapshot(); - - component = renderer.create(simpleShellBarWithClass); - tree = component.toJSON(); - expect(tree).toMatchSnapshot(); - }); - - describe('Prop spreading', () => { - xtest('should allow props to be spread to the Shellbar component', () => { - // TODO: placeholder for this test description once that functionality is built - - // NOTE: there are numerous other elements and components contained within Shellbar - // so there should be tests added for each once the functionality is present. - - const element = mount(); - - expect( - element.getDOMNode().attributes['data-sample'].value - ).toBe('Sample'); - }); + const profile1 = { + initials: 'JS', + userName: 'John Snow', + colorAccent: 8 + }; + + const profileMenu = [ + { + name: 'Settings', + glyph: 'action-settings', + size: 's', + callback: () => alert('Settings selected!') + }, + { + name: 'Sign Out', + glyph: 'log', + size: 's', + callback: () => alert('Sign Out selected!') + } + ]; + + const simpleShellBar = ( + + } + productTitle='Corporate Portal' + profile={profile1} + profileMenu={profileMenu} /> + ); + + const simpleShellBarWithClass = ( + + } + productTitle='Corporate Portal' + profile={profile1} + profileMenu={profileMenu} /> + ); + + const searchInput = { + label: 'Search', + placeholder: 'Enter a fruit', + onSearch: function(searchTerm) { + alert(`Search fired for ${searchTerm}`); + }, + callback: () => alert('Search selected!') + }; + + const actions = [ + { + glyph: 'settings', + label: 'Settings', + notificationCount: 5, + callback: () => alert('Settings selected!'), + menu: ( + + + Option 1 + Option 2 + Option 3 + + + ) + } + ]; + + const notifications = { + notificationCount: 2, + label: 'Notifications', + notificationsBody: ( + + + Notification 1 + Notification 2 + Notification 3 + + + ), + noNotificationsBody: ( + + + There are no notifications + + + ), + callback: () => alert('Notification selected!') + }; + + const profile = { + initials: 'JS', + userName: 'John Snow', + colorAccent: 8 + }; + + const productMenu = [ + { name: 'Application A', callback: () => alert('Application A selected!') }, + { name: 'Application B', callback: () => alert('Application B selected!') }, + { name: 'Application C', callback: () => alert('Application C selected!') }, + { name: 'Application D', callback: () => alert('Application D selected!') } + ]; + + const productSwitcherList = [ + { + title: 'Fiori Home', + glyph: 'home', + callback: () => alert('Fiori Home selected!') + }, + { + title: 'S/4 HANA Cloud', + glyph: 'cloud', + callback: () => alert('S/4 HANA Cloud selected!') + } + ]; + + const productSwitcher = { + label: 'Product Switcher' + }; + + const coPilotShell = ( + + ); + + test('create shellbar', () => { + let component = renderer.create(simpleShellBar); + let tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + + component = renderer.create(simpleShellBarWithClass); + tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + + component = renderer.create(coPilotShell); + tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); + + describe('Prop spreading', () => { + xtest('should allow props to be spread to the Shellbar component', () => { + // TODO: placeholder for this test description once that functionality is built + + // NOTE: there are numerous other elements and components contained within Shellbar + // so there should be tests added for each once the functionality is present. + + const element = mount(); + + expect(element.getDOMNode().attributes['data-sample'].value).toBe( + 'Sample' + ); }); + }); }); diff --git a/src/Shellbar/__snapshots__/Shellbar.test.js.snap b/src/Shellbar/__snapshots__/Shellbar.test.js.snap index 791316fcd..82a36c2e3 100644 --- a/src/Shellbar/__snapshots__/Shellbar.test.js.snap +++ b/src/Shellbar/__snapshots__/Shellbar.test.js.snap @@ -211,3 +211,533 @@ exports[` create shellbar 2`] = `
`; + +exports[` create shellbar 3`] = ` +
+
+ + SAP + +
+
+
+
+ +
+ +
+
+
+
+ Subtitle +
+
+
+ CoPilot +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+
+
+
+
+ +
+
+ +
+ +
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+`; diff --git a/src/SideNavigation/SideNavigation.test.js b/src/SideNavigation/SideNavigation.test.js index dda777822..982a1fc58 100644 --- a/src/SideNavigation/SideNavigation.test.js +++ b/src/SideNavigation/SideNavigation.test.js @@ -105,18 +105,6 @@ describe('', () => { ); - const sideNavList = ( - - ); - test('create side navigation', () => { // create one level side nav let component = renderer.create(oneLevelSideNav); diff --git a/src/Tree/Tree.js b/src/Tree/Tree.js index d037f5776..f6c386cba 100644 --- a/src/Tree/Tree.js +++ b/src/Tree/Tree.js @@ -32,7 +32,7 @@ export class Tree extends Component { if (this.state.numberOfElements === 0) { treeData.map(row => { - row.values.forEach(element => { + row.values.forEach(() => { ++numberOfElements; }); if (row.hasChildren) { diff --git a/src/documentation/Playground/Playground.js b/src/documentation/Playground/Playground.js index 2117a006e..87d3a6f0c 100644 --- a/src/documentation/Playground/Playground.js +++ b/src/documentation/Playground/Playground.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import { Alert } from '../../'; import { Badge, Label, Status } from '../../'; -import { Button, ButtonGroup } from '../../'; +import { Button } from '../../'; import { Dropdown } from '../../'; import { Icon } from '../../'; import { Identifier } from '../../'; diff --git a/src/documentation/Separator/Separator.js b/src/documentation/Separator/Separator.js index a53c820a8..82472e251 100644 --- a/src/documentation/Separator/Separator.js +++ b/src/documentation/Separator/Separator.js @@ -1,6 +1,6 @@ import React from 'react'; -export const Separator = (props) => { +export const Separator = () => { const separatorStyle = { display: 'block', margin: '2rem 0',