From 55415d058650a43955febc09a5aeb1567b3871d0 Mon Sep 17 00:00:00 2001
From: feynman <callin@mullaney.io>
Date: Sun, 30 Jan 2022 22:29:37 -0600
Subject: [PATCH 1/4] feat: intial commit of modal component

---
 components/01-atoms/buttons/button.twig       |   6 +-
 components/02-molecules/modal/_modal.scss     |  96 ++++++++++++++
 components/02-molecules/modal/modal.js        | 118 ++++++++++++++++++
 .../02-molecules/modal/modal.stories.js       |  38 ++++++
 components/02-molecules/modal/modal.twig      |  84 +++++++++++++
 components/02-molecules/modal/modal.yml       |   4 +
 images/icons/close.svg                        |   1 +
 7 files changed, 344 insertions(+), 3 deletions(-)
 create mode 100644 components/02-molecules/modal/_modal.scss
 create mode 100644 components/02-molecules/modal/modal.js
 create mode 100644 components/02-molecules/modal/modal.stories.js
 create mode 100644 components/02-molecules/modal/modal.twig
 create mode 100644 components/02-molecules/modal/modal.yml
 create mode 100644 images/icons/close.svg

diff --git a/components/01-atoms/buttons/button.twig b/components/01-atoms/buttons/button.twig
index ba6c3fa2..b83f380f 100644
--- a/components/01-atoms/buttons/button.twig
+++ b/components/01-atoms/buttons/button.twig
@@ -11,11 +11,11 @@
 
 {% set button_base_class = button_base_class|default('button') %}
 
-{% set additional_attributes = {
+{% set button_attributes = button_attributes|default({
   class: bem(button_base_class, button_modifiers, button_blockname),
-} %}
+}) %}
 
-<button {{ add_attributes(additional_attributes) }}>
+<button {{ add_attributes(button_attributes) }}>
   {% block button_content %}
     {{ button_content }}
   {% endblock %}
