@communitiesuk/svelte-component-library 0.1.19-beta.2 → 0.1.19-beta.21

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

@@ -1,70 +1,75 @@
 <script>
-  let { markerRadius = undefined, barWidth = undefined } = $props();
+  let {
+    markerRadius = undefined,
+    textSize = "s",
+    chartWidth,
+    axisLabels = ["Left", "Right"],
+  } = $props();
 </script>
 
-<div class="axis" style="--axis-padding:{markerRadius}px; width: {barWidth}">
-  <div class="more-deprived">
+<div
+  class="axis govuk-body-{textSize}"
+  style="--axis-padding:{markerRadius}px; width: {chartWidth}"
+>
+  <div class="right-label">
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="11"
+      width="18"
       height="16"
-      viewBox="0 0 11 16"
+      viewBox="0 0 11 20"
       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"
+        transform="translate(20,21)rotate(180)"
+        d="M 19.7071 12.7071 C 20.0976 12.3166 20.0976 11.6834 19.7071 11.2929 L 13.3431 4.9289 C 12.9526 4.5384 12.3195 4.5384 11.9289 4.9289 C 11.5384 5.3195 11.5384 5.9526 11.9289 6.3431 L 17.5858 12 L 11.9289 17.6568 C 11.5384 18.0474 11.5384 18.6805 11.9289 19.0711 C 12.3195 19.4616 12.9526 19.4616 13.3431 19.0711 L 19.7071 12.7071 Z M 4 12 L 4 13 L 19 13 L 19 12 L 19 11 L 9 11 L 4 11 Z"
+        fill="darkgrey"
       ></path>
     </svg>
-    <span style="font-family:GDS Transport">More deprived</span>
+    <span class="axis-text">{axisLabels[0]}</span>
   </div>
-  <div class="less-deprived">
-    <span style="font-family:GDS Transport">Less deprived</span>
+  <div class="left-label">
+    <span class="axis-text">{axisLabels[1]}</span>
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="12"
+      width="18"
       height="16"
-      viewBox="0 0 12 16"
+      viewBox="0 0 11 20"
       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"
+        transform="translate(-5,-3)"
+        d="M 19.7071 12.7071 C 20.0976 12.3166 20.0976 11.6834 19.7071 11.2929 L 13.3431 4.9289 C 12.9526 4.5384 12.3195 4.5384 11.9289 4.9289 C 11.5384 5.3195 11.5384 5.9526 11.9289 6.3431 L 17.5858 12 L 11.9289 17.6568 C 11.5384 18.0474 11.5384 18.6805 11.9289 19.0711 C 12.3195 19.4616 12.9526 19.4616 13.3431 19.0711 L 19.7071 12.7071 Z M 4 12 L 4 13 L 19 13 L 19 12 L 19 11 L 9 11 L 4 11 Z"
+        fill="darkgrey"
       ></path>
     </svg>
   </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;
-  }
-
-  /* Tell the parent to act as a container */
-  .axis {
-    container-type: inline-size;
+    max-width: 120px;
   }
 
