@onsvisual/svelte-components 0.0.7 → 0.0.9

package/dist/layout/Survey/init-survey.js

@@ -0,0 +1,230 @@
+function initSurveyA() {
+  "use strict";
+  (function () {
+    var e = document.querySelector("#feedback-form-page-container");
+    if (e) {
+      var t = document.referrer,
+        n = "/feedback/thanks",
+        r = document.querySelector("#feedback-form-url");
+      r && (r.value = t),
+        e.addEventListener("submit", function (t) {
+          t.preventDefault(),
+            document
+              .querySelectorAll("#feedback-form-page-container .feedback-form-control__error")
+              .forEach((e) => {
+                e.classList.remove("feedback-form-control__error");
+              }),
+            document
+              .querySelectorAll("#feedback-form-page-container .feedback-form-error")
+              .forEach((e) => {
+                e.remove();
+              });
+          var r = document.querySelector("#email-field"),
+            i = document.querySelector("#description-field"),
+            o = !1;
+          if (i && "" === i.value) {
+            var s = document.createElement("span");
+            if (
+              ((s.className = "feedback-form-error"),
+              (s.textContent = "Write some feedback"),
+              s.setAttribute("role", "alert"),
+              !document.querySelector("#description-field-label .feedback-form-error"))
+            )
+              document.querySelector("#feedback-description-field").insertBefore(s, i);
+            i.classList.add("feedback-form-control__error"), i.focus(), (o = !0);
+          }
+          if (r && "" !== r.value) {
+            var a = document.createElement("span");
+            (a.className = "feedback-form-error"),
+              a.setAttribute("role", "alert"),
+              (a.textContent = "This is not a valid email address, correct it or delete it.");
+            if (!/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,6}$/g.test(r.value)) {
+              if (!document.querySelector("#email-field-label .feedback-form-error"))
+                document.querySelector("#reply-request").insertBefore(a, r);
+              r.classList.add("feedback-form-control__error"), (o = !0);
+            }
+          }
+          if (!o) {
+            var u,
+              l,
+              c,
+              d = document.querySelector("#page-url-field").value,
+              h = d ? n + "?returnTo=" + d : n,
+              f = {
+                method: "POST",
+                body: ((u = e), (l = new FormData(u)), (c = new URLSearchParams(l).toString()), c),
+                headers: new Headers({
+                  "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
+                }),
+              };
+            return fetch(h, f)
+              .then((e) => {
+                if (!e.ok) throw e;
+                return (window.location.href = h), e.text();
+              })
+              .then((e) => e)
+              .catch((e) => Promise.reject(e));
+          }
+          document.querySelector(".feedback-btn").blur();
+        });
+    }
+  })();
+}
+
+function initSurveyB() {
+  "use strict";
+
+  function r(e, t, n, r, i, o) {
+    var s = (function (e) {
+        var t = new FormData(e);
+        return new URLSearchParams(t).toString();
+      })(e),
+      a = new XMLHttpRequest();
+    return (
+      a.open("POST", t, !0),
+      a.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"),
+      (a.onreadystatechange = function () {
+        if (a.readyState === XMLHttpRequest.DONE) {
+          var e = a.status;
+          if (o) return;
+          n.innerHTML = 0 === e || (e >= 200 && e < 400) ? r : i;
+        }
+      }),
+      {
+        request: a,
+        serializedData: s,
+      }
+    );
+  }
+
+  function i(e, t, n, r, i, o) {
+    var s = {
+      method: "POST",
+      body: r,
+      headers: new Headers({
+        "Content-Type": "application/json; charset=UTF-8",
+      }),
+    };
+    fetch(t, s)
+      .then((e) => {
+        if (!e.ok) throw e;
+      })
+      .then((e) => {
+        n.innerHTML = o;
+      })
+      .catch((e) => {
+        n.innerHTML = i;
+      });
+  }
+  (function () {
+    var e = window.location.href,
+      t = "/feedback",
+      n = "".concat(t, "/thanks"),
+      o = document.querySelector("#feedback-form-header"),
+      s =
+        '<span id="feedback-form-confirmation">Thank you. Your feedback will help us as we continue to improve the service.</span>',
+      a =
+        '<span id="feedback-form-error role="alert"">Something went wrong, try using our <a href="/feedback">feedback form</a>.</span>',
+      u = !1,
+      l = document.querySelector("#feedback-api-enabled"),
+      c = document.querySelector("#feedback-api-url"),
+      d = document.querySelector("#feedback-form-url");
+    d && (d.value = e);
+    var h = document.querySelectorAll("a.js-toggle");
+    h &&
+      h.forEach((e) => {
+        e.addEventListener("click", function (t) {
+          t.preventDefault();
+          var n = document.querySelector("#feedback-form");
+          if (
+            (n && n.classList.toggle("js-hidden"),
+            o && o.classList.toggle("js-hidden"),
+            "feedback-form-close" !== e.id)
+          ) {
+            var r = document.querySelector("#description-field");
+            r && r.focus();
+          }
+        });
+      });
+    var f = document.querySelector("#feedback-form-yes");
+    f &&
+      o &&
+      f.addEventListener("click", function (t) {
+        (u = !0), t.preventDefault();
+        var d = document.querySelector("#feedback-form-container");
+        if (l && "true" === l.value && c) {
+          var h = {
+              is_page_useful: !0,
+              is_general_feedback: !1,
+              ons_url: e,
+            },
+            f = JSON.stringify(h);
+          i(d, c.value, o, f, a, s);
+        } else {
+          var { request: p, serializedData: v } = r(d, n, o, s, a, u);
+          (o.innerHTML = s), p.send(v);
+        }
+      });
+    var p = document.querySelector("#feedback-form-container");
+    p &&
+      p.addEventListener("submit", function (n) {
+        n.preventDefault(),
+          document
+            .querySelectorAll("#feedback-form-container .form-control__error")
+            .forEach((e) => {
+              e.classList.remove("form-control__error");
+            }),
+          document.querySelectorAll("#feedback-form-container .form-error").forEach((e) => {
+            e.remove();
+          });
+        var d = document.querySelector("#email-field"),
+          h = document.querySelector("#description-field"),
+          f = document.querySelector("#name-field"),
+          v = !1;
+        if (h && "" === h.value) {
+          if (!document.querySelector("#description-field-label .form-error"))
+            document
+              .querySelector("#description-field-label")
+              .insertAdjacentHTML(
+                "beforeend",
+                '<span class="form-error" role="alert">Write some feedback</span>'
+              );
+          h.classList.add("form-control__error"), (v = !0);
+        }
+        if (d && "" !== d.value) {
+          var m = "";
+          m = v
+            ? '<span class="form-error" role="alert" aria-live="polite">This is not a valid email address, correct it or delete it</span>'
+            : '<span class="form-error" role="alert">This is not a valid email address, correct it or delete it</span>';
+          if (!/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,6}$/g.test(d.value)) {
+            if (!document.querySelector("#email-field-label .form-error"))
+              document.querySelector("#email-field-label").insertAdjacentHTML("beforeend", m);
+            v = !0;
+          }
+        }
+        if (!v)
+          if (l && "true" === l.value && c) {
+            var g = {
+                is_page_useful: !1,
+                is_general_feedback: !1,
+                ons_url: e,
+                name: f.value,
+                email_address: d.value,
+              },
+              b = JSON.stringify(g);
+            i(p, c.value, o, b, a, s);
+          } else {
+            var { request: y, serializedData: _ } = r(p, t, o, s, a, u),
+              w = document.querySelector("#feedback-form");
+            w && w.classList.add("js-hidden"), y.send(_);
+            var aa = document.getElementById("feedback-form-header");
+            aa && aa.classList.remove("js-hidden");
+          }
+      });
+  })();
+}
+
+export default function initSurvey() {
+  initSurveyA();
+  initSurveyB();
+}

