@onsvisual/svelte-components 0.1.49 → 0.1.50

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

@@ -10,6 +10,8 @@ export default class Titleblock extends SvelteComponentTyped<{
     title?: string;
     natStatBadge?: boolean;
     censusLogo?: boolean;
+    titleBadge?: string;
+    titleBadgeAriaLabel?: string;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -33,6 +35,8 @@ declare const __propDef: {
         title?: string;
         natStatBadge?: boolean;
         censusLogo?: boolean;
+        titleBadge?: string;
+        titleBadgeAriaLabel?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/layout/{Titleblock/Titleblock.svelte → TitleBlock/TitleBlock.svelte}

@@ -42,6 +42,16 @@
    * @type {boolean}
    */
   export let allowClientOverrides = false;
+  /**
+   * Optional badge to show next to the title
+   * @type {string}
+   */
+  export let titleBadge = null;
+  /**
+   * Aria-label for the optional badge to show next to the title
+   * @type {string}
+   */
+  export let titleBadgeAriaLabel = null;
 </script>
 
 <Container
@@ -54,9 +64,18 @@
     <slot name="before" />
     <div class="ons-grid">
       <div class="ons-grid__col ons-col-10@m">
-        <h1 class="ons-u-fs-xxxl ons-u-mt-s ons-u-mb-m ons-u-pb-no ons-u-pt-no">
-          {@html title}
-        </h1>
+        <div class="title-container">
+          <h1 class="ons-u-fs-xxxl ons-u-mt-s ons-u-mb-m ons-u-pb-no ons-u-pt-no">
+            {#if titleBadge}
+              <span style="margin-right: 6px">{@html title}</span>
+              <span class="title-badge" aria-label="{titleBadgeAriaLabel ?? titleBadge}"
+                >{titleBadge}</span
+              >
+            {:else}
+              {@html title}
+            {/if}
+          </h1>
+        </div>
       </div>
       {#if natStatBadge}
         <div class="ons-grid__col ons-col-2@m">
@@ -87,7 +106,6 @@
             title="Census 2021"
             alt="Census 2021"
             class="header__svg-logo margin-right--1"
-            focusable="false"
             width="167"
             height="32"
           />
@@ -105,4 +123,15 @@
 	} */
   .ons-grid__col {
     vertical-align: bottom;
+  }
+
+  .title-badge {
+    vertical-align: 6px;
+    white-space: nowrap;
+    font-size: 40%;
+    font-weight: bold;
+    color: white;
+    background-color: #003c57;
+    padding: 2px 8px 4px 8px;
+    border-radius: 4px;
   }</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onsvisual/svelte-components",
-  "version": "0.1.49",
+  "version": "0.1.50",
   "type": "module",
   "private": false,
   "homepage": "https://onsvisual.github.io/svelte-components",
@@ -144,7 +144,7 @@
     "./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/BackLink/Backlink.svelte": "./dist/layout/BackLink/Backlink.svelte",
     "./layout/Breadcrumb/Breadcrumb.svelte": "./dist/layout/Breadcrumb/Breadcrumb.svelte",
     "./layout/Cards/Card.svelte": "./dist/layout/Cards/Card.svelte",
     "./layout/Cards/Cards.svelte": "./dist/layout/Cards/Cards.svelte",
@@ -172,8 +172,8 @@
     "./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/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",
     "./wrappers/Container/Container.svelte": "./dist/wrappers/Container/Container.svelte",
     "./wrappers/Embed/Embed.svelte": "./dist/wrappers/Embed/Embed.svelte",