@communitiesuk/svelte-component-library 0.1.18 → 0.2.0-alpha.2

package/dist/components/layout/InternalHeader.svelte.d.ts

@@ -9,6 +9,7 @@ type $$ComponentProps = {
     firstSvgColor?: string;
     backgroundColor?: string;
     showSignOut?: boolean;
+    includeCrest?: boolean;
 };
 declare const InternalHeader: import("svelte").Component<$$ComponentProps, {}, "">;
 type InternalHeader = ReturnType<typeof InternalHeader>;

package/dist/components/ui/Button.svelte

@@ -4,6 +4,7 @@
     buttonType,
     componentNameProp = undefined,
     onClickFunction = undefined,
+    noPadding = false,
   } = $props();
 
   let buttonClass = $derived(
@@ -19,10 +20,10 @@
   );
 </script>
 
-<div class="p-4">
+{#if noPadding}
   {#if buttonType === "start"}
     <a
-      href="#"
+      href={"#"}
       role="button"
       draggable="false"
       class="govuk-button govuk-button--start"
@@ -63,14 +64,16 @@
         aria-hidden="true"
         role="img"
         viewBox="0 0 22 22"
-        fill="none"
+        fill="currentColor"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
+          class="top-triangle"
           d="M8.1875 9.5L10.9609 3.95703L13.7344 9.5H8.1875Z"
           fill="currentColor"
         ></path>
         <path
+          class="bottom-triangle"
           d="M13.7344 12.0781L10.9609 17.6211L8.1875 12.0781H13.7344Z"
           fill="currentColor"
         ></path>
@@ -86,7 +89,78 @@
       {textContent}
     </button>
   {/if}
-</div>
+{:else}
+  <div class="p-4">
+    {#if buttonType === "start"}
+      <a
+        href={"#"}
+        role="button"
+        draggable="false"
+        class="govuk-button govuk-button--start"
+        data-module="govuk-button"
+        onclick={onClickFunction}
+      >
+        {textContent}
+        <svg
+          class="govuk-button__start-icon"
+          xmlns="http://www.w3.org/2000/svg"
+          width="17.5"
+          height="19"
+          viewBox="0 0 33 40"
+          aria-hidden="true"
+          focusable="false"
+        >
+          <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path>
+        </svg>
+      </a>
+    {:else if buttonType === "disabled"}
+      <button
+        type="submit"
+        disabled
+        aria-disabled="true"
+        class="govuk-button"
+        data-module="govuk-button"
+        onclick={onClickFunction}
+      >
+        {textContent}
+      </button>
+    {:else if buttonType === "table header"}
+      <button type="button" class="text-header" onclick={onClickFunction}>
+        {textContent}
+        <svg
+          width="22"
+          height="22"
+          focusable="false"
+          aria-hidden="true"
+          role="img"
+          viewBox="0 0 22 22"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            class="top-triangle"
+            d="M8.1875 9.5L10.9609 3.95703L13.7344 9.5H8.1875Z"
+            fill="currentColor"
+          ></path>
+          <path
+            class="bottom-triangle"
+            d="M13.7344 12.0781L10.9609 17.6211L8.1875 12.0781H13.7344Z"
+            fill="currentColor"
+          ></path>
+        </svg>
+      </button>
+    {:else}
+      <button
+        type="button"
+        class={buttonClass}
+        data-module="govuk-button"
+        onclick={onClickFunction}
+      >
+        {textContent}
+      </button>
+    {/if}
+  </div>
+{/if}
 
 <style>
   .text-header {

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

@@ -8,10 +8,12 @@ declare const Button: import("svelte").Component<{
     buttonType: any;
     componentNameProp?: any;
     onClickFunction?: any;
+    noPadding?: boolean;
 }, {}, "">;
 type $$ComponentProps = {
     textContent?: any;
     buttonType: any;
     componentNameProp?: any;
     onClickFunction?: any;
+    noPadding?: boolean;
 };

package/dist/components/ui/CookieBanner.svelte

@@ -0,0 +1,356 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { browser } from "$app/environment";
+  import { page } from "$app/state";
+  import {
+    handleCookiesNavigation as handleCookiesNav,
+    createCookiesUrl,
+  } from "./../../utils/cookiesNavigation";
+
+  interface ConsentMode {
+    ad_storage: "granted" | "denied";
+    analytics_storage: "granted" | "denied";
+    personalization_storage: "granted" | "denied";
+    functionality_storage: "granted" | "denied";
+    security_storage: "granted" | "denied";
+    accepted?: boolean;
+    rejected?: boolean;
+  }
+
+  interface CookieBannerProps {
+    // Text content props
+    heading?: string;
+    essentialCookiesText?: string;
+    additionalCookiesText?: string;
+    acceptButtonText?: string;
+    rejectButtonText?: string;
+    viewCookiesText?: string;
+    acceptedMessage?: string;
+    rejectedMessage?: string;
+    changeSettingsText?: string;
+    hideMessageText?: string;
+
+    // Navigation props
+    cookiesPageUrl?: string;
+
+    // Accessibility props
+    ariaLabel?: string;
+
+    // Demo/isolation props
+    demoMode?: boolean;
+  }
+
+  let {
+    heading = "Cookies on MHCLG Svelte Component Library",
+    essentialCookiesText = "We use some essential cookies to make this service work.",
+    additionalCookiesText = "We'd like to set additional cookies so we can remember your settings, understand how people use the service and make improvements.",
+    acceptButtonText = "Accept additional cookies",
+    rejectButtonText = "Reject additional cookies",
+    viewCookiesText = "View cookies",
+    acceptedMessage = "You've accepted additional cookies. You can",
+    rejectedMessage = "You've rejected additional cookies. You can",
+    changeSettingsText = "change your cookie settings",
+    hideMessageText = "Hide cookie message",
+    cookiesPageUrl = "/cookies-page",
+    ariaLabel = "Cookies on MHCLG Svelte Component Library",
+    demoMode = false,
+  }: CookieBannerProps = $props();
+
+  // Banner state management
+  let bannerVisible = $state(true);
+  let currentMessage = $state<"initial" | "accepted" | "rejected">("initial");
+  let consentMode = $state<ConsentMode | null>(null);
+
+  // Initialize Google Tag Manager dataLayer
+  function initializeGTM(): void {
+    if (browser && typeof window !== "undefined") {
+      (window as any).dataLayer = (window as any).dataLayer || [];
+      (window as any).gtag = function () {
+        (window as any).dataLayer.push(arguments);
+      };
+    }
+  }
+
+  // Helper function to call gtag
+  function gtag(...args: any[]): void {
+    if (browser && (window as any).gtag) {
+      (window as any).gtag(...args);
+    }
+  }
+
+  // Load consent preferences from localStorage
+  function loadConsent(): ConsentMode | null {
+    if (!browser || demoMode) return null;
+
+    try {
+      const stored = localStorage.getItem("consentMode");
+      return stored ? JSON.parse(stored) : null;
+    } catch (e) {
+      console.error("Error loading consent from localStorage:", e);
+      return null;
+    }
+  }
+
+  // Save consent preferences to localStorage
+  function saveConsent(consent: ConsentMode): void {
+    if (!browser || demoMode) return;
+
+    try {
+      localStorage.setItem("consentMode", JSON.stringify(consent));
+    } catch (e) {
+      console.error("Error saving consent to localStorage:", e);
+    }
+  }
+
+  // Check if banner should be hidden
+  function isBannerHidden(): boolean {
+    if (!browser || demoMode) return false;
+    return localStorage.getItem("bannerHidden") === "true";
+  }
+
+  // Hide banner permanently
+  function hideBanner(): void {
+    if (!browser || demoMode) {
+      // In demo mode, just hide the banner without affecting storage
+      bannerVisible = false;
+      return;
+    }
+    localStorage.setItem("bannerHidden", "true");
+    bannerVisible = false;
+  }
+
+  // Set default denied consent
+  function setDefaultConsent(): ConsentMode {
+    const defaultConsent: ConsentMode = {
+      ad_storage: "denied",
+      analytics_storage: "denied",
+      personalization_storage: "denied",
+      functionality_storage: "denied",
+      security_storage: "denied",
+    };
+
+    if (!demoMode) {
+      gtag("consent", "default", defaultConsent);
+    }
+    saveConsent(defaultConsent);
+    return defaultConsent;
+  }
+
+  // Update consent and inform Google Analytics
+  function updateConsent(consent: ConsentMode): void {
+    if (!demoMode) {
+      gtag("consent", "update", consent);
+    }
+    saveConsent(consent);
+    consentMode = consent;
+
+    // Update current message based on consent
+    if (consent.accepted) {
+      currentMessage = "accepted";
+    } else if (consent.rejected) {
+      currentMessage = "rejected";
+    }
+  }
+
+  // Accept additional cookies
+  function acceptCookies(): void {
+    const consent: ConsentMode = {
+      ad_storage: "denied",
+      analytics_storage: "granted",
+      personalization_storage: "denied",
+      functionality_storage: "denied",
+      security_storage: "denied",
+      accepted: true,
+    };
+    updateConsent(consent);
+  }
+
+  // Reject additional cookies
+  function rejectCookies(): void {
+    const consent: ConsentMode = {
+      ad_storage: "denied",
+      analytics_storage: "denied",
+      personalization_storage: "denied",
+      functionality_storage: "denied",
+      security_storage: "denied",
+      rejected: true,
+    };
+    updateConsent(consent);
+  }
+
+  // Create wrapper function for demo mode handling
+  function handleCookiesNavigation(event: Event): void {
+    return handleCookiesNav(event, demoMode);
+  }
+
+  // Create the cookies page URL with current query parameters
+  let cookiesUrl = $derived(createCookiesUrl(cookiesPageUrl));
+
+  // Initialize component on mount
+  onMount(() => {
+    initializeGTM();
+
+    // Check if banner should be hidden
+    if (isBannerHidden()) {
+      bannerVisible = false;
+      return;
+    }
+
+    // Load existing consent or set defaults
+    const existingConsent = loadConsent();
+    if (existingConsent) {
+      consentMode = existingConsent;
+      gtag("consent", "update", existingConsent);
+
+      // Set initial message state based on existing consent
+      if (existingConsent.accepted) {
+        currentMessage = "accepted";
+      } else if (existingConsent.rejected) {
+        currentMessage = "rejected";
+      }
+    } else {
+      consentMode = setDefaultConsent();
+    }
+  });
+
+  // Handle storage changes (same tab - from cookies page)
+  function handleStorageChange(): void {
+    if (demoMode) return; // Don't respond to storage changes in demo mode
+
+    const updatedConsent = loadConsent();
+    const bannerHidden = isBannerHidden();
+
+    if (bannerHidden) {
+      bannerVisible = false;
+      return;
+    }
+
+    if (updatedConsent) {
+      consentMode = updatedConsent;
+      gtag("consent", "update", updatedConsent);
+
+      if (updatedConsent.accepted) {
+        currentMessage = "accepted";
+      } else if (updatedConsent.rejected) {
+        currentMessage = "rejected";
+      }
+    }
+  }
+
+  // Handle native storage events (cross-tab changes)
+  function handleCrossTabStorage(event: StorageEvent): void {
+    if (demoMode) return; // Don't respond to storage changes in demo mode
+
+    // Only respond to changes to our consentMode or bannerHidden keys
+    if (event.key === "consentMode" || event.key === "bannerHidden") {
+      handleStorageChange();
+    }
+  }
+</script>
+
+<!-- Listen for both native and custom storage events -->
+<svelte:window
+  onstorage={handleCrossTabStorage}
+  onlocalStorageChange={handleStorageChange}
+/>
+
+{#snippet settingsLink()}
+  <a href={cookiesUrl} class="govuk-link" onclick={handleCookiesNavigation}>
+    {changeSettingsText}
+  </a>
+{/snippet}
+
+{#snippet hideBannerButton()}
+  <button
+    type="button"
+    class="govuk-button"
+    data-module="govuk-button"
+    onclick={hideBanner}
+  >
+    {hideMessageText}
+  </button>
+{/snippet}
+
+{#snippet confirmationMessage(message)}
+  <div class="govuk-cookie-banner__message govuk-width-container">
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-two-thirds">
+        <div class="govuk-cookie-banner__content">
+          <p class="govuk-body">
+            {message}
+            {@render settingsLink()}
+            at any time.
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="govuk-button-group">
+      {@render hideBannerButton()}
+    </div>
+  </div>
+{/snippet}
+
+{#if bannerVisible}
+  <div
+    class="govuk-cookie-banner"
+    data-nosnippet
+    role="region"
+    aria-label={ariaLabel}
+  >
+    <!-- Initial consent request message -->
+    {#if currentMessage === "initial"}
+      <div class="govuk-cookie-banner__message govuk-width-container">
+        <div class="govuk-grid-row">
+          <div class="govuk-grid-column-two-thirds">
+            <h2 class="govuk-cookie-banner__heading govuk-heading-m">
+              {heading}
+            </h2>
+            <div class="govuk-cookie-banner__content">
+              <p class="govuk-body">{essentialCookiesText}</p>
+              <p class="govuk-body">{additionalCookiesText}</p>
+            </div>
+          </div>
+        </div>
+        <div class="govuk-button-group">
+          <button
+            type="button"
+            class="govuk-button"
+            data-module="govuk-button"
+            onclick={acceptCookies}
+          >
+            {acceptButtonText}
+          </button>
+          <button
+            type="button"
+            class="govuk-button"
+            data-module="govuk-button"
+            onclick={rejectCookies}
+          >
+            {rejectButtonText}
+          </button>
+          <a
+            href={cookiesUrl}
+            class="govuk-link"
+            onclick={handleCookiesNavigation}
+          >
+            {viewCookiesText}
+          </a>
+        </div>
+      </div>
+    {/if}
+
+    <!-- Accepted cookies confirmation message -->
+    {#if currentMessage === "accepted"}
+      {@render confirmationMessage(acceptedMessage)}
+    {/if}
+
+    <!-- Rejected cookies confirmation message -->
+    {#if currentMessage === "rejected"}
+      {@render confirmationMessage(rejectedMessage)}
+    {/if}
+  </div>
+{/if}
+
+<style>
+
+</style>

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

@@ -0,0 +1,18 @@
+interface CookieBannerProps {
+    heading?: string;
+    essentialCookiesText?: string;
+    additionalCookiesText?: string;
+    acceptButtonText?: string;
+    rejectButtonText?: string;
+    viewCookiesText?: string;
+    acceptedMessage?: string;
+    rejectedMessage?: string;
+    changeSettingsText?: string;
+    hideMessageText?: string;
+    cookiesPageUrl?: string;
+    ariaLabel?: string;
+    demoMode?: boolean;
+}
+declare const CookieBanner: import("svelte").Component<CookieBannerProps, {}, "">;
+type CookieBanner = ReturnType<typeof CookieBanner>;
+export default CookieBanner;