@communitiesuk/svelte-component-library 0.1.19-beta.33 → 0.1.19-beta.35
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/components/data-vis/Histogram.svelte +8 -23
- package/dist/components/data-vis/position-chart/PositionChart.svelte +36 -32
- package/dist/components/data-vis/position-chart/PositionChart.svelte.d.ts +1 -1
- package/dist/components/data-vis/table/Table.svelte +145 -95
- package/dist/components/data-vis/table/Table.svelte.d.ts +4 -4
- package/dist/components/ui/Accordion.svelte +212 -66
- package/dist/components/ui/Accordion.svelte.d.ts +2 -0
- package/dist/components/ui/Button.svelte +219 -104
- package/dist/components/ui/Button.svelte.d.ts +4 -0
- package/dist/components/ui/Masthead.svelte +0 -2
- package/package.json +1 -1
|
@@ -7,162 +7,257 @@
|
|
|
7
7
|
componentNameProp = undefined,
|
|
8
8
|
onClickFunction = undefined,
|
|
9
9
|
noPadding = false,
|
|
10
|
+
direction = null, // "ascending" | "descending" | null
|
|
11
|
+
disabled = false,
|
|
10
12
|
} = $props();
|
|
11
13
|
|
|
12
14
|
let buttonClass = $derived(
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
15
|
+
buttonType === "default"
|
|
16
|
+
? "govuk-button"
|
|
17
|
+
: buttonType === "secondary"
|
|
18
|
+
? "govuk-button govuk-button--secondary"
|
|
19
|
+
: buttonType === "warning"
|
|
20
|
+
? "govuk-button govuk-button--warning"
|
|
21
|
+
: buttonType === "dark background"
|
|
22
|
+
? "govuk-button govuk-button--inverse"
|
|
23
|
+
: undefined,
|
|
22
24
|
);
|
|
23
25
|
</script>
|
|
24
26
|
|
|
25
27
|
{#if noPadding}
|
|
26
28
|
{#if buttonType === "moreInfo"}
|
|
27
29
|
<div>
|
|
28
|
-
<button class="more-info-button" onclick={onClickFunction}>
|
|
30
|
+
<button class="more-info-button" type="button" onclick={onClickFunction}>
|
|
29
31
|
<Icon kind="info" />
|
|
30
32
|
</button>
|
|
31
33
|
</div>
|
|
34
|
+
|
|
32
35
|
{:else if buttonType === "start"}
|
|
33
36
|
<a
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
37
|
+
href="#"
|
|
38
|
+
role="button"
|
|
39
|
+
draggable="false"
|
|
40
|
+
class="govuk-button govuk-button--start"
|
|
41
|
+
data-module="govuk-button"
|
|
42
|
+
onclick={onClickFunction}
|
|
40
43
|
>
|
|
41
44
|
{textContent}
|
|
42
45
|
<svg
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
46
|
+
class="govuk-button__start-icon"
|
|
47
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
48
|
+
width="17.5"
|
|
49
|
+
height="19"
|
|
50
|
+
viewBox="0 0 33 40"
|
|
51
|
+
aria-hidden="true"
|
|
52
|
+
focusable="false"
|
|
50
53
|
>
|
|
51
54
|
<path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path>
|
|
52
55
|
</svg>
|
|
53
56
|
</a>
|
|
57
|
+
|
|
54
58
|
{:else if buttonType === "disabled"}
|
|
55
59
|
<button
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
60
|
+
type="submit"
|
|
61
|
+
disabled
|
|
62
|
+
aria-disabled="true"
|
|
63
|
+
class="govuk-button"
|
|
64
|
+
data-module="govuk-button"
|
|
65
|
+
onclick={onClickFunction}
|
|
62
66
|
>
|
|
63
67
|
{textContent}
|
|
64
68
|
</button>
|
|
69
|
+
|
|
65
70
|
{:else if buttonType === "table header"}
|
|
66
|
-
<button
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
71
|
+
<button
|
|
72
|
+
type="button"
|
|
73
|
+
class="text-header"
|
|
74
|
+
onclick={onClickFunction}
|
|
75
|
+
disabled={disabled}
|
|
76
|
+
>
|
|
77
|
+
<span>{textContent}</span>
|
|
78
|
+
|
|
79
|
+
<span class="sort-icon" aria-hidden="true">
|
|
80
|
+
{#if direction === "ascending"}
|
|
81
|
+
<svg
|
|
82
|
+
class="sort-arrow-single"
|
|
83
|
+
width="1em"
|
|
84
|
+
height="1em"
|
|
85
|
+
focusable="false"
|
|
86
|
+
role="img"
|
|
87
|
+
viewBox="0 0 22 22"
|
|
88
|
+
fill="currentColor"
|
|
89
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
90
|
+
>
|
|
91
|
+
<path
|
|
92
|
+
d="M8.1875 9.5L10.9609 3.95703L13.7344 9.5H8.1875Z"
|
|
93
|
+
fill="currentColor"
|
|
94
|
+
></path>
|
|
95
|
+
</svg>
|
|
96
|
+
{:else if direction === "descending"}
|
|
97
|
+
<svg
|
|
98
|
+
class="sort-arrow-single"
|
|
99
|
+
width="1em"
|
|
100
|
+
height="1em"
|
|
101
|
+
focusable="false"
|
|
102
|
+
role="img"
|
|
103
|
+
viewBox="0 0 22 22"
|
|
104
|
+
fill="currentColor"
|
|
105
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
106
|
+
>
|
|
107
|
+
<path
|
|
108
|
+
d="M13.7344 12.0781L10.9609 17.6211L8.1875 12.0781H13.7344Z"
|
|
109
|
+
fill="currentColor"
|
|
110
|
+
></path>
|
|
111
|
+
</svg>
|
|
112
|
+
{:else}
|
|
113
|
+
<svg
|
|
114
|
+
class="sort-arrow-both"
|
|
115
|
+
width="1em"
|
|
116
|
+
height="1em"
|
|
117
|
+
focusable="false"
|
|
118
|
+
role="img"
|
|
119
|
+
viewBox="0 0 22 22"
|
|
120
|
+
fill="currentColor"
|
|
121
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
122
|
+
>
|
|
123
|
+
<path
|
|
124
|
+
d="M8.1875 9.5L10.9609 3.95703L13.7344 9.5H8.1875Z"
|
|
125
|
+
fill="currentColor"
|
|
126
|
+
></path>
|
|
127
|
+
<path
|
|
128
|
+
d="M13.7344 12.0781L10.9609 17.6211L8.1875 12.0781H13.7344Z"
|
|
129
|
+
fill="currentColor"
|
|
130
|
+
></path>
|
|
131
|
+
</svg>
|
|
132
|
+
{/if}
|
|
133
|
+
</span>
|
|
89
134
|
</button>
|
|
135
|
+
|
|
90
136
|
{:else}
|
|
91
137
|
<button
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
138
|
+
type="submit"
|
|
139
|
+
class={buttonClass}
|
|
140
|
+
data-module="govuk-button"
|
|
141
|
+
onclick={onClickFunction}
|
|
96
142
|
>
|
|
97
143
|
{textContent}
|
|
98
144
|
</button>
|
|
99
145
|
{/if}
|
|
146
|
+
|
|
100
147
|
{:else}
|
|
101
148
|
<div class="p-4">
|
|
102
149
|
{#if buttonType === "start"}
|
|
103
150
|
<a
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
151
|
+
href="#"
|
|
152
|
+
role="button"
|
|
153
|
+
draggable="false"
|
|
154
|
+
class="govuk-button govuk-button--start"
|
|
155
|
+
data-module="govuk-button"
|
|
156
|
+
onclick={onClickFunction}
|
|
110
157
|
>
|
|
111
158
|
{textContent}
|
|
112
159
|
<svg
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
160
|
+
class="govuk-button__start-icon"
|
|
161
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
162
|
+
width="17.5"
|
|
163
|
+
height="19"
|
|
164
|
+
viewBox="0 0 33 40"
|
|
165
|
+
aria-hidden="true"
|
|
166
|
+
focusable="false"
|
|
120
167
|
>
|
|
121
168
|
<path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path>
|
|
122
169
|
</svg>
|
|
123
170
|
</a>
|
|
171
|
+
|
|
124
172
|
{:else if buttonType === "disabled"}
|
|
125
173
|
<button
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
174
|
+
type="submit"
|
|
175
|
+
disabled
|
|
176
|
+
aria-disabled="true"
|
|
177
|
+
class="govuk-button"
|
|
178
|
+
data-module="govuk-button"
|
|
179
|
+
onclick={onClickFunction}
|
|
132
180
|
>
|
|
133
181
|
{textContent}
|
|
134
182
|
</button>
|
|
183
|
+
|
|
135
184
|
{:else if buttonType === "table header"}
|
|
136
|
-
<button
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
185
|
+
<button
|
|
186
|
+
type="button"
|
|
187
|
+
class="text-header"
|
|
188
|
+
onclick={onClickFunction}
|
|
189
|
+
disabled={disabled}
|
|
190
|
+
>
|
|
191
|
+
<span>{textContent}</span>
|
|
192
|
+
|
|
193
|
+
<span class="sort-icon" aria-hidden="true">
|
|
194
|
+
{#if direction === "ascending"}
|
|
195
|
+
<svg
|
|
196
|
+
class="sort-arrow-single"
|
|
197
|
+
width="1em"
|
|
198
|
+
height="1em"
|
|
199
|
+
focusable="false"
|
|
200
|
+
role="img"
|
|
201
|
+
viewBox="0 0 22 22"
|
|
202
|
+
fill="currentColor"
|
|
203
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
204
|
+
>
|
|
205
|
+
<path
|
|
206
|
+
d="M8.1875 9.5L10.9609 3.95703L13.7344 9.5H8.1875Z"
|
|
207
|
+
fill="currentColor"
|
|
208
|
+
></path>
|
|
209
|
+
</svg>
|
|
210
|
+
{:else if direction === "descending"}
|
|
211
|
+
<svg
|
|
212
|
+
class="sort-arrow-single"
|
|
213
|
+
width="1em"
|
|
214
|
+
height="1em"
|
|
215
|
+
focusable="false"
|
|
216
|
+
role="img"
|
|
217
|
+
viewBox="0 0 22 22"
|
|
218
|
+
fill="currentColor"
|
|
219
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
220
|
+
>
|
|
221
|
+
<path
|
|
222
|
+
d="M13.7344 12.0781L10.9609 17.6211L8.1875 12.0781H13.7344Z"
|
|
223
|
+
fill="currentColor"
|
|
224
|
+
></path>
|
|
225
|
+
</svg>
|
|
226
|
+
{:else}
|
|
227
|
+
<svg
|
|
228
|
+
class="sort-arrow-both"
|
|
229
|
+
width="1em"
|
|
230
|
+
height="1em"
|
|
231
|
+
focusable="false"
|
|
232
|
+
role="img"
|
|
233
|
+
viewBox="0 0 22 22"
|
|
234
|
+
fill="currentColor"
|
|
235
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
236
|
+
>
|
|
237
|
+
<path
|
|
238
|
+
d="M8.1875 9.5L10.9609 3.95703L13.7344 9.5H8.1875Z"
|
|
239
|
+
fill="currentColor"
|
|
240
|
+
></path>
|
|
241
|
+
<path
|
|
242
|
+
d="M13.7344 12.0781L10.9609 17.6211L8.1875 12.0781H13.7344Z"
|
|
243
|
+
fill="currentColor"
|
|
244
|
+
></path>
|
|
245
|
+
</svg>
|
|
246
|
+
{/if}
|
|
247
|
+
</span>
|
|
159
248
|
</button>
|
|
249
|
+
|
|
250
|
+
{:else if buttonType === "moreInfo"}
|
|
251
|
+
<button class="more-info-button" type="button" onclick={onClickFunction}>
|
|
252
|
+
<Icon kind="info" />
|
|
253
|
+
</button>
|
|
254
|
+
|
|
160
255
|
{:else}
|
|
161
256
|
<button
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
257
|
+
type="button"
|
|
258
|
+
class={buttonClass}
|
|
259
|
+
data-module="govuk-button"
|
|
260
|
+
onclick={onClickFunction}
|
|
166
261
|
>
|
|
167
262
|
{textContent}
|
|
168
263
|
</button>
|
|
@@ -176,6 +271,26 @@
|
|
|
176
271
|
color: #005ea5;
|
|
177
272
|
}
|
|
178
273
|
|
|
274
|
+
.sort-icon {
|
|
275
|
+
display: inline-flex;
|
|
276
|
+
align-items: center;
|
|
277
|
+
justify-content: center;
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
.sort-icon svg {
|
|
281
|
+
display: block;
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
.sort-arrow-single {
|
|
285
|
+
width: 1em;
|
|
286
|
+
height: 1em;
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
.sort-arrow-both {
|
|
290
|
+
width: 1em;
|
|
291
|
+
height: 1em;
|
|
292
|
+
}
|
|
293
|
+
|
|
179
294
|
.more-info-button {
|
|
180
295
|
display: flex;
|
|
181
296
|
flex: none;
|
|
@@ -185,11 +300,11 @@
|
|
|
185
300
|
cursor: pointer;
|
|
186
301
|
}
|
|
187
302
|
|
|
188
|
-
/* For the scale on hover of group parent */
|
|
189
303
|
:hover .more-info-button {
|
|
190
304
|
transform: scale(1.25);
|
|
191
305
|
}
|
|
306
|
+
|
|
192
307
|
.more-info-button.custom-ring {
|
|
193
308
|
box-shadow: 0 0 0 2px rgba(59, 130, 246, 1);
|
|
194
309
|
}
|
|
195
|
-
</style>
|
|
310
|
+
</style>
|
|
@@ -9,6 +9,8 @@ declare const Button: import("svelte").Component<{
|
|
|
9
9
|
componentNameProp?: any;
|
|
10
10
|
onClickFunction?: any;
|
|
11
11
|
noPadding?: boolean;
|
|
12
|
+
direction?: any;
|
|
13
|
+
disabled?: boolean;
|
|
12
14
|
}, {}, "">;
|
|
13
15
|
type $$ComponentProps = {
|
|
14
16
|
textContent?: any;
|
|
@@ -16,4 +18,6 @@ type $$ComponentProps = {
|
|
|
16
18
|
componentNameProp?: any;
|
|
17
19
|
onClickFunction?: any;
|
|
18
20
|
noPadding?: boolean;
|
|
21
|
+
direction?: any;
|
|
22
|
+
disabled?: boolean;
|
|
19
23
|
};
|