-  /* Container query: hide the child if parent's width is less than 400px */
-  @container (max-width: 18rem) {
-    .less-deprived {
-      display: none;
-    }
+  .left-label {
+    text-align: end;
   }
 
-  @container (max-width: 25rem) {
-    .average {
-      display: none;
-    }
+  .axis-text {
+    font-family: "GDS Transport";
+    line-height: 0.9;
+    color: #666666;
+    font-style: italic;
   }
 </style>

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

@@ -5,9 +5,13 @@ type PositionChartAxis = {
 };
 declare const PositionChartAxis: import("svelte").Component<{
     markerRadius?: any;
-    barWidth?: any;
+    textSize?: string;
+    chartWidth: any;
+    axisLabels?: any[];
 }, {}, "">;
 type $$ComponentProps = {
     markerRadius?: any;
-    barWidth?: any;
+    textSize?: string;
+    chartWidth: any;
+    axisLabels?: 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>;

package/dist/components/ui/BasicMultiSelect.svelte

@@ -0,0 +1,185 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { browser } from "$app/environment";
+
+  type Option = { id: string | number; label: string };
+  type SelectedWithColor = Option & { color: string };
+
+  // ---------- Props ----------
+  let {
+    options = [],
+    selectedWithColors = $bindable<SelectedWithColor[]>([]),
+    colorArray = ["#808080"],
+    placeholder = "Select...",
+  } = $props();
+
+  let showDropdown = $state(false);
+  let search = $state("");
+
+  // ---------- Assign colours to incoming items ----------
+  $effect(() => {
+    if (!Array.isArray(selectedWithColors)) return;
+    if (!colorArray.length) return;
+
+    const used = new Set(
+      selectedWithColors.map((s) => s.color).filter(Boolean),
+    );
+    let changed = false;
+
+    const updated = selectedWithColors.map((item) => {
+      if (item.color) return item;
+      const color = colorArray.find((c) => !used.has(c)) ?? colorArray[0];
+      used.add(color);
+      changed = true;
+      return { ...item, color };
+    });
+
+    if (changed) selectedWithColors = updated;
+  });
+
+  // ---------- Compute filtered options ----------
+  const filteredOptions = $derived(
+    options.filter(
+      (o) =>
+        !selectedWithColors.some((s) => s.id === o.id) &&
+        o.label.toLowerCase().includes(search.toLowerCase()),
+    ),
+  );
+
+  // ---------- Helpers ----------
+  function getFirstAvailableColor() {
+    const used = new Set(selectedWithColors.map((s) => s.color));
+    return colorArray.find((c) => !used.has(c)) ?? colorArray[0];
+  }
+
+  function select(option: Option) {
+    const color = getFirstAvailableColor();
+    selectedWithColors = [...selectedWithColors, { ...option, color }];
+    search = "";
+  }
+
+  function remove(item: SelectedWithColor) {
+    selectedWithColors = selectedWithColors.filter((s) => s.id !== item.id);
+  }
+
+  // Close dropdown on outside click — browser only
+  let container: HTMLDivElement | null = null;
+
+  onMount(() => {
+    if (!browser) return;
+
+    function handleOutside(e: MouseEvent) {
+      if (container && !container.contains(e.target as Node)) {
+        showDropdown = false;
+      }
+    }
+
+    document.addEventListener("mousedown", handleOutside);
+    return () => document.removeEventListener("mousedown", handleOutside);
+  });
+</script>
+
+<!-- ---------- TEMPLATE ---------- -->
+<div class="container" bind:this={container}>
+  <div class="box" on:click={() => (showDropdown = true)}>
+    <input
+      {placeholder}
+      bind:value={search}
+      on:input={() => (showDropdown = true)}
+    />
+
+    <div class="tags">
+      {#each selectedWithColors as item (item.id)}
+        <span class="tag">
+          <span class="dot" style={`background:${item.color}`}></span>
+          {item.label}
+          <button on:click|stopPropagation={() => remove(item)}>×</button>
+        </span>
+      {/each}
+    </div>
+  </div>
+
+  {#if showDropdown}
+    <ul class="dropdown">
+      {#each filteredOptions as o (o.id)}
+        <li on:click={() => select(o)}>{o.label}</li>
+      {/each}
+
+      {#if filteredOptions.length === 0}
+        <li class="no">No results</li>
+      {/if}
+    </ul>
+  {/if}
+</div>
+
+<style>
+  .container {
+    position: relative;
+    width: 100%;
+  }
+
+  .box {
+    border: 1px solid #ccc;
+    padding: 8px;
+    border-radius: 6px;
+    cursor: pointer;
+  }
+
+  input {
+    width: 100%;
+    font-size: 16px;
+    border: none;
+    outline: none;
+  }
+
+  .tags {
+    margin-top: 6px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+
+  .tag {
+    background: #f3f2f1;
+    padding: 2px 6px;
+    border-radius: 4px;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    border: 1px solid #999;
+  }
+
+  .dropdown {
+    position: absolute;
+    background: white;
+    width: 100%;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+    margin-top: 4px;
+    z-index: 10;
+    max-height: 200px;
+    overflow-y: auto;
+    padding: 0;
+    list-style: none;
+  }
+
+  .dropdown li {
+    padding: 8px;
+    cursor: pointer;
+  }
+
+  .dropdown li:hover {
+    background: #eef4ff;
+  }
+
+  .no {
+    color: #777;
+    padding: 8px;
+  }
+</style>

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

@@ -0,0 +1,8 @@
+declare const BasicMultiSelect: import("svelte").Component<{
+    options?: any[];
+    selectedWithColors?: any[];
+    colorArray?: any[];
+    placeholder?: string;
+}, {}, "selectedWithColors">;
+type BasicMultiSelect = ReturnType<typeof BasicMultiSelect>;
+export default BasicMultiSelect;

package/dist/components/ui/Button.svelte

@@ -177,6 +177,7 @@
   }
 
   .more-info-button {
+    display: flex;
     flex: none;
     font-size: 1.25rem;
     padding-top: 2px;

package/dist/components/ui/Card.svelte

@@ -1,101 +1,89 @@
 <script>
+  import CardHeader from "./CardHeader.svelte";
+
   let {
-    linkCard = true,
-    linkText = undefined,
-    linkTextColor = "#1D70B8",
+    headerIsLink = true,
+    headerText = "Card header",
+    headerTextSize = "1.5rem",
+    headerTextColor = "#1D70B8",
+    headerBackgroundColor = "white",
     href = undefined,
-    callToActionBackgroundColor = "white",
-    bodyText = undefined,
+    onlyTextInBody = true,
+    bodyText = "Text in the body of the card",
+    headerSnippet = undefined,
+    bodySnippet = undefined,
+    children = undefined,
     bodyTextColor = "#0B0C0C",
     bodyBackgroundColor = "#FBFCFD",
     bodyTopBorderColor = "#F4F8FB",
     bodyBottomBorderColor = "#c3d9e9",
     selectedValue = $bindable(),
-    cardSnippet = undefined,
+    display = "flex",
+    gridPosition = undefined,
+    subtitle = undefined,
   } = $props();
 </script>
 
-<div class="card">
+<div class="card" style="display: {display}">
   <div
-    class="call-to-action"
-    style="background-color: {callToActionBackgroundColor};"
+    class="header-div"
+    style="background-color: {headerBackgroundColor}; grid-row: {gridPosition?.[0]
+      ?.row ?? null}; grid-column: {gridPosition?.[0]?.col ?? null};"
   >
-    {#if linkCard}
-      <a class="link" {href}>
-        <h3
-          class="govuk-link link-heading govuk-heading-m"
-          style="--link-text-color: {linkTextColor}"
-        >
-          {linkText}
-        </h3>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="10"
-          height="17"
-          viewBox="0 0 10 17"
-          fill="none"
-        >
-          <path
-            d="M6.21622 8.5L0 2.36667L1.89189 0.5L10 8.5L1.89189 16.5L0 14.6333L6.21622 8.5Z"
-            fill={linkTextColor}
-          ></path>
-        </svg>
-      </a>
+    {#if headerIsLink}
+      <CardHeader
+        text={headerText}
+        textSize={headerTextSize}
+        textColor={headerTextColor}
+        backgroundColor={headerBackgroundColor}
+        {href}
+        {subtitle}
+      ></CardHeader>
     {:else}
-      {@render cardSnippet()}
+      {@render headerSnippet?.()}
     {/if}
   </div>
 
   <div
     class="body-div"
-    style="--body-bg-color: {bodyBackgroundColor}; --body-bottom-border-color: {bodyBottomBorderColor}; --body-top-border-color: {bodyTopBorderColor};"
+    style="--body-bg-color: {bodyBackgroundColor}; --body-bottom-border-color: {bodyBottomBorderColor}; --body-top-border-color: {bodyTopBorderColor}; grid-row: {gridPosition?.[1]
+      ?.row ?? null}; grid-column: {gridPosition?.[1]?.col ?? null};"
   >
-    <p class="govuk-body body-text" style="--body-text-color: {bodyTextColor};">
-      {bodyText}
-    </p>
+    {#if onlyTextInBody}
+      <p
+        class="govuk-body body-text"
+        style="--body-text-color: {bodyTextColor};"
+      >
+        {bodyText}
+      </p>
+    {:else if children}
+      {@render children?.()}
+    {:else}
+      {@render bodySnippet?.()}
+    {/if}
   </div>
 </div>
 
 <style>
   .card {
-    display: flex;
     flex-direction: column;
+    min-width: 0;
   }
 
-  .call-to-action {
-    padding: 15px 20px;
-  }
-
-  .link {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-  }
-
-  .link-heading {
-    color: var(--link-text-color);
+  .header-div {
+    padding: 20px;
+    flex: 1;
   }
 
   .body-div {
     background-color: var(--body-bg-color);
     border-bottom: 1px solid var(--body-bottom-border-color);
     border-top: 1px solid var(--body-top-border-color);
-    padding: 10px 20px 15px 20px;
+    padding: 15px 20px;
     flex: 1;
   }
 
   .body-text {
     color: var(--body-text-color);
   }
-
-  .govuk-heading-m {
-    /* overwriting margin and line-height to make link centered vertically */
-    margin: 0;
-    line-height: 1;
-  }
-
-  a {
-    color: #1d70b8;
-  }
 </style>

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

@@ -4,30 +4,44 @@ type Card = {
     $set?(props: Partial<$$ComponentProps>): void;
 };
 declare const Card: import("svelte").Component<{
-    linkCard?: boolean;
-    linkText?: any;
-    linkTextColor?: string;
+    headerIsLink?: boolean;
+    headerText?: string;
+    headerTextSize?: string;
+    headerTextColor?: string;
+    headerBackgroundColor?: string;
     href?: any;
-    callToActionBackgroundColor?: string;
-    bodyText?: any;
+    onlyTextInBody?: boolean;
+    bodyText?: string;
+    headerSnippet?: any;
+    bodySnippet?: any;
+    children?: any;
     bodyTextColor?: string;
     bodyBackgroundColor?: string;
     bodyTopBorderColor?: string;
     bodyBottomBorderColor?: string;
     selectedValue?: any;
-    cardSnippet?: any;
+    display?: string;
+    gridPosition?: any;
+    subtitle?: any;
 }, {}, "selectedValue">;
 type $$ComponentProps = {
-    linkCard?: boolean;
-    linkText?: any;
-    linkTextColor?: string;
+    headerIsLink?: boolean;
+    headerText?: string;
+    headerTextSize?: string;
+    headerTextColor?: string;
+    headerBackgroundColor?: string;
     href?: any;
-    callToActionBackgroundColor?: string;
-    bodyText?: any;
+    onlyTextInBody?: boolean;
+    bodyText?: string;
+    headerSnippet?: any;
+    bodySnippet?: any;
+    children?: any;
     bodyTextColor?: string;
     bodyBackgroundColor?: string;
     bodyTopBorderColor?: string;
     bodyBottomBorderColor?: string;
     selectedValue?: any;
-    cardSnippet?: any;
+    display?: string;
+    gridPosition?: any;
+    subtitle?: any;
 };