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

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/Details.svelte

@@ -1,5 +1,5 @@
 <script>
-  let { summaryText, detailedText } = $props();
+  let { summaryText, detailedText, renderStringAsHTML = false } = $props();
 </script>
 
 <details class="govuk-details">
@@ -7,6 +7,14 @@
     <span class="govuk-details__summary-text">{summaryText}</span>
   </summary>
   <div class="govuk-details__text">
-    {detailedText}
+    {#if typeof detailedText === "string"}
+      {#if renderStringAsHTML}
+        {@html detailedText}
+      {:else}
+        {detailedText}
+      {/if}
+    {:else if detailedText}
+      {@render detailedText()}
+    {/if}
   </div>
 </details>

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

@@ -6,8 +6,10 @@ type Details = {
 declare const Details: import("svelte").Component<{
     summaryText: any;
     detailedText: any;
+    renderStringAsHTML?: boolean;
 }, {}, "">;
 type $$ComponentProps = {
     summaryText: any;
     detailedText: any;
+    renderStringAsHTML?: boolean;
 };

package/dist/components/ui/Masthead.svelte

@@ -12,6 +12,10 @@
     imageAlt = "",
     backgroundColor = "#1d70b8", // GOV.UK blue by default
     textColor = "#FFFFFF",
+    imgMarginTop = "15px",
+    paddingTop = "30px",
+    titlePaddingTop = false,
+    paddingBottom = "30px",
   } = $props<{
     title?: string;
     description?: string;
@@ -22,16 +26,24 @@
     imageAlt?: string;
     backgroundColor?: string;
     textColor?: string;
+    imgMarginTop?: string;
+    paddingTop?: string;
+    titlePaddingTop?: boolean;
+    paddingBottom?: string;
   }>();
 </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 includeButton === true}
@@ -61,6 +73,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 +101,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 +141,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 +296,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

@@ -8,6 +8,10 @@ type $$ComponentProps = {
     imageAlt?: string;
     backgroundColor?: string;
     textColor?: string;
+    imgMarginTop?: string;
+    paddingTop?: string;
+    titlePaddingTop?: boolean;
+    paddingBottom?: string;
 };
 declare const Masthead: import("svelte").Component<$$ComponentProps, {}, "">;
 type Masthead = ReturnType<typeof Masthead>;

package/dist/components/ui/PostcodeOrAreaSearch.svelte

@@ -57,6 +57,10 @@
     homepage?: boolean;
     minLength?: number;
     required?: boolean;
+    autoselect?: boolean; // Auto-highlight first suggestion
+    hideHint?: boolean; // Hide the hint input element when autoselect is true
+    prefixMatchOnly?: boolean; // Only show suggestions that start with the query
+    autoFocusSubmitOnSelection?: boolean; // Auto-focus submit button when selection is confirmed
     [key: string]: any; // Allow other props
   };
 
@@ -83,6 +87,10 @@
     homepage = false,
     minLength = 2,
     required = false,
+    autoselect = true,
+    hideHint = false,
+    prefixMatchOnly = false,
+    autoFocusSubmitOnSelection = false,
     ...restProps
   }: Props = $props();
 
@@ -222,6 +230,10 @@
     homepage,
     minLength,
     required,
+    autoselect,
+    hideHint,
+    prefixMatchOnly,
+    autoFocusSubmitOnSelection,
     ...restProps,
   });
 </script>

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

@@ -31,6 +31,10 @@ type Props = {
     homepage?: boolean;
     minLength?: number;
     required?: boolean;
+    autoselect?: boolean;
+    hideHint?: boolean;
+    prefixMatchOnly?: boolean;
+    autoFocusSubmitOnSelection?: boolean;
     [key: string]: any;
 };
 declare const PostcodeOrAreaSearch: import("svelte").Component<Props, {}, "selectedValue">;

package/dist/components/ui/RelatedContent.svelte

@@ -30,11 +30,13 @@
     headingLevel = 2 as 1 | 2 | 3 | 4 | 5 | 6, // Main heading level (used by first 'main' section)
     listTruncateThreshold = 5, // Default threshold, can be overridden per section
     disableGa4 = false,
+    marginBottom = "60px",
   } = $props<{
     sections?: RelatedContentSection[];
     headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
     listTruncateThreshold?: number; // Default threshold
     disableGa4?: boolean;
+    marginBottom?: string;
   }>();
 
   // Helper to check if a link is external
@@ -229,6 +231,7 @@
   class="gem-c-related-navigation govuk-!-display-none-print {hasJavaScript
     ? 'govuk-frontend-supported'
     : ''}"
+  style="margin-bottom: {marginBottom};"
   role="complementary"
 >
   {#if mainSection && mainSection.title}
@@ -304,7 +307,7 @@
 <style>
   .gem-c-related-navigation {
     border-top: 2px solid #1d70b8;
-    margin-bottom: 60px;
+    /* margin-bottom: 60px; */
     color: #0b0c0c;
   }
 

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

@@ -24,6 +24,7 @@ type $$ComponentProps = {
     headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
     listTruncateThreshold?: number;
     disableGa4?: boolean;
+    marginBottom?: string;
 };
 declare const RelatedContent: import("svelte").Component<$$ComponentProps, {}, "">;
 type RelatedContent = ReturnType<typeof RelatedContent>;