@communitiesuk/svelte-component-library 0.1.17

package/dist/components/ui/Tabs.svelte

@@ -0,0 +1,306 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { replaceState } from "$app/navigation";
+  import type { SvelteComponent, Snippet } from "svelte";
+  import DOMPurify from "dompurify";
+
+  // Define Tab type
+  export type TabItem = {
+    id: string;
+    label: string;
+    content: string | typeof SvelteComponent | Snippet;
+    contentIsHtml?: boolean;
+  };
+
+  // Component props
+  let {
+    title = "Contents",
+    tabs = [],
+    idPrefix = "tab",
+    selectedTabId = $bindable(),
+    autoAddHeadings = true,
+  } = $props<{
+    title?: string;
+    tabs: TabItem[];
+    idPrefix?: string;
+    selectedTabId?: string | null;
+    autoAddHeadings?: boolean;
+  }>();
+
+  // Component state variables
+  let isInitialized = $state(false);
+  let isSupported = $state(false);
+  let isMobile = $state(false);
+
+  // DOM element references for programmatic focus
+  let tabElements: { [key: string]: HTMLAnchorElement } = {};
+
+  // Track media query for responsive behavior
+  let tabletMql: MediaQueryList | null = null;
+
+  // Handle tab selection - integrate focus and hash logic directly
+  function selectTab(tabId: string, shouldFocus = false): void {
+    // Skip if component isn't ready, or tab is already selected
+    if (!isSupported || !isInitialized || selectedTabId === tabId) return;
+
+    // Update the core bindable state
+    selectedTabId = tabId;
+
+    // Handle optional focus
+    if (shouldFocus && tabElements[tabId]) {
+      // Use setTimeout to defer focus until after Svelte updates the DOM (e.g., tabindex)
+      setTimeout(() => {
+        const tabElement = tabElements[tabId];
+        tabElement?.focus(); // Optional chaining for safety
+      }, 0);
+    }
+
+    // Update URL hash on non-mobile views
+    if (!isMobile) {
+      // Use history.replaceState to update the displayed URL hash without causing scroll/navigation.
+      const currentUrl = window.location.href;
+      const hashIndex = currentUrl.indexOf("#");
+      const baseUrl =
+        hashIndex !== -1 ? currentUrl.slice(0, hashIndex) : currentUrl;
+      const newUrl = `${baseUrl}#${tabId}`;
+      replaceState(newUrl, {}); // Use SvelteKit's function
+    }
+  }
+
+  // Handle keyboard navigation
+  function handleKeydown(event: KeyboardEvent, currentIndex: number): void {
+    // Skip navigation on mobile or if component isn't ready
+    if (isMobile || !isSupported || !isInitialized) return;
+
+    // Initialize to null, indicating no valid navigation key pressed yet.
+    // Will be updated to a valid index (0+) if ArrowLeft/Right is pressed.
+    let newIndex: number | null = null;
+    const numTabs = tabs.length;
+    if (numTabs === 0) return; // Cannot navigate an empty list
+
+    // Define indices and conditions for readability
+    const isFirstTab = currentIndex === 0;
+    const isLastTab = currentIndex === numTabs - 1;
+    const previousIndex = currentIndex - 1;
+    const nextIndex = currentIndex + 1;
+    const firstIndex = 0;
+    const lastIndex = numTabs - 1;
+
+    if (event.key === "ArrowLeft" || event.key === "Left") {
+      event.preventDefault();
+      // If it's the first tab, wrap to last, otherwise go to previous.
+      newIndex = isFirstTab ? lastIndex : previousIndex;
+    } else if (event.key === "ArrowRight" || event.key === "Right") {
+      event.preventDefault();
+      // If it's the last tab, wrap to first, otherwise go to next.
+      newIndex = isLastTab ? firstIndex : nextIndex;
+    }
+
+    // If a navigation key was pressed (newIndex is not null) and the index is valid
+    if (newIndex !== null && tabs[newIndex]) {
+      const targetTabId = tabs[newIndex].id;
+      // Pass true to ensure focus shifts to the new tab
+      selectTab(targetTabId, true);
+    }
+  }
+
+  // Handle tab click
+  function handleTabClick(event: MouseEvent, tabId: string): void {
+    // On mobile or without JS support, let default browser behavior happen
+    if (isMobile || !isSupported) return;
+    event.preventDefault();
+    selectTab(tabId);
+  }
+
+  // Handle hash change
+  function handleHashChange(): void {
+    // Skip on mobile or when not properly initialized
+    if (isMobile || !isSupported || !isInitialized) return;
+
+    const hash = window.location.hash.substring(1);
+    if (hash && tabs.some((tab) => tab.id === hash)) {
+      // Only select if the hash corresponds to a *different* tab
+      if (selectedTabId !== hash) {
+        // Focus the tab when navigating via hash change
+        selectTab(hash, true);
+      }
+    }
+  }
+
+  // Initialize tabs on mount
+  onMount(() => {
+    isSupported =
+      document.body?.classList.contains("govuk-frontend-supported") ?? false;
+
+    // Check URL hash for deep linking AFTER initial prop value is set
+    const hash = window.location.hash.substring(1);
+    if (hash) {
+      const tabFromHash = tabs.find((tab) => tab.id === hash);
+      if (tabFromHash && tabFromHash.id !== selectedTabId) {
+        // Update state if hash points to a valid, different tab
+        // Use selectTab to handle focus and potential URL update if needed
+        selectTab(tabFromHash.id, true);
+      }
+    }
+
+    // If after hash check, no tab is selected AND we have tabs, select the first one.
+    // This handles the case where the initial prop value was null/invalid and no valid hash was present.
+    if (!selectedTabId && tabs.length > 0) {
+      selectedTabId = tabs[0].id;
+    }
+
+    // Setup responsive behavior
+    if (window) {
+      const breakpoint = getBreakpoint();
+      if (breakpoint) {
+        tabletMql = window.matchMedia(`(min-width: ${breakpoint})`);
+        isMobile = !tabletMql.matches;
+
+        if ("addEventListener" in tabletMql) {
+          tabletMql.addEventListener("change", handleMediaChange);
+        } else {
+          // @ts-ignore - Deprecated fallback
+          tabletMql.addListener(handleMediaChange);
+        }
+      }
+    }
+
+    // Listen for hash changes
+    window.addEventListener("hashchange", handleHashChange);
+
+    isInitialized = true;
+
+    // Cleanup
+    return () => {
+      if (tabletMql) {
+        if ("removeEventListener" in tabletMql) {
+          tabletMql.removeEventListener("change", handleMediaChange);
+        } else {
+          // @ts-ignore - Deprecated fallback
+          tabletMql.removeListener(handleMediaChange);
+        }
+      }
+      window.removeEventListener("hashchange", handleHashChange);
+
+      // Clear tab element references to prevent memory leaks
+      Object.keys(tabElements).forEach((key) => {
+        delete tabElements[key];
+      });
+    };
+  });
+
+  // Handle media query changes
+  function handleMediaChange(
+    event: MediaQueryListEvent | MediaQueryList,
+  ): void {
+    // Handle both modern and deprecated event/object types
+    isMobile = !event.matches;
+  }
+
+  // Get breakpoint from CSS custom property
+  function getBreakpoint(): string | null {
+    if (typeof window === "undefined") return null; // Guard for SSR
+    const property = `--govuk-frontend-breakpoint-tablet`;
+    const value = window
+      .getComputedStyle(document.documentElement)
+      .getPropertyValue(property);
+    return value ? value.trim() : null;
+  }
+
+  // Effect to ensure valid tab selection if tabs array changes externally
+  $effect(() => {
+    // Run this effect whenever isInitialized or tabs changes
+    // Check if the currently selected tab ID still exists in the updated tabs array
+    if (
+      isInitialized &&
+      selectedTabId && // Only run if a tab is actually selected
+      !tabs.some((tab) => tab.id === selectedTabId)
+    ) {
+      // If selected tab ID is no longer valid, default to the first available tab
+      console.log(
+        `Effect: selectedTabId '${selectedTabId}' no longer valid. Resetting.`,
+      ); // Optional Debug
+      selectedTabId = tabs[0]?.id ?? null; // Use optional chaining and nullish coalescing
+    }
+  });
+</script>
+
+<div class="govuk-tabs" data-module="govuk-tabs">
+  <h2 class="govuk-tabs__title">
+    {title}
+  </h2>
+
+  <ul
+    class="govuk-tabs__list"
+    role={isSupported && !isMobile ? "tablist" : null}
+  >
+    {#each tabs as tab, index}
+      {@const isSelected = selectedTabId === tab.id}
+      {#key tab.id}
+        <li
+          class="govuk-tabs__list-item"
+          class:govuk-tabs__list-item--selected={isSelected && !isMobile}
+          role={isSupported && !isMobile ? "presentation" : null}
+        >
+          <!-- svelte-ignore binding_property_non_reactive -->
+          <a
+            class="govuk-tabs__tab"
+            href={"#" + tab.id}
+            id={isSupported && !isMobile ? `${idPrefix}_${tab.id}` : null}
+            role={isSupported && !isMobile ? "tab" : null}
+            aria-controls={isSupported && !isMobile ? tab.id : null}
+            aria-selected={isSupported && !isMobile ? isSelected : null}
+            tabindex={isSupported && !isMobile ? (isSelected ? 0 : -1) : null}
+            onclick={(e) => handleTabClick(e, tab.id)}
+            onkeydown={(e) => handleKeydown(e, index)}
+            bind:this={tabElements[tab.id]}
+          >
+            {tab.label}
+          </a>
+        </li>
+      {/key}
+    {/each}
+  </ul>
+
+  {#each tabs as tab}
+    {@const isSelected = selectedTabId === tab.id}
+    <div
+      class="govuk-tabs__panel"
+      class:govuk-tabs__panel--hidden={!isSelected && isSupported && !isMobile}
+      id={tab.id}
+      role={isSupported && !isMobile ? "tabpanel" : null}
+      aria-labelledby={isSupported && !isMobile
+        ? `${idPrefix}_${tab.id}`
+        : null}
+      hidden={!isSelected && isSupported && !isMobile}
+    >
+      {#if autoAddHeadings}
+        <h2 class="govuk-heading-l">{tab.label}</h2>
+      {/if}
+
+      {#if typeof tab.content === "string"}
+        {#if tab.contentIsHtml}
+          {@html DOMPurify.sanitize(tab.content)}
+        {:else}
+          <p class="govuk-body">{tab.content}</p>
+        {/if}
+      {:else if tab.content satisfies Snippet}
+        {@render tab.content()}
+      {:else if tab.content}
+        <svelte:component this={tab.content} />
+      {/if}
+    </div>
+  {/each}
+</div>
+
+<style>
+  /* Override components.css tab panel style adding top margin to tab panels */
+  .govuk-tabs__panel[role="tabpanel"] {
+    margin-top: 0;
+  }
+
+  /* Ensure hidden panels are truly hidden */
+  .govuk-tabs__panel--hidden {
+    display: none;
+  }
+</style>

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

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+import type { Snippet } from "svelte";
+export type TabItem = {
+    id: string;
+    label: string;
+    content: string | typeof SvelteComponent | Snippet;
+    contentIsHtml?: boolean;
+};
+type $$ComponentProps = {
+    title?: string;
+    tabs: TabItem[];
+    idPrefix?: string;
+    selectedTabId?: string | null;
+    autoAddHeadings?: boolean;
+};
+declare const Tabs: import("svelte").Component<$$ComponentProps, {}, "selectedTabId">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/components/ui/WhatsNew.svelte

@@ -0,0 +1,155 @@
+<script lang="ts">
+  /**
+   * Represents a single news item in the What's New section
+   */
+  interface NewsItem {
+    /** The date of the news item (e.g., "June 2025") */
+    date: string;
+    /** The main content/description of the news item */
+    content: string;
+    /** Optional URL to release notes or more information */
+    releaseNotesUrl?: string;
+    /** Optional version number for releases (e.g., "v0.1.16") */
+    releaseVersion?: string;
+    /** Optional array of component links to display as a bulleted list */
+    componentLinks?: Array<{
+      /** Display text for the link */
+      text: string;
+      /** URL/href for the link */
+      href: string;
+    }>;
+  }
+
+  /**
+   * WhatsNew Component
+   *
+   * A flexible component for displaying news, updates, and release information.
+   * Commonly used on homepages or documentation sites to communicate recent changes,
+   * new features, or important announcements to users.
+   *
+   * @example
+   * ```svelte
+   * <!-- Basic usage with defaults -->
+   * <WhatsNew />
+   *
+   * <!-- Custom usage -->
+   * <WhatsNew
+   *   title="Latest Updates"
+   *   titleId="updates"
+   *   componentLinksIntroText="New components available:"
+   *   newsItems={[
+   *     {
+   *       date: "June 2025",
+   *       content: "Released new component library",
+   *       releaseNotesUrl: "https://github.com/example/releases/tag/v1.0.0",
+   *       releaseVersion: "v1.0.0",
+   *       componentLinks: [
+   *         { text: "Button component", href: "/components/button" }
+   *       ]
+   *     }
+   *   ]}
+   * />
+   * ```
+   */
+
+  // Define component props with types and default values
+  let {
+    /** The main heading text for the news section */
+    title = "What's new",
+    /** The HTML id attribute for the heading element (useful for anchor links) */
+    titleId = "whats-new",
+    /**
+     * Introductory text that appears before component links lists.
+     * Set to empty string to hide this text entirely.
+     */
+    componentLinksIntroText = "This the first step to refresh the GOV.UK brand. It includes updates to the:",
+    /**
+     * Array of news items to display. Each item can include:
+     * - date: When the news occurred
+     * - content: Main description
+     * - releaseNotesUrl & releaseVersion: For linking to release notes
+     * - componentLinks: For displaying related component links
+     */
+    newsItems = [
+      {
+        date: "15 May 2025",
+        content:
+          "We released GOV.UK Frontend v5.10.1 with the correct colour for the dot in the refreshed GOV.UK logo, as well as small fixes to the implementation of the brand refresh.",
+        releaseNotesUrl:
+          "https://github.com/alphagov/govuk-frontend/releases/tag/v5.10.1",
+        releaseVersion: "v5.10.1",
+      },
+      {
+        date: "1 May 2025",
+        content: "We released GOV.UK Frontend v5.10.0.",
+        releaseNotesUrl:
+          "https://github.com/alphagov/govuk-frontend/releases/tag/v5.10.0",
+        releaseVersion: "v5.10.0",
+        componentLinks: [
+          { text: "GOV.UK header component", href: "/components/header/" },
+          { text: "GOV.UK footer component", href: "/components/footer/" },
+          {
+            text: "Service navigation component",
+            href: "/components/service-navigation/",
+          },
+          {
+            text: "Cookie banner component",
+            href: "/components/cookie-banner/",
+          },
+        ],
+      },
+    ] as NewsItem[],
+  } = $props<{
+    title?: string;
+    titleId?: string;
+    componentLinksIntroText?: string;
+    newsItems?: NewsItem[];
+  }>();
+</script>
+
+<div class="app-whats-new">
+  <div class="govuk-width-container">
+    <div class="govuk-main-wrapper govuk-main-wrapper--l">
+      <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds-from-desktop">
+          <h2 id={titleId} class="govuk-heading-l">{title}</h2>
+
+          {#each newsItems as item, index}
+            <p class="govuk-body">
+              <strong>{item.date}:</strong>
+              {item.content}
+            </p>
+
+            {#if item.releaseNotesUrl && item.releaseVersion}
+              <p class="govuk-body">
+                Read the <a href={item.releaseNotesUrl} class="govuk-link"
+                  >release notes for {item.releaseVersion}</a
+                > to see what's changed.
+              </p>
+            {/if}
+
+            {#if item.componentLinks && item.componentLinks.length > 0}
+              <p class="govuk-body">
+                {componentLinksIntroText}
+              </p>
+              <ul class="govuk-list govuk-list--bullet">
+                {#each item.componentLinks as link}
+                  <li>
+                    <a href={link.href} class="govuk-link">{link.text}</a>
+                  </li>
+                {/each}
+              </ul>
+            {/if}
+          {/each}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .app-whats-new {
+    border-bottom: 1px solid #b1b4b6;
+    background-color: #f8f8f8;
+  }
+</style>

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

@@ -0,0 +1,29 @@
+/**
+ * Represents a single news item in the What's New section
+ */
+interface NewsItem {
+    /** The date of the news item (e.g., "June 2025") */
+    date: string;
+    /** The main content/description of the news item */
+    content: string;
+    /** Optional URL to release notes or more information */
+    releaseNotesUrl?: string;
+    /** Optional version number for releases (e.g., "v0.1.16") */
+    releaseVersion?: string;
+    /** Optional array of component links to display as a bulleted list */
+    componentLinks?: Array<{
+        /** Display text for the link */
+        text: string;
+        /** URL/href for the link */
+        href: string;
+    }>;
+}
+type $$ComponentProps = {
+    title?: string;
+    titleId?: string;
+    componentLinksIntroText?: string;
+    newsItems?: NewsItem[];
+};
+declare const WhatsNew: import("svelte").Component<$$ComponentProps, {}, "">;
+type WhatsNew = ReturnType<typeof WhatsNew>;
+export default WhatsNew;

package/dist/config.d.ts

@@ -0,0 +1,51 @@
+export const foldersLookup: {
+    ui: string;
+    "data-vis": string;
+};
+export const componentStatusProgressBackgroundColorLookup: {
+    "To be developed": string;
+    "In progress": string;
+    "Baseline completed": string;
+    "In use": string;
+};
+export const componentStausLookup: {};
+export namespace propPillLookup {
+    export namespace _true {
+        let size: string;
+        let text: string;
+        let textColor: string;
+        let bgColor: string;
+        let padding: string;
+    }
+    export { _true as true };
+    export namespace bindable {
+        let size_1: string;
+        export { size_1 as size };
+        let text_1: string;
+        export { text_1 as text };
+        let textColor_1: string;
+        export { textColor_1 as textColor };
+        let bgColor_1: string;
+        export { bgColor_1 as bgColor };
+        let padding_1: string;
+        export { padding_1 as padding };
+    }
+    export namespace _false {
+        let text_2: string;
+        export { text_2 as text };
+        let textColor_2: string;
+        export { textColor_2 as textColor };
+        let bgColor_2: string;
+        export { bgColor_2 as bgColor };
+        let padding_2: string;
+        export { padding_2 as padding };
+    }
+    export { _false as false };
+}
+export namespace defaultScreenWidthBreakpoints {
+    let xs: number;
+    let sm: number;
+    let md: number;
+    let lg: number;
+    let xl: number;
+}

package/dist/config.js

@@ -0,0 +1,44 @@
+export const foldersLookup = {
+  ui: "user interaction",
+  "data-vis": "data visualisation",
+};
+
+export const componentStatusProgressBackgroundColorLookup = {
+  "To be developed": "#b53c17",
+  "In progress": "#542059",
+  "Baseline completed": "#5C53A2",
+  "In use": "#136F63",
+};
+
+export const componentStausLookup = {};
+
+export const propPillLookup = {
+  true: {
+    size: "xs",
+    text: "{p}",
+    textColor: "white",
+    bgColor: "#ba029b",
+    padding: "0.4rem 0.32rem 0.5rem 0.3rem",
+  },
+  bindable: {
+    size: "xs",
+    text: "{b}",
+    textColor: "white",
+    bgColor: "#1B4079",
+    padding: "0.4rem 0.32rem 0.5rem 0.3rem",
+  },
+  false: {
+    text: "=>",
+    textColor: "white",
+    bgColor: "#00695c",
+    padding: "0.1rem 0.15rem",
+  },
+};
+
+export const defaultScreenWidthBreakpoints = {
+  xs: 420,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+};

package/dist/icons/DoubleChevronButton.svelte

@@ -0,0 +1,62 @@
+<script>
+  let { open = $bindable(), onClickFunction } = $props();
+</script>
+
+<button onclick={onClickFunction}>
+  <svg width="30" height="30">
+    {#each [8, 16] as xPos}
+      <g
+        transform="translate({xPos + (open ? 6 : 0)},15)rotate({open
+          ? 45
+          : -135})"
+      >
+        {#each [-5, 5] as cxcy}
+          <circle cx={cxcy} cy={cxcy}></circle>
+        {/each}
+        <path d="M -5 -5 l0 9.75 m0.25 0.25 l9.75 0"></path>
+        <rect transform="translate(-6, 4)" width="2" height="2" rx="4px"></rect>
+      </g>
+    {/each}
+  </svg>
+</button>
+
+<style>
+  svg {
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+
+  svg:hover {
+    border-radius: 3px;
+    background-color: #f3f3f3;
+  }
+
+  path {
+    stroke: #6b7280;
+    fill: none;
+    stroke-width: 2px;
+  }
+
+  svg:hover path {
+    stroke: #4b5563;
+  }
+
+  circle {
+    fill: #6b7280;
+    stroke: none;
+    r: 1;
+  }
+
+  svg:hover circle {
+    fill: #4b5563;
+  }
+
+  rect {
+    stroke: none;
+    fill: #6b7280;
+  }
+
+  svg:hover rect {
+    fill: #4b5563;
+  }
+</style>

package/dist/icons/DoubleChevronButton.svelte.d.ts

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