@dta-au/civictheme-twig 1.13.1

package/components/02-molecules/inline-filter/inline-filter.stories.js

@@ -0,0 +1,52 @@
+/**
+ * CivicTheme Inline Filter component stories.
+ */
+
+import Component from './inline-filter.twig';
+import InlineFilterData from './inline-filter.stories.data';
+
+const meta = {
+  title: 'Molecules/List/Inline Filter',
+  component: Component,
+  argTypes: {
+    theme: {
+      control: { type: 'radio' },
+      options: ['light', 'dark'],
+    },
+    items: {
+      control: { type: 'text' },
+    },
+    submit_text: {
+      control: { type: 'text' },
+    },
+    items_end: {
+      control: { type: 'text' },
+    },
+    modifier_class: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+export default meta;
+
+export const InlineFilter = {
+  parameters: {
+    layout: 'padded',
+  },
+  args: InlineFilterData.args('light'),
+};
+
+export const InlineFilterDark = {
+  parameters: {
+    layout: 'padded',
+  },
+
+  args: InlineFilterData.args('dark'),
+
+  globals: {
+    backgrounds: {
+      value: 'dark',
+    },
+  },
+};

package/components/02-molecules/inline-filter/inline-filter.twig

@@ -0,0 +1,48 @@
+{#
+/**
+ * @file
+ * CivicTheme Inline Filter component.
+ *
+ * Props:
+ * - theme: [string] Theme variation (light or dark).
+ * - title: [string] Filter title.
+ * - submit_text: [string] The text of the submit button.
+ * - modifier_class: [string] Additional CSS classes.
+ * - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
+ *
+ * Slots:
+ * - items: Field items to display. Ideally a single text field.
+ * - items_end: Field items to appear after the 'items' slot.
+ */
+#}
+
+{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
+{% set modifier_class = '%s %s'|format(theme_class, modifier_class|default('')) %}
+
+<div class="ct-inline-filter {{ modifier_class -}}" {% if attributes is defined and attributes is not null %}{{- attributes -}}{% endif %}>
+  {% if title is not empty %}
+    <div class="ct-inline-filter__title">{{ title }}</div>
+  {% endif %}
+  <div class="ct-inline-filter__content">
+    {% if items is not empty %}
+      <div class="ct-inline-filter__items">
+        {{ items }}
+        <div class="ct-inline-filter__actions">
+          {% include '@atoms/button/button.twig' with {
+            theme: theme,
+            kind: 'button',
+            type: 'primary',
+            text: submit_text|default('Search'),
+            attributes: create_attribute({type: 'submit'}),
+            modifier_class: 'ct-inline-filter__submit-button',
+          } only %}
+        </div>
+      </div>
+    {% endif %}
+    {% if items_end is not empty %}
+      <div class="ct-inline-filter__items-end">
+        {{ items_end }}
+      </div>
+    {% endif %}
+  </div>
+</div>

package/components/02-molecules/logo/__snapshots__/logo.test.js.snap

@@ -0,0 +1,191 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Logo Component does not render when logos are empty 1`] = `
+<div>
+  
+
+
+</div>
+`;
+
+exports[`Logo Component renders as div when URL is not provided 1`] = `
+<div>
+  
+
+      
+  <div
+    class="ct-logo ct-theme-light ct-logo--default "
+  >
+    
+  
+                          
+
+
+  
+    <img
+      alt="Logo Mobile"
+      class="ct-image ct-theme-light ct-logo__image ct-logo__image--mobile hide-l"
+      src="https://example.com/logo-mobile.png"
+    />
+    
+              
+
+
+  
+    <img
+      alt="Logo Desktop"
+      class="ct-image ct-theme-light ct-logo__image ct-logo__image--desktop hide-xxs show-l"
+      src="https://example.com/logo-desktop.png"
+    />
+    
+            
+      
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Logo Component renders as link when URL is provided 1`] = `
+<div>
+  
+
+      
+  <a
+    class="ct-logo ct-theme-light ct-logo--default "
+    href="https://example.com"
+    title="Go to homepage"
+  >
+    
+  
+                          
+
+
+  
+    <img
+      alt="Logo Mobile"
+      class="ct-image ct-theme-light ct-logo__image ct-logo__image--mobile hide-l"
+      src="https://example.com/logo-mobile.png"
+    />
+    
+              
+
+
+  
+    <img
+      alt="Logo Desktop"
+      class="ct-image ct-theme-light ct-logo__image ct-logo__image--desktop hide-xxs show-l"
+      src="https://example.com/logo-desktop.png"
+    />
+    
+            
+      
+  </a>
+  
+  
+</div>
+`;
+
+exports[`Logo Component renders primary logo only for default type 1`] = `
+<div>
+  
+
+      
+  <div
+    class="ct-logo ct-theme-light ct-logo--default "
+  >
+    
+  
+                          
+
+
+  
+    <img
+      alt="Logo Mobile"
+      class="ct-image ct-theme-light ct-logo__image ct-logo__image--mobile hide-l"
+      src="https://example.com/logo-mobile.png"
+    />
+    
+              
+
+
+  
+    <img
+      alt="Logo Desktop"
+      class="ct-image ct-theme-light ct-logo__image ct-logo__image--desktop hide-xxs show-l"
+      src="https://example.com/logo-desktop.png"
+    />
+    
+            
+      
+  </div>
+  
+  
+</div>
+`;
+
+exports[`Logo Component renders with optional attributes 1`] = `
+<div>
+  
+
+      
+  <a
+    class="ct-logo ct-theme-dark ct-logo--stacked custom-class"
+    data-test="true"
+    href="https://example.com"
+    title="Go to homepage"
+  >
+    
+  
+                          
+
+
+  
+    <img
+      alt="Logo Mobile"
+      class="ct-image ct-theme-dark ct-logo__image ct-logo__image--mobile hide-l"
+      src="https://example.com/logo-mobile.png"
+    />
+    
+              
+
+
+  
+    <img
+      alt="Logo Desktop"
+      class="ct-image ct-theme-dark ct-logo__image ct-logo__image--desktop hide-xxs show-l"
+      src="https://example.com/logo-desktop.png"
+    />
+    
+                              
+    <span
+      class="ct-logo__stripe "
+    />
+    
+                    
+
+
+  
+    <img
+      alt="Secondary Logo Mobile"
+      class="ct-image ct-theme-dark ct-logo__image ct-logo__image--mobile hide-l"
+      src="https://example.com/secondary-logo-mobile.png"
+    />
+    
+              
+
+
+  
+    <img
+      alt="Secondary Logo Desktop"
+      class="ct-image ct-theme-dark ct-logo__image ct-logo__image--desktop hide-xxs show-l"
+      src="https://example.com/secondary-logo-desktop.png"
+    />
+    
+            
+      
+  </a>
+  
+  
+</div>
+`;

package/components/02-molecules/logo/logo.scss

@@ -0,0 +1,60 @@
+//
+// CivicTheme Logo component styles.
+//
+
+.ct-logo {
+  $root: &;
+
+  line-height: 0;
+  display: inline-block;
+
+  &:focus-visible {
+    @include ct-outline();
+    @include ct-outline-border();
+  }
+
+  #{$root}__image {
+    line-height: 0;
+    display: block;
+    max-height: var(--ct-logo-image-height-max-mobile);
+
+    @include ct-breakpoint($ct-logo-breakpoint) {
+      max-height: var(--ct-logo-image-height-max-desktop);
+    }
+  }
+
+  &#{$root}--stacked,
+  &#{$root}--inline,
+  &#{$root}--inline-stacked {
+    text-align: center;
+
+    #{$root}__stripe {
+      display: block;
+      border: 0;
+      margin: ct-particle(2) 0;
+      height: ct-particle(0.125);
+      width: 100%;
+    }
+  }
+
+  &#{$root}--inline,
+  &#{$root}--inline-stacked {
+    @include ct-breakpoint($ct-logo-breakpoint) {
+      display: flex;
+      align-items: center;
+
+      #{$root}__stripe {
+        align-self: stretch;
+        margin: 0 ct-particle(2);
+        height: auto;
+        width: ct-particle(0.125);
+      }
+    }
+  }
+
+  @include ct-component-theme($root) using($root, $theme) {
+    #{$root}__stripe {
+      background-color: ct-component-var($root, $theme, stripe, background-color);
+    }
+  }
+}

package/components/02-molecules/logo/logo.stories.data.js

@@ -0,0 +1,34 @@
+import Constants from '../../../dist/constants.json';
+
+export default {
+  args: (theme = 'light') => ({
+    theme,
+    type: 'default',
+    logos: {
+      primary: {
+        mobile: {
+          url: Constants.LOGOS[theme].primary.mobile,
+          alt: 'Primary logo mobile alt text',
+        },
+        desktop: {
+          url: Constants.LOGOS[theme].primary.desktop,
+          alt: 'Primary logo desktop alt text',
+        },
+      },
+      secondary: {
+        mobile: {
+          url: Constants.LOGOS[theme].secondary.mobile,
+          alt: 'Secondary logo mobile alt text',
+        },
+        desktop: {
+          url: Constants.LOGOS[theme].secondary.desktop,
+          alt: 'Secondary logo desktop alt text',
+        },
+      },
+    },
+    url: 'https://example.com',
+    title: 'Logo title',
+    attributes: null,
+    modifier_class: '',
+  }),
+};

package/components/02-molecules/logo/logo.stories.js

@@ -0,0 +1,56 @@
+/**
+ * CivicTheme Logo component stories.
+ */
+
+import Component from './logo.twig';
+import LogoData from './logo.stories.data';
+
+const meta = {
+  title: 'Molecules/Logo',
+  component: Component,
+  argTypes: {
+    theme: {
+      control: { type: 'radio' },
+      options: ['light', 'dark'],
+    },
+    type: {
+      control: { type: 'radio' },
+      options: ['default', 'stacked', 'inline', 'inline-stacked'],
+    },
+    logos: {
+      control: { type: 'object' },
+    },
+    url: {
+      control: { type: 'text' },
+    },
+    title: {
+      control: { type: 'text' },
+    },
+    modifier_class: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+export default meta;
+
+export const Logo = {
+  parameters: {
+    layout: 'centered',
+  },
+  args: LogoData.args('light'),
+};
+
+export const LogoDark = {
+  parameters: {
+    layout: 'centered',
+  },
+
+  args: LogoData.args('dark'),
+
+  globals: {
+    backgrounds: {
+      value: 'dark',
+    },
+  },
+};

package/components/02-molecules/logo/logo.test.js

@@ -0,0 +1,111 @@
+import DrupalAttribute from 'drupal-attribute';
+
+const template = 'components/02-molecules/logo/logo.twig';
+
+describe('Logo Component', () => {
+  test('renders primary logo only for default type', async () => {
+    const c = await dom(template, {
+      theme: 'light',
+      type: 'default',
+      logos: {
+        primary: {
+          mobile: { url: 'https://example.com/logo-mobile.png', alt: 'Logo Mobile' },
+          desktop: { url: 'https://example.com/logo-desktop.png', alt: 'Logo Desktop' },
+        },
+      },
+    });
+
+    expect(c.querySelectorAll('.ct-logo')).toHaveLength(1);
+    const logoImages = c.querySelectorAll('.ct-logo__image');
+    expect(logoImages).toHaveLength(2);
+    expect(logoImages[0].getAttribute('src')).toEqual('https://example.com/logo-mobile.png');
+    expect(logoImages[1].getAttribute('src')).toEqual('https://example.com/logo-desktop.png');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with optional attributes', async () => {
+    const c = await dom(template, {
+      theme: 'dark',
+      type: 'stacked',
+      logos: {
+        primary: {
+          mobile: { url: 'https://example.com/logo-mobile.png', alt: 'Logo Mobile' },
+          desktop: { url: 'https://example.com/logo-desktop.png', alt: 'Logo Desktop' },
+        },
+        secondary: {
+          mobile: { url: 'https://example.com/secondary-logo-mobile.png', alt: 'Secondary Logo Mobile' },
+          desktop: { url: 'https://example.com/secondary-logo-desktop.png', alt: 'Secondary Logo Desktop' },
+        },
+      },
+      url: 'https://example.com',
+      title: 'Go to homepage',
+      attributes: new DrupalAttribute().setAttribute('data-test', 'true'),
+      modifier_class: 'custom-class',
+    });
+
+    const element = c.querySelector('.ct-logo');
+    expect(element).not.toBeNull();
+    expect(element.classList.contains('ct-theme-dark')).toBe(true);
+    expect(element.classList.contains('ct-logo--stacked')).toBe(true);
+    expect(element.classList.contains('custom-class')).toBe(true);
+    expect(element.getAttribute('data-test')).toEqual('true');
+    expect(element.getAttribute('href')).toEqual('https://example.com');
+    expect(element.getAttribute('title')).toEqual('Go to homepage');
+
+    const logoImages = c.querySelectorAll('.ct-logo__image');
+    expect(logoImages).toHaveLength(4);
+    expect(logoImages[0].getAttribute('src')).toEqual('https://example.com/logo-mobile.png');
+    expect(logoImages[1].getAttribute('src')).toEqual('https://example.com/logo-desktop.png');
+    expect(logoImages[2].getAttribute('src')).toEqual('https://example.com/secondary-logo-mobile.png');
+    expect(logoImages[3].getAttribute('src')).toEqual('https://example.com/secondary-logo-desktop.png');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('does not render when logos are empty', async () => {
+    const c = await dom(template, {
+      logos: {},
+    });
+
+    expect(c.querySelectorAll('.ct-logo')).toHaveLength(0);
+  });
+
+  test('renders as div when URL is not provided', async () => {
+    const c = await dom(template, {
+      theme: 'light',
+      type: 'default',
+      logos: {
+        primary: {
+          mobile: { url: 'https://example.com/logo-mobile.png', alt: 'Logo Mobile' },
+          desktop: { url: 'https://example.com/logo-desktop.png', alt: 'Logo Desktop' },
+        },
+      },
+    });
+
+    const element = c.querySelector('.ct-logo');
+    expect(element).not.toBeNull();
+    expect(element.tagName).toEqual('DIV');
+  });
+
+  test('renders as link when URL is provided', async () => {
+    const c = await dom(template, {
+      theme: 'light',
+      type: 'default',
+      logos: {
+        primary: {
+          mobile: { url: 'https://example.com/logo-mobile.png', alt: 'Logo Mobile' },
+          desktop: { url: 'https://example.com/logo-desktop.png', alt: 'Logo Desktop' },
+        },
+      },
+      url: 'https://example.com',
+      title: 'Go to homepage',
+    });
+
+    const element = c.querySelector('.ct-logo');
+    expect(element).not.toBeNull();
+    expect(element.tagName).toEqual('A');
+    expect(element.getAttribute('href')).toEqual('https://example.com');
+    expect(element.getAttribute('title')).toEqual('Go to homepage');
+  });
+});

package/components/02-molecules/logo/logo.twig

@@ -0,0 +1,71 @@
+{#
+/**
+ * @file
+ * CivicTheme Logo component.
+ *
+ * Props:
+ * - theme: [string] Theme variation (light or dark).
+ * - type: [string] Logo display type (default, stacked, inline, inline-stacked).
+ * - modifier_class: [string] Additional CSS classes.
+ * - logos: [object] Object with 'primary' and 'secondary' keys.
+ *   Each property contains:
+ *   - primary: [object] Primary logo configuration
+ *   Each property contains:
+ *     - mobile: [object] Mobile logo configuration
+ *   Each property contains:
+ *       - url: [string] Optional URL that wraps the logo.
+ *       - alt: [string] Logo image alt text.
+ *     - desktop: [object] Desktop logo configuration
+ *   Each property contains:
+ *       - url: [string] Optional URL that wraps the logo.
+ *       - alt: [string] Logo image alt text.
+ *   - secondary: [object] Secondary logo configuration
+ *   Each property contains:
+ *     - mobile: [object] Mobile logo configuration
+ *   Each property contains:
+ *       - url: [string] Optional URL that wraps the logo.
+ *       - alt: [string] Logo image alt text.
+ *     - desktop: [object] Desktop logo configuration
+ *   Each property contains:
+ *       - url: [string] Optional URL that wraps the logo.
+ *       - alt: [string] Logo image alt text.
+ * - url: [string] Optional URL that wraps the logo.
+ * - title: [string] Optional logo title attribute.
+ * - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
+ */
+#}
+
+{% set type = type in ['default', 'inline', 'stacked', 'inline-stacked'] ? type : 'default' %}
+{% set type_class = 'ct-logo--%s'|format(type|default('default')) %}
+{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
+{% set modifier_class = '%s %s %s'|format(theme_class, type_class, modifier_class|default('')) %}
+
+{% if logos is not empty %}
+  {% if url is not empty %}
+    <a class="ct-logo {{ modifier_class -}}" href="{{ url }}" title="{{ title|default('Click to go to the homepage') }}" {% if attributes is defined and attributes is not null %}{{- attributes -}}{% endif %}>
+  {% else %}
+    <div class="ct-logo {{ modifier_class -}}" {% if attributes is defined and attributes is not null %}{{- attributes -}}{% endif %}>
+  {% endif %}
+
+  {% for logo_type, logo in logos %}
+    {% if (type == 'default' and logo_type == 'primary') or type != 'default' %}
+      {% if logo_type == 'secondary' %}
+        <span class="ct-logo__stripe {% if type == 'inline' %}hide-xxs show-l{% endif %}"></span>
+      {% endif %}
+      {% for breakpoint, img in logo %}
+        {% include '@atoms/image/image.twig' with {
+          theme: theme,
+          url: img.url,
+          alt: img.alt,
+          modifier_class: 'ct-logo__image ct-logo__image--' ~ breakpoint ~ ' ' ~ (breakpoint == 'mobile' ? (type == 'inline' and logo_type == 'secondary' ? 'hide-xxs' : 'hide-l') : 'hide-xxs show-l'),
+        } only %}
+      {% endfor %}
+    {% endif %}
+  {% endfor %}
+
+  {% if url is not empty %}
+    </a>
+  {% else %}
+    </div>
+  {% endif %}
+{% endif %}

package/components/02-molecules/logo/logo.utils.js

@@ -0,0 +1,57 @@
+/**
+ * @file
+ * Logo component utilities.
+ */
+
+import fs from 'fs';
+import pathUtil from 'path';
+
+const dir = '../../../assets/logos';
+const basePath = pathUtil.resolve(import.meta.dirname, dir);
+const paths = fs.readdirSync(basePath);
+
+function getLogos() {
+  const urls = {};
+  paths.forEach((path) => {
+    const matches = path.matchAll(/logo_primary_([^_]+)+_([^.]+)/g);
+    for (const match of matches) {
+      if (match.length >= 3) {
+        const theme = match[1] === 'dark' ? 'dark' : 'light';
+        const type = match[2] === 'mobile' ? 'mobile' : 'desktop';
+        urls[theme] = urls[theme] || {};
+        urls[theme].primary = urls[theme].primary || {};
+        urls[theme].primary[type] = urls[theme].primary[type] || {};
+        urls[theme].primary[type] = `${dir.replace('../../../', '')}/${path}`;
+      }
+    }
+    const secondaryMatches = path.matchAll(/logo_secondary_([^_]+)+_([^.]+)/g);
+    for (const match of secondaryMatches) {
+      if (match.length >= 3) {
+        const theme = match[1] === 'dark' ? 'dark' : 'light';
+        const type = match[2] === 'mobile' ? 'mobile' : 'desktop';
+        urls[theme] = urls[theme] || {};
+        urls[theme].secondary = urls[theme].secondary || {};
+        urls[theme].secondary[type] = urls[theme].secondary[type] || {};
+        urls[theme].secondary[type] = `${dir.replace('../../../', '')}/${path}`;
+      }
+    }
+    const customMatches = path.matchAll(/logo_custom_([^_]+)+_([^_]+)+_([^.]+)/g);
+    for (const match of customMatches) {
+      if (match.length >= 3) {
+        const theme = match[1] === 'dark' ? 'dark' : 'light';
+        const type = match[2] === 'mobile' ? 'mobile' : 'desktop';
+        const name = match[3];
+        urls[theme] = urls[theme] || {};
+        urls[theme][name] = urls[theme][name] || {};
+        urls[theme][name][type] = urls[theme][name][type] || {};
+        urls[theme][name][type] = `${dir.replace('../../../', '')}/${path}`;
+      }
+    }
+  });
+
+  return urls;
+}
+
+export default {
+  getLogos,
+};