@communitiesuk/svelte-component-library 0.1.17

package/dist/components/ui/Select.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+  import { clsx as cx } from "clsx";
+
+  type SelectItem = {
+    value: string | number;
+    text: string;
+    disabled?: boolean;
+  };
+
+  let {
+    // Core attributes
+    id,
+    name,
+    items,
+    value = $bindable<string | number | undefined>(), // Use bindable value
+
+    // Label and hints
+    label,
+    labelIsPageHeading = false,
+    hint = undefined,
+
+    // Error handling
+    error = undefined, // serverside error message
+    validate = undefined, // Client-side validation function
+
+    // Styling and layout
+    formGroupClasses = "", // Additional classes for the form group wrapper
+    fullWidth = false, // If true, applies full width style
+    describedBy = "", // Optional override for aria-describedby
+    ...attributes // Allow passing additional HTML attributes to the select element
+  }: {
+    id: string;
+    name: string;
+    items: SelectItem[];
+    value?: string | number | undefined;
+    label: string;
+    labelIsPageHeading?: boolean;
+    hint?: string;
+    error?: string; // Changed back from serverErrorMessage
+    validate?: (value: string | number | undefined) => string | undefined;
+    formGroupClasses?: string;
+    fullWidth?: boolean;
+    describedBy?: string;
+  } & Omit<
+    import("svelte/elements").HTMLSelectAttributes,
+    "id" | "name" | "value" | "class" | "aria-describedby"
+  > = $props();
+
+  // Client-side validation result
+  let validationError = $derived(validate ? validate(value) : undefined);
+</script>
+
+<div
+  class={cx(
+    "govuk-form-group",
+    (validationError || error) && "govuk-form-group--error", // Check both validation and server error
+    formGroupClasses,
+  )}
+>
+  {#if labelIsPageHeading}
+    <h1 class="govuk-label-wrapper">
+      <label class="govuk-label govuk-label--l" for={id}>
+        {label}
+      </label>
+    </h1>
+  {:else}
+    <label class="govuk-label" for={id}>
+      {label}
+    </label>
+  {/if}
+
+  {#if hint}
+    <div id="{id}-hint" class="govuk-hint">
+      {hint}
+    </div>
+  {/if}
+
+  {#if validationError || error}
+    <!-- Check both validation and server error -->
+    <p id="{id}-error" class="govuk-error-message">
+      <span class="govuk-visually-hidden">Error:</span>
+      {validationError || error}
+      <!-- Display whichever error exists (client first) -->
+    </p>
+  {/if}
+
+  <select
+    class={cx(
+      "govuk-select",
+      (validationError || error) && "govuk-select--error", // Check both validation and server error
+      fullWidth && "govuk-!-width-full",
+    )}
+    {id}
+    {name}
+    bind:value
+    aria-describedby={// Recompute directly here based on new logic
+    describedBy ||
+      [
+        hint ? `${id}-hint` : null,
+        validationError || error ? `${id}-error` : null,
+      ]
+        .filter(Boolean)
+        .join(" ") ||
+      undefined}
+    {...attributes}
+  >
+    {#each items as item (item.value)}
+      <option value={item.value} disabled={item.disabled}>
+        {item.text}
+      </option>
+    {/each}
+  </select>
+</div>
+
+<style>
+</style>

package/dist/components/ui/Select.svelte.d.ts

@@ -0,0 +1,22 @@
+type SelectItem = {
+    value: string | number;
+    text: string;
+    disabled?: boolean;
+};
+type $$ComponentProps = {
+    id: string;
+    name: string;
+    items: SelectItem[];
+    value?: string | number | undefined;
+    label: string;
+    labelIsPageHeading?: boolean;
+    hint?: string;
+    error?: string;
+    validate?: (value: string | number | undefined) => string | undefined;
+    formGroupClasses?: string;
+    fullWidth?: boolean;
+    describedBy?: string;
+} & Omit<import("svelte/elements").HTMLSelectAttributes, "id" | "name" | "value" | "class" | "aria-describedby">;
+declare const Select: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/components/ui/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/ui/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/ui/SideNavigation.svelte

@@ -0,0 +1,346 @@
+<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}
+  role="navigation"
+>
+  <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/ui/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;