@dta-au/civictheme-twig 1.13.1

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

@@ -0,0 +1,121 @@
+{#
+/**
+ * @file
+ * Responsive story template.
+ */
+#}
+
+<div data-collapsible data-collapsible-collapsed>
+  <div>Trigger - All screens - No responsive</div>
+  <div>Collapsible and collapsed on all screens. Not using responsive.</div>
+</div>
+
+<hr/>
+
+<div data-collapsible data-collapsible-collapsed data-responsive=">=m">
+  <div>Trigger - M, L, XL, XXL (collapsed)</div>
+  <div>Collapsible and collapsed on M, L, XL, XXL screens only.</div>
+</div>
+
+<hr/>
+
+<div data-collapsible data-responsive=">=m">
+  <div>Trigger - M, L, XL, XXL</div>
+  <div>Collapsible and NOT collapsed on M, L, XL, XXL screens only.</div>
+</div>
+
+<hr/>
+
+<div data-collapsible data-collapsible-collapsed data-responsive="<m">
+  <div>Trigger - XS, S (collapsed)</div>
+  <div>Collapsible and collapsed on XS, S screens only.</div>
+</div>
+
+<hr/>
+
+<div data-collapsible data-responsive="<m">
+  <div>Trigger - XS, S</div>
+  <div>Collapsible and NOT collapsed on XS, S screens only.</div>
+</div>
+
+<hr/>
+
+<strong>Responsive component tests for every operator.</strong>
+
+<hr/>
+OPERATOR: =
+<hr/>
+<div data-collapsible data-responsive="=xxs"><div>Trigger - =XXS</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive="=xs"><div>Trigger - =XS</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive="=s"><div>Trigger - =S</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive="=m"><div>Trigger - =M</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive="=l"><div>Trigger - =L</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive="=xl"><div>Trigger - =XL</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive="=xxl"><div>Trigger - =XXL</div><div>Collapsible content</div></div>
+
+<hr/>
+OPERATOR: &lt;&gt;
+<hr/>
+<div data-collapsible data-responsive="<>xxs"><div>Trigger - &lt;&gt;XXS</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive="<>xs"><div>Trigger - &lt;&gt;XS</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive="<>s"><div>Trigger - &lt;&gt;S</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive="<>m"><div>Trigger - &lt;&gt;M</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive="<>l"><div>Trigger - &lt;&gt;L</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive="<>xl"><div>Trigger - &lt;&gt;XL</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive="<>xxl"><div>Trigger - &lt;&gt;XXL</div><div>Collapsible content</div></div>
+
+<hr/>
+OPERATOR: &gt;
+<hr/>
+<div data-collapsible data-responsive=">xxs"><div>Trigger - &gt;XXS</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive=">xs"><div>Trigger - &gt;XS</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive=">s"><div>Trigger - &gt;S</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive=">m"><div>Trigger - &gt;M</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive=">l"><div>Trigger - &gt;L</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive=">xl"><div>Trigger - &gt;XL</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive=">xxl"><div>Trigger - &gt;XXL</div><div>Collapsible content</div></div>
+
+<hr/>
+OPERATOR: &gt;=
+<hr/>
+<div data-collapsible data-responsive=">=xxs"><div>Trigger - &gt;=XXS</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive=">=xs"><div>Trigger - &gt;=XS</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive=">=s"><div>Trigger - &gt;=S</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive=">=m"><div>Trigger - &gt;=M</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive=">=l"><div>Trigger - &gt;=L</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive=">=xl"><div>Trigger - &gt;=XL</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive=">=xxl"><div>Trigger - &gt;=XXL</div><div>Collapsible content</div></div>
+
+<hr/>
+OPERATOR: &lt;
+<hr/>
+<div data-collapsible data-responsive="<xxs"><div>Trigger - &lt;XXS</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive="<xs"><div>Trigger - &lt;XS</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive="<s"><div>Trigger - &lt;S</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive="<m"><div>Trigger - &lt;M</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive="<l"><div>Trigger - &lt;L</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive="<xl"><div>Trigger - &lt;XL</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive="<xxl"><div>Trigger - &lt;XXL</div><div>Collapsible content</div></div>
+
+<hr/>
+OPERATOR: &lt;=
+<hr/>
+<div data-collapsible data-responsive="<=xxs"><div>Trigger - &lt;=XXS</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive="<=xs"><div>Trigger - &lt;=XS</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive="<=s"><div>Trigger - &lt;=S</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive="<=m"><div>Trigger - &lt;=M</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive="<=l"><div>Trigger - &lt;=L</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive="<=xl"><div>Trigger - &lt;=XL</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive="<=xxl"><div>Trigger - &lt;=XXL</div><div>Collapsible content</div></div>
+
+<hr/>
+OPERATOR: None (defaults to &gt;=)
+<hr/>
+<!--Using 'xXs' instead of 'xxs' to test case insensitivity.-->
+<div data-collapsible data-responsive="xXs"><div>Trigger - &gt;=XXS</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive="xs"><div>Trigger - &gt;=XS</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive="s"><div>Trigger - &gt;=S</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive="m"><div>Trigger - &gt;=M</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive="l"><div>Trigger - &gt;=L</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive="xl"><div>Trigger - &gt;=XL</div><div>Collapsible content</div></div>
+<div data-collapsible data-responsive="xxl"><div>Trigger - &gt;=XXL</div><div>Collapsible content</div></div>

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

@@ -0,0 +1,36 @@
+/**
+ * @file
+ * Scrollspy component.
+ *
+ * Adds '.ct-scrollspy-scrolled' class to an element whose
+ * data-scrollspy-offset attribute's value is more than a vertical window
+ * scroll.
+ */
+function CivicThemeScrollspy(el) {
+  if (el.getAttribute('data-scrollspy') === 'true' || this.el) {
+    return;
+  }
+
+  this.el = el;
+  this.offset = this.el.hasAttribute('data-scrollspy-offset') ? this.el.getAttribute('data-scrollspy-offset') : null;
+
+  document.addEventListener('scroll', CivicThemeScrollspy.prototype.scrollEvent.bind(this));
+
+  // Mark as initialized.
+  this.el.setAttribute('data-scrollspy', 'true');
+}
+
+/**
+ * Event handler for the scroll.
+ */
+CivicThemeScrollspy.prototype.scrollEvent = function () {
+  if (window.scrollY > this.offset) {
+    this.el.classList.add('ct-scrollspy-scrolled');
+  } else {
+    this.el.classList.remove('ct-scrollspy-scrolled');
+  }
+};
+
+document.querySelectorAll('[data-scrollspy]').forEach((el) => {
+  new CivicThemeScrollspy(el);
+});

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

@@ -0,0 +1,11 @@
+//
+// Scrollspy component.
+//
+
+[data-scrollspy='true'] {
+  display: none;
+
+  &.ct-scrollspy-scrolled {
+    display: block;
+  }
+}

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

@@ -0,0 +1,18 @@
+import Component from './scrollspy.stories.twig';
+
+const meta = {
+  title: 'Base/Utilities/Scrollspy',
+  component: Component,
+};
+
+export default meta;
+
+export const Scrollspy = {
+  parameters: {
+    layout: 'fullscreen',
+    storyDocs: 'Scroll the viewport to see elements appear when it reaches a specific pixel threshold.',
+    html: {
+      disable: true,
+    },
+  },
+};

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

@@ -0,0 +1,51 @@
+//
+// Scrollspy component stories.
+//
+
+.story-container__page-content {
+  &.story-scrollspy {
+    height: 2000px;
+
+    &::before {
+      box-shadow: 0 0 ct-particle(0.125) ct-particle(0.125) #f00 inset;
+      height: 400px;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      display: block;
+      content: '';
+    }
+
+    &::after {
+      box-shadow: 0 0 ct-particle(0.125) ct-particle(0.125) #00f inset;
+      height: 600px;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      display: block;
+      content: '';
+    }
+  }
+}
+
+.story-scrollspy-target1 {
+  position: fixed;
+  bottom: ct-particle(12);
+  right: ct-particle(12);
+}
+
+.story-scrollspy-target2 {
+  position: fixed;
+  bottom: 10px;
+  right: ct-particle(12);
+}
+
+.story-scrollspy-target1.ct-scrollspy-scrolled {
+  border: solid ct-particle(0.125) red;
+}
+
+.story-scrollspy-target2.ct-scrollspy-scrolled {
+  border: solid ct-particle(0.125) blue;
+}

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

@@ -0,0 +1,9 @@
+<div class="story-container">
+  <div class="story-container__page-content story-scrollspy"></div>
+  <button class="story-scrollspy-target1" data-scrollspy data-scrollspy-offset="400">
+    This Button appears when the bottom of the red container reaches top when the viewport is scrolled 400px. It disappears when the viewport is scrolled back.
+  </button>
+  <button class="story-scrollspy-target2" data-scrollspy data-scrollspy-offset="600">
+    This Button appears when the bottom of the blue container reaches top when the viewport is scrolled 600px. It disappears when the viewport is scrolled back.
+  </button>
+</div>

package/components/00-base/skip-to-target/skip-to-target.js

@@ -0,0 +1,27 @@
+/**
+ * @file
+ * Skip to target utility.
+ */
+
+function CivicThemeSkipToTarget(el) {
+  this.el = el;
+  this.targetId = this.el.getAttribute('href');
+
+  if (this.targetId) {
+    this.targetEl = document.querySelector(this.targetId);
+
+    this.el.addEventListener('click', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      this.targetEl.setAttribute('tabindex', '1');
+      this.targetEl.focus();
+      this.targetEl.scrollIntoView(true);
+      this.targetEl.setAttribute('tabindex', '-1');
+    });
+  }
+}
+
+document.querySelectorAll('[data-skip-to-target]').forEach((el) => {
+  new CivicThemeSkipToTarget(el);
+});

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

