@communitiesuk/svelte-component-library 0.1.19-beta.3 → 0.1.19-beta.34

package/dist/components/data-vis/position-chart/PositionChartAxis.svelte

@@ -1,70 +1,81 @@
 <script>
-  let { markerRadius = undefined, barWidth = undefined } = $props();
+  let { textSize = "s", axisLabels = ["Left", "Right"] } = $props();
 </script>
 
-<div class="axis" style="--axis-padding:{markerRadius}px; width: {barWidth}">
-  <div class="more-deprived">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="11"
-      height="16"
-      viewBox="0 0 11 16"
-      fill="none"
-    >
-      <path
-        d="M0.292893 7.29289C-0.0976315 7.68342 -0.0976314 8.31658 0.292893 8.70711L6.65685 15.0711C7.04738 15.4616 7.68054 15.4616 8.07107 15.0711C8.46159 14.6805 8.46159 14.0474 8.07107 13.6569L2.41421 8L8.07107 2.34315C8.46159 1.95262 8.46159 1.31946 8.07107 0.928932C7.68054 0.538408 7.04738 0.538408 6.65685 0.928933L0.292893 7.29289ZM11 8L11 7L1 7L1 8L1 9L11 9L11 8Z"
-        fill="#B1B4B6"
-      ></path>
-    </svg>
-    <span style="font-family:GDS Transport">More deprived</span>
+<div class="axis govuk-body-{textSize}">
+  <div class="left-label">
+    <div class="arrow-container">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="18"
+        height="16"
+        viewBox="0 0 18 16"
+      >
+        <path
+          d="M8 1L1 8L8 15M1 8H17"
+          stroke="darkgrey"
+          stroke-width="2"
+          fill="none"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        ></path>
+      </svg>
+    </div>
+    <span class="axis-text">{axisLabels[0]}</span>
   </div>
-  <div class="less-deprived">
-    <span style="font-family:GDS Transport">Less deprived</span>
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="12"
-      height="16"
-      viewBox="0 0 12 16"
-      fill="none"
-    >
-      <path
-        d="M11.2071 8.70711C11.5976 8.31658 11.5976 7.68342 11.2071 7.2929L4.84315 0.928933C4.45262 0.538409 3.81946 0.538408 3.42893 0.928933C3.03841 1.31946 3.03841 1.95262 3.42893 2.34315L9.08579 8L3.42893 13.6569C3.03841 14.0474 3.03841 14.6805 3.42893 15.0711C3.81946 15.4616 4.45262 15.4616 4.84314 15.0711L11.2071 8.70711ZM0.5 8L0.5 9L10.5 9L10.5 8L10.5 7L0.5 7L0.5 8Z"
-        fill="#B1B4B6"
-      ></path>
-    </svg>
+  <div class="right-label">
+    <span class="axis-text">{axisLabels[1]}</span>
+    <div class="arrow-container">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="18"
+        height="16"
+        viewBox="0 0 18 16"
+      >
+        <path
+          d="M10 1L17 8L10 15M17 8H1"
+          stroke="darkgrey"
+          stroke-width="2"
+          fill="none"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        ></path>
+      </svg>
+    </div>
   </div>
 </div>
 
 <style>
+  svg {
+    overflow: visible;
+  }
+
   .axis {
     display: flex;
     justify-content: space-between;
-    align-items: center;
-    padding: 0 var(--axis-padding);
+    margin-bottom: 0;
   }
 
