@onsvisual/svelte-components 0.1.20 → 0.1.22

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

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

package/dist/layout/Footer/Footer.svelte

@@ -29,7 +29,7 @@
     if (mounted) {
       const url = page?.url || document.location;
       lang = url.host.startsWith("cy") ? "cy" : "en";
-      baseurl = `//${url.host}`;
+      baseurl = lang === "cy" ? "//cy.ons.gov.uk" : "//www.ons.gov.uk";
       path = url.pathname;
     }
   }

package/dist/layout/Grid/Grid.svelte

@@ -95,7 +95,7 @@
   setContext("cols", cols);
 </script>
 
-<figure aria-label="{caption}" bind:clientWidth="{w}">
+<figure aria-label="{caption}">
   <Container
     id="{id}"
     cls="{cls}"
@@ -109,7 +109,12 @@
     {#if title}
       <h2 class="section-title" class:ons-u-vh="{hideTitle}">{title}</h2>
     {/if}
-    <div class="grid {gridClass}" style:grid-gap="{gridGap}" style:min-height="{rowHeight}">
+    <div
+      class="grid {gridClass}"
+      style:grid-gap="{gridGap}"
+      style:min-height="{rowHeight}"
+      bind:clientWidth="{w}"
+    >
       <slot />
     </div>
   </Container>

package/dist/layout/Header/Header.svelte

@@ -30,6 +30,11 @@
    * @type {object}
    */
   export let themeOverrides = null;
+  /**
+   * Set to true to include an English/Welsh language link
+   * @type {boolean}
+   */
+  export let bilingual = false;
 
   let lang = "en";
   let baseurl = "//www.ons.gov.uk";
@@ -41,11 +46,8 @@
     if (mounted) {
       const url = page?.url || document.location;
       lang = url.host.startsWith("cy") ? "cy" : "en";
-      baseurl = `//${url.host}`;
-      baseother =
-        lang === "en"
-          ? `//cy.${url.host.replace("www.", "")}`
-          : `//www.${url.host.replace("cy.", "")}`;
+      baseurl = lang === "cy" ? "//cy.ons.gov.uk" : "//www.ons.gov.uk";
+      baseother = lang === "cy" ? "//www.ons.gov.uk" : "//cy.ons.gov.uk";
       path = url.pathname;
     }
   }
@@ -257,7 +259,7 @@
     "Search for a keyword(s) or time series ID": "Chwilio am allweddair neu ID cyfres amser",
   };
 
-  const i18n = (text) => (lang == "cy" && texts[text] ? texts[text] : text);
+  const i18n = (text) => (lang === "cy" && texts[text] ? texts[text] : text);
 
   function toggle_sm(e, i) {
     if (window.matchMedia("(max-width:767px)").matches) {
@@ -308,11 +310,11 @@
             <div
               class="col col--lg-two-thirds col--md-two-thirds hide--sm print--hide language--js__container"
             >
-              <div class="language">
-                {#if lang == "en"}
+              <div class="language" style:min-height="20px">
+                {#if bilingual && lang == "en"}
                   <span>English (EN) | </span>
                   <a href="{baseother}{path}" class="language__link" lang="cy">Cymraeg (CY)</a>
-                {:else}
+                {:else if bilingual}
                   <a href="{baseother}{path}" class="language__link" lang="en">English (EN)</a>
                   <span> | Cymraeg (EN)</span>
                 {/if}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onsvisual/svelte-components",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "type": "module",
   "private": false,
   "homepage": "https://onsvisual.github.io/svelte-components",