@dta-au/civictheme-twig 1.13.1

package/components/03-organisms/side-navigation/side-navigation.scss

@@ -0,0 +1,215 @@
+//
+// CivicTheme Side Navigation component styles.
+//
+
+.ct-side-navigation {
+  $root: &;
+
+  &__title {
+    @include ct-typography('heading-5');
+
+    & {
+      margin-top: 0;
+      margin-bottom: ct-spacing(2);
+    }
+  }
+
+  @for $i from 0 through 10 {
+    .ct-menu--level-#{$i} {
+      .ct-menu__item__link {
+        padding-left: ($i + 1) * ct-spacing(2);
+      }
+    }
+  }
+
+  &__menu {
+    &,
+    .ct-menu {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+
+    .ct-menu__item--expanded {
+      .ct-menu {
+        display: block;
+      }
+    }
+
+    .ct-menu__item {
+      position: relative;
+    }
+
+    .ct-menu__item__link {
+      @include ct-typography('text-regular');
+
+      & {
+        @include ct-link-no-decoration();
+
+        display: block;
+        box-sizing: border-box;
+        position: relative;
+        padding: ct-spacing() ct-spacing(2) ct-spacing() ct-spacing(2.5);
+        border-bottom-width: ct-particle(0.125);
+        border-bottom-style: solid;
+      }
+
+      &:first-child {
+        border-top-width: ct-particle(0.125);
+        border-top-style: solid;
+      }
+
+      &::before {
+        content: '';
+        display: inline-block;
+        position: absolute;
+        top: -1 * ct-particle(0.125);
+        bottom: -1 * ct-particle(0.125);
+        left: -1 * ct-particle(0.125);
+        width: ct-particle(0.5);
+      }
+
+      &:active {
+        outline: 0 !important;
+        border-radius: 0 var(--ct-side-navigation-link-active-border-radius) var(--ct-side-navigation-link-active-border-radius) 0;
+      }
+
+      &:focus-visible {
+        z-index: 1;
+      }
+    }
+
+    [data-collapsible]:not([data-collapsible-trigger-no-icon]) .ct-menu__item__link-trigger[data-collapsible-trigger] {
+      box-sizing: border-box;
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: ct-spacing(3);
+      height: ct-spacing(3);
+      padding: ct-spacing() ct-spacing(0.25);
+      z-index: 1;
+
+      @include ct-breakpoint(m) {
+        padding: ct-spacing(1.25) ct-spacing(0.25);
+      }
+    }
+  }
+
+  @mixin _ct-side-navigation-print-menu-item($background-color, $border-color, $color, $stripe-color) {
+    background-color: $background-color;
+    border-color: $border-color;
+    color: $color;
+
+    &::before {
+      background-color: $stripe-color;
+    }
+
+    &:focus-visible {
+      @include ct-outline();
+    }
+  }
+
+  @include ct-component-theme($root) using($root, $theme) {
+    #{$root}__title {
+      @include ct-component-property($root, $theme, title, color);
+    }
+
+    #{$root}__menu {
+      .ct-menu__item {
+        .ct-menu__item__link-trigger {
+          @include ct-component-property($root, $theme, link, expanded, icon, color);
+        }
+
+        .ct-menu__item__link {
+          @include _ct-side-navigation-print-menu-item(
+            ct-component-var($root, $theme, link, child, background-color),
+            ct-component-var($root, $theme, link, child, border-color),
+            ct-component-var($root, $theme, link, child, color),
+            ct-component-var($root, $theme, link, child, stripe-background-color)
+          );
+
+          &:hover,
+          &:focus-visible {
+            @include _ct-side-navigation-print-menu-item(
+              ct-component-var($root, $theme, link, child, hover, background-color),
+              ct-component-var($root, $theme, link, child, hover, border-color),
+              ct-component-var($root, $theme, link, child, hover, color),
+              ct-component-var($root, $theme, link, child, hover, stripe-background-color)
+            );
+          }
+        }
+
+        &.ct-menu__item--active-trail {
+          > .ct-menu__item__link {
+            &,
+            &:active,
+            &:visited {
+              @include _ct-side-navigation-print-menu-item(
+                ct-component-var($root, $theme, link, child, active, background-color),
+                ct-component-var($root, $theme, link, child, active, border-color),
+                ct-component-var($root, $theme, link, child, active, color),
+                ct-component-var($root, $theme, link, child, active, stripe-background-color)
+              );
+            }
+
+            &:hover,
+            &:focus-visible {
+              @include _ct-side-navigation-print-menu-item(
+                ct-component-var($root, $theme, link, child, hover, background-color),
+                ct-component-var($root, $theme, link, child, hover, border-color),
+                ct-component-var($root, $theme, link, child, hover, color),
+                ct-component-var($root, $theme, link, child, hover, stripe-background-color)
+              );
+            }
+          }
+        }
+
+        &.ct-menu__item--level-0 {
+          > .ct-menu__item__link {
+            @include _ct-side-navigation-print-menu-item(
+              ct-component-var($root, $theme, link, parent, background-color),
+              ct-component-var($root, $theme, link, parent, border-color),
+              ct-component-var($root, $theme, link, parent, color),
+              ct-component-var($root, $theme, link, parent, stripe-background-color)
+            );
+
+            &:hover,
+            &:focus-visible {
+              @include _ct-side-navigation-print-menu-item(
+                ct-component-var($root, $theme, link, parent, hover, background-color),
+                ct-component-var($root, $theme, link, parent, hover, border-color),
+                ct-component-var($root, $theme, link, parent, hover, color),
+                ct-component-var($root, $theme, link, parent, hover, stripe-background-color)
+              );
+            }
+          }
+
+          &.ct-menu__item--active-trail {
+            > .ct-menu__item__link {
+              &,
+              &:active,
+              &:visited {
+                @include _ct-side-navigation-print-menu-item(
+                  ct-component-var($root, $theme, link, parent, active, background-color),
+                  ct-component-var($root, $theme, link, parent, active, border-color),
+                  ct-component-var($root, $theme, link, parent, active, color),
+                  ct-component-var($root, $theme, link, parent, active, stripe-background-color)
+                );
+              }
+
+              &:hover,
+              &:focus-visible {
+                @include _ct-side-navigation-print-menu-item(
+                  ct-component-var($root, $theme, link, parent, hover, background-color),
+                  ct-component-var($root, $theme, link, parent, hover, border-color),
+                  ct-component-var($root, $theme, link, parent, hover, color),
+                  ct-component-var($root, $theme, link, parent, hover, stripe-background-color)
+                );
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/components/03-organisms/side-navigation/side-navigation.stories.data.js

@@ -0,0 +1,54 @@
+export default {
+  args: (theme = 'light') => ({
+    theme,
+    title: 'Side Navigation title',
+    items: [
+      {
+        title: 'Menu item 1',
+        url: 'https://example.com/menu-item-1',
+        in_active_trail: false,
+        is_expanded: false,
+        below: [
+          {
+            title: 'Menu subitem 1',
+            url: 'https://example.com/menu-item-1',
+            in_active_trail: false,
+            is_expanded: false,
+            below: false,
+          },
+          {
+            title: 'Menu subitem 2',
+            url: 'https://example.com/menu-item-1',
+            in_active_trail: false,
+            is_expanded: false,
+            below: [
+              {
+                title: 'Menu subsubitem 1',
+                url: 'https://example.com/menu-item-1',
+                in_active_trail: false,
+                is_expanded: false,
+                below: false,
+              },
+              {
+                title: 'Menu subsubitem 2',
+                url: 'https://example.com/menu-item-1',
+                in_active_trail: false,
+                is_expanded: false,
+                below: false,
+              },
+            ],
+          },
+        ],
+      },
+      {
+        title: 'Menu item 2',
+        url: 'https://example.com/menu-item-2',
+        in_active_trail: false,
+        is_expanded: false,
+      },
+    ],
+    vertical_spacing: 'none',
+    attributes: null,
+    modifier_class: '',
+  }),
+};

package/components/03-organisms/side-navigation/side-navigation.stories.js

@@ -0,0 +1,39 @@
+/**
+ * CivicTheme Side Navigation component stories.
+ */
+
+import Component from './side-navigation.twig';
+import SideNavigationData from './side-navigation.stories.data';
+
+const meta = {
+  title: 'Organisms/Navigation/Side Navigation',
+  component: Component,
+  argTypes: {
+    theme: {
+      control: { type: 'radio' },
+      options: ['light', 'dark'],
+    },
+    items: {
+      control: { type: 'array' },
+    },
+    title: {
+      control: { type: 'text' },
+    },
+    vertical_spacing: {
+      control: { type: 'radio' },
+      options: ['none', 'top', 'bottom', 'both'],
+    },
+    modifier_class: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+export default meta;
+
+export const SideNavigation = {
+  parameters: {
+    layout: 'centered',
+  },
+  args: SideNavigationData.args('light'),
+};

package/components/03-organisms/side-navigation/side-navigation.test.js

@@ -0,0 +1,87 @@
+import DrupalAttribute from 'drupal-attribute';
+
+const template = 'components/03-organisms/side-navigation/side-navigation.twig';
+
+describe('Side Navigation Component', () => {
+  test('renders with only required attributes', async () => {
+    const c = await dom(template, {
+      items: [
+        { title: 'Home', url: '/' },
+      ],
+    });
+
+    expect(c.querySelectorAll('.ct-side-navigation')).toHaveLength(1);
+
+    const menuItems = c.querySelectorAll('.ct-side-navigation__menu .ct-link');
+    expect(menuItems).toHaveLength(1);
+    expect(menuItems[0].textContent.trim()).toBe('Home');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with all attributes provided', async () => {
+    const c = await dom(template, {
+      theme: 'dark',
+      items: [
+        { title: 'Home', url: '/' },
+        { title: 'About', url: '/about' },
+        { title: 'Services', url: '/services' },
+        { title: 'Contact', url: '/contact' },
+      ],
+      title: 'Main Navigation',
+      vertical_spacing: 'both',
+      attributes: new DrupalAttribute().setAttribute('data-test', 'true'),
+      modifier_class: 'additional-class',
+    });
+
+    expect(c.querySelectorAll('.ct-side-navigation')).toHaveLength(1);
+    expect(c.querySelector('.ct-side-navigation').classList).toContain('ct-theme-dark');
+    expect(c.querySelector('.ct-side-navigation').classList).toContain('ct-vertical-spacing-inset--both');
+    expect(c.querySelector('.ct-side-navigation').classList).toContain('additional-class');
+
+    const menuItems = c.querySelectorAll('.ct-side-navigation__menu .ct-link');
+    expect(menuItems).toHaveLength(4);
+    expect(menuItems[0].textContent.trim()).toBe('Home');
+    expect(menuItems[1].textContent.trim()).toBe('About');
+    expect(menuItems[2].textContent.trim()).toBe('Services');
+    expect(menuItems[3].textContent.trim()).toBe('Contact');
+
+    expect(c.querySelector('.ct-side-navigation__title').textContent.trim()).toBe('Main Navigation');
+    expect(c.querySelector('.ct-side-navigation').getAttribute('data-test')).toBe('true');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with some attributes missing', async () => {
+    const c = await dom(template, {
+      theme: 'light',
+      items: [
+        { title: 'Home', url: '/' },
+        { title: 'About', url: '/about' },
+      ],
+      title: '',
+      vertical_spacing: '',
+      modifier_class: '',
+    });
+
+    expect(c.querySelectorAll('.ct-side-navigation')).toHaveLength(1);
+    expect(c.querySelector('.ct-side-navigation').classList).toContain('ct-theme-light');
+
+    const menuItems = c.querySelectorAll('.ct-side-navigation__menu .ct-link');
+    expect(menuItems).toHaveLength(2);
+    expect(menuItems[0].textContent.trim()).toBe('Home');
+    expect(menuItems[1].textContent.trim()).toBe('About');
+
+    expect(c.querySelector('.ct-side-navigation__title')).toBeNull();
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('does not render when items are empty', async () => {
+    const c = await dom(template, {
+      items: [],
+    });
+
+    expect(c.querySelectorAll('.ct-side-navigation')).toHaveLength(0);
+  });
+});

package/components/03-organisms/side-navigation/side-navigation.twig

@@ -0,0 +1,54 @@
+{#
+/**
+ * @file
+ * CivicTheme Side Navigation component.
+ *
+ * Props:
+ * - theme: [string] Theme variation (light or dark).
+ * - vertical_spacing: [string] Navigation vertical spacing (top, bottom, or both).
+ * - modifier_class: [string] Additional CSS classes.
+ * - items: [array] Menu items:
+ *   Each item contains:
+ *   - title: [string] Navigation title.
+ *   - url: [string] Menu item URL.
+ *   - in_active_trail: [boolean] Whether the item is in the active trail.
+ *   - is_expanded: [boolean] Whether the item is expanded.
+ *   - below: [array] Submenu items.
+ * - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
+ *
+ * Slots:
+ * - title: Navigation title.
+ *
+ * Blocks:
+ * - title_block
+ */
+#}
+
+{% set vertical_spacing_class = vertical_spacing in ['top', 'bottom', 'both'] ? 'ct-vertical-spacing-inset--%s'|format(vertical_spacing) : '' %}
+{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
+{% set modifier_class = '%s %s %s'|format(theme_class, vertical_spacing_class, modifier_class|default('')) %}
+
+{% if items is not empty %}
+  <div class="ct-side-navigation {{ modifier_class -}}" {% if attributes is defined and attributes is not null %}{{- attributes -}}{% endif %}>
+    {% include '@organisms/skip-link/skip-link.twig' with {
+      theme: theme,
+      url: '#main-content',
+    } only %}
+    {% if title %}
+      {% block title_block %}
+        {% include '@atoms/heading/heading.twig' with {
+          content: title,
+          level: 2,
+          theme: theme,
+          modifier_class: 'ct-side-navigation__title',
+        } only %}
+      {% endblock %}
+    {% endif %}
+    {% include '@base/menu/menu.twig' with {
+      theme: theme,
+      items: items,
+      modifier_class: 'ct-side-navigation__menu',
+      is_collapsible: true,
+    } only %}
+  </div>
+{% endif %}

package/components/03-organisms/skip-link/__snapshots__/skip-link.test.js.snap

@@ -0,0 +1,94 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Skip Link Component renders with all attributes provided 1`] = `
+<div>
+  
+
+
+  
+  <div
+    class="ct-skip-link ct-theme-dark additional-class"
+  >
+    
+    
+    <a
+      _keys="data-platform"
+      class="ct-link ct-theme-dark     ct-skip-link__link ct-visually-hidden"
+      data-platform=""
+      href="#main-content"
+      title="Go to main content"
+    >
+      <span
+        class="ct-text-icon__text"
+      >
+        Go to main content
+      </span>
+    </a>
+      
+  </div>
+  
+
+</div>
+`;
+
+exports[`Skip Link Component renders with default text when text is empty 1`] = `
+<div>
+  
+
+
+  
+  <div
+    class="ct-skip-link ct-theme-light "
+  >
+    
+    
+    <a
+      _keys="data-platform"
+      class="ct-link ct-theme-light     ct-skip-link__link ct-visually-hidden"
+      data-platform=""
+      href="#main-content"
+      title="Skip to main content"
+    >
+      <span
+        class="ct-text-icon__text"
+      >
+        Skip to main content
+      </span>
+    </a>
+      
+  </div>
+  
+
+</div>
+`;
+
+exports[`Skip Link Component renders with only required attributes 1`] = `
+<div>
+  
+
+
+  
+  <div
+    class="ct-skip-link ct-theme-light "
+  >
+    
+    
+    <a
+      _keys="data-platform"
+      class="ct-link ct-theme-light     ct-skip-link__link ct-visually-hidden"
+      data-platform=""
+      href="#main-content"
+      title="Skip to main content"
+    >
+      <span
+        class="ct-text-icon__text"
+      >
+        Skip to main content
+      </span>
+    </a>
+      
+  </div>
+  
+
+</div>
+`;

package/components/03-organisms/skip-link/skip-link.scss

@@ -0,0 +1,28 @@
+//
+// CivicTheme Skip Link component styles.
+//
+
+.ct-skip-link {
+  $root: &;
+
+  &__link {
+    display: inline-block;
+    margin: ct-spacing(2) ct-spacing(3);
+
+    &:not([data-platform='ios']) {
+      &:active,
+      &:focus-visible,
+      &:hover {
+        position: static !important;
+        overflow: visible;
+        clip: auto;
+        width: auto !important;
+        height: auto !important;
+      }
+    }
+  }
+
+  @include ct-component-theme($root) using($root, $theme) {
+    @include ct-component-property($root, $theme, background-color);
+  }
+}

package/components/03-organisms/skip-link/skip-link.stories.js

@@ -0,0 +1,42 @@
+/**
+ * CivicTheme Skip Link component stories.
+ */
+
+import Component from './skip-link.twig';
+
+const meta = {
+  title: 'Organisms/Skip Link',
+  component: Component,
+  argTypes: {
+    theme: {
+      control: { type: 'radio' },
+      options: ['light', 'dark'],
+    },
+    text: {
+      control: { type: 'text' },
+    },
+    url: {
+      control: { type: 'text' },
+    },
+    modifier_class: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+export default meta;
+
+export const SkipLink = {
+  parameters: {
+    layout: 'fullscreen',
+    storyDocs: 'Press TAB on the keyboard for the Skip Link to appear',
+    storyDocsSize: 'large',
+    storyDocsPlacement: 'after',
+  },
+  args: {
+    theme: 'light',
+    text: 'Skip to main content',
+    url: '#main-content',
+    modifier_class: '',
+  },
+};

package/components/03-organisms/skip-link/skip-link.test.js

@@ -0,0 +1,48 @@
+const template = 'components/03-organisms/skip-link/skip-link.twig';
+
+describe('Skip Link Component', () => {
+  test('renders with only required attributes', async () => {
+    const c = await dom(template, {
+      url: '#main-content',
+    });
+
+    expect(c.querySelectorAll('.ct-skip-link')).toHaveLength(1);
+    expect(c.querySelector('.ct-skip-link__link').textContent.trim()).toBe('Skip to main content');
+    expect(c.querySelector('.ct-skip-link__link').getAttribute('href')).toBe('#main-content');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with all attributes provided', async () => {
+    const c = await dom(template, {
+      theme: 'dark',
+      text: 'Go to main content',
+      url: '#main-content',
+      modifier_class: 'additional-class',
+    });
+
+    expect(c.querySelectorAll('.ct-skip-link')).toHaveLength(1);
+    expect(c.querySelector('.ct-skip-link').classList).toContain('ct-theme-dark');
+    expect(c.querySelector('.ct-skip-link').classList).toContain('additional-class');
+    expect(c.querySelector('.ct-skip-link__link').textContent.trim()).toBe('Go to main content');
+    expect(c.querySelector('.ct-skip-link__link').getAttribute('href')).toBe('#main-content');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with default text when text is empty', async () => {
+    const c = await dom(template, {
+      theme: 'light',
+      text: '',
+      url: '#main-content',
+      modifier_class: '',
+    });
+
+    expect(c.querySelectorAll('.ct-skip-link')).toHaveLength(1);
+    expect(c.querySelector('.ct-skip-link').classList).toContain('ct-theme-light');
+    expect(c.querySelector('.ct-skip-link__link').textContent.trim()).toBe('Skip to main content');
+    expect(c.querySelector('.ct-skip-link__link').getAttribute('href')).toBe('#main-content');
+
+    assertUniqueCssClasses(c);
+  });
+});

package/components/03-organisms/skip-link/skip-link.twig

@@ -0,0 +1,31 @@
+{#
+/**
+ * @file
+ * CivicTheme Skip Link component.
+ *
+ * Props:
+ * - theme: [string] Theme variation (light or dark).
+ * - text: [string] Link text.
+ * - url: [string] Link URL.
+ * - modifier_class: [string] Additional CSS classes.
+ * - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
+ */
+#}
+
+{% set text = text|default('Skip to main content') %}
+{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
+{% set modifier_class = '%s %s'|format(theme_class, modifier_class|default('')) %}
+
+{% if text %}
+  <div class="ct-skip-link {{ modifier_class -}}" {% if attributes %}{{ attributes }}{% endif %}>
+    {% include '@atoms/link/link.twig' with {
+      theme: theme,
+      text: text,
+      url: url,
+      title: text,
+      hidden_text: text,
+      attributes: create_attribute({'data-platform': ''}),
+      modifier_class: 'ct-skip-link__link ct-visually-hidden',
+    } only %}
+  </div>
+{% endif %}