@dta-au/civictheme-twig 1.13.1

package/components/01-atoms/select/select.scss

@@ -0,0 +1,105 @@
+//
+// CivicTheme Select component styles.
+//
+
+@use 'sass:math';
+
+.ct-select {
+  $root: &;
+  $_vertical-padding: ct-spacing(2);
+  $_horizontal-padding: $_vertical-padding;
+  $_border-width: ct-particle(0.125);
+  $_hover-border-width: $_border-width * 2;
+  $_label-size: 'label-small';
+  $_label-font-size: ct-typography-rule($_label-size, 'font-size', 'm');
+  $_label-line_height: ct-typography-rule($_label-size, 'line-height', 'm');
+  $_label-font-size-actual: math.max($_label-font-size, $_label-line_height);
+  $_icon-height: $_vertical-padding + $_label-font-size-actual + $_border-width;
+
+  // Icon height drives the width because it is used as a background image.
+  $_icon-width: $_icon-height;
+
+  @include ct-form-control-no-appearance();
+  @include ct-form-control-disabled(var(--ct-select-disabled-opacity));
+  @include ct-typography($_label-size);
+
+  & {
+    width: 100%;
+
+    // Show at least 5 characters.
+    min-width: calc($_icon-width + $_horizontal-padding * 2 + var(--ct-font-average-character-width) * 5rem);
+    border-radius: var(--ct-select-border-radius);
+    border-style: solid;
+    border-width: $_border-width;
+    padding: ct-spacing(1.625) $_horizontal-padding + $_icon-width ct-spacing(1.625) $_horizontal-padding;
+
+    // Visually move icon off the edge by the width of the border.
+    background-position: calc(100% - $_border-width);
+    background-repeat: no-repeat;
+    background-size: $_icon-height;
+  }
+
+  &:focus-visible {
+    outline-style: solid;
+    outline-width: var(--ct-select-outline-width);
+    outline-offset: var(--ct-select-outline-offset);
+  }
+
+  @include ct-component-theme($root) using($root, $theme) {
+    @if $theme == 'dark' {
+      background-image: var(--ct-select-dark-icon);
+    }
+    @else {
+      background-image: var(--ct-select-light-icon);
+    }
+
+    &[multiple] {
+      background: none;
+    }
+
+    &:focus-visible {
+      @include ct-component-property($root, $theme, outline-color);
+    }
+
+    &:not(#{$root}--is-invalid) {
+      @include ct-component-property($root, $theme, color);
+      @include ct-component-property($root, $theme, border-color);
+      @include ct-component-property($root, $theme, background-color);
+
+      &::placeholder {
+        @include ct-component-property($root, $theme, color);
+      }
+
+      option {
+        &:checked {
+          @include ct-component-property($root, $theme, option, background-color);
+          @include ct-component-property($root, $theme, option, color);
+        }
+      }
+
+      &:hover {
+        @include ct-component-property($root, $theme, hover, color);
+        @include ct-component-property($root, $theme, hover, border-color);
+        @include ct-component-property($root, $theme, hover, background-color);
+        @include ct-form-control-border-inset(ct-component-var($root, $theme, hover, border-color), $_hover-border-width - $_border-width);
+      }
+
+      &:focus-visible {
+        @include ct-component-property($root, $theme, focus, color);
+        @include ct-component-property($root, $theme, focus, border-color);
+        @include ct-component-property($root, $theme, focus, background-color);
+      }
+    }
+
+    &#{$root}--is-invalid {
+      @include ct-component-property($root, $theme, invalid, color);
+      @include ct-component-property($root, $theme, invalid, border-color);
+      @include ct-component-property($root, $theme, invalid, background-color);
+      @include ct-form-control-border-inset(ct-component-var($root, $theme, invalid, border-color), $_hover-border-width - $_border-width);
+
+      &::placeholder {
+        @include ct-component-property($root, $theme, invalid, color);
+      }
+    }
+  }
+}

