@dta-au/civictheme-twig 1.13.1

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

@@ -0,0 +1,69 @@
+{#
+/**
+ * @file
+ * CivicTheme Popover component.
+ *
+ * Props:
+ * - theme: [string] Theme variation (light or dark).
+ * - trigger: [object] Popover trigger link object.
+ *   Each property contains:
+ *   - text: [string] Trigger text.
+ *   - url: [string] Optional URL for the trigger.
+ *   - is_new_window: [boolean] Whether to open link in a new window.
+ *   - is_external: [boolean] Whether the link is external.
+ * - group: [string] Group name for controlling multiple popovers together.
+ * - modifier_class: [string] Additional CSS classes.
+ * - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
+ *
+ * Slots:
+ * - content: Popover panel content.
+ * - content_top: Top popover content.
+ * - content_bottom: Bottom popover content.
+ *
+ * Blocks:
+ * - content_top_block
+ * - content_block
+ * - content_bottom_block
+ */
+#}
+
+{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
+{% set modifier_class = '%s %s'|format(theme_class, modifier_class|default('')) %}
+
+{% if content is not empty %}
+  <div class="ct-popover {{ modifier_class -}}" data-collapsible data-collapsible-collapsed data-collapsible-group="{{ group|default('') }}" data-collapsible-duration="250" {% if attributes is defined and attributes is not null %}{{- attributes -}}{% endif %}>
+    {% include '@atoms/link/link.twig' with {
+      theme: theme,
+      text: trigger.text,
+      url: trigger.url is defined ? trigger.url : null,
+      is_new_window: trigger.is_new_window,
+      modifier_class: 'ct-popover__link',
+      attributes: create_attribute({'data-collapsible-trigger': '', tabindex: '0'}),
+    } only %}
+
+    <div class="ct-popover__content" data-collapsible-panel>
+      <div class="ct-popover__content__inner">
+
+        {% block content_top_block %}
+          {% if content_top is not empty %}
+            <div class="ct-popover__content-top">
+              {{- content_top -}}
+            </div>
+          {% endif %}
+        {% endblock %}
+
+        {% block content_block %}
+          {{- content -}}
+        {% endblock %}
+
+        {% block content_bottom_block %}
+          {% if content_bottom is not empty %}
+            <div class="ct-popover__content-bottom">
+              {{- content_bottom -}}
+            </div>
+          {% endif %}
+        {% endblock %}
+      </div>
+    </div>
+  </div>
+{% endif %}

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

@@ -0,0 +1,83 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Radio Component does not render when name or id is empty 1`] = `
+<div>
+  
+
+
+</div>
+`;
+
+exports[`Radio Component does not render when name or id is empty 2`] = `
+<div>
+  
+
+
+</div>
+`;
+
+exports[`Radio Component renders with optional attributes 1`] = `
+<div>
+  
+
+  
+  <input
+    aria-invalid="true"
+    checked=""
+    class="ct-radio ct-theme-dark ct-radio--is-invalid custom-class"
+    data-test="true"
+    disabled=""
+    id="radio-id"
+    name="test-radio"
+    required=""
+    type="radio"
+    value="radio-value"
+  />
+  
+      
+
+
+  <label
+    class="ct-label ct-theme-dark ct-label--small  ct-radio__label"
+    for="radio-id"
+  >
+    Radio Label
+  </label>
+    
+</div>
+`;
+
+exports[`Radio Component renders with required attributes 1`] = `
+<div>
+  
+
+  
+  <input
+    class="ct-radio ct-theme-light"
+    id="radio-id"
+    name="test-radio"
+    type="radio"
+    value="radio-value"
+  />
+  
+  
+</div>
+`;
+
+exports[`Radio Component strips HTML tags from attribute values 1`] = `
+<div>
+  
+
+  
+  <input
+    class="ct-radio ct-theme-light"
+    data-test="<script>alert(1)</script>"
+    id="radio-id"
+    name="test-radio"
+    type="radio"
+    value="radio-value"
+  />
+  
+  
+</div>
+`;

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

@@ -0,0 +1,176 @@
+//
+// CivicTheme Radio component styles.
+//
+
+@use 'sass:math';
+
+.ct-radio {
+  $root: &;
+  $_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');
+
+  // The dimensions of the radio control's elements are based on the label size.
+  $_width: $_label-font-size * 1.625;
+  $_height: $_label-font-size * 1.625;
+  $_border-width: ct-particle(0.125);
+  $_hover-border-width: $_border-width * 2;
+  $_checked-border-width: $_width * 0.1154;
+  $_checked-circle-width: $_width * 0.5385;
+  $_checked-circle-height: $_height * 0.5385;
+  $_checked-hover-border-width: $_checked-border-width;
+
+  @include ct-form-control-no-appearance();
+  @include ct-form-control-disabled(var(--ct-radio-disabled-opacity));
+
+  border-radius: 50%;
+  border-style: solid;
+  box-sizing: border-box;
+  height: $_height;
+  width: $_width;
+  border-width: $_border-width;
+  cursor: pointer;
+
+  // Offset by font spacing.
+  margin-right: calc(-1 * $_label-font-size * var(--ct-font-average-character-width));
+
+  // Vertically align the control, preserving label's baseline.
+  vertical-align: top;
+  margin-top: math.div(math.max($_label-font-size, $_label-line_height) - $_height, 2);
+
+  + label {
+    cursor: pointer;
+    display: inline;
+    margin-left: ct-spacing();
+  }
+
+  &:hover {
+    border-width: $_hover-border-width;
+  }
+
+  &:checked {
+    border-width: $_checked-border-width;
+
+    &:hover {
+      border-width: $_checked-hover-border-width;
+    }
+
+    &::before {
+      content: '';
+      display: block;
+      border-radius: 50%;
+      width: $_checked-circle-width;
+      height: $_checked-circle-height;
+
+      // Center the circle.
+      margin: math.div($_height - $_checked-circle-height, 2) - $_checked-border-width math.div($_width, 2) - math.div($_checked-circle-width, 2) - $_checked-border-width;
+
+      @if $ct-animation-enabled and $ct-radio-animation-duration > 0 {
+        transform: scale(0);
+        animation: radio-grow var(--ct-radio-animation-duration) forwards;
+
+        @keyframes radio-grow {
+          to {
+            transform: scale(1);
+          }
+        }
+      }
+    }
+  }
+
+  &:focus-visible {
+    outline-style: solid;
+    outline-width: var(--ct-radio-outline-width);
+    outline-offset: var(--ct-radio-outline-offset);
+  }
+
+  &:disabled {
+    + label {
+      opacity: var(--ct-radio-disabled-opacity);
+      pointer-events: none;
+    }
+  }
+
+  @include ct-component-theme($root) using($root, $theme) {
+    &:focus-visible {
+      @include ct-component-property($root, $theme, outline-color);
+    }
+
+    &:not(#{$root}--is-invalid) {
+      @include ct-component-property($root, $theme, border-color);
+      @include ct-component-property($root, $theme, background-color);
+
+      &:hover {
+        @include ct-component-property($root, $theme, hover, border-color);
+        @include ct-component-property($root, $theme, hover, background-color);
+
+        & + label {
+          @include ct-component-property($root, $theme, hover, color);
+        }
+      }
+
+      & + label {
+        @include ct-component-property($root, $theme, color);
+
+        &:hover {
+          @include ct-component-property($root, $theme, hover, color);
+        }
+      }
+
+      &:checked {
+        @include ct-component-property($root, $theme, checked, border-color);
+        @include ct-component-property($root, $theme, checked, background-color);
+
+        &:hover {
+          @include ct-component-property($root, $theme, checked, hover, border-color);
+          @include ct-component-property($root, $theme, checked, hover, background-color);
+
+          &::before {
+            background-color: ct-component-var($root, $theme, checked, hover, border-color);
+          }
+
+          & + label {
+            @include ct-component-property($root, $theme, checked, hover, color);
+          }
+        }
+
+        &::before {
+          background-color: ct-component-var($root, $theme, checked, border-color);
+        }
+
+        & + label {
+          @include ct-component-property($root, $theme, checked, color);
+
+          &:hover {
+            @include ct-component-property($root, $theme, checked, hover, color);
+          }
+        }
+      }
+    }
+
+    &#{$root}--is-invalid {
+      @include ct-component-property($root, $theme, invalid, border-color);
+      @include ct-component-property($root, $theme, invalid, background-color);
+
+      &:hover {
+        & + label {
+          @include ct-component-property($root, $theme, invalid, color);
+        }
+      }
+
+      & + label {
+        @include ct-component-property($root, $theme, invalid, color);
+
+        &:hover {
+          @include ct-component-property($root, $theme, invalid, color);
+        }
+      }
+
+      &:checked {
+        &::before {
+          background-color: ct-component-var($root, $theme, invalid, border-color);
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,64 @@
+/**
+ * CivicTheme Radio component stories.
+ */
+
+import Component from './radio.twig';
+
+const meta = {
+  title: 'Atoms/Form Controls/Radio',
+  component: Component,
+  argTypes: {
+    theme: {
+      control: { type: 'radio' },
+      options: ['light', 'dark'],
+    },
+    label: {
+      control: { type: 'text' },
+    },
+    name: {
+      control: { type: 'text' },
+    },
+    id: {
+      control: { type: 'text' },
+    },
+    value: {
+      control: { type: 'text' },
+    },
+    is_checked: {
+      control: { type: 'boolean' },
+    },
+    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 Radio = {
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    theme: 'light',
+    label: 'Radio label',
+    name: 'radio-name',
+    id: 'radio-id',
+    value: '123',
+    is_checked: false,
+    is_required: false,
+    is_invalid: false,
+    is_disabled: false,
+    attributes: null,
+    modifier_class: '',
+  },
+};

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

@@ -0,0 +1,76 @@
+import DrupalAttribute from 'drupal-attribute';
+
+const template = 'components/01-atoms/radio/radio.twig';
+
+describe('Radio Component', () => {
+  test('renders with required attributes', async () => {
+    const c = await dom(template, {
+      name: 'test-radio',
+      id: 'radio-id',
+      value: 'radio-value',
+    });
+
+    expect(c.querySelectorAll('.ct-radio')).toHaveLength(1);
+    expect(c.querySelector('.ct-radio').getAttribute('name')).toEqual('test-radio');
+    expect(c.querySelector('.ct-radio').getAttribute('id')).toEqual('radio-id');
+    expect(c.querySelector('.ct-radio').getAttribute('value')).toEqual('radio-value');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with optional attributes', async () => {
+    const c = await dom(template, {
+      name: 'test-radio',
+      id: 'radio-id',
+      value: 'radio-value',
+      label: 'Radio Label',
+      theme: 'dark',
+      is_checked: true,
+      is_required: true,
+      is_invalid: true,
+      is_disabled: true,
+      attributes: new DrupalAttribute().setAttribute('data-test', 'true'),
+      modifier_class: 'custom-class',
+    });
+
+    expect(c.querySelectorAll('.ct-radio.custom-class.ct-theme-dark.ct-radio--is-invalid')).toHaveLength(1);
+    expect(c.querySelector('.ct-radio').getAttribute('name')).toEqual('test-radio');
+    expect(c.querySelector('.ct-radio').getAttribute('id')).toEqual('radio-id');
+    expect(c.querySelector('.ct-radio').getAttribute('value')).toEqual('radio-value');
+    expect(c.querySelector('.ct-radio').hasAttribute('required')).toBe(true);
+    expect(c.querySelector('.ct-radio').hasAttribute('checked')).toBe(true);
+    expect(c.querySelector('.ct-radio').hasAttribute('disabled')).toBe(true);
+    expect(c.querySelector('.ct-radio').getAttribute('data-test')).toEqual('true');
+    expect(c.querySelectorAll('label.ct-radio__label')).toHaveLength(1);
+    expect(c.querySelector('label.ct-radio__label').textContent.trim()).toEqual('Radio Label');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('does not render when name or id is empty', async () => {
+    let c = await dom(template, {
+      name: '',
+      id: 'radio-id',
+    });
+    expect(c.querySelectorAll('.ct-radio')).toHaveLength(0);
+
+    c = await dom(template, {
+      name: 'test-radio',
+      id: '',
+    });
+    expect(c.querySelectorAll('.ct-radio')).toHaveLength(0);
+  });
+
+  test('strips HTML tags from attribute values', async () => {
+    const c = await dom(template, {
+      name: 'test-radio',
+      id: 'radio-id',
+      value: 'radio-value',
+      attributes: new DrupalAttribute().setAttribute('data-test', '<script>alert(1)</script>'),
+    });
+
+    expect(c.querySelector('.ct-radio').getAttribute('data-test')).toEqual('<script>alert(1)</script>');
+
+    assertUniqueCssClasses(c);
+  });
+});

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

@@ -0,0 +1,47 @@
+{#
+/**
+ * @file
+ * CivicTheme Radio component.
+ *
+ * Props:
+ * - theme: [string] Theme variation (light or dark).
+ * - name: [string] DOM name (required).
+ * - id: [string] DOM id (required).
+ * - value: [string,boolean] DOM value.
+ * - label: [string] Label content.
+ * - is_checked: [boolean] Whether the radio is checked.
+ * - is_required: [boolean] Whether the radio is required.
+ * - is_invalid: [boolean] Whether the radio is invalid.
+ * - is_disabled: [boolean] Whether the radio is disabled.
+ * - 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-radio--is-invalid' : '' %}
+{% set modifier_class = '%s %s %s'|format(theme_class, is_invalid_class, modifier_class|default(''))|trim %}
+
+{% if name is not empty and id is not empty %}
+  <input
+    type="radio"
+    class="ct-radio {{ modifier_class -}}"
+    name="{{ name }}"
+    value="{{ value }}"
+    id="{{ id }}"
+    {% if is_checked %}checked{% endif %}
+    {% if is_required %}required{% endif %}
+    {% if is_disabled %}disabled{% endif %}
+    {% if is_invalid %}aria-invalid="true"{% endif %}
+    {% if attributes is defined and attributes is not null %}{{- attributes -}}{% endif %}
+  />
+  {% if label is not empty %}
+    {% include '@atoms/label/label.twig' with {
+      theme: theme,
+      content: label,
+      for: id,
+      size: 'small',
+      modifier_class: 'ct-radio__label',
+    } only %}
+  {% endif %}
+{% endif %}

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

@@ -0,0 +1,165 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Select Component does not render when name or options are empty 1`] = `
+<div>
+  
+
+
+</div>
+`;
+
+exports[`Select Component does not render when name or options are empty 2`] = `
+<div>
+  
+
+
+</div>
+`;
+
+exports[`Select Component renders optgroup with options 1`] = `
+<div>
+  
+
+  
+  <select
+    class="ct-select ct-theme-light"
+    name="test-select"
+  >
+    
+                  
+    <optgroup
+      label="Group 1"
+    >
+      
+                                    
+      <option
+        value="1.1"
+      >
+        Option 1.1
+      </option>
+      
+                                                
+      <option
+        value="1.2"
+      >
+        Option 1.2
+      </option>
+      
+                              
+    </optgroup>
+    
+                                  
+    <option
+      value="2"
+    >
+      Option 2
+    </option>
+    
+                    
+  </select>
+  
+
+</div>
+`;
+
+exports[`Select Component renders with optional attributes 1`] = `
+<div>
+  
+
+  
+  <select
+    aria-invalid="true"
+    class="ct-select ct-theme-dark ct-select--is-invalid custom-class"
+    data-test="true"
+    disabled=""
+    id="select-id"
+    multiple=""
+    name="test-select"
+    required=""
+  >
+    
+                            
+    <option
+      selected="selected"
+      value="1"
+    >
+      Option 1
+    </option>
+    
+                                          
+    <option
+      value="2"
+    >
+      Option 2
+    </option>
+    
+                                          
+    <option
+      disabled=""
+      value="3"
+    >
+      Option 3
+    </option>
+    
+                    
+  </select>
+  
+
+</div>
+`;
+
+exports[`Select Component renders with required attributes 1`] = `
+<div>
+  
+
+  
+  <select
+    class="ct-select ct-theme-light"
+    name="test-select"
+  >
+    
+                            
+    <option
+      value="1"
+    >
+      Option 1
+    </option>
+    
+                                          
+    <option
+      value="2"
+    >
+      Option 2
+    </option>
+    
+                    
+  </select>
+  
+
+</div>
+`;
+
+exports[`Select Component strips HTML tags from attribute values 1`] = `
+<div>
+  
+
+  
+  <select
+    class="ct-select ct-theme-light"
+    data-test="<script>alert(1)</script>"
+    name="test-select"
+  >
+    
+                            
+    <option
+      value="1"
+    >
+      Option 1
+    </option>
+    
+                    
+  </select>
+  
+
+</div>
+`;