[CUTL-116] ⬆️ (Base) Upgrade all dependencies

.eslintrc.js

@@ -55,7 +55,12 @@ module.exports = {
     'jsx-a11y/role-has-required-aria-props': 2,
     'jsx-a11y/role-supports-aria-props': 2,
     'max-len': 0,
-    'newline-per-chained-call': 0,
+    'newline-per-chained-call': [
+      'error',
+      {
+        ignoreChainWithDepth: 3,
+      },
+    ],
     'no-confusing-arrow': 0,
     'no-console': 1,
     'no-underscore-dangle': 0,
@@ -70,9 +75,11 @@ module.exports = {
     'react/jsx-filename-extension': 0,
     'react/jsx-no-target-blank': 0,
     'react/jsx-uses-vars': 2,
+    'react/jsx-props-no-spreading': 0,
     'react/require-default-props': 0,
     'react/require-extension': 0,
     'react/self-closing-comp': 0,
+    'react/state-in-constructor': 0,
     'react/sort-comp': 0,
     'require-yield': 0,
   },

.prettierrc

@@ -1,4 +1,5 @@
 {
+  "arrowParens": "avoid",
   "semi": false,
   "singleQuote": true,
   "tabWidth": 2,

.storybook/webpack.config.js

@@ -1,9 +1,9 @@
-module.exports = function({ config }) {
+module.exports = function ({ config }) {
   config.module.rules.push({
     test: /\.stories\.jsx?$/,
     loaders: [
       {
-        loader: require.resolve('@storybook/addon-storysource/loader'),
+        loader: require.resolve('@storybook/source-loader'),
         options: {
           prettierConfig: {
             semi: false,

app/components/Anchor/__snapshots__/Anchor.test.js.snap

@@ -101,7 +101,7 @@ exports[`Anchor renders and matches snapshot 1`] = `
           stroke-width="2"
         />
       </svg>
-      <div
+      <span
         class="c3"
       />
       Click Me

app/components/AutoSaveFormField/AutoSaveFormField.js

@@ -39,21 +39,41 @@ const AutoSaveFormField = ({ onSave, name, value, ...rest }) => {
   const Status = () => {
     if (success)
       return (
-        <Box animation={{ type: 'fadeIn', delay: 0, duration: 200 }} width="60px">
+        <Box
+          animation={{
+            type: 'fadeIn',
+            delay: 0,
+            duration: 200,
+          }}
+          width="60px"
+        >
           <StatusGood
             data-testid={`success-${name}`}
             color="status-ok"
-            style={{ marginLeft: 10, marginBottom: 22 }}
+            style={{
+              marginLeft: 10,
+              marginBottom: 22,
+            }}
           />
         </Box>
       )
     if (error)
       return (
-        <Box animation={{ type: 'fadeIn', delay: 0, duration: 200 }} width="60px">
+        <Box
+          animation={{
+            type: 'fadeIn',
+            delay: 0,
+            duration: 200,
+          }}
+          width="60px"
+        >
           <StatusCritical
             data-testid={`error-${name}`}
             color="status-error"
-            style={{ marginLeft: 10, marginBottom: 58 }}
+            style={{
+              marginLeft: 10,
+              marginBottom: 58,
+            }}
           />
         </Box>
       )

app/components/AutoSaveFormField/__snapshots__/AutoSaveFormField.test.js.snap

@@ -3,32 +3,28 @@
 exports[`AutoSaveFormField renders and matches snapshot 1`] = `
 <div>
   <div
-    class="StyledGrommet-sc-19lkkz7-0 fXgXKw"
+    class="StyledGrommet-sc-19lkkz7-0 cfKHaq"
   >
     <div
-      class="StyledBox-sc-13pk1d4-0 gGqmMH"
+      class="StyledBox-sc-13pk1d4-0 frYYLR"
     >
       <div
-        class="StyledBox-sc-13pk1d4-0 kCeiYn FormField__FormFieldBox-m9hood-0 eenrNp FormField__StyledFormField-g4wt0p-0 feezXd"
+        class="StyledBox-sc-13pk1d4-0 cYSZtx FormField__FormFieldBox-m9hood-0 jGEMXj FormField__StyledFormField-g4wt0p-0 iWBsdv"
         value="Test Value"
       >
         <label
-          class="StyledText-sc-1sadyjn-0 enbIRN"
+          class="StyledText-sc-1sadyjn-0 drTEXR"
         >
           <span
-            class="StyledText-sc-1sadyjn-0 lmFPCJ Text__StyledGrommetText-sc-1qclgcc-0 lkunaY"
+            class="StyledText-sc-1sadyjn-0 fHOLAh Text__StyledGrommetText-sc-1qclgcc-0 bTNLcC"
           />
         </label>
         <div
-          class="StyledBox-sc-13pk1d4-0 kGPDbB FormField__FormFieldContentBox-m9hood-1 ckZStK"
-        >
-          <div
-            class="StyledBox-sc-13pk1d4-0 bFwQzJ"
-          />
-        </div>
+          class="StyledBox-sc-13pk1d4-0 gmReJc FormField__FormFieldContentBox-m9hood-1"
+        />
       </div>
       <div
-        class="StyledBox-sc-13pk1d4-0 kcIJqo"
+        class="StyledBox-sc-13pk1d4-0 cQQyAG"
       />
     </div>
   </div>

app/components/Avatar/Avatar.doc.js

@@ -1,12 +1,10 @@
 import { describe, PropTypes } from 'react-desc'
 
 export const doc = Avatar => {
-  const DocumentedAvatar = describe(Avatar)
-    .description('A Avatar')
-    .usage(
-      `import { Avatar } from 'components/Avatar';
+  const DocumentedAvatar = describe(Avatar).description('A Avatar').usage(
+    `import { Avatar } from 'components/Avatar';
 <Avatar />`,
-    )
+  )
 
   DocumentedAvatar.propTypes = {
     id: PropTypes.string

app/components/Avatar/__snapshots__/Avatar.test.js.snap

@@ -3,10 +3,10 @@
 exports[`Avatar renders and matches snapshot 1`] = `
 <div>
   <div
-    class="StyledGrommet-sc-19lkkz7-0 fXgXKw"
+    class="StyledGrommet-sc-19lkkz7-0 cfKHaq"
   >
     <div
-      class="StyledBox-sc-13pk1d4-0 eREzgX StyledAvatar-sc-1suyamb-1 juEsgd"
+      class="StyledBox-sc-13pk1d4-0 cfptzR StyledAvatar-sc-1suyamb-1"
     />
   </div>
 </div>

app/components/Box/stories/Box.Border.stories.js

@@ -44,7 +44,14 @@ storiesOf('Box', module)
         <Box direction="row-responsive" gap="small" align="start">
           {['solid', 'dashed', 'dotted', 'double', 'groove', 'ridge', 'inset', 'outset'].map(
             type => (
-              <Box key={type} pad="small" border={{ size: 'medium', style: type }}>
+              <Box
+                key={type}
+                pad="small"
+                border={{
+                  size: 'medium',
+                  style: type,
+                }}
+              >
                 {type}
               </Box>
             ),

app/components/Box/stories/Box.Round.stories.js

@@ -46,7 +46,14 @@ storiesOf('Box', module)
             </Box>
           ))}
 
-          <Box background="brand" pad="small" round={{ corner: 'left', size: '15px' }}>
+          <Box
+            background="brand"
+            pad="small"
+            round={{
+              corner: 'left',
+              size: '15px',
+            }}
+          >
             left rounded corner px value
           </Box>
         </Grid>

app/components/Box/stories/Box.Simple.stories.js

@@ -30,7 +30,10 @@ storiesOf('Box', module)
         <Box
           pad="large"
           align="center"
-          background={{ color: 'light-2', opacity: 'strong' }}
+          background={{
+            color: 'light-2',
+            opacity: 'strong',
+          }}
           round
           gap="small"
         >

app/components/Box/stories/Box.Size.stories.js

@@ -24,7 +24,10 @@ storiesOf('Box', module)
           align="center"
           justify="center"
           background="brand"
-          overflow={{ horizontal: 'hidden', vertical: 'scroll' }}
+          overflow={{
+            horizontal: 'hidden',
+            vertical: 'scroll',
+          }}
         >
           {Array(20)
             .fill()