@@ -0,0 +1,29 @@
+//
+// Space component stories.
+//
+
+@use 'sass:map';
+@use 'sass:string';
+
+$ct-spacing-map: (
+  'xxs': (
+    'top': ct-spacing(3),
+    'bottom':ct-spacing(3),
+  ),
+  'l': (
+    'top': ct-spacing(6),
+    'bottom':ct-spacing(6),
+  ),
+);
+
+@each $type in (top, bottom, both, none) {
+  @each $suffix in ('', '-inset') {
+    .ct-vertical-spacing#{$suffix}--#{$type} {
+      @each $breakpoint, $values in $ct-spacing-map {
+        @include ct-breakpoint($breakpoint) {
+          @include ct-component-with-vertical-spacing($type, map.get($values, 'top'), map.get($values, 'bottom'), string.length($suffix) != 0);
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,16 @@
+import Component from './spacing.stories.twig';
+
+const meta = {
+  title: 'Base/Spacing',
+  component: Component,
+};
+
+export default meta;
+
+export const Spacing = {
+  parameters: {
+    html: {
+      disable: true,
+    },
+  },
+};

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

@@ -0,0 +1,51 @@
+//
+// Spacing component stories.
+//
+
+@use 'sass:color';
+@use 'sass:list';
+
+.story-spacing-wrapper {
+  div {
+    position: relative;
+    width: 100%;
+    min-height: ct-spacing();
+  }
+
+  $spacings: ();
+
+  @for $index from 1 through 11 {
+    $spacings: list.append($spacings, ct-spacing($index));
+  }
+
+  @include ct-generate-class-variations-from-map($spacings, 'story-spacing') using($name, $value, $index) {
+    box-sizing: border-box;
+    padding: $value 0 0 $value;
+
+    $transparency: if($index % 2 == 0, 25%, 50%);
+
+    background-color: color.mix(#61daff, white, $transparency);
+
+    &::before {
+      content: 'spacing #{$name}';
+      position: absolute;
+      top: 2px;
+      left: 2px;
+    }
+  }
+}
+
+.story-vertical-spacing-wrapper {
+  .story-vertical-spacing-container {
+    @include ct-block-debug(red, 'Component container', true, 2px);
+
+    position: relative;
+    overflow: hidden; // Force container to reflow.
+  }
+
+  .story-vertical-spacing {
+    @include ct-block-debug(blue, 'Component', false, 2px);
+
+    position: relative;
+  }
+}

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

@@ -0,0 +1,64 @@
+<div class="story-container story-layout-size--large story-layout--centered">
+  <div class="story-container__title">Spacing</div>
+  <div class="story-container__content">
+    <div class="story-spacing-wrapper ">
+      <div class="story-spacing--10">
+        <div class="story-spacing--9">
+          <div class="story-spacing--8">
+            <div class="story-spacing--7">
+              <div class="story-spacing--6">
+                <div class="story-spacing--5">
+                  <div class="story-spacing--4">
+                    <div class="story-spacing--3">
+                      <div class="story-spacing--2">
+                        <div class="story-spacing--1"></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="story-container story-layout-size--large story-layout--centered">
+  <div class="story-container__title">Component Vertical Spacing</div>
+  <div class="story-container__content">
+    <div class="story-vertical-spacing-wrapper">
+      {% set component_spacings = ['top', 'bottom', 'both', 'none'] %}
+      {% for type in component_spacings %}
+        <div class="story-vertical-spacing-container">
+          <div class="story-vertical-spacing ct-vertical-spacing--{{ type }}">
+            <div class="story-placeholder" contenteditable="true">
+              Content <code>ct-vertical-spacing--{{ type }}</code>
+            </div>
+          </div>
+        </div>
+        <hr>
+      {% endfor %}
+    </div>
+  </div>
+</div>
+
+<div class="story-container story-layout-size--large story-layout--centered">
+  <div class="story-container__title">Component Vertical Spacing Inset</div>
+  <div class="story-container__content">
+    <div class="story-vertical-spacing-wrapper">
+      {% set component_spacings = ['top', 'bottom', 'both', 'none'] %}
+      {% for type in component_spacings %}
+        <div class="story-vertical-spacing-container">
+          <div class="story-vertical-spacing ct-vertical-spacing-inset--{{ type }}">
+            <div class="story-placeholder" contenteditable="true">
+              Content <code>ct-vertical-spacing-inset--{{ type }}</code>
+            </div>
+          </div>
+        </div>
+        <hr>
+      {% endfor %}
+    </div>
+  </div>
+</div>

package/components/00-base/storybook/storybook.container.utils.stories.scss

@@ -0,0 +1,105 @@
+//
+// Custom containers for Storybook.
+//
+// Containers are used to wrap stories elements into visually digestible
+// structures.
+
+@use 'sass:color';
+@use 'sass:map';
+@use 'sass:math';
+
+.story-container {
+  $root: &;
+
+  // Make sure to not use margins as they will negate each other and testing
+  // layouts will be giving false positives.
+  margin-bottom: ct-spacing(2);
+
+  #{$root}__title {
+    @include ct-typography('label-large');
+    @include ct-container();
+
+    & {
+      border-bottom: solid ct-particle(0.125);
+      margin-bottom: ct-spacing(2);
+      margin-top: ct-spacing(4);
+    }
+  }
+
+  #{$root}__subtitle {
+    @include ct-typography('label-regular');
+    @include ct-container();
+
+    & {
+      margin-top: ct-spacing(3);
+      margin-bottom: ct-spacing(2);
+    }
+  }
+
+  #{$root}__content {
+    @include ct-container();
+
+    & {
+      margin-bottom: ct-spacing(4);
+    }
+  }
+
+  #{$root}__subcontent {
+    margin-bottom: ct-spacing(4);
+  }
+
+  &#{$root}--columns {
+    display: flex;
+  }
+
+  &#{$root}--columns--2 {
+    #{$root}__column {
+      width: 50%;
+      padding: ct-spacing(2);
+    }
+  }
+
+  #{$root}__column {
+    flex: 1;
+
+    &--light {
+      background: ct-color-light('background-light');
+
+      #{$root}__title,
+      #{$root}__subtitle {
+        color: ct-color-light('heading');
+      }
+
+      #{$root}__content,
+      #{$root}__subcontent {
+        color: ct-color-light('body');
+      }
+    }
+
+    &--dark {
+      background: ct-color-dark('background');
+
+      #{$root}__title,
+      #{$root}__subtitle {
+        color: ct-color-dark('heading');
+      }
+
+      #{$root}__content,
+      #{$root}__subcontent {
+        color: ct-color-dark('body');
+      }
+    }
+  }
+}
+
+code {
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  border: 1px solid #e1e1e8;
+  color: #d63384;
+  display: inline-block;
+  font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  font-size: 0.9em;
+  padding: 0 0.25em;
+  vertical-align: top;
+}

