@dta-au/civictheme-twig 1.13.1

package/components/00-base/flyout/flyout.js

@@ -0,0 +1,207 @@
+/**
+ * @file
+ * Flyout component.
+ *
+ * Allows introducing "fly out" behaviour to a block-level HTML element on the
+ * page by adding data attributes to elements. The component does not provide
+ * any styles, except for z-index configuration and direction transformations.
+ *
+ * Also, provides a trigger to close a single (currently opened) panel and
+ * another trigger to close all open panels.
+ */
+function CivicThemeFlyout(el) {
+  if (el.getAttribute('data-flyout') === 'true' || this.el) {
+    return;
+  }
+
+  // Find all open triggers.
+  const openTriggers = document.querySelectorAll('[data-flyout-open-trigger]');
+  if (!openTriggers.length) {
+    return;
+  }
+
+  // Find an open trigger.
+  this.openTrigger = this.findOpenTrigger(openTriggers, el);
+  if (!this.openTrigger) {
+    return;
+  }
+
+  this.el = el;
+
+  // Find "close trigger", but only search among triggers that are not a part
+  // of descendant flyouts.
+  this.closeTriggers = Array.from(this.el.querySelectorAll('[data-flyout-close-trigger]'));
+  this.closeTriggers = this.closeTriggers.filter((item) => (item.closest('[data-flyout]') === this.el));
+
+  this.closeAllTriggers = Array.from(this.el.querySelectorAll('[data-flyout-close-all-trigger]'));
+  this.closeAllTriggers = this.closeAllTriggers.filter((item) => (item.closest('[data-flyout]') === this.el));
+  this.panel = this.el.querySelector('[data-flyout-panel]');
+  this.el.expanded = this.el.hasAttribute('data-flyout-expanded');
+  this.duration = this.el.hasAttribute('data-flyout-duration') ? parseInt(this.el.getAttribute('data-flyout-duration'), 10) : 500;
+  this.focusTargets = this.el.hasAttribute('data-flyout-focus') ? this.el.getAttribute('data-flyout-focus').split(',').filter((i) => i) : [];
+
+  // Add event listener to element.
+  if (this.openTrigger) {
+    this.openTrigger.addEventListener('click', this.clickEvent.bind(this));
+    this.openTrigger.expand = true;
+  }
+
+  if (this.closeTriggers) {
+    this.closeTriggers.forEach((trigger) => {
+      trigger.addEventListener('click', this.clickEvent.bind(this));
+      trigger.expand = false;
+    });
+  }
+
+  if (this.closeAllTriggers) {
+    this.closeAllTriggers.forEach((trigger) => {
+      trigger.addEventListener('click', this.closeAllTriggerClickEvent.bind(this));
+    });
+  }
+
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'Tab') {
+      const flyoutElements = document.querySelectorAll('[data-flyout]');
+      flyoutElements.forEach((flyout) => {
+        const focusableElements = flyout.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+        const firstFocusable = focusableElements[0];
+        const lastFocusable = focusableElements[focusableElements.length - 1];
+        if (document.activeElement === lastFocusable && !event.shiftKey) {
+          event.preventDefault();
+          firstFocusable.focus();
+        } else if (document.activeElement === firstFocusable && event.shiftKey) {
+          event.preventDefault();
+          lastFocusable.focus();
+        }
+      });
+    }
+  });
+
+  // Mark as initialized.
+  this.el.setAttribute('data-flyout', 'true');
+}
+
+/**
+ * Find open trigger for the given flyout among provided triggers.
+ */
+CivicThemeFlyout.prototype.findOpenTrigger = function (triggers, el) {
+  // Find a trigger for the current flyout.
+  for (const i in triggers) {
+    if (Object.prototype.hasOwnProperty.call(triggers, i)) {
+      if (triggers[i].hasAttribute('data-flyout-target')) {
+        const found = document.querySelector(triggers[i].getAttribute('data-flyout-target'));
+        if (found === el) {
+          return triggers[i];
+        }
+      } else if (triggers[i].nextElementSibling && triggers[i].nextElementSibling.hasAttribute('data-flyout')) {
+        // Try to get from the next element.
+        const found = triggers[i].nextElementSibling;
+        if (found === el) {
+          return triggers[i];
+        }
+      }
+    }
+  }
+  return null;
+};
+
+/**
+ * Click event handler to toggle flyout state.
+ */
+CivicThemeFlyout.prototype.clickEvent = function (e) {
+  e.stopPropagation();
+  if (e.target.hasAttribute('data-flyout-trigger-allow-default') !== true) {
+    e.preventDefault();
+  }
+
+  return e.currentTarget.expand ? this.expand() : this.collapse();
+};
+
+/**
+ * Event handler to close all flyout components.
+ */
+CivicThemeFlyout.prototype.closeAllTriggerClickEvent = function (e) {
+  e.stopPropagation();
+  if (e.target.hasAttribute('data-flyout-trigger-allow-default') !== true) {
+    e.preventDefault();
+  }
+
+  // Collapse all panels.
+  document.querySelectorAll('[data-flyout-expanded]').forEach((flyout) => {
+    flyout.removeAttribute('data-flyout-expanded');
+  });
+  document.querySelectorAll('[data-flyout-panel]').forEach((panel) => {
+    panel.setAttribute('aria-hidden', true);
+    const duration = panel.parentNode.hasAttribute('data-flyout-duration') ? parseInt(panel.parentNode.getAttribute('data-flyout-duration'), 10) : 500;
+    setTimeout(() => {
+      panel.style.visibility = null;
+      document.body.style.overflow = null;
+    }, duration);
+  });
+  document.querySelectorAll('[data-flyout-open-trigger]').forEach((trigger) => {
+    trigger.setAttribute('aria-expanded', false);
+  });
+
+  if (this.focusTargets) {
+    // Focus on the first trigger.
+    setTimeout(() => {
+      document.querySelector('[data-flyout-open-trigger]').focus();
+    }, this.duration);
+  }
+};
+
+/**
+ * Expand flyout.
+ */
+CivicThemeFlyout.prototype.expand = function () {
+  this.el.expanded = true;
+  this.openTrigger.setAttribute('aria-expanded', true);
+  this.panel.style.visibility = 'visible';
+
+  // Add required classes.
+  this.el.setAttribute('data-flyout-expanded', true);
+  this.panel.setAttribute('aria-hidden', false);
+  document.body.style.overflow = 'hidden';
+
+  if (this.focusTargets) {
+    // Focus on the first available target or close button.
+    const focusTargets = [
+      ...this.focusTargets,
+      '[data-flyout-close-trigger]',
+      '[data-flyout-close-all-trigger]',
+    ];
+
+    for (let i = 0; i < focusTargets.length; i++) {
+      let focusElements = Array.from(this.panel.querySelectorAll(focusTargets[i]));
+      // Filter to only focus points found in this panel.
+      focusElements = focusElements.filter((el) => (el.closest('[data-flyout-panel]') === this.panel));
+      if (focusElements.length > 0) {
+        setTimeout(() => focusElements[0].focus(), this.duration);
+        break;
+      }
+    }
+  }
+};
+
+/**
+ * Collapse flyout.
+ */
+CivicThemeFlyout.prototype.collapse = function () {
+  this.el.expanded = false;
+  this.openTrigger.setAttribute('aria-expanded', false);
+  this.el.removeAttribute('data-flyout-expanded');
+  this.panel.setAttribute('aria-hidden', true);
+  setTimeout(() => {
+    this.panel.style.visibility = null;
+    document.body.style.overflow = null;
+    if (this.focusTargets) {
+      this.openTrigger.focus();
+    }
+  }, this.duration);
+};
+
+// Initialize CivicThemeFlyout on every element.
+document.querySelectorAll('[data-flyout]').forEach((flyout) => {
+   
+  new CivicThemeFlyout(flyout);
+});

