@communitiesuk/svelte-component-library 0.1.17

package/dist/components/data-vis/table/Table.svelte

@@ -0,0 +1,247 @@
+<script>
+  import Button from "../../ui/Button.svelte";
+
+  let {
+    componentNameProp = undefined,
+    data = undefined,
+    metaData = undefined,
+    caption = undefined,
+    colourScale = undefined,
+  } = $props();
+
+  let localCopyOfData = $state([...data]);
+
+  function hasUniqueValues(array, key) {
+    const seen = new Set();
+    for (const obj of array) {
+      if (seen.has(obj[key])) {
+        return false; // Duplicate found
+      }
+      seen.add(obj[key]);
+    }
+    return true; // All values are unique
+  }
+
+  // $inspect(
+  //   localCopyOfData[0].areaName,
+  //   "data type is",
+  //   typeof localCopyOfData[0].areaName,
+  // );
+  // $inspect(
+  //   localCopyOfData[0]["Household waste recycling rate"],
+  //   "data type is",
+  //   typeof localCopyOfData[0]["Household waste recycling rate"],
+  // );
+
+  let columns = [];
+
+  for (const column in localCopyOfData[0]) {
+    // create a variable to store whether the key is unique or not
+    const keyIsUnique = hasUniqueValues(localCopyOfData, column);
+    // get data type of each column
+    const columnDataType = typeof localCopyOfData[0][column];
+    // for each one create an object and push it into the array
+    const columnObject = {
+      key: column,
+      isUnique: keyIsUnique,
+      dataType: columnDataType,
+    };
+    columns.push(columnObject);
+  }
+
+  $inspect("columns array is ", columns);
+
+  const metrics = columns
+    .filter((column) => column.dataType === "number")
+    .map((column) => column.key);
+
+  // $inspect("metrics is", metrics);
+
+  let sortState = $state({ column: "sortedColumn", order: "ascending" });
+
+  function updateSortState(columnToSort, sortOrder) {
+    sortState.column = columnToSort;
+    sortState.order = sortOrder;
+  }
+
+  function sortFunction() {
+    if (typeof localCopyOfData[0][sortState["column"]] === "number") {
+      if (sortState.order === "ascending") {
+        localCopyOfData.sort(
+          (a, b) => a[sortState.column] - b[sortState.column],
+        );
+      } else {
+        localCopyOfData.sort(
+          (a, b) => b[sortState.column] - a[sortState.column],
+        );
+      }
+    }
+    if (typeof localCopyOfData[0][sortState["column"]] === "string") {
+      if (sortState.order === "ascending") {
+        localCopyOfData.sort((a, b) =>
+          a[sortState["column"]].localeCompare(b[sortState["column"]]),
+        );
+      } else {
+        localCopyOfData.sort((a, b) =>
+          b[sortState["column"]].localeCompare(a[sortState["column"]]),
+        );
+      }
+    }
+  }
+
+  $inspect(
+    sortState,
+    localCopyOfData[0],
+    typeof localCopyOfData[0][sortState["column"]],
+  );
+
+  // heat map
+
+  // calculate the min and max of each metric
+  const minAndMaxValues = {}; // create an empty object to store them in
+  for (const metric of metrics) {
+    // get the values
+    const metricValues = localCopyOfData.map((item) => item[metric]);
+    const min = Math.min(...metricValues);
+    const max = Math.max(...metricValues);
+    // store them
+    minAndMaxValues[metric] = { min, max };
+  }
+
+  localCopyOfData = localCopyOfData.map((row) => {
+    const rowWithNorms = { ...row };
+
+    for (const metric of metrics) {
+      const { min, max } = minAndMaxValues[metric];
+      const value = row[metric];
+      const normalisedValue = (value - min) / (max - min);
+
+      rowWithNorms[`${metric}__normalised`] = normalisedValue;
+    }
+
+    return rowWithNorms;
+  });
+
+  function normToColor(norm) {
+    const hue = 120 * norm;
+    return `hsl(${hue}, 100%, 80%)`;
+  }
+
+  function normToColorReverse(norm) {
+    const hue = 120 * (1 - norm);
+    return `hsl(${hue}, 100%, 80%)`;
+  }
+
+  const colorKey = Object.entries({ Good: 1, Ok: 0.5, Bad: 0 });
+
+  // $inspect("the first column key is", columns[0].key);
+</script>
+
+<div class="p-4">
+  {#if colourScale === "On"}
+    <div class="legend">
+      <div>Colour key:</div>
+      {#each colorKey as key}
+        <div class="color-keys" style="background-color: {normToColor(key[1])}">
+          {key[0]}
+        </div>
+      {/each}
+    </div>
+  {/if}
+
+  <div class="table-container">
+    <table class="govuk-table" data-module="moj-sortable-table">
+      <caption class="govuk-table__caption">{caption}</caption>
+      <thead class="govuk-table__head"
+        ><tr class="govuk-table__row">
+          {#each columns as column}
+            <th
+              scope="col"
+              class={`govuk-table__header ${column.dataType === "number" ? "govuk-table__header--numeric" : ""}`}
+              title={metaData[column.key].explainer}
+              aria-sort="none"
+            >
+              <div class="header">
+                <Button
+                  textContent={metaData[column.key].shortLabel}
+                  buttonType={"table header"}
+                  onClickFunction={() => {
+                    const newDirection =
+                      sortState.column === column.key &&
+                      sortState.order === "ascending"
+                        ? "descending"
+                        : "ascending";
+
+                    updateSortState(column.key, newDirection);
+                    sortFunction();
+                  }}
+                ></Button>
+              </div></th
+            >
+          {/each}
+        </tr></thead
+      >
+      <tbody class="govuk-table__body">
+        {#each localCopyOfData as row}
+          <tr class="govuk-table__row">
+            {#each columns as column}
+              {#if column.dataType === "number"}
+                {#if colourScale === "On"}
+                  {#if metaData[column.key].direction === "Higher is better"}
+                    <td
+                      class="govuk-table__cell govuk-table__cell--numeric"
+                      style="background-color: {normToColor(
+                        row[column.key + '__normalised'],
+                      )}"
+                      data-sort-value="42">{row[column.key]}</td
+                    >
+                  {:else}
+                    <td
+                      class="govuk-table__cell govuk-table__cell--numeric"
+                      style="background-color: {normToColorReverse(
+                        row[column.key + '__normalised'],
+                      )}"
+                      data-sort-value="42">{row[column.key]}</td
+                    >
+                  {/if}
+                {:else}
+                  <td
+                    class="govuk-table__cell govuk-table__cell--numeric"
+                    data-sort-value="42">{row[column.key]}</td
+                  >
+                {/if}
+              {:else}
+                <td class="govuk-table__cell">{row[column.key]}</td>
+              {/if}
+            {/each}
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<style>
+  .table-container {
+    max-height: 80vh;
+    overflow-y: auto;
+  }
+
+  th {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background-color: white;
+  }
+
+  .legend {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    margin: 10px;
+  }
+  .color-keys {
+    border-radius: 10%;
+    padding: 6px;
+  }
+</style>

package/dist/components/data-vis/table/Table.svelte.d.ts

@@ -0,0 +1,19 @@
+export default Table;
+type Table = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Table: import("svelte").Component<{
+    componentNameProp?: any;
+    data?: any;
+    metaData?: any;
+    caption?: any;
+    colourScale?: any;
+}, {}, "">;
+type $$ComponentProps = {
+    componentNameProp?: any;
+    data?: any;
+    metaData?: any;
+    caption?: any;
+    colourScale?: any;
+};

package/dist/components/layout/Breadcrumbs.svelte

@@ -0,0 +1,191 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { page } from "$app/state";
+
+  /**
+   * 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);
+    }
+  });
+
+  // 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/layout/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/layout/Footer.svelte

@@ -0,0 +1,171 @@
+<script lang="ts">
+  // Define component props with default values
+  // sections: array of footer navigation sections
+  // inlineLinks: array of inline footer links
+  // metaCustomContent: custom HTML content for meta section
+  // containerWidth: width class for the container
+  // showLicence: toggle for OGL license display
+  // showCopyright: toggle for crown copyright display
+  // copyrightLogoUrl: URL for the crown copyright logo background image (overrides the default CSS background-image)
+  // copyrightText: Text to display for the crown copyright notice
+  // crownSvgPath: SVG path data for the crown logo used in the license section
+  // licenceHref: URL for the Open Government Licence link
+  // licenceLinkText: Text for the Open Government Licence link
+  // licenceTextBefore: Text to display before the licence link
+  // licenceTextAfter: Text to display after the licence link
+  // copyrightHref: URL for the crown copyright link
+
+  // Define types for component props
+  interface FooterItem {
+    href: string;
+    label: string;
+    lang?: string;
+    hrefLang?: string;
+  }
+
+  interface FooterSection {
+    title: string;
+    columns?: number;
+    items: FooterItem[];
+  }
+
+  // Define component props with types and default values
+  let {
+    sections = [] as FooterSection[],
+    inlineLinks = [] as FooterItem[],
+    metaCustomContent = "",
+    containerWidth = "govuk-width-container",
+    showLicence = true,
+    showCopyright = true,
+    copyrightLogoUrl = "/assets/images/govuk-crest.svg",
+    copyrightText = "© Crown copyright",
+    crownSvgPath = "M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145",
+    licenceHref = "https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/",
+    licenceLinkText = "Open Government Licence v3.0",
+    licenceTextBefore = "All content is available under the ",
+    licenceTextAfter = ", except where otherwise stated",
+    copyrightHref = "https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/",
+  } = $props<{
+    sections?: FooterSection[];
+    inlineLinks?: FooterItem[];
+    metaCustomContent?: string;
+    containerWidth?: string;
+    showLicence?: boolean;
+    showCopyright?: boolean;
+    copyrightLogoUrl?: string;
+    copyrightText?: string;
+    crownSvgPath?: string;
+    licenceHref?: string;
+    licenceLinkText?: string;
+    licenceTextBefore?: string;
+    licenceTextAfter?: string;
+    copyrightHref?: string;
+  }>();
+</script>
+
+<!-- Main footer container -->
+<footer class="govuk-footer">
+  <div class={containerWidth}>
+    <!-- Navigation sections (optional) -->
+    {#if sections.length > 0}
+      <div class="govuk-footer__navigation">
+        <!-- Iterate through each footer section -->
+        {#each sections as section}
+          <div
+            class="govuk-footer__section {section.columns === 2
+              ? 'govuk-grid-column-two-thirds'
+              : 'govuk-grid-column-one-third'}"
+          >
+            <h2 class="govuk-footer__heading govuk-heading-m">
+              {section.title}
+            </h2>
+            <ul
+              class="govuk-footer__list {section.columns === 2
+                ? 'govuk-footer__list--columns-2'
+                : ''}"
+            >
+              {#each section.items as item}
+                <li class="govuk-footer__list-item">
+                  <a
+                    class="govuk-footer__link"
+                    href={item.href}
+                    lang={item.lang}
+                    hreflang={item.hrefLang}
+                  >
+                    {item.label}
+                  </a>
+                </li>
+              {/each}
+            </ul>
+          </div>
+        {/each}
+      </div>
+      <hr class="govuk-footer__section-break" />
+    {/if}
+
+    <!-- Footer meta section -->
+    <div class="govuk-footer__meta">
+      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
+        <!-- Inline links section (optional) -->
+        {#if inlineLinks.length > 0}
+          <h2 class="govuk-visually-hidden">Support links</h2>
+          <ul class="govuk-footer__inline-list">
+            {#each inlineLinks as link}
+              <li class="govuk-footer__inline-list-item">
+                <a
+                  class="govuk-footer__link"
+                  href={link.href}
+                  lang={link.lang}
+                  hreflang={link.hrefLang}
+                >
+                  {link.label}
+                </a>
+              </li>
+            {/each}
+          </ul>
+        {/if}
+
+        <!-- Custom meta content (optional) -->
+        {#if metaCustomContent}
+          <div class="govuk-footer__meta-custom">
+            {@html metaCustomContent}
+          </div>
+        {/if}
+
+        <!-- Open Government License section (optional) -->
+        {#if showLicence}
+          <svg
+            aria-hidden="true"
+            focusable="false"
+            class="govuk-footer__licence-logo"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 483.2 195.7"
+            height="17"
+            width="41"
+          >
+            <path fill="currentColor" d={crownSvgPath}></path>
+          </svg>
+          <span class="govuk-footer__licence-description">
+            {licenceTextBefore}
+            <a class="govuk-footer__link" href={licenceHref} rel="license"
+              >{licenceLinkText}</a
+            >{licenceTextAfter}
+          </span>
+        {/if}
+      </div>
+
+      <!-- Crown copyright section (optional) -->
+      {#if showCopyright}
+        <div class="govuk-footer__meta-item">
+          <a
+            class="govuk-footer__link govuk-footer__copyright-logo"
+            href={copyrightHref}
+            style="background-image: url({copyrightLogoUrl});"
+          >
+            {copyrightText}
+          </a>
+        </div>
+      {/if}
+    </div>
+  </div>
+</footer>

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

@@ -0,0 +1,30 @@
+interface FooterItem {
+    href: string;
+    label: string;
+    lang?: string;
+    hrefLang?: string;
+}
+interface FooterSection {
+    title: string;
+    columns?: number;
+    items: FooterItem[];
+}
+type $$ComponentProps = {
+    sections?: FooterSection[];
+    inlineLinks?: FooterItem[];
+    metaCustomContent?: string;
+    containerWidth?: string;
+    showLicence?: boolean;
+    showCopyright?: boolean;
+    copyrightLogoUrl?: string;
+    copyrightText?: string;
+    crownSvgPath?: string;
+    licenceHref?: string;
+    licenceLinkText?: string;
+    licenceTextBefore?: string;
+    licenceTextAfter?: string;
+    copyrightHref?: string;
+};
+declare const Footer: import("svelte").Component<$$ComponentProps, {}, "">;
+type Footer = ReturnType<typeof Footer>;
+export default Footer;