@communitiesuk/svelte-component-library 0.1.18 → 0.2.0-alpha.2

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.
Files changed (97) hide show
  1. package/README.md +30 -6
  2. package/dist/assets/css/base.css +9 -0
  3. package/dist/assets/css/code-block.css +116 -0
  4. package/dist/assets/css/components.css +47 -0
  5. package/dist/assets/css/fonts.css +19 -0
  6. package/dist/assets/css/govuk-additional.css +142 -0
  7. package/dist/assets/css/govuk-frontend.min.css +2 -2
  8. package/dist/assets/css/moduk.css +1 -0
  9. package/dist/assets/css/moj-frontend.min copy.css +4108 -0
  10. package/dist/assets/css/moj-frontend.min.css +2 -0
  11. package/dist/assets/css/moj-frontend.min.css.map +1 -0
  12. package/dist/assets/css/utilities.css +0 -0
  13. package/dist/assets/images/govuk-crest.svg +1 -1
  14. package/dist/assets/js/govuk-frontend.min.js +1 -0
  15. package/dist/assets/js/moj-frontend.min.js +1 -0
  16. package/dist/assets/rebrand/images/favicon.ico +0 -0
  17. package/dist/assets/rebrand/images/favicon.svg +1 -0
  18. package/dist/assets/rebrand/images/govuk-crest.svg +1 -0
  19. package/dist/assets/rebrand/images/govuk-icon-180.png +0 -0
  20. package/dist/assets/rebrand/images/govuk-icon-192.png +0 -0
  21. package/dist/assets/rebrand/images/govuk-icon-512.png +0 -0
  22. package/dist/assets/rebrand/images/govuk-icon-mask.svg +1 -0
  23. package/dist/assets/rebrand/images/govuk-opengraph-image.png +0 -0
  24. package/dist/assets/rebrand/manifest.json +39 -0
  25. package/dist/components/data-vis/line-chart/Line.svelte +48 -40
  26. package/dist/components/data-vis/line-chart/Line.svelte.d.ts +6 -4
  27. package/dist/components/data-vis/line-chart/LineChart.svelte +145 -36
  28. package/dist/components/data-vis/line-chart/LineChart.svelte.d.ts +25 -9
  29. package/dist/components/data-vis/line-chart/Lines.svelte +10 -23
  30. package/dist/components/data-vis/line-chart/Lines.svelte.d.ts +8 -4
  31. package/dist/components/data-vis/line-chart/Marker.svelte +31 -5
  32. package/dist/components/data-vis/line-chart/Marker.svelte.d.ts +6 -2
  33. package/dist/components/data-vis/line-chart/SeriesLabel.svelte +7 -8
  34. package/dist/components/data-vis/line-chart/SeriesLabel.svelte.d.ts +2 -2
  35. package/dist/components/data-vis/line-chart/ValueLabel.svelte +26 -34
  36. package/dist/components/data-vis/line-chart/ValueLabel.svelte.d.ts +8 -4
  37. package/dist/components/data-vis/map/Map.svelte +299 -71
  38. package/dist/components/data-vis/map/Map.svelte.d.ts +39 -12
  39. package/dist/components/data-vis/map/NonStandardControls.svelte +10 -1
  40. package/dist/components/data-vis/map/NonStandardControls.svelte.d.ts +12 -11
  41. package/dist/components/data-vis/map/Tooltip.svelte +3 -4
  42. package/dist/components/data-vis/map/Tooltip.svelte.d.ts +0 -2
  43. package/dist/components/data-vis/map/mapUtils.d.ts +2 -0
  44. package/dist/components/data-vis/map/mapUtils.js +50 -0
  45. package/dist/components/data-vis/table/Table.svelte +28 -40
  46. package/dist/components/data-vis/table/Table.svelte.d.ts +0 -2
  47. package/dist/components/layout/Breadcrumbs.svelte +10 -12
  48. package/dist/components/layout/Breadcrumbs.svelte.d.ts +1 -0
  49. package/dist/components/layout/Footer.svelte +69 -4
  50. package/dist/components/layout/Footer.svelte.d.ts +3 -0
  51. package/dist/components/layout/Header.svelte +56 -16
  52. package/dist/components/layout/Header.svelte.d.ts +1 -0
  53. package/dist/components/layout/InternalHeader.svelte +155 -150
  54. package/dist/components/layout/InternalHeader.svelte.d.ts +1 -0
  55. package/dist/components/ui/Button.svelte +78 -4
  56. package/dist/components/ui/Button.svelte.d.ts +2 -0
  57. package/dist/components/ui/CookieBanner.svelte +356 -0
  58. package/dist/components/ui/CookieBanner.svelte.d.ts +18 -0
  59. package/dist/components/ui/FilterPanel.svelte +167 -158
  60. package/dist/components/ui/FilterPanel.svelte.d.ts +2 -0
  61. package/dist/components/ui/Masthead.svelte +35 -23
  62. package/dist/components/ui/Masthead.svelte.d.ts +2 -0
  63. package/dist/components/ui/PostcodeOrAreaSearch.svelte +200 -0
  64. package/dist/components/ui/PostcodeOrAreaSearch.svelte.d.ts +37 -0
  65. package/dist/components/ui/Search.svelte +2 -2
  66. package/dist/components/ui/SearchAutocomplete.svelte +104 -14
  67. package/dist/components/ui/SearchAutocomplete.svelte.d.ts +4 -0
  68. package/dist/data/IMD2019.json +32846 -0
  69. package/dist/data/places.csv +20039 -0
  70. package/dist/data/places.json +100192 -0
  71. package/dist/data/svgFontDimensions.json +90 -0
  72. package/dist/data/testData.json +52632 -0
  73. package/dist/index.d.ts +2 -0
  74. package/dist/index.js +2 -0
  75. package/dist/package-wrapping/BaseInformation.svelte +0 -33
  76. package/dist/package-wrapping/SidebarContainer.svelte +0 -7
  77. package/dist/utils/area-search/geoConfig.d.ts +435 -0
  78. package/dist/utils/area-search/geoConfig.js +291 -0
  79. package/dist/utils/cookiesNavigation.d.ts +44 -0
  80. package/dist/utils/cookiesNavigation.js +63 -0
  81. package/dist/utils/data-transformations/convert-csv-to-json-proper.cjs +88 -0
  82. package/dist/utils/data-transformations/convert-csv-to-json-proper.d.cts +1 -0
  83. package/dist/utils/data-transformations/convertCSV.d.ts +6 -0
  84. package/dist/utils/data-transformations/convertCSV.js +40 -21
  85. package/dist/utils/text-string-conversion/textStringConversion.d.ts +6 -0
  86. package/dist/utils/text-string-conversion/textStringConversion.js +10 -0
  87. package/package.json +18 -7
  88. package/dist/components/ui/Breadcrumbs.svelte +0 -198
  89. package/dist/components/ui/Breadcrumbs.svelte.d.ts +0 -24
  90. package/dist/components/ui/Footer.svelte +0 -171
  91. package/dist/components/ui/Footer.svelte.d.ts +0 -30
  92. package/dist/components/ui/Header.svelte +0 -43
  93. package/dist/components/ui/Header.svelte.d.ts +0 -7
  94. package/dist/components/ui/ServiceNavigation.svelte +0 -143
  95. package/dist/components/ui/ServiceNavigation.svelte.d.ts +0 -13
  96. package/dist/components/ui/SideNavigation.svelte +0 -346
  97. package/dist/components/ui/SideNavigation.svelte.d.ts +0 -25
