@communitiesuk/svelte-component-library 0.1.17

package/dist/components/ui/Accordion.svelte

@@ -0,0 +1,244 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  import { onMount } from "svelte";
+  import { SvelteSet } from "svelte/reactivity";
+
+  let {
+    sections = [],
+    hideAllSections = "Hide all sections",
+    hideSection = "Hide",
+    hideSectionAriaLabel = "Hide this section",
+    showAllSections = "Show all sections",
+    showSection = "Show",
+    showSectionAriaLabel = "Show this section",
+    allSectionToggle = true,
+    minSectionsAllSectionToggle = 2,
+    rememberIsExpandedState = true,
+    headingLevel = "h4",
+  }: {
+    sections: {
+      heading: string;
+      summary?: string;
+      content: string | Snippet;
+      id: string;
+      expanded?: boolean;
+    }[];
+    hideAllSections?: string;
+    hideSection?: string;
+    hideSectionAriaLabel?: string;
+    showAllSections?: string;
+    showSection?: string;
+    showSectionAriaLabel?: string;
+    allSectionToggle?: boolean;
+    minSectionsAllSectionToggle?: number;
+    rememberIsExpandedState?: boolean;
+    headingLevel?: string;
+  } = $props();
+
+  //Attempt to ensure that ids are unique by attaching extra characters
+  let uniqueSections = $derived(
+    sections.map((section) => {
+      return {
+        ...section,
+        uniqueid:
+          section.id +
+          section.heading.slice(1, 3) +
+          (section?.summary?.slice(0, 2) ?? ""),
+      };
+    }),
+  );
+
+  let expandedSections = $derived(
+    new SvelteSet(
+      uniqueSections
+        .filter((section) => section.expanded)
+        .map((section) => section.uniqueid),
+    ),
+  );
+
+  let allExpanded = $derived(expandedSections.size === sections.length);
+
+  let ariaLiveValue: "polite" | "off" | "assertive" | null | undefined =
+    $state("polite");
+
+  // Event handlers
+
+  function toggleSection(uniqueid: string) {
+    if (expandedSections.has(uniqueid)) {
+      expandedSections.delete(uniqueid);
+    } else {
+      expandedSections.add(uniqueid);
+    }
+    //Announce the contents change when an accoridion section is expanded
+    ariaLiveValue = "polite";
+  }
+
+  function toggleAll() {
+    if (!allExpanded) {
+      uniqueSections.forEach((section) =>
+        expandedSections.add(section.uniqueid),
+      );
+    } else {
+      expandedSections.clear();
+    }
+    //Don't announce all of the changes when we open all sections - this gets noisy and the content isn't associated with the label
+    ariaLiveValue = "off";
+  }
+
+  // Only use session storage logic if rememberIsExpandedState is true
+  onMount(() => {
+    if (rememberIsExpandedState) {
+      uniqueSections.forEach((section) => {
+        // If the section is explicitly expanded, respect that.
+        // Otherwise, try to restore from session storage.
+        if (section.expanded) {
+          expandedSections.add(section.uniqueid);
+        } else {
+          const stored = sessionStorage.getItem(section.uniqueid);
+          if (stored === "true") {
+            expandedSections.add(section.uniqueid);
+          }
+        }
+      });
+    } else {
+      // If rememberIsExpandedState is false, just respect the initial `section.expanded` values
+      uniqueSections.forEach((section) => {
+        if (section.expanded) {
+          expandedSections.add(section.uniqueid);
+        }
+      });
+    }
+  });
+
+  // Effect to update sessionStorage when uniqueSections change
+  $effect(() => {
+    if (rememberIsExpandedState) {
+      uniqueSections.forEach((section) => {
+        sessionStorage.setItem(
+          section.uniqueid,
+          expandedSections.has(section.uniqueid).toString(),
+        );
+      });
+    }
+  });
+</script>
+
+<div
+  class="govuk-accordion"
+  data-module="govuk-accordion"
+  id="accordion-default"
+>
+  <div
+    class="govuk-accordion__controls"
+    hidden={!allSectionToggle ||
+      uniqueSections.length < minSectionsAllSectionToggle}
+  >
+    <button
+      type="button"
+      class="govuk-accordion__show-all"
+      aria-expanded={allExpanded}
+      onclick={toggleAll}
+    >
+      <span class="govuk-accordion__show-all-text">
+        {allExpanded ? hideAllSections : showAllSections}
+      </span>
+      <span
+        class="govuk-accordion-nav__chevron"
+        class:govuk-accordion-nav__chevron--down={!allExpanded}
+      ></span>
+    </button>
+  </div>
+
+  {#snippet headerContent(section, isExpanded)}
+    <button
+      type="button"
+      aria-controls="{section.uniqueid}-content"
+      id="{section.uniqueid}-button"
+      class="govuk-accordion__section-button"
+      aria-expanded={isExpanded}
+      onclick={() => toggleSection(section.uniqueid)}
+      aria-label="{section.heading}, {section.summary
+        ? section.summary + ','
+        : ''} {isExpanded ? hideSectionAriaLabel : showSectionAriaLabel}"
+    >
+      <span class="govuk-accordion__section-heading-text">
+        <span class="govuk-accordion__section-heading-text-focus"
+          >{section.heading}</span
+        >
+      </span>
+
+      {#if section.summary}
+        <span
+          class="govuk-visually-hidden govuk-accordion__section-heading-divider"
+          >,
+        </span>
+        <span class="govuk-accordion__section-summary govuk-body">
+          <span class="govuk-accordion__section-summary-focus"
+            >{section.summary}</span
+          >
+        </span>
+      {/if}
+
+      <span class="govuk-accordion__section-toggle" data-nosnippet>
+        <span class="govuk-accordion__section-toggle-focus">
+          <span
+            class="govuk-accordion-nav__chevron"
+            class:govuk-accordion-nav__chevron--down={!isExpanded}
+          ></span>
+          <span class="govuk-accordion__section-toggle-text">
+            {isExpanded ? hideSection : showSection}
+          </span>
+        </span>
+      </span>
+    </button>
+  {/snippet}
+
+  {#each uniqueSections as section}
+    {@const isExpanded = expandedSections.has(section.uniqueid)}
+    <div
+      class="govuk-accordion__section"
+      class:govuk-accordion__section--expanded={isExpanded}
+    >
+      <div class="govuk-accordion__section-header">
+        {#if headingLevel.toLowerCase() == "h2"}
+          <h2 class="govuk-accordion__section-heading">
+            {@render headerContent(section, isExpanded)}
+          </h2>
+        {:else if headingLevel.toLowerCase() == "h3"}
+          <h3 class="govuk-accordion__section-heading">
+            {@render headerContent(section, isExpanded)}
+          </h3>
+        {:else if headingLevel.toLowerCase() == "h4"}
+          <h4 class="govuk-accordion__section-heading">
+            {@render headerContent(section, isExpanded)}
+          </h4>
+        {:else if headingLevel.toLowerCase() == "h5"}
+          <h5 class="govuk-accordion__section-heading">
+            {@render headerContent(section, isExpanded)}
+          </h5>
+        {:else if headingLevel.toLowerCase() == "h6"}
+          <h6 class="govuk-accordion__section-heading">
+            {@render headerContent(section, isExpanded)}
+          </h6>
+        {/if}
+      </div>
+      <div
+        id="{section.uniqueid}-content"
+        class="govuk-accordion__section-content"
+        aria-live={ariaLiveValue}
+        hidden={!isExpanded}
+        role={uniqueSections.length < 6 ? "region" : ""}
+        aria-labelledby={uniqueSections.length < 6
+          ? section.uniqueid + "-button"
+          : ""}
+      >
+        {#if typeof section.content === "string"}
+          <p class="govuk-body">{section.content}</p>
+        {:else}
+          {@render section.content()}
+        {/if}
+      </div>
+    </div>
+  {/each}
+</div>

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

@@ -0,0 +1,23 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    sections: {
+        heading: string;
+        summary?: string;
+        content: string | Snippet;
+        id: string;
+        expanded?: boolean;
+    }[];
+    hideAllSections?: string;
+    hideSection?: string;
+    hideSectionAriaLabel?: string;
+    showAllSections?: string;
+    showSection?: string;
+    showSectionAriaLabel?: string;
+    allSectionToggle?: boolean;
+    minSectionsAllSectionToggle?: number;
+    rememberIsExpandedState?: boolean;
+    headingLevel?: string;
+};
+declare const Accordion: import("svelte").Component<$$ComponentProps, {}, "">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/components/ui/Breadcrumbs.svelte

@@ -0,0 +1,198 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { page } from "$app/stores";
+
+  /**
+   * Breadcrumbs component
+   *
+   * Use this component to display a navigation path to the current page.
+   *
+   * Features:
+   * - Automatically generates breadcrumbs based on the current route
+   * - Set `collapseOnMobile` to true to show only the first and last items on mobile devices
+   * - Set `inverse` to true to show white links on dark backgrounds (ensure contrast ratio of 4.5:1)
+   * - Optionally provide custom items array to override automatic breadcrumb generation
+   */
+
+  // Define the BreadcrumbItem type
+  export type BreadcrumbItem = {
+    text: string;
+    href: string;
+  };
+
+  // Component props
+  let {
+    items = undefined,
+    collapseOnMobile = false,
+    inverse = false,
+    ariaLabel = "Breadcrumb",
+  } = $props<{
+    items?: BreadcrumbItem[];
+    collapseOnMobile?: boolean;
+    inverse?: boolean;
+    ariaLabel?: string;
+  }>();
+
+  // Load all page modules for route detection
+  const routeModules = $state<Record<string, any>>({});
+
+  onMount(async () => {
+    try {
+      // Use Vite's glob import to get all page components
+      const modules = import.meta.glob("/src/routes/**/+page.svelte", {
+        eager: true,
+      });
+      Object.assign(routeModules, modules);
+    } catch (error) {
+      console.warn("Failed to load route modules:", error);
+    }
+  });
+
+  // Add support detection
+  let isSupported = $state(false);
+  onMount(() => {
+    isSupported =
+      document.body?.classList.contains("govuk-frontend-supported") ?? false;
+  });
+
+  // State variable to hold the current breadcrumb items
+  let breadcrumbItems = $state<BreadcrumbItem[]>([]);
+
+  // Effect to update breadcrumb items when dependencies change
+  $effect(() => {
+    breadcrumbItems = items || generateBreadcrumbItems($page, routeModules);
+  });
+
+  // Generate breadcrumb items from the current route
+  function generateBreadcrumbItems(page, modules): BreadcrumbItem[] {
+    const path = page.url.pathname;
+    const pathSegments = path.split("/").filter((segment) => segment !== "");
+
+    // Always include home page
+    const items: BreadcrumbItem[] = [{ text: "Home", href: "/" }];
+
+    // Build up paths for each breadcrumb
+    let currentPath = "";
+
+    for (let i = 0; i < pathSegments.length; i++) {
+      currentPath += `/${pathSegments[i]}`;
+
+      // Check if this path has a corresponding +page.svelte file
+      const isValidRoute = isPathValid(currentPath, modules);
+
+      // Add breadcrumb if it's a valid route or the current page
+      if (isValidRoute || i === pathSegments.length - 1) {
+        // Try to get custom title from module exports
+        const customTitle = getCustomTitle(currentPath, modules, page.data);
+
+        // Format text (convert slug to readable text)
+        const text = customTitle || formatBreadcrumbText(pathSegments[i]);
+
+        items.push({
+          text: text,
+          href: currentPath,
+        });
+      }
+    }
+
+    return items;
+  }
+
+  // Check if a path has a corresponding page component
+  function isPathValid(path: string, modules: Record<string, any>): boolean {
+    // For the root path
+    if (path === "/") return true;
+
+    // Normalize the path to check against module paths
+    const modulePath = `/src/routes${path}/+page.svelte`;
+    const dynamicModulePaths = Object.keys(modules).filter((m) => {
+      // Convert dynamic route patterns like [id] to regex pattern that matches :id or actual values
+      const pattern = m.replace(/\[([^\]]+)\]/g, "([^/]+)");
+      const regex = new RegExp(
+        `^${pattern.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}$`,
+      );
+      return regex.test(modulePath);
+    });
+
+    return dynamicModulePaths.length > 0;
+  }
+
+  // Try to get custom title from module exports
+  function getCustomTitle(
+    path: string,
+    modules: Record<string, any>,
+    pageData: any,
+  ): string | null {
+    const modulePath = `/src/routes${path}/+page.svelte`;
+
+    // Check for exact match first
+    if (modules[modulePath]) {
+      // Check if module exports pageTitle
+      if (modules[modulePath].pageTitle) {
+        return modules[modulePath].pageTitle;
+      }
+
+      // Check if module exports getPageTitle function
+      if (typeof modules[modulePath].getPageTitle === "function") {
+        return modules[modulePath].getPageTitle(pageData);
+      }
+    }
+
+    // Check for dynamic routes
+    const dynamicModulePath = Object.keys(modules).find((m) => {
+      const pattern = m.replace(/\[([^\]]+)\]/g, "([^/]+)");
+      const regex = new RegExp(
+        `^${pattern.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}$`,
+      );
+      return regex.test(modulePath);
+    });
+
+    if (dynamicModulePath && modules[dynamicModulePath]) {
+      if (modules[dynamicModulePath].pageTitle) {
+        return modules[dynamicModulePath].pageTitle;
+      }
+
+      if (typeof modules[dynamicModulePath].getPageTitle === "function") {
+        return modules[dynamicModulePath].getPageTitle(pageData);
+      }
+    }
+
+    return null;
+  }
+
+  /**
+   * Converts route segments to human-readable text
+   */
+  function formatBreadcrumbText(text: string): string {
+    // Handle special cases
+    if (text === "ui") return "UI Components";
+    if (text === "data-vis") return "Data Visualization";
+    if (text === "content") return "Content Components";
+    if (text === "layout") return "Layout Components";
+    if (text === "user-guide") return "User Guide";
+    if (text === "playground") return "Playground";
+    if (text === "components") return "Components";
+    if (text === "local-lib") return "Local Library";
+
+    // Default: capitalize and replace hyphens with spaces
+    return text
+      .split("-")
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(" ");
+  }
+</script>
+
+<nav
+  class="govuk-breadcrumbs
+    {collapseOnMobile ? 'govuk-breadcrumbs--collapse-on-mobile' : ''} 
+    {inverse ? 'govuk-breadcrumbs--inverse' : ''}"
+  aria-label={ariaLabel}
+>
+  <ol class="govuk-breadcrumbs__list">
+    {#each breadcrumbItems as item}
+      <li class="govuk-breadcrumbs__list-item">
+        <a class="govuk-breadcrumbs__link" href={item.href}>{item.text}</a>
+      </li>
+    {/each}
+  </ol>
+</nav>

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

@@ -0,0 +1,24 @@
+/**
+ * Breadcrumbs component
+ *
+ * Use this component to display a navigation path to the current page.
+ *
+ * Features:
+ * - Automatically generates breadcrumbs based on the current route
+ * - Set `collapseOnMobile` to true to show only the first and last items on mobile devices
+ * - Set `inverse` to true to show white links on dark backgrounds (ensure contrast ratio of 4.5:1)
+ * - Optionally provide custom items array to override automatic breadcrumb generation
+ */
+export type BreadcrumbItem = {
+    text: string;
+    href: string;
+};
+type $$ComponentProps = {
+    items?: BreadcrumbItem[];
+    collapseOnMobile?: boolean;
+    inverse?: boolean;
+    ariaLabel?: string;
+};
+declare const Breadcrumbs: import("svelte").Component<$$ComponentProps, {}, "">;
+type Breadcrumbs = ReturnType<typeof Breadcrumbs>;
+export default Breadcrumbs;

package/dist/components/ui/Button.svelte

@@ -0,0 +1,96 @@
+<script>
+  let {
+    textContent = undefined,
+    buttonType,
+    componentNameProp = undefined,
+    onClickFunction = undefined,
+  } = $props();
+
+  let buttonClass = $derived(
+    buttonType === "default"
+      ? "govuk-button"
+      : buttonType === "secondary"
+        ? "govuk-button govuk-button--secondary"
+        : buttonType === "warning"
+          ? "govuk-button govuk-button--warning"
+          : buttonType === "dark background"
+            ? "govuk-button govuk-button--inverse"
+            : undefined,
+  );
+</script>
+
+<div class="p-4">
+  {#if buttonType === "start"}
+    <a
+      href="#"
+      role="button"
+      draggable="false"
+      class="govuk-button govuk-button--start"
+      data-module="govuk-button"
+      onclick={onClickFunction}
+    >
+      {textContent}
+      <svg
+        class="govuk-button__start-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        width="17.5"
+        height="19"
+        viewBox="0 0 33 40"
+        aria-hidden="true"
+        focusable="false"
+      >
+        <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path>
+      </svg>
+    </a>
+  {:else if buttonType === "disabled"}
+    <button
+      type="submit"
+      disabled
+      aria-disabled="true"
+      class="govuk-button"
+      data-module="govuk-button"
+      onclick={onClickFunction}
+    >
+      {textContent}
+    </button>
+  {:else if buttonType === "table header"}
+    <button type="button" class="text-header" onclick={onClickFunction}>
+      {textContent}
+      <svg
+        width="22"
+        height="22"
+        focusable="false"
+        aria-hidden="true"
+        role="img"
+        viewBox="0 0 22 22"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M8.1875 9.5L10.9609 3.95703L13.7344 9.5H8.1875Z"
+          fill="currentColor"
+        ></path>
+        <path
+          d="M13.7344 12.0781L10.9609 17.6211L8.1875 12.0781H13.7344Z"
+          fill="currentColor"
+        ></path>
+      </svg>
+    </button>
+  {:else}
+    <button
+      type="submit"
+      class={buttonClass}
+      data-module="govuk-button"
+      onclick={onClickFunction}
+    >
+      {textContent}
+    </button>
+  {/if}
+</div>
+
+<style>
+  .text-header {
+    display: flex;
+    color: #005ea5;
+  }
+</style>

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

@@ -0,0 +1,17 @@
+export default Button;
+type Button = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Button: import("svelte").Component<{
+    textContent?: any;
+    buttonType: any;
+    componentNameProp?: any;
+    onClickFunction?: any;
+}, {}, "">;
+type $$ComponentProps = {
+    textContent?: any;
+    buttonType: any;
+    componentNameProp?: any;
+    onClickFunction?: any;
+};