chore: node 20, mv components directory src to root, add emulsify-cor…

…e as only dependency

.nvmrc

@@ -1 +1 @@
-16.13
+20

.storybook/main.js

@@ -1,12 +1,43 @@
 module.exports = {
   stories: [
-    '../src/components/**/*.stories.mdx',
-    '../src/components/**/*.stories.@(js|jsx|ts|tsx)',
+    '../components/**/*.stories.mdx',
+    '../components/**/*.stories.@(js|jsx|ts|tsx)',
   ],
   addons: [
     '@storybook/addon-a11y',
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     'storybook-addon-designs',
+    {
+      name: '@storybook/addon-styling-webpack',
+      options: {
+        rules: [
+          // Replaces existing CSS rules to support PostCSS
+          {
+            test: /\.css$/,
+            use: [
+              'style-loader',
+              {
+                loader: 'css-loader',
+                options: { importLoaders: 1 },
+              },
+            ],
+          },
+        ],
+      },
+    },
   ],
+
+  core: {
+    builder: 'webpack5',
+  },
+
+  framework: {
+    name: '@storybook/html-webpack5',
+    options: {},
+  },
+
+  docs: {
+    autodocs: true,
+  },
 };

.storybook/preview.js

@@ -1,20 +1,24 @@
-import { addDecorator } from '@storybook/html';
 import { useEffect } from '@storybook/client-api';
 import Twig from 'twig';
 import { setupTwig } from './setupTwig';
-import { withDesign } from 'storybook-addon-designs';
 
 // GLOBAL CSS
-import '../src/style.scss';
+import '../dist/style.css';
 
 // If in a Drupal project, it's recommended to import a symlinked version of drupal.js.
 import './_drupal.js';
 
-// addDecorator deprecated, but not sure how to use this otherwise.
-addDecorator((storyFn) => {
-  useEffect(() => Drupal.attachBehaviors(), []);
-  return storyFn();
-});
+export const decorators = [
+  (Story, { args }) => {
+    const { renderAs } = args || {};
+
+    // Usual emulsify hack to add Drupal behaviors.
+    useEffect(() => {
+      Drupal.attachBehaviors();
+    }, [args]);
+    return Story();
+  },
+];
 
 setupTwig(Twig);
 
@@ -33,7 +37,7 @@ export const parameters = {
         '*',
         'WIP',
       ],
-      includeNames: true
+      includeNames: true,
     },
   },
 };

.storybook/setupTwig.js

@@ -4,7 +4,7 @@ const twigBEM = require('bem-twig-extension');
 const twigAddAttributes = require('add-attributes-twig-extension');
 
 module.exports.namespaces = {
-  components: resolve(__dirname, '../', 'src/components'),
+  components: resolve(__dirname, '../', 'components'),
 };
 
 /**

.storybook/setupTwig.test.js

@@ -23,7 +23,7 @@ describe('setupTwig', () => {
 
   it('exports emulsifys namespaces', () => {
     expect(namespaces).toEqual({
-      components: '../src/components',
+      components: '../components',
     });
   });
 });

.stylelintignore

@@ -1,2 +1,2 @@
 node_modules
-src/components/tokens/_tokens.scss
+components/tokens/_tokens.scss

src/components/accordion/_accordion.scss → components/accordion/_accordion.scss

@@ -1,7 +1,8 @@
 /* stylelint-disable no-descending-specificity */
-@use '../../stylesheets/mixins.scss';
+@use '../tokens/tokens' as *;
+@use '../../src/stylesheets/mixins' as *;
 