package/README.md CHANGED
@@ -34,18 +34,42 @@ npm install @communitiesuk/svelte-component-library@latest
34
34
  To ensure GOV.UK styles are applied correctly, add this script tag to your `app.html` file in the body section:
35
35
 
36
36
  ```html
37
-
38
37
  <script>
39
- document.body.className +=
40
- " js-enabled" +
41
- ("noModule" in HTMLScriptElement.prototype
42
- ? " govuk-frontend-supported"
43
- : "");
38
+ document.body.className +=
39
+ " js-enabled" +
40
+ ("noModule" in HTMLScriptElement.prototype
41
+ ? " govuk-frontend-supported"
42
+ : "");
44
43
  </script>
45
44
  ```
46
45
 
47
46
  This is required because the GOV.UK Frontend CSS checks the document body for JavaScript availability to progressively enhance components.
48
47
 
48
+ ### GOV.UK Rebranded Styles (Optional)
49
+
50
+ To use the refreshed GOV.UK brand (launched June 2025), add the `govuk-template--rebranded` class to your `app.html` body element:
51
+
52
+ ```html
53
+ <body class="govuk-template--rebranded">
54
+ <!-- Your app content -->
55
+ </body>
56
+ ```
57
+
58
+ **When to use rebrand:**
59
+
60
+ - **Global CSS styles**: The `govuk-template--rebranded` class on `<body>` automatically applies rebranded styles to all components
61
+ - **Component markup**: Some components (like Footer and Header) have a `rebrand` prop that controls whether they show additional rebranded markup elements (like the crown logo). The rebrand prop is set to true by default on all relavent componets - you can specify false should you want to keep the old markup and assets.
62
+ - **Assets**: Rebranded components will use updated assets (logos, icons) from the `/assets/rebrand/` folder
63
+
64
+ **Example with rebranded Footer:**
65
+
66
+ ```javascript
67
+ import { Footer } from "@communitiesuk/svelte-component-library";
68
+
69
+ // Use rebrand=true to show the crown logo at top of footer
70
+ <Footer rebrand={true} />;
71
+ ```
72
+
49
73
  ### Importing Components
