[TKAI-3469] feat: refactor horizontal menu (#131)

* feat: use vanilla css instead styled-components for global styling

* build: install react-intersection-observer

* feat: horizontal nav refactor

* style: use css modules instead styled-components

* build: bump storybook to 7.6.7

* build: add rollup config to handle css modules

* build: add identity-obj-proxy lib to mock css modules

* test: update horizontal-nav tests

* Update src/organisms/horizontal-nav/index.tsx

---------

Co-authored-by: Rtandrew Paul <anderson_rodax@hotmail.com>

.storybook/preview.tsx

@@ -1,101 +1,8 @@
-import { createGlobalStyle, ThemeProvider } from 'styled-components';
 import { withThemeFromJSXProvider } from '@storybook/addon-styling';
-import { rem } from 'polished';
-import { typography, colors } from '../src/ions/variables';
-import { device } from '../src/ions/breakpoints';
-
-/* TODO: update import for your custom theme configurations */
-// import { lightTheme, darkTheme } from '../path/to/themes';
-
-/* TODO: replace with your own global styles, or remove */
-const GlobalStyles = createGlobalStyle`
-    * {
-    box-sizing: border-box;
-  }
-
-  html {
-    font-size: 16px;
-    scroll-behavior: smooth;
-  }
-
-  body {
-    margin: 0;
-    font-family: 'Space Grotesk', Verdana, Arial, Helvetica, sans-serif;
-    font-size: 1rem;
-    font-weight: ${typography.regular};
-    color: ${colors.black};
-    font-feature-settings: 'ss04' on;
-    -webkit-font-smoothing: antialiased;
-  }
-
-  h1,
-  h1 span,
-  h2,
-  h2 span {
-    margin: 0;
-    font-weight: ${typography.regular};
-  }
-
-  h1,
-  h1 span {
-    font-family: 'Laforgestencil', Verdana, Arial, Helvetica, sans-serif;
-    font-size: 3.5rem;
-    line-height: 1.15;
-  }
-
-  h2,
-  h2 span {
-    font-size: 2rem;
-    line-height: 1.2;
-  }
-
-  h3,
-  h4 {
-    margin: 0;
-    font-size: 1rem;
-    font-weight: 400;
-  }
-
-  span {
-    font-family: ${typography.defaultFont};
-    font-size: ${rem(typography.defaultSize)};
-    font-feature-settings: 'ss04' on;
-  }
-
-  p {
-    margin: 0;
-    font-size: 1rem;
-    line-height: 1.3;
-
-    &:not(:last-child) {
-      margin-bottom: ${rem('10px')};
-    }
-  }
-
-  pre {
-    border: 1px solid ${colors.grey500};
-    border-radius: 4px;
-    background-color: ${colors.grey300};
-    padding: ${rem('15px')};
-  }
-
-  @media ${device.l} {
-    h1,
-    h1 span {
-      font-size: 6rem;
-      line-height: 1.1;
-    }
-
-    h2,
-    h2 span {
-      font-size: 2.5rem;
-    }
-  }
-`;
+import '../src/styles/global.css';
 
 const preview = {
   actions: { argTypesRegex: '^on.*' },
-
   backgrounds: {
     default: 'light',
     values: [
@@ -120,7 +27,6 @@ const preview = {
       // }
       // defaultTheme: 'light',
       // Provider: ThemeProvider,
-      GlobalStyles,
     }),
   ],
 };

__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

jest.config.js

@@ -4,4 +4,9 @@ module.exports = {
       babelConfig: '.babelrc.json',
     },
   },
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/__mocks__/fileMock.js',
+    '\\.(css|less)$': 'identity-obj-proxy',
+  },
 };

package.json

@@ -67,18 +67,19 @@
     "@babel/preset-env": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
     "@size-limit/preset-small-lib": "^11.0.1",
-    "@storybook/addon-a11y": "^7.6.4",
-    "@storybook/addon-controls": "^7.6.4",
-    "@storybook/addon-essentials": "^7.6.4",
-    "@storybook/addon-links": "^7.6.4",
+    "@storybook/addon-a11y": "^7.6.7",
+    "@storybook/addon-controls": "^7.6.7",
+    "@storybook/addon-essentials": "^7.6.7",
+    "@storybook/addon-links": "^7.6.7",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/addons": "^7.6.4",
-    "@storybook/react": "^7.6.4",
-    "@storybook/react-webpack5": "^7.6.4",
-    "@storybook/theming": "^7.6.4",
+    "@storybook/addons": "^7.6.7",
+    "@storybook/react": "^7.6.7",
+    "@storybook/react-webpack5": "^7.6.7",
+    "@storybook/theming": "^7.6.7",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^13.0.7",
+    "@types/css-modules": "^1.0.5",
     "@types/lodash.throttle": "^4.1.6",
     "@types/react": "^17.0.3",
     "@types/react-beautiful-dnd": "^13.1.1",
@@ -101,12 +102,14 @@
     "eslint-plugin-storybook": "^0.6.15",
     "eslint-plugin-testing-library": "^3.10.1",
     "husky": "^5.1.3",
+    "identity-obj-proxy": "^3.0.0",
     "prettier": "^3.1.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-is": "^17.0.1",
+    "rollup-plugin-postcss": "^4.0.2",
     "size-limit": "^11.0.1",
-    "storybook": "^7.6.4",
+    "storybook": "^7.6.7",
     "tsdx": "^0.14.1",
     "tslib": "^2.0.3",
     "typescript": "^4.2.3",
@@ -126,6 +129,7 @@
     "lodash.throttle": "^4.1.1",
     "polished": "^4.1.1",
     "react-beautiful-dnd": "^13.1.0",
+    "react-intersection-observer": "^9.5.3",
     "react-paginate": "^7.1.3",
     "react-player": "^2.9.0",
     "react-responsive-carousel": "^3.2.18",

src/atoms/select-interactive/__tests__/__snapshots__/select-interactive.test.tsx.snap

@@ -160,6 +160,7 @@ exports[`Select Interactive renders 1`] = `
         aria-live="polite"
         aria-relevant="additions text"
         class="css-1f43avz-a11yText-A11yText"
+        role="log"
       />
       <div
         class="select__control css-13cymwt-control"
@@ -177,6 +178,7 @@ exports[`Select Interactive renders 1`] = `
             data-value=""
           >
             <input
+              aria-activedescendant=""
               aria-autocomplete="list"
               aria-expanded="false"
               aria-haspopup="true"