@communitiesuk/svelte-component-library 0.1.17

package/dist/components/ui/NotificationBanner.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  // Define component props with types and default values
+  let {
+    type = "neutral" as "neutral" | "outcome",
+    title = undefined as string | undefined,
+    content = undefined as string | Snippet | undefined,
+    additionalContentHeading = undefined as string | undefined,
+    additionalContentHeadingLevel = "h3" as "h3" | "h4" | "h5" | "h6",
+    titleId = "govuk-notification-banner-title",
+    linkText = undefined as string | undefined,
+    linkHref = undefined as string | undefined,
+    titleHeadingLevel = "h2" as "h1" | "h2" | "h3" | "h4" | "h5" | "h6",
+  } = $props<{
+    type?: "neutral" | "outcome";
+    title?: string;
+    content: string | Snippet;
+    additionalContentHeading?: string;
+    additionalContentHeadingLevel?: "h3" | "h4" | "h5" | "h6";
+    titleId?: string;
+    linkText?: string;
+    linkHref?: string;
+    titleHeadingLevel?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+  }>();
+
+  // Determine the title text based on type if not explicitly provided
+  let displayTitle = $derived(
+    title || (type === "outcome" ? "Success" : "Important"),
+  );
+
+  // Determine the role based on type
+  let displayRole = $derived(type === "outcome" ? "alert" : "region");
+</script>
+
+{#snippet Link()}
+  <!-- Snippet for rendering the optional link -->
+  {#if linkText && linkHref}
+    <a class="govuk-notification-banner__link" href={linkHref}> {linkText}</a>
+  {/if}
+{/snippet}
+
+<div
+  class="govuk-notification-banner {type === 'outcome'
+    ? 'govuk-notification-banner--success'
+    : ''}"
+  role={displayRole}
+  aria-labelledby={titleId}
+  data-module="govuk-notification-banner"
+>
+  <div class="govuk-notification-banner__header">
+    <svelte:element
+      this={titleHeadingLevel}
+      class="govuk-notification-banner__title"
+      id={titleId}
+    >
+      {displayTitle}
+    </svelte:element>
+  </div>
+  <div class="govuk-notification-banner__content">
+    <!-- Block 1: Runs if additionalContentHeading is present -->
+    {#if additionalContentHeading}
+      <svelte:element
+        this={additionalContentHeadingLevel}
+        class="govuk-notification-banner__heading"
+      >
+        {additionalContentHeading}
+        <!-- Render link inside heading if provided -->
+        {@render Link()}
+      </svelte:element>
+      <!-- Render content prop (body or snippet) -->
+      {#if typeof content === "string"}
+        <p class="govuk-body">{content}</p>
+      {:else}
+        <!-- Assumes content is a snippet if not a string -->
+        {@render content()}
+      {/if}
+      <!-- Block 2: Runs if additionalContentHeading is NOT present AND content is a string -->
+    {:else if typeof content === "string"}
+      <p class="govuk-notification-banner__heading">
+        {content}
+        <!-- Render link inside p if provided -->
+        {@render Link()}
+      </p>
+      <!-- Block 3: Runs if additionalContentHeading is NOT present AND content is a snippet -->
+    {:else if content}
+      {@render content()} <!-- No link rendered here -->
+    {/if}
+  </div>
+</div>
+
+<style>
+</style>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    type?: "neutral" | "outcome";
+    title?: string;
+    content: string | Snippet;
+    additionalContentHeading?: string;
+    additionalContentHeadingLevel?: "h3" | "h4" | "h5" | "h6";
+    titleId?: string;
+    linkText?: string;
+    linkHref?: string;
+    titleHeadingLevel?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+};
+declare const NotificationBanner: import("svelte").Component<$$ComponentProps, {}, "">;
+type NotificationBanner = ReturnType<typeof NotificationBanner>;
+export default NotificationBanner;

package/dist/components/ui/Radios.svelte

@@ -0,0 +1,176 @@
+<script lang="ts">
+  import type { SvelteComponent, Snippet } from "svelte";
+  import { onMount } from "svelte";
+  // Define the RadioOption type
+  export type RadioOption = {
+    value: string;
+    label: string;
+    hint?: string;
+    exclusive?: boolean;
+    conditional?: {
+      id: string;
+      content: string | typeof SvelteComponent | Snippet;
+    };
+  };
+
+  // Component props
+  let {
+    selectedValue = $bindable(null),
+    legend,
+    hint,
+    error,
+    name,
+    isPageHeading = false,
+    legendSize = "l",
+    small = false,
+    inline = false,
+    options = [],
+    validate = undefined,
+  } = $props<{
+    legend: string;
+    hint?: string;
+    error?: string;
+    name: string;
+    isPageHeading?: boolean;
+    legendSize?: "l" | "m" | "s";
+    small?: boolean;
+    inline?: boolean;
+    options?: RadioOption[];
+    validate?: (value: string) => string | undefined;
+    selectedValue?: string | null;
+  }>();
+
+  // Add support detection
+  let isSupported = $state(false);
+  onMount(() => {
+    isSupported =
+      document.body?.classList.contains("govuk-frontend-supported") ?? false;
+  });
+
+  let validationError = $derived<string | undefined>(
+    isSupported && validate ? validate(selectedValue ?? "") : undefined,
+  );
+</script>
+
+<div
+  class="govuk-form-group{validationError || error
+    ? ' govuk-form-group--error'
+    : ''}"
+  role="group"
+  aria-labelledby="{name}-legend"
+>
+  <fieldset
+    class="govuk-fieldset"
+    aria-describedby={[
+      hint ? `${name}-hint` : null,
+      error || validationError ? `${name}-error` : null,
+    ]
+      .filter(Boolean)
+      .join(" ")}
+  >
+    <legend
+      id="{name}-legend"
+      class="govuk-fieldset__legend govuk-fieldset__legend--{legendSize}"
+    >
+      {#if isPageHeading}
+        <h1 class="govuk-fieldset__heading">{legend}</h1>
+      {:else}
+        {legend}
+      {/if}
+    </legend>
+
+    {#if hint}
+      <div id="{name}-hint" class="govuk-hint" role="note">
+        {hint}
+      </div>
+    {/if}
+
+    {#if (isSupported && validationError) || error}
+      <p id="{name}-error" class="govuk-error-message">
+        <span class="govuk-visually-hidden">Error:</span>
+        {validationError || error}
+      </p>
+    {/if}
+
+    <div
+      class="govuk-radios{small ? ' govuk-radios--small' : ''}{inline
+        ? ' govuk-radios--inline'
+        : ''}"
+      data-module="govuk-radios"
+      role="radiogroup"
+      aria-labelledby="{name}-legend"
+    >
+      {#each options as option, i}
+        {#if option.exclusive && i > 0}
+          <div
+            class="govuk-radios__divider"
+            role="separator"
+            aria-orientation="horizontal"
+          >
+            or
+          </div>
+        {/if}
+
+        <div
+          class="govuk-radios__item"
+          role="radio"
+          aria-checked={isSupported ? selectedValue === option.value : null}
+        >
+          <input
+            type="radio"
+            {name}
+            id="{name}-{i}"
+            class="govuk-radios__input"
+            value={option.value}
+            bind:group={selectedValue}
+            data-aria-controls={option.conditional?.id}
+            aria-describedby={[
+              option.hint ? `${name}-${i}-hint` : null,
+              option.conditional ? option.conditional.id : null,
+            ]
+              .filter(Boolean)
+              .join(" ")}
+            data-behaviour={option.exclusive ? "exclusive" : undefined}
+          />
+          <label
+            class="govuk-label govuk-radios__label"
+            for="{name}-{i}"
+            id="{name}-${i}-label"
+          >
+            {option.label}
+          </label>
+
+          {#if option.hint}
+            <div
+              id="{name}-{i}-hint"
+              class="govuk-hint govuk-radios__hint"
+              role="note"
+            >
+              {option.hint}
+            </div>
+          {/if}
+        </div>
+
+        {#if option.conditional}
+          <div
+            id={option.conditional.id}
+            class="govuk-radios__conditional{!isSupported ||
+            selectedValue !== option.value
+              ? ' govuk-radios__conditional--hidden'
+              : ''}"
+            role="region"
+            aria-labelledby="{name}-${i}-label"
+          >
+            {#if typeof option.conditional.content === "string"}
+              {@html option.conditional.content}
+            {:else if option.conditional.content satisfies Snippet}
+              {@render option.conditional.content()}
+            {:else}
+              <option.conditional.content />
+            {/if}
+          </div>
+        {/if}
+      {/each}
+    </div>
+  </fieldset>
+</div>

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

@@ -0,0 +1,28 @@
+import { SvelteComponent } from "svelte";
+import type { Snippet } from "svelte";
+export type RadioOption = {
+    value: string;
+    label: string;
+    hint?: string;
+    exclusive?: boolean;
+    conditional?: {
+        id: string;
+        content: string | typeof SvelteComponent | Snippet;
+    };
+};
+type $$ComponentProps = {
+    legend: string;
+    hint?: string;
+    error?: string;
+    name: string;
+    isPageHeading?: boolean;
+    legendSize?: "l" | "m" | "s";
+    small?: boolean;
+    inline?: boolean;
+    options?: RadioOption[];
+    validate?: (value: string) => string | undefined;
+    selectedValue?: string | null;
+};
+declare const Radios: import("svelte").Component<$$ComponentProps, {}, "selectedValue">;
+type Radios = ReturnType<typeof Radios>;
+export default Radios;