@onsvisual/svelte-components 0.0.1

package/dist/components/ui/Input/Input.svelte

@@ -0,0 +1,163 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+
+  /**
+   * ID for &lt;input&gt; element
+   * @type {string}
+   */
+  export let id = "";
+  /**
+   * A prop to bind to for the entered value
+   * @type {string}
+   */
+  export let value = "";
+  /**
+   * A label to describe the &lt;input&gt; element (expected for accessibility)
+   * @type {string}
+   */
+  export let label = "Enter some text";
+  /**
+   * Visually hide the label
+   * @type {boolean}
+   */
+  export let hideLabel = false;
+  /**
+   * An optional description to help users know what to enter
+   * @type {string}
+   */
+  export let description = "";
+  /**
+   * The maximum number of characters that can be entered (optional)
+   * @type {number}
+   */
+  export let charLimit = null;
+  /**
+   * The width of the &lt;input&gt; in characters
+   * @type {number}
+   */
+  export let width = null;
+  /**
+   * An optional prefix (eg. £) to appear on the left of the input
+   * @type {string}
+   */
+  export let prefix = "";
+  /**
+   * An optional suffix (eg. %) to appear on the right of the input
+   * @type {string}
+   */
+  export let suffix = "";
+  /**
+   * An optional hidden description of the prefix (for accessibility)
+   * @type {string}
+   */
+  export let unitLabel = prefix || suffix || "";
+  /**
+   * An optional regex pattern foto limit the input (not currently used)
+   * @type {string}
+   */
+  export let pattern = "";
+  /**
+   * Set to `true` if the value should be a number
+   * @type {boolean}
+   */
+  export let numeric = false;
+  /**
+   * Set to `true` to highlight border in red
+   * @type {boolean}
+   */
+  export let error = false;
+</script>
+
+<div class="ons-field">
+  {#if label}
+    <label
+      class="ons-label"
+      class:ons-label--with-description="{description}"
+      class:ons-u-vh="{hideLabel}"
+      aria-describedby="{description ? `${id}-description-hint` : null}"
+      for="{id}"
+    >
+      {label}
+    </label>
+  {/if}
+  {#if description}
+    <span id="{id}-description-hint" class="ons-label__description ons-input--with-description">
+      {description}
+    </span>
+  {/if}
+  {#if prefix || suffix}
+    <span class="ons-input-type" class:ons-input-type--prefix="{prefix}">
+      <span class="ons-input-type__inner">
+        <input
+          type="text"
+          id="{id}"
+          bind:value="{value}"
+          maxlength="{charLimit}"
+          pattern="{pattern ? pattern : numeric ? '[0-9]*' : null}"
+          inputmode="{numeric ? 'numeric' : null}"
+          class="ons-input ons-input--text ons-input-type__input {Number.isInteger(width)
+            ? `ons-input--w-${width}`
+            : ''}"
+          class:ons-input--error="{error}"
+          aria-labelledby="{id} {id}-unit"
+          aria-describedby="{description ? `${id}-description-hint` : null}"
+          on:change="{(e) => dispatch('change', e)}"
+        />
+        <abbr
+          id="{id}-unit"
+          class="ons-input-type__type ons-js-input-abbr"
+          aria-label="{unitLabel}"
+          role="figure"
+          title="{unitLabel}">{prefix || suffix}</abbr
+        >
+      </span>
+    </span>
+  {:else}
+    <input
+      type="text"
+      id="{id}"
+      bind:value="{value}"
+      pattern="{pattern ? pattern : numeric ? '[0-9]*' : null}"
+      inputmode="{numeric ? 'numeric' : null}"
+      class="ons-input ons-input--text ons-input-type__input {Number.isInteger(width)
+        ? `ons-input--w-${width}`
+        : ''}"
+      class:ons-input--error="{error}"
+      aria-describedby="{description ? `${id}-description-hint` : null}"
+      on:change="{(e) => dispatch('change', e)}"
+    />
+  {/if}
+</div>
+
+<style>
+  .ons-input {
+    background: none;
+    border-color: currentColor;
+  }
+  .ons-input--error {
+    background: none;
+    border-color: rgb(208, 2, 27);
+  }
+  .ons-input--error:focus {
+    border-color: currentColor;
+  }
+  .ons-js-input-abbr {
+    background: var(--hinted, #e2e2e3);
+    border-color: currentColor;
+  }
+  .ons-input-type--prefix .ons-input--error {
+    border-left-color: currentColor;
+    border-right-color: rgb(208, 2, 27);
+  }
+  .ons-input--error + .ons-js-input-abbr {
+    color: #e2e2e3;
+    border-color: #222;
+  }
+  .ons-input-type__input:focus + .ons-input-type__type::after {
+    box-shadow: 0 0 0 1px currentColor, 0 0 0 4px #fbc900;
+  }
+  .ons-input-type__input.ons-input--error:focus + .ons-input-type__type::after {
+    box-shadow: 0 0 0 1px #222, 0 0 0 4px #fbc900;
+  }</style>

package/dist/components/ui/Select/Select.svelte

@@ -0,0 +1,257 @@
+<script>
+  import SelectInner from "svelte-select";
+
+  /**
+   * Unique id for the element
+   * @type {string}
+   */
+  export let id = "";
+  /**
+   * The mode can be either "default" or "search"
+   * @type {"default"|"search"}
+   */
+  export let mode = "default";
+  /**
+   * Enable multi-select mode
+   * @type {boolean}
+   */
+  export let multiple = false;
+  /**
+   * Set a limit on the number of items in multi-select mode
+   * @type {number}
+   */
+  export let maxSelected = 4;
+  /**
+   * Defines whether the selection can be cleared
+   * @type {boolean}
+   */
+  export let clearable = true;
+  /**
+   * A label to describe the element (expected for accessibility)
+   * @type {string}
+   */
+  export let label = "";
+  /**
+   * Visually hide the label
+   * @type {boolean}
+   */
+  export let hideLabel = false;
+  /**
+   * An optional placeholder text
+   * @type {string}
+   */
+  export let placeholder = "Select an option";
+  /**
+   * A prop to bind to for the selected value (will be an array for multi-select)
+   * @type {object}
+   */
+  export let value = null;
+  /**
+   * An array of options, formatted {id, label}
+   * @type {array}
+   */
+  export let options = [];
+  /**
+   * The attribute of an option defines its ID
+   * @type {string}
+   */
+  export let idKey = "id";
+  /**
+   * The attribute of an option defines its label/name
+   * @type {string}
+   */
+  export let labelKey = "label";
+  /**
+   * Defines the width of the input in characters
+   * @type {number}
+   */
+  export let width = 30;
+  /**
+   * An array of colours for multi-select
+   * @type {array}
+   */
+  export let colors = [
+    "#206095",
+    "#a8bd3a",
+    "#871a5b",
+    "#27a0cc",
+    "rgb(0, 60, 87)",
+    "rgb(116, 108, 177)",
+    "rgb(246, 96, 104)",
+    "rgb(0, 163, 166)",
+  ];
+  /**
+   * A function to filter items based on the entered text
+   * @type {function}
+   */
+  export let itemFilter = (label, filterText, option) =>
+    label.match(new RegExp(`\\b${filterText}`, "i")) &&
+    !(multiple && value?.length >= maxSelected) &&
+    !(mode === "search" && filterText?.length < 3);
+  /**
+   * An optional function to load options based on the entered text
+   * @type {function}
+   */
+  export let loadOptions = null;
+  /**
+   * Optional params for positioning the dropdown
+   * @type {object} floatingConfig
+   */
+  export let floatingConfig = {};
+
+  $: style = colors.map((c, i) => `--item${i + 1}:${c}`).join(";");
+  $: noOptionsMessage =
+    multiple && value?.length >= maxSelected
+      ? `You can only select up to ${maxSelected} options`
+      : mode === "search" && filterText.length < 3
+      ? "Enter 3 or more characters to see options"
+      : filterText
+      ? `No options match <b>${filterText}</b>`
+      : "No options available";
+
+  let filterText = "";
+</script>
+
+<div class="ons-field" style="{style}">
+  {#if label}
+    <label class="ons-label" for="{id}" class:ons-u-vh="{hideLabel}">{label}</label>
+  {/if}
+  <div class="ons-themed-select {Number.isInteger(width) ? `ons-input--w-${width}` : ''}">
+    <SelectInner
+      id="{id}"
+      placeholder="{placeholder}"
+      loadOptions="{loadOptions}"
+      itemFilter="{itemFilter}"
+      floatingConfig="{floatingConfig}"
+      bind:filterText="{filterText}"
+      bind:value="{value}"
+      items="{options}"
+      itemId="{idKey}"
+      label="{labelKey}"
+      showChevron="{!value}"
+      multiple="{multiple}"
+      clearable="{clearable}"
+      on:input
+      on:change
+      on:focus
+      on:blur
+      on:clear
+    >
+      <div slot="item" let:item>
+        {@html item[labelKey].replace(
+          new RegExp(`\\b${filterText}`, "i"),
+          (str) => `<b>${str}</b>`
+        )}
+      </div>
+      <div slot="empty">{@html noOptionsMessage}</div>
+      <div slot="chevron-icon" style:transform="{mode === "search" ? "translateY(2px)" : null}">
+        {#if mode === "search"}
+          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 12 12" width="20">
+            <path
+              fill="currentColor"
+              d="M11.86 10.23 8.62 6.99a4.63 4.63 0 1 0-6.34 1.64 4.55 4.55 0 0 0 2.36.64 4.65 4.65 0 0 0 2.33-.65l3.24 3.23a.46.46 0 0 0 .65 0l1-1a.48.48 0 0 0 0-.62Zm-5-3.32a3.28 3.28 0 0 1-2.31.93 3.22 3.22 0 1 1 2.35-.93Z"
+            ></path>
+          </svg>
+        {:else}
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+            viewBox="0 0 11.75 7.7"
+            width="18"
+          >
+            <path
+              fill="currentColor"
+              d="m1.37.15 4.5 5.1 4.5-5.1a.37.37 0 0 1 .6 0l.7.7a.45.45 0 0 1 0 .5l-5.5 6.2a.37.37 0 0 1-.6 0l-5.5-6.1a.64.64 0 0 1 0-.6l.7-.7a.64.64 0 0 1 .6 0Z"
+            ></path>
+          </svg>
+        {/if}
+      </div>
+      <div slot="clear-icon" style:transform="translateY(2px)">
+        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 14 14" width="18">
+          <path
+            fill="currentColor"
+            d="M13.6 1 l -0.71 -0.71 a 0.5 0.5 0 0 0 -0.71 0 l -5.25 5.25 l -5.25 -5.25 a 0.51 0.51 0 0 0 -0.71 0 l -0.71 0.71 a 0.5 0.5 0 0 0 0 0.71 l 5.25 5.25 l -5.25 5.25 a 0.5 0.5 0 0 0 0 0.71 l 0.71 0.71 a 0.5 0.5 0 0 0 0.71 0 l 5.25 -5.25 l 5.25 5.25 a 0.5 0.5 0 0 0 0.71 0 l 0.71 -0.71 a 0.5 0.5 0 0 0 0 -0.71 l -5.25 -5.25 l 5.25 -5.25 a 0.5 0.5 0 0 0 0 -0.71Z"
+          ></path>
+        </svg>
+      </div>
+    </SelectInner>
+  </div>
+</div>
+
+<style>
+  div[slot="empty"] {
+    background-color: rgb(226, 226, 227);
+    padding: 6px 10px;
+  }
+  .ons-themed-select {
+    --border: 1px solid currentColor;
+    --border-hover: 1px solid currentColor;
+    --border-focused: 1px solid currentColor;
+    --border-radius: 3px;
+    --font-size: 18px;
+    --placeholder-color: currentColor;
+    --padding: 0 0 0 10px;
+    --list-border: 1px solid currentColor;
+    --item-hover-bg: #003c57;
+    --item-hover-color: white;
+    --item-is-active-bg: #003c57;
+    --item-padding: 0 0 0 10px;
+    --multi-item-outline: none;
+    --multi-item-height: 30px;
+    --value-container-padding: 3px 0;
+    --multi-select-padding: 0 0 0 6px;
+  }
+  :global(.ons-themed-select > .svelte-select:focus-within) {
+    outline: 3px solid #fbc900;
+  }
+  :global(.ons-themed-select > .svelte-select:focus-within::before) {
+    content: "";
+    outline: 1px solid rgb(34, 34, 34);
+    outline-offset: -1px;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    pointer-events: none;
+  }
+  :global(.ons-themed-select .svelte-select-list) {
+    z-index: 4 !important;
+    color: #222;
+  }
+  :global(.ons-themed-select .svelte-select-list > div + div) {
+    border-top: 1px solid rgb(34, 34, 34);
+  }
+  :global(.ons-themed-select .multi-item) {
+    color: white !important;
+    font-weight: bold;
+  }
+  :global(.ons-themed-select .multi-item svg > path) {
+    fill: white !important;
+  }
+  :global(.ons-themed-select .multi-item:nth-of-type(1)) {
+    background-color: var(--item1, #ebedef) !important;
+  }
+  :global(.ons-themed-select .multi-item:nth-of-type(2)) {
+    background-color: var(--item2, #ebedef) !important;
+  }
+  :global(.ons-themed-select .multi-item:nth-of-type(3)) {
+    background-color: var(--item3, #ebedef) !important;
+  }
+  :global(.ons-themed-select .multi-item:nth-of-type(4)) {
+    background-color: var(--item4, #ebedef) !important;
+  }
+  :global(.ons-themed-select .multi-item:nth-of-type(5)) {
+    background-color: var(--item1, #ebedef) !important;
+  }
+  :global(.ons-themed-select .multi-item:nth-of-type(6)) {
+    background-color: var(--item2, #ebedef) !important;
+  }
+  :global(.ons-themed-select .multi-item:nth-of-type(7)) {
+    background-color: var(--item3, #ebedef) !important;
+  }
+  :global(.ons-themed-select .multi-item:nth-of-type(8)) {
+    background-color: var(--item4, #ebedef) !important;
+  }
+  .ons-field {
+    overflow: visible;
+  }</style>

package/dist/components/ui/Textarea/Textarea.svelte

@@ -0,0 +1,99 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+
+  /**
+   * ID for &lt;textarea&gt; element
+   * @type {string}
+   */
+  export let id = "";
+  /**
+   * A prop to bind to for the entered value
+   * @type {string}
+   */
+  export let value = "";
+  /**
+   * A label to describe the &lt;textarea&gt; element (expected for accessibility)
+   * @type {string}
+   */
+  export let label = "Enter some text";
+  /**
+   * Visually hide the label
+   * @type {boolean}
+   */
+  export let hideLabel = false;
+  /**
+   * An optional description to help users know what to enter
+   * @type {string}
+   */
+  export let description = "";
+  /**
+   * The maximum number of characters that can be entered (optional)
+   * @type {number}
+   */
+  export let charLimit = null;
+  /**
+   * The height of the &lt;textarea&gt; element in rows
+   * @type {number}
+   */
+  export let rows = 8;
+  /**
+   * The width of the &lt;textarea&gt; element in characters
+   * @type {number}
+   */
+  export let width = 30;
+
+  $: remaining = charLimit && value.length ? charLimit - value.length : charLimit || null;
+</script>
+
+<div class="ons-field">
+  {#if label}
+    <label
+      class="ons-label ons-label--with-description"
+      class:ons-u-vh="{hideLabel}"
+      aria-describedby="{description ? `${id}-description-hint` : null}"
+      for="{id}">{label}</label
+    >
+  {/if}
+  {#if description}
+    <span id="{id}-description-hint" class="ons-label__description ons-input--with-description"
+      >{description}</span
+    >
+  {/if}
+  <textarea
+    id="{id}"
+    bind:value="{value}"
+    class="ons-input ons-input--textarea {Number.isInteger(width) ? `ons-input--w-${width}` : null}"
+    class:ons-js-char-limit-input="{charLimit}"
+    class:ons-input--limit-reached="{remaining === 0}"
+    name="{id}"
+    rows="{rows}"
+    maxlength="{charLimit}"
+    data-char-limit-ref="{id}-lim"
+    aria-describedby="textarea-char-limit-lim"></textarea>
+  {#if Number.isInteger(remaining)}
+    <span
+      id="textarea-char-limit-lim"
+      class="ons-input__limit ons-u-fs-s--b ons-u-mt-xs"
+      class:ons-input__limit--reached="{remaining === 0}"
+      data-charcount-singular="You have {remaining} character remaining"
+      data-charcount-plural="You have {remaining} characters remaining"
+      data-charcount-limit-singular=""
+      data-charcount-limit-plural=""
+      aria-live="{remaining === 0 ? 'assertive' : 'polite'}"
+    >
+      You have {remaining}
+      {remaining === 1 ? "character" : "characters"} remaining
+    </span>
+  {/if}
+</div>
+
+<style>
+  .ons-input--textarea {
+    background: var(--background, white);
+    border-color: currentColor;
+  }
+  .ons-input--textarea:focus {
+    box-shadow: 0 0 0 1px currentColor, 0 0 0 4px #fbc900;
+  }</style>

package/dist/css/main.css

@@ -0,0 +1,55 @@
+@import url("https://cdn.ons.gov.uk/sdc/design-system/64.0.0/css/main.css");
+@import url("https://cdn.ons.gov.uk/dp-design-system/cc82c54/css/main.css");
+
+/* Overrides */
+.ons-page__content {
+  padding-bottom: 0;
+}
+
+/* Theme settings */
+html,
+body {
+  --text: #222;
+  --muted: #777;
+  --hinted: #e2e2e3;
+  --pale: #f0f0f0;
+  --background: #fff;
+  --link: #206095;
+  --link-hover: #003c57;
+}
+.theme-wrapper {
+  color: var(--text);
+  background: var(--background);
+  --ons-color-text: var(--text);
+  --ons-color-text-light: var(--muted);
+  --ons-color-borders: var(--muted);
+}
+a {
+  color: var(--link, --ons-color-text-link);
+}
+a:hover {
+  text-decoration: underline solid
+    var(--link-hover, --ons-color-text-link-hover) 2px;
+}
+a:hover {
+  color: var(--link-hover, --ons-color-text-link-hover);
+}
+.form-label-bold {
+  color: var(--text, #222);
+}
+.form-control {
+  background: none;
+  border-color: var(--text, #222);
+  color: var(--text, #222);
+}
+
+/* Additional global styles */
+.ons-spacer {
+  display: block;
+  height: 40px;
+  margin: 0;
+  padding: 0;
+}
+.ons-font-weight__normal {
+  font-weight: normal;
+}

package/dist/globals.d.ts

@@ -0,0 +1,23 @@
+interface ChartbeatConfig {
+  uid?: number;
+  domain?: string;
+  flickerControl?: boolean;
+  useCanonical?: boolean;
+  useCanonicalDomain?: boolean;
+  sections?: string;
+  authors?: string;
+}
+
+declare global {
+  // eslint-disable-next-line no-unused-vars
+  interface Window {
+    /** Google analytics dataLayer */
+    dataLayer: Record<string, any>,
+    /** Chartbeat config */
+    _sf_async_config: ChartbeatConfig,
+    /** Chartbeat method */
+    pSUPERFLY: (config: { path: string, title: string }) => void,
+  }
+}
+
+export {};

package/dist/index.js

@@ -0,0 +1,16 @@
+// Layout
+export { default as Accordion } from "./components/layout/Accordion/Accordion.svelte";
+export { default as Container } from "./components/layout/Container/Container.svelte";
+export { default as Footer } from "./components/layout/Footer/Footer.svelte";
+export { default as Header } from "./components/layout/Header/Header.svelte";
+export { default as Section } from "./components/layout/Section/Section.svelte";
+export { default as Theme } from "./components/layout/Theme/Theme.svelte";
+export { default as Twisty } from "./components/layout/Twisty/Twisty.svelte";
+
+// UI
+export { default as Button } from "./components/ui/Button/Button.svelte";
+export { default as Dropdown } from "./components/ui/Dropdown/Dropdown.svelte";
+export { default as Em } from "./components/ui/Em/Em.svelte";
+export { default as Input } from "./components/ui/Input/Input.svelte";
+export { default as Select } from "./components/ui/Select/Select.svelte";
+export { default as Textarea } from "./components/ui/Textarea/Textarea.svelte";

package/dist/js/utils.js

@@ -0,0 +1,41 @@
+// const randomString = () => {
+//   return Math.random().toString(16).slice(2, 8);
+// };
+
+export const slugify = (str, suffix = true) =>
+  str
+    .toString()
+    .normalize("NFD")
+    .replace(/[\u0300-\u036f]/g, "")
+    .toLowerCase()
+    .trim()
+    .replace(/\s+/g, "-")
+    .replace(/[^\w-]+/g, "")
+    .replace(/--+/g, "-");
+// .concat(suffix ? `-${randomString()}` : "");
+
+export const validDate = (str) => {
+  const date = new Date(str);
+  return !isNaN(date);
+};
+
+export const formatDate = (
+  str,
+  locale = "en-GB",
+  opts = { year: "numeric", month: "long", day: "2-digit" }
+) => {
+  const date = new Date(str);
+  return date.toLocaleDateString(locale, opts);
+};
+
+export const commas = (num) => {
+  const parts = String(num).split(".");
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return parts.join(".");
+};
+
+export const ascending = (a, b) =>
+  a == null || b == null ? NaN : a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
+
+export const descending = (a, b) =>
+  a == null || b == null ? NaN : b < a ? -1 : b > a ? 1 : b >= a ? 0 : NaN;