package/dist/layout/Tabs/Tab.svelte

@@ -0,0 +1,48 @@
+<script>
+  import { onMount, onDestroy, getContext } from "svelte";
+  import { slugify } from "../../js/utils.js";
+
+  /**
+   * Title of tab/panel
+   * @type {string}
+   */
+  export let title = "Tab title";
+  /**
+   * Hide the title within the panel
+   * @type {boolean}
+   */
+  export let hideTitle = false;
+  /**
+   * ID/slug for tab (auto-generated from title if not set)
+   * @type {string}
+   */
+  export let id = slugify(title);
+
+  const sections = getContext("sections");
+  const selected = getContext("selected");
+
+  let el;
+
+  onMount(() => {
+    if (sections) {
+      if (!$sections[0] && ($selected || $selected === null)) $selected = id;
+      $sections = [...$sections, { title, id, el }];
+    }
+  });
+
+  onDestroy(() => {
+    if (sections) {
+      $sections = $sections.filter((s) => s.id !== id);
+    }
+  });
+</script>
+
+<section
+  id="{id}"
+  class="ons-tabs__panel"
+  bind:this="{el}"
+  class:ons-tabs__panel--hidden="{$selected !== id}"
+>
+  <h2 id="{id}-content-title" class="ons-u-vh" class:ons-u-vh="{hideTitle}">{title}</h2>
+  <slot />
+</section>

