Add dialog component

package.json

@@ -47,6 +47,7 @@
   "dependencies": {
     "@fancyapps/ui": "^4.0.26",
     "@tailwindcss/forms": "^0.5.0",
+    "a11y-dialog": "^8.0.1",
     "swiper": "^8.0.7",
     "tailwindcss": "^2.2.19"
   },

src/js/components/_Dialog.js

@@ -0,0 +1,15 @@
+import A11yDialog from 'a11y-dialog'
+
+const initDialog = (dialogElement) => {
+  const dialog = new A11yDialog(dialogElement)
+
+  // scroll lock
+  dialog
+    .on('show', () => document.body.classList.add('overflow-hidden'))
+    .on('hide', () => document.body.classList.remove('overflow-hidden'))
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  const dialogs = document.querySelectorAll('.dialog-container')
+  dialogs.forEach(initDialog)
+})

src/js/scripts.js

@@ -4,3 +4,4 @@ require('./vendors/_swiper.js')
 require('./components/_HeroMedia.js')
 require('./components/_BlockAccordion.js')
 require('./components/_HeaderInternal.js')
+require('./components/_Dialog.js')

src/scss/_components.scss

@@ -14,6 +14,7 @@
 @import 'components/BlockTeaser';
 @import 'components/BlockText';
 @import 'components/BlockVideoEmbed';
+@import 'components/Dialog';
 @import 'components/FooterInternal';
 @import 'components/HeroLarge';
 @import 'components/HeroMedia';

src/scss/components/_Dialog.scss

@@ -0,0 +1,19 @@
+.Dialog {
+  // Make sure the dialog container and all its descendants are not visible and not focusable when it is hidden
+  .dialog-container[aria-hidden='true'] {
+    display: none;
+  }
+
+  .dialog-overlay,
+  .dialog-box {
+    @apply animate-fadeIn;
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+  }
+
+  .button-close {
+    top: -2rem;
+  }
+}

storybook/stories/components/Dialog/Dialog.js

@@ -0,0 +1,40 @@
+import { IconCloseTemplate } from '../Icons/IconClose'
+
+export const DialogTemplate = ({
+  dialogId,
+  dialogTrigger,
+  ariaLabelledBy = '',
+  content,
+  overlayClose = 'true',
+  dialogBoxClass = '',
+}) => {
+  const template = `
+    <div class="Dialog">
+        <span data-a11y-dialog-show="${dialogId}">${
+    dialogTrigger ? dialogTrigger : 'Dialog trigger'
+  }</span>  
+        <div id="${dialogId}"
+        aria-labelledby="${
+          ariaLabelledBy ? ariaLabelledBy : ''
+        }" aria-hidden='true'
+        class="dialog-container fixed top-0 left-0 z-50 flex w-full h-full overflow-auto" >
+            <div class="dialog-overlay ${
+              overlayClose ? 'data-a11y-dialog-hide' : ''
+            }
+            bg-gray-dark bg-opacity-90 fixed top-0 left-0 w-full h-full"></div> 
+            <div class="container m-auto">
+                <div role="document" class="dialog-box ${
+                  dialogBoxClass ? dialogBoxClass : ''
+                } relative m-auto bg-white">
+                    <button data-a11y-dialog-hide aria-label="Close dialog" 
+                    class="button-close absolute right-0 flex-shrink-0 text-white focus:outline-none focus:ring-2">
+                        ${IconCloseTemplate({})}
+                    </button>           
+                    ${content}
+                </div> 
+            </div> 
+        </div>
+    </div>
+  `
+  return template
+}

storybook/stories/components/Dialog/Dialog.stories.js

@@ -0,0 +1,81 @@
+import { DialogTemplate } from './Dialog'
+
+export default {
+  title: 'Components/Dialog',
+  excludeStories: /.*Data$/,
+  decorators: [
+    (Story) => `<div id="storyRoot" class="absolute inset-0">${Story()}</div>`,
+  ],
+  argTypes: {
+    dialogId: {
+      type: { name: 'string', required: true },
+      description: 'Unique dialog id (needed for instantiation)',
+    },
+    dialogTrigger: {
+      type: { name: 'string', required: true },
+      description: 'Custom trigger',
+    },
+    ariaLabelledBy: {
+      type: { name: 'string', required: false },
+      description: 'Id of a dialog title element to define an accessible name',
+    },
+    content: {
+      type: { name: 'string', required: true },
+      description: 'Dialog content',
+    },
+    overlayClose: {
+      type: { name: 'boolean', required: false },
+      description:
+        'Determines whether clicking the overlay will close the dialog',
+      table: {
+        defaultValue: { summary: true },
+      },
+    },
+    dialogBoxClass: {
+      type: { name: 'string', required: false },
+      description: 'Content wrapper class',
+    },
+  },
+  parameters: {
+    html: {
+      root: '#storyRoot',
+    },
+    viewMode: 'docs',
+    docs: {
+      inlineStories: false,
+      iframeHeight: 1050,
+      description: {
+        component:
+          'Accessible dialog (modal) window based on a11y-dialog library.',
+      },
+    },
+  },
+}
+
+export const DialogData = {
+  dialogId: 'block-dialog',
+  dialogTrigger: '<button>Custom trigger</button>',
+  ariaLabelledBy: 'block-dialog-title',
+  content: `
+  <div class="p-3 sm:p-5">
+    <h3 id="block-dialog-title">Dialog title</h3>
+    <hr aria-hidden="true" class="bg-gray-light-mid w-full h-2px border-0 my-3"/>
+    <div class="py-3 max-h-xl overflow-auto">
+        <p class="py-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p class="py-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p class="py-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p class="py-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p class="py-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </div>
+    <div class="my-3">
+        <a href="#" target="" rel="" class="group cursor-pointer -default underline text-theme-color can-hover:hover:text-theme-color-hover">
+            <span class="break-words">Explore</span> 
+        </a>
+    </div>
+</div>
+`,
+  dialogBoxClass: 'max-w-2xl',
+}
+
+export const Default = DialogTemplate.bind({})
+Default.args = DialogData