@onsvisual/svelte-components 1.0.3 → 1.0.5
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.
- package/dist/css/main.css +3 -3
- package/dist/datavis/DataCard/DataCard.stories.svelte +3 -1
- package/dist/datavis/DataCard/docs/example.md +25 -0
- package/dist/layout/Breadcrumb/Breadcrumb.svelte +12 -2
- package/dist/layout/Breadcrumb/Breadcrumb.svelte.d.ts +4 -0
- package/dist/layout/DescriptionList/DescriptionList.svelte +10 -4
- package/dist/layout/Footer/Footer.svelte +0 -18
- package/dist/layout/Hero/Hero.stories.svelte +3 -2
- package/package.json +2 -2
package/dist/css/main.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@import url("https://cdn.ons.gov.uk/sdc/design-system/72.10.
|
|
1
|
+
@import url("https://cdn.ons.gov.uk/sdc/design-system/72.10.4 /css/main.css");
|
|
2
2
|
@import url("https://cdn.ons.gov.uk/vendor/accessible-autocomplete/3.0.1/accessible-autocomplete.min.css");
|
|
3
3
|
|
|
4
4
|
/* CSS rules missing from design system */
|
|
@@ -13,8 +13,8 @@
|
|
|
13
13
|
body {
|
|
14
14
|
height: unset;
|
|
15
15
|
}
|
|
16
|
-
.ons-grid {
|
|
17
|
-
font-size:
|
|
16
|
+
.ons-grid > * {
|
|
17
|
+
font-size: 1.125rem;
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
/* Backfills for legacy website */
|
|
@@ -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
|
};
|
|
@@ -24,9 +24,8 @@
|
|
|
24
24
|
<dl
|
|
25
25
|
class="ons-description-list ons-description-list__items ons-grid ons-grid--gutterless ons-u-mb-no {cls} {mode ===
|
|
26
26
|
'inline'
|
|
27
|
-
? 'ons-u-mt-s ons-u-mt-l@l'
|
|
27
|
+
? 'ons-description-list--inline ons-u-mt-s ons-u-mt-l@l'
|
|
28
28
|
: 'ons-u-cf'}"
|
|
29
|
-
class:ons-description-list--inline={mode === "inline"}
|
|
30
29
|
{title}
|
|
31
30
|
aria-label={title}
|
|
32
31
|
>
|
|
@@ -34,7 +33,7 @@
|
|
|
34
33
|
<div class="ons-description-list__item">
|
|
35
34
|
<dt
|
|
36
35
|
class="ons-description-list__term ons-grid__col {mode === 'inline'
|
|
37
|
-
? 'ons-col-
|
|
36
|
+
? 'ons-col-4@s@l'
|
|
38
37
|
: 'ons-col-2@m'}"
|
|
39
38
|
>
|
|
40
39
|
{item.key}:
|
|
@@ -42,7 +41,7 @@
|
|
|
42
41
|
{#each [item.value].flat() as value}
|
|
43
42
|
<dd
|
|
44
43
|
class="ons-description-list__value ons-grid__col {mode === 'inline'
|
|
45
|
-
? 'ons-col-
|
|
44
|
+
? 'ons-col-8@s@l'
|
|
46
45
|
: 'ons-col-10@m'}"
|
|
47
46
|
>
|
|
48
47
|
{@html value}
|
|
@@ -51,3 +50,10 @@
|
|
|
51
50
|
</div>
|
|
52
51
|
{/each}
|
|
53
52
|
</dl>
|
|
53
|
+
|
|
54
|
+
<style>
|
|
55
|
+
/* Fix for inline wrapping on narrower container widths */
|
|
56
|
+
.ons-description-list--inline {
|
|
57
|
+
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
|
58
|
+
}
|
|
59
|
+
</style>
|
|
@@ -65,25 +65,21 @@
|
|
|
65
65
|
<div class="ons-grid">
|
|
66
66
|
<div class="ons-grid__col ons-col-4@m">
|
|
67
67
|
<h2 class="ons-footer__heading ons-u-fs-r--b">{i18n("Help")}</h2>
|
|
68
|
-
|
|
69
68
|
<ul class="ons-list ons-u-mb-no ons-list--bare">
|
|
70
69
|
<li class="ons-list__item">
|
|
71
70
|
<a href="{baseurl}/help/accessibility" class="ons-list__link"
|
|
72
71
|
>{i18n("Accessibility")}</a
|
|
73
72
|
>
|
|
74
73
|
</li>
|
|
75
|
-
|
|
76
74
|
<li class="ons-list__item">
|
|
77
75
|
<a href="{baseurl}/manage-cookie-settings/" class="ons-list__link"
|
|
78
76
|
>{i18n("Cookies")}</a
|
|
79
77
|
>
|
|
80
78
|
</li>
|
|
81
|
-
|
|
82
79
|
<li class="ons-list__item">
|
|
83
80
|
<a href="{baseurl}/help/privacynotice" class="ons-list__link">{i18n("Privacy")}</a
|
|
84
81
|
>
|
|
85
82
|
</li>
|
|
86
|
-
|
|
87
83
|
<li class="ons-list__item">
|
|
88
84
|
<a href="{baseurl}/help/termsandconditions" class="ons-list__link"
|
|
89
85
|
>{i18n("Terms and conditions")}</a
|
|
@@ -91,32 +87,26 @@
|
|
|
91
87
|
</li>
|
|
92
88
|
</ul>
|
|
93
89
|
</div>
|
|
94
|
-
|
|
95
90
|
<!-- Full footer columns -->
|
|
96
91
|
<div class="ons-grid__col ons-col-4@m ons-u-mt-l@2xs@m">
|
|
97
92
|
<h2 class="ons-footer__heading ons-u-fs-r--b">{i18n("About ONS")}</h2>
|
|
98
|
-
|
|
99
93
|
<ul class="ons-list ons-u-mb-no ons-list--bare">
|
|
100
94
|
<li class="ons-list__item">
|
|
101
95
|
<a href="{baseurl}/aboutus/whatwedo" class="ons-list__link"
|
|
102
96
|
>{i18n("What we do")}</a
|
|
103
97
|
>
|
|
104
98
|
</li>
|
|
105
|
-
|
|
106
99
|
<li class="ons-list__item">
|
|
107
100
|
<a href="https://careers.ons.gov.uk" class="ons-list__link">{i18n("Careers")}</a>
|
|
108
101
|
</li>
|
|
109
|
-
|
|
110
102
|
<li class="ons-list__item">
|
|
111
103
|
<a href="{baseurl}/aboutus/contactus" class="ons-list__link"
|
|
112
104
|
>{i18n("Contact us")}</a
|
|
113
105
|
>
|
|
114
106
|
</li>
|
|
115
|
-
|
|
116
107
|
<li class="ons-list__item">
|
|
117
108
|
<a href="{baseurl}/news" class="ons-list__link">{i18n("News")}</a>
|
|
118
109
|
</li>
|
|
119
|
-
|
|
120
110
|
<li class="ons-list__item">
|
|
121
111
|
<a
|
|
122
112
|
href="{baseurl}/aboutus/transparencyandgovernance/freedomofinformationfoi"
|
|
@@ -128,44 +118,37 @@
|
|
|
128
118
|
<!-- Full footer columns -->
|
|
129
119
|
<div class="ons-grid__col ons-col-4@m ons-u-mt-l@2xs@m">
|
|
130
120
|
<h2 class="ons-footer__heading ons-u-fs-r--b">{i18n("Connect with us")}</h2>
|
|
131
|
-
|
|
132
121
|
<ul class="ons-list ons-u-mb-no ons-list--bare">
|
|
133
122
|
<li class="ons-list__item">
|
|
134
123
|
<a href="https://x.com/ONS" class="ons-list__link">{i18n("X")}</a>
|
|
135
124
|
</li>
|
|
136
|
-
|
|
137
125
|
<li class="ons-list__item">
|
|
138
126
|
<a
|
|
139
127
|
href="https://www.instagram.com/officefornationalstatistics/"
|
|
140
128
|
class="ons-list__link">{i18n("Instagram")}</a
|
|
141
129
|
>
|
|
142
130
|
</li>
|
|
143
|
-
|
|
144
131
|
<li class="ons-list__item">
|
|
145
132
|
<a href="https://www.facebook.com/ONS" class="ons-list__link"
|
|
146
133
|
>{i18n("Facebook")}</a
|
|
147
134
|
>
|
|
148
135
|
</li>
|
|
149
|
-
|
|
150
136
|
<li class="ons-list__item">
|
|
151
137
|
<a
|
|
152
138
|
href="https://www.linkedin.com/company/office-for-national-statistics"
|
|
153
139
|
class="ons-list__link">{i18n("Linkedin")}</a
|
|
154
140
|
>
|
|
155
141
|
</li>
|
|
156
|
-
|
|
157
142
|
<li class="ons-list__item">
|
|
158
143
|
<a href="https://consultations.ons.gov.uk/" class="ons-list__link"
|
|
159
144
|
>{i18n("Consultations")}</a
|
|
160
145
|
>
|
|
161
146
|
</li>
|
|
162
|
-
|
|
163
147
|
<li class="ons-list__item">
|
|
164
148
|
<a href="https://www.statsusernetwork.ons.gov.uk/" class="ons-list__link"
|
|
165
149
|
>{i18n("Discussion forums")}</a
|
|
166
150
|
>
|
|
167
151
|
</li>
|
|
168
|
-
|
|
169
152
|
<li class="ons-list__item">
|
|
170
153
|
<a
|
|
171
154
|
href="https://public.govdelivery.com/accounts/UKONS/subscribers/new"
|
|
@@ -174,7 +157,6 @@
|
|
|
174
157
|
</li>
|
|
175
158
|
</ul>
|
|
176
159
|
</div>
|
|
177
|
-
|
|
178
160
|
<div class="ons-grid__col ons-u-mb-l">
|
|
179
161
|
<hr class="ons-footer__hr" />
|
|
180
162
|
</div>
|
|
@@ -58,8 +58,9 @@
|
|
|
58
58
|
theme: "grey",
|
|
59
59
|
natStatBadge: true,
|
|
60
60
|
meta: [
|
|
61
|
-
{ key: "
|
|
62
|
-
{ key: "
|
|
61
|
+
{ key: "Release date", value: "1 January 2024" },
|
|
62
|
+
{ key: "Last updated", value: "1 January 2025" },
|
|
63
|
+
{ key: "Publisher", value: "ONS" }
|
|
63
64
|
]
|
|
64
65
|
}}
|
|
65
66
|
{template}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@onsvisual/svelte-components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.5",
|
|
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",
|