@dta-au/civictheme-twig 1.13.1

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

@@ -0,0 +1,82 @@
+/**
+ * CivicTheme Link component stories.
+ */
+
+import Component from './link.twig';
+import Constants from '../../../dist/constants.json';
+
+const meta = {
+  title: 'Atoms/Link',
+  component: Component,
+  argTypes: {
+    theme: {
+      control: { type: 'radio' },
+      options: ['light', 'dark'],
+    },
+    text: {
+      control: { type: 'text' },
+    },
+    title: {
+      control: { type: 'text' },
+    },
+    hidden_text: {
+      control: { type: 'text' },
+    },
+    url: {
+      control: { type: 'text' },
+    },
+    is_external: {
+      control: { type: 'boolean' },
+    },
+    is_active: {
+      control: { type: 'boolean' },
+    },
+    is_disabled: {
+      control: { type: 'boolean' },
+    },
+    is_new_window: {
+      control: { type: 'boolean' },
+    },
+    icon_placement: {
+      control: { type: 'radio' },
+      options: ['before', 'after'],
+    },
+    icon_group_disabled: {
+      control: { type: 'boolean' },
+    },
+    icon_single_only: {
+      control: { type: 'boolean' },
+    },
+    icon: {
+      control: { type: 'select' },
+      options: Constants.ICONS,
+    },
+    modifier_class: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+export default meta;
+
+export const Link = {
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    theme: 'light',
+    text: 'Link text',
+    title: 'Link title',
+    url: 'https://www.example.com',
+    is_external: false,
+    is_active: false,
+    is_disabled: false,
+    is_new_window: false,
+    icon: '',
+    icon_placement: 'before',
+    icon_group_disabled: false,
+    icon_single_only: false,
+    modifier_class: '',
+    attributes: null,
+  },
+};

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

@@ -0,0 +1,84 @@
+import DrupalAttribute from 'drupal-attribute';
+
+const template = 'components/01-atoms/link/link.twig';
+
+describe('Link Component', () => {
+  test('renders with required attributes', async () => {
+    const c = await dom(template, {
+      text: 'Sample Link',
+      url: 'https://example.com',
+    });
+
+    expect(c.querySelectorAll('.ct-link')).toHaveLength(1);
+    expect(c.querySelector('.ct-link').textContent.trim()).toEqual('Sample Link');
+    expect(c.querySelector('.ct-link').getAttribute('href')).toEqual('https://example.com');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with optional attributes, not external', async () => {
+    const c = await dom(template, {
+      text: 'Sample Link',
+      url: 'https://example.com',
+      title: 'Example Title',
+      is_new_window: true,
+      is_external: false,
+      is_active: true,
+      is_disabled: true,
+      icon: 'call',
+      icon_placement: 'before',
+      attributes: new DrupalAttribute().setAttribute('data-test', 'true'),
+      modifier_class: 'custom-class',
+      theme: 'dark',
+    });
+
+    expect(c.querySelectorAll('.ct-link.custom-class.ct-theme-dark.ct-link--active.ct-link--disabled')).toHaveLength(1);
+    expect(c.querySelectorAll('.ct-link.custom-class.ct-theme-dark.ct-link--external.ct-link--active.ct-link--disabled')).toHaveLength(0);
+    expect(c.querySelector('.ct-link').textContent.trim()).toContain('Sample Link');
+    expect(c.querySelector('.ct-link').getAttribute('href')).toEqual('https://example.com');
+    expect(c.querySelector('.ct-link').getAttribute('title')).toEqual('Example Title');
+    expect(c.querySelector('.ct-link').getAttribute('target')).toEqual('_blank');
+    expect(c.querySelector('.ct-link').textContent).toContain('(Opens in a new tab/window)');
+    expect(c.querySelector('.ct-link').getAttribute('data-test')).toEqual('true');
+    expect(c.querySelectorAll('.ct-link .ct-link__icon')).toHaveLength(1);
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with optional attributes, is external', async () => {
+    const c = await dom(template, {
+      text: 'Sample Link',
+      url: 'https://example.com',
+      title: 'Example Title',
+      is_new_window: true,
+      is_external: true,
+      is_active: true,
+      is_disabled: true,
+      icon: 'call',
+      icon_placement: 'before',
+      attributes: new DrupalAttribute().setAttribute('data-test', 'true'),
+      modifier_class: 'custom-class',
+      theme: 'dark',
+    });
+
+    expect(c.querySelectorAll('.ct-link.custom-class.ct-theme-dark.ct-link--external.ct-link--active.ct-link--disabled')).toHaveLength(1);
+    expect(c.querySelector('.ct-link').textContent.trim()).toContain('Sample Link');
+    expect(c.querySelector('.ct-link').getAttribute('href')).toEqual('https://example.com');
+    expect(c.querySelector('.ct-link').getAttribute('title')).toEqual('Example Title');
+    expect(c.querySelector('.ct-link').getAttribute('target')).toEqual('_blank');
+    expect(c.querySelector('.ct-link').textContent).toContain('(Opens in a new tab/window)');
+    expect(c.querySelector('.ct-link').getAttribute('data-test')).toEqual('true');
+    expect(c.querySelectorAll('.ct-link .ct-link__icon')).toHaveLength(1);
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('does not render when text and icon are empty', async () => {
+    const c = await dom(template, {
+      text: '',
+      icon: '',
+    });
+
+    expect(c.querySelectorAll('.ct-link')).toHaveLength(0);
+  });
+});

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

@@ -0,0 +1,62 @@
+{#
+/**
+ * @file
+ * CivicTheme Link component.
+ *
+ * Props:
+ * - theme: [string] Theme variation (light or dark).
+ * - text: [string,null] Link text.
+ * - url: [string,null] Link URL.
+ * - title: [string,null] Title attribute for the link.
+ * - is_new_window: [boolean,null] Open link in a new window.
+ * - is_external: [boolean,null] Indicates if the link is external.
+ * - is_active: [boolean,null] Indicates if the link is active
+ * - is_disabled: [boolean,null] Indicates if the link is disabled.
+ * - icon: [string,null] Icon name.
+ * - icon_placement: [string,null] Icon position (before or after).
+ * - icon_group_disabled: [boolean,null] Disable icon and last word grouping.
+ * - icon_single_only: [boolean,null] Only show 1 icon (if both icon and is_external are present, external takes preference).
+ * - modifier_class: [string] Additional CSS classes.
+ * - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
+ */
+#}
+
+{%- set text = text|default('') -%}
+{%- set only_icon_class = icon is not empty and text is empty ? 'ct-link--only-icon' : '' -%}
+{%- set icon_placement = icon_placement in ['before', 'after'] ? icon_placement : 'after' -%}
+{%- set is_external_class = is_external ? 'ct-link--external' : '' -%}
+{%- set is_active_class = is_active ? 'ct-link--active' : '' -%}
+{%- set is_disabled_class = is_disabled ? 'ct-link--disabled' : '' -%}
+{%- set is_new_window = is_new_window is same as(true) -%}
+{%- set theme_class = 'ct-theme-%s'|format(theme|default('light')) -%}
+{%- set modifier_class = '%s %s %s %s %s %s'|format(theme_class, is_external_class, is_active_class, is_disabled_class, only_icon_class, modifier_class|default(''))|trim -%}
+{%- set attributes = attributes is defined and attributes is not null ? attributes : create_attribute({}) -%}
+{%- if is_disabled -%}
+  {%- do attributes.setAttribute('disabled', '') -%}
+{%- endif -%}
+
+{%- if text is not empty or icon is not empty -%}
+  {%- set link_content -%}
+    {%- include '@base/text-icon/text-icon.twig' with {
+      text: text,
+      is_new_window: is_new_window,
+      is_external: is_external,
+      icon: icon,
+      icon_placement: icon_placement,
+      icon_class: 'ct-link__icon',
+      icon_group_disabled: icon_group_disabled is defined ? icon_group_disabled : false,
+      icon_single_only: icon_single_only is defined ? icon_single_only : false,
+    } only -%}
+  {%- endset -%}
+
+  <a
+    class="ct-link {{ modifier_class -}}"
+    {% if url is not empty %}href="{{ url }}"{% endif %}
+    {% if title is not empty %}title="{{ title }}"{% endif %}
+    {% if is_new_window %}target="_blank"{% endif %}
+    {% if is_disabled %}disabled{% endif %}
+    {% if attributes is defined and attributes is not null %}{{- attributes -}}{% endif %}
+  >
+    {{- link_content -}}
+  </a>
+{%- endif -%}

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

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

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

@@ -0,0 +1,31 @@
+//
+// CivicTheme Paragraph component styles.
+//
+
+@use 'sass:map';
+
+.ct-paragraph {
+  $root: &;
+  $sizes: ('extra-large', 'large', 'regular', 'small');
+
+  display: block;
+  margin-bottom: ct-spacing();
+
+  &--no-margin {
+    margin-bottom: 0;
+  }
+
+  @include ct-content();
+
+  @each $size in $sizes {
+    &.ct-paragraph--#{$size} {
+      @if map.get(_ct-typography-all(), 'text-#{$size}') != null {
+        @include ct-typography('text-#{$size}');
+      }
+    }
+  }
+
+  @include ct-component-theme($root) using($root, $theme) {
+    @include ct-content-theme($theme);
+  }
+}

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

@@ -0,0 +1,45 @@
+/**
+ * CivicTheme Paragraph component stories.
+ */
+
+import Component from './paragraph.twig';
+
+const meta = {
+  title: 'Atoms/Paragraph',
+  component: Component,
+  argTypes: {
+    theme: {
+      control: { type: 'radio' },
+      options: ['light', 'dark'],
+    },
+    content: {
+      control: { type: 'text' },
+    },
+    size: {
+      control: { type: 'radio' },
+      options: ['extra-large', 'large', 'regular', 'small'],
+    },
+    no_margin: {
+      control: { type: 'boolean' },
+    },
+    modifier_class: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+export default meta;
+
+export const Paragraph = {
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    theme: 'light',
+    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.',
+    size: 'regular',
+    no_margin: false,
+    modifier_class: '',
+    attributes: null,
+  },
+};

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

@@ -0,0 +1,40 @@
+import DrupalAttribute from 'drupal-attribute';
+
+const template = 'components/01-atoms/paragraph/paragraph.twig';
+
+describe('Paragraph Component', () => {
+  test('renders with required attributes', async () => {
+    const c = await dom(template, {
+      content: 'Sample content',
+    });
+
+    expect(c.querySelectorAll('.ct-paragraph')).toHaveLength(1);
+    expect(c.querySelector('.ct-paragraph').textContent.trim()).toEqual('Sample content');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with optional attributes', async () => {
+    const c = await dom(template, {
+      content: 'Sample content',
+      size: 'large',
+      attributes: new DrupalAttribute().setAttribute('data-test', 'true'),
+      modifier_class: 'custom-class',
+      theme: 'dark',
+    });
+
+    expect(c.querySelectorAll('.ct-paragraph.custom-class.ct-theme-dark.ct-paragraph--large')).toHaveLength(1);
+    expect(c.querySelector('.ct-paragraph').textContent.trim()).toEqual('Sample content');
+    expect(c.querySelector('.ct-paragraph').getAttribute('data-test')).toEqual('true');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('does not render when content is empty', async () => {
+    const c = await dom(template, {
+      content: '',
+    });
+
+    expect(c.querySelectorAll('.ct-paragraph')).toHaveLength(0);
+  });
+});

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

@@ -0,0 +1,25 @@
+{#
+/**
+ * @file
+ * CivicTheme Paragraph component.
+ *
+ * Props:
+ * - theme: [string] Theme variation (light or dark).
+ * - content: [string,null] Paragraph content.
+ * - size: [string] Paragraph size (extra-large, large, regular, small).
+ * - no_margin: [boolean,null] Disable default margin.
+ * - modifier_class: [string] Additional CSS classes.
+ * - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
+ */
+#}
+
+{% set size_class = 'ct-paragraph--%s'|format(size|default('regular')) %}
+{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
+{% set no_margin_class = no_margin ? 'ct-paragraph--no-margin' : '' %}
+{% set modifier_class = '%s %s %s %s'|format(theme_class, size_class, no_margin_class, modifier_class|default('')) %}
+
+{% if content is not empty -%}
+  <div class="ct-paragraph {{ modifier_class -}}" {% if attributes is defined and attributes is not null %}{{- attributes -}}{% endif %}>
+    {{- content -}}
+  </div>
+{%- endif %}

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

@@ -0,0 +1,129 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Popover Component does not render when content is empty 1`] = `
+<div>
+  
+
+
+</div>
+`;
+
+exports[`Popover Component renders with optional attributes 1`] = `
+<div>
+  
+
+  
+  <div
+    class="ct-popover ct-theme-dark custom-class"
+    data-collapsible=""
+    data-collapsible-collapsed=""
+    data-collapsible-duration="250"
+    data-collapsible-group="sample-group"
+    data-test="true"
+  >
+    
+    
+    <a
+      _keys="data-collapsible-trigger tabindex"
+      class="ct-link ct-theme-dark     ct-popover__link"
+      data-collapsible-trigger=""
+      href="https://example.com"
+      tabindex="0"
+      target="_blank"
+    >
+      <span
+        class="ct-text-icon__text"
+      >
+        Sample Trigger
+      </span>
+      <span
+        class="ct-visually-hidden"
+      >
+        (Opens in a new tab/window)
+      </span>
+    </a>
+    
+    
+    <div
+      class="ct-popover__content"
+      data-collapsible-panel=""
+    >
+      
+      
+      <div
+        class="ct-popover__content__inner"
+      >
+        
+
+                          
+        Sample content
+                                
+      </div>
+      
+    
+    </div>
+    
+  
+  </div>
+  
+
+</div>
+`;
+
+exports[`Popover Component renders with required attributes 1`] = `
+<div>
+  
+
+  
+  <div
+    class="ct-popover ct-theme-light "
+    data-collapsible=""
+    data-collapsible-collapsed=""
+    data-collapsible-duration="250"
+    data-collapsible-group=""
+  >
+    
+    
+    <a
+      _keys="data-collapsible-trigger tabindex"
+      class="ct-link ct-theme-light     ct-popover__link"
+      data-collapsible-trigger=""
+      tabindex="0"
+    >
+      <span
+        class="ct-text-icon__text"
+      >
+        Sample Trigger
+      </span>
+    </a>
+    
+    
+    <div
+      class="ct-popover__content"
+      data-collapsible-panel=""
+    >
+      
+      
+      <div
+        class="ct-popover__content__inner"
+      >
+        
+
+                          
+        
+        <span>
+          Sample content
+        </span>
+        
+                                
+      </div>
+      
+    
+    </div>
+    
+  
+  </div>
+  
+
+</div>
+`;

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

@@ -0,0 +1,44 @@
+//
+// CivicTheme Popover component styles.
+//
+
+@use 'sass:math';
+
+.ct-popover {
+  $root: &;
+
+  position: relative;
+
+  #{$root}__content {
+    @include ct-elevation(4);
+
+    & {
+      position: absolute;
+      z-index: var(--ct-popover-z-index);
+      border-radius: var(--ct-popover-description-border-radius);
+      margin-top: var(--ct-popover-top-offset);
+    }
+  }
+
+  #{$root}__content__inner {
+    min-width: var(--ct-popover-min-width);
+    min-height: ct-particle(12);
+    padding: ct-spacing(2);
+
+    @include ct-breakpoint(m) {
+      padding: ct-spacing(3);
+    }
+  }
+
+  @include ct-component-theme($root) using($root, $theme) {
+    #{$root}__content {
+      @include ct-component-property($root, $theme, content, background-color);
+    }
+  }
+}
+
+.no-js {
+  .ct-popover__content {
+    position: relative;
+  }
+}

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

@@ -0,0 +1,52 @@
+/**
+ * CivicTheme Popover component stories.
+ */
+
+import Component from './popover.twig';
+
+const meta = {
+  title: 'Atoms/Popover',
+  component: Component,
+  argTypes: {
+    theme: {
+      control: { type: 'radio' },
+      options: ['light', 'dark'],
+    },
+    trigger: {
+      control: { type: 'object' },
+    },
+    content: {
+      control: { type: 'text' },
+    },
+    content_top: {
+      control: { type: 'text' },
+    },
+    content_bottom: {
+      control: { type: 'text' },
+    },
+    group: {
+      control: { type: 'text' },
+    },
+    modifier_class: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+export default meta;
+
+export const Popover = {
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    theme: 'light',
+    trigger: { text: 'Click me', url: '', is_new_window: false },
+    content: 'Popover content',
+    content_top: '',
+    content_bottom: '',
+    group: 'group-name',
+    modifier_class: '',
+    attributes: null,
+  },
+};

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

@@ -0,0 +1,57 @@
+import DrupalAttribute from 'drupal-attribute';
+
+const template = 'components/01-atoms/popover/popover.twig';
+
+describe('Popover Component', () => {
+  test('renders with required attributes', async () => {
+    const c = await dom(template, {
+      trigger: {
+        text: 'Sample Trigger',
+      },
+      content: '<span>Sample content</span>',
+    });
+
+    expect(c.querySelectorAll('.ct-popover')).toHaveLength(1);
+    expect(c.querySelector('.ct-popover__link').textContent.trim()).toEqual('Sample Trigger');
+    expect(c.querySelector('.ct-popover__content').innerHTML.trim()).toContain('<span>Sample content</span>');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with optional attributes', async () => {
+    const c = await dom(template, {
+      trigger: {
+        text: 'Sample Trigger',
+        url: 'https://example.com',
+        is_new_window: true,
+        is_external: true,
+      },
+      content: 'Sample content',
+      group: 'sample-group',
+      theme: 'dark',
+      attributes: new DrupalAttribute().setAttribute('data-test', 'true'),
+      modifier_class: 'custom-class',
+    });
+
+    expect(c.querySelectorAll('.ct-popover.custom-class.ct-theme-dark')).toHaveLength(1);
+    expect(c.querySelector('.ct-popover__link').textContent.trim()).toContain('Sample Trigger');
+    expect(c.querySelector('.ct-popover__link').getAttribute('href')).toEqual('https://example.com');
+    expect(c.querySelector('.ct-popover__link').getAttribute('target')).toEqual('_blank');
+    expect(c.querySelector('.ct-popover').getAttribute('data-test')).toEqual('true');
+    expect(c.querySelector('.ct-popover__content').textContent.trim()).toEqual('Sample content');
+    expect(c.querySelector('.ct-popover').getAttribute('data-collapsible-group')).toEqual('sample-group');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('does not render when content is empty', async () => {
+    const c = await dom(template, {
+      trigger: {
+        text: 'Sample Trigger',
+      },
+      content: '',
+    });
+
+    expect(c.querySelectorAll('.ct-popover')).toHaveLength(0);
+  });
+});