-$accordion_icon_size: var(--size-xl);
+$accordion-icon-size: var(--size-xl);
 
 // The accordion group.
 .accordion {
@@ -103,8 +104,8 @@ $accordion_icon_size: var(--size-xl);
 
 .accordion-item__icon {
   margin-left: auto;
-  height: $accordion_icon_size;
-  width: $accordion_icon_size;
+  height: $accordion-icon-size;
+  width: $accordion-icon-size;
   fill: var(--accordion-color-header);
 
   [aria-expanded='true'] > & {

src/components/audio-player/audio-player.stories.js → components/audio-player/audio-player.stories.js

@@ -1,6 +1,6 @@
 import template from './audio-player.twig';
 import audioData from './audio-player.yml';
-import figma from '../../../.storybook/configma.json';
+import figma from '../../.storybook/configma.json';
 
 export default {
   title: 'Components/Media/Audio Player',

src/components/button/_button.scss → components/button/_button.scss

@@ -1,4 +1,4 @@
-@import '../tokens/tokens';
+// @use '../../src/tokens/figma.tokens.json';
 
 .button {
   background-color: var(--button-color-bkg);

src/components/button/button.stories.js → components/button/button.stories.js

@@ -1,5 +1,5 @@
 import template from './button.twig';
-import figma from '../../../.storybook/configma.json';
+import figma from '../../.storybook/configma.json';
 
 export default {
   title: 'Components/Button',

src/components/card/_card.scss → components/card/_card.scss

@@ -1,3 +1,6 @@
+@use '../tokens/tokens' as *;
+@use '../../src/stylesheets/mixins' as *;
+
 .card {
   display: flex;
   flex-flow: column nowrap;

components/components.scss

@@ -0,0 +1,35 @@
+// Forward all component styles
+@forward './accordion/accordion';
+@forward './audio-player/audio-player';
+@forward './blockquote/blockquote';
+@forward './button/button';
+@forward './card/card';
+@forward './docs/examples/home';
+@forward './docs/examples/program';
+@forward './forms/checkbox/checkbox';
+@forward './forms/radio/radio';
+@forward './forms/select/select';
+@forward './forms/textfields/textfields';
+@forward './forms/fieldset';
+@forward './icons/icons';
+@forward './images/image/image';
+@forward './links/link/link';
+@forward './lists/list';
+@forward './logo/logo';
+@forward './menus/breadcrumbs/breadcrumbs';
+@forward './menus/inline/inline-menu';
+@forward './menus/main-menu/00-main-menu';
+@forward './menus/main-menu/01-main-menu-item';
+@forward './menus/main-menu/02-main-menu-link';
+@forward './menus/main-menu/03-main-menu-toggle';
+@forward './menus/social-menu/social-menu';
+@forward './pager/pager';
+@forward './status/status';
+@forward './storybook-styles/storybook.scss';
+@forward './tables/tables';
+@forward './tabs/tab';
+@forward './tabs/tabs';
+@forward './text/headings/headings';
+@forward './text/text/body';
+@forward './text/text/text';
+@forward './videos/video';

src/components/docs/cover/cover.stories.js → components/docs/cover/cover.stories.js

@@ -1,5 +1,5 @@
 import template from './cover.twig';
-import backgroundImage from '../../../images/cover.png';
+import backgroundImage from '../../../src/images/cover.png';
 
 const data = { backgroundImage };
 

src/components/docs/examples/_home.scss → components/docs/examples/_home.scss

@@ -1,10 +1,12 @@
-@use '../../../stylesheets/mixins';
+@use '../../tokens/tokens' as *;
+@use '../../../src/stylesheets/mixins' as *;
 
 .example {
   display: flex;
   flex-flow: column nowrap;
   background-color: var(--colors-white);
   padding: 0 !important;
+
   // max-width: var(--max-width);
   margin: 0 auto;
   min-height: 100vh;
@@ -126,7 +128,7 @@
     margin-top: auto;
     display: flex;
     flex-flow: row nowrap;
-    align-items: start;
+    align-items: flex-start;
 
     .footer-content {
       margin-right: auto;

src/components/docs/examples/_program.scss → components/docs/examples/_program.scss

@@ -1,3 +1,6 @@
+@use '../../tokens/tokens' as *;
+@use '../../../src/stylesheets/mixins' as *;
+
 .example {
   .dynamic {
     background: var(--colors-primary-lighter);

components/docs/examples/home.stories.js

@@ -0,0 +1,29 @@
+import template from './home.twig';
+import data from './home.yml';
+import heroImage from '../../../src/images/example/hero.jpg';
+import watchImage1 from '../../../src/images/example/watch-Image.png';
+import watchImage2 from '../../../src/images/example/watch-Image-1.png';
+import watchImage3 from '../../../src/images/example/watch-Image-2.png';
+import celebratingImage1 from '../../../src/images/example/celebrating-Image-1.png';
+import celebratingImage2 from '../../../src/images/example/celebrating-Image-2.png';
+import celebratingImage3 from '../../../src/images/example/celebrating-Image-3.png';
+import celebratingImage4 from '../../../src/images/example/celebrating-Image-4.png';
+
+const celebratingImages = [
+  celebratingImage1,
+  celebratingImage2,
+  celebratingImage3,
+  celebratingImage4,
+];
+const watchImages = [watchImage1, watchImage2, watchImage3];
+
+export default {
+  title: 'Pages/Home',
+  decorators: [
+    (story) =>
+      `<div style="background: var(--colors-grays-700); padding: 0;">${story()}</div>`,
+  ],
+};
+
+export const Home = () =>
+  template({ data, heroImage, watchImages, celebratingImages });

src/components/forms/_fieldset.scss → components/forms/_fieldset.scss

@@ -1,3 +1,5 @@
+@use '../tokens/tokens' as *;
+
 fieldset {
   border: var(--border-sm) solid var(--color-fieldset-border);
   border-radius: var(--radius-fieldset);

src/components/forms/checkbox/_checkbox.scss → components/forms/checkbox/_checkbox.scss

@@ -1,3 +1,6 @@
+@use '../../tokens/tokens' as *;
+@use '../../../src/stylesheets/mixins' as *;
+
 .form-item--checkboxes,
 .form-item--checkbox__item {
   @include list-reset;

src/components/forms/radio/_radio.scss → components/forms/radio/_radio.scss

@@ -1,3 +1,6 @@
+@use '../../tokens/tokens' as *;
+@use '../../../src/stylesheets/mixins' as *;
+
 .form-item--radios,
 .form-item--radio__item {
   @include list-reset;

src/components/forms/select/_select.scss → components/forms/select/_select.scss

@@ -1,4 +1,6 @@
 // CSS-only select styling (from https://github.com/filamentgroup/select-css)
+@use '../../tokens/tokens' as *;
+@use '../../../src/stylesheets/mixins' as *;
 
 .form-item__dropdown {
   border: var(--border-sm) solid clr(accent);

src/components/forms/textfields/_textfields.scss → components/forms/textfields/_textfields.scss

@@ -1,3 +1,7 @@
+@use '../../tokens/tokens' as *;
+@use '../../../src/stylesheets/breakpoints.scss' as *;
+@use '../../../src/stylesheets/mixins' as *;
+
 .form-item {
   color: var(--colors-text-body);
   margin-bottom: 1em;

src/components/icons/icons.stories.js → components/icons/icons.stories.js

@@ -1,6 +1,6 @@
 import iconTwig from './icons.twig';
 
-const svgIcons = require.context('../../../images/icons/', true, /\.svg$/);
+const svgIcons = require.context('../../assets/icons/', true, /\.svg$/);
 const icons = [];
 svgIcons.keys().forEach((key) => {
   const icon = key.split('./')[1].split('.')[0];

src/components/images/images.stories.js → components/images/images.stories.js

@@ -4,7 +4,7 @@ import figure from './image/figure.twig';
 import imageData from './image/image.yml';
 import figureData from './image/figure.yml';
 
-const svgIcons = require.context('../../../images/icons/', true, /\.svg$/);
+const svgIcons = require.context('../../assets/icons/', true, /\.svg$/);
 const icons = [];
 svgIcons.keys().forEach((key) => {
   const icon = key.split('./')[1].split('.')[0];

components/links/link/_link.scss

@@ -0,0 +1,5 @@
+@use '../../../src/stylesheets/mixins' as *;
+
+.link {
+  @include link;
+}

src/components/lists/_list.scss → components/lists/_list.scss

@@ -1,3 +1,5 @@
+@use '../../src/stylesheets/mixins' as *;
+
 ul {
   @include list-reset;
 

src/components/menus/breadcrumbs/_breadcrumbs.scss → components/menus/breadcrumbs/_breadcrumbs.scss

@@ -1,3 +1,5 @@
+@use '../../../src/stylesheets/mixins' as *;
+
 .breadcrumb {
   @include list-reset;
 }

src/components/menus/inline/_inline-menu.scss → components/menus/inline/_inline-menu.scss

@@ -1,3 +1,6 @@
+@use '../../../src/stylesheets/breakpoints.scss' as *;
+@use '../../../src/stylesheets/mixins' as *;
+
 .inline-menu {
   @include list-reset;
 

src/components/menus/main-menu/_00-main-menu.scss → components/menus/main-menu/_00-main-menu.scss

@@ -1,3 +1,6 @@
+@use '../../../src/stylesheets/breakpoints.scss' as *;
+@use '../../../src/stylesheets/mixins' as *;
+
 /* Nav */
 .main-nav {
   display: none;

src/components/menus/main-menu/_01-main-menu-item.scss → components/menus/main-menu/_01-main-menu-item.scss

@@ -1,3 +1,6 @@
+@use '../../../src/stylesheets/breakpoints.scss' as *;
+@use '../../../src/stylesheets/mixins' as *;
+
 /* LI */
 .main-menu__item {
   border-top: 1px solid;

src/components/menus/main-menu/_02-main-menu-link.scss → components/menus/main-menu/_02-main-menu-link.scss

@@ -1,3 +1,6 @@
+@use '../../../src/stylesheets/breakpoints.scss' as *;
+@use '../../../src/stylesheets/mixins' as *;
+
 /* A */
 .main-menu__link {
   background: var(--main-menu-color-link-bg);

src/components/menus/main-menu/_03-main-menu-toggle.scss → components/menus/main-menu/_03-main-menu-toggle.scss

@@ -1,3 +1,6 @@
+@use '../../../src/stylesheets/breakpoints.scss' as *;
+@use '../../../src/stylesheets/mixins' as *;
+
 /* Toggle */
 .toggle-expand {
   @include link;

src/components/menus/social-menu/_social-menu.scss → components/menus/social-menu/_social-menu.scss

@@ -1,3 +1,5 @@
+@use '../../../src/stylesheets/mixins' as *;
+
 .social-menu {
   @include list-reset;
 

src/components/pager/_pager.scss → components/pager/_pager.scss

@@ -1,3 +1,6 @@
+@use '../../src/stylesheets/breakpoints.scss' as *;
+@use '../../src/stylesheets/mixins' as *;
+
 .pager {
   margin: var(--spacing-xl) 0;
 }

src/components/status/_status.scss → components/status/_status.scss

@@ -1,3 +1,6 @@
+@use '../../src/stylesheets/breakpoints.scss' as *;
+@use '../../src/stylesheets/mixins' as *;
+
 .status__list {
   @include list-reset;