remove unused react-scripts (#928)

bump node version max to 19 (#926)

add TableFoot, update TableCell hover, and allow stickyRowBottom (#916)

move btn-focus-outline--dark-bg to buttons styles (#917)

Storybook 7 upgrade (#911)

Improve Drawer breakpoints on tablets (#921)

add Spacing stories to foundations (#914)

.babelrc

@@ -6,6 +6,8 @@
   "plugins": [
     "@babel/plugin-transform-runtime",
     "@babel/plugin-proposal-object-rest-spread",
+    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
+    ["@babel/plugin-proposal-private-methods", { "loose": true }],
     ["module-resolver", {
       "alias": {
         "src": "./src",
@@ -18,6 +20,9 @@
       "plugins": [
         [
           "@babel/plugin-proposal-class-properties",
+          {
+            "loose": true
+          }
         ],
         [
           "transform-react-remove-prop-types",
@@ -31,6 +36,9 @@
       "plugins": [
         [
           "@babel/plugin-proposal-class-properties",
+          {
+            "loose": true
+          }
         ]
       ]
     }

.github/workflows/chromatic.yml

@@ -19,9 +19,9 @@ jobs:
       - uses: actions/checkout@v2
         with:
           fetch-depth: 0 # 👈 Required to retrieve git history
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v3
         with:
-          node-version: '14.17.4'
+          node-version-file: '.node-version'
       - run: npm config set "@fortawesome:registry" https://npm.fontawesome.com/ &&
           npm config set "//npm.fontawesome.com/:_authToken" $FONTAWESOME_NPM_AUTH_TOKEN
       - run: yarn

.github/workflows/create-new-release.yml

@@ -10,9 +10,9 @@ jobs:
       FONTAWESOME_NPM_AUTH_TOKEN: ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v3
         with:
-          node-version: '14.17.4'
+          node-version-file: '.node-version'
       - run: npm config set "@fortawesome:registry" https://npm.fontawesome.com/ &&
           npm config set "//npm.fontawesome.com/:_authToken" $FONTAWESOME_NPM_AUTH_TOKEN
       - run: yarn install

.github/workflows/gh-pages-deploy.yml

@@ -13,9 +13,9 @@
         - name: Checkout branch
           uses: actions/checkout@v2
         - name: Setup node
-          uses: actions/setup-node@v1
+          uses: actions/setup-node@v3
           with:
-            node-version: '14.17.4'
+            node-version-file: '.node-version'
 
         - name: Configure npm
           run: npm config set "@fortawesome:registry" https://npm.fontawesome.com/ &&

.github/workflows/lint.yml

@@ -9,9 +9,9 @@ jobs:
       FONTAWESOME_NPM_AUTH_TOKEN: ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v3
         with:
-          node-version: '14.17.4'
+          node-version-file: '.node-version'
       - run: npm config set "@fortawesome:registry" https://npm.fontawesome.com/ &&
           npm config set "//npm.fontawesome.com/:_authToken" $FONTAWESOME_NPM_AUTH_TOKEN
       - run: yarn

.github/workflows/prepare-hotfix.yml

@@ -15,9 +15,9 @@ jobs:
       - uses: actions/checkout@v2
         with:
           fetch-depth: 0
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v3
         with:
-          node-version: '14.17.4'
+          node-version-file: '.node-version'
 
       - name: Create hotfix branch
         run: git checkout -b hotfix/${{ github.event.inputs.version }}

.github/workflows/prepare-release.yml

@@ -15,9 +15,9 @@ jobs:
       - uses: actions/checkout@v2
         with:
           fetch-depth: 0
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v3
         with:
-          node-version: '14.17.4'
+          node-version-file: '.node-version'
 
       - name: Create release branch
         run: git checkout -b release/${{ github.event.inputs.version }}

.github/workflows/test.yml

@@ -9,9 +9,9 @@ jobs:
       FONTAWESOME_NPM_AUTH_TOKEN: ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v3
         with:
-          node-version: '14.17.4'
+          node-version-file: '.node-version'
       - run: npm config set "@fortawesome:registry" https://npm.fontawesome.com/ &&
             npm config set "//npm.fontawesome.com/:_authToken" $FONTAWESOME_NPM_AUTH_TOKEN
       - run: yarn

.node-version

@@ -0,0 +1 @@
+16.20.0

.storybook/main.js

@@ -1,20 +1,40 @@
-module.exports = {
+const config = {
   addons: [
     {
       name: '@storybook/addon-docs',
-      options: { mdxBabelOptions: { babelrc: true, configFile: true } },
+      options: {
+        jsxOptions: {
+          babelrc: true,
+          configFile: true
+        }
+      }
     },
     '@storybook/addon-a11y',
-    '@storybook/addon-actions/register',
-    '@storybook/addon-knobs/register',
-    '@storybook/addon-links/register',
-    '@storybook/addon-storysource/register'
+    '@storybook/addon-actions',
+    '@storybook/addon-controls',
+    '@storybook/addon-links',
+    '@storybook/addon-knobs',
+    '@storybook/addon-storysource',
+    '@storybook/addon-mdx-gfm'
   ],
+  docs: {
+    autodocs: true,
+    defaultName: 'Docs',
+  },
   stories: [
     '../stories/Intro.stories.mdx',
     '../src/**/*.stories.@(js|mdx)',
     '../src/**/*.stories.js[x]',
     '../stories/**/*.stories.mdx',
     '../stories/**/*.stories.js[x]'
-  ]
+  ],
+  features: {
+    storyStoreV7: false,
+  },
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: { fastRefresh: true },
+  },
 };
+
+export default config;

.storybook/preview.js

@@ -1,12 +1,11 @@
-import React from 'react';
-import { addDecorator } from "@storybook/react";
-
-addDecorator(story => <div style={{ padding: '1rem' }}>{story()}</div>);
-
-export const parameters = {
-  options: {
-    storySort: {
-      order: ['Foundations', 'Components'],
+const preview = {
+  parameters: {
+    options: {
+      storySort: {
+        order: ['Foundations', 'Components'],
+      },
     },
-  },
+  }
 };
+
+export default preview;

.storybook/user-interviews-theme.js

@@ -1,9 +1,14 @@
 import { create } from '@storybook/theming';
-import UILogo from '../public/ui-design-system.svg';
+import UILogo from '../public/ui-design-system-light.svg';
 
 export default create({
-  base: 'light',
+  base: 'dark',
   brandTitle: 'User Interviews',
   brandUrl: 'https://github.com/user-interviews/ui-design-system',
   brandImage: UILogo,
+
+  barBg: '#FFFFFF',
+  barTextColor: '#444444',
+  barSelectedColor: '#158D71',
+  colorSecondary: '#158D71',
 });

.storybook/webpack.config.js

@@ -3,7 +3,7 @@ const path = require('path');
 module.exports = function({ config }) {
   config.module.rules.push({
     test: /\.scss$/,
-    loaders: ['style-loader', 'css-loader', 'sass-loader'],
+    use: ['style-loader', 'css-loader', 'sass-loader'],
     include: path.resolve(__dirname, '../')
   });
 

README.md

@@ -26,12 +26,6 @@ The Design System tech lead and Product Designers are the main decision makers &
 
 ## Steps to update any documentation file
 
-### Set up local variables
-
-After cloning the repo, create `.npmrc` and `.env` files in the root level directory. These gitignored files will store our auth tokens and other local variables.
-
-Copy the respective contents into each new file from the `Design System local variables` note located in our password manager (1Password).
-
 ### `yarn install`
 
 Installs all yarn dependencies

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@user-interviews/ui-design-system",
-  "version": "1.43.1",
+  "version": "2.0.0-alpha",
   "dependencies": {
     "react-bootstrap": "^2.5.0",
     "react-loading-skeleton": "^3.1.0",
@@ -12,16 +12,16 @@
   },
   "scripts": {
     "build": "NODE_ENV=production babel src --out-dir lib --copy-files",
-    "build-storybook": "build-storybook -s public",
-    "build-storybook-docs": "build-storybook -s public --docs",
+    "build-storybook": "storybook build -s public",
+    "build-storybook-docs": "storybook build -s public --docs",
     "chromatic": "npx chromatic",
     "deploy-storybook": "storybook-to-ghpages",
     "lint": "eslint . --ext .js,.jsx",
     "prepublishOnly": "yarn build",
     "rs:link": "bin/link-rs",
     "rs:link:watch": "./node_modules/nodemon/bin/nodemon.js",
     "rs:unlink": "bin/unlink-rs",
-    "storybook": "start-storybook -p 9009 -s public",
+    "storybook": "storybook dev -p 9009 -s public",
     "test": "jest"
   },
   "eslintConfig": {
@@ -63,25 +63,26 @@
     "@babel/plugin-transform-runtime": "^7.12.1",
     "@babel/preset-env": "^7.8.4",
     "@babel/runtime": "^7.12.5",
-    "@bugsnag/js": "^7.0.0",
-    "@bugsnag/plugin-react": "^7.0.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
     "@fortawesome/free-brands-svg-icons": "^5.15.3",
     "@fortawesome/pro-regular-svg-icons": "^5.15.3",
     "@fortawesome/pro-solid-svg-icons": "^5.15.3",
     "@fortawesome/react-fontawesome": "^0.1.9",
     "@popperjs/core": "^2.5.3",
-    "@storybook/addon-a11y": "6.2.1",
-    "@storybook/addon-actions": "6.2.1",
-    "@storybook/addon-docs": "6.2.1",
-    "@storybook/addon-jest": "6.2.1",
-    "@storybook/addon-knobs": "6.2.1",
-    "@storybook/addon-links": "6.2.1",
-    "@storybook/addon-storyshots": "6.2.1",
-    "@storybook/addon-storysource": "6.2.1",
-    "@storybook/addons": "6.2.1",
-    "@storybook/react": "6.2.1",
-    "@storybook/storybook-deployer": "^2.8.7",
+    "@storybook/addon-a11y": "7.0.8",
+    "@storybook/addon-actions": "7.0.8",
+    "@storybook/addon-controls": "^7.0.8",
+    "@storybook/addon-docs": "7.0.8",
+    "@storybook/addon-jest": "7.0.8",
+    "@storybook/addon-knobs": "7.0.2",
+    "@storybook/addon-links": "7.0.8",
+    "@storybook/addon-mdx-gfm": "7.0.8",
+    "@storybook/addon-storyshots": "7.0.8",
+    "@storybook/addon-storysource": "7.0.8",
+    "@storybook/addons": "7.0.8",
+    "@storybook/react": "7.0.8",
+    "@storybook/react-webpack5": "7.0.8",
+    "@storybook/storybook-deployer": "^2.8.16",
     "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^3.2.1",
@@ -109,20 +110,22 @@
     "eslint-utils": "^1.4.3",
     "jest": "^27.4.6",
     "jest-css-modules-transform": "^4.3.0",
-    "node-sass": "^4.14.1",
+    "node-sass": "^8.0.0",
     "nodemon": "^2.0.15",
     "prop-types": "^15.6.1",
-    "react": "16.14.0",
+    "react": "^18.0.2",
     "react-copy-to-clipboard": "^5.0.2",
-    "react-dom": "^16.12.0",
+    "react-dom": "^18.0.2",
     "react-modal": "^3.12.1",
     "react-popper": "^2.2.3",
-    "react-test-renderer": "^16.12.0",
+    "react-test-renderer": "^18.0.2",
     "react-tracking": "8.1.0",
-    "sass-loader": "^8.0.2",
-    "storybook-addon-designs": "6.2.1",
+    "sass-loader": "^10.4.1",
+    "storybook": "7.0.8",
+    "storybook-addon-designs": "6.3.1",
     "style-loader": "^1.1.3",
-    "styled-components": "^5.3.3"
+    "styled-components": "^5.3.3",
+    "webpack": "^5.80.0"
   },
   "resolutions": {
     "styled-components": "^5"
@@ -133,9 +136,8 @@
     "scss"
   ],
   "engines": {
-    "node": "^ 14.17.4",
-    "npm": "^ 7.20.3",
-    "yarn": "^ 1.22.5"
+    "node": ">= 16 < 19",
+    "yarn": "^ 1.22"
   },
   "main": "lib/index.js",
   "publishConfig": {
@@ -146,14 +148,14 @@
     "url": "git+https://github.com/user-interviews/ui-design-system.git"
   },
   "author": {
-    "name": "Dave Ferris",
-    "email": "dave@userinterviews.com"
+    "name": "Jason Basuil",
+    "email": "design-system@userinterviews.com"
   },
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/user-interviews/ui-design-system/issues"
   },
-  "readme": "ERROR: No README data found!",
-  "homepage": "https://github.com/user-interviews/ui-design-system#readme",
+  "readme": "https://github.com/user-interviews/ui-design-system#readme",
+  "homepage": "https://github.com/user-interviews/ui-design-system",
   "_id": "@user-interviews/ui-design-system@1.32.0"
 }

scss/buttons.scss

@@ -28,6 +28,12 @@ $warning: $ux-yellow-400;
   outline-offset: 0.125rem;
 }
 
+@mixin btn-focus-outline--dark-bg {
+  box-shadow: none !important;
+  outline: 0.125rem solid $ux-white;
+  outline-offset: 0.125rem;
+}
+
 @mixin btn-remove-bootstrap-focus-outline {
   box-shadow: none !important;
 }