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

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;
 };

package/dist/components/ui/CardHeader.svelte

@@ -0,0 +1,46 @@
+<script>
+  let {
+    text = "Card header",
+    textSize = "1.5rem",
+    textColor = "#1D70B8",
+    backgroundColor = "white",
+    href = undefined,
+    subtitle = undefined,
+  } = $props();
+</script>
+
+<a
+  class="link govuk-heading-m"
+  {href}
+  style="font-size: {textSize}; color: {textColor}; background-color: {backgroundColor}; margin: {subtitle ??
+    0}"
+>
+  {text}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 10 17"
+    aria-hidden="true"
+  >
+    <path
+      d="M6.21622 8.5L0 2.36667L1.89189 0.5L10 8.5L1.89189 16.5L0 14.6333L6.21622 8.5Z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</a>
+{#if subtitle !== undefined}
+  <p>{subtitle}</p>{/if}
+
+<style>
+  .link {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    gap: 0.5rem;
+  }
+  p {
+    color: #666;
+  }
+</style>

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

@@ -0,0 +1,21 @@
+export default CardHeader;
+type CardHeader = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const CardHeader: import("svelte").Component<{
+    text?: string;
+    textSize?: string;
+    textColor?: string;
+    backgroundColor?: string;
+    href?: any;
+    subtitle?: any;
+}, {}, "">;
+type $$ComponentProps = {
+    text?: string;
+    textSize?: string;
+    textColor?: string;
+    backgroundColor?: string;
+    href?: any;
+    subtitle?: any;
+};