@onsvisual/svelte-components 1.0.3 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
<script module>
|
|
2
2
|
import { defineMeta } from "@storybook/addon-svelte-csf";
|
|
3
|
-
import { withComponentDocs } from "../../js/withParams.js";
|
|
3
|
+
import { withComponentDocs, withStoryDocs } from "../../js/withParams.js";
|
|
4
4
|
import DataCard from "./DataCard.svelte";
|
|
5
5
|
import componentDocs from "./docs/component.md?raw";
|
|
6
|
+
import exampleDocs from "./docs/example.md?raw";
|
|
6
7
|
import data from "../demo-data/data-scatter.js";
|
|
7
8
|
|
|
8
9
|
const { Story } = defineMeta({
|
|
@@ -39,4 +40,5 @@
|
|
|
39
40
|
caption: `Change from 1979 to 2016`,
|
|
40
41
|
source: "Source: ONS"
|
|
41
42
|
}}
|
|
43
|
+
parameters={withStoryDocs(exampleDocs)}
|
|
42
44
|
/>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
For sparklines, an array of data needs to be passed into the component.
|
|
2
|
+
|
|
3
|
+
<!-- prettier-ignore -->
|
|
4
|
+
```html
|
|
5
|
+
<script>
|
|
6
|
+
import { DataCard } from "@onsvisual/svelte-components";
|
|
7
|
+
|
|
8
|
+
const data = [
|
|
9
|
+
{ x: 1979, y: 7.19 },
|
|
10
|
+
{ x: 1980, y: 7.83 },
|
|
11
|
+
{ x: 1981, y: 7.24 },
|
|
12
|
+
etc...
|
|
13
|
+
];
|
|
14
|
+
</script>
|
|
15
|
+
|
|
16
|
+
<DataCard
|
|
17
|
+
title="Example sparkline",
|
|
18
|
+
subtitle="Value in £ million"
|
|
19
|
+
mode="sparkline"
|
|
20
|
+
data={data}
|
|
21
|
+
value="down 2.47",
|
|
22
|
+
caption="Change from 1979 to 2016",
|
|
23
|
+
source="Source: ONS"
|
|
24
|
+
/>
|
|
25
|
+
```
|
|
@@ -22,13 +22,23 @@
|
|
|
22
22
|
*/
|
|
23
23
|
export let cls = "";
|
|
24
24
|
/**
|
|
25
|
-
*
|
|
25
|
+
* Optional: Sets a base theme ("light", "dark", null etc)
|
|
26
|
+
* @type {"light"|"dark"|"paleblue"|"blue"|"navyblue"|"grey"|null}
|
|
27
|
+
*/
|
|
28
|
+
export let theme = null;
|
|
29
|
+
/**
|
|
30
|
+
* Optional: Define additional props to override the base theme
|
|
31
|
+
* @type {object}
|
|
32
|
+
*/
|
|
33
|
+
export let themeOverrides = {};
|
|
34
|
+
/**
|
|
35
|
+
* Optional: Overrides the base theme background (accepts any valid CSS background value)
|
|
26
36
|
* @type {string|null}
|
|
27
37
|
*/
|
|
28
38
|
export let background = null;
|
|
29
39
|
</script>
|
|
30
40
|
|
|
31
|
-
<Container {width} {background} {cls}>
|
|
41
|
+
<Container {width} {theme} {themeOverrides} {background} {cls}>
|
|
32
42
|
<nav class="ons-breadcrumbs" aria-label="Breadcrumbs">
|
|
33
43
|
<ol class="ons-breadcrumbs__items ons-u-fs-s">
|
|
34
44
|
{#each backHref ? [{ label: "Back", href: backHref }] : links as link}
|
|
@@ -2,9 +2,11 @@
|
|
|
2
2
|
/** @typedef {typeof __propDef.events} BreadcrumbEvents */
|
|
3
3
|
/** @typedef {typeof __propDef.slots} BreadcrumbSlots */
|
|
4
4
|
export default class Breadcrumb extends SvelteComponentTyped<{
|
|
5
|
+
theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
|
|
5
6
|
background?: string | null | undefined;
|
|
6
7
|
cls?: string | undefined;
|
|
7
8
|
width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
|
|
9
|
+
themeOverrides?: object | undefined;
|
|
8
10
|
links?: object[] | undefined;
|
|
9
11
|
backHref?: string | undefined;
|
|
10
12
|
}, {
|
|
@@ -17,9 +19,11 @@ export type BreadcrumbSlots = typeof __propDef.slots;
|
|
|
17
19
|
import { SvelteComponentTyped } from "svelte";
|
|
18
20
|
declare const __propDef: {
|
|
19
21
|
props: {
|
|
22
|
+
theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
|
|
20
23
|
background?: string | null | undefined;
|
|
21
24
|
cls?: string | undefined;
|
|
22
25
|
width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
|
|
26
|
+
themeOverrides?: object | undefined;
|
|
23
27
|
links?: object[] | undefined;
|
|
24
28
|
backHref?: string | undefined;
|
|
25
29
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@onsvisual/svelte-components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"dev": "vite dev",
|
|
6
6
|
"build": "npm run build:package && npm run build:docs",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"@chromatic-com/storybook": "^4.0.0",
|
|
46
46
|
"@eslint/compat": "^1.2.5",
|
|
47
47
|
"@eslint/js": "^9.18.0",
|
|
48
|
-
"@onsvisual/svelte-charts": "^0.4.
|
|
48
|
+
"@onsvisual/svelte-charts": "^0.4.11",
|
|
49
49
|
"@storybook/addon-a11y": "^9.0.11",
|
|
50
50
|
"@storybook/addon-docs": "^9.0.11",
|
|
51
51
|
"@storybook/addon-svelte-csf": "^5.0.3",
|