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

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

@@ -0,0 +1,18 @@
+type Option = {
+    id: string | number;
+    label: string;
+};
+type $$ComponentProps = {
+    options?: Option[];
+    selected?: (string | number)[];
+    colorArray?: string[];
+    placeholder?: string;
+    label?: string;
+    hint?: string;
+    enableColors?: boolean;
+    startsWithSearch?: boolean;
+    resetButton?: boolean;
+};
+declare const BasicMultiSelect: import("svelte").Component<$$ComponentProps, {}, "selected">;
+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 1%;
     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;
+};

package/dist/components/ui/ChartExporter.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">
+  // src/lib/utils/exportChartPNG.ts
+  export async function exportChartPNG(
+    node: HTMLElement,
+    {
+      fileName = "chart.png",
+      margin = 16,
+      backgroundColor = "#ffffff",
+      pixelRatio = Math.max(2, window.devicePixelRatio || 1),
+      filter,
+    }: {
+      fileName?: string;
+      margin?: number; // padding applied during export to avoid edges clipping
+      backgroundColor?: string;
+      pixelRatio?: number;
+      filter?: (node: Element) => boolean;
+    },
+  ): Promise<string> {
+    const { toPng } = await import("html-to-image");
+
+    // Wait for web fonts to settle (prevents text reflow/misalignment)
+    if ((document as any).fonts?.ready) {
+      try {
+        await (document as any).fonts.ready;
+      } catch {
+        /* ignore */
+      }
+    }
+
+    // Measure the true content size (includes overflow)
+    const exportWidth = Math.ceil(node.scrollWidth + margin * 2);
+    const exportHeight = Math.ceil(node.scrollHeight + margin * 2);
+
+    const dataUrl = await toPng(node, {
+      cacheBust: false,
+      backgroundColor,
+      pixelRatio,
+      width: exportWidth,
+      height: exportHeight,
+      style: {
+        // Apply padding inside the cloned element
+        padding: `${margin}px`,
+        boxSizing: "border-box",
+        // Ensure no clipping
+        overflow: "visible",
+      },
+      filter,
+    });
+
+    const name = fileName.toLowerCase().endsWith(".png")
+      ? fileName
+      : `${fileName}.png`;
+    const link = document.createElement("a");
+    link.download = name;
+    link.href = dataUrl;
+    link.click();
+
+    return dataUrl;
+  }
+
+  // Props
+  let {
+    node = null,
+    fileName = "chart",
+  }: { node: HTMLElement | null; fileName?: string } = $props();
+
+  // Local state for optional external triggering
+  let isExporting = $state(false);
+
+  async function exportNow() {
+    if (!node) return;
+
+    isExporting = true;
+
+    // Measure width to force correct clone sizing
+    const rect = node.getBoundingClientRect();
+    const measuredWidth = Math.ceil(rect.width);
+
+    // ------- Clone -------
+    const clone = node.cloneNode(true) as HTMLElement;
+    Object.assign(clone.style, {
+      boxSizing: "border-box",
+      width: `${measuredWidth}px`,
+      height: "auto",
+      transform: "none",
+      overflow: "visible",
+      fontFamily: "GDS Transport",
+    });
+
+    // ------- Hide tooltips (optional) -------
+    const hideSelectors = ['[role="tooltip"]'];
+    clone
+      .querySelectorAll<HTMLElement>(hideSelectors.join(","))
+      .forEach((el) => {
+        el.style.display = "none";
+      });
+
+    // ------- Sandbox offscreen -------
+    const sandbox = document.createElement("div");
+    Object.assign(sandbox.style, {
+      position: "fixed",
+      left: "-10000px",
+      top: "0",
+      pointerEvents: "none",
+    });
+
+    sandbox.appendChild(clone);
+    document.body.appendChild(sandbox);
+
+    try {
+      await exportChartPNG(clone, {
+        fileName,
+        margin: 16,
+        backgroundColor: "#ffffff",
+        pixelRatio: Math.max(2, window.devicePixelRatio || 1),
+        filter: (el: Element) => {
+          if (!(el instanceof HTMLElement)) return true;
+
+          // Exclude tooltips only
+          if (el.matches(hideSelectors.join(","))) return false;
+
+          return true;
+        },
+      });
+    } finally {
+      sandbox.remove();
+      isExporting = false;
+    }
+  }
+
+  // We export the function so parent can trigger it manually
+  export { exportNow };
+</script>
+
+<!-- Default button (can be hidden if user triggers manually) -->
+<button
+  class="govuk-button govuk-button--secondary"
+  on:click={exportNow}
+  disabled={isExporting}
+>
+  {isExporting ? "Exporting…" : "Download this chart"}
+</button>

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