package/dist/layout/Tabs/Tabs.svelte

@@ -0,0 +1,85 @@
+<script>
+  import { setContext } from "svelte";
+  import { writable } from "svelte/store";
+
+  /**
+   * Make tabs smaller/more compact
+   */
+  export let compact = false;
+
+  const sections = writable([]);
+  setContext("sections", sections);
+
+  const selected = writable(null);
+  setContext("selected", selected);
+
+  function showSection(id) {
+    $selected = id;
+    [...$sections].forEach(
+      (s) =>
+        (s.el.className =
+          s.id === id ? "ons-tabs__panel" : "ons-tabs__panel ons-tabs__panel--hidden")
+    );
+  }
+</script>
+
+<section class="ons-tabs">
+  <h2 class="ons-tabs__title ons-u-fs-r--b ons-u-mt-no ons-u-vh">Contents</h2>
+  <div class="ons-tabs__container">
+    <ul class="ons-tabs__list ons-tabs__list--row" role="tablist">
+      {#each $sections as section}
+        <li
+          id="tab_{section.id}"
+          class="ons-tab__list-item ons-tab__list-item--row"
+          role="presentation"
+        >
+          <a
+            href="#{section.id}"
+            class="ons-tab ons-tab--row"
+            class:ons-tab--compact="{compact}"
+            class:ons-tab--selected="{section.id === selected}"
+            data-ga="click"
+            data-ga-category="tabs"
+            data-ga-action="Show: {section.title}"
+            data-ga-label="Show: {section.title}"
+            aria-selected="{section.id === $selected ? 'true' : 'false'}"
+            on:click|preventDefault="{() => showSection(section.id)}">{section.title}</a
+          >
+        </li>
+      {/each}
+    </ul>
+  </div>
+  <slot />
+</section>
+
+<style>
+  .ons-tabs__list::after {
+    content: none;
+  }
+  .ons-tab--compact {
+    font-size: 16px;
+    height: 36px;
+    padding: 0 12px;
+    line-height: 2;
+  }
+  .ons-tab {
+    text-underline-offset: 0;
+    border-color: var(--hinted, #e2e2e3);
+  }
+  .ons-tab[aria-selected="true"] {
+    border-color: var(--ons-color-borders);
+  }
+  .ons-tab:focus {
+    box-shadow: inset 0 0 0 4px var(--hinted, #e2e2e3), inset 12px 0 0 0 var(--hinted, #e2e2e3),
+      inset -12px 0 0 0 var(--hinted, #e2e2e3), inset 0 -8px 0 0 #222;
+  }
+  .ons-tab[aria-selected="true"]:focus {
+    box-shadow: inset 0 0 0 4px var(--background, white), inset 12px 0 0 0 var(--background, white),
+      inset -12px 0 0 0 var(--background, white), inset 0 -8px 0 0 #222;
+  }
+  .ons-tab--row {
+    background: var(--hinted, #e2e2e3);
+  }
+  .ons-tab[aria-selected="true"]:not(:focus) {
+    background-color: var(--background, white);
+  }</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onsvisual/svelte-components",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "type": "module",
   "private": false,
   "homepage": "https://onsvisual.github.io/svelte-components",
@@ -32,6 +32,7 @@
     "@babel/eslint-plugin": "^7.19.1",
     "@babel/preset-env": "^7.21.4",
     "@evilmartians/lefthook": "^1.3.10",
+    "@onsvisual/svelte-charts": "^0.2.13",
     "@reuters-graphics/eslint-config": "^0.0.2",
     "@storybook/addon-actions": "^7.0.20",
     "@storybook/addon-docs": "^7.0.20",
@@ -117,14 +118,21 @@
     "./actions/resizeObserver": "./dist/actions/resizeObserver/index.js",
     "./css/main.css": "./dist/css/main.css",
     "./datavis/Table/Table.svelte": "./dist/datavis/Table/Table.svelte",
+    "./datavis/shared/data": "./dist/datavis/shared/data.js",
     "./decorators/Blockquote/Blockquote.svelte": "./dist/decorators/Blockquote/Blockquote.svelte",
     "./decorators/Divider/Divider.svelte": "./dist/decorators/Divider/Divider.svelte",
     "./decorators/Em/Em.svelte": "./dist/decorators/Em/Em.svelte",
     "./globals.d.ts": "./dist/globals.d.ts",
     "./inputs/Button/Button.svelte": "./dist/inputs/Button/Button.svelte",
     "./inputs/Button/Icon.svelte": "./dist/inputs/Button/Icon.svelte",
+    "./inputs/Checkbox/Checkbox.svelte": "./dist/inputs/Checkbox/Checkbox.svelte",
+    "./inputs/Checkboxes/Checkboxes.svelte": "./dist/inputs/Checkboxes/Checkboxes.svelte",
     "./inputs/Dropdown/Dropdown.svelte": "./dist/inputs/Dropdown/Dropdown.svelte",
+    "./inputs/ErrorPanel/ErrorPanel.svelte": "./dist/inputs/ErrorPanel/ErrorPanel.svelte",
+    "./inputs/ErrorSummary/ErrorSummary.svelte": "./dist/inputs/ErrorSummary/ErrorSummary.svelte",
     "./inputs/Input/Input.svelte": "./dist/inputs/Input/Input.svelte",
+    "./inputs/Radios/Radio.svelte": "./dist/inputs/Radios/Radio.svelte",
+    "./inputs/Radios/Radios.svelte": "./dist/inputs/Radios/Radios.svelte",
     "./inputs/Select/Select.svelte": "./dist/inputs/Select/Select.svelte",
     "./inputs/Textarea/Textarea.svelte": "./dist/inputs/Textarea/Textarea.svelte",
     "./js/docsPage": "./dist/js/docsPage.js",
@@ -132,6 +140,11 @@
     "./js/withParams": "./dist/js/withParams.js",
     "./layout/Accordion/Accordion.svelte": "./dist/layout/Accordion/Accordion.svelte",
     "./layout/Accordion/AccordionItem.svelte": "./dist/layout/Accordion/AccordionItem.svelte",
+    "./layout/AnalyticsBanner/AnalyticsBanner.svelte": "./dist/layout/AnalyticsBanner/AnalyticsBanner.svelte",
+    "./layout/BackLink/Backlink.svelte": "./dist/layout/BackLink/Backlink.svelte",
+    "./layout/Breadcrumb/Breadcrumb.svelte": "./dist/layout/Breadcrumb/Breadcrumb.svelte",
+    "./layout/Contents/Contents.svelte": "./dist/layout/Contents/Contents.svelte",
+    "./layout/ErrorPage/ErrorPage.svelte": "./dist/layout/ErrorPage/ErrorPage.svelte",
     "./layout/Filler/Filler.svelte": "./dist/layout/Filler/Filler.svelte",
     "./layout/Footer/Footer.svelte": "./dist/layout/Footer/Footer.svelte",
     "./layout/Footer/ONSLogo.svelte": "./dist/layout/Footer/ONSLogo.svelte",
@@ -143,9 +156,17 @@
     "./layout/NavSections/NavSection.svelte": "./dist/layout/NavSections/NavSection.svelte",
     "./layout/NavSections/NavSections.svelte": "./dist/layout/NavSections/NavSections.svelte",
     "./layout/NavSections/SectionBacklink.svelte": "./dist/layout/NavSections/SectionBacklink.svelte",
+    "./layout/Notice/Notice.svelte": "./dist/layout/Notice/Notice.svelte",
+    "./layout/PhaseBanner/PhaseBanner.svelte": "./dist/layout/PhaseBanner/PhaseBanner.svelte",
     "./layout/Scroller/Scroller.svelte": "./dist/layout/Scroller/Scroller.svelte",
     "./layout/Scroller/ScrollerSection.svelte": "./dist/layout/Scroller/ScrollerSection.svelte",
     "./layout/Section/Section.svelte": "./dist/layout/Section/Section.svelte",
+    "./layout/ShareButtons/ShareButtons.svelte": "./dist/layout/ShareButtons/ShareButtons.svelte",
+    "./layout/Summary/Summary.svelte": "./dist/layout/Summary/Summary.svelte",
+    "./layout/Survey/Survey.svelte": "./dist/layout/Survey/Survey.svelte",
+    "./layout/Survey/init-survey": "./dist/layout/Survey/init-survey.js",
+    "./layout/Tabs/Tab.svelte": "./dist/layout/Tabs/Tab.svelte",
+    "./layout/Tabs/Tabs.svelte": "./dist/layout/Tabs/Tabs.svelte",
     "./layout/TitleBlock/Meta.svelte": "./dist/layout/TitleBlock/Meta.svelte",
     "./layout/TitleBlock/TitleBlock.svelte": "./dist/layout/TitleBlock/TitleBlock.svelte",
     "./layout/Twisty/Twisty.svelte": "./dist/layout/Twisty/Twisty.svelte",