@dta-au/civictheme-twig 1.13.1

package/components/03-organisms/message/message.test.js

@@ -0,0 +1,158 @@
+const template = 'components/03-organisms/message/message.twig';
+
+describe('Message Component', () => {
+  test('renders with all attributes provided', async () => {
+    const c = await dom(template, {
+      theme: 'dark',
+      type: 'error',
+      title: 'this is title message.',
+      content: 'This is an error message.',
+      modifier_class: 'additional-class',
+      with_background: true,
+      vertical_spacing: 'both',
+      hide_role: false,
+    });
+
+    expect(c.querySelectorAll('.ct-message')).toHaveLength(1);
+    expect(c.querySelector('.ct-message').classList).toContain('ct-theme-dark');
+    expect(c.querySelector('.ct-message').classList).toContain('ct-message--error');
+    expect(c.querySelector('.ct-message').classList).toContain('ct-message--with-background');
+    expect(c.querySelector('.ct-message').classList).toContain('ct-vertical-spacing--both');
+    expect(c.querySelector('.ct-message').classList).toContain('additional-class');
+    expect(c.querySelector('.ct-message__title').textContent.trim()).toBe('this is title message.');
+    expect(c.querySelector('.ct-message__content').textContent.trim()).toBe('This is an error message.');
+    expect(c.querySelector('.ct-message').getAttribute('role')).toBe('alert');
+    expect(c.querySelector('.ct-message').getAttribute('aria-label')).toBe('error');
+    expect(c.querySelector('.ct-message').getAttribute('aria-live')).toBe('assertive');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with default type and theme', async () => {
+    const c = await dom(template, {
+      content: 'This is a default message.',
+      modifier_class: '',
+    });
+
+    expect(c.querySelectorAll('.ct-message')).toHaveLength(1);
+    expect(c.querySelector('.ct-message').classList).toContain('ct-theme-light');
+    expect(c.querySelector('.ct-message').classList).toContain('ct-message--information');
+    expect(c.querySelector('.ct-message__content').textContent.trim()).toBe('This is a default message.');
+    expect(c.querySelector('.ct-message').getAttribute('role')).toBe('contentinfo');
+    expect(c.querySelector('.ct-message').getAttribute('aria-label')).toBe('information');
+    expect(c.querySelector('.ct-message').getAttribute('aria-live')).toBe('assertive');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders without content', async () => {
+    const c = await dom(template, {
+      theme: 'light',
+      type: 'success',
+      title: 'this is title message.',
+      content: '',
+      modifier_class: 'additional-class',
+    });
+
+    expect(c.querySelectorAll('.ct-message')).toHaveLength(1);
+    expect(c.querySelector('.ct-message').classList).toContain('ct-theme-light');
+    expect(c.querySelector('.ct-message').classList).toContain('ct-message--success');
+    expect(c.querySelector('.ct-message').classList).toContain('additional-class');
+    expect(c.querySelector('.ct-message__content')).toBeNull();
+    expect(c.querySelector('.ct-message').getAttribute('role')).toBe('contentinfo');
+    expect(c.querySelector('.ct-message').getAttribute('aria-label')).toBe('success');
+    expect(c.querySelector('.ct-message').getAttribute('aria-live')).toBe('assertive');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders without role', async () => {
+    const c = await dom(template, {
+      theme: 'light',
+      type: 'success',
+      content: 'This is a default message.',
+      modifier_class: 'additional-class',
+      has_aria: false,
+    });
+
+    expect(c.querySelectorAll('.ct-message')).toHaveLength(1);
+    expect(c.querySelector('.ct-message').classList).toContain('ct-theme-light');
+    expect(c.querySelector('.ct-message').classList).toContain('ct-message--success');
+    expect(c.querySelector('.ct-message').classList).toContain('additional-class');
+    expect(c.querySelector('.ct-message__content').textContent.trim()).toBe('This is a default message.');
+    expect(c.querySelector('.ct-message').getAttribute('role')).toBeNull();
+    expect(c.querySelector('.ct-message').getAttribute('aria-label')).toBeNull();
+    expect(c.querySelector('.ct-message').getAttribute('aria-live')).toBeNull();
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with background', async () => {
+    const c = await dom(template, {
+      theme: 'light',
+      type: 'success',
+      content: 'This is a default message.',
+      with_background: true,
+      has_aria: false,
+    });
+
+    expect(c.querySelectorAll('.ct-message')).toHaveLength(1);
+    expect(c.querySelector('.ct-message').classList).toContain('ct-message--with-background');
+    expect(c.querySelector('.ct-message__content').textContent.trim()).toBe('This is a default message.');
+    expect(c.querySelector('.ct-message').getAttribute('role')).toBeNull();
+    expect(c.querySelector('.ct-message').getAttribute('aria-label')).toBeNull();
+    expect(c.querySelector('.ct-message').getAttribute('aria-live')).toBeNull();
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with vertical spacing', async () => {
+    const c = await dom(template, {
+      theme: 'light',
+      type: 'success',
+      content: 'This is a default message.',
+      vertical_spacing: 'both',
+      has_aria: false,
+    });
+
+    expect(c.querySelectorAll('.ct-message')).toHaveLength(1);
+    expect(c.querySelector('.ct-message').classList).toContain('ct-vertical-spacing--both');
+    expect(c.querySelector('.ct-message__content').textContent.trim()).toBe('This is a default message.');
+    expect(c.querySelector('.ct-message').getAttribute('role')).toBeNull();
+    expect(c.querySelector('.ct-message').getAttribute('aria-label')).toBeNull();
+    expect(c.querySelector('.ct-message').getAttribute('aria-live')).toBeNull();
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('does not render when content and title are empty', async () => {
+    const c = await dom(template, {
+      theme: 'light',
+      type: 'warning',
+      content: '',
+      title: '',
+      modifier_class: '',
+    });
+
+    expect(c.querySelectorAll('.ct-message')).toHaveLength(0);
+    expect(c.querySelector('.ct-message__title')).toBeNull();
+    expect(c.querySelector('.ct-message__content')).toBeNull();
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with vertical spacing', async () => {
+    const c = await dom(template, {
+      theme: 'dark',
+      type: 'error',
+      title: 'this is title message.',
+      description: 'This is an error message.',
+      vertical_spacing: 'both',
+      modifier_class: 'additional-class',
+    });
+
+    expect(c.querySelector('.ct-message').classList).toContain('ct-vertical-spacing--both');
+
+    assertUniqueCssClasses(c);
+  });
+});

package/components/03-organisms/message/message.twig

@@ -0,0 +1,69 @@
+{#
+/**
+ * @file
+ * CivicTheme Message component.
+ *
+ * Props:
+ * - theme: [string] Theme variation (light or dark).
+ * - type: [string] Message type (information, error, warning, success).
+ * - vertical_spacing: [string] Message vertical spacing (none, top, bottom, both).
+ * - with_background: [boolean] Whether to display with a background.
+ * - modifier_class: [string] Additional CSS classes.
+ * - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
+ *
+ * Slots:
+ * - title: Title text.
+ * - content: Content text.
+ */
+#}
+
+{% set type = type in ['information', 'error', 'warning', 'success'] ? type : 'information' %}
+{% set type_class = 'ct-message--%s'|format(type) %}
+{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
+{% set with_background_class = with_background ? 'ct-message--with-background' : '' %}
+{% set vertical_spacing_class = vertical_spacing in ['top', 'bottom', 'both'] ? 'ct-vertical-spacing--%s'|format(vertical_spacing) : '' %}
+{% set has_aria = has_aria is not defined ? true : has_aria %}
+{% set modifier_class = '%s %s %s %s %s'|format(theme_class, type_class, with_background_class, vertical_spacing_class, modifier_class|default('')) %}
+
+{% set icons = {
+  information: 'information-mark',
+  warning: 'exclamation-mark-2',
+  error: 'exclamation-mark-1',
+  success: 'approve',
+} %}
+
+{% if title or content %}
+  <div class="ct-message {{ modifier_class }}"
+    {% if has_aria %}
+      role="{{ type == 'error' ? 'alert' : 'contentinfo' }}"
+      aria-label="{{ type }}"
+      aria-live="assertive"
+    {% endif %}
+    {% if attributes is defined and attributes is not null %}{{- attributes -}}{% endif %}
+  >
+    <div class="ct-message__inner">
+      {% if icons[type] is defined %}
+        <div class="ct-message__icon">
+          {% include '@base/icon/icon.twig' with {
+            symbol: icons[type],
+            size: 'regular',
+          } only %}
+        </div>
+      {% endif %}
+
+      <div class="ct-message__inner-wrapper">
+        {% if title %}
+          <div class="ct-message__title">{{ title }}</div>
+        {% endif %}
+
+        {% if content %}
+          {% include '@atoms/paragraph/paragraph.twig' with {
+            theme: theme,
+            content: content,
+            modifier_class: 'ct-message__content',
+          } only %}
+        {% endif %}
+      </div>
+    </div>
+  </div>
+{% endif %}