@dta-au/civictheme-twig 1.13.1

package/components/00-base/icon/__snapshots__/icon.test.js.snap

@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Icon Component does not render when symbol is empty 1`] = `<div />`;
+
+exports[`Icon Component renders with additional attributes and classes 1`] = `
+<div>
+  <svg
+    aria-hidden="true"
+    class="ct-icon custom-modifier"
+    data-test="true"
+    height="24"
+    role="img"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    
+
+    <path
+      d="M13.4099 11.9999L19.7099 5.70994C19.8982 5.52164 20.004 5.26624 20.004 4.99994C20.004 4.73364 19.8982 4.47825 19.7099 4.28994C19.5216 4.10164 19.2662 3.99585 18.9999 3.99585C18.7336 3.99585 18.4782 4.10164 18.2899 4.28994L11.9999 10.5899L5.70994 4.28994C5.52164 4.10164 5.26624 3.99585 4.99994 3.99585C4.73364 3.99585 4.47824 4.10164 4.28994 4.28994C4.10164 4.47825 3.99585 4.73364 3.99585 4.99994C3.99585 5.26624 4.10164 5.52164 4.28994 5.70994L10.5899 11.9999L4.28994 18.2899C4.19621 18.3829 4.12182 18.4935 4.07105 18.6154C4.02028 18.7372 3.99414 18.8679 3.99414 18.9999C3.99414 19.132 4.02028 19.2627 4.07105 19.3845C4.12182 19.5064 4.19621 19.617 4.28994 19.7099C4.3829 19.8037 4.4935 19.8781 4.61536 19.9288C4.73722 19.9796 4.86793 20.0057 4.99994 20.0057C5.13195 20.0057 5.26266 19.9796 5.38452 19.9288C5.50638 19.8781 5.61698 19.8037 5.70994 19.7099L11.9999 13.4099L18.2899 19.7099C18.3829 19.8037 18.4935 19.8781 18.6154 19.9288C18.7372 19.9796 18.8679 20.0057 18.9999 20.0057C19.132 20.0057 19.2627 19.9796 19.3845 19.9288C19.5064 19.8781 19.617 19.8037 19.7099 19.7099C19.8037 19.617 19.8781 19.5064 19.9288 19.3845C19.9796 19.2627 20.0057 19.132 20.0057 18.9999C20.0057 18.8679 19.9796 18.7372 19.9288 18.6154C19.8781 18.4935 19.8037 18.3829 19.7099 18.2899L13.4099 11.9999Z"
+    />
+    
+
+  </svg>
+  
+
+</div>
+`;
+
+exports[`Icon Component renders with custom size 1`] = `
+<div>
+  <svg
+    aria-hidden="true"
+    class="ct-icon ct-icon--size-large"
+    height="24"
+    role="img"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    
+
+    <path
+      d="M13.4099 11.9999L19.7099 5.70994C19.8982 5.52164 20.004 5.26624 20.004 4.99994C20.004 4.73364 19.8982 4.47825 19.7099 4.28994C19.5216 4.10164 19.2662 3.99585 18.9999 3.99585C18.7336 3.99585 18.4782 4.10164 18.2899 4.28994L11.9999 10.5899L5.70994 4.28994C5.52164 4.10164 5.26624 3.99585 4.99994 3.99585C4.73364 3.99585 4.47824 4.10164 4.28994 4.28994C4.10164 4.47825 3.99585 4.73364 3.99585 4.99994C3.99585 5.26624 4.10164 5.52164 4.28994 5.70994L10.5899 11.9999L4.28994 18.2899C4.19621 18.3829 4.12182 18.4935 4.07105 18.6154C4.02028 18.7372 3.99414 18.8679 3.99414 18.9999C3.99414 19.132 4.02028 19.2627 4.07105 19.3845C4.12182 19.5064 4.19621 19.617 4.28994 19.7099C4.3829 19.8037 4.4935 19.8781 4.61536 19.9288C4.73722 19.9796 4.86793 20.0057 4.99994 20.0057C5.13195 20.0057 5.26266 19.9796 5.38452 19.9288C5.50638 19.8781 5.61698 19.8037 5.70994 19.7099L11.9999 13.4099L18.2899 19.7099C18.3829 19.8037 18.4935 19.8781 18.6154 19.9288C18.7372 19.9796 18.8679 20.0057 18.9999 20.0057C19.132 20.0057 19.2627 19.9796 19.3845 19.9288C19.5064 19.8781 19.617 19.8037 19.7099 19.7099C19.8037 19.617 19.8781 19.5064 19.9288 19.3845C19.9796 19.2627 20.0057 19.132 20.0057 18.9999C20.0057 18.8679 19.9796 18.7372 19.9288 18.6154C19.8781 18.4935 19.8037 18.3829 19.7099 18.2899L13.4099 11.9999Z"
+    />
+    
+
+  </svg>
+  
+
+</div>
+`;
+
+exports[`Icon Component renders with default values 1`] = `
+<div>
+  <svg
+    aria-hidden="true"
+    class="ct-icon"
+    height="24"
+    role="img"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    
+
+    <path
+      d="M13.4099 11.9999L19.7099 5.70994C19.8982 5.52164 20.004 5.26624 20.004 4.99994C20.004 4.73364 19.8982 4.47825 19.7099 4.28994C19.5216 4.10164 19.2662 3.99585 18.9999 3.99585C18.7336 3.99585 18.4782 4.10164 18.2899 4.28994L11.9999 10.5899L5.70994 4.28994C5.52164 4.10164 5.26624 3.99585 4.99994 3.99585C4.73364 3.99585 4.47824 4.10164 4.28994 4.28994C4.10164 4.47825 3.99585 4.73364 3.99585 4.99994C3.99585 5.26624 4.10164 5.52164 4.28994 5.70994L10.5899 11.9999L4.28994 18.2899C4.19621 18.3829 4.12182 18.4935 4.07105 18.6154C4.02028 18.7372 3.99414 18.8679 3.99414 18.9999C3.99414 19.132 4.02028 19.2627 4.07105 19.3845C4.12182 19.5064 4.19621 19.617 4.28994 19.7099C4.3829 19.8037 4.4935 19.8781 4.61536 19.9288C4.73722 19.9796 4.86793 20.0057 4.99994 20.0057C5.13195 20.0057 5.26266 19.9796 5.38452 19.9288C5.50638 19.8781 5.61698 19.8037 5.70994 19.7099L11.9999 13.4099L18.2899 19.7099C18.3829 19.8037 18.4935 19.8781 18.6154 19.9288C18.7372 19.9796 18.8679 20.0057 18.9999 20.0057C19.132 20.0057 19.2627 19.9796 19.3845 19.9288C19.5064 19.8781 19.617 19.8037 19.7099 19.7099C19.8037 19.617 19.8781 19.5064 19.9288 19.3845C19.9796 19.2627 20.0057 19.132 20.0057 18.9999C20.0057 18.8679 19.9796 18.7372 19.9288 18.6154C19.8781 18.4935 19.8037 18.3829 19.7099 18.2899L13.4099 11.9999Z"
+    />
+    
+
+  </svg>
+  
+
+</div>
+`;

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

@@ -0,0 +1,21 @@
+//
+// CivicTheme Icon component styles.
+//
+
+@use 'sass:map';
+
+.ct-icon {
+  fill: currentcolor;
+
+  // Size-less icons inherit dimensions from container's font-size.
+  width: 1em;
+  height: 1em;
+  vertical-align: middle;
+
+  // Generate size classes for all pre-set sizes.
+  @each $size, $values in _ct-icon-sizes-all() {
+    &--size-#{$size} {
+      @include ct-icon-size($size);
+    }
+  }
+}

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

@@ -0,0 +1,46 @@
+/**
+ * CivicTheme Icon component stories.
+ */
+
+import Component from './icon.twig';
+import Constants from '../../../dist/constants.json';
+
+const meta = {
+  title: 'Base/Icon',
+  component: Component,
+  argTypes: {
+    symbol: {
+      control: { type: 'select' },
+      options: Constants.ICONS,
+    },
+    size: {
+      control: { type: 'radio' },
+      options: [
+        'auto',
+        ...Object.keys(Constants.SCSS_VARIABLES['ct-icon-sizes-default']),
+        ...Object.keys(Constants.SCSS_VARIABLES['ct-icon-sizes']),
+      ],
+    },
+    modifier_class: {
+      control: { type: 'text' },
+    },
+    assets_dir: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+export default meta;
+
+export const Icon = {
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    symbol: Constants.ICONS[0],
+    size: 'auto',
+    modifier_class: '',
+    attributes: null,
+    assets_dir: '@civictheme/../assets',
+  },
+};

package/components/00-base/icon/icon.test.js

@@ -0,0 +1,53 @@
+import DrupalAttribute from 'drupal-attribute';
+
+const template = 'components/00-base/icon/icon.twig';
+
+describe('Icon Component', () => {
+  test('renders with default values', async () => {
+    const c = await dom(template, {
+      symbol: 'close',
+    });
+
+    expect(c.querySelectorAll('.ct-icon')).toHaveLength(1);
+    expect(c.querySelectorAll('.ct-icon[aria-hidden="true"]')).toHaveLength(1);
+    expect(c.querySelectorAll('.ct-icon[role="img"]')).toHaveLength(1);
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with custom size', async () => {
+    const c = await dom(template, {
+      symbol: 'close',
+      size: 'large',
+    });
+
+    expect(c.querySelectorAll('.ct-icon.ct-icon--size-large')).toHaveLength(1);
+    expect(c.querySelectorAll('.ct-icon[aria-hidden="true"]')).toHaveLength(1);
+    expect(c.querySelectorAll('.ct-icon[role="img"]')).toHaveLength(1);
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with additional attributes and classes', async () => {
+    const c = await dom(template, {
+      symbol: 'close',
+      modifier_class: 'custom-modifier',
+      attributes: new DrupalAttribute().setAttribute('data-test', 'true'),
+    });
+
+    expect(c.querySelectorAll('.ct-icon.custom-modifier')).toHaveLength(1);
+    expect(c.querySelectorAll('.ct-icon[data-test="true"]')).toHaveLength(1);
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('does not render when symbol is empty', async () => {
+    const c = await dom(template, {
+      symbol: '',
+    });
+
+    expect(c.querySelectorAll('.ct-icon')).toHaveLength(0);
+
+    assertUniqueCssClasses(c);
+  });
+});

package/components/00-base/icon/icon.twig

@@ -0,0 +1,35 @@
+{#
+/**
+ * @file
+ * CivicTheme Icon component.
+ *
+ * Props:
+ * - symbol: [string,null] Icon name (required).
+ * - size: [string,null] Icon size.
+ * - modifier_class: [string] Additional CSS classes.
+ * - assets_dir: [string,null] Directory containing icon assets.
+ * - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
+ */
+#}
+
+{%- set assets_dir = assets_dir|default('@civictheme/../assets') -%}
+
+{%- if symbol is not empty %}
+  {%- set source = source(assets_dir ~ '/icons/' ~ symbol ~ '.svg', true) -%}
+  {%- if source is not empty -%}
+
+    {%- set attr = attributes is defined and attributes is not null ? attributes : create_attribute({}) -%}
+    {%- do attr.addClass('ct-icon') -%}
+    {%- if size -%}
+      {%- do attr.addClass('ct-icon--size-' ~ size) -%}
+    {%- endif -%}
+    {%- set class_arr = modifier_class|split(' ') -%}
+    {%- for class in class_arr -%}
+      {%- do attr.addClass(class) -%}
+    {%- endfor -%}
+    {%- do attr.setAttribute('aria-hidden', 'true') -%}
+    {%- do attr.setAttribute('role', 'img') -%}
+
+    {{- source|replace({'<svg ': '<svg ' ~ attr ~ ' '})|raw -}}
+  {%- endif -%}
+{%- endif -%}

package/components/00-base/icon/icon.utils.js

@@ -0,0 +1,35 @@
+/**
+ * @file
+ * Icon component utilities.
+ */
+
+import fs from 'fs';
+import pathUtil from 'path';
+
+const basePath = pathUtil.resolve(import.meta.dirname, '../../../assets/icons');
+
+function getIconPaths() {
+  const iconPaths = [];
+  const iconFiles = fs.readdirSync(basePath);
+  const EXTENSION = '.svg';
+
+  iconFiles.forEach((file) => {
+    if (pathUtil.extname(file).toLowerCase() === EXTENSION) {
+      iconPaths.push(`${basePath}/${file}`);
+    }
+  });
+
+  return iconPaths;
+}
+
+function getIconNameFromPath(path) {
+  return path.replace(basePath, '').substring(1).replace('.svg', '');
+}
+
+function getIcons() {
+  return getIconPaths().map((path) => getIconNameFromPath(path));
+}
+
+export default {
+  getIcons,
+};

package/components/00-base/item-list/__snapshots__/item-list.test.js.snap

@@ -0,0 +1,255 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Link List Component does not render when items are empty 1`] = `
+<div>
+  
+
+
+</div>
+`;
+
+exports[`Link List Component renders with custom attributes and classes 1`] = `
+<div>
+  
+
+  
+  <ul
+    class="ct-item-list ct-item-list--horizontal ct-item-list--regular  custom-modifier"
+    data-test="true"
+  >
+    
+                  
+    <li
+      class="ct-item-list__item"
+    >
+      <a
+        href="/"
+      >
+        Home
+      </a>
+    </li>
+    
+                        
+    <li
+      class="ct-item-list__item"
+    >
+      <a
+        href="/about"
+      >
+        About
+      </a>
+    </li>
+    
+                        
+    <li
+      class="ct-item-list__item"
+    >
+      <a
+        href="/contact"
+      >
+        Contact
+      </a>
+    </li>
+    
+            
+  </ul>
+  
+
+</div>
+`;
+
+exports[`Link List Component renders with default values 1`] = `
+<div>
+  
+
+  
+  <ul
+    class="ct-item-list ct-item-list--horizontal ct-item-list--regular  "
+  >
+    
+                  
+    <li
+      class="ct-item-list__item"
+    >
+      <a
+        href="/"
+      >
+        Home
+      </a>
+    </li>
+    
+                        
+    <li
+      class="ct-item-list__item"
+    >
+      <a
+        href="/about"
+      >
+        About
+      </a>
+    </li>
+    
+                        
+    <li
+      class="ct-item-list__item"
+    >
+      <a
+        href="/contact"
+      >
+        Contact
+      </a>
+    </li>
+    
+            
+  </ul>
+  
+
+</div>
+`;
+
+exports[`Link List Component renders with large size 1`] = `
+<div>
+  
+
+  
+  <ul
+    class="ct-item-list ct-item-list--horizontal ct-item-list--large  "
+  >
+    
+                  
+    <li
+      class="ct-item-list__item"
+    >
+      <a
+        href="/"
+      >
+        Home
+      </a>
+    </li>
+    
+                        
+    <li
+      class="ct-item-list__item"
+    >
+      <a
+        href="/about"
+      >
+        About
+      </a>
+    </li>
+    
+                        
+    <li
+      class="ct-item-list__item"
+    >
+      <a
+        href="/contact"
+      >
+        Contact
+      </a>
+    </li>
+    
+            
+  </ul>
+  
+
+</div>
+`;
+
+exports[`Link List Component renders with vertical direction 1`] = `
+<div>
+  
+
+  
+  <ul
+    class="ct-item-list ct-item-list--vertical ct-item-list--regular  "
+  >
+    
+                  
+    <li
+      class="ct-item-list__item"
+    >
+      <a
+        href="/"
+      >
+        Home
+      </a>
+    </li>
+    
+                        
+    <li
+      class="ct-item-list__item"
+    >
+      <a
+        href="/about"
+      >
+        About
+      </a>
+    </li>
+    
+                        
+    <li
+      class="ct-item-list__item"
+    >
+      <a
+        href="/contact"
+      >
+        Contact
+      </a>
+    </li>
+    
+            
+  </ul>
+  
+
+</div>
+`;
+
+exports[`Link List Component renders without gaps 1`] = `
+<div>
+  
+
+  
+  <ul
+    class="ct-item-list ct-item-list--horizontal ct-item-list--regular ct-item-list--no-gap "
+  >
+    
+                  
+    <li
+      class="ct-item-list__item"
+    >
+      <a
+        href="/"
+      >
+        Home
+      </a>
+    </li>
+    
+                        
+    <li
+      class="ct-item-list__item"
+    >
+      <a
+        href="/about"
+      >
+        About
+      </a>
+    </li>
+    
+                        
+    <li
+      class="ct-item-list__item"
+    >
+      <a
+        href="/contact"
+      >
+        Contact
+      </a>
+    </li>
+    
+            
+  </ul>
+  
+
+</div>
+`;

