@onsvisual/svelte-components 0.0.7 → 0.0.9

package/dist/datavis/shared/data.js

@@ -0,0 +1,18 @@
+export default [
+  { year: 2017, value: 320, group: "apples" },
+  { year: 2017, value: 480, group: "bananas" },
+  { year: 2017, value: 640, group: "cherries" },
+  { year: 2017, value: 400, group: "dates" },
+  { year: 2018, value: 640, group: "apples" },
+  { year: 2018, value: 960, group: "bananas" },
+  { year: 2018, value: 640, group: "cherries" },
+  { year: 2018, value: 400, group: "dates" },
+  { year: 2019, value: 1600, group: "apples" },
+  { year: 2019, value: 1440, group: "bananas" },
+  { year: 2019, value: 960, group: "cherries" },
+  { year: 2019, value: 400, group: "dates" },
+  { year: 2020, value: 3840, group: "apples" },
+  { year: 2020, value: 1920, group: "bananas" },
+  { year: 2020, value: 960, group: "cherries" },
+  { year: 2020, value: 400, group: "dates" },
+];

package/dist/index.js

@@ -6,6 +6,8 @@ export { default as Theme } from "./wrappers/Theme/Theme.svelte";
 
 // Layout
 export { default as Accordion } from "./layout/Accordion/Accordion.svelte";
+export { default as AnalyticsBanner } from "./layout/AnalyticsBanner/AnalyticsBanner.svelte";
+export { AnalyticsEvent } from "./layout/AnalyticsBanner/AnalyticsBanner.svelte";
 export { default as Filler } from "./layout/Filler/Filler.svelte";
 export { default as Footer } from "./layout/Footer/Footer.svelte";
 export { default as Grid } from "./layout/Grid/Grid.svelte";

package/dist/inputs/Checkbox/Checkbox.svelte

