@communitiesuk/svelte-component-library 0.1.17

package/dist/icons/IconSearch.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  let { class: className = "" }: { class?: string } = $props();
+</script>
+
+<svg
+  class="gem-c-search__icon"
+  width="27"
+  height="27"
+  viewBox="0 0 27 27"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  aria-hidden="true"
+  focusable="false"
+>
+  <circle
+    cx="12.0161"
+    cy="11.0161"
+    r="8.51613"
+    stroke="currentColor"
+    stroke-width="3"
+  ></circle>
+  <line
+    x1="17.8668"
+    y1="17.3587"
+    x2="26.4475"
+    y2="25.9393"
+    stroke="currentColor"
+    stroke-width="3"
+  ></line>
+</svg>
+
+<style>
+  .gem-c-search__icon {
+    pointer-events: none;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    transform: scale(0.5);
+  }
+</style>

package/dist/icons/IconSearch.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    class?: string;
+};
+declare const IconSearch: import("svelte").Component<$$ComponentProps, {}, "">;
+type IconSearch = ReturnType<typeof IconSearch>;
+export default IconSearch;

package/dist/icons/SingleChevronButtonWithLabel.svelte

@@ -0,0 +1,132 @@
+<script>
+  let {
+    open,
+    openArray = $bindable(),
+    overlayOpen = $bindable(),
+    index,
+    text,
+  } = $props();
+
+  function onClickFunction() {
+    if (openArray[index]) {
+      openArray = openArray.map((el) => false);
+      overlayOpen = false;
+    } else {
+      openArray = openArray.map((el, i) => i === index);
+      overlayOpen = true;
+    }
+  }
+</script>
+
+<button
+  onclick={onClickFunction}
+  class="p-2"
+  data-role={open ? "button-selected" : "button-unselected"}
+>
+  <div class="flex flex-row gap-0 items-center">
+    <svg width="30" height="30">
+      {#each [12] as xPos}
+        <g
+          transform="translate({xPos + (open ? 3 : 0)},{15 +
+            (open ? -3 : 0)})rotate({open ? -45 : -135})"
+        >
+          {#each [-5, 5] as cxcy}
+            <circle
+              data-role={open
+                ? "button-circle-selected"
+                : "button-circle-unselected"}
+              cx={cxcy}
+              cy={cxcy}
+            ></circle>
+          {/each}
+          <path
+            data-role={open ? "button-path-selected" : "button-path-unselected"}
+            d="M -5 -5 l0 9.75 m0.25 0.25 l9.75 0"
+          ></path>
+          <rect
+            data-role={open ? "button-rect-selected" : "button-rect-unselected"}
+            transform="translate(-6, 4)"
+            width="2"
+            height="2"
+            rx="4px"
+          ></rect>
+        </g>
+      {/each}
+    </svg>
+    <span
+      class="text-lg text-[#6b7280]"
+      data-role={open ? "button-label-selected" : "button-label-unselected"}
+      >{text}</span
+    >
+  </div>
+</button>
+
+<style>
+  button {
+    display: inline-block;
+    width: 100%;
+    border-radius: 3px;
+  }
+
+  [data-role="button-unselected"]:hover {
+    background-color: #f3f3f3;
+  }
+
+  [data-role="button-label-selected"] {
+    color: #ea580c;
+    text-decoration: underline;
+    text-underline-offset: 3px;
+  }
+
+  svg {
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+
+  path {
+    stroke: #6b7280;
+    fill: none;
+    stroke-width: 2px;
+  }
+
+  [data-role="button-path-selected"] {
+    stroke: #ea580c;
+  }
+
+  button:hover [data-role="button-path-unselected"] {
+    stroke: #4b5563;
+  }
+
+  circle {
+    fill: #6b7280;
+    stroke: none;
+    r: 1;
+  }
+
+  [data-role="button-circle-selected"] {
+    fill: #ea580c;
+  }
+
+  button:hover [data-role="button-circle-unselected"] {
+    fill: #4b5563;
+  }
+
+  rect {
+    stroke: none;
+    fill: #6b7280;
+  }
+
+  [data-role="button-rect-selected"] {
+    fill: #ea580c;
+  }
+
+  button:hover [data-role="button-rect-unselected"] {
+    fill: #4b5563;
+  }
+
+  button:hover [data-role="button-label-unselected"] {
+    color: #4b5563;
+    text-decoration: underline;
+    text-underline-offset: 3px;
+  }
+</style>

package/dist/icons/SingleChevronButtonWithLabel.svelte.d.ts

@@ -0,0 +1,19 @@
+export default SingleChevronButtonWithLabel;
+type SingleChevronButtonWithLabel = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const SingleChevronButtonWithLabel: import("svelte").Component<{
+    open: any;
+    openArray?: any;
+    overlayOpen?: any;
+    index: any;
+    text: any;
+}, {}, "openArray" | "overlayOpen">;
+type $$ComponentProps = {
+    open: any;
+    openArray?: any;
+    overlayOpen?: any;
+    index: any;
+    text: any;
+};

package/dist/index.d.ts

@@ -0,0 +1,44 @@
+import "./main.css";
+export { default as InsetText } from './components/content/InsetText.svelte';
+export { default as WarningText } from './components/content/WarningText.svelte';
+export { default as Axis } from './components/data-vis/axis/Axis.svelte';
+export { default as Ticks } from './components/data-vis/axis/Ticks.svelte';
+export { default as Line } from './components/data-vis/line-chart/Line.svelte';
+export { default as LineChart } from './components/data-vis/line-chart/LineChart.svelte';
+export { default as Lines } from './components/data-vis/line-chart/Lines.svelte';
+export { default as Marker } from './components/data-vis/line-chart/Marker.svelte';
+export { default as SeriesLabel } from './components/data-vis/line-chart/SeriesLabel.svelte';
+export { default as ValueLabel } from './components/data-vis/line-chart/ValueLabel.svelte';
+export { default as Map } from './components/data-vis/map/Map.svelte';
+export { default as MapLegend } from './components/data-vis/map/MapLegend.svelte';
+export { default as NonStandardControls } from './components/data-vis/map/NonStandardControls.svelte';
+export { default as Tooltip } from './components/data-vis/map/Tooltip.svelte';
+export { default as Table } from './components/data-vis/table/Table.svelte';
+export { default as Breadcrumbs } from './components/layout/Breadcrumbs.svelte';
+export { default as Footer } from './components/layout/Footer.svelte';
+export { default as Header } from './components/layout/Header.svelte';
+export { default as InternalHeader } from './components/layout/InternalHeader.svelte';
+export { default as PhaseBanner } from './components/layout/PhaseBanner.svelte';
+export { default as ServiceNavigation } from './components/layout/ServiceNavigation.svelte';
+export { default as SideNavigation } from './components/layout/SideNavigation.svelte';
+export { default as HeaderNav } from './components/layout/service-navigation-nested-mobile/HeaderNav.svelte';
+export { default as MobileNav } from './components/layout/service-navigation-nested-mobile/MobileNav.svelte';
+export { default as ServiceNavigationNestedMobile } from './components/layout/service-navigation-nested-mobile/ServiceNavigationNestedMobile.svelte';
+export { default as SideNav } from './components/layout/service-navigation-nested-mobile/SideNav.svelte';
+export { default as Accordion } from './components/ui/Accordion.svelte';
+export { default as Button } from './components/ui/Button.svelte';
+export { default as CheckBox } from './components/ui/CheckBox.svelte';
+export { default as ContentsList } from './components/ui/ContentsList.svelte';
+export { default as DateInput } from './components/ui/DateInput.svelte';
+export { default as Details } from './components/ui/Details.svelte';
+export { default as FilterPanel } from './components/ui/FilterPanel.svelte';
+export { default as Masthead } from './components/ui/Masthead.svelte';
+export { default as NavigationExample } from './components/ui/NavigationExample.svelte';
+export { default as NotificationBanner } from './components/ui/NotificationBanner.svelte';
+export { default as Radios } from './components/ui/Radios.svelte';
+export { default as RelatedContent } from './components/ui/RelatedContent.svelte';
+export { default as Search } from './components/ui/Search.svelte';
+export { default as SearchAutocomplete } from './components/ui/SearchAutocomplete.svelte';
+export { default as Select } from './components/ui/Select.svelte';
+export { default as Tabs } from './components/ui/Tabs.svelte';
+export { default as WhatsNew } from './components/ui/WhatsNew.svelte';

package/dist/index.js

@@ -0,0 +1,45 @@
+// this file is auto-generated — do not edit by hand
+import "./main.css";
+export { default as InsetText } from './components/content/InsetText.svelte';
+export { default as WarningText } from './components/content/WarningText.svelte';
+export { default as Axis } from './components/data-vis/axis/Axis.svelte';
+export { default as Ticks } from './components/data-vis/axis/Ticks.svelte';
+export { default as Line } from './components/data-vis/line-chart/Line.svelte';
+export { default as LineChart } from './components/data-vis/line-chart/LineChart.svelte';
+export { default as Lines } from './components/data-vis/line-chart/Lines.svelte';
+export { default as Marker } from './components/data-vis/line-chart/Marker.svelte';
+export { default as SeriesLabel } from './components/data-vis/line-chart/SeriesLabel.svelte';
+export { default as ValueLabel } from './components/data-vis/line-chart/ValueLabel.svelte';
+export { default as Map } from './components/data-vis/map/Map.svelte';
+export { default as MapLegend } from './components/data-vis/map/MapLegend.svelte';
+export { default as NonStandardControls } from './components/data-vis/map/NonStandardControls.svelte';
+export { default as Tooltip } from './components/data-vis/map/Tooltip.svelte';
+export { default as Table } from './components/data-vis/table/Table.svelte';
+export { default as Breadcrumbs } from './components/layout/Breadcrumbs.svelte';
+export { default as Footer } from './components/layout/Footer.svelte';
+export { default as Header } from './components/layout/Header.svelte';
+export { default as InternalHeader } from './components/layout/InternalHeader.svelte';
+export { default as PhaseBanner } from './components/layout/PhaseBanner.svelte';
+export { default as ServiceNavigation } from './components/layout/ServiceNavigation.svelte';
+export { default as SideNavigation } from './components/layout/SideNavigation.svelte';
+export { default as HeaderNav } from './components/layout/service-navigation-nested-mobile/HeaderNav.svelte';
+export { default as MobileNav } from './components/layout/service-navigation-nested-mobile/MobileNav.svelte';
+export { default as ServiceNavigationNestedMobile } from './components/layout/service-navigation-nested-mobile/ServiceNavigationNestedMobile.svelte';
+export { default as SideNav } from './components/layout/service-navigation-nested-mobile/SideNav.svelte';
+export { default as Accordion } from './components/ui/Accordion.svelte';
+export { default as Button } from './components/ui/Button.svelte';
+export { default as CheckBox } from './components/ui/CheckBox.svelte';
+export { default as ContentsList } from './components/ui/ContentsList.svelte';
+export { default as DateInput } from './components/ui/DateInput.svelte';
+export { default as Details } from './components/ui/Details.svelte';
+export { default as FilterPanel } from './components/ui/FilterPanel.svelte';
+export { default as Masthead } from './components/ui/Masthead.svelte';
+export { default as NavigationExample } from './components/ui/NavigationExample.svelte';
+export { default as NotificationBanner } from './components/ui/NotificationBanner.svelte';
+export { default as Radios } from './components/ui/Radios.svelte';
+export { default as RelatedContent } from './components/ui/RelatedContent.svelte';
+export { default as Search } from './components/ui/Search.svelte';
+export { default as SearchAutocomplete } from './components/ui/SearchAutocomplete.svelte';
+export { default as Select } from './components/ui/Select.svelte';
+export { default as Tabs } from './components/ui/Tabs.svelte';
+export { default as WhatsNew } from './components/ui/WhatsNew.svelte';

package/dist/main.css

@@ -0,0 +1 @@
+@import "./assets/css/govuk-frontend.min.css";

package/dist/package-wrapping/BaseInformation.svelte

@@ -0,0 +1,82 @@
+<script>
+  import DividerLine from "./DividerLine.svelte";
+  import { textStringConversion } from "../utils/text-string-conversion/textStringConversion.js";
+
+  let { homepage, detailsArray, connectedComponentsArray } = $props();
+</script>
+
+{#if detailsArray && detailsArray.filter((el) => !homepage || el.visibleOnHomepage).length > 0}
+  <DividerLine></DividerLine>
+  <div data-role="component-information-array-container">
+    {#each detailsArray as detail}
+      {#if detail.arr && detail.arr.length > 0 && (!homepage || detail.visibleOnHomepage)}
+        <!-- CSS Grid with auto-sizing first column and constrained second column that forces wrapping -->
+        <div
+          data-role="component-information-detail-grid-container"
+          id={detail.label.toLowerCase()}
+          class="grid grid-cols-[auto,minmax(0,1fr)] gap-2 items-baseline"
+        >
+          {#if detail.label}
+            <dt>{detail.label}:</dt>
+          {/if}
+          <dd>
+            {#each detail.arr as paragraph}
+              {#if detail.markdown}
+                <p>{@html paragraph}</p>
+              {:else}
+                <p>{paragraph}</p>
+              {/if}
+            {/each}
+          </dd>
+        </div>
+      {/if}
+    {/each}
+  </div>
+{/if}
+
+{#if connectedComponentsArray}
+  {#each connectedComponentsArray as connectedComponents}
+    {#if (!homepage || connectedComponents?.visibleOnHomepage) && connectedComponents.arr.length > 0}
+      <DividerLine></DividerLine>
+      <!-- CSS Grid layout for label:content pairs with constrained second column -->
+      <div
+        data-role="component-information-detail-grid-container"
+        class="grid grid-cols-[auto,minmax(0,1fr)] gap-2 items-baseline"
+      >
+        <dt>{connectedComponents.label}:</dt>
+        <dd>
+          <!-- flex-wrap allows items to wrap to new lines -->
+          <ul class="flex flex-row flex-wrap gap-4 gap-y-2">
+            {#each connectedComponents.arr as child}
+              <li>
+                <a
+                  class="link-to-other-page"
+                  href="/components-update/{child.folder}/{textStringConversion(
+                    child.name,
+                    'kebab',
+                  )}"
+                >
+                  {child.name}
+                </a>
+              </li>
+            {/each}
+          </ul>
+        </dd>
+      </div>
+    {/if}
+  {/each}
+{/if}
+
+<style>
+  /* Constrain all grid containers and their content to prevent overflow */
+  [data-role="component-information-detail-grid-container"] {
+    max-width: 100%;
+  }
+
+  /* Allow all content within grids to shrink and wrap properly */
+  [data-role="component-information-detail-grid-container"] dd,
+  [data-role="component-information-detail-grid-container"] li {
+    min-width: 0;
+    overflow-wrap: break-word;
+  }
+</style>

package/dist/package-wrapping/BaseInformation.svelte.d.ts

@@ -0,0 +1,15 @@
+export default BaseInformation;
+type BaseInformation = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const BaseInformation: import("svelte").Component<{
+    homepage: any;
+    detailsArray: any;
+    connectedComponentsArray: any;
+}, {}, "">;
+type $$ComponentProps = {
+    homepage: any;
+    detailsArray: any;
+    connectedComponentsArray: any;
+};

package/dist/package-wrapping/BaseNameAndStatus.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+  import Pill from "./Pill.svelte";
+  import {
+    pascalToKebabCase,
+    forceWrapAtThirdCapital,
+  } from "../utils/text-string-conversion/textStringConversion.js";
+  import { componentStatusProgressBackgroundColorLookup } from "../config.js";
+
+  let { homepage, statusObject, folder, subFolder, name, parentFolder } =
+    $props();
+</script>
+
+<!-- Main container: horizontal layout with wrapping for component name and status pill -->
+<div
+  class="flex flex-row flex-wrap items-center gap-4 min-w-0 {homepage
+    ? ''
+    : 'mb-6'}"
+>
+  {#if homepage}
+    <!-- Homepage: component name as clickable link -->
+    <a
+      class="link-to-other-page"
+      href={`/${parentFolder}${(folder ? "/" + folder : "") + (subFolder ? "/" + subFolder : "")}/${pascalToKebabCase(name)}`}
+    >
+      <h6>{@html forceWrapAtThirdCapital(name)}</h6>
+    </a>
+  {:else}
+    <!-- Detail page: component name as heading -->
+    <h2>{@html forceWrapAtThirdCapital(name)}</h2>
+  {/if}
+  {#if statusObject?.progress}
+    <!-- Status pill showing progress state -->
+    <Pill
+      textContent={statusObject?.progress}
+      bgColor={componentStatusProgressBackgroundColorLookup?.[
+        statusObject?.progress
+      ] ?? "black"}
+      textColor="white"
+      size={homepage ? "sm" : "md"}
+    ></Pill>
+  {/if}
+</div>
+
+<!-- Status indicators section: checkmarks and X marks for different criteria -->
+{#if statusObject?.statusRows && statusObject?.statusRows.length > 0 && statusObject?.statusRows
+    .map((el) => Object.keys(el.obj))
+    .flat().length > 0}
+  <!-- Vertical stack of status rows -->
+  <div class="flex flex-col gap-2">
+    {#each statusObject.statusRows as row}
+      {#if !homepage || row.visibleOnHomepage}
+        <!-- Horizontal row of status indicators that wraps on small screens -->
+        <div class="flex flex-wrap gap-2">
+          {#each Object.keys(row.obj) as key}
+            {@const checked = row.obj[key]}
+            {@const color = checked ? "#006B00" : "#BD0000"}
+            <!-- Individual status indicator with icon and text -->
+            <div
+              class="text-base rounded px-1 py-0.5 border-2 border-solid flex flex-row gap-2 items-start"
+              style="border-color: {color}; color: {color}"
+            >
+              <!-- Icon container: prevents icon from shrinking -->
+              <div class="flex-shrink-0">
+                <svg width="18" height="18">
+                  <g transform="scale(0.75)">
+                    <path
+                      d={checked
+                        ? "M4 11 l6 6 l12 -12"
+                        : "M5 4.5 l15 15 M5 19.5 l15 -15"}
+                      stroke={color}
+                      fill="none"
+                      stroke-width="5px"
+                    ></path>
+                  </g>
+                </svg>
+              </div>
+              <!-- Status text with tight line height -->
+              <span class="leading-tight">{key}</span>
+            </div>
+          {/each}
+        </div>
+      {/if}
+    {/each}
+  </div>
+{/if}
+
+<style>
+  /* Unified text wrapping strategy for component names and links */
+  .link-to-other-page,
+  .link-to-other-page h6,
+  h2 {
+    min-width: 0; /* Allow shrinking below content width */
+    white-space: normal; /* Enable text wrapping */
+    overflow-wrap: break-word; /* Break long words when needed */
+    max-width: 100%; /* Prevent container overflow */
+  }
+
+  /* Additional properties specific to clickable links */
+  .link-to-other-page {
+    flex-shrink: 1; /* Allow shrinking in flex containers */
+    display: inline-block; /* Proper wrapping behavior for links */
+  }
+
+  /* Ensure nested heading inherits block display */
+  .link-to-other-page h6 {
+    display: block;
+  }
+</style>

package/dist/package-wrapping/BaseNameAndStatus.svelte.d.ts

@@ -0,0 +1,10 @@
+declare const BaseNameAndStatus: import("svelte").Component<{
+    homepage: any;
+    statusObject: any;
+    folder: any;
+    subFolder: any;
+    name: any;
+    parentFolder: any;
+}, {}, "">;
+type BaseNameAndStatus = ReturnType<typeof BaseNameAndStatus>;
+export default BaseNameAndStatus;

package/dist/package-wrapping/CodeBlock.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import { codeToHtml } from "shiki";
+
+  let {
+    code = "",
+    filename = "App",
+    extension = ".svelte",
+    language = "svelte",
+    theme = "vitesse-light",
+    size = "sm",
+    includeHeader = true,
+  }: {
+    code: string;
+    filename?: string;
+    extension?: string;
+    language?: string;
+    theme?: string;
+    size?: string;
+    includeHeader?: boolean;
+  } = $props();
+
+  function copyHighlightedCode(event) {
+    const block = event.currentTarget.closest(".code-block");
+    if (!block) return;
+
+    const codeElement = block.querySelector("code");
+    if (!codeElement) return;
+
+    const text = codeElement.innerText || codeElement.textContent;
+    navigator.clipboard.writeText(text);
+  }
+
+  async function highlight(code, language, theme) {
+    const html = codeToHtml(code, {
+      lang: language,
+      theme: theme,
+    });
+    const response = await html;
+    return response;
+  }
+
+  let content = highlight(code, language, theme);
+</script>
+
+<div class="code-block text-{size}">
+  {#if includeHeader}
+    <div class="controls">
+      <span class="filename" data-ext={extension}>{filename}</span>
+      <button
+        class="copy-to-clipboard raised"
+        onclick={copyHighlightedCode}
+        title="Copy to clipboard"
+        aria-label="Copy to clipboard"
+      ></button>
+    </div>
+  {/if}
+  <div>
+    {#await content then content}
+      {@html content}
+    {/await}
+  </div>
+</div>

package/dist/package-wrapping/CodeBlock.svelte.d.ts

@@ -0,0 +1,12 @@
+type $$ComponentProps = {
+    code: string;
+    filename?: string;
+    extension?: string;
+    language?: string;
+    theme?: string;
+    size?: string;
+    includeHeader?: boolean;
+};
+declare const CodeBlock: import("svelte").Component<$$ComponentProps, {}, "">;
+type CodeBlock = ReturnType<typeof CodeBlock>;
+export default CodeBlock;