package/components/00-base/storybook/storybook.docs.utils.js

@@ -0,0 +1,37 @@
+//
+// Custom docs decorator for Storybook.
+//
+// Reads `storyDocs`, `storyDocsSize`, `storyDocsPlacement`, and `storyDocsClass`
+// from story parameters and injects a styled documentation block into the
+// rendered output.
+//
+// Note: We use `storyDocs` instead of `docs` to avoid conflicting with
+// Storybook's built-in `parameters.docs` used by the docs addon.
+//
+
+export const decoratorDocs = (storyFn, context) => {
+  const content = storyFn();
+
+  const params = context?.parameters;
+  if (!params?.storyDocs || typeof content !== 'string') {
+    return content;
+  }
+
+  const size = ['small', 'medium', 'large', 'fluid'].includes(context.parameters.storyDocsSize)
+    ? context.parameters.storyDocsSize
+    : 'fluid';
+
+  let classes = `story-docs story-docs-size--${size}`;
+
+  if (context.parameters.storyDocsClass) {
+    classes += ` ${context.parameters.storyDocsClass}`;
+  }
+
+  const docsHtml = `<div class="${classes}">${context.parameters.storyDocs}</div>`;
+
+  if (context.parameters.storyDocsPlacement === 'after') {
+    return `${content}${docsHtml}`;
+  }
+
+  return `${docsHtml}${content}`;
+};

