@dta-au/civictheme-twig 1.13.1

package/components/00-base/mixins/_table.scss

@@ -0,0 +1,254 @@
+//
+// Table mixins.
+//
+
+@mixin ct-table() {
+  $root: &;
+
+  width: 100%;
+  border-collapse: collapse;
+  border: 0;
+  border-spacing: 0;
+  text-align: left;
+  vertical-align: middle;
+
+  @include ct-typography('text-regular');
+
+  thead,
+  tfoot {
+    @include ct-typography('label-regular');
+  }
+
+  tr {
+    th,
+    td {
+      padding: ct-spacing(1.5) ct-spacing(3);
+      vertical-align: var(--ct-table-cell-vertical-align);
+    }
+  }
+
+  caption {
+    text-align: left;
+    padding: ct-spacing(1.5) 0;
+
+    @include ct-typography('label-large');
+  }
+
+  &#{$root}--caption-after {
+    caption-side: bottom;
+
+    caption {
+      @include ct-typography('text-small');
+    }
+  }
+
+  &:not(.ct-table--data) {
+    @include ct-table-responsive();
+  }
+}
+
+@mixin ct-table-responsive() {
+  $root: &;
+
+  @include ct-breakpoint-upto($ct-table-breakpoint) {
+    thead,
+    tfoot {
+      @include ct-visually-hidden();
+    }
+
+    tbody {
+      tr {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+
+        td {
+          border: 0;
+          display: flex;
+          flex-wrap: nowrap;
+          flex-direction: column;
+          justify-content: stretch;
+
+          &:first-of-type::after {
+            visibility: hidden;
+          }
+
+          &::after {
+            content: '';
+            width: calc(100% - 30px);
+            display: block;
+            margin: 0 auto;
+            height: ct-particle(0.125);
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: -6px;
+          }
+
+          &::before {
+            content: attr(data-title);
+            display: table-cell;
+            height: 100%;
+            width: 30%;
+            max-width: ct-spacing(12);
+            flex-shrink: 0;
+            vertical-align: middle;
+            padding-right: ct-spacing(2);
+
+            @include ct-typography('label-regular');
+          }
+        }
+      }
+    }
+
+    tr {
+      th,
+      td {
+        padding: ct-spacing(1.5) ct-spacing();
+      }
+    }
+  }
+}
+
+@mixin ct-table-light() {
+  color: var(--ct-table-light-color);
+  background-color: var(--ct-table-light-background-color);
+
+  thead {
+    color: var(--ct-table-light-header-color);
+
+    @include ct-breakpoint($ct-table-breakpoint) {
+      border-bottom: solid ct-particle(0.125) var(--ct-table-light-header-border-color);
+    }
+
+    tr {
+      &:last-child {
+        border-bottom: solid ct-particle(0.25) var(--ct-table-light-header-border-color);
+      }
+    }
+  }
+
+  tfoot {
+    color: var(--ct-table-light-footer-color);
+
+    @include ct-breakpoint($ct-table-breakpoint) {
+      border-top: solid ct-particle(0.125) var(--ct-table-light-footer-border-color);
+    }
+
+    tr {
+      &:last-child {
+        border-top: solid ct-particle(0.25) var(--ct-table-light-footer-border-color);
+      }
+    }
+  }
+
+  tbody {
+    tr {
+      border-bottom: solid ct-particle(0.125) var(--ct-table-light-border-color);
+    }
+  }
+
+  caption {
+    color: var(--ct-table-light-caption-color);
+  }
+
+  &.ct-table--data {
+    border-top: solid ct-particle(0.125) var(--ct-table-light-footer-border-color);
+  }
+
+  &.ct-table--striped {
+    tbody {
+      tr:nth-child(odd) {
+        background: var(--ct-table-light-row-odd-background-color);
+
+        td {
+          color: var(--ct-table-light-row-odd-color);
+        }
+      }
+
+      tr:nth-child(even) {
+        background: var(--ct-table-light-row-even-background-color);
+
+        td {
+          color: var(--ct-table-light-row-even-color);
+        }
+      }
+    }
+  }
+}
+
+@mixin ct-table-dark() {
+  color: var(--ct-table-dark-color);
+  background-color: var(--ct-table-dark-background-color);
+
+  thead {
+    color: var(--ct-table-dark-header-color);
+
+    @include ct-breakpoint($ct-table-breakpoint) {
+      border-bottom: solid ct-particle(0.125) var(--ct-table-dark-header-border-color);
+    }
+
+    tr {
+      &:last-child {
+        border-bottom: solid ct-particle(0.25) var(--ct-table-dark-header-border-color);
+      }
+    }
+  }
+
+  tfoot {
+    color: var(--ct-table-dark-footer-color);
+
+    @include ct-breakpoint($ct-table-breakpoint) {
+      border-top: solid ct-particle(0.125) var(--ct-table-dark-footer-border-color);
+    }
+
+    tr {
+      &:last-child {
+        border-top: solid ct-particle(0.25) var(--ct-table-dark-footer-border-color);
+      }
+    }
+  }
+
+  tbody {
+    tr {
+      border-bottom: solid ct-particle(0.125) var(--ct-table-dark-border-color);
+    }
+  }
+
+  caption {
+    color: var(--ct-table-dark-caption-color);
+  }
+
+  &.ct-table--data {
+    border-top: solid ct-particle(0.125) var(--ct-table-dark-footer-border-color);
+  }
+
+  &.ct-table--striped {
+    tbody {
+      tr:nth-child(odd) {
+        background: var(--ct-table-dark-row-odd-background-color);
+
+        td {
+          color: var(--ct-table-dark-row-odd-color);
+        }
+      }
+
+      tr:nth-child(even) {
+        background: var(--ct-table-dark-row-even-background-color);
+
+        td {
+          color: var(--ct-table-dark-row-even-color);
+        }
+      }
+    }
+  }
+}
+
+@mixin ct-table-theme($theme) {
+  @if $theme == 'light' {
+    @include ct-table-light();
+  }
+  @else {
+    @include ct-table-dark();
+  }
+}

