@communitiesuk/svelte-component-library 0.1.17

package/dist/components/layout/InternalHeader.svelte.d.ts

@@ -0,0 +1,15 @@
+type $$ComponentProps = {
+    organisationName?: string;
+    serviceName?: string;
+    homepageUrl?: string;
+    serviceUrl?: string;
+    accountName?: string;
+    signOutUrl?: string;
+    headerBorder?: string;
+    firstSvgColor?: string;
+    backgroundColor?: string;
+    showSignOut?: boolean;
+};
+declare const InternalHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type InternalHeader = ReturnType<typeof InternalHeader>;
+export default InternalHeader;

package/dist/components/layout/PhaseBanner.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  // Define component props with types and default values
+  let {
+    tagText = "Alpha",
+    bannerText = "This is a new service. Help us improve it and ",
+    linkText = "give your feedback by email",
+    linkHref = "#",
+  } = $props<{
+    tagText?: string;
+    bannerText?: string;
+    linkText?: string;
+    linkHref?: string;
+  }>();
+</script>
+
+<div class="govuk-phase-banner govuk-width-container">
+  <p class="govuk-phase-banner__content">
+    <strong class="govuk-tag govuk-phase-banner__content__tag">
+      {tagText}
+    </strong>
+    <span class="govuk-phase-banner__text">
+      {bannerText}<a class="govuk-link" href={linkHref}>{linkText}</a>.
+    </span>
+  </p>
+</div>
+
+<style>
+</style>

package/dist/components/layout/PhaseBanner.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    tagText?: string;
+    bannerText?: string;
+    linkText?: string;
+    linkHref?: string;
+};
+declare const PhaseBanner: import("svelte").Component<$$ComponentProps, {}, "">;
+type PhaseBanner = ReturnType<typeof PhaseBanner>;
+export default PhaseBanner;

package/dist/components/layout/ServiceNavigation.svelte

