@dta-au/civictheme-twig 1.13.1

package/components/03-organisms/alert/alert.js

@@ -0,0 +1,268 @@
+/**
+ * CivicTheme Alert component.
+ */
+
+function CivicThemeAlert(el) {
+  // Use "data-alert"'s attribute value to identify if this
+  // component was already initialised.
+  if (el.getAttribute('data-alert') === 'true' || this.container) {
+    return;
+  }
+
+  this.container = el;
+  this.endpoint = this.container.getAttribute('data-alert-endpoint');
+  if (this.endpoint !== null) {
+    this.getAll();
+  }
+
+  // Mark as initialized.
+  this.container.setAttribute('data-alert', 'true');
+}
+
+/**
+ * Gets alerts from endpoint.
+ */
+CivicThemeAlert.prototype.getAll = function () {
+  const { endpoint } = this;
+  const request = new XMLHttpRequest();
+  request.open('get', endpoint);
+  request.onreadystatechange = () => {
+    if (request.readyState === 4 && request.status === 200) {
+      try {
+        const response = JSON.parse(request.responseText);
+        const html = this.filter(response);
+        this.insert(html);
+      } catch (e) {
+        // Do nothing.
+      }
+    }
+  };
+  request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+  request.send();
+};
+
+/**
+ * Filters out alerts not to show ie dismissed, page-specific alerts.
+ */
+CivicThemeAlert.prototype.filter = function (response) {
+  let html = '';
+
+  if (response.length) {
+    for (let i = 0; i < response.length; i++) {
+      const item = response[i];
+
+      if (!this.isValidResponse(item)) {
+        continue;
+      }
+
+      // Skip the alert hidden by the user session.
+      if (this.hasCookieValue(item.id, item.message)) {
+        continue;
+      }
+
+      // Skip the alert not matching visibility rules.
+      if (!this.isVisible(item.visibility)) {
+        continue;
+      }
+
+      html += item.message;
+    }
+  }
+
+  return html;
+};
+
+/**
+ * Checks whether an alert is to be shown on a specified page.
+ */
+CivicThemeAlert.prototype.isVisible = function (visibilityString) {
+  if ((typeof visibilityString === 'undefined') || visibilityString === false || visibilityString === '') {
+    return true;
+  }
+
+  let pageVisibility = visibilityString.replace(/\*/g, '[^ ]*');
+  // Replace '<front>' with "/".
+  pageVisibility = pageVisibility.replace('<front>', '/');
+  // Replace all occurrences of '/' with '\/'.
+  // eslint-disable-next-line
+  pageVisibility = pageVisibility.replace('/', '\/');
+
+  const pageVisibilityRules = pageVisibility.split(/\r?\n/);
+  if (pageVisibilityRules.length !== 0) {
+    const path = this.urlPath();
+
+    for (let r = 0, rlen = pageVisibilityRules.length; r < rlen; r++) {
+      if (path === pageVisibilityRules[r]) {
+        return true;
+      }
+
+      if (pageVisibilityRules[r].indexOf('*') !== -1 && path.match(new RegExp(`^${pageVisibilityRules[r]}`))) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  return true;
+};
+
+/**
+ * Check if response object is valid.
+ */
+CivicThemeAlert.prototype.isValidResponse = function (item) {
+  return typeof item === 'object' && 'id' in item && 'message' in item && 'visibility' in item;
+};
+
+/**
+ * Get the cookie name.
+ */
+CivicThemeAlert.prototype.getCookieName = function () {
+  return 'ct-alert-hide';
+};
+
+/**
+ * Check if cookie has value.
+ */
+CivicThemeAlert.prototype.hasCookieValue = function (id, message) {
+  const cookie = this.getCookie();
+  return id in cookie && cookie[id] === this.hashString(this.removeHtml(message));
+};
+
+/**
+ * Sets an cookie value.
+ */
+CivicThemeAlert.prototype.setCookieValue = function (id, message) {
+  const cookie = this.getCookie();
+  cookie[id] = this.hashString(this.removeHtml(message));
+  this.setCookie(cookie);
+};
+
+/**
+ * Get cookie value.
+ */
+CivicThemeAlert.prototype.getCookie = function () {
+  let cookie = {};
+
+  const values = document.cookie.split(';').filter((item) => item.trim().startsWith(`${this.getCookieName()}=`));
+  if (values.length !== 1) {
+    return cookie;
+  }
+
+  const stringValues = values[0].trim().replace(`${this.getCookieName()}=`, '');
+  if (typeof stringValues !== 'string') {
+    return cookie;
+  }
+
+  try {
+    cookie = JSON.parse(stringValues);
+  } catch (e) {
+    cookie = {};
+  }
+
+  return cookie;
+};
+
+/**
+ * Set a cookie.
+ */
+CivicThemeAlert.prototype.setCookie = function (value) {
+  document.cookie = `${this.getCookieName()}=${JSON.stringify(value)}; SameSite=Strict; Path=/`;
+};
+
+/**
+ * Simple HTML remover.
+ */
+CivicThemeAlert.prototype.removeHtml = function (string) {
+  return string
+    .replace(/(\r\n|\n|\r)/g, '')
+    .replace(/\s/g, '')
+    .replace(/(&nbsp;|<([^>]+)>)/ig, '')
+    .trim();
+};
+
+/**
+ * Hash string.
+ */
+CivicThemeAlert.prototype.hashString = function (string) {
+  let hash = 0;
+  let i;
+  let
+    chr;
+  if (string.length === 0) return hash;
+  for (i = 0; i < string.length; i++) {
+    chr = string.charCodeAt(i);
+    // eslint-disable-next-line no-bitwise
+    hash = ((hash << 5) - hash) + chr;
+    // eslint-disable-next-line no-bitwise
+    hash |= 0;
+  }
+  return hash;
+};
+
+/**
+ * Insert alerts into container.
+ */
+CivicThemeAlert.prototype.insert = function (html) {
+  // Build the alert.
+  this.container.insertAdjacentHTML('afterbegin', html);
+  this.setDismissListeners();
+};
+
+/**
+ * Sets dismiss listeners to alerts.
+ */
+CivicThemeAlert.prototype.setDismissListeners = function () {
+  // Process the Close button of each alert.
+  document
+    .querySelectorAll('[data-alert-dismiss-trigger]')
+    .forEach((el) => {
+      el.addEventListener('click', (event) => {
+        event.stopPropagation();
+        const parent = this.getParentElement(event.currentTarget, '[data-component-name="ct-alert"]');
+        this.dismiss(parent);
+      });
+    });
+};
+
+/**
+ * Dismisses an alert and adds cookie to dismiss for session.
+ */
+CivicThemeAlert.prototype.dismiss = function (element) {
+  if (element !== null) {
+    const parent = this.getParentElement(element, '[data-component-name="ct-alerts"]');
+    if (parent) {
+      parent.removeChild(element);
+    }
+    const id = element.getAttribute('data-alert-id');
+    if (id) {
+      this.setCookieValue(id, element.outerHTML);
+    }
+  }
+};
+
+/**
+ * Get a parent element matching a selector.
+ */
+CivicThemeAlert.prototype.getParentElement = function (element, selector) {
+  while (element !== null && !element.matches(selector)) {
+    element = element.parentNode;
+  }
+  return element;
+};
+
+/**
+ * Get current path from URL or data attribute.
+ *
+ * 'data-test-path' attribute is used for testing of this component within
+ * Storybook.
+ */
+CivicThemeAlert.prototype.urlPath = function () {
+  return this.container.getAttribute('data-test-path') || window.location.pathname;
+};
+
+/**
+ * Initialise component.
+ */
+document.querySelectorAll('[data-component-name="ct-alerts"]').forEach((el) => {
+  new CivicThemeAlert(el);
+});

package/components/03-organisms/alert/alert.scss

@@ -0,0 +1,90 @@
+//
+// CivicTheme Alert component styles.
+//
+
+@use 'sass:map';
+
+.ct-alert {
+  $root: &;
+
+  position: relative;
+  padding: ct-spacing(2);
+
+  @include ct-breakpoint(m) {
+    padding: ct-spacing(3);
+  }
+
+  @include ct-typography('label-extra-small');
+
+  #{$root}__title {
+    @include ct-typography('heading-6');
+
+    display: flex;
+    align-items: center;
+
+    @include ct-breakpoint-upto('m') {
+      margin-bottom: ct-spacing();
+    }
+  }
+
+  #{$root}__icon {
+    width: ct-particle(3);
+    margin-right: ct-spacing();
+    line-height: 100%;
+
+    @include ct-breakpoint(m) {
+      margin-right: ct-spacing(2);
+    }
+  }
+
+  #{$root}__summary {
+    display: flex;
+    align-items: center;
+
+    @include ct-breakpoint(m) {
+      position: relative;
+    }
+
+    p {
+      &:nth-last-child(-n+2) {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  #{$root}__dismiss-button {
+    cursor: pointer;
+    margin-left: ct-spacing(3);
+    position: absolute;
+    top: ct-spacing(2);
+    right: ct-spacing(2);
+    background-color: transparent;
+    padding: 0;
+
+    @include ct-breakpoint(m) {
+      @include ct-typography('heading-6');
+
+      position: unset;
+      align-self: center;
+      margin-left: auto;
+      top: 50%;
+      bottom: 50%;
+    }
+  }
+
+  @include ct-component-theme($root) using($root, $theme) {
+    $types: ('information', 'warning', 'error', 'success');
+
+    @each $type in $types {
+      &#{$root}--#{$type} {
+        @include ct-component-property($root, $theme, $type, background-color);
+        @include ct-component-property($root, $theme, $type, color);
+
+        #{$root}__dismiss-button,
+        #{$root}__icon {
+          @include ct-component-property($root, $theme, $type, icon, color);
+        }
+      }
+    }
+  }
+}

