@dta-au/civictheme-twig 1.13.1

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

@@ -0,0 +1,103 @@
+import DrupalAttribute from 'drupal-attribute';
+
+const template = 'components/01-atoms/button/button.twig';
+
+describe('Button Component', () => {
+  test('renders with required attributes', async () => {
+    const c = await dom(template, {
+      text: 'Click me',
+    });
+
+    expect(c.querySelectorAll('.ct-button')).toHaveLength(1);
+    expect(c.querySelector('.ct-button').textContent.trim()).toEqual('Click me');
+    expect(c.querySelector('.ct-button').getAttribute('data-component-name')).toEqual('button');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders as a link with optional attributes', async () => {
+    const c = await dom(template, {
+      kind: 'link',
+      text: 'Click me',
+      url: 'https://example.com',
+      is_new_window: true,
+      is_external: false,
+      attributes: new DrupalAttribute().setAttribute('data-test', 'true'),
+      modifier_class: 'custom-class',
+      theme: 'dark',
+      icon: 'call',
+      icon_placement: 'before',
+    });
+
+    expect(c.querySelectorAll('.ct-button.custom-class.ct-theme-dark.ct-button--link')).toHaveLength(1);
+    expect(c.querySelectorAll('.ct-button.custom-class.ct-theme-dark.ct-button--link.ct-button--external')).toHaveLength(0);
+    expect(c.querySelector('.ct-button').getAttribute('href')).toEqual('https://example.com');
+    expect(c.querySelector('.ct-button').getAttribute('target')).toEqual('_blank');
+    expect(c.querySelector('.ct-button').getAttribute('data-test')).toEqual('true');
+    expect(c.querySelector('.ct-button__icon')).toBeTruthy();
+    expect(c.querySelector('.ct-button').textContent.trim()).toContain('Click me');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders as a link with optional attributes, is external', async () => {
+    const c = await dom(template, {
+      kind: 'link',
+      text: 'Click me',
+      url: 'https://example.com',
+      is_new_window: true,
+      is_external: true,
+      attributes: new DrupalAttribute().setAttribute('data-test', 'true'),
+      modifier_class: 'custom-class',
+      theme: 'dark',
+      icon: 'call',
+      icon_placement: 'before',
+    });
+
+    expect(c.querySelectorAll('.ct-button.custom-class.ct-theme-dark.ct-button--link.ct-button--external')).toHaveLength(1);
+    expect(c.querySelector('.ct-button').getAttribute('href')).toEqual('https://example.com');
+    expect(c.querySelector('.ct-button').getAttribute('target')).toEqual('_blank');
+    expect(c.querySelector('.ct-button').getAttribute('data-test')).toEqual('true');
+    expect(c.querySelector('.ct-button').textContent.trim()).toContain('Click me');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders as a submit button', async () => {
+    const c = await dom(template, {
+      kind: 'submit',
+      text: 'Submit',
+    });
+
+    expect(c.querySelectorAll('input[type="submit"].ct-button')).toHaveLength(1);
+    expect(c.querySelector('input[type="submit"].ct-button').getAttribute('value')).toEqual('Submit');
+    expect(c.querySelector('input[type="submit"].ct-button').getAttribute('data-component-name')).toEqual('button');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders as a reset button', async () => {
+    const c = await dom(template, {
+      kind: 'reset',
+      text: 'Reset',
+    });
+
+    expect(c.querySelectorAll('input[type="reset"].ct-button')).toHaveLength(1);
+    expect(c.querySelector('input[type="reset"].ct-button').getAttribute('value')).toEqual('Reset');
+    expect(c.querySelector('input[type="reset"].ct-button').getAttribute('data-component-name')).toEqual('button');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with disabled state', async () => {
+    const c = await dom(template, {
+      text: 'Click me',
+      is_disabled: true,
+    });
+
+    expect(c.querySelectorAll('.ct-button[disabled][aria-disabled="true"]')).toHaveLength(1);
+    expect(c.querySelector('.ct-button').textContent.trim()).toEqual('Click me');
+
+    assertUniqueCssClasses(c);
+  });
+});

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

