@dta-au/civictheme-twig 1.13.1

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

@@ -0,0 +1,433 @@
+//
+// CivicTheme Navigation component styles.
+//
+
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:math';
+
+.ct-navigation {
+  $root: &;
+
+  #{$root}__title {
+    @include ct-typography('heading-5');
+
+    margin-block: ct-spacing(2);
+  }
+
+  // Common menu styles across all variants
+  #{$root}__items {
+    #{$root}__menu {
+      &.ct-menu,
+      .ct-menu {
+        @include ct-print-hide();
+
+        list-style: none;
+        padding: 0;
+        margin: 0;
+      }
+    }
+  }
+
+  &#{$root}--primary {
+    #{$root}__items {
+      height: 100%;
+
+      #{$root}__menu {
+        &.ct-menu--level-0 {
+          gap: ct-spacing(0);
+        }
+
+        .ct-menu__item--level-0 {
+          & > .ct-menu__item__link {
+            @include ct-link-no-decoration();
+
+            border-bottom: solid ct-particle(0.5) transparent;
+            position: relative;
+            padding: ct-spacing(2);
+            font-weight: 600;
+            display: block;
+            text-align: center;
+
+            &::after {
+              right: ct-spacing();
+              margin-top: -1 * ct-particle(0.25);
+              top: ct-spacing(2);
+            }
+
+            // The dropdown caret (collapsible.js injects a line-height-tall
+            // .ct-icon) overflows this link's line box by ~2px even at its
+            // default vertical-align: middle, dropping the parent item's
+            // border-bottom underline below the sibling leaf items. Top-align
+            // the caret so every primary-nav item underline lines up.
+            // Upstreamed from aga4 adc3e5dc78a4b8761270a6aaab3780121f53d6a0.
+            .ct-icon {
+              vertical-align: top;
+            }
+          }
+
+          &.ct-menu__item--active-trail > .ct-menu__item__link::after {
+            transform: scaleX(1);
+          }
+        }
+      }
+    }
+
+    @include ct-component-theme($root) using($root, $theme) {
+      #{$root}__items {
+        #{$root}__menu {
+          .ct-menu__item {
+            // Links - level 0.
+            &--level-0 {
+              .ct-menu__item__link {
+                border-bottom-color: ct-component-var($root, $theme, menu-item, border-color);
+
+                &:is(:hover, :focus-visible) {
+                  border-bottom-color: ct-component-var($root, $theme, menu-item, hover, border-color);
+                  outline-offset: ct-particle(0.25);
+                }
+
+                &:active {
+                  border-bottom-color: ct-component-var($root, $theme, menu-item, active, border-color);
+                }
+              }
+
+              &[data-collapsible] {
+                .ct-menu__item__link {
+                  @if $theme == 'light' {
+                    color: var(--ct-navigation-light-menu-color);
+                  }
+                  @else {
+                    color: var(--ct-navigation-dark-menu-color);
+                  }
+
+                  border-bottom-color: ct-component-var($root, $theme, menu, border-color);
+
+                  &:is(:hover, :focus-visible) {
+                    @if $theme == 'light' {
+                      color: var(--ct-navigation-light-menu-hover-color);
+                    }
+                    @else {
+                      color: var(--ct-navigation-dark-menu-hover-color);
+                    }
+
+                    border-bottom-color: ct-component-var($root, $theme, menu-item, hover, border-color);
+                  }
+
+                  &:active {
+                    border-bottom-color: ct-component-var($root, $theme, menu-item, active, border-color);
+                  }
+                }
+              }
+
+              &[data-collapsible-collapsed] {
+                .ct-menu__item__link {
+                  border-bottom-color: ct-component-var($root, $theme, menu-item, border-color);
+                }
+              }
+
+              &.ct-menu__item--active-trail {
+                .ct-menu__item__link {
+                  border-bottom-color: ct-component-var($root, $theme, menu, border-color);
+                }
+              }
+
+              & > .ct-menu__item__link {
+                @include ct-component-property($root, $theme, menu, color);
+
+                &:is(:hover, :focus-visible) {
+                  @include ct-component-property($root, $theme, menu, hover, color);
+                }
+
+                &[aria-expanded='true'],
+                &:active {
+                  @include ct-component-property($root, $theme, menu, active, color);
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &#{$root}--secondary {
+    #{$root}__items {
+      height: 100%;
+
+      #{$root}__menu {
+        &.ct-menu--level-0 {
+          gap: ct-spacing(2);
+          height: 100%;
+          align-items: center;
+        }
+      }
+    }
+
+    &#{$root}--dropdown,
+    &#{$root}--inline {
+      #{$root}__items {
+        #{$root}__menu {
+          .ct-menu__item {
+            // Links - level 0
+            &--level-0 {
+              & > .ct-menu__item__link {
+                text-align: center;
+                padding-block: ct-spacing();
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // None variant specific styles
+  &#{$root}--none {
+    #{$root}__items {
+      #{$root}__menu {
+        .ct-menu__item {
+          margin-bottom: ct-spacing(2);
+          margin-left: ct-spacing(2);
+        }
+
+        &.ct-menu > .ct-menu__item {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+
+  &#{$root}--inline,
+  &#{$root}--drawer,
+  &#{$root}--dropdown {
+    // Base styles for all first-level menus
+    .ct-menu--level-0 {
+      display: flex;
+      gap: ct-spacing(2); // Consistent spacing between items
+    }
+  }
+
+  // Inline variant specific styles
+  &#{$root}--inline {
+    #{$root}__items {
+      #{$root}__menu {
+        &.ct-menu--level-0 {
+          flex-wrap: wrap;
+          row-gap: var(--ct-navigation-inline-row-gutter);
+        }
+      }
+    }
+  }
+
+  // Drawer variant specific styles
+  &#{$root}--drawer {
+    #{$root}__items {
+      align-items: center;
+      height: 100%;
+      display: none;
+
+      @include ct-breakpoint($ct-navigation-breakpoint) {
+        display: flex;
+      }
+
+      #{$root}__menu {
+        &.ct-menu--level-0 {
+          flex-wrap: nowrap;
+        }
+      }
+
+      #{$root}__has-dropdown {
+        .ct-menu__sub-menu__wrapper--level-1 {
+          position: absolute;
+          left: 0;
+          right: 0;
+          margin-top: var(--ct-navigation-drawer-top-offset);
+          z-index: var(--ct-navigation-drawer-zindex);
+          box-shadow: 0 ct-spacing(2) ct-spacing(4) rgba(0, 0, 0, 20%);
+
+          .ct-menu__sub-menu {
+            &.ct-menu--level-1 {
+              margin-left: auto;
+              margin-right: auto;
+              display: grid;
+              grid-template-columns: repeat(var(--ct-navigation-drawer-cols), 1fr);
+              gap: ct-spacing(4);
+              padding: 0;
+              margin-bottom: ct-spacing(4);
+            }
+          }
+
+          .ct-menu__item--level-1 {
+            margin-top: ct-spacing(4);
+
+            & > .ct-menu__item__link {
+              @include ct-typography('heading-5');
+            }
+          }
+
+          // Consistent spacing for nested levels
+          .ct-menu__sub-menu__wrapper--level-2 {
+            margin-top: ct-spacing(4);
+          }
+
+          // Nested level items
+          .ct-menu__item:is(.ct-menu__item--level-2, .ct-menu__item--level-3, .ct-menu__item--level-4, .ct-menu__item--level-5) {
+            width: 100%;
+            margin-bottom: ct-spacing();
+
+            & > .ct-menu__item__link {
+              @include ct-link-no-decoration();
+
+              display: inline-flex;
+              align-items: center;
+              border-radius: var(--ct-border-radius);
+              padding: ct-spacing();
+
+              &--external {
+                padding-right: ct-spacing(3);
+
+                &::after {
+                  top: ct-spacing(0.65);
+                }
+              }
+            }
+          }
+
+          // Consistent indentation for nested levels
+          .ct-menu__item--level-3 { padding-left: ct-spacing(2); }
+          .ct-menu__item--level-4 { padding-left: ct-spacing(4); }
+          .ct-menu__item--level-5 { padding-left: ct-spacing(6); }
+        }
+      }
+    }
+
+    @include ct-component-theme($root) using($root, $theme) {
+      #{$root}__items {
+        #{$root}__has-dropdown {
+          .ct-menu__sub-menu__wrapper--level-1 {
+            @include ct-component-property($root, $theme, drawer-sub-menu, background-color);
+
+            // Reset some styles for all links in the dropdown.
+            .ct-menu__item__link {
+              background: none;
+
+              &:is(:hover, :active, :focus-visible) {
+                background: none;
+              }
+            }
+
+            .ct-menu__item--level-1 {
+              & > .ct-menu__item__link {
+                @include ct-component-property($root, $theme, drawer-sub-menu-item, heading, color);
+
+                &:is(:hover, :focus-visible) {
+                  @include ct-component-property($root, $theme, drawer-sub-menu-item, heading, hover, color);
+                }
+
+                &:active {
+                  @include ct-component-property($root, $theme, drawer-sub-menu-item, heading, active, color);
+                }
+              }
+            }
+
+            .ct-menu__item:is(.ct-menu__item--level-2, .ct-menu__item--level-3, .ct-menu__item--level-4, .ct-menu__item--level-5) {
+              & > .ct-menu__item__link {
+                @include ct-component-property($root, $theme, drawer-sub-menu-item, background-color);
+                @include ct-component-property($root, $theme, drawer-sub-menu-item, color);
+
+                &:is(:hover, :focus-visible) {
+                  @include ct-component-property($root, $theme, drawer-sub-menu-item, hover, background-color);
+                  @include ct-component-property($root, $theme, drawer-sub-menu-item, hover, color);
+                }
+
+                &:active {
+                  @include ct-component-property($root, $theme, drawer-sub-menu-item, active, background-color);
+                  @include ct-component-property($root, $theme, drawer-sub-menu-item, active, color);
+                }
+              }
+
+              &.ct-menu__item--active-trail {
+                & > .ct-menu__item__link {
+                  @include ct-component-property($root, $theme, drawer-menu-item, active-trail, background-color);
+                  @include ct-component-property($root, $theme, drawer-menu-item, active-trail, color);
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // Dropdown variant specific styles
+  &#{$root}--dropdown {
+    #{$root}__items {
+      display: none;
+
+      @include ct-breakpoint($ct-navigation-breakpoint) {
+        display: flex;
+        align-items: center;
+      }
+
+      #{$root}__menu {
+        &.ct-menu--level-0 {
+          flex-wrap: wrap;
+        }
+
+        // Base styles for all second-level menus
+        .ct-menu--level-1 {
+          .ct-menu__sub-menu {
+            margin-left: ct-spacing(2);
+          }
+        }
+      }
+
+      #{$root}__has-dropdown {
+        .ct-menu__sub-menu__wrapper--level-1 {
+          position: absolute;
+          z-index: var(--ct-navigation-dropdown-zindex);
+          margin-top: var(--ct-navigation-dropdown-top-offset);
+          border-bottom-left-radius: var(--ct-navigation-dropdown-border-radius);
+          border-bottom-right-radius: var(--ct-navigation-dropdown-border-radius);
+
+          @include ct-elevation(4);
+
+          .ct-menu__sub-menu {
+            &.ct-menu--level-1 {
+              padding: ct-spacing(2) ct-spacing(4) ct-spacing(4);
+            }
+          }
+        }
+      }
+    }
+
+    @include ct-component-theme($root) using($root, $theme) {
+      #{$root}__items {
+        #{$root}__has-dropdown {
+          @if $theme == 'light' {
+            color: var(--ct-link-light-color);
+          }
+          @else {
+            color: var(--ct-link-dark-color);
+          }
+
+          .ct-menu__item__link {
+            &:is(:hover, :focus-visible) {
+              @if $theme == 'light' {
+                color: var(--ct-link-light-hover-color);
+              }
+              @else {
+                color: var(--ct-link-dark-hover-color);
+              }
+            }
+          }
+
+          .ct-menu__sub-menu__wrapper--level-1 {
+            @include ct-component-property($root, $theme, dropdown-sub-menu, background-color);
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,60 @@
+export default {
+  args: (theme = 'light') => ({
+    theme,
+    name: '',
+    title: 'Navigation title',
+    type: 'none',
+    variant: 'none',
+    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,
+      },
+    ],
+    dropdown_columns: 1,
+    dropdown_columns_fill: false,
+    is_animated: false,
+    menu_id: 'navigation',
+    attributes: null,
+    modifier_class: '',
+  }),
+};

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

@@ -0,0 +1,58 @@
+/**
+ * CivicTheme Navigation component stories.
+ */
+
+import Component from './navigation.twig';
+import NavigationData from './navigation.stories.data';
+
+const meta = {
+  title: 'Organisms/Navigation/Navigation',
+  component: Component,
+  argTypes: {
+    theme: {
+      control: { type: 'radio' },
+      options: ['light', 'dark'],
+    },
+    name: {
+      control: { type: 'text' },
+    },
+    items: {
+      control: { type: 'array' },
+    },
+    title: {
+      control: { type: 'text' },
+    },
+    type: {
+      control: { type: 'radio' },
+      options: ['none', 'inline', 'dropdown', 'drawer'],
+    },
+    variant: {
+      control: { type: 'radio' },
+      options: ['none', 'primary', 'secondary'],
+    },
+    dropdown_columns: {
+      control: { type: 'number' },
+    },
+    dropdown_columns_fill: {
+      control: { type: 'boolean' },
+    },
+    is_animated: {
+      control: { type: 'boolean' },
+    },
+    menu_id: {
+      control: { type: 'text' },
+    },
+    modifier_class: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+export default meta;
+
+export const Navigation = {
+  parameters: {
+    layout: 'centered',
+  },
+  args: NavigationData.args('light'),
+};

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

@@ -0,0 +1,122 @@
+const template = 'components/03-organisms/navigation/navigation.twig';
+
+describe('Navigation Component', () => {
+  test('renders with only required attributes', async () => {
+    const c = await dom(template, {
+      items: [
+        { title: 'Home', url: '/' },
+      ],
+    });
+
+    expect(c.querySelectorAll('.ct-navigation')).toHaveLength(1);
+
+    const menuItems = c.querySelectorAll('.ct-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: '/', below: null },
+        { title: 'About', url: '/about', below: null },
+        { title: 'Services', url: '/services', below: null },
+        { title: 'Contact', url: '/contact', below: null },
+      ],
+      title: 'Main Navigation',
+      type: 'dropdown',
+      variant: 'primary',
+      dropdown_columns: 3,
+      dropdown_columns_fill: true,
+      is_animated: true,
+      menu_id: 'main-nav',
+      modifier_class: 'additional-class',
+    });
+
+    expect(c.querySelectorAll('.ct-navigation')).toHaveLength(1);
+    expect(c.querySelector('.ct-navigation').classList).toContain('ct-theme-dark');
+    expect(c.querySelector('.ct-navigation').classList).toContain('ct-navigation--dropdown');
+    expect(c.querySelector('.ct-navigation').classList).toContain('additional-class');
+
+    const menuItems = c.querySelectorAll('.ct-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-navigation__title').textContent.trim()).toBe('Main Navigation');
+
+    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: '',
+      type: 'none',
+      variant: 'secondary',
+      modifier_class: '',
+    });
+
+    expect(c.querySelectorAll('.ct-navigation')).toHaveLength(1);
+    expect(c.querySelector('.ct-navigation').classList).toContain('ct-theme-light');
+    expect(c.querySelector('.ct-navigation').classList).toContain('ct-navigation--none');
+
+    const menuItems = c.querySelectorAll('.ct-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-navigation__title')).toBeNull();
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders correctly when items have submenus', async () => {
+    const c = await dom(template, {
+      theme: 'dark',
+      items: [
+        { title: 'Services', url: '/services', below: [{ title: 'Consulting', url: '/services/consulting' }] },
+        { title: 'Contact', url: '/contact', below: [{ title: 'Support', url: '/contact/support' }] },
+      ],
+      type: 'drawer',
+      variant: 'primary',
+      dropdown_columns: 2,
+      dropdown_columns_fill: false,
+      is_animated: true,
+      menu_id: 'main-nav',
+      modifier_class: '',
+    });
+
+    expect(c.querySelectorAll('.ct-navigation')).toHaveLength(1);
+    expect(c.querySelector('.ct-navigation').classList).toContain('ct-theme-dark');
+    expect(c.querySelector('.ct-navigation').classList).toContain('ct-navigation--drawer');
+
+    const menuItems = c.querySelectorAll('.ct-navigation .ct-menu__item');
+    expect(menuItems).toHaveLength(4);
+    expect(menuItems[0].querySelector('.ct-link').textContent.trim()).toBe('Services');
+    expect(menuItems[1].querySelector('.ct-link').textContent.trim()).toBe('Consulting');
+    expect(menuItems[0].querySelector('.ct-menu__sub-menu .ct-link').textContent.trim()).toBe('Consulting');
+    expect(menuItems[2].querySelector('.ct-link').textContent.trim()).toBe('Contact');
+    expect(menuItems[3].querySelector('.ct-link').textContent.trim()).toBe('Support');
+    expect(menuItems[2].querySelector('.ct-menu__sub-menu .ct-link').textContent.trim()).toBe('Support');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('does not render when items are empty', async () => {
+    const c = await dom(template, {
+      items: [],
+    });
+
+    expect(c.querySelectorAll('.ct-navigation')).toHaveLength(0);
+  });
+});