@@ -0,0 +1,143 @@
+<!-- Service Navigation component 
+Use the component with or without navigation items based on your needs. -->
+
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { browser } from "$app/environment";
+
+  // Define types for navigation items
+  type NavigationItem = {
+    href: string;
+    label: string;
+    isActive?: boolean;
+  };
+
+  let {
+    serviceName = "Service name",
+    serviceUrl = "#",
+    navigationItems = undefined,
+  } = $props<{
+    serviceName?: string;
+    serviceUrl?: string;
+    navigationItems?: NavigationItem[];
+  }>();
+
+  // Reactive state declarations
+  let hasNavigation = $derived(navigationItems && navigationItems.length > 0);
+  let menuIsOpen = $state(false);
+  let isDesktopView = $state(true); // Default to desktop view until we can check
+  let tabletBreakpoint = $state("");
+
+  // References to DOM elements
+  let navigationElement = $state<HTMLElement | null>(null);
+  let buttonElement = $state<HTMLButtonElement | null>(null);
+
+  // Derived values for UI state
+  let isMenuVisible = $derived(isDesktopView || menuIsOpen);
+  let isButtonHidden = $derived(isDesktopView);
+
+  onMount(() => {
+    if (!browser) return;
+
+    // Get the breakpoint from CSS custom property
+    const property = "--govuk-frontend-breakpoint-tablet";
+    const value = window
+      .getComputedStyle(document.documentElement)
+      .getPropertyValue(property)
+      .trim();
+
+    tabletBreakpoint = value || "768px";
+
+    if (!value) {
+      console.warn(
+        "CSS custom property (--govuk-frontend-breakpoint-tablet) not found, using fallback",
+      );
+    }
+
+    // Initialize media query
+    const mql = window.matchMedia(`(min-width: ${tabletBreakpoint})`);
+
+    // Set initial state
+    isDesktopView = mql.matches;
+
+    // Set up event listener for viewport changes
+    const handleViewportChange = (e: MediaQueryListEvent) => {
+      isDesktopView = e.matches;
+      if (isDesktopView) {
+        // Reset menu state when switching to desktop
+        menuIsOpen = false;
+      }
+    };
+
+    mql.addEventListener("change", handleViewportChange);
+
+    return () => {
+      mql.removeEventListener("change", handleViewportChange);
+    };
+  });
+
+  // Handle menu button click
+  function toggleMenu() {
+    menuIsOpen = !menuIsOpen;
+  }
+</script>
+
+<section
+  aria-label="Service information"
+  class="govuk-service-navigation"
+  data-module="govuk-service-navigation"
+>
+  <div class="govuk-width-container">
+    <div class="govuk-service-navigation__container">
+      <span class="govuk-service-navigation__service-name">
+        <a href={serviceUrl} class="govuk-service-navigation__link">
+          {serviceName}
+        </a>
+      </span>
+
+      {#if hasNavigation}
+        <nav aria-label="Menu" class="govuk-service-navigation__wrapper">
+          <button
+            type="button"
+            class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle"
+            aria-controls="navigation"
+            aria-expanded={menuIsOpen}
+            onclick={toggleMenu}
+            bind:this={buttonElement}
+            hidden={isButtonHidden}
+          >
+            Menu
+          </button>
+          <ul
+            class="govuk-service-navigation__list"
+            id="navigation"
+            bind:this={navigationElement}
+            hidden={!isMenuVisible}
+          >
+            {#each navigationItems as item}
+              <li
+                class="govuk-service-navigation__item{item.isActive
+                  ? ' govuk-service-navigation__item--active'
+                  : ''}"
+              >
+                <a
+                  class="govuk-service-navigation__link"
+                  href={item.href}
+                  aria-current={item.isActive ? "true" : undefined}
+                >
+                  {#if item.isActive}
+                    <strong class="govuk-service-navigation__active-fallback"
+                      >{item.label}</strong
+                    >
+                  {:else}
+                    {item.label}
+                  {/if}
+                </a>
+              </li>
+            {/each}
+          </ul>
+        </nav>
+      {/if}
+    </div>
+  </div>
+</section>

package/dist/components/layout/ServiceNavigation.svelte.d.ts

@@ -0,0 +1,13 @@
+type NavigationItem = {
+    href: string;
+    label: string;
+    isActive?: boolean;
+};
+type $$ComponentProps = {
+    serviceName?: string;
+    serviceUrl?: string;
+    navigationItems?: NavigationItem[];
+};
+declare const ServiceNavigation: import("svelte").Component<$$ComponentProps, {}, "">;
+type ServiceNavigation = ReturnType<typeof ServiceNavigation>;
+export default ServiceNavigation;

package/dist/components/layout/SideNavigation.svelte

@@ -0,0 +1,345 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  // Define types for items and subitems
+  export type NavItem = {
+    id?: string;
+    text: string;
+    href: string;
+    subItems?: NavSubItem[];
+  };
+
+  export type NavSubItem = {
+    id?: string;
+    text: string;
+    href: string;
+  };
+
+  // Component props
+  let {
+    items = [],
+    ariaLabel = "Side",
+    selectedItem = $bindable(""),
+    selectedSubItem = $bindable(""),
+    mobile = {
+      disabled: false,
+      showButtonText: "Show navigation",
+      hideButtonText: "Hide navigation",
+    },
+  } = $props<{
+    items: NavItem[];
+    ariaLabel?: string;
+    selectedItem?: string;
+    selectedSubItem?: string;
+    mobile?: {
+      disabled?: boolean;
+      showButtonText?: string;
+      hideButtonText?: string;
+    };
+  }>();
+
+  // State for mobile navigation
+  let expanded = $state(false);
+  let isJsEnabled = $state(false);
+  let mobileClosed = $state(false);
+
+  // Check if JavaScript is enabled on mount
+  onMount(() => {
+    isJsEnabled = true;
+    // Initialize mobileClosed based on initial state
+    mobileClosed = isJsEnabled && !expanded && !mobile.disabled;
+  });
+
+  // Toggle mobile navigation
+  function toggleSideNavigation(event: Event) {
+    event.preventDefault();
+    expanded = !expanded;
+    // Update mobileClosed when expanded changes
+    mobileClosed = isJsEnabled && !expanded && !mobile.disabled;
+  }
+</script>
+
+{#if !mobile.disabled}
+  <button
+    class="dwp-side-navigation__button"
+    data-module="dwp-side-navigation"
+    data-target="dwp-side-navigation-panel"
+    aria-expanded={expanded}
+    onclick={toggleSideNavigation}
+  >
+    <span class="dwp-side-navigation__section-toggle-focus">
+      <span
+        class="dwp-side-navigation__chevron {expanded
+          ? 'dwp-side-navigation__chevron--down'
+          : ''}"
+      ></span>
+      <span class="dwp-side-navigation__section-toggle-text">
+        {expanded ? mobile.hideButtonText : mobile.showButtonText}
+      </span>
+    </span>
+  </button>
+{/if}
+
+<nav
+  class="dwp-side-navigation {mobileClosed
+    ? 'dwp-side-navigation--mobile'
+    : ''}"
+  aria-label={ariaLabel}
+>
+  <ul class="dwp-side-navigation__list">
+    {#each items as item}
+      {@const currentSection = item.href && item.href === selectedItem}
+      {@const selected = selectedSubItem || selectedItem}
+      <li
+        class="dwp-side-navigation__item{currentSection
+          ? ' dwp-side-navigation__item--selected'
+          : ''}"
+      >
+        <a
+          id={item.id}
+          href={item.href}
+          class="dwp-side-navigation__link{selected === item.href
+            ? ' dwp-side-navigation__link--selected'
+            : ''}"
+          aria-current={selected === item.href ? "true" : undefined}
+        >
+          {item.text}
+        </a>
+        {#if currentSection && item.subItems && item.subItems.length > 0}
+          <ul
+            class="dwp-side-navigation__list dwp-side-navigation__list--sub-item"
+          >
+            {#each item.subItems as subItem}
+              <li class="dwp-side-navigation__sub-item">
+                <a
+                  id={subItem.id}
+                  href={subItem.href}
+                  class="dwp-side-navigation__link{selected === subItem.href
+                    ? ' dwp-side-navigation__link--selected'
+                    : ''}"
+                  aria-current={selected === subItem.href ? "true" : undefined}
+                >
+                  {subItem.text}
+                </a>
+              </li>
+            {/each}
+          </ul>
+        {/if}
+      </li>
+    {/each}
+  </ul>
+</nav>
+
+<style>
+  .dwp-side-navigation {
+    margin-bottom: var(--govuk-spacing-2, 10px);
+  }
+
+  @media (max-width: 767px) {
+    .dwp-side-navigation {
+      max-width: 220px;
+    }
+  }
+
+  .dwp-side-navigation__button {
+    display: none;
+    font-size: 19px;
+    line-height: 1.25;
+    margin-bottom: var(--govuk-spacing-2, 10px);
+    padding: var(--govuk-spacing-1, 5px) 2px var(--govuk-spacing-1, 5px) 0;
+    border-width: 0;
+    color: var(--govuk-link-colour, #1d70b8);
+    background: none;
+    cursor: pointer;
+    -webkit-appearance: none;
+  }
+
+  @media (max-width: 767px) {
+    .dwp-side-navigation__button {
+      padding: var(--govuk-spacing-2, 10px) var(--govuk-spacing-2, 10px)
+        var(--govuk-spacing-2, 10px) 0;
+    }
+  }
+
+  .dwp-side-navigation__button:hover {
+    color: #0b0c0c;
+    background: #f3f2f1;
+  }
+
+  .dwp-side-navigation__button:hover .dwp-side-navigation__chevron {
+    color: #0b0c0c;
+    background: #0b0c0c;
+  }
+
+  .dwp-side-navigation__button:hover .dwp-side-navigation__chevron::after {
+    color: #f3f2f1;
+  }
+
+  .dwp-side-navigation__button:focus {
+    outline: 3px solid transparent;
+    color: #0b0c0c;
+    background-color: #ffdd00;
+    box-shadow:
+      0 -2px #ffdd00,
+      0 4px #0b0c0c;
+    text-decoration: none;
+  }
+
+  .dwp-side-navigation__button:focus .dwp-side-navigation__chevron {
+    color: #0b0c0c;
+    background: #0b0c0c;
+  }
+
+  .dwp-side-navigation__button:focus .dwp-side-navigation__chevron::after {
+    color: #ffdd00;
+  }
+
+  .dwp-side-navigation__section-toggle-text {
+    margin-left: var(--govuk-spacing-2, 10px);
+    vertical-align: middle;
+  }
+
+  .dwp-side-navigation__chevron {
+    box-sizing: border-box;
+    display: inline-block;
+    position: relative;
+    width: 20px;
+    height: 20px;
+    border: 1px solid;
+    border-radius: 50%;
+    vertical-align: middle;
+  }
+
+  .dwp-side-navigation__chevron--down {
+    transform: rotate(180deg);
+  }
+
+  .dwp-side-navigation__chevron::after {
+    content: "";
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    bottom: 5px;
+    left: 6px;
+    width: 6px;
+    height: 6px;
+    transform: rotate(-45deg);
+    border-top: 2px solid;
+    border-right: 2px solid;
+  }
+
+  .dwp-side-navigation__list {
+    font-size: 19px;
+    line-height: 1.25;
+    margin-top: 0;
+    margin-bottom: 30px;
+    padding-left: 0;
+    list-style-type: none;
+  }
+
+  .dwp-side-navigation__list > li {
+    margin-bottom: var(--govuk-spacing-1, 5px);
+  }
+
+  .dwp-side-navigation__list--sub-item {
+    margin-top: var(--govuk-spacing-1, 5px);
+  }
+
+  .dwp-side-navigation__item {
+    box-sizing: border-box;
+    padding: var(--govuk-spacing-1, 5px) 0 0;
+  }
+
+  @media (max-width: 767px) {
+    .dwp-side-navigation__item {
+      padding: 0;
+    }
+  }
+
+  .dwp-side-navigation__item--selected {
+    margin: var(--govuk-spacing-2, 10px) 0 var(--govuk-spacing-1, 5px) -14px;
+    padding: var(--govuk-spacing-1, 5px) 0 var(--govuk-spacing-1, 5px)
+      var(--govuk-spacing-2, 10px);
+    border-left: 4px solid var(--govuk-link-colour, #1d70b8);
+    background-color: #f3f2f1;
+  }
+
+  @media (max-width: 767px) {
+    .dwp-side-navigation__item--selected {
+      margin-left: 0;
+      padding: 0 0 0 var(--govuk-spacing-2, 10px);
+    }
+  }
+
+  .dwp-side-navigation__item :last-child {
+    margin-bottom: 0;
+  }
+
+  .dwp-side-navigation__link {
+    font-size: 16px;
+    text-decoration: none;
+    color: var(--govuk-link-colour, #1d70b8);
+  }
+
+  .dwp-side-navigation__link:hover {
+    color: #003078;
+    text-decoration: underline;
+  }
+
+  .dwp-side-navigation__link:focus {
+    outline: 3px solid transparent;
+    color: #0b0c0c;
+    background-color: #ffdd00;
+    box-shadow:
+      0 -2px #ffdd00,
+      0 4px #0b0c0c;
+    text-decoration: none;
+  }
+
+  @media (max-width: 767px) {
+    .dwp-side-navigation__link {
+      display: inline-block;
+      padding: calc(var(--govuk-spacing-2, 10px) - 1px) 0;
+    }
+  }
+
+  .dwp-side-navigation__link--selected {
+    font-weight: bold;
+  }
+
+  .dwp-side-navigation__sub-item {
+    box-sizing: border-box;
+    padding: var(--govuk-spacing-1, 5px) 0 0;
+  }
+
+  @media (max-width: 767px) {
+    .dwp-side-navigation__sub-item {
+      padding: 0;
+    }
+  }
+
+  .dwp-side-navigation__sub-item::before {
+    content: "—";
+    color: #505a5f;
+    font-size: 16px;
+    font-weight: 700;
+  }
+
+  .dwp-side-navigation__sub-item:last-child {
+    padding-bottom: var(--govuk-spacing-1, 5px);
+  }
+
+  /* JavaScript enabled styles */
+  :global(.js-enabled) .dwp-side-navigation__button {
+    display: none;
+  }
+
+  @media (max-width: 767px) {
+    :global(.js-enabled) .dwp-side-navigation__button {
+      display: block;
+    }
+    :global(.js-enabled) .dwp-side-navigation--mobile {
+      display: none;
+    }
+  }
+</style>

package/dist/components/layout/SideNavigation.svelte.d.ts

@@ -0,0 +1,25 @@
+export type NavSubItem = {
+    id?: string;
+    text: string;
+    href: string;
+};
+export type NavItem = {
+    id?: string;
+    text: string;
+    href: string;
+    subItems?: NavSubItem[];
+};
+type $$ComponentProps = {
+    items: NavItem[];
+    ariaLabel?: string;
+    selectedItem?: string;
+    selectedSubItem?: string;
+    mobile?: {
+        disabled?: boolean;
+        showButtonText?: string;
+        hideButtonText?: string;
+    };
+};
+declare const SideNavigation: import("svelte").Component<$$ComponentProps, {}, "selectedItem" | "selectedSubItem">;
+type SideNavigation = ReturnType<typeof SideNavigation>;
+export default SideNavigation;

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

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  // Define navigation item type
+  export type NavigationItem = {
+    text: string;
+    href: string;
+  };
+
+  // Component props
+  let {
+    serviceName = "Service Name",
+    homeHref = "/",
+    navigationItems = [] as NavigationItem[],
+    activeItemHref = $bindable(""), // Used to highlight the active top-level nav item
+    isMobileNavOpen = $bindable(false), // Bound from parent, for toggling mobile nav
+    onToggle = () => {},
+  }: {
+    serviceName?: string;
+    homeHref?: string;
+    navigationItems?: NavigationItem[];
+    activeItemHref?: string;
+    isMobileNavOpen?: boolean;
+    onToggle?: () => void;
+  } = $props();
+</script>
+
+<nav class="govuk-service-navigation" aria-label="main">
+  <div class="govuk-width-container">
+    <div class="govuk-service-navigation__container">
+      <span class="govuk-service-navigation__service-name">
+        <a href={homeHref} class="govuk-service-navigation__link">
+          {serviceName}
+        </a>
+      </span>
+
+      <!-- Desktop navigation -->
+      <ul class="govuk-service-navigation__list">
+        {#each navigationItems as item}
+          {@const isCurrent = item.href === activeItemHref}
+          <li
+            class="govuk-service-navigation__item {isCurrent
+              ? 'govuk-service-navigation__item--active'
+              : ''}"
+          >
+            <a
+              class="govuk-service-navigation__link"
+              href={item.href}
+              data-topnav={item.text}
+              aria-current={isCurrent ? "page" : undefined}
+            >
+              {item.text}
+            </a>
+          </li>
+        {/each}
+      </ul>
+
+      <!-- Mobile menu button -->
+      <button
+        type="button"
+        class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle"
+        aria-controls="app-mobile-nav"
+        aria-expanded={isMobileNavOpen}
+        onclick={onToggle}
+      >
+        Menu
+      </button>
+    </div>
+  </div>
+</nav>
+
+<style>
+  /* Only add styles that are not covered by the govuk CSS */
+  @media (min-width: 40.0625em) {
+    .govuk-service-navigation__toggle {
+      display: none;
+    }
+  }
+
+  @media (max-width: 40.0525em) {
+    .govuk-service-navigation__list {
+      display: none;
+    }
+
+    .govuk-service-navigation__toggle {
+      padding: 5px 10px;
+      background-color: #ffdd00;
+      margin-bottom: 5px;
+    }
+  }
+</style>

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

@@ -0,0 +1,15 @@
+export type NavigationItem = {
+    text: string;
+    href: string;
+};
+type $$ComponentProps = {
+    serviceName?: string;
+    homeHref?: string;
+    navigationItems?: NavigationItem[];
+    activeItemHref?: string;
+    isMobileNavOpen?: boolean;
+    onToggle?: () => void;
+};
+declare const HeaderNav: import("svelte").Component<$$ComponentProps, {}, "activeItemHref" | "isMobileNavOpen">;
+type HeaderNav = ReturnType<typeof HeaderNav>;
+export default HeaderNav;