@dta-au/civictheme-twig 1.13.1

package/components/03-organisms/mobile-navigation/mobile-navigation-close.twig

@@ -0,0 +1,31 @@
+{#
+/**
+ * @file
+ * CivicTheme Mobile Navigation Close component.
+ *
+ * Props:
+ * - theme: [string] Theme variation (light or dark).
+ * - text: [string,null] Text for the button.
+ * - modifier_class: [string] Additional CSS classes.
+ * - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
+ */
+#}
+
+{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
+{% set modifier_class = '%s %s'|format(theme_class, modifier_class|default('')) %}
+{% set attributes = attributes is defined and attributes is not null ? attributes : create_attribute({}) %}
+{% set text = text|default('Close') %}
+
+<div class="ct-mobile-navigation-close {{ modifier_class -}}">
+  {% include '@atoms/button/button.twig' with {
+    theme: theme,
+    type: 'tertiary',
+    kind: 'button',
+    size: 'small',
+    text: text,
+    icon: 'close',
+    icon_placement: 'after',
+    attributes: attributes.setAttribute('data-flyout-close-all-trigger', ''),
+    modifier_class: 'ct-mobile-navigation-close__button',
+  } only %}
+</div>

package/components/03-organisms/mobile-navigation/mobile-navigation-menu.twig

@@ -0,0 +1,138 @@
+{#
+/**
+ * @file
+ * CivicTheme Mobile Navigation Menu component.
+ *
+ * Props:
+ * - theme: [string] Theme variation (light or dark).
+ * - items: [array] Menu links:
+ *   Each item contains:
+ *   - title: [string,null,object] Link title.
+ *   - url: [string,null,object] Link URL.
+ *   - icon: [string,null,object] Icon name.
+ *   - below: [array] Submenu items.
+ *   - is_expanded: [boolean,null] Whether the current item has visible children.
+ *   - in_active_trail: [boolean,null] Whether the current item is in the active trail.
+ * - modifier_class: [string] Additional CSS classes.
+ * - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
+ */
+#}
+
+{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
+{% set modifier_class = '%s %s'|format(theme_class, modifier_class|default('')) %}
+
+{% import _self as menus %}
+
+{#
+Copied as-is from '@base/menu/menu.twig'.
+#}
+{% macro menu_links(items, menu_level, modifier_class, theme, is_collapsible) %}
+  {% if items %}
+    {% if menu_level == 0 %}
+      <ul class="ct-menu ct-menu--level-{{ menu_level }} {{ modifier_class -}} " data-component-name="ct-menu" {{- attributes|default('') -}}>
+    {% else %}
+      {% if is_collapsible %}
+        {% set collapsible_panel = 'data-collapsible-panel' %}
+        {% set aria_hidden = item.in_active_trail ? 'aria-hidden="false"' : 'aria-hidden="true"' %}
+      {% endif %}
+      <div class="ct-menu__sub-menu__wrapper ct-menu__sub-menu__wrapper--level-{{ menu_level }}" {{ collapsible_panel }} {{ aria_hidden }}>
+        <ul class="ct-menu ct-menu__sub-menu ct-menu--level-{{ menu_level }}">
+    {% endif %}
+
+    {% for item in items %}
+      {% set item_classes = [
+        'ct-menu__item',
+        'ct-menu__item--level-' ~ menu_level,
+        item.below ? 'ct-menu__item--has-children' : '',
+        item.in_active_trail ? 'ct-menu__item--active-trail' : '',
+        item.modifier_class|default(''),
+      ] %}
+
+      {% set item_attributes = item.attributes|default('') %}
+      {% set aria_expanded = item.in_active_trail and item.is_expanded ? 'aria-expanded="true"' : 'aria-expanded="false"' %}
+      {% if is_collapsible %}
+        {% set collapsible_collapsed = item.in_active_trail and item.is_expanded ? '' : 'data-collapsible-collapsed' %}
+        {% set item_attributes = [item_attributes, 'data-collapsible', 'data-collapsible-duration=0', collapsible_collapsed, aria_expanded]|join(' ') %}
+      {% endif %}
+
+      <li class="{{ item_classes|join(' ') }}" {{ item_attributes }}>
+
+        {% include '@atoms/link/link.twig' with {
+          theme: theme|default('light'),
+          text: item.title,
+          title: item.title,
+          url: item.url,
+          icon: item.icon,
+          icon_placement: 'before',
+          modifier_class: 'ct-menu__item__link',
+          attributes: item.link_attributes|default(''),
+          is_new_window: item.is_new_window is defined ? item.is_new_window : false,
+          is_external: item.is_external is defined ? item.is_external : false,
+        } only %}
+
+        {% if is_collapsible and item.below %}
+          <a href="#" class="ct-menu__item__link-trigger" data-collapsible-trigger {{ aria_expanded }} title="Expand {{ item.title }} menu"></a>
+        {% endif %}
+
+        {% if item.below %}
+          {{ menus.menu_links_below(item.below, menu_level + 1, modifier_class, theme, item) }}
+        {% endif %}
+
+      </li>
+    {% endfor %}
+
+    {% if menu_level == 0 %}
+      </ul>
+    {% else %}
+        </ul>
+      </div>
+    {% endif %}
+  {% endif %}
+{% endmacro %}
+
+{#
+Overrides for generation of child links.
+#}
+{% macro menu_links_below(items, menu_level, modifier_class, theme, parent_item) %}
+
+  {% include '@atoms/button/button.twig' with {
+    theme: theme,
+    kind: 'button',
+    icon: 'right-arrow-2',
+    size: 'regular',
+    modifier_class: 'ct-mobile-navigation__open-subsection-trigger',
+    attributes: create_attribute({
+      'data-flyout-open-trigger': '',
+      'aria-expanded': 'false',
+      'aria-label': 'Open %s submenu'|format(parent_item.title),
+    }),
+  } only %}
+
+  <div data-flyout data-flyout-direction="right" data-flyout-focus=".ct-link">
+    <div data-flyout-panel>
+      {% include '@organisms/mobile-navigation/mobile-navigation-close.twig' with {
+        theme: theme,
+      } only %}
+
+      <div class="ct-mobile-navigation__close-trigger">
+        {% include '@atoms/button/button.twig' with {
+          theme: theme,
+          kind: 'button',
+          icon: 'left-arrow-outline',
+          icon_placement: 'before',
+          size: 'regular',
+          text: parent_item.title,
+          attributes: create_attribute({
+            'data-flyout-close-trigger': '',
+            'aria-label': 'Close %s submenu'|format(parent_item.title),
+          }),
+        } only %}
+      </div>
+
+      {{ menus.menu_links(items, menu_level, modifier_class, theme) }}
+    </div>
+  </div>
+
+{% endmacro %}
+
+{{ menus.menu_links(items, 0, modifier_class, theme) }}

package/components/03-organisms/mobile-navigation/mobile-navigation-trigger.twig

@@ -0,0 +1,28 @@
+{#
+/**
+ * @file
+ * CivicTheme Mobile Navigation Trigger component.
+ *
+ * Props:
+ * - theme: [string] Theme variation (light or dark).
+ * - text: [string] Button text.
+ * - icon: [string] Icon symbol name.
+ * - modifier_class: [string] Additional CSS classes.
+ * - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
+ */
+#}
+
+{% set modifier_class = 'ct-mobile-navigation-trigger %s'|format(modifier_class|default('')) %}
+{% set icon = icon|default('bars') %}
+{% set attributes = attributes is defined and attributes is not null ? attributes : create_attribute({}) %}
+
+{% include '@atoms/button/button.twig' with {
+  theme: theme,
+  kind: 'button',
+  icon: icon,
+  icon_placement: 'after',
+  size: 'small',
+  text: text,
+  modifier_class: modifier_class,
+  attributes: attributes.setAttribute('data-flyout-open-trigger', '').setAttribute('data-flyout-target', '.ct-mobile-navigation').setAttribute('aria-expanded', 'false'),
+} only %}

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

@@ -0,0 +1,236 @@
+//
+// CivicTheme Mobile Navigation component styles.
+//
+
+@use 'sass:math';
+
+// Note: typography and icon sizes are specified explicitly as these elements
+// have custom appearance unique to mobile menu (i.e., no responsive sizing).
+
+$ct-mobile-navigation-spacing: ct-spacing(2);
+
+.ct-mobile-navigation {
+  $root: &;
+
+  display: block;
+
+  @include ct-breakpoint($ct-mobile-navigation-breakpoint) {
+    display: none;
+  }
+
+  #{$root}__panel {
+    display: flex;
+    flex-direction: column;
+  }
+
+  #{$root}__top-menu-wrapper {
+    flex-grow: 1;
+
+    // Padding on the first and other panels looks the same, but specified
+    // separately as first panel contains other elements (not only menu items).
+    padding: 0 $ct-mobile-navigation-spacing;
+  }
+
+  #{$root}__bottom-menu-wrapper {
+    padding: 0 $ct-mobile-navigation-spacing;
+  }
+
+  .ct-menu {
+    padding: 0;
+  }
+
+  #{$root}__top-menu {
+    margin: 0;
+
+    .ct-menu__sub-menu__wrapper {
+      // Same padding as in the menu wrapper above.
+      padding: 0 $ct-mobile-navigation-spacing;
+    }
+
+    .ct-menu__item {
+      border-bottom-width: ct-particle(0.125);
+      border-bottom-style: solid;
+      display: flex;
+      flex-wrap: nowrap;
+      align-items: center;
+      width: 100%;
+
+      .ct-link {
+        width: 100%;
+        padding: ct-spacing(2);
+
+        @include ct-typography('label-large');
+        @include ct-link-decoration(false, false, false, false);
+      }
+    }
+
+    // Subsection arrow.
+    #{$root}__open-subsection-trigger {
+      border-left-width: ct-particle(0.125);
+      border-left-style: solid;
+      padding: $ct-mobile-navigation-spacing;
+      border-radius: 0;
+
+      .ct-icon {
+        @include ct-icon-size();
+      }
+    }
+  }
+
+  #{$root}__bottom-menu {
+    .ct-menu__sub-menu__wrapper {
+      // Same padding as in the menu wrapper above.
+      padding: 0 $ct-mobile-navigation-spacing;
+    }
+
+    .ct-menu__item {
+      display: flex;
+      flex-wrap: nowrap;
+      align-items: center;
+      width: 100%;
+
+      .ct-link {
+        width: 100%;
+        padding: ct-spacing(2);
+
+        @include ct-link-decoration(false, false, false, false);
+        @include ct-typography('label-regular');
+
+        @include ct-breakpoint('xxs') {
+          font-weight: normal;
+        }
+      }
+    }
+
+    // Subsection arrow.
+    #{$root}__open-subsection-trigger {
+      border-left-width: ct-particle(0.125);
+      border-left-style: solid;
+      padding: math.div($ct-mobile-navigation-spacing, 2);
+      border-radius: 0;
+
+      .ct-icon {
+        @include ct-icon-size('small');
+      }
+    }
+  }
+
+  // "Close a single panel" trigger.
+  #{$root}__close-trigger {
+    padding: $ct-mobile-navigation-spacing;
+    padding-top: 0;
+
+    [data-flyout-close-trigger] {
+      padding: 0;
+      float: none;
+      font-weight: bold;
+      background-color: transparent;
+
+      @include ct-typography('label-large');
+
+      .ct-icon {
+        display: block;
+        margin-bottom: ct-spacing();
+      }
+    }
+  }
+
+  @include ct-component-theme($root) using($root, $theme) {
+    [data-flyout-panel] {
+      @include ct-component-property($root, $theme, panel, background-color);
+    }
+
+    .ct-mobile-navigation__top-menu-wrapper {
+      @include ct-component-property($root, $theme, top-menu, background-color);
+    }
+
+    .ct-mobile-navigation__bottom-menu-wrapper {
+      @include ct-component-property($root, $theme, bottom-menu, background-color);
+    }
+
+    .ct-menu__item {
+      border-bottom-color: ct-component-var($root, $theme, menu-divider, border-color);
+
+      .ct-link {
+        @include ct-link-backgrounds(transparent, transparent, transparent, transparent, transparent);
+        @include ct-link-colors(
+          ct-component-var($root, $theme, menu-item, color),
+          ct-component-var($root, $theme, menu-item, hover-color)
+        );
+      }
+    }
+
+    #{$root}__open-subsection-trigger {
+      border-left-color: ct-component-var($root, $theme, menu-divider, border-color);
+      background-color: transparent;
+
+      &:focus-visible {
+        @include ct-outline-theme($theme);
+      }
+
+      .ct-icon {
+        @include ct-component-property($root, $theme, subsection-trigger, color);
+      }
+    }
+
+    #{$root}__close-trigger {
+      [data-flyout-close-trigger] {
+        color: ct-component-var($root, $theme, subsection-heading, color);
+
+        &:focus-visible {
+          @include ct-outline-theme($theme);
+        }
+
+        .ct-icon {
+          @include ct-component-property($root, $theme, subsection-heading, icon-color);
+        }
+      }
+    }
+  }
+}
+
+// Mobile navigation open trigger.
+.ct-mobile-navigation-trigger {
+  $root: &;
+
+  @include ct-typography('label-extra-small');
+  @include ct-print-hide();
+
+  & {
+    background-color: transparent;
+    border: none;
+    padding-left: 0;
+    padding-right: 0;
+    display: inline;
+  }
+
+  @include ct-breakpoint($ct-mobile-navigation-breakpoint) {
+    display: none;
+  }
+
+  .ct-icon {
+    @include ct-icon-size('extra-small');
+
+    & {
+      vertical-align: middle;
+    }
+  }
+
+  @include ct-component-theme($root) using($root, $theme) {
+    @include ct-component-property($root, $theme, color);
+
+    &:focus-visible {
+      @include ct-outline-theme($theme);
+    }
+  }
+}
+
+// Mobile navigation close button.
+.ct-mobile-navigation-close {
+  text-align: right;
+  padding: $ct-mobile-navigation-spacing;
+
+  [data-flyout-close-all-trigger] {
+    float: none;
+  }
+}

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