diff --git a/components/02-molecules/modal/_modal.scss b/components/02-molecules/modal/_modal.scss
new file mode 100644
index 00000000..2d9f8a9e
--- /dev/null
+++ b/components/02-molecules/modal/_modal.scss
@@ -0,0 +1,96 @@
+// Base modal styles. Additional classes accomodate for custom app implementations.
+.modal__toggle {
+  cursor: pointer;
+}
+
+.modal__pane {
+  background-color: clr(background-section);
+  color: clr(text);
+  left: 0;
+  width: 100vw;
+  opacity: 0;
+  position: fixed;
+  top: 50%;
+  transform: translate(0%, -50%);
+  transition: opacity 300ms;
+  padding: $space;
+  visibility: hidden;
+  z-index: 1000;
+
+  @include large {
+    width: $small;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .modal--active & {
+    opacity: 1;
+    visibility: visible;
+    max-height: 100vh;
+  }
+}
+
+.modal__title {
+  @include wrapper($container-max-width: $small);
+
+  margin-bottom: $space;
+}
+
+.modal__content {
+  @include wrapper($container-max-width: $small);
+
+  > * {
+    width: 100%;
+    margin-bottom: $space;
+  }
+
+  *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.modal__modal-heading {
+  display: flex;
+  flex-flow: row nowrap;
+
+  // Close button
+  > .modal__toggle {
+    @include button-base;
+    @include button-color-primary;
+    @include button-medium;
+
+    cursor: pointer;
+    position: absolute;
+    right: 0;
+    top: $space-quintuple * -1;
+    min-height: $space-quadruple;
+
+    .icon {
+      fill: clr(text);
+      stroke: clr(text);
+      stroke-linecap: round;
+      position: relative;
+      top: $space-one-fourth;
+      right: 0;
+      width: $space;
+      height: $space;
+    }
+  }
+}
+
+.modal__overlay {
+  background-color: clr(background);
+  color: clr(text);
+  display: none;
+  left: 0;
+  position: fixed;
+  top: 0;
+  opacity: 0.45;
+
+  &--active {
+    display: block;
+    width: 100vw;
+    height: 100vh;
+    z-index: 999;
+  }
+}
diff --git a/components/02-molecules/modal/modal.js b/components/02-molecules/modal/modal.js
new file mode 100644
index 00000000..13b373cc
--- /dev/null
+++ b/components/02-molecules/modal/modal.js
@@ -0,0 +1,118 @@
+Drupal.behaviors.modal = {
+  attach(context) {
+    // Variables
+    const modals = context.querySelector('.modal');
+    let activeModal = context.querySelector('.modal--active');
+
+    // Check if an element is completely empty.
+    function isEmpty(node) {
+      return node.innerHTML.trim() === '';
+    }
+
+    // Toggle aria-[anything] attribute from true / false.
+    function toggleAria(el, aria) {
+      let x = el.getAttribute(`aria-${aria}`);
+      if (x === 'true') {
+        x = 'false';
+      } else {
+        x = 'true';
+      }
+      el.setAttribute(`aria-${aria}`, x);
+    }
+
+    // Toggle tabindex focus attribute.
+    function toggletabIndex(el) {
+      let x = el.getAttribute('tabindex');
+      if (x === '-1') {
+        x = '1';
+      } else {
+        x = '-1';
+      }
+      el.setAttribute('tabindex', x);
+    }
+
+    // Toggle Modal
+    function toggleModal(modal) {
+      const overlay = modal.querySelector('.modal__overlay');
+      const modalModalPane = modal.querySelector('.modal__pane');
+      if (overlay) {
+        overlay.classList.toggle('modal__overlay--active');
+      }
+      modal.classList.toggle('modal--active');
+      activeModal = context.querySelector('.modal--active');
+      toggleAria(modalModalPane, 'hidden');
+      toggleAria(modal, 'expanded');
+      toggletabIndex(modalModalPane);
+    }
+
+    // AJAX Request data from url + CSS selector.
+    function ajaxRequest(request, url, selector) {
+      let response = '';
+      request.onreadystatechange = function processResponse() {
+        if (request.status === 200) {
+          const resp = request.responseText;
+          const parser = new DOMParser();
+          const htmlDoc = parser.parseFromString(resp, 'text/html');
+          const remoteselector = htmlDoc.querySelectorAll(selector);
+
+          response = remoteselector[0].innerHTML;
+        } else {
+          response = `<p>Could not process request. Error code: ${request.status}</p>`;
+        }
+      };
+      request.open('GET', url, false);
+      request.send();
+
+      return response;
+    }
+
+    if (modals) {
+      [modals].forEach((modal) => {
+        const modalToggle = modal.querySelectorAll('.modal__toggle');
+        const modalModalContent = modal.querySelector('.modal__content');
+        const modalOverlay = modal.querySelector('.modal__overlay');
+
+        modalToggle.forEach((toggle) => {
+          toggle.addEventListener('click', (e) => {
+            const toggleChild = toggle.children[0];
+            e.preventDefault();
+
+            // First check if the child of toggle is a link.
+            // Attempt to request the <main> from the link's href.
+            if (
+              typeof toggleChild !== 'undefined' &&
+              toggleChild.tagName === 'A' &&
+              toggleChild.getAttribute('href') !== null
+            ) {
+              e.preventDefault();
+              const request = new XMLHttpRequest();
+              const url = toggleChild.getAttribute('href');
+              const response = ajaxRequest(
+                request,
+                url,
+                '#storybook-preview-iframe',
+              );
+              modalModalContent.innerHTML = response;
+            }
+            // On trigger the modal if content is present.
+            if (isEmpty(modalModalContent) === false) {
+              toggleModal(modal);
+            }
+          });
+        });
+        [modalOverlay].forEach((overlay) => {
+          overlay.addEventListener('click', () => {
+            toggleModal(modal);
+          });
+        });
+      });
+    }
+
+    // Keyboard controls for closing the modal
+    context.addEventListener('keyup', (e) => {
+      if (e.key === 'Escape') {
+        toggleModal(activeModal);
+      }
+    });
+  },
+};
diff --git a/components/02-molecules/modal/modal.stories.js b/components/02-molecules/modal/modal.stories.js
new file mode 100644
index 00000000..2f419018
--- /dev/null
+++ b/components/02-molecules/modal/modal.stories.js
@@ -0,0 +1,38 @@
+import modalTwig from './modal.twig';
+
+import modalData from './modal.yml';
+
+import './modal';
+
+/**
+ * Storybook Definition.
+ */
+export default {
+  title: 'Molecules/Modal',
+};
+
+export const modalButton = () => {
+  return modalTwig({ ...modalData });
+};
+
+export const modalAjaxLink = () => {
+  return modalTwig({
+    ...modalData,
+    modal__toggle:
+      '<a href="http://localhost:6006/?path=/story/molecules-modal--modal-ajax-link">Ajax modal data</a>',
+  });
+};
+
+export const modalText = () => {
+  return modalTwig({
+    ...modalData,
+    modal__toggle: '<p>Plain Ol Text</p>',
+  });
+};
+
+export const modalMedia = () => {
+  return modalTwig({
+    ...modalData,
+    modal__toggle: '<img src="https://placeimg.com/320/180/any">',
+  });
+};
diff --git a/components/02-molecules/modal/modal.twig b/components/02-molecules/modal/modal.twig
new file mode 100644
index 00000000..3436a926
--- /dev/null
+++ b/components/02-molecules/modal/modal.twig
@@ -0,0 +1,84 @@
+{% set modal__base_class = 'modal' %}
+{% set modal__id = modal__id|default() %}
+{% set modal__modifiers = modal__modifiers|default([]) %}
+
+{% if modal__id is empty %}
+	{% set modal__id = random(100000) %}
+{% endif %}
+
+{% set modal_attributes = modal_attributes|default({
+  'class': bem(modal__base_class, modal__modifiers, modal__blockname),
+  'aria-modal': 'true',
+  'aria-expanded': 'false',
+}) %}
+
+{% set modal__pane_attributes = modal__pane_attributes|default({
+  'class': bem('pane', modal__modifiers, modal__base_class),
+  'tabindex': '-1',
+  'aria-hidden': 'true',
+  'aria-labelledby': modal__base_class ~ '-' ~ modal__id ~ '-label',
+  'aria-describedby': modal__base_class ~ '-' ~ modal__id ~ '-heading',
+  'role': 'dialog',
+}) %}
+
+{% set modal__heading_attributes = modal__heading_attributes|default({
+  'class': bem('title', [], modal__base_class),
+  'id': modal__base_class ~ '-' ~ modal__id ~ '-heading',
+}) %}
+
+{% set modal__toggle_attributes = modal__toggle_attributes|default({
+  'class': bem('toggle', [], modal__base_class),
+  'id': modal__base_class ~ '-' ~ modal__id ~ '-label',
+}) %}
+
+{% set modal__close_attributes = modal__close_attributes|default({
+  'class': bem('toggle', [], modal__base_class),
+  'aria-label': 'Close Modal',
+}) %}
+
+<div {{ add_attributes(modal_attributes) }}>
+  <div {{ add_attributes(modal__toggle_attributes) }}>
+    {% block modal__toggle %}
+      {% if modal__toggle is empty %}
+        {% include "@atoms/buttons/button.twig" with {
+          button_content: modal__toggle__content,
+        } %}
+        {% else %}
+          {{ modal__toggle }}
+      {% endif %}
+    {% endblock %}
+  </div>
+
+  <div {{ add_attributes(modal__pane_attributes) }}>
+
+    <div {{ bem('modal-heading', modal__modifiers, modal__base_class) }}>
+      {% include "@atoms/text/headings/_heading.twig" with {
+        heading_base_class: 'title',
+        heading_modifiers: modal__heading_modifiers,
+        heading_blockname: modal__base_class,
+        heading_level: 2,
+        heading: modal__heading,
+        heading_attributes: modal__heading_attributes,
+      } %}
+
+      {% embed "@atoms/buttons/button.twig" with {
+        button_attributes: modal__close_attributes,
+      } %}
+        {% block button_content %}
+          {% include "@atoms/images/icons/_icon.twig" with {
+            icon_name: 'close',
+          } %}
+        {% endblock %}
+      {% endembed %}
+    </div>
+
+    <div {{ bem('content', modal__modifiers, modal__base_class) }}>
+      {% block modal__content %}
+        {% include "@atoms/text/text/01-paragraph.twig" with {
+          paragraph_content: modal_content,
+        } %}
+      {% endblock %}
+    </div>
+  </div>
+  <div {{ bem('overlay', modal__modifiers, modal__base_class) }}></div>
+</div>
diff --git a/components/02-molecules/modal/modal.yml b/components/02-molecules/modal/modal.yml
new file mode 100644
index 00000000..1a067955
--- /dev/null
+++ b/components/02-molecules/modal/modal.yml
@@ -0,0 +1,4 @@
+modal__toggle__content: 'Show Modal'
+modal__heading: 'This is an example of a modal'
+modal__close__content: 'Close Modal'
+modal_content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porttitor commodo magna nec iaculis. Duis ullamcorper sed lorem vehicula vulputate. Aenean condimentum augue libero, quis finibus libero hendrerit sit amet. Integer ullamcorper aliquet nisl, in ullamcorper augue ullamcorper sit amet. Quisque interdum nunc at egestas lobortis. Phasellus ante lorem, posuere id tortor eget, venenatis sagittis nunc. Aenean luctus tincidunt consequat. Donec vulputate, elit sit amet molestie pulvinar, eros lectus faucibus metus, id rutrum libero ipsum et leo. Curabitur egestas libero sit amet risus aliquet efficitur. Etiam suscipit posuere tortor. Pellentesque tincidunt justo quis quam aliquet varius. <a href="#" title="test-focus">Example link to test modal focus</a>'
diff --git a/images/icons/close.svg b/images/icons/close.svg
new file mode 100644
index 00000000..43c39b44
--- /dev/null
+++ b/images/icons/close.svg
@@ -0,0 +1 @@
+<svg height="329pt" viewBox="0 0 329.26933 329" width="329pt" xmlns="http://www.w3.org/2000/svg"><path d="m194.800781 164.769531 128.210938-128.214843c8.34375-8.339844 8.34375-21.824219 0-30.164063-8.339844-8.339844-21.824219-8.339844-30.164063 0l-128.214844 128.214844-128.210937-128.214844c-8.34375-8.339844-21.824219-8.339844-30.164063 0-8.34375 8.339844-8.34375 21.824219 0 30.164063l128.210938 128.214843-128.210938 128.214844c-8.34375 8.339844-8.34375 21.824219 0 30.164063 4.15625 4.160156 9.621094 6.25 15.082032 6.25 5.460937 0 10.921875-2.089844 15.082031-6.25l128.210937-128.214844 128.214844 128.214844c4.160156 4.160156 9.621094 6.25 15.082032 6.25 5.460937 0 10.921874-2.089844 15.082031-6.25 8.34375-8.339844 8.34375-21.824219 0-30.164063zm0 0"/></svg>

From 85f780257a2c17b2f02c45e8f91432794e58cf1b Mon Sep 17 00:00:00 2001
From: feynman <callin@mullaney.io>
Date: Sun, 30 Jan 2022 23:04:39 -0600
Subject: [PATCH 2/4] feat: position the close button

---
 components/02-molecules/modal/_modal.scss | 25 +++++++++++------------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/components/02-molecules/modal/_modal.scss b/components/02-molecules/modal/_modal.scss
index 2d9f8a9e..73c94a21 100644
--- a/components/02-molecules/modal/_modal.scss
+++ b/components/02-molecules/modal/_modal.scss
@@ -54,7 +54,7 @@
   flex-flow: row nowrap;
 
   // Close button
-  > .modal__toggle {
+  .modal__toggle {
     @include button-base;
     @include button-color-primary;
     @include button-medium;
@@ -62,19 +62,18 @@
     cursor: pointer;
     position: absolute;
     right: 0;
-    top: $space-quintuple * -1;
-    min-height: $space-quadruple;
+    top: 0;
+  }
 
-    .icon {
-      fill: clr(text);
-      stroke: clr(text);
-      stroke-linecap: round;
-      position: relative;
-      top: $space-one-fourth;
-      right: 0;
-      width: $space;
-      height: $space;
-    }
+  .icon {
+    fill: clr(text);
+    stroke: clr(text);
+    stroke-linecap: round;
+    position: relative;
+    top: $space-one-fourth;
+    right: 0;
+    width: $space;
+    height: $space;
   }
 }
 

From e4a3d58f30e0dcbf9704dd9b04432e2fc60b662c Mon Sep 17 00:00:00 2001
From: ryanhagerty <ryan@fourkitchens.com>
Date: Thu, 17 Feb 2022 10:33:47 -0500
Subject: [PATCH 3/4] feat: add keyboard trap to modal for ada compliance

---
 components/02-molecules/modal/modal.js | 32 ++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/components/02-molecules/modal/modal.js b/components/02-molecules/modal/modal.js
index 13b373cc..3c57bca9 100644
--- a/components/02-molecules/modal/modal.js
+++ b/components/02-molecules/modal/modal.js
@@ -3,6 +3,8 @@ Drupal.behaviors.modal = {
     // Variables
     const modals = context.querySelector('.modal');
     let activeModal = context.querySelector('.modal--active');
+    const focusableElements =
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
 
     // Check if an element is completely empty.
     function isEmpty(node) {
@@ -20,6 +22,35 @@ Drupal.behaviors.modal = {
       el.setAttribute(`aria-${aria}`, x);
     }
 
+    // Traps keyboard focus when modal is open for ADA compliance
+    function trapKeyboard(modal) {
+      const firstFocusableElement =
+        modal.querySelectorAll(focusableElements)[0];
+      const focusableContent = modal.querySelectorAll(focusableElements);
+      const lastFocusableElement =
+        focusableContent[focusableContent.length - 1];
+
+      modal.addEventListener('keydown', (e) => {
+        const isTabPressed = e.key === 'Tab' || e.keyCode === 9;
+
+        if (!isTabPressed) {
+          return;
+        }
+
+        if (e.shiftKey) {
+          if (document.activeElement === firstFocusableElement) {
+            lastFocusableElement.focus();
+            e.preventDefault();
+          }
+        } else if (document.activeElement === lastFocusableElement) {
+          firstFocusableElement.focus();
+          e.preventDefault();
+        }
+      });
+
+      firstFocusableElement.focus();
+    }
+
     // Toggle tabindex focus attribute.
     function toggletabIndex(el) {
       let x = el.getAttribute('tabindex');
@@ -42,6 +73,7 @@ Drupal.behaviors.modal = {
       activeModal = context.querySelector('.modal--active');
       toggleAria(modalModalPane, 'hidden');
       toggleAria(modal, 'expanded');
+      trapKeyboard(modalModalPane);
       toggletabIndex(modalModalPane);
     }
 

From 36eccedeea14bdb68f8a6d7cb3b5ddd44504382e Mon Sep 17 00:00:00 2001
From: Callin Mullaney <callin@mullaney.io>
Date: Sat, 4 Jun 2022 15:29:18 -0500
Subject: [PATCH 4/4] feat: twig comments and fixed color contrasting

---
 .../00-base/01-colors/_colors-vars.scss       | 16 ++++++----
 components/00-base/01-colors/colors-used.scss | 16 ++++++----
 components/00-base/01-colors/colors.yml       |  4 +++
 components/01-atoms/buttons/_buttons.scss     |  4 +--
 components/01-atoms/links/link/_link.scss     | 13 +++++++--
 .../01-atoms/text/headings/_heading.twig      |  7 +++--
 components/02-molecules/modal/_modal.scss     | 22 +++++++-------
 .../02-molecules/modal/modal.stories.js       |  3 +-
 components/02-molecules/modal/modal.twig      | 29 +++++++++++++++++--
 package-lock.json                             | 10 +++++--
 package.json                                  |  4 +--
 system.emulsify.json                          |  5 ++++
 12 files changed, 97 insertions(+), 36 deletions(-)

diff --git a/components/00-base/01-colors/_colors-vars.scss b/components/00-base/01-colors/_colors-vars.scss
index 236f0b3a..04e896a2 100644
--- a/components/00-base/01-colors/_colors-vars.scss
+++ b/components/00-base/01-colors/_colors-vars.scss
@@ -11,13 +11,19 @@ $gray-light: #888;
 $gray: #666;
 $gray-dark: #4c4c4c;
 $gray-darker: #333;
+$gray-darkest: #222;
 $black: black;
 
 // Status
-$yellow-light: #f9fb93;
-$red-light: #fbe3e4;
-$green-light: #cfefc2;
+$yellow: #ecef26;
+$yellow-light: #f6f886;
+$red: #ca242c;
+$red-light: #fcd0d2;
+$green: #278002;
+$green-light: #a6eb89;
 
 // Project
-$purple: #610c63;
-$blue: #005de0;
+$purple: #5c0a5d;
+$purple-light: #912892;
+$blue: #0852ba;
+$blue-light: #61a0f7;
diff --git a/components/00-base/01-colors/colors-used.scss b/components/00-base/01-colors/colors-used.scss
index 22f9eda5..6ec984f7 100644
--- a/components/00-base/01-colors/colors-used.scss
+++ b/components/00-base/01-colors/colors-used.scss
@@ -8,7 +8,9 @@ $defaultColors: (
   background: colors-vars.$white,
   background-section: colors-vars.$gray-lightest,
   primary: colors-vars.$blue,
+  primary-alt: colors-vars.$blue-light,
   secondary: colors-vars.$purple,
+  secondary-alt: colors-vars.$purple-light,
   accent: colors-vars.$gray-dark,
   accent-high: colors-vars.$black,
   highlight: colors-vars.$gray-lighter,
@@ -24,17 +26,19 @@ $darkColors: (
   text-inverse: colors-vars.$gray,
   background: colors-vars.$gray,
   background-inverse: colors-vars.$gray-light,
-  background-section: colors-vars.$gray-dark,
-  primary: colors-vars.$blue,
-  secondary: colors-vars.$purple,
+  background-section: colors-vars.$gray-darkest,
+  primary: colors-vars.$blue-light,
+  primary-alt: colors-vars.$blue,
+  secondary: colors-vars.$purple-light,
+  secondary-alt: colors-vars.$purple,
   accent: colors-vars.$gray-lightest,
   accent-high: colors-vars.$white,
   highlight: colors-vars.$gray-dark,
   highlight-high: colors-vars.$gray-darker,
   muted: colors-vars.$gray-darker,
-  warning: colors-vars.$yellow-light,
-  error: colors-vars.$red-light,
-  message: colors-vars.$green-light,
+  warning: colors-vars.$yellow,
+  error: colors-vars.$red,
+  message: colors-vars.$green,
 );
 
 ///////////
diff --git a/components/00-base/01-colors/colors.yml b/components/00-base/01-colors/colors.yml
index a6e98adc..6cb338a8 100644
--- a/components/00-base/01-colors/colors.yml
+++ b/components/00-base/01-colors/colors.yml
@@ -5,7 +5,9 @@ palettes:
       - name: 'Text'
       - name: 'Background'
       - name: 'Primary'
+      - name: 'Primary Alt'
       - name: 'Secondary'
+      - name: 'Secondary Alt'
       - name: 'Accent'
       - name: 'Accent High'
       - name: 'Highlight'
@@ -19,7 +21,9 @@ palettes:
       - name: 'Text'
       - name: 'Background'
       - name: 'Primary'
+      - name: 'Primary Alt'
       - name: 'Secondary'
+      - name: 'Secondary Alt'
       - name: 'Accent'
       - name: 'Accent High'
       - name: 'Highlight'
diff --git a/components/01-atoms/buttons/_buttons.scss b/components/01-atoms/buttons/_buttons.scss
index 5df5faa5..7fe79aae 100644
--- a/components/01-atoms/buttons/_buttons.scss
+++ b/components/01-atoms/buttons/_buttons.scss
@@ -9,13 +9,13 @@ $button-colors: (
   ),
   primary-dark: (
     text: clr(text),
-    bg: clr(primary),
+    bg: clr(primary-alt),
     text-hover: clr(text),
     bg-hover: clr(highlight-high),
   ),
   secondary: (
     text: clr(text-inverse),
-    bg: clr(secondary),
+    bg: clr(secondary-alt),
     text-hover: clr(secondary),
     bg-hover: clr(highlight),
   ),
diff --git a/components/01-atoms/links/link/_link.scss b/components/01-atoms/links/link/_link.scss
index 1637caf3..3fa823ee 100644
--- a/components/01-atoms/links/link/_link.scss
+++ b/components/01-atoms/links/link/_link.scss
@@ -1,11 +1,20 @@
 @mixin link {
-  color: clr(accent);
+  color: clr(primary);
 
   &:hover {
-    color: clr(accent-high);
+    color: clr(primary-alt);
   }
 }
 
 .link {
   @include link;
 }
+
+a {
+  @include link;
+
+  /* A elements that don't have a class get default styles */
+  &:not([class]) {
+    text-decoration-skip-ink: auto;
+  }
+}
diff --git a/components/01-atoms/text/headings/_heading.twig b/components/01-atoms/text/headings/_heading.twig
index 367b2cba..8dfbac80 100644
--- a/components/01-atoms/text/headings/_heading.twig
+++ b/components/01-atoms/text/headings/_heading.twig
@@ -2,7 +2,7 @@
 /**
  * Available variables:
  * - heading_level - the header level 1-6 (produces h1, h2, etc.)
- *
+ * - heading__attributes - array of attributes and their values
  * - heading_base_class - the base class
  * - heading_modifiers - array of modifiers to add to the base classname
  * - heading_blockname - blockname prepended to the base classname
@@ -17,8 +17,11 @@
  */
 #}
 {% set heading_base_class = heading_base_class|default('h' ~ heading_level) %}
+{% set heading__attributes = heading__attributes|default({
+  'class': bem(heading_base_class, heading_modifiers, heading_blockname),
+}) %}
 
-<h{{ heading_level }} {{ bem(heading_base_class, heading_modifiers, heading_blockname) }}>
+<h{{ heading_level }} {{ add_attributes(heading__attributes) }}>
   {% if heading_url %}
     {% include "@atoms/links/link/link.twig" with {
       "link_content": heading,
diff --git a/components/02-molecules/modal/_modal.scss b/components/02-molecules/modal/_modal.scss
index 73c94a21..3c59c399 100644
--- a/components/02-molecules/modal/_modal.scss
+++ b/components/02-molecules/modal/_modal.scss
@@ -1,4 +1,4 @@
-// Base modal styles. Additional classes accomodate for custom app implementations.
+// Base modal styles. Additional classes accommodate for custom app implementations.
 .modal__toggle {
   cursor: pointer;
 }
@@ -7,26 +7,26 @@
   background-color: clr(background-section);
   color: clr(text);
   left: 0;
-  width: 100vw;
   opacity: 0;
+  padding: $space;
   position: fixed;
   top: 50%;
   transform: translate(0%, -50%);
   transition: opacity 300ms;
-  padding: $space;
   visibility: hidden;
+  width: 100vw;
   z-index: 1000;
 
   @include large {
-    width: $small;
     left: 50%;
     transform: translate(-50%, -50%);
+    width: $small;
   }
 
   .modal--active & {
+    max-height: 100vh;
     opacity: 1;
     visibility: visible;
-    max-height: 100vh;
   }
 }
 
@@ -40,8 +40,8 @@
   @include wrapper($container-max-width: $small);
 
   > * {
-    width: 100%;
     margin-bottom: $space;
+    width: 100%;
   }
 
   *:last-child {
@@ -67,13 +67,13 @@
 
   .icon {
     fill: clr(text);
+    height: $space;
+    position: relative;
+    right: 0;
     stroke: clr(text);
     stroke-linecap: round;
-    position: relative;
     top: $space-one-fourth;
-    right: 0;
     width: $space;
-    height: $space;
   }
 }
 
@@ -82,14 +82,14 @@
   color: clr(text);
   display: none;
   left: 0;
+  opacity: 0.45;
   position: fixed;
   top: 0;
-  opacity: 0.45;
 
   &--active {
     display: block;
-    width: 100vw;
     height: 100vh;
+    width: 100vw;
     z-index: 999;
   }
 }
diff --git a/components/02-molecules/modal/modal.stories.js b/components/02-molecules/modal/modal.stories.js
index 2f419018..b831ad05 100644
--- a/components/02-molecules/modal/modal.stories.js
+++ b/components/02-molecules/modal/modal.stories.js
@@ -33,6 +33,7 @@ export const modalText = () => {
 export const modalMedia = () => {
   return modalTwig({
     ...modalData,
-    modal__toggle: '<img src="https://placeimg.com/320/180/any">',
+    modal__toggle:
+      '<img src="https://placeimg.com/320/180/any" alt="Example image to trigger the modal">',
   });
 };
diff --git a/components/02-molecules/modal/modal.twig b/components/02-molecules/modal/modal.twig
index 3436a926..91d16410 100644
--- a/components/02-molecules/modal/modal.twig
+++ b/components/02-molecules/modal/modal.twig
@@ -1,3 +1,26 @@
+{#
+ # Available variables:
+ # - modal__id - unique id of the wrapper.
+ # - modal__base_class - base classname of the wrapper.
+ # - modal__modifiers - array of modifiers to add to the base classname of the wrapper.
+ # - modal__blockname - blockname prepended to the base classname of the wrapper(s) and each component.
+ #
+ # - modal__attributes - array of attributes and their values for the wrapper.
+ # - modal__toggle_attributes - array of attributes and their values for the toggle.
+ # - modal__close_attributes - array of attributes and their values for the close button.
+ # - modal__heading_attributes - array of attributes and their values for the heading.
+ #
+ # - modal__toggle__content - button content if block is not replaced.
+ #
+ # - modal__heading_modifiers - array of modifiers to add to the base classname of the modal heading.
+ # - modal__heading - Main heading and label of the modal when open.
+ #
+ # Available blocks:
+ # - modal__toggle - Content that triggers the modal.
+ # - modal__content - Content of the modal when open.
+ # - button_content - Content of the modals close button. Defaults to close icon.
+ #}
+
 {% set modal__base_class = 'modal' %}
 {% set modal__id = modal__id|default() %}
 {% set modal__modifiers = modal__modifiers|default([]) %}
@@ -6,7 +29,7 @@
 	{% set modal__id = random(100000) %}
 {% endif %}
 
-{% set modal_attributes = modal_attributes|default({
+{% set modal__attributes = modal__attributes|default({
   'class': bem(modal__base_class, modal__modifiers, modal__blockname),
   'aria-modal': 'true',
   'aria-expanded': 'false',
@@ -36,7 +59,7 @@
   'aria-label': 'Close Modal',
 }) %}
 
-<div {{ add_attributes(modal_attributes) }}>
+<div {{ add_attributes(modal__attributes) }}>
   <div {{ add_attributes(modal__toggle_attributes) }}>
     {% block modal__toggle %}
       {% if modal__toggle is empty %}
@@ -58,7 +81,7 @@
         heading_blockname: modal__base_class,
         heading_level: 2,
         heading: modal__heading,
-        heading_attributes: modal__heading_attributes,
+        heading__attributes: modal__heading_attributes,
       } %}
 
       {% embed "@atoms/buttons/button.twig" with {
diff --git a/package-lock.json b/package-lock.json
index 5dfd7731..edc05266 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,13 @@
 {
   "name": "compound",
-  "version": "1.0.0",
+  "version": "0.0.0-development",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "compound",
-      "version": "1.0.0",
+      "version": "0.0.0-development",
+      "hasInstallScript": true,
       "license": "ISC",
       "dependencies": {
         "@babel/eslint-parser": "^7.12.17",
@@ -21365,6 +21366,11 @@
         "safer-buffer": "^2.0.2",
         "tweetnacl": "~0.14.0"
       },
+      "bin": {
+        "sshpk-conv": "bin/sshpk-conv",
+        "sshpk-sign": "bin/sshpk-sign",
+        "sshpk-verify": "bin/sshpk-verify"
+      },
       "engines": {
         "node": ">=0.10.0"
       }
diff --git a/package.json b/package.json
index 273462e0..e7821804 100644
--- a/package.json
+++ b/package.json
@@ -19,8 +19,8 @@
     "prettier-fix": "prettier \"./components\" --write --ignore-unknown",
     "sass": "sass",
     "semantic-release": "semantic-release",
-    "storybook": "start-storybook --ci -s images,dist -p 6006",
-    "storybook:build": "npm run build && build-storybook -s images,dist -o .out",
+    "storybook": "start-storybook --ci -s ./dist,./images,./images/icons -p 6006",
+    "storybook:build": "npm run build && build-storybook -s ./dist,./images,./images/icons -o .out",
     "storybook:deploy": "storybook-to-ghpages -o .out",
     "test": "echo \"Error: no test specified\" && exit 1",
     "visreg": "percy storybook http://localhost:6006",
diff --git a/system.emulsify.json b/system.emulsify.json
index d4daa2bb..8f34a703 100644
--- a/system.emulsify.json
+++ b/system.emulsify.json
@@ -168,6 +168,11 @@
           "required": true,
           "dependency": ["images", "links", "lists"]
         },
+        {
+          "name": "modal",
+          "structure": "molecules",
+          "dependency": ["buttons", "text", "images"]
+        },
         {
           "name": "pager",
           "structure": "molecules",