@dta-au/civictheme-twig 1.13.1

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

@@ -0,0 +1,358 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Fieldset Component renders with additional attributes and classes 1`] = `
+<div>
+  
+
+
+
+  <fieldset
+    class="ct-fieldset ct-theme-light  custom-modifier"
+    data-test="true"
+  >
+    
+  
+  
+    <div
+      class="ct-fieldset__wrapper"
+    >
+      
+    
+              
+      
+    </div>
+    
+
+  </fieldset>
+  
+
+</div>
+`;
+
+exports[`Fieldset Component renders with default values 1`] = `
+<div>
+  
+
+
+
+  <fieldset
+    class="ct-fieldset ct-theme-light  "
+  >
+    
+  
+  
+    <div
+      class="ct-fieldset__wrapper"
+    >
+      
+    
+              
+      
+    </div>
+    
+
+  </fieldset>
+  
+
+</div>
+`;
+
+exports[`Fieldset Component renders with description after 1`] = `
+<div>
+  
+
+
+
+  <fieldset
+    class="ct-fieldset ct-theme-light  "
+  >
+    
+  
+  
+    <div
+      class="ct-fieldset__wrapper"
+    >
+      
+    
+              
+          
+
+
+      <div
+        class="ct-paragraph ct-theme-light ct-paragraph--regular  ct-fieldset__description ct-fieldset__description--after"
+      >
+        <strong>
+          Test Description
+        </strong>
+      </div>
+            
+    </div>
+    
+
+  </fieldset>
+  
+
+</div>
+`;
+
+exports[`Fieldset Component renders with description before 1`] = `
+<div>
+  
+
+
+
+  <fieldset
+    class="ct-fieldset ct-theme-light  "
+  >
+    
+  
+  
+    <div
+      class="ct-fieldset__wrapper"
+    >
+      
+          
+
+
+      <div
+        class="ct-paragraph ct-theme-light ct-paragraph--regular  ct-fieldset__description ct-fieldset__description--before"
+      >
+        <strong>
+          Test Description
+        </strong>
+      </div>
+          
+              
+      
+    </div>
+    
+
+  </fieldset>
+  
+
+</div>
+`;
+
+exports[`Fieldset Component renders with fields 1`] = `
+<div>
+  
+
+
+
+  <fieldset
+    class="ct-fieldset ct-theme-light  "
+  >
+    
+  
+  
+    <div
+      class="ct-fieldset__wrapper"
+    >
+      
+    
+                  
+      <div
+        class="ct-fieldset__fields"
+      >
+        <div
+          class="test-field"
+        >
+          Test Field
+        </div>
+      </div>
+      
+          
+      
+    </div>
+    
+
+  </fieldset>
+  
+
+</div>
+`;
+
+exports[`Fieldset Component renders with invisible description 1`] = `
+<div>
+  
+
+
+
+  <fieldset
+    class="ct-fieldset ct-theme-light  "
+  >
+    
+  
+  
+    <div
+      class="ct-fieldset__wrapper"
+    >
+      
+          
+
+
+      <div
+        class="ct-paragraph ct-theme-light ct-paragraph--regular  ct-fieldset__description ct-fieldset__description--invisible ct-visually-hidden"
+      >
+        Test Description
+      </div>
+          
+              
+      
+    </div>
+    
+
+  </fieldset>
+  
+
+</div>
+`;
+
+exports[`Fieldset Component renders with legend 1`] = `
+<div>
+  
+
+
+
+  <fieldset
+    class="ct-fieldset ct-theme-light  "
+  >
+    
+      
+
+
+    <legend
+      class="ct-label ct-theme-light ct-label--large  ct-fieldset__legend"
+    >
+      Test Legend
+    </legend>
+      
+  
+    <div
+      class="ct-fieldset__wrapper"
+    >
+      
+    
+              
+      
+    </div>
+    
+
+  </fieldset>
+  
+
+</div>
+`;
+
+exports[`Fieldset Component renders with message 1`] = `
+<div>
+  
+
+
+
+  <fieldset
+    class="ct-fieldset ct-theme-light  "
+  >
+    
+  
+  
+    <div
+      class="ct-fieldset__wrapper"
+    >
+      
+    
+          
+
+
+      <div
+        class="ct-field-message ct-theme-light ct-field-message--warning ct-fieldset__message"
+      >
+        
+          
+        <svg
+          aria-hidden="true"
+          class="ct-icon ct-icon--size-regular ct-field-message__icon"
+          height="24"
+          role="img"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          
+
+          <path
+            d="M12 7C11.7348 7 11.4804 7.10536 11.2929 7.29289C11.1054 7.48043 11 7.73478 11 8V12C11 12.2652 11.1054 12.5196 11.2929 12.7071C11.4804 12.8946 11.7348 13 12 13C12.2652 13 12.5196 12.8946 12.7071 12.7071C12.8946 12.5196 13 12.2652 13 12V8C13 7.73478 12.8946 7.48043 12.7071 7.29289C12.5196 7.10536 12.2652 7 12 7ZM12.92 15.62C12.8981 15.5563 12.8679 15.4957 12.83 15.44L12.71 15.29C12.5694 15.1512 12.3908 15.0572 12.1968 15.0199C12.0028 14.9825 11.8021 15.0034 11.62 15.08C11.4988 15.1306 11.3872 15.2017 11.29 15.29C11.1973 15.3834 11.124 15.4943 11.0742 15.6161C11.0245 15.7379 10.9992 15.8684 11 16C11.0016 16.1307 11.0288 16.2598 11.08 16.38C11.1249 16.5041 11.1966 16.6168 11.2899 16.7101C11.3832 16.8034 11.4959 16.8751 11.62 16.92C11.7397 16.9729 11.8691 17.0002 12 17.0002C12.1309 17.0002 12.2603 16.9729 12.38 16.92C12.5041 16.8751 12.6168 16.8034 12.7101 16.7101C12.8034 16.6168 12.8751 16.5041 12.92 16.38C12.9712 16.2598 12.9984 16.1307 13 16C13.0049 15.9334 13.0049 15.8666 13 15.8C12.9828 15.7362 12.9558 15.6755 12.92 15.62ZM12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7363 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 20C10.4178 20 8.87104 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60897 15.0615C4.00347 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21447 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12C20 14.1217 19.1572 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20Z"
+          />
+          
+
+        </svg>
+        
+    
+        <strong>
+          Test Message
+        </strong>
+      </div>
+                    
+      
+    </div>
+    
+
+  </fieldset>
+  
+
+</div>
+`;
+
+exports[`Fieldset Component renders with prefix and suffix 1`] = `
+<div>
+  
+
+
+
+  <fieldset
+    class="ct-fieldset ct-theme-light  "
+  >
+    
+  
+  
+    <div
+      class="ct-fieldset__wrapper"
+    >
+      
+    
+          
+      <div
+        class="ct-fieldset__prefix"
+      >
+        <div
+          class="test-prefix"
+        >
+          <span>
+            Prefix
+          </span>
+        </div>
+      </div>
+      
+                    
+      <div
+        class="ct-fieldset__suffix"
+      >
+        <div
+          class="test-suffix"
+        >
+          <span>
+            Suffix
+          </span>
+        </div>
+      </div>
+      
+    
+      
+    </div>
+    
+
+  </fieldset>
+  
+
+</div>
+`;

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

@@ -0,0 +1,44 @@
+//
+// CivicTheme Fieldset component styles.
+//
+
+.ct-fieldset {
+  $root: &;
+
+  border: none;
+  padding: ct-spacing(2) 0;
+
+  legend {
+    float: left;
+    width: 100%;
+    padding: 0;
+
+    & + * {
+      clear: left;
+    }
+  }
+
+  &__wrapper {
+    & > *:not(:last-child) {
+      margin-bottom: ct-spacing(2);
+    }
+  }
+
+  &__fields {
+    & > .ct-field:not(:last-child) {
+      margin-bottom: ct-spacing(4);
+    }
+  }
+
+  #{$root} {
+    margin-top: ct-spacing(4);
+    border-left: solid var(--ct-fieldset-stripe-width);
+    padding-left: calc(ct-spacing(3) - var(--ct-fieldset-stripe-width));
+  }
+
+  @include ct-component-theme($root) using($root, $theme) {
+    .ct-fieldset {
+      @include ct-component-property($root, $theme, stripe, border-color);
+    }
+  }
+}

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

@@ -0,0 +1,79 @@
+/**
+ * CivicTheme Fieldset component stories.
+ */
+
+import Component from './fieldset.twig';
+import FieldData from '../../02-molecules/field/field.stories.data';
+import Field from '../../02-molecules/field/field.twig';
+
+const meta = {
+  title: 'Atoms/Form Controls/Fieldset',
+  component: Component,
+  argTypes: {
+    theme: {
+      control: { type: 'radio' },
+      options: ['light', 'dark'],
+    },
+    legend: {
+      control: { type: 'text' },
+    },
+    description: {
+      control: { type: 'text' },
+    },
+    description_display: {
+      control: { type: 'radio' },
+      options: ['before', 'after', 'invisible'],
+    },
+    message: {
+      control: { type: 'text' },
+    },
+    message_type: {
+      control: { type: 'radio' },
+      options: ['error', 'information', 'warning', 'success'],
+    },
+    fields: {
+      control: { type: 'text' },
+    },
+    is_required: {
+      control: { type: 'boolean' },
+    },
+    required_text: {
+      control: { type: 'text' },
+    },
+    prefix: {
+      control: { type: 'text' },
+    },
+    suffix: {
+      control: { type: 'text' },
+    },
+    modifier_class: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+export default meta;
+
+export const Fieldset = {
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    theme: 'light',
+    legend: 'Fieldset legend',
+    description: 'Fieldset example description',
+    description_display: 'before',
+    message: 'Fieldset example message',
+    message_type: 'error',
+    fields: [
+      Field({ ...FieldData.args('light', { controls: true, is_required: true }), type: 'checkbox', description: '', message: '' }),
+      Field({ ...FieldData.args('light', { controls: true, is_required: true }), type: 'radio', message: '' }),
+    ].join('').trim(),
+    is_required: true,
+    required_text: '',
+    prefix: '',
+    suffix: '',
+    modifier_class: '',
+    attributes: null,
+  },
+};

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

@@ -0,0 +1,102 @@
+import DrupalAttribute from 'drupal-attribute';
+
+const template = 'components/01-atoms/fieldset/fieldset.twig';
+
+describe('Fieldset Component', () => {
+  test('renders with default values', async () => {
+    const c = await dom(template);
+
+    expect(c.querySelectorAll('.ct-fieldset.ct-theme-light')).toHaveLength(1);
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with legend', async () => {
+    const c = await dom(template, {
+      legend: 'Test Legend',
+    });
+
+    expect(c.querySelectorAll('.ct-fieldset .ct-fieldset__legend')).toHaveLength(1);
+    expect(c.querySelector('.ct-fieldset .ct-fieldset__legend').textContent.trim()).toEqual('Test Legend');
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with description before', async () => {
+    const c = await dom(template, {
+      description: '<strong>Test Description</strong>',
+      description_display: 'before',
+    });
+
+    expect(c.querySelectorAll('.ct-fieldset .ct-fieldset__description--before')).toHaveLength(1);
+    expect(c.querySelector('.ct-fieldset .ct-fieldset__description--before').innerHTML.trim()).toEqual('<strong>Test Description</strong>');
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with description after', async () => {
+    const c = await dom(template, {
+      description: '<strong>Test Description</strong>',
+      description_display: 'after',
+    });
+
+    expect(c.querySelectorAll('.ct-fieldset .ct-fieldset__description--after')).toHaveLength(1);
+    expect(c.querySelector('.ct-fieldset .ct-fieldset__description--after').innerHTML.trim()).toEqual('<strong>Test Description</strong>');
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with invisible description', async () => {
+    const c = await dom(template, {
+      description: 'Test Description',
+      description_display: 'invisible',
+    });
+
+    expect(c.querySelectorAll('.ct-fieldset .ct-fieldset__description--invisible.ct-visually-hidden')).toHaveLength(1);
+    expect(c.querySelector('.ct-fieldset .ct-fieldset__description--invisible.ct-visually-hidden').textContent.trim()).toEqual('Test Description');
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with message', async () => {
+    const c = await dom(template, {
+      message: '<strong>Test Message</strong>',
+      message_type: 'warning',
+    });
+
+    expect(c.querySelectorAll('.ct-fieldset .ct-fieldset__message')).toHaveLength(1);
+    expect(c.querySelector('.ct-fieldset .ct-fieldset__message').innerHTML.trim()).toContain('<strong>Test Message</strong>');
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with fields', async () => {
+    const c = await dom(template, {
+      fields: '<div class="test-field">Test Field</div>',
+    });
+
+    expect(c.querySelectorAll('.ct-fieldset .ct-fieldset__fields')).toHaveLength(1);
+    expect(c.querySelector('.ct-fieldset .ct-fieldset__fields').innerHTML.trim()).toEqual('<div class="test-field">Test Field</div>');
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with prefix and suffix', async () => {
+    const c = await dom(template, {
+      prefix: '<div class="test-prefix"><span>Prefix</span></div>',
+      suffix: '<div class="test-suffix"><span>Suffix</span></div>',
+    });
+
+    expect(c.querySelectorAll('.ct-fieldset .ct-fieldset__prefix')).toHaveLength(1);
+    expect(c.querySelector('.ct-fieldset .ct-fieldset__prefix').innerHTML.trim()).toContain('<span>Prefix</span>');
+
+    expect(c.querySelectorAll('.ct-fieldset .ct-fieldset__suffix')).toHaveLength(1);
+    expect(c.querySelector('.ct-fieldset .ct-fieldset__suffix').innerHTML.trim()).toContain('<span>Suffix</span>');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with additional attributes and classes', async () => {
+    const c = await dom(template, {
+      attributes: new DrupalAttribute().setAttribute('data-test', 'true'),
+      modifier_class: 'custom-modifier',
+    });
+
+    expect(c.querySelectorAll('.ct-fieldset.custom-modifier')).toHaveLength(1);
+    expect(c.querySelector('.ct-fieldset').getAttribute('data-test')).toEqual('true');
+    assertUniqueCssClasses(c);
+  });
+});

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

@@ -0,0 +1,91 @@
+{#
+/**
+ * @file
+ * CivicTheme Fieldset component.
+ *
+ * Props:
+ * - theme: [string] Theme variation (light or dark).
+ * - legend: [string] Legend for the fieldset.
+ * - description: [string] Description for the fieldset.
+ * - description_display: [string] Description display position (before, after, invisible).
+ * - message: [string] Message content.
+ * - message_type: [string] Message type (error, information, warning, success).
+ * - is_required: [boolean] Whether the fieldset is required.
+ * - required_text: [string] Text to display within label element when required.
+ * - prefix: [string] The content to add before the fieldset children.
+ * - suffix: [string] The content to add after the fieldset children.
+ * - modifier_class: [string] Additional CSS classes.
+ * - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
+ *
+ * Slots:
+ * - fields: Fields content.
+ *
+ * Blocks:
+ * - fields_block
+ */
+#}
+
+{% set _description_display = description_display|default('before') %}
+{% set description_display = _description_display in ['before', 'after', 'invisible'] ? _description_display : 'before' %}
+{% set _message_type = message_type|default('error') %}
+{% set message_type = _message_type in ['error', 'information', 'warning', 'success'] ? _message_type : 'error' %}
+{% set required_class = is_required ? 'ct-fieldset--required' : '' %}
+{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
+{% set modifier_class = '%s %s %s'|format(theme_class, required_class, modifier_class|default('')) %}
+
+<fieldset class="ct-fieldset {{ modifier_class -}}" {% if attributes is defined and attributes is not null %}{{- attributes -}}{% endif %}>
+  {% if legend is not empty %}
+    {% include '@atoms/label/label.twig' with {
+      theme: theme,
+      tag: 'legend',
+      size: 'large',
+      content: legend,
+      is_required: is_required,
+      required_text: required_text,
+      modifier_class: 'ct-fieldset__legend',
+    } only %}
+  {% endif %}
+
+  <div class="ct-fieldset__wrapper">
+    {% if description is not empty and (description_display == 'before' or description_display == 'invisible') %}
+      {% include '@atoms/paragraph/paragraph.twig' with {
+        theme: theme,
+        content: description,
+        modifier_class: 'ct-fieldset__description ' ~ (description_display == 'invisible' ? 'ct-fieldset__description--invisible ct-visually-hidden' : 'ct-fieldset__description--before'),
+      } only %}
+    {% endif %}
+
+    {% if message %}
+      {% include '@atoms/field-message/field-message.twig' with {
+        theme: theme,
+        type: message_type,
+        content: message,
+        modifier_class: 'ct-fieldset__message',
+      } only %}
+    {% endif %}
+
+    {% if prefix is not empty %}
+      <div class="ct-fieldset__prefix">{{- prefix -}}</div>
+    {% endif %}
+
+    {% block fields_block %}
+      {% if fields is not empty %}
+        <div class="ct-fieldset__fields">
+          {{- fields -}}
+        </div>
+      {% endif %}
+    {% endblock %}
+
+    {% if suffix is not empty %}
+      <div class="ct-fieldset__suffix">{{- suffix -}}</div>
+    {% endif %}
+
+    {% if description is not empty and description_display == 'after' %}
+      {% include '@atoms/paragraph/paragraph.twig' with {
+        theme: theme,
+        content: description,
+        modifier_class: 'ct-fieldset__description ct-fieldset__description--after',
+      } only %}
+    {% endif %}
+  </div>
+</fieldset>

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

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Heading Component does not render when content is empty 1`] = `
+<div>
+  
+
+
+
+</div>
+`;
+
+exports[`Heading Component renders with optional attributes 1`] = `
+<div>
+  
+
+
+  
+  <h3
+    class="ct-heading ct-theme-dark custom-class"
+    data-test="true"
+  >
+    Sample Heading
+  </h3>
+  
+
+</div>
+`;
+
+exports[`Heading Component renders with required attributes 1`] = `
+<div>
+  
+
+
+  
+  <h2
+    class="ct-heading ct-theme-light "
+  >
+    Sample Heading
+  </h2>
+  
+
+</div>
+`;