@@ -0,0 +1,123 @@
+/**
+ * CivicTheme Mobile Navigation component stories.
+ */
+
+import MobileNavigationPanel from './mobile-navigation.twig';
+import MobileNavigationTrigger from './mobile-navigation-trigger.twig';
+
+const meta = {
+  title: 'Organisms/Navigation/Mobile Navigation',
+  argTypes: {
+    theme: {
+      control: { type: 'radio' },
+      options: ['light', 'dark'],
+    },
+    top_menu: {
+      control: { type: 'array' },
+    },
+    bottom_menu: {
+      control: { type: 'array' },
+    },
+    content_top: {
+      control: { type: 'text' },
+    },
+    content_bottom: {
+      control: { type: 'text' },
+    },
+    modifier_class: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+export default meta;
+
+export const MobileNavigation = {
+  parameters: {
+    layout: 'centered',
+  },
+
+  args: {
+    theme: 'light',
+    content_top: '',
+    top_menu: [
+      {
+        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,
+      },
+    ],
+    bottom_menu: [
+      {
+        title: 'Menu item 1',
+        url: 'https://example.com/menu-item-1',
+        in_active_trail: false,
+        is_expanded: false,
+      },
+      {
+        title: 'Menu item 2',
+        url: 'https://example.com/menu-item-2',
+        in_active_trail: false,
+        is_expanded: false,
+      },
+    ],
+    content_bottom: '',
+    modifier_class: '',
+  },
+
+  render: (args) => (`${
+    MobileNavigationTrigger({
+      theme: args.theme,
+      icon: 'bars',
+      text: 'Menu',
+      modifier_class: '',
+    })
+  }${
+    MobileNavigationPanel(args)
+  }`),
+
+  globals: {
+    viewport: {
+      value: 'xs',
+      isRotated: false,
+    },
+  },
+};

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

@@ -0,0 +1,21 @@
+//
+// CivicTheme Mobile Navigation component story styles.
+//
+
+.story-container__page-content {
+  &.story-ct-mobile-navigation {
+    // Override hiding of mobile trigger and a menu for this component
+    // storybook. It will still be hidden in other components (i.e. header).
+    .ct-mobile-navigation {
+      @include ct-breakpoint($ct-mobile-navigation-breakpoint) {
+        display: block;
+      }
+    }
+
+    .ct-mobile-navigation-trigger {
+      @include ct-breakpoint($ct-mobile-navigation-breakpoint) {
+        display: inline;
+      }
+    }
+  }
+}