package/components/00-base/flyout/flyout.scss

@@ -0,0 +1,47 @@
+//
+// Flyout component.
+//
+
+[data-flyout] {
+  $root: &;
+
+  [data-flyout-panel] {
+    overflow: hidden auto;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    visibility: hidden;
+    transition: transform var(--ct-flyout-duration);
+  }
+
+  &[data-flyout-expanded] {
+    > [data-flyout-panel] {
+      transform: translate(0, 0);
+      visibility: visible;
+      transition: transform var(--ct-flyout-duration);
+      z-index: var(--ct-flyout-zindex);
+    }
+  }
+
+  @each $direction, $transform in $ct-flyout-direction-transforms {
+    &[data-flyout-direction='#{$direction}'] {
+      [data-flyout-panel] {
+        transform: $transform;
+      }
+
+      &[data-flyout-expanded] {
+        > [data-flyout-panel] {
+          transform: translate(0, 0);
+        }
+      }
+    }
+  }
+}
+
+[data-flyout-open-trigger],
+[data-flyout-close-trigger],
+[data-flyout-close-all-trigger] {
+  cursor: pointer;
+}

package/components/00-base/flyout/flyout.stories.js

@@ -0,0 +1,34 @@
+import Component from './flyout.stories.twig';
+
+const meta = {
+  title: 'Base/Utilities/Flyout',
+  component: Component,
+  argTypes: {
+    direction: {
+      control: { type: 'select' },
+      options: ['top', 'bottom', 'left', 'right'],
+    },
+    expanded: {
+      control: { type: 'boolean' },
+    },
+    duration: {
+      control: { type: 'number' },
+    },
+  },
+};
+
+export default meta;
+
+export const Flyout = {
+  parameters: {
+    layout: 'centered',
+    html: {
+      disable: true,
+    },
+  },
+  args: {
+    direction: 'right',
+    expanded: false,
+    duration: 500,
+  },
+};

