Chore: Package Update

.eslintrc

@@ -19,6 +19,9 @@
     "jsx-a11y/label-has-for": [0],
     "jsx-a11y/href-no-hash": [0],
     "import/prefer-default-export": [0],
-    "import/no-default-export": [2]
+    "import/no-default-export": [2],
+    "react/jsx-props-no-spreading": [0],
+    "react/static-property-placement": [0],
+    "react/state-in-constructor": [0]
   }
 }

package.json

@@ -27,6 +27,7 @@
   },
   "dependencies": {
     "@lightelligence/styles": "^1.0.0-alpha.1",
+    "@testing-library/jest-dom": "^4.1.2",
     "classnames": "^2.2.6",
     "clipboard-copy": "^3.1.0",
     "humps": "^2.0.1",
@@ -35,38 +36,38 @@
     "svg-url-loader": "^3.0.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.2.2",
-    "@babel/plugin-proposal-class-properties": "^7.2.3",
-    "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
+    "@babel/cli": "^7.6.3",
+    "@babel/core": "^7.6.3",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-transform-react-jsx": "^7.2.0",
-    "@babel/plugin-transform-runtime": "^7.2.0",
-    "@babel/preset-env": "^7.2.3",
-    "@testing-library/react": "^9.1.4",
-    "@testing-library/react-hooks": "^2.0.1",
-    "@testing-library/user-event": "^7.0.0",
-    "audit-ci": "^2.2.0",
-    "coveralls": "^3.0.5",
-    "css-loader": "^2.1.1",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-config-prettier": "^4.1.0",
-    "history": "^4.9.0",
-    "husky": "^2.2.0",
-    "jest-dom": "^3.1.3",
+    "@babel/plugin-transform-runtime": "^7.6.2",
+    "@babel/preset-env": "^7.6.3",
+    "@testing-library/react": "^9.3.0",
+    "@testing-library/react-hooks": "^2.0.3",
+    "@testing-library/user-event": "^7.1.2",
+    "acorn": "^6.3.0",
+    "audit-ci": "^2.4.0",
+    "coveralls": "^3.0.6",
+    "css-loader": "^3.2.0",
+    "eslint-config-airbnb": "^18.0.1",
+    "eslint-config-prettier": "^6.4.0",
+    "history": "^4.10.1",
+    "husky": "^3.0.8",
     "legally": "^3.3.7",
-    "lint-staged": "^8.1.5",
+    "lint-staged": "^9.4.2",
     "node-sass": "^4.12.0",
     "normalize.css": "^8.0.1",
-    "prettier": "^1.17.1",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
-    "react-router-dom": "^5.0.0",
+    "prettier": "^1.18.2",
+    "react": "^16.10.2",
+    "react-dom": "^16.10.2",
+    "react-router-dom": "^5.1.2",
     "react-router-prop-types": "^1.0.4",
-    "react-scripts": "^3.0.0",
+    "react-scripts": "^3.2.0",
     "react-styleguidist": "^9.1.16",
-    "react-test-renderer": "^16.10.1",
-    "url-polyfill": "^1.1.3"
+    "react-test-renderer": "^16.10.2",
+    "url-polyfill": "^1.1.7"
   },
   "peerDependencies": {
     "react-dom": "^16.8.4",

src/components/Navbar/Navbar.js

@@ -78,6 +78,7 @@ export class Navbar extends Component {
           className,
         )}
       >