package/components/03-organisms/alert/alert.stories.js

@@ -0,0 +1,104 @@
+/**
+ * CivicTheme Alert component stories.
+ */
+
+import Component from './alert.twig';
+
+const meta = {
+  title: 'Organisms/Alert',
+  component: Component,
+  argTypes: {
+    theme: {
+      control: { type: 'radio' },
+      options: ['light', 'dark'],
+    },
+    type: {
+      control: { type: 'radio' },
+      options: ['information', 'error', 'warning', 'success'],
+    },
+    id: {
+      control: { type: 'text' },
+    },
+    title: {
+      control: { type: 'text' },
+    },
+    description: {
+      control: { type: 'text' },
+    },
+    modifier_class: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+export default meta;
+
+export const Alert = {
+  parameters: {
+    layout: 'fullscreen',
+    storyDocs: 'Dismiss alerts by clicking on [X] button.<br/><br/>Navigate to another component and return here to assert that dismissed alerts do not appear.<br/><br/>Dismissed alerts will be revealed if their content was updated. Change payload to "Updated" to see dismissed alerts appear again.',
+    storyDocsPlacement: 'after',
+  },
+  args: {
+    theme: 'light',
+    type: 'information',
+    id: 'alert-1',
+    title: 'Site information',
+    description: 'Alert description',
+    attributes: null,
+    modifier_class: '',
+  },
+};
+
+export const AlertApi = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    endpoint_type: {
+      control: { type: 'radio' },
+      options: ['default', 'updated', 'invalid'],
+    },
+    theme: {
+      table: { disable: true },
+    },
+    type: {
+      table: { disable: true },
+    },
+    id: {
+      table: { disable: true },
+    },
+    title: {
+      table: { disable: true },
+    },
+    description: {
+      table: { disable: true },
+    },
+    attributes: {
+      table: { disable: true },
+    },
+    modifier_class: {
+      table: { disable: true },
+    },
+  },
+  args: {
+    endpoint_type: 'default',
+  },
+  render: (args) => {
+    let endpoint = '';
+    switch (args.endpoint_type) {
+      case 'updated':
+        endpoint = 'api/alerts2.json';
+        break;
+      case 'invalid':
+        endpoint = 'api/alerts3.json';
+        break;
+      default:
+        endpoint = 'api/alerts1.json';
+    }
+    return `
+      <div data-component-name="ct-alerts" data-alert-endpoint="${endpoint}" data-test-path="/"></div>
+      <button style="margin-top: 24px;" onclick="document.cookie = 'ct-alert-hide=;expires=Thu, 01 Jan 1970 00:00:01 GMT;'; window.location.reload();">Clear cookie</button>
+    `;
+  },
+};

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