50
74
 
51
75
  Import components directly from the package:
package/dist/assets/css/base.css ADDED
@@ -0,0 +1,9 @@
1
+ @layer base {
2
+ .link-to-other-page {
3
+ @apply underline underline-offset-4;
4
+ }
5
+
6
+ .g-top-level-container {
7
+ @apply w-full lg:w-3/4 max-w-3xl mx-auto my-10 px-5;
8
+ }
9
+ }
package/dist/assets/css/code-block.css ADDED
@@ -0,0 +1,116 @@
1
+ /* Code block styles */
2
+ .code-block {
3
+ background: var(--sk-bg-2);
4
+ border: 1px solid var(--sk-border);
5
+ border-radius: var(--sk-border-radius);
6
+ margin: 0px;
7
+ position: relative;
8
+ }
9
+
10
+ .code-block pre {
11
+ box-sizing: border-box;
12
+ color: var(--shiki-color-text);
13
+ border-radius: var(--sk-border-radius);
14
+ width: 100%;
15
+ margin: 0;
16
+ padding: 0.2rem 0.3rem;
17
+ position: relative;
18
+ overflow-x: auto;
19
+ white-space: pre-wrap; /* Wraps long lines */
20
+ word-break: break-word; /* Prevents breaking words unnecessarily */
21
+ overflow-x: auto;
22
+ }
23
+
24
+ .code-block pre code {
25
+ background: 0 0;
26
+ width: 100%;
27
+ margin: 0;
28
+ padding: 0;
29
+ display: block;
30
+ top: 0;
31
+ }
32
+
33
+ .code-block .controls {
34
+ --height: 3.6rem;
35
+ height: var(--height);
36
+ z-index: 2;
37
+ box-sizing: border-box;
38
+ justify-content: end;
39
+ align-items: center;
40
+ gap: 0.5rem;
41
+ padding: 0.3rem 0.5rem;
42
+ display: flex;
43
+ position: absolute;
44
+ top: 0;
45
+ right: 0;
46
+ }
47
+
48
+ .code-block .controls:has(.filename) {
49
+ background: var(--sk-bg-3);
50
+ padding-left: 1rem;
51
+ position: relative;
52
+ }
53
+
54
+ .code-block .controls:not(:has(.filename)) {
55
+ background: inherit;
56
+ }
57
+
58
+ .code-block .controls .filename {
59
+ content: attr(data-file);
60
+ font: var(--sk-font-ui-small);
61
+ color: var(--sk-fg-3);
62
+ text-overflow: ellipsis;
63
+ white-space: nowrap;
64
+ flex: 1;
65
+ display: block;
66
+ position: relative;
67
+ top: 0.1rem;
68
+ overflow: hidden;
69
+ }
70
+
71
+ .code-block .controls .filename:after {
72
+ content: attr(data-ext);
73
+ }
74
+
75
+ .controls .copy-to-clipboard {
76
+ height: calc(var(--height) - 1rem);
77
+ aspect-ratio: 1;
78
+ border-radius: var(--sk-border-radius);
79
+ position: relative;
80
+ }
81
+
82
+ .code-block .controls .copy-to-clipboard[disabled] {
83
+ opacity: 1;
84
+ }
85
+
86
+ .code-block .controls .copy-to-clipboard:before,
87
+ .code-block .controls .copy-to-clipboard:after {
88
+ content: "";
89
+ background: 50%/1.6rem 1.6rem no-repeat;
90
+ width: 100%;
91
+ height: 100%;
92
+ transition: opacity 0.2s 0.6s;
93
+ display: block;
94
+ position: absolute;
95
+ top: 0;
96
+ left: 0;
97
+ }
98
+
99
+ .code-block .controls .copy-to-clipboard:before {
100
+ background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3crect%20width='11.2'%20height='14'%20x='7.9'%20y='3'%20rx='1.5'%20ry='1.5'%20style='fill:none;stroke:%23000000e0;stroke-miterlimit:10;stroke-width:1.5px'/%3e%3cpath%20d='M4%207v12.5c0%20.8.7%201.5%201.5%201.5h10'%20style='fill:none;stroke:%23000000e0;stroke-miterlimit:10;stroke-width:1.5px;stroke-linecap:round'/%3e%3c/svg%3e");
101
+ }
102
+
103
+ .code-block .controls .copy-to-clipboard:after {
104
+ opacity: 0;
105
+ background-image: url("data:image/svg+xml,%3csvg%20height='24'%20viewBox='0%200%2024%2024'%20width='24'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m21%207-12%2012-5.5-5.5%201.41-1.41%204.09%204.08%2010.59-10.58z'%20fill='%23000000e0'/%3e%3c/svg%3e");
106
+ }
107
+
108
+ .code-block .controls .copy-to-clipboard:active:before {
109
+ opacity: 0;
110
+ transition: none;
111
+ }
112
+
113
+ .code-block .controls .copy-to-clipboard:active:after {
114
+ opacity: 1;
115
+ transition: none;
116
+ }
package/dist/assets/css/components.css ADDED
@@ -0,0 +1,47 @@
1
+ @layer components {
2
+ [data-role="details-container"]
3
+ [data-role="component-information-array-container"] {
4
+ @apply flex flex-col gap-6;
5
+ }
6
+
7
+ [data-role="details-container"]
8
+ [data-role="component-information-detail-grid-container"] {
9
+ @apply grid grid-cols-[120px_auto] gap-x-6;
10
+ }
11
+
12
+ [data-role="details-container"]
13
+ [data-role="component-information-detail-grid-container"] {
14
+ dt {
15
+ @apply break-words hyphens-auto;
16
+ }
17
+ }
18
+
19
+ [data-role="details-container"]
20
+ [data-role="component-information-detail-grid-container"]
21
+ dd
22
+ p:first-of-type {
23
+ @apply mt-0;
24
+ }
25
+
26
+ [data-role="details-container"]
27
+ [data-role="component-information-detail-grid-container"]
28
+ dd
29
+ p:last-of-type {
30
+ @apply mb-0;
31
+ }
32
+
33
+ [data-role="examples-section"] {
34
+ @apply max-w-screen-lg my-0;
35
+ }
36
+ [data-role="demo-section"] {
37
+ @apply max-w-screen-lg mx-auto my-0;
38
+ }
39
+
40
+ [data-role="component-container"] {
41
+ @apply grid place-items-center;
42
+ }
43
+ }
44
+
45
+ [role="tabpanel"] {
46
+ @apply my-2 mx-0 p-0;
47
+ }
package/dist/assets/css/fonts.css ADDED
@@ -0,0 +1,19 @@
1
+ @font-face {
2
+ font-family: "GDS Transport";
3
+ font-style: normal;
4
+ font-weight: normal;
5
+ src:
6
+ url("/fonts/light-94a07e06a1-v2.woff2") format("woff2"),
7
+ url("/fonts/light-f591b13f7d-v2.woff") format("woff");
8
+ font-display: fallback;
9
+ }
10
+
11
+ @font-face {
12
+ font-family: "GDS Transport";
13
+ font-style: normal;
14
+ font-weight: bold;
15
+ src:
16
+ url("/fonts/bold-b542beb274-v2.woff2") format("woff2"),
17
+ url("/fonts/bold-affa96571d-v2.woff") format("woff");
18
+ font-display: fallback;
19
+ }
package/dist/assets/css/govuk-additional.css ADDED
@@ -0,0 +1,142 @@
1
+ :root {
2
+ /* Font families */
3
+ --sk-font-family-ui: "Fira Sans", -apple-system, sans-serif;
4
+ --sk-font-family-body: "GDS Transport", Georgia, serif;
5
+ --sk-font-family-heading: "DM Serif Display", Georgia, serif;
6
+ --sk-font-family-mono: "Fira Mono", monospace;
7
+
8
+ /* Font sizes and line heights */
9
+ --sk-font-size-body: 1.8rem;
10
+ --sk-line-height-body: calc(1.5 * var(--sk-font-size-body));
11
+
12
+ /* Colors */
13
+ --sk-fg-1: #141414;
14
+ --sk-fg-2: #262626;
15
+ --sk-fg-3: #666;
16
+ --sk-fg-4: gray;
17
+ --sk-fg-accent: #d43008;
18
+ --sk-bg-1: #fff;
19
+ --sk-bg-2: #fdfdfd;
20
+ --sk-bg-3: #fafafa;
21
+ --sk-bg-4: #f2f2f2;
22
+ --sk-border: #ebebeb;
23
+ --sk-scrollbar: #0000004d;
24
+ --sk-bg-selection: #42b4ff4d;
25
+
26
+ /* Borders and spacing */
27
+ --sk-border-radius: .4rem;
28
+ --sk-page-padding-side: 1.6rem;
29
+ }
30
+
31
+ /* Base styles */
32
+ * {
33
+
34
+ scrollbar-width: thin;
35
+ scrollbar-color: var(--sk-scrollbar) transparent;
36
+ }
37
+
38
+ ::selection {
39
+ background: var(--sk-bg-selection);
40
+ }
41
+
42
+ /* GDS Example frame styles */
43
+ .app-example-wrapper {
44
+ margin-top: 20px;
45
+ margin-bottom: 20px;
46
+ border: 1px solid #b1b4b6;
47
+ border-top-width: 1px;
48
+ border-right-width: 1px;
49
+ border-bottom-width: 1px;
50
+ border-left-width: 1px;
51
+ border-top-style: solid;
52
+ border-right-style: solid;
53
+ border-bottom-style: solid;
54
+ border-left-style: solid;
55
+ border-top-color: rgb(177, 180, 182);
56
+ border-right-color: rgb(177, 180, 182);
57
+ border-bottom-color: rgb(177, 180, 182);
58
+ border-left-color: rgb(177, 180, 182);
59
+ border-image-source: initial;
60
+ border-image-slice: initial;
61
+ border-image-width: initial;
62
+ border-image-outset: initial;
63
+ border-image-repeat: initial;
64
+ /* border-top: 0; */
65
+ border-top-width: 1px;
66
+ /* border-top-style: initial;
67
+ border-top-color: initial; */
68
+ }
69
+
70
+ .app-example {
71
+ position: relative;
72
+ font-size: 16px;
73
+ line-height: 1.25;
74
+ border-top: 1px solid #b1b4b6;
75
+ background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJUlEQVQoU2P88ePHfwY0wMHBwYguxjgUFKI7GsTH5m4M3w1ChQAZTSeO0/AZpgAAAABJRU5ErkJggg==") repeat;
76
+ }
77
+
78
+ .app-example--tabs {
79
+ margin-bottom: 0;
80
+ }
81
+
82
+ .app-example__toolbar {
83
+ padding: 10px;
84
+ border-bottom: 1px solid #b1b4b6;
85
+ background: #ffffff;
86
+ }
87
+
88
+ .app-example__frame {
89
+ display: block;
90
+ width: 100%;
91
+ max-width: 100%;
92
+ border: 0;
93
+ border-right: 1px solid #b1b4b6;
94
+ background: #ffffff;
95
+ }
96
+
97
+ /* Frame sizes */
98
+ .app-example__frame,
99
+ .app-example__frame--xs {
100
+ height: 150px;
101
+ }
102
+
103
+ .app-example__frame--s {
104
+ height: 250px;
105
+ }
106
+
107
+ .app-example__frame--m {
108
+ height: 350px;
109
+ }
110
+
111
+ .app-example__frame--l {
112
+ height: 450px;
113
+ }
114
+
115
+ .app-example__frame--xl {
116
+ height: 650px;
117
+ }
118
+
119
+ .app-example__frame--resizable {
120
+ min-width: 230px;
121
+ min-height: 50px;
122
+ overflow: auto;
123
+ transform: translate3d(0, 0, 0);
124
+ }
125
+
126
+ @media (min-width: 40.0625em) {
127
+ .app-example__frame--resizable {
128
+ resize: both;
129
+ }
130
+ }
131
+
132
+ .app-example__code {
133
+ position: relative;
134
+ }
135
+
136
+ /* Responsive margin utilities */
137
+ @media (min-width: 40.0625em) {
138
+ .app-example-wrapper {
139
+ margin-top: 40px;
140
+ margin-bottom: 40px;
141
+ }
142
+ }