@@ -0,0 +1,133 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+
+  /**
+   * ID for input element
+   * @type {string}
+   */
+  export let id;
+  /**
+   * Label for input
+   * @type {string}
+   */
+  export let label;
+  /**
+   * Binding for checked state of input
+   * @type {boolean}
+   */
+  export let checked = false;
+  /**
+   * Binding for checked state of input
+   * @type {boolean}
+   */
+  export let group = null;
+  /**
+   * (Optional) Extended description for element
+   * @type {string}
+   */
+  export let description = null;
+  /**
+   * Set display mode of checkbox
+   * @type {"default"|"ghost"}
+   */
+  export let variant = "default";
+  /**
+   * Option to disable input
+   * @type {boolean}
+   */
+  export let disabled = false;
+  /**
+   * Compact mode (no border)
+   * @type {boolean}
+   */
+  export let compact = false;
+</script>
+
+<span
+  class="ons-checkboxes__item"
+  class:ons-checkboxes__item--ghost="{variant === 'ghost'}"
+  class:ons-checkboxes__item--no-border="{compact}"
+>
+  <span class="ons-checkbox" class:ons-checkbox--no-border="{compact}">
+    {#if Array.isArray(group)}
+      <input
+        type="checkbox"
+        id="{id}"
+        value="{id}"
+        bind:group="{group}"
+        class="ons-checkbox__input ons-js-checkbox"
+        disabled="{disabled}"
+        aria-disabled="{disabled}"
+        on:change="{(e) => dispatch('change', e)}"
+      />
+    {:else}
+      <input
+        type="checkbox"
+        id="{id}"
+        value="{id}"
+        bind:checked="{checked}"
+        class="ons-checkbox__input ons-js-checkbox"
+        disabled="{disabled}"
+        aria-disabled="{disabled}"
+        on:change="{(e) => dispatch('change', e)}"
+      />
+    {/if}
+    <label
+      class="ons-checkbox__label"
+      class:ons-label--with-description="{description}"
+      for="{id}"
+      id="{id}-label"
+      aria-describedby="{description ? `${id}-label-description-hint` : null}"
+    >
+      {label}
+      {#if description}
+        <span class="ons-label__aria-hidden-description" aria-hidden="true"
+          ><span class="ons-label__description ons-radio__label--with-description">
+            {description}
+          </span></span
+        >
+      {/if}
+    </label>
+    {#if description}
+      <span
+        class="ons-label__visually-hidden-description ons-u-vh"
+        id="{id}-label-description-hint"
+      >
+        {description}
+      </span>
+    {/if}
+  </span>
+</span>
+
+<style>
+  .ons-checkboxes__item {
+    display: table;
+  }
+  .ons-checkbox__input:disabled {
+    border: 2px solid var(--ons-color-border-disabled);
+  }
+  .ons-checkboxes__item label::before {
+    background: none;
+    border-color: currentColor;
+    box-shadow: 0 0 0 1px currentColor;
+  }
+  .ons-checkboxes__item--ghost label::before {
+    opacity: 60%;
+  }
+  .ons-checkboxes__item .ons-checkbox__input:focus + .ons-checkbox__label::before {
+    box-shadow: 0 0 0 1px currentColor, 0 0 0 4px #fbc900;
+    opacity: 100%;
+  }
+  .ons-checkboxes__item input {
+    background: none;
+    border-color: currentColor;
+  }
+  .ons-checkboxes__item input::after {
+    border-color: currentColor;
+  }
+
+  .ons-checkboxes__item--no-border .ons-checkbox__input:focus {
+    box-shadow: 0 0 0 1px currentColor, 0 0 0 4px #fbc900;
+  }</style>

package/dist/inputs/Checkboxes/Checkboxes.svelte

@@ -0,0 +1,33 @@
+<script>
+  import Checkbox from "../Checkbox/Checkbox.svelte";
+
+  /**
+   * Label for grouped inputs
+   * @type {string}
+   */
+  export let label = "";
+  /** (Optional) Define the checkboxes as an array of {id, label, checked, description?}
+   * @type {array}
+   */
+  export let items = null;
+  /** Compact mode (no borders)
+   * @type {boolean}
+   */
+  export let compact = false;
+  /** Binding for selected checkboxes (if checkboxes are defined as "items")
+   * @type {array}
+   */
+  export let value = [];
+</script>
+
+{#if label}
+  <p class="ons-checkboxes__label">{label}</p>
+{/if}
+<div class="ons-checkboxes__items">
+  <slot />
+  {#if items}
+    {#each items as item, i}
+      <Checkbox {...item} group="{value}" compact="{compact}" on:change />
+    {/each}
+  {/if}
+</div>

package/dist/inputs/ErrorPanel/ErrorPanel.svelte

@@ -0,0 +1,35 @@
+<script>
+  /**
+   * Set an error message
+   * @type {string}
+   */
+  export let message = "";
+</script>
+
+<div class="ons-panel ons-panel--error ons-panel--no-title" id="number-of-employees-error">
+  <span class="ons-panel__assistive-text ons-u-vh">Error: </span>
+  <div class="ons-panel__body">
+    {#if message}
+      <p class="ons-panel__error">
+        <strong>{message}</strong>
+      </p>
+    {/if}
+    <slot />
+  </div>
+</div>
+
+<style>
+  .ons-panel {
+    color: rgb(34, 34, 34);
+  }
+  :global(.ons-panel__body a) {
+    color: #206095 !important;
+  }
+  :global(.ons-panel__body a:hover) {
+    color: rgb(0, 60, 87) !important;
+    -webkit-text-decoration: underline solid rgb(0, 60, 87) 2px !important;
+            text-decoration: underline solid rgb(0, 60, 87) 2px !important;
+  }
+  :global(.ons-panel__body .ons-input) {
+    background: white !important;
+  }</style>

package/dist/inputs/ErrorSummary/ErrorSummary.svelte

@@ -0,0 +1,40 @@
+<script>
+  import List from "../../layout/List/List.svelte";
+
+  /**
+   * Defines the title of the error
+   * @type {string}
+   */
+  export let title = "";
+  /**
+   * Define an array of errors/issues in the format {label, href?}
+   */
+  export let items = [];
+</script>
+
+<div aria-labelledby="alert" role="alert" tabindex="-1" class="ons-panel ons-panel--error">
+  <div class="ons-panel__header">
+    <h2 id="alert" data-qa="error-header" class="ons-panel__title ons-u-fs-r--b">{title}</h2>
+  </div>
+  <div class="ons-panel__body">
+    {#if Array.isArray(items)}
+      <List mode="number">
+        {#each items as item}
+          <li>
+            {#if item.href}
+              <a href="{item.href}">{item.label}</a>
+            {:else}
+              {item.label}
+            {/if}
+          </li>
+        {/each}
+      </List>
+    {/if}
+    <slot />
+  </div>
+</div>
+
+<style>
+  .ons-panel {
+    color: rgb(34, 34, 34);
+  }</style>

package/dist/inputs/Radios/Radio.svelte

@@ -0,0 +1,108 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+
+  /**
+   * Unique ID input
+   * @type {string}
+   */
+  export let id;
+  /**
+   * ID for radio group (required)
+   * @type {string}
+   */
+  export let groupId;
+  /**
+   * Label for input
+   * @type {string}
+   */
+  export let label;
+  /**
+   * Binding for ID of selected option
+   * @type {string}
+   */
+  export let value = null;
+  /**
+   * (Optional) Extended description for element
+   * @type {string}
+   */
+  export let description = null;
+  /**
+   * Compact mode (no border)
+   * @type {boolean}
+   */
+  export let compact = false;
+</script>
+
+<span class="ons-radios__item" class:ons-radios__item--no-border="{compact}">
+  <span class="ons-radio" class:ons-radio--no-border="{compact}">
+    <input
+      type="radio"
+      id="{id}"
+      bind:group="{value}"
+      value="{id}"
+      name="{groupId}"
+      class="ons-radio__input ons-js-radio"
+      on:change="{(e) => dispatch('change', e)}"
+    />
+    <label
+      class="ons-radio__label"
+      class:ons-label--with-description="{description}"
+      for="{id}"
+      id="{id}-label"
+      aria-describedby="{description ? `${id}-label-description-hint` : null}"
+    >
+      {label}
+      {#if description}
+        <span class="ons-label__aria-hidden-description" aria-hidden="true"
+          ><span class="ons-label__description ons-radio__label--with-description">
+            {description}
+          </span></span
+        >
+      {/if}
+    </label>
+    {#if description}
+      <span
+        class="ons-label__visually-hidden-description ons-u-vh"
+        id="{id}-label-description-hint"
+      >
+        {description}
+      </span>
+    {/if}
+  </span>
+</span>
+
+<style>
+  .ons-radios__item {
+    display: table;
+  }
+  .ons-radio__input {
+    border-color: currentColor !important;
+    background: none !important;
+    box-shadow: none !important;
+  }
+  .ons-radio--no-border .ons-radio__input:focus {
+    box-shadow: 0 0 0 1px currentColor, 0 0 0 4px #fbc900 !important;
+  }
+  .ons-radio__input:checked::after {
+    border-color: currentColor;
+  }
+  .ons-radio__input::after {
+    left: 50% !important;
+    top: 50% !important;
+    margin-left: -6px !important;
+    margin-top: -6px !important;
+    /* background-color: currentColor !important;
+    border-color: currentColor !important; */
+  }
+  .ons-radio__label::before {
+    background: none;
+    border-color: currentColor;
+  }
+  .ons-radio__input:checked + .ons-radio__label::before {
+    background: var(--pale, #f5f5f6);
+  }
+  .ons-radio__input:focus + .ons-radio__label::before {
+    box-shadow: 0 0 0 1px currentColor, 0 0 0 4px #fbc900;
+  }</style>

package/dist/inputs/Radios/Radios.svelte

@@ -0,0 +1,46 @@
+<script>
+  import Radio from "./Radio.svelte";
+
+  /**
+   * Unique ID for radio group (required)
+   * @type {string}
+   */
+  export let id = "name";
+  /**
+   * Label for grouped inputs
+   * @type {string}
+   */
+  export let label = "";
+  /**
+   * Binding for ID of selected option
+   * @type {string}
+   */
+  export let value = null;
+  /** (Optional) Define the radios as an array of {id, label, description?}
+   * @type {array}
+   */
+  export let items = [];
+  /**
+   * Compact mode (no border)
+   * @type {boolean}
+   */
+  export let compact = false;
+</script>
+
+{#if label}
+  <p class="ons-radios__label">{label}</p>
+{/if}
+<div class="ons-radios__items">
+  <slot />
+  {#each items as item, i}
+    <Radio
+      id="{item.id}"
+      label="{item.label}"
+      description="{item.description}"
+      groupId="{id}"
+      compact="{compact}"
+      bind:value="{value}"
+      on:change
+    />
+  {/each}
+</div>

package/dist/layout/AnalyticsBanner/AnalyticsBanner.svelte

@@ -0,0 +1,256 @@
+<script context="module">
+  export function analyticsEvent(props) {
+    if (window?.dataLayer) window.dataLayer.push(props);
+  }
+</script>
+
+<script>
+  import { onMount, getContext } from "svelte";
+
+  const page = getContext("page"); // Optional: Set Svelte Kit's page store to the context to track navigation in multi-page apps
+
+  /**
+   * Google analytics/tags manager ID
+   * @type {string}
+   */
+  export let analyticsId = "GTM-MBCBVQS";
+  /**
+   * Optional props to describe the content
+   * @type {object}
+   */
+  export let analyticsProps = {};
+  /**
+   * Bind to this value if you need to know if cookies have been accepted
+   * @type {boolean}
+   */
+  export let usageCookies = false;
+  /**
+   * Set the width of the banner
+   * @type {"medium"|"wide"}
+   */
+  export let width = "medium";
+
+  let live; // Don't run analytics unless page is live on ONS site (re-set in the onMount function)
+  let showBanner = false;
+  let showConfirm = false;
+  let message = "";
+  let lang = $page && $page.url.host.startsWith("cy") ? "cy" : "en";
+  let location = null; // For keeping track of navigation multi-page apps
+
+  function hasCookiesPreferencesSet() {
+    return -1 < document.cookie.indexOf("cookies_preferences_set=true");
+  }
+
+  // Check if usage cookies are allowed (for Google Analytics + Hotjar)
+  function getUsageCookieValue() {
+    var cookiesPolicyCookie = document.cookie.match(
+      new RegExp("(^|;) ?cookies_policy=([^;]*)(;|$)")
+    );
+    if (cookiesPolicyCookie) {
+      var decodedCookie = decodeURIComponent(cookiesPolicyCookie[2]);
+      var cookieValue = JSON.parse(decodedCookie);
+      return cookieValue.usage;
+    }
+    return false;
+  }
+
+  // Set site cookie with 'all' or 'essential' cookies
+  function setCookie(option) {
+    let oneYearInSeconds = 60 * 60 * 24 * 365;
+    let cookiesDomain = window.location.hostname;
+    let cookiesPreference = !0;
+    let encodedCookiesPolicy = `%7B%22essential%22%3Atrue%2C%22usage%22%3A${
+      option == "all" ? "true" : "false"
+    }%7D`;
+    let cookiesPath = "/";
+
+    document.cookie = `cookies_preferences_set=${cookiesPreference};max-age=${oneYearInSeconds};domain=${cookiesDomain};path=${cookiesPath};`;
+    document.cookie = `cookies_policy=${encodedCookiesPolicy};max-age=${oneYearInSeconds};domain=${cookiesDomain};path=${cookiesPath};`;
+
+    message = `You have ${option == "all" ? "accepted" : "rejected"} all additional cookies.`;
+    if (option == "all") usageCookies = true;
+    showConfirm = true;
+
+    if (option == "all") initAnalytics();
+  }
+
+  // Initialise analytics and 'window.dataLayer' (which can be used throughout the app)
+  function initAnalytics() {
+    console.log("initialising analytics");
+    window.dataLayer = [
+      {
+        analyticsOptOut: false,
+        "gtm.whitelist": ["google", "hjtc", "lcl"],
+        "gtm.blacklist": ["customScripts", "sp", "adm", "awct", "k", "d", "j"],
+        ...analyticsProps,
+      },
+    ];
+
+    (function (w, d, s, l, i) {
+      w[l] = w[l] || [];
+      w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
+      var f = d.head,
+        j = d.createElement(s),
+        dl = l != "dataLayer" ? "&l=" + l : "";
+      j.async = true;
+      j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
+      f.appendChild(j);
+    })(window, document, "script", "dataLayer", analyticsId);
+
+    if ($page) location = `${$page.url.href}`.replace($page.url.hash, "");
+  }
+
+  // This code is only relevant for multi-page Svelte Kit apps. It sends an analytics event when the URL changes
+  function onPageChange(page) {
+    if (page && location) {
+      const newlocation = `${page.url.href}`.replace(page.url.hash, "");
+      if (newlocation !== location) {
+        location = newlocation;
+        analyticsEvent({
+          event: "pageView",
+          pageURL: location,
+          ...analyticsProps,
+        });
+      }
+    }
+  }
+  $: onPageChange($page);
+
+  onMount(() => {
+    live = true;
+    //live = document.location.hostname == "www.ons.gov.uk" || document.location.hostname == "cy.ons.gov.uk";
+    if (!page) lang = document.location.host.startsWith("cy") ? "cy" : "en";
+    showBanner = !hasCookiesPreferencesSet();
+    usageCookies = getUsageCookieValue();
+    if (usageCookies && live) initAnalytics();
+  });
+
+  const texts = {
+    "Cookies on ons.gov.uk": "Cwcis ar ons.gov.uk",
+    "Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.":
+      "Ffeiliau bach a gaiff eu storio ar eich dyfais pan fyddwch yn mynd ar wefan yw cwcis. Rydym ni’n defnyddio rhai cwcis hanfodol i wneud i’r wefan hon weithio.",
+    "We would like to set": "Hoffem osod",
+    "additional cookies": "cwcis ychwanegol",
+    "to remember your settings and understand how you use the site. This helps us to improve our services.":
+      "er mwyn cofio eich gosodiadau a deall sut rydych chi’n defnyddio’r wefan. Mae hyn yn ein helpu ni i wella ein gwasanaethau.",
+    "Accept additional cookies": "Derbyn cwcis ychwanegol",
+    "Reject additional cookies": "Gwrthod cwcis ychwanegol",
+    "View cookies": "Gweld cwcis",
+    "You have accepted all additional cookies.": "Rydych chi wedi derbyn yr holl gwcis ychwanegol.",
+    "You have rejected all additional cookies.":
+      "Rydych chi wedi gwrthod yr holl gwcis ychwanegol.",
+    "You can": "Gallwch chi",
+    "change your cookie preferences": "newid eich dewisiadau o ran cwcis",
+    "at any time.": "ar unrhyw adeg.",
+    Hide: "Cuddio",
+  };
+  const i18n = (text) => (lang == "cy" && texts[text] ? texts[text] : text);
+</script>
+
+{#if showBanner}
+  <div
+    class="ons-cookies-banner"
+    role="region"
+    aria-label="Cookies banner"
+    style:display="{showBanner ? "block" : null}"
+  >
+    {#if !showConfirm}
+      <form
+        action="/cookies/accept-all"
+        method="GET"
+        id="global-cookie-message"
+        aria-label="cookie banner"
+      >
+        <div
+          class="ons-container ons-cookies-banner__primary"
+          class:ons-page__container--wide="{width === 'wide'}"
+        >
+          <div class="ons-grid">
+            <div class="ons-grid__col ons-col-8@m">
+              <h2 class="ons-cookies-banner__title ons-u-mb-xs">{i18n("Cookies on ons.gov.uk")}</h2>
+              <div class="ons-cookies-banner__statement">
+                <p>
+                  {i18n(
+                    "Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work."
+                  )}
+                </p>
+                <p>
+                  {i18n("We would like to set")} <a href="/cookies">{i18n("additional cookies")}</a>
+                  {i18n(
+                    "to remember your settings and understand how you use the site. This helps us to improve our services."
+                  )}
+                </p>
+              </div>
+            </div>
+          </div>
+          <div class="ons-grid ons-grid--flex ons-u-mt-s">
+            <div class="ons-grid__col">
+              <button
+                type="submit"
+                class="ons-btn ons-btn--small ons-js-accept-cookies ons-cookies-banner__btn"
+                data-button="accept"
+                on:click|preventDefault="{() => setCookie('all')}"
+              >
+                <span class="ons-btn__inner"
+                  ><span class="ons-btn__text">{i18n("Accept additional cookies")}</span>
+                </span>
+              </button>
+            </div>
+            <div class="ons-grid__col">
+              <button
+                type="button"
+                class="ons-btn ons-btn--small ons-js-reject-cookies ons-cookies-banner__btn"
+                data-button="reject"
+                on:click|preventDefault="{() => setCookie('reject')}"
+              >
+                <span class="ons-btn__inner"
+                  ><span class="ons-btn__text">{i18n("Reject additional cookies")}</span>
+                </span>
+              </button>
+            </div>
+            <div class="ons-grid__col">
+              <a class="ons-cookies-banner__link" href="/cookies">{i18n("View cookies")}</a>
+            </div>
+          </div>
+        </div>
+      </form>
+    {:else}
+      <div
+        class="ons-container ons-cookies-banner__confirmation"
+        class:ons-page__container--wide="{width === 'wide'}"
+      >
+        <div
+          class="ons-grid ons-grid--flex ons-grid--between ons-grid--gutterless ons-grid--no-wrap@s ons-grid--vertical-center"
+        >
+          <div class="ons-grid__col ons-grid__col--flex ons-col-auto ons-u-flex-shrink@s">
+            <p class="ons-cookies-banner__desc ons-u-mb-no@s ons-u-mr-s@s">
+              <span>{i18n(message)}</span>
+              <span class="ons-cookies-banner__preferences-text"
+                >{i18n("You can")} <a href="/cookies">{i18n("change your cookie preferences")}</a>
+                {i18n("at any time")}.</span
+              >
+            </p>
+          </div>
+          <div class="ons-grid__col">
+            <button
+              type="button"
+              class="ons-btn ons-btn--secondary ons-btn--small ons-js-hide-button"
+              on:click="{() => (showBanner = false)}"
+            >
+              <span class="ons-btn__inner"><span class="ons-btn__text">{i18n("Hide")}</span> </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .ons-cookies-banner {
+    /* padding: 0; */
+    background: none !important;
+  }
+  .ons-page__container--wide {
+    max-width: 1240px;
+  }</style>