upgrades to 8

.babelrc

@@ -1,7 +1,10 @@
 {
   "presets": [
     "@babel/preset-env",
-    "@babel/preset-react",
+    [
+      "@babel/preset-react",
+      { "runtime": "automatic" }
+    ],
     "@babel/preset-typescript"
   ],
   "plugins": [

.storybook/main.js

@@ -1,33 +1,42 @@
 const config = {
-  addons: [
-    {
-      name: '@storybook/addon-docs',
-      options: {
-        jsxOptions: {
-          babelrc: true,
-          configFile: true
-        }
+  addons: [{
+    name: '@storybook/addon-docs',
+    options: {
+      jsxOptions: {
+        babelrc: true,
+        configFile: true
       }
-    },
-    '@storybook/addon-a11y',
-    '@storybook/addon-actions',
-    '@storybook/addon-backgrounds',
-    '@storybook/addon-controls',
-    '@storybook/addon-links',
-    '@storybook/addon-storysource',
-    '@storybook/addon-mdx-gfm'
-  ],
+    }
+  }, '@storybook/addon-a11y', '@storybook/addon-actions', '@storybook/addon-backgrounds', '@storybook/addon-controls', '@storybook/addon-links', '@storybook/addon-storysource', '@storybook/addon-mdx-gfm', '@storybook/addon-webpack5-compiler-babel', ({
+    name: "@storybook/addon-styling-webpack",
+
+    options: {
+      rules: [{
+    test: /\.css$/,
+    sideEffects: true,
+    use: [
+        require.resolve("style-loader"),
+        {
+            loader: require.resolve("css-loader"),
+            options: {
+
+
+            },
+        },
+    ],
+  },],
+    }
+  })],
   docs: {
     autodocs: true,
     defaultName: 'Docs',
   },
   stories: [
-    '../stories/Intro.stories.mdx',
+    '../stories/Intro.stories.jdx',
     '../src/**/*.stories.@(js|mdx)',
     '../src/**/*.stories.@(ts|mdx)',
     '../src/**/*.stories.js[x]',
     '../src/**/*.stories.ts[x]',
-    '../stories/**/*.stories.mdx',
     '../stories/**/*.stories.js[x]',
     '../stories/**/*.stories.ts[x]'
   ],

.storybook/preview.js

@@ -1,4 +1,6 @@
 import colors from '../src/Styles/colors/palette';
+import '../scss/global.scss';
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 const preview = {
   decorators: [

package.json

@@ -34,16 +34,16 @@
   },
   "scripts": {
     "build": "NODE_ENV=production babel src --out-dir lib --copy-files --extensions '.js,.jsx,.ts,.tsx' && tsc",
-    "build-storybook": "storybook build -s public",
-    "build-storybook-docs": "storybook build -s public --docs",
+    "build-storybook": "storybook build public",
+    "build-storybook-docs": "storybook build public --docs",
     "build-ts": "tsc",
     "chromatic": "npx chromatic",
     "lint": "tsc --noEmit && eslint . --ext .js,.jsx,.ts,.tsx",
     "prepublishOnly": "yarn build",
     "rs:link": "bin/link-rs",
     "rs:link:watch": "nodemon",
     "rs:unlink": "bin/unlink-rs",
-    "storybook": "storybook dev -p 9009 -s public",
+    "storybook": "storybook dev -p 9009 public",
     "test": "jest"
   },
   "eslintConfig": {
@@ -85,6 +85,7 @@
     "@babel/plugin-proposal-private-property-in-object": "^7.21.0",
     "@babel/plugin-transform-runtime": "^7.12.1",
     "@babel/preset-env": "^7.8.4",
+    "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.22.5",
     "@babel/runtime": "^7.12.5",
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
@@ -93,18 +94,20 @@
     "@fortawesome/pro-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@popperjs/core": "^2.5.3",
-    "@storybook/addon-a11y": "7.4.1",
-    "@storybook/addon-actions": "7.4.1",
-    "@storybook/addon-backgrounds": "7.4.1",
-    "@storybook/addon-controls": "^7.4.1",
-    "@storybook/addon-docs": "7.4.1",
-    "@storybook/addon-jest": "7.4.1",
-    "@storybook/addon-links": "7.4.1",
-    "@storybook/addon-mdx-gfm": "7.4.1",
-    "@storybook/addon-storysource": "7.4.1",
-    "@storybook/addons": "7.4.1",
-    "@storybook/react": "7.4.1",
-    "@storybook/react-webpack5": "7.4.1",
+    "@storybook/addon-a11y": "^8.0.5",
+    "@storybook/addon-actions": "^8.0.5",
+    "@storybook/addon-backgrounds": "^8.0.5",
+    "@storybook/addon-controls": "^8.0.5",
+    "@storybook/addon-docs": "^8.0.5",
+    "@storybook/addon-jest": "^8.0.5",
+    "@storybook/addon-links": "^8.0.5",
+    "@storybook/addon-mdx-gfm": "^8.0.5",
+    "@storybook/addon-storysource": "^8.0.5",
+    "@storybook/addon-styling-webpack": "^1.0.0",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/addons": "^7.6.17",
+    "@storybook/react": "^8.0.5",
+    "@storybook/react-webpack5": "^8.0.5",
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^3.2.1",
@@ -146,7 +149,7 @@
     "react-test-renderer": "^18.0.2",
     "react-tracking": "8.1.0",
     "sass-loader": "^10.4.1",
-    "storybook": "7.4.1",
+    "storybook": "^8.0.5",
     "storybook-addon-designs": "6.3.1",
     "style-loader": "^1.1.3",
     "typescript": "^4.9.5",

src/Alert/Alert.stories.jsx

@@ -7,9 +7,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faGoogle } from '@fortawesome/free-brands-svg-icons';
 import mdx from './Alert.mdx';
 
-import 'bootstrap/dist/css/bootstrap.min.css';
-import '../../scss/global.scss';
-
 export default {
   title: 'Components/Alert',
   component: Alert,

src/Modal/Modal.stories.jsx

@@ -7,9 +7,6 @@ import {
 } from 'src/Modal';
 import mdx from './Modal.mdx';
 
-import 'bootstrap/dist/css/bootstrap.min.css';
-import '../../scss/global.scss';
-
 export default {
   title: 'Components/Modal',
   component: Modal,

src/Toast/Toast.stories.jsx

@@ -5,8 +5,6 @@ import Button from 'src/Button';
 import { withToast, withToastPropTypes } from 'src/Toast';
 import mdx from './Toast.mdx';
 
-import '../../scss/global.scss';
-
 export default {
   title: 'Components/Toast',
   component: withToast,

stories/Intro.stories.jsx

@@ -0,0 +1,52 @@
+import ImageFile from '../public/ui-design-system-dark.svg';
+import FigmaLogo from '../public/figma-logo.svg';
+import GithubLogo from '../public/github-logo.svg';
+
+function Default() {
+  return (
+    <>
+      <div style={{ width: '50%', margin: '0 auto', textAlign: 'center' }}>
+        <img alt="User Interviews Design System" src={ImageFile} style={{ marginBottom: '32px' }} />
+        <div style={{ marginBottom: '32px', fontFamily: 'Inter' }}>
+          We aim to create a system that allows us to build a user experience that is consistent,
+          flexible and scalable.  This style guide is living documentation that will be
+          updated as we continue to evolve and improve our design system.
+        </div>
+        <a
+          href="https://www.figma.com/file/471iS3QrpPtXZpS1xbsJ20/Components"
+          rel="noopener noreferrer"
+          style={{
+          fontSize: '14px',
+          fontWeight: 'bold',
+          margin: '10px',
+        }}
+          target="_blank"
+          type="button"
+        >
+          <img alt="" src={FigmaLogo} style={{ marginRight: '8px' }} />
+          <span>Figma Library</span>
+        </a>
+        <a
+          href="https://github.com/user-interviews/ui-design-system"
+          rel="noopener noreferrer"
+          style={{
+          fontSize: '14px',
+          fontWeight: 'bold',
+        }}
+          target="_blank"
+          type="button"
+        >
+          <img alt="" src={GithubLogo} style={{ marginRight: '8px' }} />
+          <span>Github Repo</span>
+        </a>
+      </div>
+    </>
+  );
+}
+
+export default {
+  title: 'Intro',
+  component: Default,
+};
+
+export const Primary = {};

stories/Spacing/Spacing.mdx

@@ -1,4 +1,4 @@
-import { ArgsTable, Story, Canvas } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Story, Canvas } from '@storybook/blocks';
 
 # Spacing