@@ -0,0 +1,16 @@
+type $$ComponentProps = {
+    node: HTMLElement | null;
+    fileName?: string;
+};
+declare const ChartExporter: import("svelte").Component<$$ComponentProps, {
+    exportChartPNG: (node: HTMLElement, { fileName, margin, backgroundColor, pixelRatio, filter, }: {
+        fileName?: string;
+        margin?: number;
+        backgroundColor?: string;
+        pixelRatio?: number;
+        filter?: (node: Element) => boolean;
+    }) => Promise<string>;
+    exportNow: () => Promise<void>;
+}, "">;
+type ChartExporter = ReturnType<typeof ChartExporter>;
+export default ChartExporter;

package/dist/components/ui/CheckBox.svelte

@@ -58,6 +58,7 @@
   // Modify toggleCheckbox to handle non-JS scenarios
   function toggleCheckbox(option: CheckboxOption) {
     // If JS/modern features aren't supported, let the native checkbox behavior work
+
     if (!isSupported) return;
 
     if (option.exclusive) {

package/dist/components/ui/Details.svelte

@@ -1,12 +1,51 @@
-<script>
-  let { summaryText, detailedText } = $props();
+<script lang="ts">
+  let {
+    summaryText,
+    detailedText,
+    renderStringAsHTML = false,
+    noInset = false,
+    overlapBelow = false,
+    expanded = $bindable(false),
+    groupName = undefined,
+  } = $props();
 </script>
 
-<details class="govuk-details">
-  <summary class="govuk-details__summary">
-    <span class="govuk-details__summary-text">{summaryText}</span>
-  </summary>
-  <div class="govuk-details__text">
-    {detailedText}
+<details class="govuk-details" open={expanded} name={groupName}>
+  {#if renderStringAsHTML}
+    <summary class="govuk-details__summary-text">
+      {@html summaryText}
+    </summary>
+  {:else}
+    <summary class="govuk-details__summary-text">{summaryText}</summary>
+  {/if}
+
+  <div
+    class={`govuk-details__text ${noInset === true ? "no-inset" : ""} ${overlapBelow === true ? "overlap-below" : ""}`}
+  >
+    {#if typeof detailedText === "string"}
+      {#if renderStringAsHTML}
+        {@html detailedText}
+      {:else}
+        {detailedText}
+      {/if}
+    {:else if detailedText}
+      {@render detailedText()}
+    {/if}
   </div>
 </details>
+
+<style>
+  .no-inset {
+    padding: 0;
+    border: 0;
+  }
+
+  details {
+    position: relative;
+  }
+
+  .overlap-below {
+    position: absolute;
+    background-color: white;
+  }
+</style>

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

@@ -1,13 +1,11 @@
-export default Details;
-type Details = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
 declare const Details: import("svelte").Component<{
     summaryText: any;
     detailedText: any;
-}, {}, "">;
-type $$ComponentProps = {
-    summaryText: any;
-    detailedText: any;
-};
+    renderStringAsHTML?: boolean;
+    noInset?: boolean;
+    overlapBelow?: boolean;
+    expanded?: boolean;
+    groupName?: any;
+}, {}, "expanded">;
+type Details = ReturnType<typeof Details>;
+export default Details;

package/dist/components/ui/Masthead.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import homepageIllustration from "./../../assets/images/homepage-illustration.svg";
+  import type { Snippet } from "svelte";
 
   // Define component props with types and default values
   let {
@@ -12,6 +13,11 @@
     imageAlt = "",
     backgroundColor = "#1d70b8", // GOV.UK blue by default
     textColor = "#FFFFFF",
+    imgMarginTop = "15px",
+    paddingTop = "30px",
+    titlePaddingTop = false,
+    paddingBottom = "30px",
+    contentSnippet = undefined,
   } = $props<{
     title?: string;
     description?: string;
@@ -22,18 +28,32 @@
     imageAlt?: string;
     backgroundColor?: string;
     textColor?: string;
+    imgMarginTop?: string;
+    paddingTop?: string;
+    titlePaddingTop?: boolean;
+    paddingBottom?: string;
+    contentSnippet?: Snippet;
   }>();
+
+  let arg = "hello";
 </script>
 
 <div
   class="app-masthead"
-  style="background-color: {backgroundColor}; border-bottom-color: {backgroundColor}; --masthead-text-color: {textColor};"
+  style="background-color: {backgroundColor}; border-bottom-color: {backgroundColor}; --masthead-text-color: {textColor}; --padding-top: {paddingTop}; --padding-bottom: {paddingBottom};"
 >
   <div class="govuk-width-container">
     <div class="govuk-grid-row">
-      <div class="govuk-grid-column-two-thirds-from-desktop">
+      <div
+        class="govuk-grid-column-two-thirds-from-desktop {titlePaddingTop
+          ? 'custom-padding'
+          : ''}"
+      >
         <h1 class="govuk-heading-xl app-masthead__title">{@html title}</h1>
         <p class="app-masthead__description">{description}</p>
+        {#if contentSnippet}
+          {@render contentSnippet()}
+        {/if}
         {#if includeButton === true}
           <a
             href={buttonHref}
@@ -61,6 +81,7 @@
       <div class="govuk-grid-column-one-third-from-desktop">
         <img
           class="app-masthead__image"
+          style="--img-margin-top: {imgMarginTop}"
           src={imageSrc}
           alt={imageAlt}
           role="presentation"
@@ -88,8 +109,8 @@
   @media (min-width: 40.0625em) {
     .app-masthead.app-masthead {
       /* Responsive spacing unit 6: 30px on large screens */
-      padding-top: 30px;
-      padding-bottom: 30px;
+      padding-top: var(--padding-top);
+      padding-bottom: var(--padding-bottom);
     }
   }
 
@@ -128,12 +149,19 @@
   }
 
   /* @include govuk-media-query($from: desktop) - Desktop breakpoint is 769px */
-  @media (min-width: 48.0625em) {
+  @media (min-width: 53em) {
     .app-masthead .app-masthead__image.app-masthead__image {
       display: block;
       width: 100%;
       /* margin-top: govuk-spacing(3); - Static spacing unit 3 is 15px */
-      margin-top: 15px;
+      margin-top: var(--img-margin-top);
+    }
+  }
+
+  @media (max-width: 52.9375em) {
+    .govuk-grid-column-two-thirds-from-desktop {
+      width: 100%;
+      float: none;
     }
   }
 
@@ -276,4 +304,14 @@
   .app-masthead__description {
     color: var(--masthead-text-color);
   }
+
+  .custom-padding {
+    padding-top: 32px;
+  }
+
+  @media (max-width: 820px) {
+    .custom-padding {
+      padding-top: 16px;
+    }
+  }
 </style>

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

@@ -1,3 +1,4 @@
+import type { Snippet } from "svelte";
 type $$ComponentProps = {
     title?: string;
     description?: string;
@@ -8,6 +9,11 @@ type $$ComponentProps = {
     imageAlt?: string;
     backgroundColor?: string;
     textColor?: string;
+    imgMarginTop?: string;
+    paddingTop?: string;
+    titlePaddingTop?: boolean;
+    paddingBottom?: string;
+    contentSnippet?: Snippet;
 };
 declare const Masthead: import("svelte").Component<$$ComponentProps, {}, "">;
 type Masthead = ReturnType<typeof Masthead>;