@dta-au/civictheme-twig 1.13.1

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

@@ -0,0 +1,129 @@
+/**
+ * CivicTheme Table component stories.
+ */
+
+import Component from './table.twig';
+import Link from '../link/link.twig';
+
+const getRows = function (theme) {
+  return [
+    [
+      Link({ theme, text: 'Row 1 with link', url: '#', title: 'Row 1 with link' }),
+      'Description summary on odd row with vertical spacing',
+      'Another column',
+      'One more column column',
+    ],
+    [
+      Link({ theme, text: 'Row 2 with link', url: '#', title: 'Row 2 with link' }),
+      Link({ theme, text: 'Row 2 with link', url: '#', title: 'Row 2 with link' }),
+      'Description summary on even row',
+      'Another column',
+    ],
+    [
+      Link({ theme, text: 'Row 3 with link', url: '#', title: 'Row 3 with link' }),
+      'Description summary on odd row with vertical spacing',
+      'Another column',
+      'One more column column',
+    ],
+    [
+      Link({ theme, text: 'Row 4 with link', url: '#', title: 'Row 4 with link' }),
+      'Description summary on even row',
+      'Another column',
+      'One more column column',
+    ],
+    [
+      'Row 5 without a link',
+      'Description summary on odd row with vertical spacing',
+      'Another column',
+      'One more column column',
+    ],
+    [
+      'Row 6 with larger amount of content',
+      '<p>Paragraph 1 of row 6. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p><p>Paragraph 2 of row 6. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p><p>Paragraph 3 of row 6. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p><p>Paragraph 4 of row 6. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>',
+      'Another column',
+      'One more column column',
+    ],
+    [
+      'Row 7 with small amount of content',
+      '<p>Paragraph 1 of row 7. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>',
+      'Another column',
+      'One more column column',
+    ],
+  ];
+};
+
+const meta = {
+  title: 'Atoms/Table',
+  component: Component,
+  argTypes: {
+    theme: {
+      control: { type: 'radio' },
+      options: ['light', 'dark'],
+    },
+    caption: {
+      control: { type: 'text' },
+    },
+    caption_position: {
+      control: { type: 'radio' },
+      options: ['before', 'after'],
+    },
+    header: {
+      control: { type: 'array' },
+    },
+    rows: {
+      control: { type: 'array' },
+    },
+    footer: {
+      control: { type: 'array' },
+    },
+    is_striped: {
+      control: { type: 'boolean' },
+    },
+    is_data_table: {
+      control: { type: 'boolean' },
+    },
+    modifier_class: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+export default meta;
+
+export const Table = {
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    theme: 'light',
+    caption: 'Table caption',
+    caption_position: 'before',
+    header: [
+      'Header 1',
+      '<span>Header 2</span>',
+      '<span class="demo-class">Header 3</span>',
+      '<span class="ct-visually-hidden">Header 4</span>',
+    ],
+    header_sanitized: [
+      'Header 1',
+      'Header 2',
+      'Header 3',
+      'Header 4',
+    ],
+    rows: getRows('light'),
+    footer: [
+      'Footer 1',
+      'Footer 2',
+      'Footer 3',
+      'Footer 4',
+    ],
+    is_striped: '',
+    is_data_table: '',
+    attributes: null,
+    modifier_class: '',
+  },
+  render: (args) => Component({
+    ...args,
+    rows: getRows(args.theme),
+  }),
+};

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

@@ -0,0 +1,60 @@
+import DrupalAttribute from 'drupal-attribute';
+
+const template = 'components/01-atoms/table/table.twig';
+
+describe('Table Component', () => {
+  test('renders with required attributes', async () => {
+    const c = await dom(template, {
+      rows: [
+        ['Row 1, Col 1', 'Row 1, Col 2'],
+        ['Row 2, Col 1', 'Row 2, Col 2'],
+      ],
+    });
+
+    expect(c.querySelectorAll('.ct-table')).toHaveLength(1);
+    expect(c.querySelectorAll('tbody tr')).toHaveLength(2);
+    expect(c.querySelector('tbody tr').textContent.trim()).toContain('Row 1, Col 1');
+    expect(c.querySelector('tbody tr').textContent.trim()).toContain('Row 1, Col 2');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with optional attributes', async () => {
+    const c = await dom(template, {
+      caption: 'Sample Table Caption',
+      caption_position: 'after',
+      header: ['Header 1', 'Header 2'],
+      rows: [
+        ['Row 1, Col 1', 'Row 1, Col 2'],
+        ['Row 2, Col 1', 'Row 2, Col 2'],
+      ],
+      footer: ['Footer 1', 'Footer 2'],
+      is_striped: true,
+      attributes: new DrupalAttribute().setAttribute('data-test', 'true'),
+      modifier_class: 'custom-class',
+      theme: 'dark',
+    });
+
+    expect(c.querySelectorAll('.ct-table.custom-class.ct-theme-dark.ct-table--caption-after.ct-table--striped')).toHaveLength(1);
+    expect(c.querySelector('caption').textContent.trim()).toEqual('Sample Table Caption');
+    expect(c.querySelectorAll('thead tr th')).toHaveLength(2);
+    expect(c.querySelector('thead tr th').textContent.trim()).toContain('Header 1');
+    expect(c.querySelectorAll('tbody tr')).toHaveLength(2);
+    expect(c.querySelector('tbody tr').textContent.trim()).toContain('Row 1, Col 1');
+    expect(c.querySelector('tfoot tr th').textContent.trim()).toContain('Footer 1');
+    expect(c.querySelector('.ct-table').getAttribute('data-test')).toEqual('true');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('does not render when all content arrays are empty', async () => {
+    const c = await dom(template, {
+      rows: [],
+      header: [],
+      footer: [],
+      caption: '',
+    });
+
+    expect(c.querySelectorAll('.ct-table')).toHaveLength(0);
+  });
+});

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

@@ -0,0 +1,104 @@
+{#
+/**
+ * @file
+ * CivicTheme Table component.
+ *
+ * Props:
+ * - theme: [string] Theme variation (light or dark).
+ * - caption: [string,null] Table caption.
+ * - caption_position: [string] Caption position (before, after).
+ * - header: [array] Header cells.
+ *   Each item contains:
+ *   - items [string,null,integer,object]
+ * - header_sanitized: [array] Provide no-HTML header column names. Used for mobile header labels.
+ *   Each item contains:
+ *   - items [string,null,integer,object]
+ * - rows: [array] Table rows.
+ *   Each item contains:
+ *     [any] items
+ * - footer: [array] Footer cells.
+ *   Each item contains:
+ *   - items [string,null,integer,object]
+ * - is_striped: [boolean,null] Whether to show table with striped rows.
+ * - is_data_table: [boolean,null] Whether to show as a data table.
+ * - modifier_class: [string] Additional CSS classes.
+ * - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
+ */
+#}
+
+{% set striped_class = is_striped ? 'ct-table--%s'|format('striped') : '' %}
+{% set data_table_class = is_data_table ? 'ct-table--%s'|format('data') : '' %}
+{% set caption_position_class = caption_position == 'after' ? 'ct-table--caption-after' : 'ct-table--caption-before' %}
+{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
+{% set modifier_class = '%s %s %s %s %s'|format(theme_class, caption_position_class, striped_class, data_table_class, modifier_class|default('')) %}
+
+{% if rows is not empty or header is not empty or footer is not empty or caption is not empty %}
+  <table class="ct-table {{ modifier_class -}}" {% if attributes is defined and attributes is not null %}{{- attributes -}}{% endif %}>
+    {% if caption %}
+      <caption>{{ caption }}</caption>
+    {% endif %}
+
+    {% if header is not empty %}
+      <thead>
+      <tr>
+        {% for item in header %}
+          <th scope="col">{{ item }}</th>
+        {% endfor %}
+      </tr>
+      </thead>
+    {% endif %}
+
+    {% if rows is not empty %}
+      <tbody>
+      {% for row in rows %}
+        <tr {{ create_attribute(row.attributes|default({})) }}>
+          {% for col in row.cols|default(row) %}
+            {% if header is not empty %}
+              {% if header_sanitized is not empty and header_sanitized[loop.index0] is defined %}
+                {% set data_title = header_sanitized[loop.index0] %}
+              {% else %}
+                {% set data_title = header[loop.index0] is defined ? header[loop.index0] : '' %}
+              {% endif %}
+            {% endif %}
+            <td {{ create_attribute(col.attributes|default({})) }}{% if data_title is defined %} data-title="{{ data_title|striptags }}"{% endif %}>
+              {{ col.content|default(col) }}
+            </td>
+          {% endfor %}
+        </tr>
+      {% endfor %}
+      </tbody>
+    {% endif %}
+
+    {% if footer is not empty %}
+      <tfoot>
+      {% if footer[0] is defined and footer[0].cols is defined %}
+        {# Drupal format: footer is list of rows with .attributes and .cols #}
+        {% for row in footer %}
+          <tr {{ create_attribute(row.attributes|default({})) }}>
+            {% for col in row.cols %}
+              <th {{ create_attribute(col.attributes|default({})) }}>{{ col.content|default(col) }}</th>
+            {% endfor %}
+          </tr>
+        {% endfor %}
+      {% else %}
+        {# Legacy format: single row (footer = [cell, cell]) or multiple rows (footer = [[cell, cell], ...]) #}
+        {% if footer[0] is defined and footer[0] is iterable %}
+          {% for row in footer %}
+            <tr>
+              {% for col in row %}
+                <th>{{ col }}</th>
+              {% endfor %}
+            </tr>
+          {% endfor %}
+        {% else %}
+          <tr>
+            {% for item in footer %}
+              <th scope="col">{{ item }}</th>
+            {% endfor %}
+          </tr>
+        {% endif %}
+      {% endif %}
+      </tfoot>
+    {% endif %}
+  </table>
+{% endif %}

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

@@ -0,0 +1,97 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tag Component does not render when content is empty 1`] = `
+<div>
+  
+
+
+</div>
+`;
+
+exports[`Tag Component renders with optional attributes 1`] = `
+<div>
+  
+
+  
+        
+        
+    
+  <a
+    aria-label="Opens in a new tab"
+    class="ct-tag ct-theme-dark ct-tag--secondary ct-tag--with-icon ct-tag--icon-before ct-tag--external custom-class"
+    data-test="true"
+    href="https://example.com"
+    target="_blank"
+    title="Sample Tag"
+  >
+              
+              
+    <svg
+      aria-hidden="true"
+      class="ct-icon ct-tag__icon"
+      height="24"
+      role="img"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      
+
+      <path
+        d="M19.4097 13C19.1897 13 18.9597 12.93 18.7397 12.88C18.2945 12.7805 17.8568 12.6501 17.4297 12.49C16.9658 12.3212 16.4558 12.33 15.998 12.5146C15.5402 12.6992 15.1668 13.0466 14.9497 13.49L14.7297 13.95C13.7585 13.3992 12.8613 12.7271 12.0597 11.95C11.2825 11.1484 10.6105 10.2512 10.0597 9.28L10.5197 9.07C10.963 8.85292 11.3105 8.47953 11.4951 8.02169C11.6797 7.56385 11.6885 7.05391 11.5197 6.59C11.3609 6.15903 11.2306 5.71808 11.1297 5.27C11.0797 5.05 11.0397 4.82 11.0097 4.6C10.8882 3.89562 10.5193 3.25774 9.96931 2.80124C9.4193 2.34474 8.72438 2.09961 8.00968 2.11H4.99968C4.57693 2.10945 4.15883 2.19825 3.7728 2.37058C3.38677 2.54292 3.04152 2.7949 2.75968 3.11C2.472 3.43365 2.2578 3.81575 2.13179 4.23004C2.00577 4.64432 1.97094 5.08098 2.02968 5.51C2.57327 9.67214 4.47489 13.5387 7.43968 16.51C10.411 19.4748 14.2775 21.3764 18.4397 21.92C18.5695 21.9299 18.6999 21.9299 18.8297 21.92C19.5671 21.9211 20.2791 21.6505 20.8297 21.16C21.1448 20.8782 21.3968 20.5329 21.5691 20.1469C21.7414 19.7609 21.8302 19.3428 21.8297 18.92V15.92C21.8243 15.229 21.5805 14.5611 21.1396 14.0291C20.6987 13.4971 20.0876 13.1336 19.4097 13ZM19.8997 19C19.8994 19.1395 19.8698 19.2775 19.813 19.4049C19.7562 19.5324 19.6733 19.6465 19.5697 19.74C19.4601 19.8399 19.3297 19.9141 19.1878 19.9573C19.046 20.0006 18.8963 20.0117 18.7497 19.99C15.018 19.5026 11.5499 17.802 8.87968 15.15C6.20716 12.4775 4.49171 8.99737 3.99968 5.25C3.97796 5.10333 3.98912 4.95367 4.03236 4.81185C4.0756 4.67003 4.14983 4.5396 4.24968 4.43C4.3443 4.32515 4.46006 4.24154 4.58933 4.18466C4.7186 4.12778 4.85846 4.09892 4.99968 4.1H7.99968C8.23085 4.09435 8.45682 4.16898 8.63915 4.3112C8.82147 4.45341 8.94888 4.65442 8.99968 4.88C8.99968 5.15 9.08968 5.43 9.14968 5.7C9.26526 6.22386 9.419 6.73857 9.60968 7.24L8.20968 7.9C7.96905 8.01046 7.78204 8.21185 7.68968 8.46C7.58967 8.70346 7.58967 8.97654 7.68968 9.22C9.12888 12.3028 11.6069 14.7808 14.6897 16.22C14.9331 16.32 15.2062 16.32 15.4497 16.22C15.6978 16.1276 15.8992 15.9406 16.0097 15.7L16.6397 14.3C17.1556 14.4881 17.6834 14.6418 18.2197 14.76C18.4797 14.82 18.7597 14.87 19.0297 14.91C19.2553 14.9608 19.4563 15.0882 19.5985 15.2705C19.7407 15.4529 19.8153 15.6788 19.8097 15.91L19.8997 19ZM13.9997 2C13.7697 2 13.5297 2 13.2997 2C13.0345 2.02254 12.7891 2.14952 12.6175 2.353C12.4459 2.55647 12.3621 2.81978 12.3847 3.085C12.4072 3.35022 12.5342 3.59562 12.7377 3.76721C12.9412 3.93881 13.2045 4.02254 13.4697 4H13.9997C15.591 4 17.1171 4.63214 18.2423 5.75736C19.3675 6.88258 19.9997 8.4087 19.9997 10C19.9997 10.18 19.9997 10.35 19.9997 10.53C19.9775 10.7938 20.0609 11.0556 20.2314 11.2581C20.402 11.4606 20.6459 11.5871 20.9097 11.61H20.9897C21.24 11.611 21.4816 11.5181 21.6668 11.3496C21.8519 11.1811 21.9672 10.9493 21.9897 10.7C21.9897 10.47 21.9897 10.23 21.9897 10C21.9897 7.88 21.1482 5.84668 19.6501 4.34668C18.1519 2.84667 16.1197 2.00265 13.9997 2ZM15.9997 10C15.9997 10.2652 16.105 10.5196 16.2926 10.7071C16.4801 10.8946 16.7345 11 16.9997 11C17.2649 11 17.5193 10.8946 17.7068 10.7071C17.8943 10.5196 17.9997 10.2652 17.9997 10C17.9997 8.93913 17.5783 7.92172 16.8281 7.17157C16.078 6.42143 15.0605 6 13.9997 6C13.7345 6 13.4801 6.10536 13.2926 6.29289C13.105 6.48043 12.9997 6.73478 12.9997 7C12.9997 7.26522 13.105 7.51957 13.2926 7.70711C13.4801 7.89464 13.7345 8 13.9997 8C14.5301 8 15.0388 8.21071 15.4139 8.58579C15.789 8.96086 15.9997 9.46957 15.9997 10Z"
+      />
+      
+
+    </svg>
+    
+      Sample Tag
+            
+    <span
+      class="ct-visually-hidden"
+    >
+      (Opens in a new tab/window)
+    </span>
+    
+          
+    <svg
+      aria-hidden="true"
+      class="ct-icon"
+      height="24"
+      role="img"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      
+
+      <path
+        d="M17.9199 6.62C17.8185 6.37565 17.6243 6.18147 17.3799 6.08C17.2597 6.02876 17.1306 6.00158 16.9999 6H6.99994C6.73472 6 6.48037 6.10536 6.29283 6.29289C6.1053 6.48043 5.99994 6.73478 5.99994 7C5.99994 7.26522 6.1053 7.51957 6.29283 7.70711C6.48037 7.89464 6.73472 8 6.99994 8H14.5899L6.28994 16.29C6.19621 16.383 6.12182 16.4936 6.07105 16.6154C6.02028 16.7373 5.99414 16.868 5.99414 17C5.99414 17.132 6.02028 17.2627 6.07105 17.3846C6.12182 17.5064 6.19621 17.617 6.28994 17.71C6.3829 17.8037 6.4935 17.8781 6.61536 17.9289C6.73722 17.9797 6.86793 18.0058 6.99994 18.0058C7.13195 18.0058 7.26266 17.9797 7.38452 17.9289C7.50638 17.8781 7.61698 17.8037 7.70994 17.71L15.9999 9.41V17C15.9999 17.2652 16.1053 17.5196 16.2928 17.7071C16.4804 17.8946 16.7347 18 16.9999 18C17.2652 18 17.5195 17.8946 17.707 17.7071C17.8946 17.5196 17.9999 17.2652 17.9999 17V7C17.9984 6.86932 17.9712 6.74022 17.9199 6.62Z"
+      />
+      
+
+    </svg>
+    
+    
+  </a>
+  
+
+</div>
+`;
+
+exports[`Tag Component renders with required attributes 1`] = `
+<div>
+  
+
+  
+  
+  
+    
+  <span
+    class="ct-tag ct-theme-light ct-tag--primary    "
+  >
+        Sample Tag  
+  </span>
+  
+
+</div>
+`;

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

@@ -0,0 +1,63 @@
+//
+// CivicTheme Tag component styles.
+//
+
+.ct-tag {
+  $root: &;
+
+  border-radius: var(--ct-tag-border-radius);
+  border-style: solid;
+  border-width: var(--ct-tag-border-width);
+  display: inline-block;
+
+  @include ct-typography('label-extra-small');
+  @include ct-link-no-decoration();
+
+  &--icon-before {
+    .ct-icon {
+      @include ct-icon-size('small');
+
+      & {
+        margin-right: ct-spacing(0.25);
+      }
+    }
+  }
+
+  &--icon-after {
+    .ct-icon {
+      @include ct-icon-size('small');
+
+      & {
+        margin-left: ct-spacing(0.25);
+      }
+    }
+  }
+
+  &#{$root}--primary {
+    padding: ct-spacing(0.5) ct-spacing();
+  }
+
+  &#{$root}--secondary {
+    padding: ct-spacing(0.5) ct-spacing();
+  }
+
+  @include ct-component-theme($root) using($root, $theme) {
+    &#{$root}--primary {
+      @include ct-component-property($root, $theme, primary, background-color);
+      @include ct-component-property($root, $theme, primary, border-color);
+      @include ct-component-property($root, $theme, primary, color);
+    }
+
+    &#{$root}--secondary {
+      @include ct-component-property($root, $theme, secondary, background-color);
+      @include ct-component-property($root, $theme, secondary, border-color);
+      @include ct-component-property($root, $theme, secondary, color);
+    }
+
+    &#{$root}--tertiary {
+      @include ct-component-property($root, $theme, tertiary, background-color);
+      @include ct-component-property($root, $theme, tertiary, border-color);
+      @include ct-component-property($root, $theme, tertiary, color);
+    }
+  }
+}

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

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

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

@@ -0,0 +1,49 @@
+import DrupalAttribute from 'drupal-attribute';
+
+const template = 'components/01-atoms/tag/tag.twig';
+
+describe('Tag Component', () => {
+  test('renders with required attributes', async () => {
+    const c = await dom(template, {
+      content: 'Sample Tag',
+    });
+
+    expect(c.querySelectorAll('.ct-tag')).toHaveLength(1);
+    expect(c.querySelector('.ct-tag').textContent.trim()).toEqual('Sample Tag');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with optional attributes', async () => {
+    const c = await dom(template, {
+      content: 'Sample Tag',
+      type: 'secondary',
+      icon: 'call',
+      icon_placement: 'before',
+      url: 'https://example.com',
+      is_new_window: true,
+      is_external: true,
+      attributes: new DrupalAttribute().setAttribute('data-test', 'true'),
+      modifier_class: 'custom-class',
+      theme: 'dark',
+    });
+
+    expect(c.querySelectorAll('.ct-tag.custom-class.ct-theme-dark.ct-tag--secondary.ct-tag--with-icon.ct-tag--icon-before.ct-tag--external')).toHaveLength(1);
+    expect(c.querySelector('.ct-tag').textContent.trim()).toContain('Sample Tag');
+    expect(c.querySelector('.ct-tag').getAttribute('href')).toEqual('https://example.com');
+    expect(c.querySelector('.ct-tag').getAttribute('target')).toEqual('_blank');
+    expect(c.querySelector('.ct-tag').getAttribute('aria-label')).toEqual('Opens in a new tab');
+    expect(c.querySelector('.ct-tag').getAttribute('data-test')).toEqual('true');
+    expect(c.querySelector('.ct-tag .ct-tag__icon')).toBeTruthy();
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('does not render when content is empty', async () => {
+    const c = await dom(template, {
+      content: '',
+    });
+
+    expect(c.querySelectorAll('.ct-tag')).toHaveLength(0);
+  });
+});

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

@@ -0,0 +1,74 @@
+{#
+/**
+ * @file
+ * CivicTheme Tag component.
+ *
+ * Props:
+ * - theme: [string] Theme variation (light or dark).
+ * - type: [string] Tag type (primary, secondary, tertiary).
+ * - content: [string] Tag content.
+ * - icon: [string,null] Icon name.
+ * - icon_placement: [string] Icon position (before, after).
+ * - url: [string] Optional URL to convert to a link.
+ * - is_new_window: [boolean] Whether to open in a new window (only if URL is provided).
+ * - is_external: [boolean] Whether the link is external.
+ * - modifier_class: [string] Additional CSS classes.
+ * - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
+ */
+#}
+
+{% set type = type in ['primary', 'secondary', 'tertiary'] ? type : 'primary' %}
+{% set type_class = 'ct-tag--%s'|format(type) %}
+{% set icon_class = icon is not empty ? 'ct-tag--with-icon' : '' %}
+{% set icon_placement = icon_placement in ['before', 'after'] ? icon_placement : 'after' %}
+{% set icon_placement_class = icon ? 'ct-tag--icon-%s'|format(icon_placement|default('before')) : '' %}
+{% set is_external = is_external ? 'ct-tag--external' : '' %}
+{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
+{% set modifier_class = '%s %s %s %s %s %s'|format(theme_class, type_class, icon_class, icon_placement_class, is_external, modifier_class|default('')) %}
+
+{% if content|trim is not empty %}
+  {% set content_markup %}
+    {% if icon %}
+      {% set icon_markup %}
+        {% include '@base/icon/icon.twig' with {
+          symbol: icon,
+          modifier_class: 'ct-tag__icon',
+        } only %}
+      {% endset %}
+
+      {% if icon_placement == 'before' %}
+        {{- icon_markup -}}{{- content -}}
+      {% else %}
+        {{- content -}}{{- icon_markup -}}
+      {% endif %}
+
+    {% else %}
+      {{- content -}}
+    {% endif %}
+  {% endset %}
+
+  {% if is_new_window %}
+    {% set is_new_window_content %}
+      <span class="ct-visually-hidden">(Opens in a new tab/window)</span>
+    {% endset %}
+  {% endif %}
+
+  {% if is_external %}
+    {% set is_external_content %}
+      {% include '@base/icon/icon.twig' with {
+        symbol: 'upper-right-arrow',
+      } only %}
+    {% endset %}
+  {% endif %}
+
+  {% set tag = url is not empty ? 'a' : 'span' %}
+  <{{ tag }}
+  class="ct-tag {{ modifier_class -}}"
+  {% if url is not empty %}href="{{ url }}"{% endif %}
+  {% if url is not empty %}title="{{- content -}}"{% endif %}
+  {% if url is not empty and is_new_window %}target="_blank" aria-label="Opens in a new tab"{% endif %}
+  {% if attributes is defined and attributes is not null %}{{- attributes -}}{% endif %}
+  >
+  {{- content_markup -}}{{- is_new_window_content -}}{{- is_external_content -}}
+  </{{ tag }}>
+{% endif %}