+        {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
         <button
           type="button"
           className={olt.NavbarToggle}

src/components/Notification/Notification.md

@@ -49,12 +49,12 @@ const notify = () => {
     demos[index]()
 };
 
-<React.Fragment>
+<>
   <Headline size={4}>General Demo</Headline>
   <Paragraph>Click the button below multiple times to see different notifications. The notifications have different timeouts and some stay until you click them away.</Paragraph>
   <Button onClick={notify}>Click Me</Button>
   <NotificationContainer />
-</React.Fragment>
+</>
 ```
 
 
@@ -67,19 +67,19 @@ const notify = () => NotificationManager.error({
     content: 'Something very bad has happened AND IT IS NOT GOING AWAY!',
 });
 
-<React.Fragment>
+<>
   <Headline size={4}>Error Notification</Headline>
   <Paragraph>Notification example that indicates an error. The example uses timeout: 0 to stop the notifcation from closing automatically.</Paragraph>
   <Button onClick={notify}>Click to open</Button>
   <NotificationContainer />
-</React.Fragment>
+</>
 ```
 
 ```jsx noeditor
 import { Headline, Paragraph, Notification, NOTIFICATION_TYPE_INFO, NOTIFICATION_TYPE_SUCCESS, NOTIFICATION_TYPE_WARNING, NOTIFICATION_TYPE_ERROR } from '@lightelligence/react';
 import * as olt from '@lightelligence/styles';
 
-<React.Fragment>
+<>
   <Headline size={4}>Notification Types</Headline>
   <Paragraph>The following types of notifications can be created.</Paragraph>
   <div className={olt.NotificationContainer} style={{position: 'relative', margin: '10px'}}>
@@ -108,7 +108,7 @@ import * as olt from '@lightelligence/styles';
         content='An error has occured!'
     />
   </div>
-</React.Fragment>
+</>
 ```
 
 ``` jsx static

src/components/Snackbar/Snackbar.md

@@ -20,13 +20,13 @@ const setOpen = () => {
     setState({open: true});
 };
 
-<React.Fragment>
+<>
   <Headline size={4}>Success</Headline>
   <Button onClick={setOpen}>Click to open</Button>
   <Snackbar open={state.open} type="success">
     <Icon name="feedback-check-default" color='light' />Something went terrifically awesome.
   </Snackbar>
-</React.Fragment>
+</>
 ```
 
 Snackbar example that indicates an error.
@@ -51,13 +51,13 @@ const setOpen = () => {
     setState({open: true});
 };
 
-<React.Fragment>
+<>
   <Headline size={4}>Error</Headline>
   <Button onClick={setOpen}>Click to open</Button>
   <Snackbar open={state.open} color="error">
     <Icon name="feedback-warning-critical-circle" color='light' />Something went horribly wrong.
   </Snackbar>
-</React.Fragment>
+</>
 ```
 
 Source code for a simple Snackbar component.

src/components/Tabs/Tab.js

@@ -29,7 +29,7 @@ export class Tab extends PureComponent {
     const { active, label, children } = this.props;
 
     return (
-      <React.Fragment>
+      <>
         <button
           type="button"
           onClick={this.handleChange}
@@ -42,7 +42,7 @@ export class Tab extends PureComponent {
             {children}
           </div>
         )}
-      </React.Fragment>
+      </>
     );
   }
 }

src/components/V2Tabs/V2Tab.js

@@ -12,15 +12,15 @@ export const V2Tab = (props) => {
   const { active, label } = props;
 
   return (
-    <React.Fragment>
+    <>
       <button
         type="button"
         onClick={handleChange}
         className={classnames(olt.V2TabsLink, active && olt.isActive)}
       >
         {label}
       </button>
-    </React.Fragment>
+    </>
   );
 };
 

src/content/BasicDataCards/BasicDataCardsCardItem.test.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { render } from '@testing-library/react';
 
 import { BasicDataCardsContent, BasicDataCardsCardItem } from './index';
@@ -69,10 +69,10 @@ describe('BasicDataCardsItem', () => {
   test('renders fragments with content children', async () => {
     const { container } = renderCardItem({
       children: (
-        <Fragment>
+        <>
           <BasicDataCardsContent>A</BasicDataCardsContent>
           <BasicDataCardsContent>B</BasicDataCardsContent>
-        </Fragment>
+        </>
       ),
     });
 

src/content/DataCards/DataCards.test.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import {
   render,
   fireEvent,
@@ -83,9 +83,10 @@ describe('DataCards', () => {
   test('can render fragments', async () => {
     // eslint-disable-next-line react/prop-types
     const fragmentRenderItem = ({ row }) => (
-      <Fragment>
+      <>
+        {/* eslint-disable-next-line react/prop-types */}
         <div>Name: {row.name}</div>
-      </Fragment>
+      </>
     );
     const { getByText, findByText } = renderDataCards({
       children: getChildren({ renderItem: fragmentRenderItem }),

src/content/List/ListItem.js

@@ -22,7 +22,7 @@ export class ListItem extends PureComponent {
     const base = `${OLT_NAMESPACE}List`;
 
     return (
-      <React.Fragment>
+      <>
         {term && (
           <li {...props} className={classnames(`${base}-term`, className)}>
             {term}
@@ -31,7 +31,7 @@ export class ListItem extends PureComponent {
         <li {...props} className={classnames(`${base}-item`, className)}>
           {children}
         </li>
-      </React.Fragment>
+      </>
     );
   }
 }

src/content/Table/Table.md

@@ -43,14 +43,14 @@ initialState = {
 
 #### Complex example with flexible design cells, Devices
 ```js
-import { 
-  Table, 
-  TableHead, 
-  TableCell, 
-  TableCellRowIndex, 
-  Headline, 
-  Icon, 
-  Tag, 
+import {
+  Table,
+  TableHead,
+  TableCell,
+  TableCellRowIndex,
+  Headline,
+  Icon,
+  Tag,
   GridItem,
   Grid
 } from '@lightelligence/react';
@@ -80,10 +80,10 @@ initialState = {
   rows={state.rows}
 >
   <TableCell field="headline" renderer={
-    ({ name, id }) => <React.Fragment>
+    ({ name, id }) => <>
       <Headline style={{ margin: '0' }} size={6} color='primary'>{name}</Headline>
       <div className="olt-MonoText olt-MonoText--xxSmall">{id}</div>
-    </React.Fragment>
+    </>
   }/>
   <TableCell field="device-type" renderer={
     (row) => (
@@ -109,10 +109,10 @@ initialState = {
     ({ meta: { lastSeen } }) => (lastSeen)
   } />
   <TableCell field="meta" renderer={
-        ({ status }) => <React.Fragment>
+        ({ status }) => <>
           <i className="olt-u-colorSuccess">●</i>
           { status }
-        </React.Fragment>
+        </>
       } />
 </Table>
 ```

src/controls/Select/Select.js

@@ -41,7 +41,7 @@ class Select extends PureComponent {
     } = this.props;
 
     return (
-      <React.Fragment>
+      <>
         <select
           value={value}
           className={classnames(
@@ -56,7 +56,7 @@ class Select extends PureComponent {
         >
           {Select.renderOptions(options, value)}
         </select>
-      </React.Fragment>
+      </>
     );
   }
 }

src/hooks/useCopyToClipboard.test.js

@@ -2,12 +2,10 @@ import { renderHook } from '@testing-library/react-hooks';
 import copy from 'clipboard-copy';
 import { useCopyToClipboard } from './useCopyToClipboard';
 
-describe('useCopyToClipboard', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
+jest.mock('clipboard-copy');
 
-  test('copies text if provided as hook parameter', () => {
+describe('useCopyToClipboard', () => {
+  test.only('copies text if provided as hook parameter', () => {
     const { result } = renderHook(() => useCopyToClipboard('text-to-copy'));
     result.current();
     expect(copy).toHaveBeenCalledWith('text-to-copy');

src/tests/exports.test.js

@@ -1,4 +1,4 @@
-import 'jest-dom/extend-expect';
+import '@testing-library/jest-dom/extend-expect';
 import React from 'react';
 import { render } from '@testing-library/react';
 import { Router } from 'react-router-dom';

styleguide.config.js

@@ -12,6 +12,9 @@ module.exports = {
       const ignore =
         message.indexOf(
           `src/content/DataCards/DataCardsContent.js matches a pattern defined in “components” or “sections” options in your style guide`,
+        ) > -1 ||
+        message.indexOf(
+          `src/content/Fonts/Fonts.js matches a pattern defined in “components” or “sections” options in your style guide`,
         ) > -1;
       if (!ignore) {
         // eslint-disable-next-line no-console