package/components/00-base/flyout/flyout.stories.scss

@@ -0,0 +1,38 @@
+//
+// Flyout component.
+//
+
+#flyout-story1 {
+  [data-flyout-panel] {
+    box-shadow: 0 0 ct-particle(0.125) ct-particle(0.125) #f00 inset;
+    padding: ct-spacing(2);
+  }
+}
+
+#flyout-story2 {
+  [data-flyout-panel] {
+    box-shadow: 0 0 ct-particle(0.125) ct-particle(0.125) #00f inset;
+    padding: ct-spacing(2);
+  }
+}
+
+#flyout-story3 {
+  [data-flyout-panel] {
+    box-shadow: 0 0 ct-particle(0.125) ct-particle(0.125) #0f0 inset;
+    padding: ct-spacing(2);
+  }
+}
+
+#flyout-story4 {
+  [data-flyout-panel] {
+    box-shadow: 0 0 ct-particle(0.125) ct-particle(0.125) #c95100 inset;
+    padding: ct-spacing(2);
+  }
+}
+
+#flyout-story5 {
+  [data-flyout-panel] {
+    box-shadow: 0 0 ct-particle(0.125) ct-particle(0.125) #b388ff inset;
+    padding: ct-spacing(2);
+  }
+}

package/components/00-base/flyout/flyout.stories.twig