-  .less-deprived,
-  .more-deprived {
+  .left-label,
+  .right-label {
     display: flex;
-    align-items: center;
-    gap: 5px;
+    gap: 4px;
+    max-width: 120px;
   }
 
-  /* Tell the parent to act as a container */
-  .axis {
-    container-type: inline-size;
+  .right-label {
+    text-align: end;
   }
 
-  /* Container query: hide the child if parent's width is less than 400px */
-  @container (max-width: 18rem) {
-    .less-deprived {
-      display: none;
-    }
+  .axis-text {
+    font-family: "GDS Transport";
+    line-height: 0.9;
+    color: #666666;
+    font-style: italic;
   }
 
-  @container (max-width: 25rem) {
-    .average {
-      display: none;
-    }
+  .arrow-container {
+    display: flex;
+    align-items: center;
   }
 </style>

package/dist/components/data-vis/position-chart/PositionChartAxis.svelte.d.ts

@@ -4,10 +4,10 @@ type PositionChartAxis = {
     $set?(props: Partial<$$ComponentProps>): void;
 };
 declare const PositionChartAxis: import("svelte").Component<{
-    markerRadius?: any;
-    barWidth?: any;
+    textSize?: string;
+    axisLabels?: any[];
 }, {}, "">;
 type $$ComponentProps = {
-    markerRadius?: any;
-    barWidth?: any;
+    textSize?: string;
+    axisLabels?: any[];
 };

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

@@ -2,48 +2,63 @@
   import Button from "./../../ui/Button.svelte";
 
   let {
-    data = undefined,
-    metaData = undefined,
+    data = [],
+    metadata = {},
     caption = undefined,
     colourScale = undefined,
   } = $props();
 
-  let localCopyOfData = $derived([...data]);
+  let localCopyOfData = $state([...(data ?? [])]);
+
+  let sortState = $state({
+    column: null,
+    order: null, // "ascending" | "descending" | null
+  });
+
+  $effect(() => {
+    localCopyOfData = [...(data ?? [])];
+  });
 
   function hasUniqueValues(array, key) {
     const seen = new Set();
     for (const obj of array) {
       if (seen.has(obj[key])) {
-        return false; // Duplicate found
+        return false;
       }
       seen.add(obj[key]);
     }
-    return true; // All values are unique
+    return true;
   }
 
-  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);
-  }
+  let columns = $derived.by(() => {
+    if (!data || data.length === 0) return [];
+
+    const derivedColumns = [];
 
-  $inspect("columns array is ", columns);
+    for (const column in data[0]) {
+      const keyIsUnique = hasUniqueValues(data, column);
+      const columnDataType = typeof data[0][column];
+
+      derivedColumns.push({
+        key: column,
+        isUnique: keyIsUnique,
+        dataType: columnDataType,
+        id: metadata[column].order,
+      });
+    }
+
+    const orderedColumns = derivedColumns.sort((a, b) => a.id - b.id);
+
+    return orderedColumns;
+  });
 
-  const metrics = columns
-    .filter((column) => column.dataType === "number")
-    .map((column) => column.key);
+  $inspect(columns);
 
-  let sortState = $state({ column: "sortedColumn", order: "ascending" });
+  const metrics = $derived(
+    columns
+      .filter((column) => column.dataType === "number")
+      .map((column) => column.key),
+  );
 
   function updateSortState(columnToSort, sortOrder) {
     sortState.column = columnToSort;
@@ -51,61 +66,63 @@
   }
 
   function sortFunction() {
-    if (typeof localCopyOfData[0][sortState["column"]] === "number") {
+    if (!localCopyOfData.length || !sortState.column || !sortState.order)
+      return;
+
+    const sorted = [...localCopyOfData];
+
+    if (typeof sorted[0][sortState.column] === "number") {
       if (sortState.order === "ascending") {
-        localCopyOfData.sort(
-          (a, b) => a[sortState.column] - b[sortState.column],
-        );
+        sorted.sort((a, b) => a[sortState.column] - b[sortState.column]);
       } else {
-        localCopyOfData.sort(
-          (a, b) => b[sortState.column] - a[sortState.column],
-        );
+        sorted.sort((a, b) => b[sortState.column] - a[sortState.column]);
       }
     }
-    if (typeof localCopyOfData[0][sortState["column"]] === "string") {
+
+    if (typeof sorted[0][sortState.column] === "string") {
       if (sortState.order === "ascending") {
-        localCopyOfData.sort((a, b) =>
-          a[sortState["column"]].localeCompare(b[sortState["column"]]),
+        sorted.sort((a, b) =>
+          a[sortState.column].localeCompare(b[sortState.column]),
         );
       } else {
-        localCopyOfData.sort((a, b) =>
-          b[sortState["column"]].localeCompare(a[sortState["column"]]),
+        sorted.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 = sorted;
   }
 
-  localCopyOfData = localCopyOfData.map((row) => {
-    const rowWithNorms = { ...row };
+  const minAndMaxValues = $derived.by(() => {
+    const result = {};
 
     for (const metric of metrics) {
-      const { min, max } = minAndMaxValues[metric];
-      const value = row[metric];
-      const normalisedValue = (value - min) / (max - min);
+      const metricValues = localCopyOfData.map((item) => item[metric]);
+      const min = Math.min(...metricValues);
+      const max = Math.max(...metricValues);
 
-      rowWithNorms[`${metric}__normalised`] = normalisedValue;
+      result[metric] = { min, max };
     }
 
-    return rowWithNorms;
+    return result;
+  });
+
+  const displayRows = $derived.by(() => {
+    return localCopyOfData.map((row) => {
+      const rowWithNorms = { ...row };
+
+      for (const metric of metrics) {
+        const { min, max } = minAndMaxValues[metric];
+        const value = row[metric];
+
+        const normalisedValue = max === min ? 0.5 : (value - min) / (max - min);
+
+        rowWithNorms[`${metric}__normalised`] = normalisedValue;
+      }
+
+      return rowWithNorms;
+    });
   });
 
   function normToColor(norm) {
@@ -119,6 +136,27 @@
   }
 
   const colorKey = Object.entries({ Good: 1, Ok: 0.5, Bad: 0 });
+
+  function handleSort(columnKey) {
+    let newDirection = "ascending";
+
+    if (sortState.column === columnKey) {
+      if (sortState.order === "ascending") {
+        newDirection = "descending";
+      } else if (sortState.order === "descending") {
+        newDirection = null;
+      }
+    }
+
+    if (newDirection === null) {
+      updateSortState(null, null);
+      localCopyOfData = [...(data ?? [])];
+      return;
+    }
+
+    updateSortState(columnKey, newDirection);
+    sortFunction();
+  }
 </script>
 
 <div class="p-4">
@@ -126,7 +164,10 @@
     <div class="legend">
       <div>Colour key:</div>
       {#each colorKey as key}
-        <div class="color-keys" style="background-color: {normToColor(key[1])}">
+        <div
+          class="color-keys"
+          style={`background-color: ${normToColor(key[1])}`}
+        >
           {key[0]}
         </div>
       {/each}
@@ -135,62 +176,65 @@
 
   <div class="table-container">
     <div id="table-caption" class="sticky-caption">{caption}</div>
+
     <table class="govuk-table" data-module="moj-sortable-table">
-      <thead class="govuk-table__head"
-        ><tr class="govuk-table__row">
+      <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={sortState.column !== column.key
+              title={metadata[column.key]?.explainer}
+              style={metadata[column.key]?.width
+                ? `min-width: ${metadata[column.key].width}`
+                : undefined}
+              aria-sort={sortState.column !== column.key ||
+              sortState.order === null
                 ? "none"
-                : sortState.column === column.key &&
-                    sortState.order === "descending"
+                : sortState.order === "descending"
                   ? "descending"
                   : "ascending"}
             >
               <div class="header">
                 <Button
-                  textContent={metaData[column.key].shortLabel}
+                  textContent={metadata[column.key]?.shortLabel ?? column.key}
                   buttonType={"table header"}
-                  onClickFunction={() => {
-                    const newDirection =
-                      sortState.column === column.key &&
-                      sortState.order === "ascending"
-                        ? "descending"
-                        : "ascending";
-
-                    updateSortState(column.key, newDirection);
-                    sortFunction();
-                  }}
+                  direction={sortState.column === column.key
+                    ? sortState.order
+                    : null}
+                  onClickFunction={() => handleSort(column.key)}
                 ></Button>
-              </div></th
-            >
+              </div>
+            </th>
           {/each}
-        </tr></thead
-      >
+        </tr>
+      </thead>
+
       <tbody class="govuk-table__body">
-        {#each localCopyOfData as row}
+        {#each displayRows as row}
           <tr class="govuk-table__row">
             {#each columns as column}
               {#if column.dataType === "number"}
                 {#if colourScale === "On"}
                   <td
                     class="govuk-table__cell govuk-table__cell--numeric"
-                    style="background-color: {metaData[column.key].direction ===
-                    'Higher is better'
-                      ? normToColor(row[column.key + '__normalised'])
-                      : normToColorReverse(row[column.key + '__normalised'])}"
-                    >{row[column.key]}</td
+                    style={`background-color: ${
+                      metadata[column.key]?.direction === "Higher is better"
+                        ? normToColor(row[column.key + "__normalised"])
+                        : normToColorReverse(row[column.key + "__normalised"])
+                    }`}
                   >
+                    {@html row[column.key]}
+                  </td>
                 {:else}
-                  <td class="govuk-table__cell govuk-table__cell--numeric"
-                    >{row[column.key]}</td
-                  >
+                  <td class="govuk-table__cell govuk-table__cell--numeric">
+                    {@html row[column.key]}
+                  </td>
                 {/if}
               {:else}
-                <td class="govuk-table__cell">{row[column.key]}</td>
+                <td class="govuk-table__cell">
+                  {@html row[column.key]}
+                </td>
               {/if}
             {/each}
           </tr>
@@ -202,7 +246,7 @@
 
 <style>
   .table-container {
-    max-height: 85vh;
+    max-height: 60vh;
     overflow-y: auto;
     overflow-x: scroll;
     width: 100%;
@@ -228,8 +272,14 @@
     gap: 20px;
     margin: 10px;
   }
+
   .color-keys {
     border-radius: 10%;
     padding: 6px;
   }
+
+  .header {
+    display: flex;
+    align-items: center;
+  }
 </style>

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

@@ -4,14 +4,14 @@ type Table = {
     $set?(props: Partial<$$ComponentProps>): void;
 };
 declare const Table: import("svelte").Component<{
-    data?: any;
-    metaData?: any;
+    data?: any[];
+    metadata?: Record<string, any>;
     caption?: any;
     colourScale?: any;
 }, {}, "">;
 type $$ComponentProps = {
-    data?: any;
-    metaData?: any;
+    data?: any[];
+    metadata?: Record<string, any>;
     caption?: any;
     colourScale?: any;
 };

package/dist/components/layout/Footer.svelte

@@ -51,6 +51,7 @@
     copyrightHref = "https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/",
     rebrand = true,
     borderTopColor = "#00625E",
+    removeCopyrightPadding = false,
   } = $props<{
     sections?: FooterSection[];
     inlineLinks?: FooterItem[];
@@ -68,6 +69,7 @@
     copyrightHref?: string;
     rebrand?: boolean;
     borderTopColor?: string;
+    removeCopyrightPadding?: boolean;
   }>();
 </script>
 
@@ -218,6 +220,7 @@
           <a
             class={[
               "govuk-footer__link",
+              { "no-copyright-padding": removeCopyrightPadding },
               {
                 "govuk-footer__copyright-logo": !copyrightLogoUrl && rebrand,
               },
@@ -234,3 +237,9 @@
     </div>
   </div>
 </footer>
+
+<style>
+  .no-copyright-padding {
+    padding: 0;
+  }
+</style>

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

@@ -27,6 +27,7 @@ type $$ComponentProps = {
     copyrightHref?: string;
     rebrand?: boolean;
     borderTopColor?: string;
+    removeCopyrightPadding?: boolean;
 };
 declare const Footer: import("svelte").Component<$$ComponentProps, {}, "">;
 type Footer = ReturnType<typeof Footer>;

package/dist/components/layout/PhaseBanner.svelte

@@ -5,15 +5,21 @@
     bannerText = "This is a new service. Help us improve it and ",
     linkText = "give your feedback by email",
     linkHref = "#",
+    bottomBorder = true,
   } = $props<{
     tagText?: string;
     bannerText?: string;
     linkText?: string;
     linkHref?: string;
+    bottomBorder?: boolean;
   }>();
 </script>
 
-<div class="govuk-phase-banner govuk-width-container">
+<div
+  class="govuk-phase-banner govuk-width-container {bottomBorder
+    ? ''
+    : 'no-bottom-border'}"
+>
   <p class="govuk-phase-banner__content">
     <strong class="govuk-tag govuk-phase-banner__content__tag">
       {tagText}
@@ -25,4 +31,7 @@
 </div>
 
 <style>
+  .no-bottom-border {
+    border-bottom: none;
+  }
 </style>

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

@@ -3,6 +3,7 @@ type $$ComponentProps = {
     bannerText?: string;
     linkText?: string;
     linkHref?: string;
+    bottomBorder?: boolean;
 };
 declare const PhaseBanner: import("svelte").Component<$$ComponentProps, {}, "">;
 type PhaseBanner = ReturnType<typeof PhaseBanner>;

package/dist/components/layout/ServiceNavigation.svelte

@@ -17,11 +17,15 @@ Use the component with or without navigation items based on your needs. -->
     serviceUrl = "#",
     navigationItems = undefined,
     collapseOnDesktop = false,
+    customiseServiceNameLink = false,
+    serviceNameLinkStyle = "govuk-link no-underline",
   } = $props<{
     serviceName?: string;
     serviceUrl?: string;
     navigationItems?: NavigationItem[];
     collapseOnDesktop?: boolean;
+    customiseServiceNameLink?: boolean;
+    serviceNameLinkStyle?: string;
   }>();
 
   // Reactive state declarations
@@ -94,7 +98,12 @@ Use the component with or without navigation items based on your needs. -->
   <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">
+        <a
+          href={serviceUrl}
+          class={customiseServiceNameLink
+            ? serviceNameLinkStyle
+            : "govuk-service-navigation__link"}
+        >
           {serviceName}
         </a>
       </span>
@@ -145,3 +154,12 @@ Use the component with or without navigation items based on your needs. -->
     </div>
   </div>
 </section>
+
+<style>
+  .no-underline {
+    text-decoration: none;
+  }
+  .no-underline:hover {
+    text-decoration: underline;
+  }
+</style>

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

@@ -8,6 +8,8 @@ type $$ComponentProps = {
     serviceUrl?: string;
     navigationItems?: NavigationItem[];
     collapseOnDesktop?: boolean;
+    customiseServiceNameLink?: boolean;
+    serviceNameLinkStyle?: string;
 };
 declare const ServiceNavigation: import("svelte").Component<$$ComponentProps, {}, "">;
 type ServiceNavigation = ReturnType<typeof ServiceNavigation>;