@@ -0,0 +1,59 @@
+import DrupalAttribute from 'drupal-attribute';
+
+const template = 'components/03-organisms/alert/alert.twig';
+
+describe('Alert Component', () => {
+  test('renders with required attributes', async () => {
+    const c = await dom(template, {
+      description: 'This is an info alert.',
+    });
+
+    expect(c.querySelectorAll('.ct-alert')).toHaveLength(1);
+    expect(c.querySelector('.ct-alert__summary').textContent.trim()).toEqual('This is an info alert.');
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with optional attributes', async () => {
+    const c = await dom(template, {
+      description: 'This is a warning alert.',
+      theme: 'dark',
+      type: 'warning',
+      id: 'alert-1',
+      title: 'Warning Alert',
+      attributes: new DrupalAttribute().setAttribute('data-test', 'true'),
+      modifier_class: 'custom-class',
+    });
+
+    const element = c.querySelector('.ct-alert');
+    expect(element).not.toBeNull();
+    expect(element.classList.contains('ct-theme-dark')).toBe(true);
+    expect(element.classList.contains('ct-alert--warning')).toBe(true);
+    expect(element.classList.contains('custom-class')).toBe(true);
+    expect(element.getAttribute('data-test')).toEqual('true');
+    expect(element.getAttribute('data-alert-id')).toEqual('alert-1');
+    expect(element.getAttribute('data-alert-type')).toEqual('warning');
+    expect(c.querySelector('.ct-alert__title').textContent.trim()).toEqual('Warning Alert');
+    expect(c.querySelector('.ct-alert__summary').textContent.trim()).toEqual('This is a warning alert.');
+    expect(c.querySelector('.ct-alert__dismiss-button')).not.toBeNull();
+    assertUniqueCssClasses(c);
+  });
+
+  test('does not render when description is empty', async () => {
+    const c = await dom(template, {
+      description: '',
+    });
+
+    expect(c.querySelectorAll('.ct-alert')).toHaveLength(0);
+  });
+
+  test('renders with correct icon for alert type', async () => {
+    const c = await dom(template, {
+      description: 'This is a success alert.',
+      type: 'success',
+    });
+
+    expect(c.querySelector('.ct-alert--success')).not.toBeNull();
+    expect(c.querySelector('.ct-icon')).not.toBeNull();
+    assertUniqueCssClasses(c);
+  });
+});

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

