@onsvisual/svelte-components 0.1.102-component.toolbar → 0.1.103

package/dist/index.js

@@ -41,6 +41,7 @@ export { default as Titleblock } from "./layout/Titleblock/Titleblock.svelte";
 export { default as Twisty } from "./layout/Twisty/Twisty.svelte";
 
 // Inputs
+export { default as AccessibleSelect } from "./inputs/AccessibleSelect/AccessibleSelect.svelte";
 export { default as Button } from "./inputs/Button/Button.svelte";
 export { default as Checkbox } from "./inputs/Checkbox/Checkbox.svelte";
 export { default as Checkboxes } from "./inputs/Checkboxes/Checkboxes.svelte";
@@ -52,16 +53,6 @@ export { default as Radio } from "./inputs/Radios/Radio.svelte";
 export { default as Radios } from "./inputs/Radios/Radios.svelte";
 export { default as Select } from "./inputs/Select/Select.svelte";
 export { default as Textarea } from "./inputs/Textarea/Textarea.svelte";
-export { default as HelpModal } from "./inputs/Toolbar/HelpModal.svelte";
-export { default as Icon } from "./inputs/Toolbar/Icon.svelte";
-export { default as Toolbar } from "./inputs/Toolbar/Toolbar.svelte";
-export { default as ToolbarButton } from "./inputs/Toolbar/ToolbarButton.svelte";
-export { default as ToolbarDivider } from "./inputs/Toolbar/ToolbarDivider.svelte";
-export { default as ToolbarsContainer } from "./inputs/Toolbar/ToolbarsContainer.svelte";
-export { default as ToolControl } from "./inputs/Toolbar/ToolControl.svelte";
-export { default as ToolControls } from "./inputs/Toolbar/ToolControls.svelte";
-export { default as ButtonGroup } from "./inputs/ButtonGroup/ButtonGroup.svelte";
-export { default as ButtonGroupItem } from "./inputs/ButtonGroup/ButtonGroupItem.svelte";
 
 // Decorators
 export { default as Blockquote } from "./decorators/Blockquote/Blockquote.svelte";

package/dist/inputs/AccessibleSelect/AccessibleSelect.svelte

