@onsvisual/svelte-components 0.0.6 → 0.0.8

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/dist/layout/TitleBlock/Meta.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { validDate, formatDate } from "$lib/js/utils.js";
+  import { validDate, formatDate } from "../../js/utils.js";
   export let meta = null;
 </script>
 

package/dist/layout/TitleBlock/TitleBlock.svelte

@@ -1,5 +1,5 @@
 <script>
-  import Container from "$lib/wrappers/Container/Container.svelte";
+  import Container from "../../wrappers/Container/Container.svelte";
   import Meta from "./Meta.svelte";
 
   /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onsvisual/svelte-components",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "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,6 +118,7 @@
     "./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",
@@ -124,6 +126,7 @@
     "./inputs/Button/Button.svelte": "./dist/inputs/Button/Button.svelte",
     "./inputs/Button/Icon.svelte": "./dist/inputs/Button/Icon.svelte",
     "./inputs/Dropdown/Dropdown.svelte": "./dist/inputs/Dropdown/Dropdown.svelte",
+    "./inputs/ErrorSummary/ErrorSummary.svelte": "./dist/inputs/ErrorSummary/ErrorSummary.svelte",
     "./inputs/Input/Input.svelte": "./dist/inputs/Input/Input.svelte",
     "./inputs/Select/Select.svelte": "./dist/inputs/Select/Select.svelte",
     "./inputs/Textarea/Textarea.svelte": "./dist/inputs/Textarea/Textarea.svelte",
@@ -132,6 +135,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 +151,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",