@@ -0,0 +1,101 @@
+{#
+/**
+ * @file
+ * Flyout story template.
+ */
+#}
+
+<button data-flyout-open-trigger data-flyout-target="#flyout-story1" role="button">Open flyout 1</button>
+
+<div id="flyout-story1" data-flyout data-flyout-direction="{{ direction }}" {% if expanded %}data-flyout-expanded{% endif %}>
+
+  <div data-flyout-panel>
+    <span data-flyout-close-trigger>
+      <strong>Close x</strong>
+    </span>
+
+    <br/>Flyout 1<br/>
+    Labore commodo sunt reprehenderit mollit ipsum adipisicing commodo nisi
+    cupidatat mollit dolor commodo velit tempor laboris enim est sit labore
+    deserunt enim ullamco irure anim do mollit deserunt Lorem aliquip dolore ex
+    laboris ea consectetur aliquip adipisicing consectetur eu ad dolore ullamco
+    nostrud reprehenderit quis cillum reprehenderit excepteur enim incididunt.
+  </div>
+</div>
+
+<hr>
+
+<button data-flyout-open-trigger data-flyout-target="#flyout-story2" role="button">Open flyout 2</button>
+
+<div id="flyout-story2" data-flyout data-flyout-direction="{{ direction }}" {% if expanded %}data-flyout-expanded{% endif %}>
+
+  <div data-flyout-panel>
+    <span data-flyout-close-trigger>
+      <strong>Close ❌</strong>
+    </span>
+
+    <br/>Flyout 2<br/>
+    Labore commodo sunt reprehenderit mollit ipsum adipisicing commodo nisi
+    cupidatat mollit dolor commodo velit tempor laboris enim est sit labore
+    deserunt enim ullamco irure anim do mollit deserunt Lorem aliquip dolore ex
+    laboris ea consectetur aliquip adipisicing consectetur eu ad dolore ullamco
+    nostrud reprehenderit quis cillum reprehenderit excepteur enim incididunt.
+  </div>
+</div>
+
+<hr>
+
+<button data-flyout-open-trigger role="button">Open flyout 3 (no trigger target)</button>
+<div id="flyout-story3" data-flyout data-flyout-direction="{{ direction }}" {% if expanded %}data-flyout-expanded{% endif %}>
+
+  <div data-flyout-panel>
+    <span data-flyout-close-trigger>
+      <strong>Close ❌</strong>
+    </span>
+
+    <br/>Flyout 3<br/>
+    Labore commodo sunt reprehenderit mollit ipsum adipisicing commodo nisi
+    cupidatat mollit dolor commodo velit tempor laboris enim est sit labore
+    deserunt enim ullamco irure anim do mollit deserunt Lorem aliquip dolore ex
+    laboris ea consectetur aliquip adipisicing consectetur eu ad dolore ullamco
+    nostrud reprehenderit quis cillum reprehenderit excepteur enim incididunt.
+  </div>
+</div>
+
+<hr>
+
+<button data-flyout-open-trigger role="button">Open flyout 4 (duration)</button>
+<div id="flyout-story4" data-flyout data-flyout-direction="{{ direction }}" {% if duration %}data-flyout-duration="{{ duration }}"{% endif %} {% if expanded %}data-flyout-expanded{% endif %}>
+
+  <div data-flyout-panel>
+    <span data-flyout-close-trigger>
+      <strong>Close ❌</strong>
+    </span>
+
+    <br/>Flyout 4<br/>
+    Labore commodo sunt reprehenderit mollit ipsum adipisicing commodo nisi
+    cupidatat mollit dolor commodo velit tempor laboris enim est sit labore
+    deserunt enim ullamco irure anim do mollit deserunt Lorem aliquip dolore ex
+    laboris ea consectetur aliquip adipisicing consectetur eu ad dolore ullamco
+    nostrud reprehenderit quis cillum reprehenderit excepteur enim incididunt.
+  </div>
+</div>
+
+<hr>
+
+<button data-flyout-open-trigger data-flyout-target="#flyout-story5" role="button">Open flyout 5 and close all</button>
+<div id="flyout-story5" data-flyout data-flyout-direction="{{ direction }}" {% if expanded %}data-flyout-expanded{% endif %}>
+
+  <div data-flyout-panel>
+    <span data-flyout-close-all-trigger>
+      <strong>Close all ❌</strong>
+    </span>
+
+    <br/>Flyout 5<br/>
+    Labore commodo sunt reprehenderit mollit ipsum adipisicing commodo nisi
+    cupidatat mollit dolor commodo velit tempor laboris enim est sit labore
+    deserunt enim ullamco irure anim do mollit deserunt Lorem aliquip dolore ex
+    laboris ea consectetur aliquip adipisicing consectetur eu ad dolore ullamco
+    nostrud reprehenderit quis cillum reprehenderit excepteur enim incididunt.
+  </div>
+</div>

package/components/00-base/fonts/_index.scss

@@ -0,0 +1,15 @@
+//
+// Font component.
+//
+// stylelint-disable no-invalid-position-at-import-rule, scss/dollar-variable-pattern
+
+// Generate all fonts inclusions.
+@include ct-font-include(_ct-font-map-all());
+
+@if $ct-font-smoothing-enable {
+  html {
+    text-rendering: optimizelegibility;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+  }
+}

package/components/00-base/fonts/fonts.stories.js

@@ -0,0 +1,40 @@
+import Component from './fonts.stories.twig';
+import Constants from '../../../dist/constants.json';
+
+const meta = {
+  title: 'Base/Fonts',
+  component: Component,
+  argTypes: {
+    fonts: {
+      table: {
+        disable: true,
+      },
+    },
+    weights: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+
+export default meta;
+
+export const Fonts = {
+  parameters: {
+    layout: 'centered',
+    html: {
+      disable: true,
+    },
+  },
+  args: {
+    fonts: Object.keys({
+      ...Constants.SCSS_VARIABLES['ct-fonts-default'],
+      ...Constants.SCSS_VARIABLES['ct-fonts'],
+    }),
+    weights: Object.keys({
+      ...Constants.SCSS_VARIABLES['ct-font-weights-default'],
+      ...Constants.SCSS_VARIABLES['ct-font-weights'],
+    }),
+  },
+};

package/components/00-base/fonts/fonts.stories.scss

@@ -0,0 +1,28 @@
+//
+// Font component stories.
+//
+
+@use 'sass:string';
+
+.story-fonts-wrapper {
+  $all-fonts: _ct-font-map-all();
+  $all-weights: _ct-font-weights-all();
+  $font-size: ct-particle(6);
+
+  @each $weightName, $weight in $all-weights {
+    $weightName: string.to-lower-case($weightName);
+
+    @include ct-generate-class-variations-from-map($all-fonts, 'story-font--#{$weightName}') using($key, $value, $index) {
+      font-family: ct-font($key);
+      font-weight: $weight;
+      font-size: $font-size;
+    }
+
+    @include ct-generate-class-variations-from-map($all-fonts, 'story-font--italic--#{$weightName}') using($key, $value, $index) {
+      font-family: ct-font($key);
+      font-weight: $weight;
+      font-style: italic;
+      font-size: $font-size;
+    }
+  }
+}

package/components/00-base/fonts/fonts.stories.twig

@@ -0,0 +1,15 @@
+<div class="story-fonts-wrapper">
+  {% for font in fonts %}
+    <div class="story-container">
+      <div class="story-container__title">{{ font|capitalize }}</div>
+      <div class="story-container__content">
+        {% for weight in weights %}
+          <div class="story-container__subtitle">{{ weight|capitalize }}</div>
+          <div class="story-container__subcontent story-font--{{ weight }}--{{ font }}">The quick brown fox jumps over the lazy dog</div>
+          <div class="story-container__subtitle">{{ weight|capitalize }} Italic</div>
+          <div class="story-container__subcontent story-font--italic--{{ weight }}--{{ font }}">The quick brown fox jumps over the lazy dog</div>
+        {% endfor %}
+      </div>
+    </div>
+  {% endfor %}
+</div>