@@ -0,0 +1,280 @@
+<script>
+  // @ts-nocheck
+
+  import { onMount, createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+  const sleep = (ms = 1000) => new Promise((resolve) => setTimeout(resolve, ms));
+  const chevron = (opts) =>
+    `<svg class="${opts?.className}" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 11.75 7.7" width="18" style="z-index:1"><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>`;
+
+  let inputElement;
+  let scriptLoaded;
+  let accessibleAutocomplete;
+  let hideMenu = false;
+
+  /**
+   * Unique id for the element
+   * @type {string}
+   */
+  export let id = "autocomplete";
+  /**
+   * The mode can be either "default" or "search"
+   * @type {"default"|"search"}
+   */
+  export let mode = "default";
+  /**
+   * Defines whether the selection can be cleared
+   * @type {boolean}
+   */
+  export let clearable = mode !== "search";
+  /**
+   * Clear value on selection (default for "search" mode)
+   * @type {boolean}
+   */
+  export let autoClear = mode === "search";
+  /**
+   * A label to describe the element (expected for accessibility)
+   * @type {string}
+   */
+  export let label = mode === "search" ? "Type to select" : "Select an option";
+  /**
+   * Visually hide the label
+   * @type {boolean}
+   */
+  export let hideLabel = false;
+  /**
+   * An optional placeholder text
+   * @type {string}
+   */
+  export let placeholder = mode === "search" ? "Enter text" : "Select one";
+  /**
+   * A prop to bind to for the selected value
+   * @type {object}
+   */
+  export let value = null;
+  /**
+   * An array of options, formatted {id, label}
+   * @type {array}
+   */
+  export let options = [];
+  /**
+   * The attribute of an option that defines its label/name
+   * @type {string}
+   */
+  export let labelKey = "label";
+  /**
+   * The attribute of an option that defines its group (optional)
+   * @type {string|null}
+   */
+  export let groupKey = null;
+  /**
+   * Optional: Minimum query length to return results
+   * @type {number}
+   */
+  export let minLength = mode === "search" ? 1 : 0;
+  /**
+   * Optional: Override function for loading/filtering options based on the entered text
+   * @type {function}
+   */
+  export let loadOptions = (query, populateResults) => {
+    const filteredResults =
+      mode !== "search" && options.map((opt) => opt[labelKey]).includes(query)
+        ? options
+        : options.filter((opt) =>
+            opt[labelKey].match(new RegExp(`\\b${query.replace(/[^\w\s]/gi, "")}`, "i"))
+          );
+    populateResults(filteredResults);
+  };
+  /**
+   * Optional: Override the default CDN URL for the accessible-autocomplete script
+   * @type {string}
+   */
+  export let scriptUrl =
+    "https://cdn.ons.gov.uk/vendor/accessible-autocomplete/3.0.1/accessible-autocomplete.min.js";
+
+  // This clearing method is a bit of a hack, but no better options available at present
+  // https://github.com/alphagov/accessible-autocomplete/issues/390
+  /**
+   * Call this function externally to clear the input
+   * @type {function}
+   */
+  export async function clearInput() {
+    hideMenu = true;
+    inputElement.value = "";
+    await sleep(110);
+    inputElement.focus({ preventScroll: true });
+    inputElement.blur();
+    hideMenu = false;
+    dispatch("clear", value);
+  }
+
+  function inputValueTemplate(result) {
+    return result && result[labelKey];
+  }
+
+  function highlight(text, query = "") {
+    return text.replace(
+      new RegExp(`\\b${query.replace(/[^\w\s]/gi, "")}`, "i"),
+      (str) => `<b>${str}</b>`
+    );
+  }
+
+  function suggestionTemplate(result) {
+    const query = inputElement?.value || "";
+    return (
+      result &&
+      (groupKey
+        ? `${highlight(result?.[labelKey] || "", query)} <span class="muted-text">${
+            result[groupKey]
+          }</span>`
+        : highlight(result?.[labelKey] || "", query))
+    );
+  }
+
+  async function select(option) {
+    value = option;
+    dispatch("change", value);
+    if (value && autoClear) {
+      await sleep(0);
+      clearInput();
+    }
+  }
+
+  function inputChange(e) {
+    if (!e.target.value) select(null);
+  }
+
+  function handleScriptLoad() {
+    if (!scriptLoaded && window?.accessibleAutocomplete) {
+      accessibleAutocomplete = window.accessibleAutocomplete;
+      scriptLoaded = true;
+    }
+  }
+
+  function initAutocomplete(element) {
+    accessibleAutocomplete({
+      element,
+      id,
+      name: `${id}-input`,
+      source: loadOptions,
+      defaultValue: value?.[labelKey] || "",
+      autoselect: true,
+      onConfirm: select,
+      confirmOnBlur: false,
+      placeholder,
+      displayMenu: "overlay",
+      showAllValues: mode === "default",
+      dropdownArrow: chevron,
+      minLength,
+      templates: {
+        inputValue: inputValueTemplate,
+        suggestion: suggestionTemplate,
+      },
+    });
+    inputElement = document.getElementById(id);
+    inputElement.addEventListener("blur", inputChange);
+  }
+
+  onMount(handleScriptLoad);
+</script>
+
+<svelte:head>
+  <script src="{scriptUrl}" on:load="{handleScriptLoad}"></script>
+</svelte:head>
+
+<div class="ons-field">
+  {#if label}<label for="{id}" class="ons-label" class:ons-u-vh="{hideLabel}">{label}</label>{/if}
+  <div class="ons-autocomplete-wrapper">
+    {#if scriptLoaded}
+      <div
+        id="{id}-container"
+        class="ons-autocomplete"
+        class:hide-menu="{hideMenu}"
+        use:initAutocomplete
+      ></div>
+      {#if clearable && !autoClear && value}
+        <button
+          type="reset"
+          title="Clear selection"
+          aria-label="Clear selection"
+          on:click="{clearInput}"
+          class="ons-autocomplete-clear"
+        >
+          <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>
+        </button>
+      {/if}
+    {/if}
+  </div>
+</div>
+
+<style>
+  .ons-autocomplete-wrapper {
+    position: relative;
+  }
+  .ons-autocomplete-clear {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    align-content: center;
+    z-index: 1;
+    right: 3px;
+    top: calc(50% - 14px);
+    height: 28px;
+    width: 28px;
+    border: none;
+    background: white;
+  }
+  .ons-autocomplete-clear:focus {
+    outline: 3px solid #fbc900 !important;
+  }
+  .hide-menu :global(.autocomplete__menu) {
+    display: none;
+  }
+  .ons-autocomplete :global(.autocomplete__input) {
+    border-radius: 3px !important;
+    border-width: 1px !important;
+    background: white;
+  }
+  .ons-autocomplete :global(.autocomplete__input--focused) {
+    box-shadow: inset 0 0 0 1px black !important;
+    outline-color: #fbc900 !important;
+  }
+  .ons-autocomplete :global(.autocomplete__dropdown-arrow-down) {
+    width: 18px !important;
+    transform: translateY(-2px);
+  }
+  .ons-autocomplete :global(.muted-text) {
+    opacity: 0.8;
+    font-size: smaller;
+  }
+  .ons-autocomplete-wrapper :global(*) {
+    font-size: 18px;
+  }
+  .ons-autocomplete-wrapper :global(.autocomplete__hint),
+  .ons-autocomplete-wrapper :global(.autocomplete__input) {
+    height: 40px;
+  }
+  .ons-autocomplete-wrapper :global(.autocomplete__option) {
+    margin: 0;
+  }
+  .ons-autocomplete-wrapper :global(.autocomplete__menu) {
+    transform: translateY(5px);
+    border: 1px solid currentColor;
+    border-radius: 3px;
+  }
+  .ons-autocomplete-wrapper :global(.autocomplete__option--focused),
+  .ons-autocomplete-wrapper :global(.autocomplete__option:hover) {
+    background-color: var(--ons-color-branded-secondary, #003c57);
+  }
+  .ons-autocomplete-wrapper :global(.autocomplete__option:focus) {
+    outline: none !important;
+  }
+  .ons-autocomplete-wrapper :global(input) {
+    padding: 0 35px 0 8px;
+  }</style>

package/dist/inputs/AccessibleSelect/options.js

@@ -0,0 +1,263 @@
+export default [
+  { id: "AF", label: "Afghanistan", group: "Asia" },
+  { id: "AX", label: "Åland Islands", group: "Europe" },
+  { id: "AL", label: "Albania", group: "Europe" },
+  { id: "DZ", label: "Algeria", group: "Africa" },
+  { id: "AS", label: "American Samoa", group: "Oceania" },
+  { id: "AD", label: "Andorra", group: "Europe" },
+  { id: "AO", label: "Angola", group: "Africa" },
+  { id: "AI", label: "Anguilla", group: "Americas" },
+  { id: "AQ", label: "Antarctica", group: "" },
+  { id: "AG", label: "Antigua and Barbuda", group: "Americas" },
+  { id: "AR", label: "Argentina", group: "Americas" },
+  { id: "AM", label: "Armenia", group: "Asia" },
+  { id: "AW", label: "Aruba", group: "Americas" },
+  { id: "AU", label: "Australia", group: "Oceania" },
+  { id: "AT", label: "Austria", group: "Europe" },
+  { id: "AZ", label: "Azerbaijan", group: "Asia" },
+  { id: "BS", label: "Bahamas", group: "Americas" },
+  { id: "BH", label: "Bahrain", group: "Asia" },
+  { id: "BD", label: "Bangladesh", group: "Asia" },
+  { id: "BB", label: "Barbados", group: "Americas" },
+  { id: "BY", label: "Belarus", group: "Europe" },
+  { id: "BE", label: "Belgium", group: "Europe" },
+  { id: "BZ", label: "Belize", group: "Americas" },
+  { id: "BJ", label: "Benin", group: "Africa" },
+  { id: "BM", label: "Bermuda", group: "Americas" },
+  { id: "BT", label: "Bhutan", group: "Asia" },
+  { id: "BO", label: "Bolivia, Plurinational State of", group: "Americas" },
+  { id: "BQ", label: "Bonaire, Sint Eustatius and Saba", group: "Americas" },
+  { id: "BA", label: "Bosnia and Herzegovina", group: "Europe" },
+  { id: "BW", label: "Botswana", group: "Africa" },
+  { id: "BV", label: "Bouvet Island", group: "Americas" },
+  { id: "BR", label: "Brazil", group: "Americas" },
+  { id: "IO", label: "British Indian Ocean Territory", group: "Africa" },
+  { id: "BN", label: "Brunei Darussalam", group: "Asia" },
+  { id: "BG", label: "Bulgaria", group: "Europe" },
+  { id: "BF", label: "Burkina Faso", group: "Africa" },
+  { id: "BI", label: "Burundi", group: "Africa" },
+  { id: "CV", label: "Cabo Verde", group: "Africa" },
+  { id: "KH", label: "Cambodia", group: "Asia" },
+  { id: "CM", label: "Cameroon", group: "Africa" },
+  { id: "CA", label: "Canada", group: "Americas" },
+  { id: "KY", label: "Cayman Islands", group: "Americas" },
+  { id: "CF", label: "Central African Republic", group: "Africa" },
+  { id: "TD", label: "Chad", group: "Africa" },
+  { id: "CL", label: "Chile", group: "Americas" },
+  { id: "CN", label: "China", group: "Asia" },
+  { id: "CX", label: "Christmas Island", group: "Oceania" },
+  { id: "CC", label: "Cocos (Keeling) Islands", group: "Oceania" },
+  { id: "CO", label: "Colombia", group: "Americas" },
+  { id: "KM", label: "Comoros", group: "Africa" },
+  { id: "CG", label: "Congo", group: "Africa" },
+  { id: "CD", label: "Congo, Democratic Republic of the", group: "Africa" },
+  { id: "CK", label: "Cook Islands", group: "Oceania" },
+  { id: "CR", label: "Costa Rica", group: "Americas" },
+  { id: "CI", label: "Côte d'Ivoire", group: "Africa" },
+  { id: "HR", label: "Croatia", group: "Europe" },
+  { id: "CU", label: "Cuba", group: "Americas" },
+  { id: "CW", label: "Curaçao", group: "Americas" },
+  { id: "CY", label: "Cyprus", group: "Asia" },
+  { id: "CZ", label: "Czechia", group: "Europe" },
+  { id: "DK", label: "Denmark", group: "Europe" },
+  { id: "DJ", label: "Djibouti", group: "Africa" },
+  { id: "DM", label: "Dominica", group: "Americas" },
+  { id: "DO", label: "Dominican Republic", group: "Americas" },
+  { id: "EC", label: "Ecuador", group: "Americas" },
+  { id: "EG", label: "Egypt", group: "Africa" },
+  { id: "SV", label: "El Salvador", group: "Americas" },
+  { id: "GQ", label: "Equatorial Guinea", group: "Africa" },
+  { id: "ER", label: "Eritrea", group: "Africa" },
+  { id: "EE", label: "Estonia", group: "Europe" },
+  { id: "SZ", label: "Eswatini", group: "Africa" },
+  { id: "ET", label: "Ethiopia", group: "Africa" },
+  { id: "FK", label: "Falkland Islands (Malvinas)", group: "Americas" },
+  { id: "FO", label: "Faroe Islands", group: "Europe" },
+  { id: "FJ", label: "Fiji", group: "Oceania" },
+  { id: "FI", label: "Finland", group: "Europe" },
+  { id: "FR", label: "France", group: "Europe" },
+  { id: "GF", label: "French Guiana", group: "Americas" },
+  { id: "PF", label: "French Polynesia", group: "Oceania" },
+  { id: "TF", label: "French Southern Territories", group: "Africa" },
+  { id: "GA", label: "Gabon", group: "Africa" },
+  { id: "GM", label: "Gambia", group: "Africa" },
+  { id: "GE", label: "Georgia", group: "Asia" },
+  { id: "DE", label: "Germany", group: "Europe" },
+  { id: "GH", label: "Ghana", group: "Africa" },
+  { id: "GI", label: "Gibraltar", group: "Europe" },
+  { id: "GR", label: "Greece", group: "Europe" },
+  { id: "GL", label: "Greenland", group: "Americas" },
+  { id: "GD", label: "Grenada", group: "Americas" },
+  { id: "GP", label: "Guadeloupe", group: "Americas" },
+  { id: "GU", label: "Guam", group: "Oceania" },
+  { id: "GT", label: "Guatemala", group: "Americas" },
+  { id: "GG", label: "Guernsey", group: "Europe" },
+  { id: "GN", label: "Guinea", group: "Africa" },
+  { id: "GW", label: "Guinea-Bissau", group: "Africa" },
+  { id: "GY", label: "Guyana", group: "Americas" },
+  { id: "HT", label: "Haiti", group: "Americas" },
+  { id: "HM", label: "Heard Island and McDonald Islands", group: "Oceania" },
+  { id: "VA", label: "Holy See", group: "Europe" },
+  { id: "HN", label: "Honduras", group: "Americas" },
+  { id: "HK", label: "Hong Kong", group: "Asia" },
+  { id: "HU", label: "Hungary", group: "Europe" },
+  { id: "IS", label: "Iceland", group: "Europe" },
+  { id: "IN", label: "India", group: "Asia" },
+  { id: "ID", label: "Indonesia", group: "Asia" },
+  { id: "IR", label: "Iran, Islamic Republic of", group: "Asia" },
+  { id: "IQ", label: "Iraq", group: "Asia" },
+  { id: "IE", label: "Ireland", group: "Europe" },
+  { id: "IM", label: "Isle of Man", group: "Europe" },
+  { id: "IL", label: "Israel", group: "Asia" },
+  { id: "IT", label: "Italy", group: "Europe" },
+  { id: "JM", label: "Jamaica", group: "Americas" },
+  { id: "JP", label: "Japan", group: "Asia" },
+  { id: "JE", label: "Jersey", group: "Europe" },
+  { id: "JO", label: "Jordan", group: "Asia" },
+  { id: "KZ", label: "Kazakhstan", group: "Asia" },
+  { id: "KE", label: "Kenya", group: "Africa" },
+  { id: "KI", label: "Kiribati", group: "Oceania" },
+  { id: "KP", label: "Korea, Democratic People's Republic of", group: "Asia" },
+  { id: "KR", label: "Korea, Republic of", group: "Asia" },
+  { id: "KW", label: "Kuwait", group: "Asia" },
+  { id: "KG", label: "Kyrgyzstan", group: "Asia" },
+  { id: "LA", label: "Lao People's Democratic Republic", group: "Asia" },
+  { id: "LV", label: "Latvia", group: "Europe" },
+  { id: "LB", label: "Lebanon", group: "Asia" },
+  { id: "LS", label: "Lesotho", group: "Africa" },
+  { id: "LR", label: "Liberia", group: "Africa" },
+  { id: "LY", label: "Libya", group: "Africa" },
+  { id: "LI", label: "Liechtenstein", group: "Europe" },
+  { id: "LT", label: "Lithuania", group: "Europe" },
+  { id: "LU", label: "Luxembourg", group: "Europe" },
+  { id: "MO", label: "Macao", group: "Asia" },
+  { id: "MG", label: "Madagascar", group: "Africa" },
+  { id: "MW", label: "Malawi", group: "Africa" },
+  { id: "MY", label: "Malaysia", group: "Asia" },
+  { id: "MV", label: "Maldives", group: "Asia" },
+  { id: "ML", label: "Mali", group: "Africa" },
+  { id: "MT", label: "Malta", group: "Europe" },
+  { id: "MH", label: "Marshall Islands", group: "Oceania" },
+  { id: "MQ", label: "Martinique", group: "Americas" },
+  { id: "MR", label: "Mauritania", group: "Africa" },
+  { id: "MU", label: "Mauritius", group: "Africa" },
+  { id: "YT", label: "Mayotte", group: "Africa" },
+  { id: "MX", label: "Mexico", group: "Americas" },
+  { id: "FM", label: "Micronesia, Federated States of", group: "Oceania" },
+  { id: "MD", label: "Moldova, Republic of", group: "Europe" },
+  { id: "MC", label: "Monaco", group: "Europe" },
+  { id: "MN", label: "Mongolia", group: "Asia" },
+  { id: "ME", label: "Montenegro", group: "Europe" },
+  { id: "MS", label: "Montserrat", group: "Americas" },
+  { id: "MA", label: "Morocco", group: "Africa" },
+  { id: "MZ", label: "Mozambique", group: "Africa" },
+  { id: "MM", label: "Myanmar", group: "Asia" },
+  { id: "NA", label: "Namibia", group: "Africa" },
+  { id: "NR", label: "Nauru", group: "Oceania" },
+  { id: "NP", label: "Nepal", group: "Asia" },
+  { id: "NL", label: "Netherlands, Kingdom of the", group: "Europe" },
+  { id: "NC", label: "New Caledonia", group: "Oceania" },
+  { id: "NZ", label: "New Zealand", group: "Oceania" },
+  { id: "NI", label: "Nicaragua", group: "Americas" },
+  { id: "NE", label: "Niger", group: "Africa" },
+  { id: "NG", label: "Nigeria", group: "Africa" },
+  { id: "NU", label: "Niue", group: "Oceania" },
+  { id: "NF", label: "Norfolk Island", group: "Oceania" },
+  { id: "MK", label: "North Macedonia", group: "Europe" },
+  { id: "MP", label: "Northern Mariana Islands", group: "Oceania" },
+  { id: "NO", label: "Norway", group: "Europe" },
+  { id: "OM", label: "Oman", group: "Asia" },
+  { id: "PK", label: "Pakistan", group: "Asia" },
+  { id: "PW", label: "Palau", group: "Oceania" },
+  { id: "PS", label: "Palestine, State of", group: "Asia" },
+  { id: "PA", label: "Panama", group: "Americas" },
+  { id: "PG", label: "Papua New Guinea", group: "Oceania" },
+  { id: "PY", label: "Paraguay", group: "Americas" },
+  { id: "PE", label: "Peru", group: "Americas" },
+  { id: "PH", label: "Philippines", group: "Asia" },
+  { id: "PN", label: "Pitcairn", group: "Oceania" },
+  { id: "PL", label: "Poland", group: "Europe" },
+  { id: "PT", label: "Portugal", group: "Europe" },
+  { id: "PR", label: "Puerto Rico", group: "Americas" },
+  { id: "QA", label: "Qatar", group: "Asia" },
+  { id: "RE", label: "Réunion", group: "Africa" },
+  { id: "RO", label: "Romania", group: "Europe" },
+  { id: "RU", label: "Russian Federation", group: "Europe" },
+  { id: "RW", label: "Rwanda", group: "Africa" },
+  { id: "BL", label: "Saint Barthélemy", group: "Americas" },
+  {
+    id: "SH",
+    label: "Saint Helena, Ascension and Tristan da Cunha",
+    group: "Africa",
+  },
+  { id: "KN", label: "Saint Kitts and Nevis", group: "Americas" },
+  { id: "LC", label: "Saint Lucia", group: "Americas" },
+  { id: "MF", label: "Saint Martin (French part)", group: "Americas" },
+  { id: "PM", label: "Saint Pierre and Miquelon", group: "Americas" },
+  { id: "VC", label: "Saint Vincent and the Grenadines", group: "Americas" },
+  { id: "WS", label: "Samoa", group: "Oceania" },
+  { id: "SM", label: "San Marino", group: "Europe" },
+  { id: "ST", label: "Sao Tome and Principe", group: "Africa" },
+  { id: "SA", label: "Saudi Arabia", group: "Asia" },
+  { id: "SN", label: "Senegal", group: "Africa" },
+  { id: "RS", label: "Serbia", group: "Europe" },
+  { id: "SC", label: "Seychelles", group: "Africa" },
+  { id: "SL", label: "Sierra Leone", group: "Africa" },
+  { id: "SG", label: "Singapore", group: "Asia" },
+  { id: "SX", label: "Sint Maarten (Dutch part)", group: "Americas" },
+  { id: "SK", label: "Slovakia", group: "Europe" },
+  { id: "SI", label: "Slovenia", group: "Europe" },
+  { id: "SB", label: "Solomon Islands", group: "Oceania" },
+  { id: "SO", label: "Somalia", group: "Africa" },
+  { id: "ZA", label: "South Africa", group: "Africa" },
+  {
+    id: "GS",
+    label: "South Georgia and the South Sandwich Islands",
+    group: "Americas",
+  },
+  { id: "SS", label: "South Sudan", group: "Africa" },
+  { id: "ES", label: "Spain", group: "Europe" },
+  { id: "LK", label: "Sri Lanka", group: "Asia" },
+  { id: "SD", label: "Sudan", group: "Africa" },
+  { id: "SR", label: "Suriname", group: "Americas" },
+  { id: "SJ", label: "Svalbard and Jan Mayen", group: "Europe" },
+  { id: "SE", label: "Sweden", group: "Europe" },
+  { id: "CH", label: "Switzerland", group: "Europe" },
+  { id: "SY", label: "Syrian Arab Republic", group: "Asia" },
+  { id: "TW", label: "Taiwan, Province of China", group: "" },
+  { id: "TJ", label: "Tajikistan", group: "Asia" },
+  { id: "TZ", label: "Tanzania, United Republic of", group: "Africa" },
+  { id: "TH", label: "Thailand", group: "Asia" },
+  { id: "TL", label: "Timor-Leste", group: "Asia" },
+  { id: "TG", label: "Togo", group: "Africa" },
+  { id: "TK", label: "Tokelau", group: "Oceania" },
+  { id: "TO", label: "Tonga", group: "Oceania" },
+  { id: "TT", label: "Trinidad and Tobago", group: "Americas" },
+  { id: "TN", label: "Tunisia", group: "Africa" },
+  { id: "TR", label: "Türkiye", group: "Asia" },
+  { id: "TM", label: "Turkmenistan", group: "Asia" },
+  { id: "TC", label: "Turks and Caicos Islands", group: "Americas" },
+  { id: "TV", label: "Tuvalu", group: "Oceania" },
+  { id: "UG", label: "Uganda", group: "Africa" },
+  { id: "UA", label: "Ukraine", group: "Europe" },
+  { id: "AE", label: "United Arab Emirates", group: "Asia" },
+  {
+    id: "GB",
+    label: "United Kingdom of Great Britain and Northern Ireland",
+    group: "Europe",
+  },
+  { id: "US", label: "United States of America", group: "Americas" },
+  { id: "UM", label: "United States Minor Outlying Islands", group: "Oceania" },
+  { id: "UY", label: "Uruguay", group: "Americas" },
+  { id: "UZ", label: "Uzbekistan", group: "Asia" },
+  { id: "VU", label: "Vanuatu", group: "Oceania" },
+  { id: "VE", label: "Venezuela, Bolivarian Republic of", group: "Americas" },
+  { id: "VN", label: "Viet Nam", group: "Asia" },
+  { id: "VG", label: "Virgin Islands (British)", group: "Americas" },
+  { id: "VI", label: "Virgin Islands (U.S.)", group: "Americas" },
+  { id: "WF", label: "Wallis and Futuna", group: "Oceania" },
+  { id: "EH", label: "Western Sahara", group: "Africa" },
+  { id: "YE", label: "Yemen", group: "Asia" },
+  { id: "ZM", label: "Zambia", group: "Africa" },
+  { id: "ZW", label: "Zimbabwe", group: "Africa" },
+];

package/dist/layout/AnalyticsBanner/AnalyticsBanner.svelte

@@ -49,19 +49,49 @@
   let baseurl = "//www.ons.gov.uk";
 
   function hasCookiesPreferencesSet() {
-    return -1 < document.cookie.indexOf("cookies_preferences_set=true");
+    return -1 < document.cookie.indexOf("ons_cookie_preferences_set=true");
+  }
+
+  // extractValue extracts the value from a undecodeable json cookie string
+  function extractValue(key, extractionString) {
+    const extractionRegex = new RegExp(`'${key}':(.*?)[,}]`);
+    const match = extractionString.match(extractionRegex);
+    if (match) {
+      return match[1];
+    }
+
+    return null;
   }
 
   // Check if usage cookies are allowed (for Google Analytics + Hotjar)
+  // note: this ported function returns the inverse truth value to the dp-renderer code that it's based on
+  // ----------------------
+  // getUsageCookieValue reads the legacy cookies_policy and ons_cookies_policy to determine the user's usage preference.
+  // The legacy policy takes precedence over the new policy. When no policy is found, the user is opted out by default.
   function getUsageCookieValue() {
-    var cookiesPolicyCookie = document.cookie.match(
+    // TODO: this is the legacy cookie (cookies_policy) handling and will be removed in due course
+    var legacyPolicyCookie = document.cookie.match(
       new RegExp("(^|;) ?cookies_policy=([^;]*)(;|$)")
     );
-    if (cookiesPolicyCookie) {
-      var decodedCookie = decodeURIComponent(cookiesPolicyCookie[2]);
+    if (legacyPolicyCookie) {
+      console.debug("legacy cookies_policy found");
+      var decodedCookie = decodeURIComponent(legacyPolicyCookie[2]);
       var cookieValue = JSON.parse(decodedCookie);
+      console.debug("usage is", cookieValue.usage);
       return cookieValue.usage;
     }
+
+    // ons_cookie_policy handler
+    var policyCookie = document.cookie.match("(?:^|; )ons_cookie_policy=({.*?})");
+    if (policyCookie) {
+      console.debug("ons_cookie_policy found");
+
+      var usageValue = extractValue("usage", policyCookie[1]);
+      console.debug("usage is", usageValue);
+
+      return usageValue === "true";
+    }
+    console.debug("no cookie found - opting out");
     return false;
   }
 
@@ -70,13 +100,13 @@
     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 acceptAllCookiesPolicy = `{'essential':true,'settings':true,'usage':true,'campaigns':true}`;
+    let rejectAllCookiesPolicy = `{'essential':true,'settings':false,'usage':false,'campaigns':false}`;
+    let cookiesPolicy = option == "all" ? acceptAllCookiesPolicy : rejectAllCookiesPolicy;
     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};`;
+    document.cookie = `ons_cookie_message_displayed=${cookiesPreference};max-age=${oneYearInSeconds};domain=${cookiesDomain};path=${cookiesPath};`;
+    document.cookie = `ons_cookies_policy=${cookiesPolicy};max-age=${oneYearInSeconds};domain=${cookiesDomain};path=${cookiesPath};`;
 
     message = `You have ${option == "all" ? "accepted" : "rejected"} all additional cookies.`;
     if (option == "all") usageCookies = true;
@@ -154,6 +184,7 @@
     "change your cookie preferences": "newid eich dewisiadau o ran cwcis",
     "at any time.": "ar unrhyw adeg.",
     Hide: "Cuddio",
+    "Hide this message": "Cuddiwch y neges yma",
   };
   const i18n = (text) => (lang == "cy" && texts[text] ? texts[text] : text);
 </script>
@@ -250,6 +281,7 @@
             <button
               type="button"
               class="ons-btn ons-btn--secondary ons-btn--small ons-js-hide-button"
+              aria-label="{i18n('Hide this message')}"
               on:click="{() => (showBanner = false)}"
             >
               <span class="ons-btn__inner"><span class="ons-btn__text">{i18n("Hide")}</span> </span>