@onsvisual/svelte-components 0.1.57 → 0.1.59

package/dist/@types/js/utils.d.ts

@@ -10,3 +10,4 @@ export function format(val: any, dp?: any): any;
 export function ascending(a: any, b: any): number;
 export function descending(a: any, b: any): number;
 export function sleep(ms?: number): Promise<any>;
+export function contrastColor(color: any): "black" | "white";

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

@@ -4,6 +4,7 @@
 export default class ErrorPage extends SvelteComponentTyped<{
     page?: any;
     status?: number;
+    message?: string;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -16,6 +17,7 @@ declare const __propDef: {
     props: {
         page?: any;
         status?: number;
+        message?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -12,6 +12,7 @@ export default class Titleblock extends SvelteComponentTyped<{
     censusLogo?: boolean;
     titleBadge?: string;
     titleBadgeAriaLabel?: string;
+    titleBadgeColor?: string;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -37,6 +38,7 @@ declare const __propDef: {
         censusLogo?: boolean;
         titleBadge?: string;
         titleBadgeAriaLabel?: string;
+        titleBadgeColor?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/decorators/Em/Em.svelte

@@ -1,5 +1,5 @@
 <script>
-  import parse from "parse-color";
+  import { contrastColor } from "../../js/utils";
 
   /**
    * Any valid CSS colour
@@ -12,16 +12,7 @@
    */
   export let nowrap = true;
 
-  function textColor(color) {
-    const rgb = parse(color).rgb;
-    if (rgb) {
-      const brightness = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
-      return brightness > 125 ? "black" : "white";
-    }
-    return "black";
-  }
-
-  $: text = textColor(color);
+  $: text = contrastColor(color);
 </script>
 
 <mark

package/dist/js/utils.js

@@ -1,3 +1,5 @@
+import parse from "parse-color";
+
 const randomString = () => {
   return Math.random().toString(16).slice(2, 8);
 };
@@ -51,3 +53,13 @@ export const descending = (a, b) =>
   a == null || b == null ? NaN : b < a ? -1 : b > a ? 1 : b >= a ? 0 : NaN;
 
 export const sleep = (ms = 1000) => new Promise((resolve) => setTimeout(resolve, ms));
+
+export const contrastColor = (color) => {
+  if (!color || typeof color !== "string") return "black";
+  const rgb = parse(color).rgb;
+  if (rgb) {
+    const brightness = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
+    return brightness > 125 ? "black" : "white";
+  }
+  return "black";
+};

package/dist/layout/ErrorPage/ErrorPage.svelte

@@ -8,7 +8,12 @@
    * (Optional) Explicitly pass a page status number, eg. 404 or 500.
    * @type {number}
    */
-  export let status = $page ? $page.status : null;
+  export let status = $page ? $page?.status : null;
+  /**
+   * (Optional) Explicitly pass a page status message.
+   * @type {string}
+   */
+  export let message = $page ? $page?.error?.message : "";
 </script>
 
 <div class="ons-page__container ons-container">
@@ -16,20 +21,19 @@
     <div class="ons-grid__col ons-col-12@m">
       <main id="main-content" class="ons-page__main">
         {#if status === 404}
-          <h1>Page not found</h1>
+          <h1>{message || "Page not found"}</h1>
           <p>If you entered a web address, check it is correct.</p>
           <p>If you pasted the web address, check you copied the whole address.</p>
           <p>
-            If the web address is correct or you selected a link or button, <a href="/feedback"
-              >contact us</a
+            If the web address is correct or you selected a link or button, <a
+              href="https://www.ons.gov.uk/feedback">contact us</a
             > for more help.
           </p>
         {:else}
-          <h1>Sorry, there is a problem with the service</h1>
-          <p>Try again later.</p>
+          <h1>{message || "Sorry, there is a problem with the service"}</h1>
           <p>
-            If you continue to experience problems with this service, please <a href="/feedback"
-              >contact us</a
+            If you continue to experience problems with this service, please <a
+              href="https://www.ons.gov.uk/feedback">contact us</a
             >.
           </p>
         {/if}

package/dist/layout/Titleblock/Titleblock.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { contrastColor } from "../../js/utils";
   import Container from "../../wrappers/Container/Container.svelte";
   import Meta from "./Meta.svelte";
 
@@ -52,6 +53,13 @@
    * @type {string}
    */
   export let titleBadgeAriaLabel = null;
+  /**
+   * Set a colour for the title badge
+   * @type {string}
+   */
+  export let titleBadgeColor = "#003C57";
+
+  $: titleBadgeTextColor = contrastColor(titleBadgeColor);
 </script>
 
 <Container
@@ -68,8 +76,11 @@
           <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
+              <span
+                class="title-badge"
+                aria-label="{titleBadgeAriaLabel ?? titleBadge}"
+                style:background="{titleBadgeColor}"
+                style:color="{titleBadgeTextColor}">{titleBadge}</span
               >
             {:else}
               {@html title}
@@ -131,7 +142,6 @@
     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.57",
+  "version": "0.1.59",
   "type": "module",
   "private": false,
   "homepage": "https://onsvisual.github.io/svelte-components",