@onsvisual/svelte-components 0.1.70 → 0.1.72

package/dist/@types/index.d.ts

@@ -24,6 +24,7 @@ export { default as PhaseBanner } from "./layout/PhaseBanner/PhaseBanner.svelte"
 export { default as Scroller } from "./layout/Scroller/Scroller.svelte";
 export { default as ScrollerSection } from "./layout/Scroller/ScrollerSection.svelte";
 export { default as Section } from "./layout/Section/Section.svelte";
+export { default as SkipLink } from "./layout/SkipLink/SkipLink.svelte";
 export { default as ShareButtons } from "./layout/ShareButtons/ShareButtons.svelte";
 export { default as Summary } from "./layout/Summary/Summary.svelte";
 export { default as Survey } from "./layout/Survey/Survey.svelte";

package/dist/@types/layout/Header/Header.svelte.d.ts

@@ -8,6 +8,7 @@ export default class Header extends SvelteComponentTyped<{
     compact?: boolean;
     titleHref?: string;
     bilingual?: boolean;
+    skipLinkEnabled?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -26,6 +27,7 @@ declare const __propDef: {
         compact?: boolean;
         titleHref?: string;
         bilingual?: boolean;
+        skipLinkEnabled?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/@types/layout/SkipLink/SkipLink.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  SkipLinkProps */
+/** @typedef {typeof __propDef.events}  SkipLinkEvents */
+/** @typedef {typeof __propDef.slots}  SkipLinkSlots */
+export default class SkipLink extends SvelteComponentTyped<{
+    href?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SkipLinkProps = typeof __propDef.props;
+export type SkipLinkEvents = typeof __propDef.events;
+export type SkipLinkSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        href?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/index.js

@@ -29,6 +29,7 @@ export { default as PhaseBanner } from "./layout/PhaseBanner/PhaseBanner.svelte"
 export { default as Scroller } from "./layout/Scroller/Scroller.svelte";
 export { default as ScrollerSection } from "./layout/Scroller/ScrollerSection.svelte";
 export { default as Section } from "./layout/Section/Section.svelte";
+export { default as SkipLink } from "./layout/SkipLink/SkipLink.svelte";
 export { default as ShareButtons } from "./layout/ShareButtons/ShareButtons.svelte";
 export { default as Summary } from "./layout/Summary/Summary.svelte";
 export { default as Survey } from "./layout/Survey/Survey.svelte";

package/dist/layout/Header/Header.svelte

@@ -2,6 +2,7 @@
   import { onMount, getContext } from "svelte";
   import Theme from "../../wrappers/Theme/Theme.svelte";
   import ONSLogo from "./ONSLogo.svelte";
+  import SkipLink from "../SkipLink/SkipLink.svelte";
 
   const page = getContext("page");
 
@@ -35,6 +36,11 @@
    * @type {boolean}
    */
   export let bilingual = true;
+  /**
+   * Set to false to disable skipLink (eg. if you need to move its location)
+   * @type {boolean}
+   */
+  export let skipLinkEnabled = true;
 
   let lang = "en";
   let baseurl = "//www.ons.gov.uk";
@@ -269,14 +275,14 @@
   }
 </script>
 
-<Theme theme="{theme}" overrides="{themeOverrides}">
-  {#if lang}
-    <header class="ons-header" role="banner">
-      <a class="skiplink" href="#main" tabindex="0">
-        {i18n("Skip to main content")}
-      </a>
+<header class="ons-header" role="banner">
+  {#if skipLinkEnabled}
+    <SkipLink />
+  {/if}
+  <slot name="before" />
+  <Theme theme="{theme}" overrides="{themeOverrides}">
+    {#if lang}
       <div id="pagePath" class="hide">{path}</div>
-      <slot name="before" />
       {#if compact}
         <div
           class="ons-header__top"
@@ -505,9 +511,9 @@
           </div>
         </div>
       {/if}
-    </header>
-  {/if}
-</Theme>
+    {/if}
+  </Theme>
+</header>
 
 <style>
   .ons-header__top {

package/dist/layout/SkipLink/SkipLink.svelte

@@ -0,0 +1,9 @@
+<script>
+  /**
+   * Google analytics/tags manager ID
+   * @type {string}
+   */
+  export let href = "#main";
+</script>
+
+<a class="ons-skip-to-content" href="{href}">Skip to content</a>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onsvisual/svelte-components",
-  "version": "0.1.70",
+  "version": "0.1.72",
   "type": "module",
   "private": false,
   "homepage": "https://onsvisual.github.io/svelte-components",
@@ -167,6 +167,7 @@
     "./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/SkipLink/SkipLink.svelte": "./dist/layout/SkipLink/SkipLink.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",