package/components/00-base/item-list/item-list.scss

@@ -0,0 +1,66 @@
+//
+// CivicTheme Item List component styles.
+//
+
+@use 'sass:math';
+@import '../mixins/reset';
+
+.ct-item-list {
+  $root: &;
+
+  @include ct-reset-box-model();
+
+  list-style: none;
+
+  &#{$root}--horizontal {
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: $ct-item-list-horizontal-regular-column-gap;
+    row-gap: $ct-item-list-horizontal-regular-row-gap;
+
+    &#{$root}--small {
+      column-gap: $ct-item-list-horizontal-small-column-gap;
+      row-gap: $ct-item-list-horizontal-small-row-gap;
+    }
+
+    &#{$root}--large {
+      column-gap: math.div($ct-item-list-horizontal-large-column-gap, 2);
+      row-gap: math.div($ct-item-list-horizontal-large-row-gap, 2);
+
+      @include ct-breakpoint($ct-grid-responsive-breakpoint) {
+        column-gap: $ct-item-list-horizontal-large-column-gap;
+        row-gap: $ct-item-list-horizontal-large-row-gap;
+      }
+    }
+
+    &#{$root}--no-gap {
+      gap: unset;
+    }
+  }
+
+  &#{$root}--vertical {
+    display: flex;
+    flex-direction: column;
+    column-gap: $ct-item-list-vertical-regular-column-gap;
+    row-gap: $ct-item-list-vertical-regular-row-gap;
+
+    &#{$root}--small {
+      column-gap: $ct-item-list-vertical-small-column-gap;
+      row-gap: $ct-item-list-vertical-small-row-gap;
+    }
+
+    &#{$root}--large {
+      column-gap: math.div($ct-item-list-vertical-large-column-gap, 2);
+      row-gap: math.div($ct-item-list-vertical-large-row-gap, 2);
+
+      @include ct-breakpoint($ct-grid-responsive-breakpoint) {
+        column-gap: $ct-item-list-vertical-large-column-gap;
+        row-gap: $ct-item-list-vertical-large-row-gap;
+      }
+    }
+
+    &#{$root}--no-gap {
+      gap: unset;
+    }
+  }
+}

package/components/00-base/item-list/item-list.stories.js

@@ -0,0 +1,49 @@
+/**
+ * CivicTheme Item List component stories.
+ */
+
+import Component from './item-list.twig';
+
+const meta = {
+  title: 'Base/Item List',
+  component: Component,
+  argTypes: {
+    direction: {
+      control: { type: 'radio' },
+      options: ['horizontal', 'vertical'],
+    },
+    size: {
+      control: { type: 'radio' },
+      options: ['large', 'regular', 'small'],
+    },
+    no_gap: {
+      control: { type: 'boolean' },
+    },
+    items: {
+      control: { type: 'array' },
+    },
+    modifier_class: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+export default meta;
+
+export const ItemList = {
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    direction: 'horizontal',
+    size: 'regular',
+    no_gap: false,
+    items: [
+      '<div class="story-placeholder" contenteditable="true">Content placeholder<div>',
+      '<div class="story-placeholder" contenteditable="true">Content placeholder<div>',
+      '<div class="story-placeholder" contenteditable="true">Content placeholder<div>',
+    ],
+    modifier_class: '',
+    attributes: null,
+  },
+};