@onsvisual/svelte-components 1.0.36 → 1.0.38
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/README.md +24 -24
- package/dist/css/main.css +513 -513
- package/dist/datavis/BarChart/BarChart.stories.svelte +84 -84
- package/dist/datavis/BarChart/docs/component.md +19 -19
- package/dist/datavis/Chart/Chart.stories.svelte +128 -128
- package/dist/datavis/Chart/docs/component.md +31 -31
- package/dist/datavis/Chart/docs/example.md +28 -28
- package/dist/datavis/ColumnChart/ColumnChart.stories.svelte +84 -84
- package/dist/datavis/ColumnChart/docs/component.md +19 -19
- package/dist/datavis/DataCard/DataCard.stories.svelte +45 -45
- package/dist/datavis/DataCard/DataCard.svelte +70 -70
- package/dist/datavis/DataCard/Sparkline.svelte +117 -117
- package/dist/datavis/DataCard/docs/component.md +20 -18
- package/dist/datavis/DataCard/docs/example.md +25 -25
- package/dist/datavis/DotPlotChart/DotPlotChart.stories.svelte +40 -40
- package/dist/datavis/DotPlotChart/docs/component.md +19 -19
- package/dist/datavis/LineChart/LineChart.stories.svelte +64 -64
- package/dist/datavis/LineChart/docs/component.md +31 -31
- package/dist/datavis/ScatterChart/ScatterChart.stories.svelte +55 -55
- package/dist/datavis/ScatterChart/docs/component.md +53 -53
- package/dist/datavis/Table/Table.stories.svelte +48 -48
- package/dist/datavis/Table/Table.svelte +161 -161
- package/dist/datavis/Table/docs/component.md +20 -20
- package/dist/datavis/demo-data/data-scatter.js +40 -40
- package/dist/datavis/demo-data/data.js +18 -18
- package/dist/datavis/intro.mdx +21 -21
- package/dist/decorators/Blockquote/Blockquote.stories.svelte +25 -25
- package/dist/decorators/Blockquote/Blockquote.svelte +27 -27
- package/dist/decorators/Blockquote/docs/component.md +10 -10
- package/dist/decorators/Divider/Divider.stories.svelte +29 -29
- package/dist/decorators/Divider/Divider.svelte +52 -52
- package/dist/decorators/Divider/docs/component.md +12 -12
- package/dist/decorators/Em/Em.stories.svelte +30 -30
- package/dist/decorators/Em/Em.svelte +58 -58
- package/dist/decorators/Em/docs/component.md +12 -12
- package/dist/decorators/Icon/Icon.stories.svelte +27 -27
- package/dist/decorators/Icon/Icon.svelte +93 -93
- package/dist/decorators/Icon/docs/component.md +10 -10
- package/dist/decorators/Indent/Indent.stories.svelte +22 -22
- package/dist/decorators/Indent/Indent.svelte +3 -3
- package/dist/decorators/Indent/docs/component.md +10 -10
- package/dist/index.js +86 -86
- package/dist/inputs/Button/Button.stories.svelte +70 -70
- package/dist/inputs/Button/Button.svelte +147 -147
- package/dist/inputs/Button/Button.svelte.d.ts +2 -2
- package/dist/inputs/Button/docs/component.md +17 -17
- package/dist/inputs/ButtonGroup/ButtonGroup.stories.svelte +40 -40
- package/dist/inputs/ButtonGroup/ButtonGroup.svelte +57 -57
- package/dist/inputs/ButtonGroup/ButtonGroupItem.svelte +101 -101
- package/dist/inputs/ButtonGroup/docs/component.md +23 -21
- package/dist/inputs/Checkbox/Checkbox.stories.svelte +34 -34
- package/dist/inputs/Checkbox/Checkbox.svelte +180 -180
- package/dist/inputs/Checkbox/docs/component.md +14 -14
- package/dist/inputs/Checkboxes/Checkboxes.stories.svelte +34 -34
- package/dist/inputs/Checkboxes/Checkboxes.svelte +62 -62
- package/dist/inputs/Checkboxes/docs/component.md +20 -20
- package/dist/inputs/Checkboxes/docs/example.md +16 -16
- package/dist/inputs/Dropdown/Dropdown.stories.svelte +54 -54
- package/dist/inputs/Dropdown/Dropdown.svelte +66 -66
- package/dist/inputs/Dropdown/docs/component.md +22 -22
- package/dist/inputs/ErrorPanel/ErrorPanel.stories.svelte +25 -25
- package/dist/inputs/ErrorPanel/ErrorPanel.svelte +24 -24
- package/dist/inputs/ErrorPanel/docs/component.md +14 -14
- package/dist/inputs/ErrorSummary/ErrorSummary.stories.svelte +34 -34
- package/dist/inputs/ErrorSummary/ErrorSummary.svelte +47 -47
- package/dist/inputs/ErrorSummary/docs/component.md +17 -17
- package/dist/inputs/ErrorSummary/docs/example.md +12 -12
- package/dist/inputs/Input/Input.stories.svelte +73 -73
- package/dist/inputs/Input/Input.svelte +151 -151
- package/dist/inputs/Input/Input.svelte.d.ts +2 -2
- package/dist/inputs/Input/docs/component.md +16 -16
- package/dist/inputs/Radios/Radio.svelte +90 -90
- package/dist/inputs/Radios/Radios.stories.svelte +51 -51
- package/dist/inputs/Radios/Radios.svelte +62 -62
- package/dist/inputs/Radios/docs/component.md +24 -24
- package/dist/inputs/Radios/docs/example.md +21 -21
- package/dist/inputs/Select/Select.stories.svelte +63 -63
- package/dist/inputs/Select/Select.svelte +326 -326
- package/dist/inputs/Select/Select.svelte.d.ts +2 -2
- package/dist/inputs/Select/docs/component.md +27 -27
- package/dist/inputs/Textarea/Textarea.stories.svelte +40 -40
- package/dist/inputs/Textarea/Textarea.svelte +113 -113
- package/dist/inputs/Textarea/Textarea.svelte.d.ts +2 -2
- package/dist/inputs/Textarea/docs/component.md +16 -16
- package/dist/inputs/Toolbar/HelpModal.svelte +234 -234
- package/dist/inputs/Toolbar/ToolControl.svelte +23 -23
- package/dist/inputs/Toolbar/ToolControls.svelte +9 -9
- package/dist/inputs/Toolbar/Toolbar.stories.svelte +148 -148
- package/dist/inputs/Toolbar/Toolbar.svelte +70 -70
- package/dist/inputs/Toolbar/ToolbarButton.svelte +184 -184
- package/dist/inputs/Toolbar/ToolbarDivider.svelte +29 -29
- package/dist/inputs/Toolbar/ToolbarIcon.svelte +106 -106
- package/dist/inputs/Toolbar/ToolbarsContainer.svelte +69 -69
- package/dist/inputs/Toolbar/docs/component.md +101 -99
- package/dist/intro.mdx +66 -66
- package/dist/js/menuOptions.js +14 -14
- package/dist/js/utils.js +133 -133
- package/dist/js/withParams.js +43 -43
- package/dist/layout/Accordion/Accordion.stories.svelte +30 -30
- package/dist/layout/Accordion/Accordion.svelte +55 -55
- package/dist/layout/Accordion/AccordionItem.svelte +51 -51
- package/dist/layout/Accordion/accordion.js +64 -64
- package/dist/layout/Accordion/details.js +83 -83
- package/dist/layout/Accordion/docs/component.md +19 -19
- package/dist/layout/AnalyticsBanner/AnalyticsBanner.stories.svelte +16 -16
- package/dist/layout/AnalyticsBanner/AnalyticsBanner.svelte +314 -314
- package/dist/layout/AnalyticsBanner/docs/component.md +44 -44
- package/dist/layout/BackLink/BackLink.stories.svelte +16 -16
- package/dist/layout/BackLink/BackLink.svelte +30 -30
- package/dist/layout/BackLink/docs/component.md +12 -12
- package/dist/layout/Breadcrumb/Breadcrumb.stories.svelte +31 -31
- package/dist/layout/Breadcrumb/Breadcrumb.svelte +69 -69
- package/dist/layout/Breadcrumb/docs/component.md +15 -15
- package/dist/layout/Card/Card.stories.svelte +39 -39
- package/dist/layout/Card/Card.svelte +127 -127
- package/dist/layout/Card/docs/component.md +14 -14
- package/dist/layout/Card/docs/eg-images.md +27 -27
- package/dist/layout/Card/docs/eg-links.md +12 -12
- package/dist/layout/Card/docs/eg-spans.md +12 -12
- package/dist/layout/Contents/Contents.stories.svelte +27 -27
- package/dist/layout/Contents/Contents.svelte +51 -51
- package/dist/layout/Contents/docs/component.md +18 -18
- package/dist/layout/DescriptionList/DescriptionList.stories.svelte +22 -22
- package/dist/layout/DescriptionList/DescriptionList.svelte +59 -59
- package/dist/layout/DescriptionList/docs/component.md +18 -18
- package/dist/layout/Details/Details.stories.svelte +32 -32
- package/dist/layout/Details/Details.svelte +75 -75
- package/dist/layout/Details/docs/component.md +14 -14
- package/dist/layout/DocumentList/Document.svelte +103 -103
- package/dist/layout/DocumentList/DocumentList.stories.svelte +88 -88
- package/dist/layout/DocumentList/DocumentList.svelte +33 -33
- package/dist/layout/DocumentList/docs/component.md +28 -28
- package/dist/layout/DocumentList/docs/example.md +23 -23
- package/dist/layout/ErrorPage/ErrorPage.stories.svelte +18 -18
- package/dist/layout/ErrorPage/ErrorPage.svelte +48 -48
- package/dist/layout/ErrorPage/docs/component.md +13 -13
- package/dist/layout/Footer/Footer.stories.svelte +24 -24
- package/dist/layout/Footer/Footer.svelte +366 -366
- package/dist/layout/Footer/docs/component.md +10 -10
- package/dist/layout/Grid/Grid.stories.svelte +50 -50
- package/dist/layout/Grid/Grid.svelte +117 -117
- package/dist/layout/Grid/GridCell.svelte +65 -65
- package/dist/layout/Grid/docs/component.md +14 -14
- package/dist/layout/Header/Header.stories.svelte +26 -26
- package/dist/layout/Header/Header.svelte +875 -875
- package/dist/layout/Header/docs/component.md +11 -11
- package/dist/layout/Hero/Hero.stories.svelte +79 -79
- package/dist/layout/Hero/Hero.svelte +364 -364
- package/dist/layout/Hero/docs/component.md +14 -14
- package/dist/layout/Highlight/Highlight.stories.svelte +29 -29
- package/dist/layout/Highlight/Highlight.svelte +77 -77
- package/dist/layout/Highlight/docs/component.md +12 -12
- package/dist/layout/Image/Image.stories.svelte +23 -23
- package/dist/layout/Image/Image.svelte +29 -29
- package/dist/layout/Image/docs/component.md +15 -15
- package/dist/layout/List/Li.svelte +3 -3
- package/dist/layout/List/List.stories.svelte +40 -40
- package/dist/layout/List/List.svelte +46 -46
- package/dist/layout/List/docs/component.md +14 -14
- package/dist/layout/List/docs/example.md +12 -12
- package/dist/layout/NavSections/NavSection.svelte +90 -90
- package/dist/layout/NavSections/NavSections.stories.svelte +51 -51
- package/dist/layout/NavSections/NavSections.svelte +160 -139
- package/dist/layout/NavSections/NavSections.svelte.d.ts +4 -4
- package/dist/layout/NavSections/docs/component.md +25 -25
- package/dist/layout/Notice/Notice.stories.svelte +61 -61
- package/dist/layout/Notice/Notice.svelte +56 -56
- package/dist/layout/Notice/docs/component.md +14 -14
- package/dist/layout/PhaseBanner/PhaseBanner.stories.svelte +24 -24
- package/dist/layout/PhaseBanner/PhaseBanner.svelte +66 -66
- package/dist/layout/PhaseBanner/docs/component.md +14 -14
- package/dist/layout/RelatedContent/RelatedContent.stories.svelte +36 -36
- package/dist/layout/RelatedContent/RelatedContent.svelte +54 -54
- package/dist/layout/RelatedContent/docs/component.md +16 -16
- package/dist/layout/Scroller/Scroller.stories.svelte +60 -60
- package/dist/layout/Scroller/Scroller.svelte +368 -368
- package/dist/layout/Scroller/ScrollerSection.svelte +70 -70
- package/dist/layout/Scroller/docs/component.md +39 -39
- package/dist/layout/Section/Section.stories.svelte +33 -33
- package/dist/layout/Section/Section.svelte +60 -60
- package/dist/layout/Section/docs/component.md +12 -12
- package/dist/layout/ShareButtons/ShareButtons.stories.svelte +20 -20
- package/dist/layout/ShareButtons/ShareButtons.svelte +131 -131
- package/dist/layout/ShareButtons/docs/component.md +14 -14
- package/dist/layout/SkipLink/SkipLink.stories.svelte +16 -16
- package/dist/layout/SkipLink/SkipLink.svelte +9 -9
- package/dist/layout/SkipLink/docs/component.md +11 -11
- package/dist/layout/Summary/Summary.stories.svelte +21 -21
- package/dist/layout/Summary/Summary.svelte +60 -60
- package/dist/layout/Summary/docs/component.md +17 -17
- package/dist/layout/Tabs/Tab.svelte +53 -53
- package/dist/layout/Tabs/Tabs.stories.svelte +29 -29
- package/dist/layout/Tabs/Tabs.svelte +89 -89
- package/dist/layout/Tabs/docs/component.md +16 -16
- package/dist/layout/Tabs/tabs.js +302 -302
- package/dist/layout/Timeline/Timeline.stories.svelte +44 -44
- package/dist/layout/Timeline/Timeline.svelte +17 -17
- package/dist/layout/Timeline/TimelineItem.svelte +14 -14
- package/dist/layout/Timeline/docs/component.md +27 -27
- package/dist/layout/Timeline/docs/example.md +20 -20
- package/dist/templates/EmbedArticle/EmbedArticle.stories.svelte +72 -72
- package/dist/templates/EmbedArticle/docs/component.md +56 -56
- package/dist/templates/FeatureArticle/FeatureArticle.stories.svelte +150 -150
- package/dist/templates/FeatureArticle/docs/component.md +125 -125
- package/dist/templates/StandardArticle/StandardArticle.stories.svelte +86 -86
- package/dist/templates/StandardArticle/docs/component.md +76 -76
- package/dist/templates/intro.mdx +18 -18
- package/dist/wrappers/Container/Container.stories.svelte +38 -38
- package/dist/wrappers/Container/Container.svelte +77 -77
- package/dist/wrappers/Container/docs/component.md +12 -12
- package/dist/wrappers/Embed/Embed.stories.svelte +24 -24
- package/dist/wrappers/Embed/Embed.svelte +44 -44
- package/dist/wrappers/Embed/docs/component.md +15 -15
- package/dist/wrappers/LazyLoad/LazyLoad.stories.svelte +37 -37
- package/dist/wrappers/LazyLoad/LazyLoad.svelte +50 -50
- package/dist/wrappers/LazyLoad/docs/component.md +29 -29
- package/dist/wrappers/Main/Main.stories.svelte +24 -24
- package/dist/wrappers/Main/Main.svelte +11 -11
- package/dist/wrappers/Main/docs/component.md +16 -16
- package/dist/wrappers/Observe/Observe.stories.svelte +29 -29
- package/dist/wrappers/Observe/Observe.svelte +35 -35
- package/dist/wrappers/Observe/docs/component.md +22 -22
- package/dist/wrappers/Theme/Theme.stories.svelte +70 -70
- package/dist/wrappers/Theme/Theme.svelte +76 -76
- package/dist/wrappers/Theme/docs/component.md +10 -10
- package/dist/wrappers/Theme/themes.js +70 -70
- package/package.json +89 -89
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
A header component with compact mode and theming options.
|
|
2
|
-
|
|
3
|
-
<!-- prettier-ignore -->
|
|
4
|
-
```html
|
|
5
|
-
<script>
|
|
6
|
-
import { Header } from "@onsvisual/svelte-components";
|
|
7
|
-
</script>
|
|
8
|
-
|
|
9
|
-
<Header />
|
|
10
|
-
<!-- page body -->
|
|
11
|
-
```
|
|
1
|
+
A header component with compact mode and theming options.
|
|
2
|
+
|
|
3
|
+
<!-- prettier-ignore -->
|
|
4
|
+
```html
|
|
5
|
+
<script>
|
|
6
|
+
import { Header } from "@onsvisual/svelte-components";
|
|
7
|
+
</script>
|
|
8
|
+
|
|
9
|
+
<Header />
|
|
10
|
+
<!-- page body -->
|
|
11
|
+
```
|
|
@@ -1,79 +1,79 @@
|
|
|
1
|
-
<script module>
|
|
2
|
-
import { defineMeta } from "@storybook/addon-svelte-csf";
|
|
3
|
-
import { withComponentDocs } from "../../js/withParams.js";
|
|
4
|
-
import Hero from "./Hero.svelte";
|
|
5
|
-
import componentDocs from "./docs/component.md?raw";
|
|
6
|
-
import { lipsum } from "../../js/utils.js";
|
|
7
|
-
|
|
8
|
-
const { Story } = defineMeta({
|
|
9
|
-
title: "Layout/Hero",
|
|
10
|
-
component: Hero,
|
|
11
|
-
tags: ["autodocs"],
|
|
12
|
-
argTypes: {
|
|
13
|
-
theme: {
|
|
14
|
-
control: { type: "select" }
|
|
15
|
-
}
|
|
16
|
-
},
|
|
17
|
-
parameters: { ...withComponentDocs(componentDocs), layout: "fullscreen" }
|
|
18
|
-
});
|
|
19
|
-
</script>
|
|
20
|
-
|
|
21
|
-
{#snippet template(args)}
|
|
22
|
-
<Hero {...args}>
|
|
23
|
-
{#if args.content}{@html args.content}{/if}
|
|
24
|
-
</Hero>
|
|
25
|
-
{/snippet}
|
|
26
|
-
|
|
27
|
-
<Story
|
|
28
|
-
name="Hero with action button"
|
|
29
|
-
args={{
|
|
30
|
-
width: "narrow",
|
|
31
|
-
title: "Page title",
|
|
32
|
-
lede: lipsum(1),
|
|
33
|
-
actionButton: { label: "Get started", href: "#0" },
|
|
34
|
-
theme: "paleblue"
|
|
35
|
-
}}
|
|
36
|
-
{template}
|
|
37
|
-
/>
|
|
38
|
-
|
|
39
|
-
<Story
|
|
40
|
-
name="Blue theme"
|
|
41
|
-
args={{
|
|
42
|
-
width: "narrow",
|
|
43
|
-
title: "Page title",
|
|
44
|
-
lede: lipsum(1),
|
|
45
|
-
actionButton: { label: "Get started", href: "#0" },
|
|
46
|
-
theme: "blue"
|
|
47
|
-
}}
|
|
48
|
-
{template}
|
|
49
|
-
/>
|
|
50
|
-
|
|
51
|
-
<Story
|
|
52
|
-
name="Article title block"
|
|
53
|
-
args={{
|
|
54
|
-
title: "This is a longer page title on multiple lines",
|
|
55
|
-
pageType: "Statistical article",
|
|
56
|
-
lede: lipsum(1),
|
|
57
|
-
width: "wide",
|
|
58
|
-
theme: "grey",
|
|
59
|
-
natStatBadge: true,
|
|
60
|
-
meta: [
|
|
61
|
-
{ key: "Release date", value: "1 January 2024" },
|
|
62
|
-
{ key: "Last updated", value: "1 January 2025" },
|
|
63
|
-
{ key: "Publisher", value: "ONS" }
|
|
64
|
-
]
|
|
65
|
-
}}
|
|
66
|
-
{template}
|
|
67
|
-
/>
|
|
68
|
-
|
|
69
|
-
<Story
|
|
70
|
-
name="Title with badge, no background"
|
|
71
|
-
args={{
|
|
72
|
-
title: "Norwich",
|
|
73
|
-
titleBadge: { label: "E07000148", color: "#206095" },
|
|
74
|
-
lede: lipsum(1),
|
|
75
|
-
width: "wide",
|
|
76
|
-
theme: null
|
|
77
|
-
}}
|
|
78
|
-
{template}
|
|
79
|
-
/>
|
|
1
|
+
<script module>
|
|
2
|
+
import { defineMeta } from "@storybook/addon-svelte-csf";
|
|
3
|
+
import { withComponentDocs } from "../../js/withParams.js";
|
|
4
|
+
import Hero from "./Hero.svelte";
|
|
5
|
+
import componentDocs from "./docs/component.md?raw";
|
|
6
|
+
import { lipsum } from "../../js/utils.js";
|
|
7
|
+
|
|
8
|
+
const { Story } = defineMeta({
|
|
9
|
+
title: "Layout/Hero",
|
|
10
|
+
component: Hero,
|
|
11
|
+
tags: ["autodocs"],
|
|
12
|
+
argTypes: {
|
|
13
|
+
theme: {
|
|
14
|
+
control: { type: "select" }
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
parameters: { ...withComponentDocs(componentDocs), layout: "fullscreen" }
|
|
18
|
+
});
|
|
19
|
+
</script>
|
|
20
|
+
|
|
21
|
+
{#snippet template(args)}
|
|
22
|
+
<Hero {...args}>
|
|
23
|
+
{#if args.content}{@html args.content}{/if}
|
|
24
|
+
</Hero>
|
|
25
|
+
{/snippet}
|
|
26
|
+
|
|
27
|
+
<Story
|
|
28
|
+
name="Hero with action button"
|
|
29
|
+
args={{
|
|
30
|
+
width: "narrow",
|
|
31
|
+
title: "Page title",
|
|
32
|
+
lede: lipsum(1),
|
|
33
|
+
actionButton: { label: "Get started", href: "#0" },
|
|
34
|
+
theme: "paleblue"
|
|
35
|
+
}}
|
|
36
|
+
{template}
|
|
37
|
+
/>
|
|
38
|
+
|
|
39
|
+
<Story
|
|
40
|
+
name="Blue theme"
|
|
41
|
+
args={{
|
|
42
|
+
width: "narrow",
|
|
43
|
+
title: "Page title",
|
|
44
|
+
lede: lipsum(1),
|
|
45
|
+
actionButton: { label: "Get started", href: "#0" },
|
|
46
|
+
theme: "blue"
|
|
47
|
+
}}
|
|
48
|
+
{template}
|
|
49
|
+
/>
|
|
50
|
+
|
|
51
|
+
<Story
|
|
52
|
+
name="Article title block"
|
|
53
|
+
args={{
|
|
54
|
+
title: "This is a longer page title on multiple lines",
|
|
55
|
+
pageType: "Statistical article",
|
|
56
|
+
lede: lipsum(1),
|
|
57
|
+
width: "wide",
|
|
58
|
+
theme: "grey",
|
|
59
|
+
natStatBadge: true,
|
|
60
|
+
meta: [
|
|
61
|
+
{ key: "Release date", value: "1 January 2024" },
|
|
62
|
+
{ key: "Last updated", value: "1 January 2025" },
|
|
63
|
+
{ key: "Publisher", value: "ONS" }
|
|
64
|
+
]
|
|
65
|
+
}}
|
|
66
|
+
{template}
|
|
67
|
+
/>
|
|
68
|
+
|
|
69
|
+
<Story
|
|
70
|
+
name="Title with badge, no background"
|
|
71
|
+
args={{
|
|
72
|
+
title: "Norwich",
|
|
73
|
+
titleBadge: { label: "E07000148", color: "#206095" },
|
|
74
|
+
lede: lipsum(1),
|
|
75
|
+
width: "wide",
|
|
76
|
+
theme: null
|
|
77
|
+
}}
|
|
78
|
+
{template}
|
|
79
|
+
/>
|