@dta-au/civictheme-twig 1.13.1

package/components/02-molecules/field/field.twig

@@ -0,0 +1,206 @@
+{#
+/**
+ * @file
+ * CivicTheme Field component.
+ *
+ * Props:
+ * - theme: [string] Theme variation (light or dark).
+ * - type: [string] Type defined by a control type (required).
+ * - title: [string] Field title.
+ * - title_display: [string] How to display the field title (visible, invisible, hidden).
+ * - title_size: [string] The size of the title (extra-small, small, regular, large, extra-large).
+ * - label: [string] Control label (required only for a radio group or checkbox).
+ * - description: [string] Field description.
+ * - name: [string] Control DOM name (propagated from `name` if not defined).
+ * - value: [string] Control DOM value (propagated from `value` if not defined).
+ * - id: [string] Control DOM ID.
+ * - is_invalid: [boolean] Whether the control is invalid (propagated from `is_invalid` if not defined).
+ * - is_disabled: [boolean] Whether the control is disabled (propagated from `is_disabled` if not defined).
+ * - is_required: [boolean] Whether the control is required (propagated from `is_required` if not defined).
+ * - required_text: [string] Text to display within label element when required (propagated).
+ * - orientation: [string] Elements orientation (vertical or horizontal).
+ * - is_inline: [boolean] Whether the complex control is shown inline.
+ * - control: [object,array] Object or objects collection with control's properties (required for complex controls).
+ * - options: [array] Options for the field input:
+ *   Each item contains:
+ *   - value: [string] Option value
+ *   - label: [string] Option label
+ * - is_multiple: [boolean] Whether the field allows multiple values.
+ * - placeholder: [string] Placeholder text for field.
+ * - message: [object] Message object for showing messages.
+ *   Each property contains:
+ *   - content: [string] Message content.
+ * - prefix: [string] Content to add before the field.
+ * - suffix: [string] Content to add after the field.
+ * - modifier_class: [string] Additional CSS classes.
+ * - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
+ */
+#}
+
+{% set type = type is defined ? type : 'hidden' %}
+{% set title_display = title_display is defined and title_display in ['visible', 'invisible', 'hidden'] ? title_display : 'visible' %}
+{% set title_size = (title_size is defined and title_size in ['extra-small', 'small', 'regular', 'large', 'extra-large']) ? title_size : '' %}
+{% set is_invalid = is_invalid is defined ? is_invalid : false %}
+{% set is_disabled = is_disabled is defined ? is_disabled : false %}
+{% set is_required = is_required is defined ? is_required : false %}
+{% set orientation = orientation in ['vertical', 'horizontal'] ? orientation : 'vertical' %}
+{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
+{% set type_class = 'ct-field--%s'|format(type) %}
+{% set is_required_class = is_required ? 'ct-field--required' : '' %}
+{% set is_disabled_class = is_disabled ? 'ct-field--disabled' : '' %}
+{% set is_invalid_class = is_invalid ? 'ct-field--invalid' : '' %}
+{% set orientation_class = 'ct-field--%s'|format(orientation) %}
+{% set modifier_class = '%s %s %s %s %s %s %s'|format(theme_class, type_class, orientation_class, is_required_class, is_disabled_class, is_invalid_class, modifier_class|default('')) %}
+
+{# Initialise empty control and convert to an array. #}
+{% if control is not defined or control is not iterable %}
+  {% set control = [{name: name}] %}
+{% else %}
+  {% set first_key = control|keys|first %}
+  {% set control = first_key is not empty and first_key matches '/^[0-9]+$/' ? control : [control] %}
+{% endif %}
+
+{% set _controls = [] %}
+{% for c in control %}
+  {% set default_options = [] %}
+  {% if options is defined %}
+    {% set default_options = options %}
+  {% endif %}
+
+  {% set default_is_multiple = false %}
+  {% if is_multiple is defined %}
+    {% set default_is_multiple = is_multiple %}
+  {% endif %}
+
+  {% set c = {
+    theme: c.theme is defined ? c.theme : theme,
+    label: c.label is defined ? c.label : title,
+    name: c.name is defined ? c.name : name,
+    value: c.value is defined ? c.value : value,
+    id: c.id is defined ? c.id : id,
+    options: c.options is defined ? c.options : default_options,
+    is_multiple: c.is_multiple is defined ? c.is_multiple : default_is_multiple,
+    placeholder: placeholder is defined ? placeholder : '',
+    is_required: c.is_required is defined ? c.is_required : is_required,
+    required_text: c.required_text ? c.required_text : required_text,
+    is_invalid: c.is_invalid is defined ? c.is_invalid : is_invalid,
+    is_disabled: c.is_disabled is defined ? c.is_disabled : is_disabled,
+    is_checked: c.is_checked is defined ? c.is_checked : false,
+    attributes: c.attributes is defined and c.attributes is not null ? c.attributes : null,
+    modifier_class: c.modifier_class is defined ? 'ct-field__control ' ~ c.modifier_class : 'ct-field__control',
+  } %}
+  {% set _controls = _controls|merge([c]) %}
+{% endfor %}
+{% set control = _controls %}
+{% set field_wrapper = type in ['checkbox', 'radio'] ? 'fieldset' : 'div' %}
+
+{% if control[0].name is defined %}
+  <div class="ct-field {{ modifier_class -}}" {% if attributes %}{{- attributes -}}{% endif %}>
+    {% if title is not empty and title_display != 'hidden' and type not in ['hidden', 'checkbox', 'radio'] %}
+      {% include '@atoms/label/label.twig' with {
+        theme: theme,
+        content: label is not empty ? label : title,
+        size: title_size is not empty ? title_size : 'regular',
+        is_required: is_required,
+        required_text: required_text,
+        for: control[0].id and type not in ['radio', 'checkbox'] ? control[0].id : null,
+        modifier_class: 'ct-field__title' ~ (title_display == 'invisible' ? ' ct-visually-hidden' : ''),
+      } only %}
+    {% endif %}
+
+    <{{ field_wrapper }} class="ct-field__wrapper">
+      {% if title is not empty and title_display != 'hidden' and type in ['checkbox', 'radio'] %}
+        {% include '@atoms/label/label.twig' with {
+          theme: theme,
+          tag: 'legend',
+          content: title,
+          is_required: is_required,
+          for: control[0].id and type not in ['radio', 'checkbox'] ? control[0].id : null,
+          modifier_class: 'ct-field__title' ~ (title_display == 'invisible' ? ' ct-visually-hidden' : ''),
+        } only %}
+      {% endif %}
+      {% if (description) and type != 'hidden' %}
+        {% set error_message = 'Field has an error' %}
+        {% if label is not empty %}
+          {% set error_message = 'Field <em>' ~ label ~ '</em> has an error' %}
+        {% endif %}
+
+        {% set description_content = description %}
+        {% if not description and is_invalid %}
+          {% set description_content = error_message %}
+        {% endif %}
+
+        {% include '@atoms/field-description/field-description.twig' with {
+          theme: theme,
+          content: description_content,
+          modifier_class: 'ct-field__description',
+        } only %}
+      {% endif %}
+
+      {% if prefix is not empty %}
+        <div class="ct-field__prefix">{{- prefix -}}</div>
+      {% endif %}
+
+      {% if type == 'textfield' %}
+        {% include '@atoms/textfield/textfield.twig' with control[0]|merge({theme: theme|default('light')}) only %}
+
+      {% elseif type == 'textarea' %}
+        {% include '@atoms/textarea/textarea.twig' with control[0]|merge({theme: theme|default('light')}) only %}
+
+      {% elseif type == 'select' %}
+        {% include '@atoms/select/select.twig' with control[0]|merge({theme: theme|default('light')}) only %}
+
+      {% elseif type == 'checkbox' or type == 'radio' %}
+
+        {% set list_items = [] %}
+        {% for item in control %}
+          {% set list_item %}
+            {% if type == 'checkbox' %}
+              {% include '@atoms/checkbox/checkbox.twig' with item|merge({theme: theme|default('light')}) only %}
+            {% else %}
+              {% include '@atoms/radio/radio.twig' with item|merge({theme: theme|default('light')}) only %}
+            {% endif %}
+          {% endset %}
+          {% set list_items = list_items|merge([list_item]) %}
+        {% endfor %}
+        {% include '@base/item-list/item-list.twig' with {
+          direction: is_inline ? 'horizontal' : 'vertical',
+          items: list_items,
+        } only %}
+
+      {% else %}
+        {% set control0 = control[0] %}
+        {% set control0 = control0|merge({type: type}) %}
+        {% include '@atoms/input/input.twig' with control0 only %}
+      {% endif %}
+
+      {% if suffix is not empty %}
+        <div class="ct-field__suffix">{{- suffix -}}</div>
+      {% endif %}
+
+      {% if (message or is_invalid) and type != 'hidden' %}
+        {% set error_message = 'Field has an error' %}
+        {% if title is not empty %}
+          {% set error_message = 'Field <em>' ~ title ~ '</em> has an error' %}
+        {% endif %}
+
+        {% set message_content = null %}
+        {% if is_invalid %}
+          {% set message_content = error_message %}
+        {% endif %}
+
+        {% if message is defined and message.content is defined %}
+          {% set message_content = message.content %}
+        {% endif %}
+
+        {% include '@atoms/field-message/field-message.twig' with {
+          theme: theme,
+          type: is_invalid ? 'error' : 'information',
+          content: message_content,
+          modifier_class: 'ct-field__message',
+          attributes: message.attributes|default(create_attribute({})),
+        } only %}
+      {% endif %}
+    </{{ field_wrapper }}>
+  </div>
+{% endif %}

package/components/02-molecules/figure/__snapshots__/figure.test.js.snap

@@ -0,0 +1,104 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Figure Component does not render when URL is empty 1`] = `
+<div>
+  
+
+
+</div>
+`;
+
+exports[`Figure Component renders with optional attributes 1`] = `
+<div>
+  
+
+  
+  <figure
+    class="ct-figure ct-theme-dark custom-class"
+    data-test="true"
+  >
+    
+    
+
+
+  
+    <img
+      alt="Image description"
+      class="ct-image ct-theme-dark ct-figure__image"
+      height="300"
+      src="https://example.com/image.jpg"
+      width="500"
+    />
+    
+
+          
+    <figcaption
+      class="ct-figure__caption"
+    >
+      
+        
+      <svg
+        aria-hidden="true"
+        class="ct-icon"
+        height="20"
+        role="img"
+        viewBox="0 0 20 20"
+        width="20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        
+  
+        <path
+          d="M15.8333 3.3335H4.16667C3.50363 3.3335 2.86775 3.59689 2.3989 4.06573C1.93006 4.53457 1.66667 5.17045 1.66667 5.8335V14.1668C1.66667 14.8299 1.93006 15.4658 2.3989 15.9346C2.86775 16.4034 3.50363 16.6668 4.16667 16.6668H15.8333C16.4964 16.6668 17.1323 16.4034 17.6011 15.9346C18.0699 15.4658 18.3333 14.8299 18.3333 14.1668V5.8335C18.3333 5.17045 18.0699 4.53457 17.6011 4.06573C17.1323 3.59689 16.4964 3.3335 15.8333 3.3335ZM4.16667 15.0002C3.94566 15.0002 3.7337 14.9124 3.57742 14.7561C3.42114 14.5998 3.33334 14.3878 3.33334 14.1668V12.1502L6.08334 9.4085C6.23911 9.25581 6.44854 9.17028 6.66667 9.17028C6.8848 9.17028 7.09423 9.25581 7.25001 9.4085L12.8417 15.0002H4.16667ZM16.6667 14.1668C16.6667 14.3878 16.5789 14.5998 16.4226 14.7561C16.2663 14.9124 16.0544 15.0002 15.8333 15.0002H15.1917L12.0167 11.8085L12.75 11.0752C12.9058 10.9225 13.1152 10.8369 13.3333 10.8369C13.5515 10.8369 13.7609 10.9225 13.9167 11.0752L16.6667 13.8168V14.1668ZM16.6667 11.4668L15.1 9.9085C14.6251 9.45219 13.992 9.19735 13.3333 9.19735C12.6747 9.19735 12.0416 9.45219 11.5667 9.9085L10.8333 10.6418L8.43334 8.24183C7.95839 7.78552 7.3253 7.53068 6.66667 7.53068C6.00804 7.53068 5.37496 7.78552 4.90001 8.24183L3.33334 9.80016V5.8335C3.33334 5.61248 3.42114 5.40052 3.57742 5.24424C3.7337 5.08796 3.94566 5.00016 4.16667 5.00016H15.8333C16.0544 5.00016 16.2663 5.08796 16.4226 5.24424C16.5789 5.40052 16.6667 5.61248 16.6667 5.8335V11.4668Z "
+        />
+        
+  
+        <path
+          d="M15.8333 3.3335H4.16667C3.50363 3.3335 2.86775 3.59689 2.3989 4.06573C1.93006 4.53457 1.66667 5.17045 1.66667 5.8335V14.1668C1.66667 14.8299 1.93006 15.4658 2.3989 15.9346C2.86775 16.4034 3.50363 16.6668 4.16667 16.6668H15.8333C16.4964 16.6668 17.1323 16.4034 17.6011 15.9346C18.0699 15.4658 18.3333 14.8299 18.3333 14.1668V5.8335C18.3333 5.17045 18.0699 4.53457 17.6011 4.06573C17.1323 3.59689 16.4964 3.3335 15.8333 3.3335ZM4.16667 15.0002C3.94566 15.0002 3.7337 14.9124 3.57742 14.7561C3.42114 14.5998 3.33334 14.3878 3.33334 14.1668V12.1502L6.08334 9.4085C6.23911 9.25581 6.44854 9.17028 6.66667 9.17028C6.8848 9.17028 7.09423 9.25581 7.25001 9.4085L12.8417 15.0002H4.16667ZM16.6667 14.1668C16.6667 14.3878 16.5789 14.5998 16.4226 14.7561C16.2663 14.9124 16.0544 15.0002 15.8333 15.0002H15.1917L12.0167 11.8085L12.75 11.0752C12.9058 10.9225 13.1152 10.8369 13.3333 10.8369C13.5515 10.8369 13.7609 10.9225 13.9167 11.0752L16.6667 13.8168V14.1668ZM16.6667 11.4668L15.1 9.9085C14.6251 9.45219 13.992 9.19735 13.3333 9.19735C12.6747 9.19735 12.0416 9.45219 11.5667 9.9085L10.8333 10.6418L8.43334 8.24183C7.95839 7.78552 7.3253 7.53068 6.66667 7.53068C6.00804 7.53068 5.37496 7.78552 4.90001 8.24183L3.33334 9.80016V5.8335C3.33334 5.61248 3.42114 5.40052 3.57742 5.24424C3.7337 5.08796 3.94566 5.00016 4.16667 5.00016H15.8333C16.0544 5.00016 16.2663 5.08796 16.4226 5.24424C16.5789 5.40052 16.6667 5.61248 16.6667 5.8335V11.4668Z"
+        />
+        
+  
+        <path
+          d="M15.8333 3.3335H4.16667C3.50363 3.3335 2.86775 3.59689 2.3989 4.06573C1.93006 4.53457 1.66667 5.17045 1.66667 5.8335V14.1668C1.66667 14.8299 1.93006 15.4658 2.3989 15.9346C2.86775 16.4034 3.50363 16.6668 4.16667 16.6668H15.8333C16.4964 16.6668 17.1323 16.4034 17.6011 15.9346C18.0699 15.4658 18.3333 14.8299 18.3333 14.1668V5.8335C18.3333 5.17045 18.0699 4.53457 17.6011 4.06573C17.1323 3.59689 16.4964 3.3335 15.8333 3.3335ZM4.16667 15.0002C3.94566 15.0002 3.7337 14.9124 3.57742 14.7561C3.42114 14.5998 3.33334 14.3878 3.33334 14.1668V12.1502L6.08334 9.4085C6.23911 9.25581 6.44854 9.17028 6.66667 9.17028C6.8848 9.17028 7.09423 9.25581 7.25001 9.4085L12.8417 15.0002H4.16667ZM16.6667 14.1668C16.6667 14.3878 16.5789 14.5998 16.4226 14.7561C16.2663 14.9124 16.0544 15.0002 15.8333 15.0002H15.1917L12.0167 11.8085L12.75 11.0752C12.9058 10.9225 13.1152 10.8369 13.3333 10.8369C13.5515 10.8369 13.7609 10.9225 13.9167 11.0752L16.6667 13.8168V14.1668ZM16.6667 11.4668L15.1 9.9085C14.6251 9.45219 13.992 9.19735 13.3333 9.19735C12.6747 9.19735 12.0416 9.45219 11.5667 9.9085L10.8333 10.6418L8.43334 8.24183C7.95839 7.78552 7.3253 7.53068 6.66667 7.53068C6.00804 7.53068 5.37496 7.78552 4.90001 8.24183L3.33334 9.80016V5.8335C3.33334 5.61248 3.42114 5.40052 3.57742 5.24424C3.7337 5.08796 3.94566 5.00016 4.16667 5.00016H15.8333C16.0544 5.00016 16.2663 5.08796 16.4226 5.24424C16.5789 5.40052 16.6667 5.61248 16.6667 5.8335V11.4668Z"
+        />
+        
+
+      </svg>
+      
+        This is the image caption.
+      
+    </figcaption>
+    
+      
+  </figure>
+  
+
+</div>
+`;
+
+exports[`Figure Component renders with required attributes 1`] = `
+<div>
+  
+
+  
+  <figure
+    class="ct-figure ct-theme-light "
+  >
+    
+    
+
+
+  
+    <img
+      alt="Image description"
+      class="ct-image ct-theme-light ct-figure__image"
+      src="https://example.com/image.jpg"
+    />
+    
+
+      
+  </figure>
+  
+
+</div>
+`;

package/components/02-molecules/figure/figure.scss

@@ -0,0 +1,27 @@
+//
+// CivicTheme Figure component styles.
+//
+
+.ct-figure {
+  $root: &;
+
+  margin: 0;
+  display: block;
+
+  @include ct-reset-margins();
+
+  #{$root}__image {
+    border-radius: var(--ct-figure-border-radius);
+    object-fit: contain;
+  }
+
+  #{$root}__caption {
+    @include ct-typography('label-extra-small');
+  }
+
+  @include ct-component-theme($root) using($root, $theme) {
+    #{$root}__caption {
+      @include ct-component-property($root, $theme, caption, color);
+    }
+  }
+}

package/components/02-molecules/figure/figure.stories.js

@@ -0,0 +1,52 @@
+/**
+ * CivicTheme Figure component stories.
+ */
+
+import Component from './figure.twig';
+
+const meta = {
+  title: 'Molecules/Figure',
+  component: Component,
+  argTypes: {
+    theme: {
+      control: { type: 'radio' },
+      options: ['light', 'dark'],
+    },
+    url: {
+      control: { type: 'text' },
+    },
+    alt: {
+      control: { type: 'text' },
+    },
+    width: {
+      control: { type: 'text' },
+    },
+    height: {
+      control: { type: 'text' },
+    },
+    caption: {
+      control: { type: 'text' },
+    },
+    modifier_class: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+export default meta;
+
+export const Figure = {
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    theme: 'light',
+    url: './demo/images/demo1.jpg',
+    alt: 'Image alt text',
+    width: '600',
+    height: '',
+    caption: 'Figure image caption.',
+    modifier_class: '',
+    attributes: null,
+  },
+};

package/components/02-molecules/figure/figure.test.js

@@ -0,0 +1,60 @@
+import DrupalAttribute from 'drupal-attribute';
+
+const template = 'components/02-molecules/figure/figure.twig';
+
+describe('Figure Component', () => {
+  test('renders with required attributes', async () => {
+    const c = await dom(template, {
+      url: 'https://example.com/image.jpg',
+      alt: 'Image description',
+    });
+
+    expect(c.querySelectorAll('.ct-figure')).toHaveLength(1);
+    const image = c.querySelector('.ct-figure__image');
+    expect(image).toBeTruthy();
+    expect(image.getAttribute('src')).toEqual('https://example.com/image.jpg');
+    expect(image.getAttribute('alt')).toEqual('Image description');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with optional attributes', async () => {
+    const c = await dom(template, {
+      url: 'https://example.com/image.jpg',
+      alt: 'Image description',
+      width: '500',
+      height: '300',
+      caption: 'This is the image caption.',
+      theme: 'dark',
+      attributes: new DrupalAttribute().setAttribute('data-test', 'true'),
+      modifier_class: 'custom-class',
+    });
+
+    const element = c.querySelector('.ct-figure');
+    expect(element).not.toBeNull();
+    expect(element.classList.contains('ct-theme-dark')).toBe(true);
+    expect(element.classList.contains('custom-class')).toBe(true);
+    expect(element.getAttribute('data-test')).toEqual('true');
+
+    const image = c.querySelector('.ct-figure__image');
+    expect(image).toBeTruthy();
+    expect(image.getAttribute('src')).toEqual('https://example.com/image.jpg');
+    expect(image.getAttribute('alt')).toEqual('Image description');
+    expect(image.getAttribute('width')).toEqual('500');
+    expect(image.getAttribute('height')).toEqual('300');
+
+    const caption = c.querySelector('.ct-figure__caption');
+    expect(caption).toBeTruthy();
+    expect(caption.textContent.trim()).toEqual('This is the image caption.');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('does not render when URL is empty', async () => {
+    const c = await dom(template, {
+      url: '',
+    });
+
+    expect(c.querySelectorAll('.ct-figure')).toHaveLength(0);
+  });
+});

package/components/02-molecules/figure/figure.twig

@@ -0,0 +1,43 @@
+{#
+/**
+ * @file
+ * CivicTheme Figure component.
+ *
+ * Props:
+ * - theme: [string] Theme variation (light or dark).
+ * - modifier_class: [string] Additional CSS classes.
+ * - url: [string] Image URL.
+ * - alt: [string] Image alt text.
+ * - width: [integer,null] Image width.
+ * - height: [integer,null] Image height.
+ * - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
+ *
+ * Slots:
+ * - caption: Image caption.
+ */
+#}
+
+{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
+{% set modifier_class = '%s %s'|format(theme_class, modifier_class|default('')) %}
+
+{% if url is not empty %}
+  <figure class="ct-figure {{ modifier_class -}}" {% if attributes is defined and attributes is not null %}{{- attributes -}}{% endif %}>
+    {% include '@atoms/image/image.twig' with {
+      theme: theme,
+      url: url,
+      alt: alt,
+      width: width,
+      height: height,
+      modifier_class: 'ct-figure__image',
+    } only %}
+
+    {% if caption is not empty %}
+      <figcaption class="ct-figure__caption">
+        {% include '@base/icon/icon.twig' with {
+          symbol: 'image',
+        } only %}
+        {{ caption }}
+      </figcaption>
+    {% endif %}
+  </figure>
+{% endif %}