@@ -0,0 +1,82 @@
+{#
+/**
+ * @file
+ * CivicTheme Button component.
+ *
+ * Props:
+ * - theme: [string] Theme variation (light or dark).
+ * - kind: [string] Button kind (submit, reset, button, link).
+ * - type: [string] Button type (primary, secondary, tertiary).
+ * - size: [string] Button size (large, regular, small).
+ * - icon: [string,null] Icon name.
+ * - icon_placement: [string] 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).
+ * - text: [string,null] Button text.
+ * - url: [string,null] URL for the link button.
+ * - is_new_window: [boolean,null] Open in a new window.
+ * - is_external: [boolean,null] Indicates if the link is external.
+ * - is_disabled: [boolean,null] Indicates if the button is disabled.
+ * - is_dismissable: [boolean,null] Indicates if the button can be dismissed.
+ * - modifier_class: [string] Additional CSS classes.
+ * - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
+ */
+#}
+
+{% set kind = kind in ['button', 'link', 'reset', 'submit'] ? kind : 'button' %}
+{% set type = type in ['primary', 'secondary', 'tertiary'] ? type : null %}
+{% set size = size in ['large', 'regular', 'small'] ? size : 'regular' %}
+{% set icon_placement = icon_placement in ['before', 'after'] ? icon_placement : 'after' %}
+{% set type_class = type ? 'ct-button--%s'|format(type) : '' %}
+{% set kind_class = kind ? 'ct-button--%s'|format(kind) : '' %}
+{% set size_class = 'ct-button--%s'|format(size) %}
+{% set dismiss_class = is_dismissable ? 'ct-button--dismiss' : '' %}
+{% set is_external = is_external|default(false) %}
+{% set external_class = is_external ? 'ct-button--external' : '' %}
+{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
+{% set modifier_class = '%s %s %s %s %s %s %s'|format(theme_class, type_class, kind_class, size_class, dismiss_class, external_class, modifier_class|default('')) %}
+
+{% set button_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_group_disabled: icon_group_disabled is defined ? icon_group_disabled : false,
+    icon_single_only: icon_single_only is defined ? icon_single_only : false,
+    icon_class: 'ct-button__icon',
+  } only -%}
+{% endset %}
+
+{% if kind == 'button' %}
+  <button
+    class="ct-button {{ modifier_class -}}"
+    data-component-name="button"
+    {% if is_disabled %}disabled="disabled" aria-disabled="true"{% endif %}
+    {% if attributes is defined and attributes is not null %}{{- attributes -}}{% endif %}
+  >
+    {{- button_content -}}
+  </button>
+{% elseif kind == 'link' %}
+  <a
+    class="ct-button {{ modifier_class -}}"
+    role="button"
+    data-component-name="button"
+    {% if url %}href="{{ url }}"{% endif %}
+    {% if is_disabled %}disabled="disabled" aria-disabled="true"{% endif %}
+    {% if is_new_window %}target="_blank"{% endif %}
+    {% if attributes is defined and attributes is not null %}{{- attributes -}}{% endif %}
+  >
+    {{- button_content -}}
+  </a>
+{% elseif kind in ['reset', 'submit'] %}
+  <input
+    type="{{ kind }}"
+    class="ct-button {{ modifier_class -}}"
+    data-component-name="button"
+    value="{{- text -}}"
+    {% if is_disabled %}disabled="disabled" aria-disabled="true"{% endif %}
+    {% if attributes is defined and attributes is not null %}{{- attributes -}}{% endif %}
+  />
+{% endif %}

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

@@ -0,0 +1,65 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Checkbox Component does not render when name or id is empty 1`] = `
+<div>
+  
+
+
+</div>
+`;
+
+exports[`Checkbox Component does not render when name or id is empty 2`] = `
+<div>
+  
+
+
+</div>
+`;
+
+exports[`Checkbox Component renders with optional attributes 1`] = `
+<div>
+  
+
+  
+  <input
+    aria-invalid="true"
+    checked=""
+    class="ct-checkbox ct-theme-dark ct-checkbox--is-invalid custom-class"
+    data-test="true"
+    disabled=""
+    id="test-checkbox-id"
+    name="test-checkbox"
+    required=""
+    type="checkbox"
+    value="test-value"
+  />
+  
+      
+
+
+  <label
+    class="ct-label ct-theme-dark ct-label--small  ct-checkbox__label"
+    for="test-checkbox-id"
+  >
+    Test Label
+  </label>
+    
+</div>
+`;
+
+exports[`Checkbox Component renders with required attributes 1`] = `
+<div>
+  
+
+  
+  <input
+    class="ct-checkbox ct-theme-light"
+    id="test-checkbox-id"
+    name="test-checkbox"
+    type="checkbox"
+    value=""
+  />
+  
+  
+</div>
+`;

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

@@ -0,0 +1,176 @@
+//
+// CivicTheme Checkbox component styles.
+//
+
+@use 'sass:math';
+
+.ct-checkbox {
+  $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 checkbox 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: $_hover-border-width;
+  $_checked-square-width: $_width * 0.6923;
+  $_checked-square-height: $_height * 0.6923;
+  $_checked-hover-border-width: $_checked-border-width;
+  $_ct-checkbox-check_resized: ct-svg-viewbox($ct-checkbox-check, '0 0 #{$_checked-square-width} #{$_checked-square-height}');
+
+  @include ct-form-control-no-appearance();
+  @include ct-form-control-disabled(var(--ct-checkbox-disabled-opacity));
+
+  border-radius: var(--ct-checkbox-border-radius);
+  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: calc(var(--ct-checkbox-border-radius) / 2);
+      width: $_checked-square-width;
+      height: $_checked-square-height;
+      margin: math.div($_height - $_checked-square-height, 2) - $_checked-border-width auto;
+      mask-image: $_ct-checkbox-check_resized;
+
+      @if $ct-animation-enabled and $ct-checkbox-animation-duration > 0 {
+        transform: scale(0);
+        animation: check-grow var(--ct-checkbox-animation-duration) forwards;
+
+        @keyframes check-grow {
+          to {
+            transform: scale(1);
+          }
+        }
+      }
+    }
+  }
+
+  &:focus-visible {
+    outline-style: solid;
+    outline-width: var(--ct-checkbox-outline-width);
+    outline-offset: var(--ct-checkbox-outline-offset);
+  }
+
+  &:disabled {
+    + label {
+      opacity: var(--ct-checkbox-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/checkbox/checkbox.stories.js

@@ -0,0 +1,63 @@
+/**
+ * CivicTheme Checkbox component stories.
+ */
+
+import Component from './checkbox.twig';
+
+const meta = {
+  title: 'Atoms/Form Controls/Checkbox',
+  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 Checkbox = {
+  title: 'Atoms/Form Controls/Checkbox',
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    theme: 'light',
+    label: 'This is a checkbox',
+    name: 'name',
+    id: 'id-name',
+    value: '50',
+    is_checked: false,
+    is_required: false,
+    is_invalid: false,
+    is_disabled: false,
+  },
+};

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

@@ -0,0 +1,67 @@
+import DrupalAttribute from 'drupal-attribute';
+
+const template = 'components/01-atoms/checkbox/checkbox.twig';
+
+describe('Checkbox Component', () => {
+  test('renders with required attributes', async () => {
+    const c = await dom(template, {
+      name: 'test-checkbox',
+      id: 'test-checkbox-id',
+    });
+
+    expect(c.querySelectorAll('.ct-checkbox')).toHaveLength(1);
+    expect(c.querySelector('.ct-checkbox').getAttribute('name')).toBe('test-checkbox');
+    expect(c.querySelector('.ct-checkbox').getAttribute('id')).toBe('test-checkbox-id');
+    expect(c.querySelector('.ct-checkbox').getAttribute('type')).toBe('checkbox');
+    expect(c.querySelector('.ct-checkbox').checked).toBe(false);
+    expect(c.querySelector('.ct-checkbox').disabled).toBe(false);
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with optional attributes', async () => {
+    const c = await dom(template, {
+      name: 'test-checkbox',
+      id: 'test-checkbox-id',
+      value: 'test-value',
+      label: 'Test Label',
+      is_checked: true,
+      is_required: true,
+      is_invalid: true,
+      is_disabled: true,
+      attributes: new DrupalAttribute().setAttribute('data-test', 'true'),
+      modifier_class: 'custom-class',
+      theme: 'dark',
+    });
+
+    expect(c.querySelectorAll('.ct-checkbox.ct-theme-dark.ct-checkbox--is-invalid.custom-class')).toHaveLength(1);
+    expect(c.querySelector('.ct-checkbox').getAttribute('name')).toBe('test-checkbox');
+    expect(c.querySelector('.ct-checkbox').getAttribute('id')).toBe('test-checkbox-id');
+    expect(c.querySelector('.ct-checkbox').getAttribute('value')).toBe('test-value');
+    expect(c.querySelector('.ct-checkbox').required).toBe(true);
+    expect(c.querySelector('.ct-checkbox').checked).toBe(true);
+    expect(c.querySelector('.ct-checkbox').disabled).toBe(true);
+    expect(c.querySelector('.ct-checkbox').getAttribute('data-test')).toBe('true');
+
+    const label = c.querySelector('.ct-checkbox__label');
+    expect(label).not.toBeNull();
+    expect(label.textContent.trim()).toBe('Test Label');
+    expect(label.getAttribute('for')).toBe('test-checkbox-id');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('does not render when name or id is empty', async () => {
+    const c1 = await dom(template, {
+      name: '',
+      id: 'test-checkbox-id',
+    });
+    expect(c1.querySelectorAll('.ct-checkbox')).toHaveLength(0);
+
+    const c2 = await dom(template, {
+      name: 'test-checkbox',
+      id: '',
+    });
+    expect(c2.querySelectorAll('.ct-checkbox')).toHaveLength(0);
+  });
+});

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

@@ -0,0 +1,47 @@
+{#
+/**
+ * @file
+ * CivicTheme Checkbox component.
+ *
+ * Props:
+ * - theme: [string] Theme variation (light or dark).
+ * - name: [string] DOM name (required).
+ * - id: [string] DOM id (required).
+ * - value: [string] DOM value.
+ * - label: [string] Label content.
+ * - is_checked: [boolean] Whether the checkbox is checked.
+ * - is_required: [boolean] Whether the checkbox is required.
+ * - is_invalid: [boolean] Whether the checkbox is invalid.
+ * - is_disabled: [boolean] Whether the checkbox 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-checkbox--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="checkbox"
+    class="ct-checkbox {{ 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-checkbox__label',
+    } only %}
+  {% endif %}
+{% endif %}

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

@@ -0,0 +1,90 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Chip Component does not render when content is empty 1`] = `
+<div>
+  
+
+
+</div>
+`;
+
+exports[`Chip Component renders with optional attributes 1`] = `
+<div>
+  
+
+    
+  <label
+    class="ct-chip ct-theme-dark ct-chip--input ct-chip--large active ct-chip--multiple custom-class"
+    data-chip-dismiss=""
+    data-chip-group-parent="test-group"
+    data-component-name="chip"
+  >
+    
+      
+    <input
+      checked="checked"
+      class="ct-chip__input"
+      data-test="true"
+      type="checkbox"
+    />
+    
+      
+    <span
+      class="ct-text-icon__text"
+    >
+      Sample 
+    </span>
+    <span
+      class="ct-text-icon__group"
+    >
+      <span
+        class="ct-text-icon__text"
+      >
+        Chip
+      </span>
+       
+      <svg
+        aria-hidden="true"
+        class="ct-icon ct-chip__dismiss"
+        height="24"
+        role="img"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        
+
+        <path
+          d="M13.4099 11.9999L17.7099 7.70994C17.8982 7.52164 18.004 7.26624 18.004 6.99994C18.004 6.73364 17.8982 6.47825 17.7099 6.28994C17.5216 6.10164 17.2662 5.99585 16.9999 5.99585C16.7336 5.99585 16.4782 6.10164 16.2899 6.28994L11.9999 10.5899L7.70994 6.28994C7.52164 6.10164 7.26624 5.99585 6.99994 5.99585C6.73364 5.99585 6.47824 6.10164 6.28994 6.28994C6.10164 6.47825 5.99585 6.73364 5.99585 6.99994C5.99585 7.26624 6.10164 7.52164 6.28994 7.70994L10.5899 11.9999L6.28994 16.2899C6.19621 16.3829 6.12182 16.4935 6.07105 16.6154C6.02028 16.7372 5.99414 16.8679 5.99414 16.9999C5.99414 17.132 6.02028 17.2627 6.07105 17.3845C6.12182 17.5064 6.19621 17.617 6.28994 17.7099C6.3829 17.8037 6.4935 17.8781 6.61536 17.9288C6.73722 17.9796 6.86793 18.0057 6.99994 18.0057C7.13195 18.0057 7.26266 17.9796 7.38452 17.9288C7.50638 17.8781 7.61698 17.8037 7.70994 17.7099L11.9999 13.4099L16.2899 17.7099C16.3829 17.8037 16.4935 17.8781 16.6154 17.9288C16.7372 17.9796 16.8679 18.0057 16.9999 18.0057C17.132 18.0057 17.2627 17.9796 17.3845 17.9288C17.5064 17.8781 17.617 17.8037 17.7099 17.7099C17.8037 17.617 17.8781 17.5064 17.9288 17.3845C17.9796 17.2627 18.0057 17.132 18.0057 16.9999C18.0057 16.8679 17.9796 16.7372 17.9288 16.6154C17.8781 16.4935 17.8037 16.3829 17.7099 16.2899L13.4099 11.9999Z"
+        />
+        
+
+      </svg>
+      
+
+    </span>
+  </label>
+  
+  
+</div>
+`;
+
+exports[`Chip Component renders with required attributes 1`] = `
+<div>
+  
+
+    
+  <span
+    class="ct-chip ct-theme-light ct-chip--default ct-chip--regular   "
+    data-component-name="chip"
+  >
+    <span
+      class="ct-text-icon__text"
+    >
+      Sample Chip
+    </span>
+  </span>
+  
+  
+</div>
+`;