@onsvisual/svelte-components 1.0.2 → 1.0.4

package/dist/css/main.css

@@ -10,6 +10,9 @@
 }
 
 /* Fixes for unexpected behaviour in design system */
+body {
+	height: unset;
+}
 .ons-grid {
 	font-size: unset;
 }
@@ -19,6 +22,9 @@
 .primary-nav__link:focus + ul {
 	top: 100%;
 }
+.primary-nav__link:focus.hide-children + ul {
+	left: -99999px;
+}
 .col-wrap:after,
 .col-wrap:before,
 .col:after,
@@ -487,19 +493,3 @@
 		width: 624px;
 	}
 }
-
-/* Get rid? */
-.hide {
-	display: none !important;
-}
-.visuallyhidden {
-	position: absolute;
-	width: 1px;
-	height: 1px;
-	padding: 0;
-	margin: -1px;
-	border: 0;
-	overflow: hidden;
-	clip: rect(0 0 0 0);
-	white-space: nowrap;
-}

package/dist/datavis/DataCard/DataCard.stories.svelte

@@ -1,8 +1,9 @@
 <script module>
 	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
+	import { withComponentDocs, withStoryDocs } from "../../js/withParams.js";
 	import DataCard from "./DataCard.svelte";
 	import componentDocs from "./docs/component.md?raw";
+	import exampleDocs from "./docs/example.md?raw";
 	import data from "../demo-data/data-scatter.js";
 
 	const { Story } = defineMeta({
@@ -39,4 +40,5 @@
 		caption: `Change from 1979 to 2016`,
 		source: "Source: ONS"
 	}}
+	parameters={withStoryDocs(exampleDocs)}
 />

package/dist/datavis/DataCard/docs/example.md

@@ -0,0 +1,25 @@
+For sparklines, an array of data needs to be passed into the component.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { DataCard } from "@onsvisual/svelte-components";
+
+  const data = [
+    { x: 1979, y: 7.19 },
+    { x: 1980, y: 7.83 },
+    { x: 1981, y: 7.24 },
+    etc...
+  ];
+</script>
+
+<DataCard
+  title="Example sparkline",
+  subtitle="Value in £ million"
+  mode="sparkline"
+  data={data}
+  value="down 2.47",
+  caption="Change from 1979 to 2016",
+  source="Source: ONS"
+/>
+```

package/dist/layout/Breadcrumb/Breadcrumb.svelte

@@ -22,13 +22,23 @@
 	 */
 	export let cls = "";
 	/**
-	 * Overrides the base theme background (accepts any valid CSS background value)
+	 * Optional: Sets a base theme ("light", "dark", null etc)
+	 * @type {"light"|"dark"|"paleblue"|"blue"|"navyblue"|"grey"|null}
+	 */
+	export let theme = null;
+	/**
+	 * Optional: Define additional props to override the base theme
+	 * @type {object}
+	 */
+	export let themeOverrides = {};
+	/**
+	 * Optional: Overrides the base theme background (accepts any valid CSS background value)
 	 * @type {string|null}
 	 */
 	export let background = null;
 </script>
 
-<Container {width} {background} {cls}>
+<Container {width} {theme} {themeOverrides} {background} {cls}>
 	<nav class="ons-breadcrumbs" aria-label="Breadcrumbs">
 		<ol class="ons-breadcrumbs__items ons-u-fs-s">
 			{#each backHref ? [{ label: "Back", href: backHref }] : links as link}

package/dist/layout/Breadcrumb/Breadcrumb.svelte.d.ts

@@ -2,9 +2,11 @@
 /** @typedef {typeof __propDef.events}  BreadcrumbEvents */
 /** @typedef {typeof __propDef.slots}  BreadcrumbSlots */
 export default class Breadcrumb extends SvelteComponentTyped<{
+    theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
     background?: string | null | undefined;
     cls?: string | undefined;
     width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
+    themeOverrides?: object | undefined;
     links?: object[] | undefined;
     backHref?: string | undefined;
 }, {
@@ -17,9 +19,11 @@ export type BreadcrumbSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
         background?: string | null | undefined;
         cls?: string | undefined;
         width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
+        themeOverrides?: object | undefined;
         links?: object[] | undefined;
         backHref?: string | undefined;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onsvisual/svelte-components",
-	"version": "1.0.2",
+	"version": "1.0.4",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "npm run build:package && npm run build:docs",
@@ -45,7 +45,7 @@
 		"@chromatic-com/storybook": "^4.0.0",
 		"@eslint/compat": "^1.2.5",
 		"@eslint/js": "^9.18.0",
-		"@onsvisual/svelte-charts": "^0.4.0",
+		"@onsvisual/svelte-charts": "^0.4.11",
 		"@storybook/addon-a11y": "^9.0.11",
 		"@storybook/addon-docs": "^9.0.11",
 		"@storybook/addon-svelte-csf": "^5.0.3",