package/components/01-atoms/select/select.stories.js

@@ -0,0 +1,81 @@
+/**
+ * CivicTheme Select component stories.
+ */
+
+import Component from './select.twig';
+
+const meta = {
+  title: 'Atoms/Form Controls/Select',
+  component: Component,
+  argTypes: {
+    theme: {
+      control: { type: 'radio' },
+      options: ['light', 'dark'],
+    },
+    is_multiple: {
+      control: { type: 'boolean' },
+    },
+    options: {
+      control: { type: 'array' },
+    },
+    name: {
+      control: { type: 'text' },
+    },
+    id: {
+      control: { type: 'text' },
+    },
+    is_required: {
+      control: { type: 'boolean' },
+    },
+    is_invalid: {
+      control: { type: 'boolean' },
+    },
+    is_disabled: {
+      control: { type: 'boolean' },
+    },
+    modifier_class: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+export default meta;
+
+export const Select = {
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    theme: 'light',
+    is_multiple: false,
+    options: [
+      {
+        type: 'optgroup',
+        label: 'Group label',
+        value: 'Group value',
+        selected: false,
+        options: [
+          {
+            label: 'Option label',
+            value: 'Option value',
+            is_selected: false,
+            is_disabled: false,
+          },
+        ],
+      },
+      {
+        type: 'option',
+        label: 'Option label',
+        value: 'Option value',
+        selected: false,
+      },
+    ],
+    name: 'Select name',
+    id: 'select-id',
+    is_required: false,
+    is_invalid: false,
+    is_disabled: false,
+    attributes: null,
+    modifier_class: '',
+  },
+};

package/components/01-atoms/select/select.test.js

@@ -0,0 +1,117 @@
+import DrupalAttribute from 'drupal-attribute';
+
+const template = 'components/01-atoms/select/select.twig';
+
+describe('Select Component', () => {
+  test('renders with required attributes', async () => {
+    const c = await dom(template, {
+      name: 'test-select',
+      options: [
+        { type: 'option', label: 'Option 1', value: '1' },
+        { type: 'option', label: 'Option 2', value: '2' },
+      ],
+    });
+
+    expect(c.querySelectorAll('.ct-select')).toHaveLength(1);
+    expect(c.querySelector('.ct-select').getAttribute('name')).toEqual('test-select');
+    expect(c.querySelectorAll('option')).toHaveLength(2);
+    expect(c.querySelector('option[value="1"]').textContent.trim()).toEqual('Option 1');
+    expect(c.querySelector('option[value="2"]').textContent.trim()).toEqual('Option 2');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with optional attributes', async () => {
+    const c = await dom(template, {
+      name: 'test-select',
+      id: 'select-id',
+      options: [
+        { type: 'option', label: 'Option 1', value: '1', is_selected: true },
+        { type: 'option', label: 'Option 2', value: '2' },
+        { type: 'option', label: 'Option 3', value: '3', is_disabled: true },
+      ],
+      theme: 'dark',
+      is_multiple: true,
+      is_invalid: true,
+      is_disabled: true,
+      is_required: true,
+      attributes: new DrupalAttribute().setAttribute('data-test', 'true'),
+      modifier_class: 'custom-class',
+    });
+
+    expect(c.querySelectorAll('.ct-select.custom-class.ct-theme-dark.ct-select--is-invalid')).toHaveLength(1);
+    expect(c.querySelector('.ct-select').getAttribute('name')).toEqual('test-select');
+    expect(c.querySelector('.ct-select').getAttribute('id')).toEqual('select-id');
+    expect(c.querySelector('.ct-select').hasAttribute('multiple')).toBe(true);
+    expect(c.querySelector('.ct-select').hasAttribute('disabled')).toBe(true);
+    expect(c.querySelector('.ct-select').hasAttribute('required')).toBe(true);
+    expect(c.querySelector('.ct-select').getAttribute('data-test')).toEqual('true');
+    expect(c.querySelectorAll('option')).toHaveLength(3);
+    expect(c.querySelector('option[value="1"]').hasAttribute('selected')).toBe(true);
+    expect(c.querySelector('option[value="1"]').textContent.trim()).toEqual('Option 1');
+    expect(c.querySelector('option[value="2"]').textContent.trim()).toEqual('Option 2');
+    expect(c.querySelector('option[value="3"]').textContent.trim()).toEqual('Option 3');
+    expect(c.querySelector('option[value="3"]').hasAttribute('disabled')).toBe(true);
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders optgroup with options', async () => {
+    const c = await dom(template, {
+      name: 'test-select',
+      options: [
+        {
+          type: 'optgroup',
+          label: 'Group 1',
+          options: [
+            { label: 'Option 1.1', value: '1.1' },
+            { label: 'Option 1.2', value: '1.2' },
+          ],
+        },
+        {
+          type: 'option',
+          label: 'Option 2',
+          value: '2',
+        },
+      ],
+    });
+
+    expect(c.querySelectorAll('optgroup')).toHaveLength(1);
+    expect(c.querySelector('optgroup[label="Group 1"]')).not.toBeNull();
+    expect(c.querySelector('optgroup[label="Group 1"] option[value="1.1"]').textContent.trim()).toEqual('Option 1.1');
+    expect(c.querySelector('optgroup[label="Group 1"] option[value="1.2"]').textContent.trim()).toEqual('Option 1.2');
+    expect(c.querySelectorAll('option')).toHaveLength(3); // Two in optgroup + one outside
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('does not render when name or options are empty', async () => {
+    let c = await dom(template, {
+      name: '',
+      options: [
+        { type: 'option', label: 'Option 1', value: '1' },
+      ],
+    });
+    expect(c.querySelectorAll('.ct-select')).toHaveLength(0);
+
+    c = await dom(template, {
+      name: 'test-select',
+      options: [],
+    });
+    expect(c.querySelectorAll('.ct-select')).toHaveLength(0);
+  });
+
+  test('strips HTML tags from attribute values', async () => {
+    const c = await dom(template, {
+      name: 'test-select',
+      options: [
+        { type: 'option', label: 'Option 1', value: '1' },
+      ],
+      attributes: new DrupalAttribute().setAttribute('data-test', '<script>alert(1)</script>'),
+    });
+
+    expect(c.querySelector('.ct-select').getAttribute('data-test')).toEqual('<script>alert(1)</script>');
+
+    assertUniqueCssClasses(c);
+  });
+});

package/components/01-atoms/select/select.twig

@@ -0,0 +1,63 @@
+{#
+/**
+ * @file
+ * CivicTheme Select component.
+ *
+ * Props:
+ * - theme: [string] Theme variation (light or dark).
+ * - id: [string] DOM ID attribute.
+ * - name: [string] DOM name (required).
+ * - is_multiple: [boolean] Whether to allow multiple selections.
+ * - options: [array] Options (applies to optgroup type):
+ *   Each item contains:
+ *   - type: [string] Option type (option group or option).
+ *   - label: [string] Option label.
+ *   - value: [string,array] Option value.
+ *   - is_selected: [boolean] Whether the option is selected.
+ *   - is_disabled: [boolean] Whether the select is disabled.
+ *   - options: [array] Options (applies to optgroup type):
+ *     Each item contains:
+ *     - label: [string] Option label.
+ *     - value: [string] Option value.
+ *     - is_selected: [boolean] Whether the option is selected.
+ *     - is_disabled: [boolean] Whether the select is disabled.
+ * - is_invalid: [boolean] Whether the select is invalid.
+ * - is_disabled: [boolean] Whether the select is disabled.
+ * - is_required: [boolean] Whether the select is required.
+ * - modifier_class: [string] Additional CSS classes.
+ * - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
+ */
+#}
+
+{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
+{% set is_invalid_class = is_invalid ? 'ct-select--is-invalid' : '' %}
+{% set modifier_class = '%s %s %s'|format(theme_class, is_invalid_class, modifier_class|default(''))|trim %}
+
+{% if name is not empty and options is not empty %}
+  <select
+    class="ct-select {{ modifier_class -}}"
+    name="{{ name }}"
+    {% if id %}id="{{ id }}"{% endif %}
+    {% if is_multiple %}multiple{% endif %}
+    {% if is_disabled %}disabled{% endif %}
+    {% if is_required %}required{% endif %}
+    {% if is_invalid %}aria-invalid="true"{% endif %}
+    {% if attributes is defined and attributes is not null %}{{- attributes -}}{% endif %}
+  >
+    {% for option in options %}
+      {% if option.type == 'optgroup' %}
+        <optgroup label="{{ option.label }}" {% if option.is_disabled %}disabled{% endif %}>
+          {% for sub_option in option.options %}
+            {% if sub_option.label is not empty %}
+              <option value="{{ sub_option.value|default('') }}" {% if sub_option.is_selected %}selected="selected"{% endif %} {% if sub_option.is_disabled %}disabled{% endif %}>{{ sub_option.label }}</option>
+            {% endif %}
+          {% endfor %}
+        </optgroup>
+      {% elseif option.type == 'option' %}
+        {% if option.label is not empty %}
+          <option value="{{ option.value|default('') }}" {% if option.is_selected %}selected="selected"{% endif %} {% if option.is_disabled %}disabled{% endif %}>{{ option.label }}</option>
+        {% endif %}
+      {% endif %}
+    {% endfor %}
+  </select>
+{% endif %}

package/components/01-atoms/table/__snapshots__/table.test.js.snap

@@ -0,0 +1,206 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Table Component does not render when all content arrays are empty 1`] = `
+<div>
+  
+
+
+</div>
+`;
+
+exports[`Table Component renders with optional attributes 1`] = `
+<div>
+  
+
+  
+  <table
+    class="ct-table ct-theme-dark ct-table--caption-after ct-table--striped  custom-class"
+    data-test="true"
+  >
+    
+          
+    <caption>
+      Sample Table Caption
+    </caption>
+    
+    
+          
+    <thead>
+      
+      
+      <tr>
+        
+                  
+        <th
+          scope="col"
+        >
+          Header 1
+        </th>
+        
+                  
+        <th
+          scope="col"
+        >
+          Header 2
+        </th>
+        
+              
+      </tr>
+      
+      
+    </thead>
+    
+    
+          
+    <tbody>
+      
+              
+      <tr>
+        
+                                                                                          
+        <td
+          data-title="Header 1"
+        >
+          
+              Row 1, Col 1
+            
+        </td>
+        
+                                                                                          
+        <td
+          data-title="Header 2"
+        >
+          
+              Row 1, Col 2
+            
+        </td>
+        
+                  
+      </tr>
+      
+              
+      <tr>
+        
+                                                                                          
+        <td
+          data-title="Header 1"
+        >
+          
+              Row 2, Col 1
+            
+        </td>
+        
+                                                                                          
+        <td
+          data-title="Header 2"
+        >
+          
+              Row 2, Col 2
+            
+        </td>
+        
+                  
+      </tr>
+      
+            
+    </tbody>
+    
+    
+          
+    <tfoot>
+      
+              
+                  
+      <tr>
+        
+                          
+        <th
+          scope="col"
+        >
+          Footer 1
+        </th>
+        
+                          
+        <th
+          scope="col"
+        >
+          Footer 2
+        </th>
+        
+                      
+      </tr>
+      
+                    
+    </tfoot>
+    
+      
+  </table>
+  
+
+</div>
+`;
+
+exports[`Table Component renders with required attributes 1`] = `
+<div>
+  
+
+  
+  <table
+    class="ct-table ct-theme-light ct-table--caption-before   "
+  >
+    
+    
+    
+          
+    <tbody>
+      
+              
+      <tr>
+        
+                                  
+        <td>
+          
+              Row 1, Col 1
+            
+        </td>
+        
+                                  
+        <td>
+          
+              Row 1, Col 2
+            
+        </td>
+        
+                  
+      </tr>
+      
+              
+      <tr>
+        
+                                  
+        <td>
+          
+              Row 2, Col 1
+            
+        </td>
+        
+                                  
+        <td>
+          
+              Row 2, Col 2
+            
+        </td>
+        
+                  
+      </tr>
+      
+            
+    </tbody>
+    
+    
+      
+  </table>
+  
+
+</div>
+`;

package/components/01-atoms/table/table.js

@@ -0,0 +1,79 @@
+/**
+ * CivicTheme Table component.
+ */
+
+function CivicThemeTable(el) {
+  if (!el) {
+    return;
+  }
+
+  this.el = el;
+
+  this.init();
+}
+
+ 
+CivicThemeTable.prototype.init = function () {
+  if (this.el.getAttribute('data-table') === 'true') {
+    return;
+  }
+
+  this.addTitles();
+
+  // Check if the table has the class 'ct-table--data'
+  if (this.el.classList.contains('ct-table--data')) {
+    this.addWrapper();
+  }
+
+  this.el.setAttribute('data-table', 'true');
+};
+
+// Add data-title attributes to cells for display on mobile.
+// TODO: Add titles to cells in rows with row-scoped th cells.
+// CivicThemeTable.prototype.addRowScopedTitles.
+// TODO: Add titles to cells in columns with col-scoped th cells.
+// CivicThemeTable.prototype.addColScopedTitles.
+CivicThemeTable.prototype.addTitles = function () {
+  this.addTheadColumnTitles();
+};
+
+CivicThemeTable.prototype.addWrapper = function () {
+  // Select the target element you want to wrap.
+  const targetElement = this.el;
+  // Create the wrapper element.
+  const wrapper = document.createElement('div');
+  wrapper.classList.add('ct-table--wrapper');
+  // Add attributes to the wrapper
+  wrapper.setAttribute('role', 'region');
+  wrapper.setAttribute('tabindex', '0');
+  // Insert the wrapper before the target element.
+  targetElement.parentNode.insertBefore(wrapper, targetElement);
+  // Move the target element inside the wrapper.
+  wrapper.appendChild(targetElement);
+};
+
+ 
+CivicThemeTable.prototype.addTheadColumnTitles = function () {
+  // Determine whether column titles can be added via thead.
+  const theadRows = this.el.querySelectorAll('thead tr');
+  const tbodyRows = this.el.querySelectorAll('tbody tr');
+  if (!(theadRows.length && tbodyRows.length)) {
+    return;
+  }
+  const theadRow = theadRows[0];
+  const theadCells = theadRow.querySelectorAll('th, td');
+
+  tbodyRows.forEach((tbodyRow) => {
+    const tbodyRowCells = tbodyRow.querySelectorAll('th, td');
+    tbodyRowCells.forEach((tbodyRowCell, index) => {
+      if (!tbodyRowCell.hasAttribute('data-title') && theadCells[index]) {
+        tbodyRowCell.setAttribute('data-title', theadCells[index].textContent);
+      }
+    });
+  });
+};
+
+document.querySelectorAll('.ct-basic-content table, .ct-table').forEach((table) => {
+   
+  new CivicThemeTable(table);
+});

package/components/01-atoms/table/table.scss

@@ -0,0 +1,18 @@
+//
+// CivicTheme Table component styles.
+//
+
+.ct-table {
+  $root: &;
+
+  @include ct-table();
+
+  @include ct-component-theme($root) using($root, $theme) {
+    @include ct-table-theme($theme);
+  }
+
+  &--wrapper {
+    overflow: auto;
+    max-width: 100vw;
+  }
+}