package/components/00-base/storybook/storybook.docs.utils.stories.scss

@@ -0,0 +1,70 @@
+//
+// Custom documentation helpers for Storybook.
+//
+
+@use 'sass:color';
+@use 'sass:map';
+@use 'sass:math';
+
+#root {
+  > .story-docs {
+    $root: &;
+
+    border: solid ct-particle(0.125) #ccc;
+    padding: ct-spacing(4);
+    margin: ct-spacing(4) auto;
+    max-width: 60%;
+    text-align: center;
+    line-height: 150%;
+
+    &.story-docs-size--small {
+      max-width: map.get($ct-breakpoints, 'xs');
+    }
+
+    &.story-docs-size--medium {
+      max-width: map.get($ct-breakpoints, 's');
+    }
+
+    &.story-docs-size--large {
+      margin: ct-spacing(8) auto;
+      min-width: map.get($ct-breakpoints, 'xxl');
+    }
+
+    &.story-docs-size--fluid {
+      width: fit-content;
+      max-width: 80%;
+    }
+
+    #{$root}__title {
+      @include ct-typography('label-large');
+    }
+
+    #{$root}__content {
+      margin-bottom: ct-spacing(4);
+    }
+  }
+
+  // Test class for the docs class testing.
+  .test-docs-align-right {
+    text-align: right !important;
+
+    > * {
+      text-align: right !important;
+    }
+  }
+}
+
+//
+// Conditionally show docs if an element with a certain class follows the docs.
+//
+// The story should add .story-docs--conditional as `docsClass`.
+//
+@mixin ct-story-docs-conditional($class) {
+  .story-docs.story-docs--conditional:has(+ #{$class}) {
+    display: block;
+  }
+
+  .story-docs.story-docs--conditional:not(:has(+ #{$class})) {
+    display: none;
+  }
+}

package/components/00-base/storybook/storybook.generators.utils.js

@@ -0,0 +1,19 @@
+//
+// Domain-specific generators for Storybook stories.
+//
+
+export const placeholder = (content = 'Content placeholder', cssClass = 'story-placeholder') => `<div class="${cssClass}" contenteditable="true">${content}</div>`;
+
+export const code = (content) => `<code>${content}</code>`;
+
+export const generateItems = (count, content) => {
+  const items = [];
+  for (let i = 1; i <= count; i++) {
+    if (typeof content === 'function') {
+      items.push(content(i, count));
+    } else {
+      items.push(content);
+    }
+  }
+  return items;
+};