@@ -0,0 +1,76 @@
+{#
+/**
+ * @file
+ * CivicTheme Alert component.
+ *
+ * Props:
+ * - theme: [string] Theme variation (light or dark).
+ * - type: [string] Alert type (information, error, warning, success).
+ * - id: [string] Unique identifier for the alert.
+ * - modifier_class: [string] Additional CSS classes.
+ * - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
+ *
+ * Slots:
+ * - title: Alert title.
+ * - description: Alert description content.
+ */
+#}
+
+{% set theme = theme|default('light') %}
+{% set theme = theme in ['light', 'dark'] ? theme : 'light' %}
+{% set theme_class = 'ct-theme-%s'|format(theme) %}
+{% set type = type in ['information', 'error', 'warning', 'success'] ? type : 'information' %}
+{% set type_class = 'ct-alert--%s'|format(type|default('information')) %}
+{% set modifier_class = '%s %s %s'|format(theme_class, type_class, modifier_class|default('')) %}
+
+{% set icons = {
+  information: 'information-mark',
+  warning: 'exclamation-mark-2',
+  error: 'exclamation-mark-1',
+  success: 'megaphone',
+} %}
+
+{% if description is not empty %}
+  <div
+    class="ct-alert {{ modifier_class -}}"
+    data-alert-id="{{ id }}"
+    data-alert-type="{{ type }}"
+    data-component-name="ct-alert"
+    role="alert"
+    {% if attributes is defined and attributes is not null %}{{- attributes -}}{% endif %}
+  >
+    <div class="container">
+      <div class="row">
+        <div class="ct-alert__title col-xxs-12 col-m-3">
+          {% if icons[type] is defined %}
+            <span class="ct-alert__icon">
+              {% include '@base/icon/icon.twig' with {
+                symbol: icons[type],
+                size: 'regular',
+              } only %}
+            </span>
+          {% endif %}
+          {{ title }}
+        </div>
+
+        <div class="ct-alert__summary col-xxs-12 col-m-9">
+          {{ description }}
+          {% include '@atoms/button/button.twig' with {
+            kind: 'button',
+            theme: theme,
+            type: 'tertiary',
+            modifier_class: 'ct-alert__dismiss-button',
+            text: '',
+            icon: 'cancel',
+            size: 'regular',
+            attributes: create_attribute({
+              id: 'dismiss-alert-' ~ id,
+              'data-alert-dismiss-trigger': '',
+              title: 'close ' ~ type ~ ' alert',
+            }),
+          } %}
+        </div>
+      </div>
+    </div>
+  </div>
+{% endif %}