package/components/00-base/mixins/_typography.scss

@@ -0,0 +1,193 @@
+//
+// Typography mixins.
+//
+
+@use 'sass:map';
+@use 'sass:list';
+
+//
+// Print typography rules based on the pre-defined typography preset.
+//
+// @code
+//
+// @include ct-typography('heading-1');
+//
+// @endcode
+//
+@mixin ct-typography($name) {
+  @if type-of($name) != string {
+    @error 'Only scalar names can be used as a typography preset.';
+  }
+
+  @include _ct-typography-print-ruleset($name);
+}
+
+//
+// Get typography rules based on the pre-defined typography preset.
+//
+// Similar to ct-typography(), but returns the value instead of printing it.
+//
+@function ct-typography-rule($name, $rule-name, $breakpoint, $default: 'none') {
+  @if type-of($name) != string {
+    @error 'Only scalar names can be used as a typography preset.';
+  }
+
+  $value: _ct-typography-get-ruleset-rule($name, $rule-name, $breakpoint);
+
+  @if $value == null {
+    $value: $default;
+  }
+
+  @return $value;
+}
+
+//
+// Include font size, height, weight and family for one-to-many breakpoints.
+//
+// Do not use directly.
+// Use @include ct-typography() mixin instead.
+//
+@mixin _ct-typography-print-ruleset($name) {
+  font-size: var(#{'--ct-typography-' + $name + '-font-size'});
+  line-height: var(#{'--ct-typography-' + $name + '-line-height'});
+  font-family: var(#{'--ct-typography-' + $name + '-font-name'});
+  font-weight: var(#{'--ct-typography-' + $name + '-font-weight'});
+  letter-spacing: var(#{'--ct-typography-' + $name + '-letter-spacing'});
+}
+
+//
+// Include font size, height, weight and family for one-to-many breakpoints.
+//
+// Do not use directly.
+// Use @include ct-typography-rule() function instead.
+//
+// stylelint-disable-next-line scss/at-function-pattern
+@function _ct-typography-get-ruleset-rule($ruleset, $rule-name: false, $rule-breakpoint: false) {
+  $all-typographies: _ct-typography-all();
+
+  // Ruleset is a name of the preset - retrieve preset as a ruleset.
+  @if type-of($ruleset) == string {
+    @if map.get($all-typographies, $ruleset) == null {
+      @error '"#{$ruleset}" is not an available typography preset.';
+    }
+
+    $ruleset: map.get($all-typographies, $ruleset);
+  }
+
+  // Ruleset is a list of rules - extract rules.
+  @if type-of($ruleset) == list {
+    $ruleset: _ct-typography-extract-rules($ruleset);
+
+    @if $rule-name {
+      @return map.get($ruleset, $rule-name);
+    }
+  }
+
+  // Ruleset is a full ruleset definition - print all rules with breakpoints.
+  @else if type-of($ruleset) == map {
+    $breakpoints: map.keys($ruleset);
+
+    @if $rule-name == false and $rule-breakpoint == false {
+      @return $ruleset;
+    }
+
+    @each $breakpoint in $breakpoints {
+      $breakpoint-ruleset: _ct-typography-extract-rules(map.get($ruleset, $breakpoint));
+
+      // Return requested rule if it matches the breakpoint.
+      @if $rule-name and $rule-breakpoint and $breakpoint == $rule-breakpoint {
+        @return map.get($breakpoint-ruleset, $rule-name);
+      }
+    }
+  }
+
+  @error 'Requested typography rule or breakpoint not found.';
+}
+
+//
+// Print css variables for typography rules.
+//
+// Do not use directly.
+//
+@mixin _ct-typography-print-css-variables($name, $map) {
+  --ct-typography-#{$name}-font-size: #{map.get($map, 'font-size')};
+  --ct-typography-#{$name}-line-height: #{map.get($map, 'line-height')};
+
+  @if map.get($map, 'font-name') {
+    --ct-typography-#{$name}-font-name: #{map.get($map, 'font-name')};
+  }
+
+  @if map.get($map, 'font-weight') {
+    --ct-typography-#{$name}-font-weight: #{map.get($map, 'font-weight')};
+  }
+
+  @if map.get($map, 'letter-spacing') {
+    --ct-typography-#{$name}-letter-spacing: #{map.get($map, 'letter-spacing')};
+  }
+}
+
+//
+// Normalize typography rules and return as a map.
+//
+// Do not use directly.
+//
+// stylelint-disable-next-line scss/at-function-pattern
+@function _ct-typography-extract-rules($rules) {
+  $font-size: list.nth($rules, 1);
+  $line-height: list.nth($rules, 2);
+  $font-weight: false;
+  $font-name: false;
+  $letter-spacing: false;
+
+  @if length($rules) >= 3 {
+    $font-weight: list.nth($rules, 3);
+  }
+
+  @if length($rules) >= 4 {
+    $font-name: list.nth($rules, 4);
+  }
+
+  @if length($rules) >= 5 {
+    $letter-spacing: list.nth($rules, 5);
+  }
+
+  @if $font-name {
+    $font-name: ct-font($font-name);
+  }
+
+  @if $font-weight {
+    // Try to get the weight value from the pre-defined weights or default
+    // to the provided value.
+    $font-weight-value: map.get(_ct-font-weights-all(), $font-weight);
+
+    @if $font-weight-value != null {
+      $font-weight: $font-weight-value;
+    }
+  }
+
+  $map: (
+    'font-size': rem($font-size),
+    'line-height': rem($line-height),
+    'font-weight': $font-weight,
+    'font-name': $font-name,
+    'letter-spacing': $letter-spacing,
+  );
+
+  @return $map;
+}
+
+//
+// Compile all typographies into a single map.
+//
+// Do not use directly.
+// Use @include ct-typography() mixin instead.
+//
+// stylelint-disable-next-line scss/at-function-pattern
+@function _ct-typography-all() {
+  @return map.merge($ct-typography-default, $ct-typography);
+}
+
+@mixin ct-font-size-inherit() {
+  font-size: inherit;
+  line-height: inherit;
+}

package/components/00-base/mixins/_visibility.scss

@@ -0,0 +1,27 @@
+//
+// Visibility mixins.
+//
+
+//
+// Make element visually hidden but readable by screen readers.
+//
+@mixin ct-visually-hidden() {
+  position: absolute !important;
+  clip: rect(ct-particle(0.125), ct-particle(0.125), ct-particle(0.125), ct-particle(0.125));
+  overflow: hidden;
+  height: 1px !important;
+  width: 1px !important;
+  word-wrap: normal;
+
+  &.ct-focusable {
+    &:active,
+    &:focus-visible,
+    &:hover {
+      position: static !important;
+      overflow: visible;
+      clip: auto;
+      width: auto !important;
+      height: auto !important;
+    }
+  }
+}

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

@@ -0,0 +1,27 @@
+/**
+ * @file
+ * Platform utility.
+ */
+
+function CivicThemePlatform(el) {
+  function iOS() {
+    return [
+      'iPad Simulator',
+      'iPhone Simulator',
+      'iPod Simulator',
+      'iPad',
+      'iPhone',
+      'iPod',
+    ].includes(navigator.platform)
+    // iPad on iOS 13 detection
+    || (navigator.userAgent.includes('Mac') && 'ontouchend' in document);
+  }
+
+  if (iOS()) {
+    el.dataset.platform = 'ios';
+  }
+}
+
+document.querySelectorAll('[data-platform]').forEach((el) => {
+  new CivicThemePlatform(el);
+});

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

@@ -0,0 +1,186 @@
+/**
+ * @file
+ * Responsive component.
+ *
+ * Emits a 'ct-responsive' event on breakpoint change allowing
+ * components to delay initialisation by providing 'data-responsive' attribute
+ * with an operator and breakpoint name.
+ *
+ * For example: a component with `data-responsive=">=m"` attribute will
+ * delay its initialisation to happen only when current screen size is equal
+ * or more than medium ('m') breakpoint.
+ */
+function CivicThemeResponsive() {
+  const queries = this.getMediaQueries();
+  for (const breakpoint in queries) {
+    const query = queries[breakpoint];
+    // Store matched media queries in global scope as this component is a
+    // singleton.
+    window.civicthemeResponsive = window.civicthemeResponsive || {};
+    // Only proceed if this query was not processed previously.
+    if (!(query in window.civicthemeResponsive)) {
+      window.civicthemeResponsive[query] = window.matchMedia(query);
+      // Support for Safari 13.
+      const hasEventListener = (window.civicthemeResponsive[query].addEventListener !== undefined);
+      if (hasEventListener) {
+        window.civicthemeResponsive[query]
+          .addEventListener('change', this.mediaQueryChange.bind(this, breakpoint));
+      } else {
+        window.civicthemeResponsive[query]
+          .addListener(this.mediaQueryChange.bind(this, breakpoint));
+      }
+    }
+    // Call event handler on init.
+    this.mediaQueryChange(breakpoint, { matches: window.civicthemeResponsive[query].matches });
+  }
+}
+
+/**
+ * Breakpoints map.
+ */
+CivicThemeResponsive.prototype.breakpoints = {
+  xxs: '0px',
+  xs: '368px',
+  s: '576px',
+  m: '768px',
+  l: '992px',
+  xl: '1280px',
+  xxl: '1440px',
+};
+
+/**
+ * Get an object of media queries.
+ *
+ * @return object
+ *   Keys are breakpoint names, and values a media queries.
+ */
+CivicThemeResponsive.prototype.getMediaQueries = function () {
+  const queries = {};
+
+  const firstBp = Object.keys(this.breakpoints)[0];
+  let lastBp = firstBp;
+  for (const breakpoint in this.breakpoints) {
+    if (breakpoint === firstBp) {
+      continue;
+    }
+    const min = this.breakpoints[lastBp];
+    const max = `${Math.max(parseFloat(this.breakpoints[breakpoint]) - 0.02, 0)}px`;
+    if (lastBp === firstBp) {
+      queries[lastBp] = `screen and (max-width: ${max})`;
+    } else {
+      queries[lastBp] = `screen and (min-width: ${min}) and (max-width: ${max})`;
+    }
+    lastBp = breakpoint;
+  }
+  queries[lastBp] = `screen and (min-width: ${this.breakpoints[lastBp]})`;
+
+  return queries;
+};
+
+/**
+ * Event handler for the media query change event.
+ *
+ * @param {string} breakpoint
+ *   The breakpoint name for which this event was fired.
+ * @param {Event} evt
+ *   The media query change event.
+ */
+CivicThemeResponsive.prototype.mediaQueryChange = function (breakpoint, evt) {
+  if (!evt.matches) {
+    return;
+  }
+  // Fire a custom event that other components can subscribe to.
+  window.dispatchEvent(new CustomEvent('ct-responsive', {
+    bubbles: true,
+    detail: {
+      breakpoint,
+      evaluate: CivicThemeResponsive.prototype.evaluate,
+    },
+  }));
+};
+
+/**
+ * Evaluate breakpoint expression and attach or detach component.
+ *
+ * @param {string} breakpointExpr
+ *   The breakpoint expression.
+ * @param {object} func
+ *   Function or class constructor.
+ * @param {object} el
+ *   Element to be passed to the constructor.
+ *
+ * @return {*}
+ *   Attached object or false if expression did not match.
+ */
+CivicThemeResponsive.prototype.evaluate = function (breakpointExpr, func, el) {
+  if (CivicThemeResponsive.prototype.matchExpr(breakpointExpr, this.breakpoint)) {
+    // eslint-disable-next-line new-cap
+    return new func(el);
+  }
+  if (typeof func.prototype.destroy !== 'undefined') {
+    func.prototype.destroy(el);
+    return true;
+  }
+  return false;
+};
+
+/**
+ * Match breakpoint expression to the passed breakpoint.
+ *
+ * Used by the listeners to decide when to respond to a query.
+ *
+ * @param {string} breakpointExpr
+ *   The breakpoint expression. E.g. '>=m', '<s' etc.
+ *   Supported operators are: <, >, =, >=, <=, <>. Defaults to '>='.
+ *   Breakpoint names are matched to the
+ *   CivicThemeResponsive.prototype.breakpoints.
+ *
+ * @param {string} breakpoint
+ *   Currently active breakpoint.
+ *
+ * @return {boolean}
+ *   True if expression matches current breakppint, false otherwise.
+ */
+CivicThemeResponsive.prototype.matchExpr = function (breakpointExpr, breakpoint) {
+  const names = Object.keys(CivicThemeResponsive.prototype.breakpoints);
+  // Parse breakpoint expression into name and operator.
+  const regex = `^(<|>|=|>=|<=|<>)?(${names.join('|')})$`;
+  const matches = breakpointExpr.match(new RegExp(regex, 'i'));
+
+  // If not matched (malformed expression) or not exactly expected number of
+  // matches - consider as a non-match.
+  if (!matches || matches.length < 2 || matches.length > 3) {
+    return false;
+  }
+
+  // Can be with or without an operator, i.e. '>=m' or 'm'.
+  const parsedOperator = matches[1] || '>=';
+  const parsedBreakpoint = matches[2];
+
+  const compFunctions = {
+    '>': (parsed, current) => names.indexOf(current) > names.indexOf(parsed),
+    '>=': (parsed, current) => names.indexOf(current) >= names.indexOf(parsed),
+    '<': (parsed, current) => names.indexOf(current) < names.indexOf(parsed),
+    '<=': (parsed, current) => names.indexOf(current) <= names.indexOf(parsed),
+    '<>': (parsed, current) => names.indexOf(current) !== names.indexOf(parsed),
+    '=': (parsed, current) => names.indexOf(current) === names.indexOf(parsed),
+  };
+
+  return compFunctions[parsedOperator](parsedBreakpoint, breakpoint);
+};
+
+if (document.querySelectorAll('[data-responsive]').length) {
+  // CivicThemeResponsive needs to run after all ct-responisve
+  // event listeners have been added.
+  // Delay the execution until after other components have been initialized.
+  // Using setTimeout as an interim solution because:
+  // - DOMContentLoad won't work on prod-site due to being double wrapped in a
+  //   DOMLoad event.
+  // - window 'load' event won't work on storybook as it's not called per
+  //   component page change.
+  setTimeout(() => {
+    // Init if there is at least a single component with data-responsive
+    // attribute on the page.
+    new CivicThemeResponsive();
+  }, 10);
+}

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

@@ -0,0 +1,17 @@
+import Component from './responsive.stories.twig';
+
+const meta = {
+  title: 'Base/Utilities/Responsive',
+  component: Component,
+};
+
+export default meta;
+
+export const Responsive = {
+  parameters: {
+    layout: 'centered',
+    html: {
+      disable: true,
+    },
+  },
+};