@communitiesuk/svelte-component-library 0.1.17

package/dist/components/layout/service-navigation-nested-mobile/MobileNav.svelte

@@ -0,0 +1,233 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  // Types for navigation items
+  export type SubNavItem = {
+    text: string;
+    href: string;
+  };
+
+  export type NavItem = {
+    text: string;
+    href: string;
+    description?: string;
+  };
+
+  export type NavSection = {
+    title: string;
+    href?: string; // Optional: Href for the main section link itself
+    items: (
+      | SubNavItem
+      | {
+          // Represents a group within a section
+          title?: string;
+          items: SubNavItem[];
+        }
+    )[];
+  };
+
+  // Component props
+  let {
+    isOpen = false,
+    sections = [] as NavSection[],
+    activeSectionHref = $bindable(""), // Href for the active section header, e.g. /components
+    activeDetailHref = $bindable(""), // Href for the detailed active item, e.g. /components/x/y#z
+    onNavigate = (href: string, event?: MouseEvent) => {},
+  } = $props<{
+    isOpen?: boolean;
+    sections?: NavSection[];
+    activeSectionHref?: string;
+    activeDetailHref?: string;
+    onNavigate?: (href: string, event?: MouseEvent) => void;
+  }>();
+
+  // Track which sections are expanded
+  let expandedSections = $state<Record<string, boolean>>({});
+
+  // Toggle a section's expanded state
+  function toggleSection(sectionTitle: string) {
+    expandedSections[sectionTitle] = !expandedSections[sectionTitle];
+  }
+
+  /**
+   * Determines if a section is expanded:
+   * - If the user has toggled a section explicitly (in expandedSections), use that.
+   * - Otherwise, expand the section whose href matches activeSectionHref.
+   */
+  function isSectionExpanded(sectionTitle: string): boolean {
+    const explicit = expandedSections[sectionTitle];
+    if (explicit !== undefined) return explicit;
+    const section = sections.find((s) => s.title === sectionTitle);
+    return !!section?.href && section.href === activeSectionHref;
+  }
+
+  // When a navigation happens, call the onNavigate prop
+  function handleNavigate(href: string, event: MouseEvent) {
+    if (!event.defaultPrevented) {
+      onNavigate(href, event);
+    }
+  }
+</script>
+
+<nav
+  id="app-mobile-nav"
+  class:app-mobile-nav={true}
+  class:js-app-mobile-nav={true}
+  class:app-mobile-nav--active={isOpen}
+  aria-label="mobile navigation"
+  aria-hidden={!isOpen}
+>
+  <div class="app-mobile-nav__wrapper">
+    <ul class="app-mobile-nav__list">
+      {#each sections as section (section.title)}
+        <li class="app-mobile-nav__section">
+          <div class="app-mobile-nav__section-header">
+            <a
+              href={section.href || "#"}
+              class="app-mobile-nav__section-link"
+              class:app-mobile-nav__section-link--current={section.href &&
+                section.href === activeSectionHref}
+              onclick={(event) => {
+                event.preventDefault();
+                toggleSection(section.title);
+              }}
+            >
+              {section.title}
+            </a>
+          </div>
+
+          <ul
+            class="app-mobile-nav__list app-mobile-nav__section-items"
+            class:app-mobile-nav__section-items--active={isSectionExpanded(
+              section.title,
+            )}
+            aria-label={section.title}
+          >
+            {#each section.items as item, i (i)}
+              {#if "items" in item && Array.isArray(item.items)}
+                <!-- Grouped items with title -->
+                <li class="app-mobile-nav__group">
+                  {#if item.title}
+                    <h2 class="app-mobile-nav__group-title">{item.title}</h2>
+                  {/if}
+                  <ul class="app-mobile-nav__list">
+                    {#each item.items as subItem, k (k)}
+                      {@const isSubItemCurrent =
+                        subItem.href === activeDetailHref}
+                      <li>
+                        <a
+                          class="app-mobile-nav__link"
+                          class:app-mobile-nav__link--current={isSubItemCurrent}
+                          href={subItem.href}
+                          onclick={(e) => handleNavigate(subItem.href, e)}
+                        >
+                          {@html subItem.text}
+                        </a>
+                      </li>
+                    {/each}
+                  </ul>
+                </li>
+              {:else if "href" in item && "text" in item}
+                <!-- Single navigation item -->
+                {@const navItem = item as SubNavItem}
+                {@const isNavItemCurrent = navItem.href === activeDetailHref}
+                <li>
+                  <a
+                    class="app-mobile-nav__link"
+                    class:app-mobile-nav__link--current={isNavItemCurrent}
+                    href={navItem.href}
+                    onclick={(e) => handleNavigate(navItem.href, e)}
+                  >
+                    {@html navItem.text}
+                  </a>
+                </li>
+              {/if}
+            {/each}
+          </ul>
+        </li>
+      {/each}
+    </ul>
+  </div>
+</nav>
+
+<style>
+  .app-mobile-nav {
+    display: none;
+    border-bottom: 1px solid #b1b4b6;
+    background-color: #f8f8f8;
+  }
+
+  .app-mobile-nav--active {
+    display: block;
+  }
+
+  @media (min-width: 40.0625em) {
+    .app-mobile-nav--active {
+      display: none;
+    }
+  }
+
+  .app-mobile-nav__wrapper {
+    padding: 0;
+  }
+
+  .app-mobile-nav__list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .app-mobile-nav__section {
+    border-bottom: 1px solid #f3f2f1;
+  }
+
+  .app-mobile-nav__section-header {
+    display: block;
+    background-color: #f3f2f1;
+    font-weight: 700;
+  }
+
+  .app-mobile-nav__section-link {
+    display: block;
+    padding: 15px;
+    text-decoration: none;
+    color: #1d70b8;
+    font-weight: 700;
+  }
+
+  .app-mobile-nav__section-link--current {
+    /* border-left: 4px solid #1d70b8; */
+    padding-left: 11px;
+  }
+
+  .app-mobile-nav__section-items {
+    display: none;
+    background-color: #fff;
+  }
+
+  .app-mobile-nav__section-items--active {
+    display: block;
+  }
+
+  .app-mobile-nav__link {
+    display: block;
+    padding: 15px;
+    text-decoration: none;
+    color: #1d70b8;
+  }
+
+  .app-mobile-nav__link--current {
+    border-left: 4px solid #1d70b8;
+    padding-left: 11px;
+    /* background-color: #f3f2f1; */
+  }
+
+  .app-mobile-nav__group-title {
+    margin: 0;
+    padding: 15px 15px 5px 15px;
+    color: #505a5f;
+    font-size: 19px;
+    font-weight: normal;
+    font-family: Helvetica, Arial, sans-serif;
+  }
+</style>

package/dist/components/layout/service-navigation-nested-mobile/MobileNav.svelte.d.ts

@@ -0,0 +1,27 @@
+export type SubNavItem = {
+    text: string;
+    href: string;
+};
+export type NavItem = {
+    text: string;
+    href: string;
+    description?: string;
+};
+export type NavSection = {
+    title: string;
+    href?: string;
+    items: (SubNavItem | {
+        title?: string;
+        items: SubNavItem[];
+    })[];
+};
+type $$ComponentProps = {
+    isOpen?: boolean;
+    sections?: NavSection[];
+    activeSectionHref?: string;
+    activeDetailHref?: string;
+    onNavigate?: (href: string, event?: MouseEvent) => void;
+};
+declare const MobileNav: import("svelte").Component<$$ComponentProps, {}, "activeSectionHref" | "activeDetailHref">;
+type MobileNav = ReturnType<typeof MobileNav>;
+export default MobileNav;

package/dist/components/layout/service-navigation-nested-mobile/ServiceNavigationNestedMobile.svelte

@@ -0,0 +1,70 @@
+<!-- 
+  This component acts as a parent container for HeaderNav and MobileNav,
+  managing the shared state and interactions for nested mobile navigation.
+-->
+<script lang="ts">
+  import HeaderNav from "./HeaderNav.svelte";
+  import MobileNav from "./MobileNav.svelte";
+  import type { NavigationItem } from "./HeaderNav.svelte";
+  import type { NavSection } from "./MobileNav.svelte";
+
+  // --- Props ---
+  let {
+    serviceName = "Service Name",
+    homeHref,
+    mobileNavSections,
+    activeSectionHref, // Path of the active section, e.g. "/components"
+    activeDetailHref, // Path of the specific active item, e.g. "/components/forms/button#examples"
+  }: {
+    serviceName?: string;
+    homeHref: string;
+    mobileNavSections: NavSection[];
+    activeSectionHref: string;
+    activeDetailHref: string;
+  } = $props();
+
+  // --- State ---
+  let isMobileNavOpen = $state(false);
+
+  // --- Derived headerNavigationItems for HeaderNav ---
+  let headerNavigationItems = $derived(
+    mobileNavSections.map(({ title, href }) => ({
+      text: title,
+      href: href ?? "",
+    })),
+  );
+
+  // --- Handlers ---
+  // Toggle the mobile nav open/closed state
+  function handleToggleMobileNav() {
+    isMobileNavOpen = !isMobileNavOpen;
+  }
+
+  // Handle navigation request from mobile menu
+  function handleMobileNavigation() {
+    isMobileNavOpen = false;
+  }
+</script>
+
+<div>
+  {#if headerNavigationItems && headerNavigationItems.length > 0}
+    <HeaderNav
+      {serviceName}
+      {homeHref}
+      navigationItems={headerNavigationItems}
+      bind:isMobileNavOpen
+      activeItemHref={activeSectionHref}
+      onToggle={handleToggleMobileNav}
+    />
+  {/if}
+</div>
+
+{#if isMobileNavOpen}
+  <MobileNav
+    sections={mobileNavSections}
+    {activeSectionHref}
+    {activeDetailHref}
+    onNavigate={handleMobileNavigation}
+    isOpen={isMobileNavOpen}
+  />
+{/if}

package/dist/components/layout/service-navigation-nested-mobile/ServiceNavigationNestedMobile.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { NavSection } from "./MobileNav.svelte";
+type $$ComponentProps = {
+    serviceName?: string;
+    homeHref: string;
+    mobileNavSections: NavSection[];
+    activeSectionHref: string;
+    activeDetailHref: string;
+};
+declare const ServiceNavigationNestedMobile: import("svelte").Component<$$ComponentProps, {}, "">;
+type ServiceNavigationNestedMobile = ReturnType<typeof ServiceNavigationNestedMobile>;
+export default ServiceNavigationNestedMobile;

package/dist/components/layout/service-navigation-nested-mobile/SideNav.svelte

@@ -0,0 +1,276 @@
+<script lang="ts">
+  export type SideNavItem = {
+    text: string;
+    href: string;
+    subItems?: { text: string; href: string }[];
+  };
+
+  export type SideNavGroup = {
+    title?: string;
+    items: SideNavItem[];
+  };
+
+  let {
+    title = "Pages in this section",
+    items = $bindable([] as SideNavItem[]),
+    groups = $bindable([] as SideNavGroup[]),
+    currentItem = $bindable(""), // This prop is the SOLE driver for active state
+    activeItemBackgroundColor = $bindable("transparent"),
+  } = $props<{
+    title?: string;
+    items?: SideNavItem[];
+    groups?: SideNavGroup[];
+    currentItem?: string; // Value from parent
+    activeItemBackgroundColor?: string;
+  }>();
+
+  function calculateIsActive(
+    item: { href: string; subItems?: { href: string }[] },
+    activePropValue: string | undefined,
+  ): boolean {
+    if (!activePropValue) {
+      return false; // If currentItem prop is not set, nothing is active by it
+    }
+
+    // Check 1: Direct match with item's href
+    if (item.href === activePropValue) {
+      return true;
+    }
+
+    // Check 2: If activePropValue is a sub-item of this item
+    if (item.subItems) {
+      for (const subItem of item.subItems) {
+        if (subItem.href === activePropValue) {
+          return true; // Parent item is active because its sub-item is the active one
+        }
+      }
+    }
+
+    // Check 3: If item.href is the base path of activePropValue (when activePropValue has a hash)
+    // e.g., activePropValue="/page#section1", item.href="/page"
+    const activePropBasePath = activePropValue.split("#")[0];
+    if (item.href === activePropBasePath && activePropValue.includes("#")) {
+      return true;
+    }
+
+    return false;
+  }
+</script>
+
+{#snippet navItem(item: SideNavItem, activeGlobalItem: string)}
+  {@const isActive = calculateIsActive(item, activeGlobalItem)}
+  <li
+    class="app-subnav__section-item {isActive
+      ? 'app-subnav__section-item--current app-subnav__section-item--bold app-subnav__section-item--top'
+      : ''}"
+    style={isActive ? `background-color: ${activeItemBackgroundColor};` : ""}
+  >
+    <a
+      class="govuk-link govuk-link--no-visited-state govuk-link--no-underline app-subnav__link"
+      href={item.href}
+      aria-current={isActive ? "location" : undefined}
+    >
+      {@html item.text}
+    </a>
+
+    {#if isActive && item.subItems && item.subItems.length > 0}
+      <!-- Nested list for sub-items of the current active item -->
+      <ul class="app-subnav__section app-subnav__section--nested">
+        {#each item.subItems as subItem (subItem.href)}
+          {@const isSubActive = subItem.href === activeGlobalItem}
+          <li class="app-subnav__section-item">
+            <a
+              class="govuk-link govuk-link--no-visited-state govuk-link--no-underline app-subnav__link"
+              class:app-subnav__link--bold={isSubActive}
+              href={subItem.href}
+            >
+              {@html subItem.text}
+            </a>
+          </li>
+        {/each}
+      </ul>
+    {/if}
+  </li>
+{/snippet}
+
+<div class="app-pane__subnav">
+  <!-- Main container for the side navigation -->
+  <nav class="app-subnav" aria-labelledby="app-subnav-heading">
+    <h2 class="govuk-visually-hidden" id="app-subnav-heading">
+      {title}
+    </h2>
+
+    {#if items.length > 0}
+      <!-- Renders the flat list of items, if provided -->
+      <ul class="app-subnav__section">
+        {#each items as item (item.href)}
+          {@render navItem(item, currentItem)}
+        {/each}
+      </ul>
+    {/if}
+
+    {#each groups as group (group.title || group.items[0]?.href)}
+      <!-- Renders grouped sections of items -->
+      {#if group.title}
+        <h3 class="app-subnav__theme">{group.title}</h3>
+      {/if}
+      <ul class="app-subnav__section">
+        {#each group.items as item (item.href)}
+          {@render navItem(item, currentItem)}
+        {/each}
+      </ul>
+    {/each}
+  </nav>
+</div>
+
+<style>
+  .app-subnav {
+    margin-bottom: 100px;
+    padding: 30px 15px 0 0;
+    font-family: Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: 400;
+    font-size: 0.875rem;
+    line-height: 1.14286;
+  }
+
+  @media print {
+    .app-subnav {
+      font-family: sans-serif;
+    }
+  }
+
+  @media (min-width: 40.0625em) {
+    .app-subnav {
+      font-size: 1rem;
+      line-height: 1.25;
+    }
+  }
+
+  @media print {
+    .app-subnav {
+      font-size: 14pt;
+      line-height: 1.2;
+    }
+  }
+
+  .app-subnav__section {
+    margin: 0 0 20px;
+    padding: 0;
+    list-style-type: none;
+  }
+
+  .app-subnav__link {
+    padding: 2px 0;
+    font-family: Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: 400;
+    font-size: 0.875rem;
+    line-height: 1.14286;
+
+    overflow-wrap: break-word;
+  }
+
+  @media print {
+    .app-subnav__link {
+      font-family: sans-serif;
+    }
+  }
+
+  @media (min-width: 40.0625em) {
+    .app-subnav__link {
+      font-size: 1rem;
+      line-height: 1.25;
+    }
+  }
+
+  @media print {
+    .app-subnav__link {
+      font-size: 14pt;
+      line-height: 1.2;
+    }
+  }
+
+  .app-subnav__link:not(:focus):hover {
+    color: #1a65a6;
+  }
+
+  .app-subnav__section-item {
+    position: relative;
+    margin-bottom: 5px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+  }
+
+  .app-subnav__section-item--current {
+    margin-left: -19px;
+    padding-left: 15px;
+    border-left: 4px solid #1a65a6;
+    background-color: #f8f8f8;
+  }
+
+  .app-subnav__section-item--bold .app-subnav__link {
+    font-weight: bold;
+  }
+
+  .app-subnav__section-item--top .app-subnav__link {
+    position: relative;
+    z-index: 2;
+  }
+
+  .app-subnav__section--nested {
+    margin-top: 10px;
+    margin-bottom: 0;
+    padding-left: 20px;
+  }
+
+  .app-subnav__section--nested .app-subnav__section-item::before {
+    margin-left: -20px;
+    color: #505a5f;
+    content: "—";
+  }
+
+  .app-subnav__section--nested .app-subnav__link {
+    padding-left: 0;
+    font-weight: normal;
+  }
+
+  .app-subnav__section--nested .app-subnav__link--bold {
+    padding-left: 0;
+    font-weight: bold;
+  }
+
+  .app-subnav__theme {
+    margin: 0;
+    padding: 10px 15px 10px 0;
+    color: #505a5f;
+    font-family: Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: 400;
+    font-size: 1rem;
+    line-height: 1.25;
+  }
+
+  @media print {
+    .app-subnav__theme {
+      font-family: sans-serif;
+    }
+  }
+
+  @media (min-width: 40.0625em) {
+    .app-subnav__theme {
+      font-size: 1.1875rem;
+      line-height: 1.31579;
+    }
+  }
+
+  @media print {
+    .app-subnav__theme {
+      font-size: 14pt;
+      line-height: 1.15;
+    }
+  }
+</style>

package/dist/components/layout/service-navigation-nested-mobile/SideNav.svelte.d.ts

@@ -0,0 +1,22 @@
+export type SideNavItem = {
+    text: string;
+    href: string;
+    subItems?: {
+        text: string;
+        href: string;
+    }[];
+};
+export type SideNavGroup = {
+    title?: string;
+    items: SideNavItem[];
+};
+type $$ComponentProps = {
+    title?: string;
+    items?: SideNavItem[];
+    groups?: SideNavGroup[];
+    currentItem?: string;
+    activeItemBackgroundColor?: string;
+};
+declare const SideNav: import("svelte").Component<$$ComponentProps, {}, "items" | "groups" | "currentItem" | "activeItemBackgroundColor">;
+type SideNav = ReturnType<typeof SideNav>;
+export default SideNav;