@developer-overheid-nl/don-register-components 1.2.0 → 1.3.1
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/CHANGELOG.md +130 -85
- package/LICENSE.md +291 -291
- package/README.md +20 -20
- package/package.json +5 -7
- package/src/alert/Alert.tsx +19 -19
- package/src/alert/styles.module.css +3 -3
- package/src/alignBox/AlignBox.tsx +114 -114
- package/src/alignBox/styles.module.css +110 -110
- package/src/amountLabel/AmountLabel.tsx +16 -16
- package/src/amountLabel/styles.module.css +11 -11
- package/src/analytics/PiwikPro.tsx +94 -94
- package/src/analytics/index.ts +1 -1
- package/src/article/Article.tsx +10 -10
- package/src/badgeList/BadgeList.tsx +34 -26
- package/src/badgeList/styles.module.css +37 -24
- package/src/block/Block.tsx +35 -35
- package/src/block/styles.module.css +29 -29
- package/src/button/Button.tsx +3 -3
- package/src/cardAsLink/CardAsLink.tsx +21 -21
- package/src/cardAsLink/styles.module.css +23 -23
- package/src/cardsList/CardsList.tsx +56 -54
- package/src/cardsList/styles.module.css +19 -19
- package/src/client.ts +7 -7
- package/src/container/Container.tsx +10 -10
- package/src/container/styles.module.css +28 -28
- package/src/copyButton/CopyButton.tsx +39 -39
- package/src/copyButton/styles.module.css +13 -13
- package/src/dataBadgeLink/DataBadgeLink.tsx +53 -53
- package/src/dataBadgeLink/styles.module.css +89 -69
- package/src/dataSummary/DataSummary.tsx +22 -22
- package/src/dataSummary/DataSummaryItem.tsx +21 -21
- package/src/dataSummary/styles.module.css +75 -75
- package/src/facetFilters/FacetFilters.tsx +419 -313
- package/src/facetFilters/styles.module.css +3 -3
- package/src/fieldset/FieldSet.tsx +3 -3
- package/src/filters/Filters.tsx +116 -115
- package/src/filters/styles.module.css +26 -26
- package/src/footer/Footer.tsx +76 -76
- package/src/footer/styles.module.css +103 -103
- package/src/formFieldCheckboxGroup/FormFieldCheckboxGroup.tsx +16 -16
- package/src/formFieldCheckboxGroup/styles.module.css +5 -5
- package/src/formFieldCheckboxOption/FormFieldCheckboxOption.tsx +26 -26
- package/src/formFieldCheckboxOption/styles.module.css +22 -22
- package/src/formFieldLabel/FormFieldLabel.tsx +23 -23
- package/src/formFieldRadioGroup/FormFieldRadioGroup.tsx +13 -13
- package/src/formFieldRadioGroup/styles.module.css +5 -5
- package/src/formFieldRadioOption/FormFieldRadioOption.tsx +75 -75
- package/src/formFieldRadioOption/styles.module.css +49 -49
- package/src/formFieldSwitch/FormFieldSwitch.tsx +79 -79
- package/src/formFieldSwitch/styles.module.css +32 -32
- package/src/formFieldTextInput/FormFieldTextInput.tsx +3 -3
- package/src/header/Header.tsx +137 -137
- package/src/header/styles.module.css +71 -71
- package/src/heading/Heading.tsx +15 -15
- package/src/headingGroup/HeadingGroup.tsx +48 -48
- package/src/headingGroup/styles.module.css +3 -3
- package/src/i18n.ts +25 -25
- package/src/iconBadge/IconBadge.tsx +35 -35
- package/src/iconBadge/getAppearance.ts +53 -53
- package/src/iconBadge/styles.module.css +19 -19
- package/src/iconsSprite/Icon.tsx +17 -17
- package/src/iconsSprite/IconsSprite.tsx +5 -5
- package/src/index.ts +107 -106
- package/src/infoButton/InfoButton.tsx +45 -45
- package/src/infoButton/styles.module.css +43 -43
- package/src/link/Link.tsx +10 -10
- package/src/markdown/Markdown.tsx +42 -42
- package/src/overlay/Overlay.tsx +18 -18
- package/src/overlay/styles.module.css +15 -15
- package/src/pagination/Pagination.tsx +267 -144
- package/src/pagination/styles.module.css +28 -13
- package/src/paragraph/Paragraph.tsx +24 -24
- package/src/paragraph/styles.module.css +6 -6
- package/src/pillBadge/PillBadge.examples.tsx +107 -107
- package/src/pillBadge/PillBadge.tsx +51 -51
- package/src/pillBadge/styles.module.css +214 -214
- package/src/readOnlyTextInput/ReadOnlyTextInput.tsx +24 -24
- package/src/readOnlyTextInput/styles.module.css +19 -19
- package/src/scoreBadge/ScoreBadge.tsx +133 -133
- package/src/search/Search.tsx +82 -66
- package/src/search/styles.module.css +39 -39
- package/src/siteLogo/SiteLogo.tsx +24 -24
- package/src/switch/Switch.tsx +86 -86
- package/src/switch/styles.module.css +7 -7
- package/src/toolTip/ToolTip.tsx +55 -55
- package/src/toolTip/styles.module.css +49 -48
- package/src/topNavigation/TopNavigation.tsx +67 -67
- package/src/topNavigation/styles.module.css +54 -54
- package/tsconfig.json +121 -121
|
@@ -1,214 +1,214 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--don-pill-badge-font-size: 0.875rem;
|
|
3
|
-
--don-pill-badge-gap: 0.5rem;
|
|
4
|
-
--don-pill-badge-border-radius: 5px;
|
|
5
|
-
--don-pill-badge-padding-inline: 0.5rem;
|
|
6
|
-
--don-pill-badge-padding-block: 0.25rem;
|
|
7
|
-
--don-pill-badge-background-color: var(--rhc-color-cool-grey-200);
|
|
8
|
-
--don-pill-badge-start-color: var(--rhc-color-foreground-on-dark-color);
|
|
9
|
-
--don-pill-badge-start-background-color: var(--rhc-color-cool-grey-700);
|
|
10
|
-
--don-pill-badge-end-color: var(--rhc-color-foreground-on-light-color);
|
|
11
|
-
--don-pill-badge-end-background-color: var(--rhc-color-groen-100);
|
|
12
|
-
--don-pill-badge-border-color: linear-gradient(
|
|
13
|
-
to top,
|
|
14
|
-
rgba(51, 51, 51, 0.25),
|
|
15
|
-
rgba(204, 204, 204, 0.25)
|
|
16
|
-
);
|
|
17
|
-
--don-pill-badge-outline-hover-color: var(--rhc-color-cool-grey-300);
|
|
18
|
-
--don-pill-badge-border-width: 1px;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.pill-badge-figure {
|
|
22
|
-
display: contents;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.pill-badge {
|
|
26
|
-
--percentage: 100%;
|
|
27
|
-
position: relative;
|
|
28
|
-
display: inline-block;
|
|
29
|
-
align-items: center;
|
|
30
|
-
width: fit-content;
|
|
31
|
-
height: auto;
|
|
32
|
-
overflow: clip;
|
|
33
|
-
font-size: var(--don-pill-badge-font-size);
|
|
34
|
-
background-color: var(--don-pill-badge-background-color);
|
|
35
|
-
border-radius: var(--don-pill-badge-border-radius);
|
|
36
|
-
|
|
37
|
-
a:any-link:has(&) {
|
|
38
|
-
text-decoration: none;
|
|
39
|
-
|
|
40
|
-
&:hover {
|
|
41
|
-
outline-width: 2px;
|
|
42
|
-
outline-style: auto;
|
|
43
|
-
outline-color: var(--don-pill-badge-outline-hover-color);
|
|
44
|
-
outline-offset: 0.125rem;
|
|
45
|
-
border-radius: var(--don-pill-badge-border-radius);
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
&:focus,
|
|
49
|
-
&:focus-visible {
|
|
50
|
-
outline-style: auto;
|
|
51
|
-
outline-offset: 0.125rem;
|
|
52
|
-
border-radius: var(--don-pill-badge-border-radius);
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
/* Because Biome CSS parser does not yet support modern attr() some of the following is commented out.
|
|
57
|
-
* Fixme: remove this workaround when https://github.com/biomejs/biome/issues/6183 is closed and tested */
|
|
58
|
-
|
|
59
|
-
/* Browser has modern attr() support */
|
|
60
|
-
/*
|
|
61
|
-
@supports (x: attr(x type(*))) {
|
|
62
|
-
--percentage: attr(data-percentage %, 100%);
|
|
63
|
-
}
|
|
64
|
-
*/
|
|
65
|
-
|
|
66
|
-
/* Browser does not have modern attr() support */
|
|
67
|
-
/* @supports not (x: attr(x type(*))) { */
|
|
68
|
-
&[data-percentage^='1'] {
|
|
69
|
-
--percentage: 10%;
|
|
70
|
-
}
|
|
71
|
-
&[data-percentage^='2'] {
|
|
72
|
-
--percentage: 20%;
|
|
73
|
-
}
|
|
74
|
-
&[data-percentage^='3'] {
|
|
75
|
-
--percentage: 30%;
|
|
76
|
-
}
|
|
77
|
-
&[data-percentage^='4'] {
|
|
78
|
-
--percentage: 40%;
|
|
79
|
-
}
|
|
80
|
-
&[data-percentage^='5'] {
|
|
81
|
-
--percentage: 50%;
|
|
82
|
-
}
|
|
83
|
-
&[data-percentage^='6'] {
|
|
84
|
-
--percentage: 60%;
|
|
85
|
-
}
|
|
86
|
-
&[data-percentage^='7'] {
|
|
87
|
-
--percentage: 70%;
|
|
88
|
-
}
|
|
89
|
-
&[data-percentage^='8'] {
|
|
90
|
-
--percentage: 80%;
|
|
91
|
-
}
|
|
92
|
-
&[data-percentage^='9'] {
|
|
93
|
-
--percentage: 90%;
|
|
94
|
-
}
|
|
95
|
-
&[data-percentage='100'] {
|
|
96
|
-
--percentage: 100%;
|
|
97
|
-
}
|
|
98
|
-
&[data-percentage='9'],
|
|
99
|
-
&[data-percentage='8'],
|
|
100
|
-
&[data-percentage='7'],
|
|
101
|
-
&[data-percentage='6'],
|
|
102
|
-
&[data-percentage='5'],
|
|
103
|
-
&[data-percentage='4'],
|
|
104
|
-
&[data-percentage='3'],
|
|
105
|
-
&[data-percentage='2'],
|
|
106
|
-
&[data-percentage='1'],
|
|
107
|
-
&[data-percentage='0'] {
|
|
108
|
-
--percentage: 0%;
|
|
109
|
-
}
|
|
110
|
-
/*}*/
|
|
111
|
-
|
|
112
|
-
/* --_don-pill-badge-end-color: attr(data-color type(<color>), var(--don-pill-badge-end-color));*/
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
.pill-badge::before {
|
|
116
|
-
position: absolute;
|
|
117
|
-
inset: 0;
|
|
118
|
-
content: '';
|
|
119
|
-
background: var(--don-pill-badge-border-color) border-box;
|
|
120
|
-
border: var(--don-pill-badge-border-width) solid transparent;
|
|
121
|
-
border-radius: var(--don-pill-badge-border-radius);
|
|
122
|
-
mask:
|
|
123
|
-
linear-gradient(#000 0 0) content-box,
|
|
124
|
-
linear-gradient(#000 0 0);
|
|
125
|
-
mask-composite: exclude;
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
.pill-badge__start {
|
|
129
|
-
padding-block: var(--don-pill-badge-padding-block);
|
|
130
|
-
padding-inline: var(--don-pill-badge-padding-inline);
|
|
131
|
-
padding-inline-end: calc(0.5 * var(--don-pill-badge-gap));
|
|
132
|
-
color: var(--don-pill-badge-start-color);
|
|
133
|
-
background-color: var(--don-pill-badge-start-background-color);
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
.pill-badge__end {
|
|
137
|
-
padding-block: var(--don-pill-badge-padding-block);
|
|
138
|
-
padding-inline: var(--don-pill-badge-padding-inline);
|
|
139
|
-
padding-inline-start: calc(0.5 * var(--don-pill-badge-gap));
|
|
140
|
-
color: var(--don-pill-badge-end-color);
|
|
141
|
-
background-color: var(--don-pill-badge-end-background-color);
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
.pill-badge--type-percentage .pill-badge__end {
|
|
145
|
-
background: linear-gradient(
|
|
146
|
-
to right,
|
|
147
|
-
var(--don-pill-badge-end-background-color) var(--percentage),
|
|
148
|
-
var(--don-pill-badge-background-color) var(--percentage)
|
|
149
|
-
);
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
/* Pre-defined Rijkshuisstijl colors,
|
|
153
|
-
* AA contrast checked, most are AAA prove, but not all because of font-size
|
|
154
|
-
*/
|
|
155
|
-
[data-color='robijnrood'] .pill-badge__end {
|
|
156
|
-
--don-pill-badge-end-background-color: var(--rhc-color-robijnrood-200);
|
|
157
|
-
}
|
|
158
|
-
[data-color='roze'] .pill-badge__end {
|
|
159
|
-
--don-pill-badge-end-background-color: var(--rhc-color-roze-300);
|
|
160
|
-
}
|
|
161
|
-
[data-color='rood'] .pill-badge__end {
|
|
162
|
-
/* Not AAA prove */
|
|
163
|
-
--don-pill-badge-end-background-color: var(--rhc-color-rood-500);
|
|
164
|
-
--don-pill-badge-end-color: var(--rhc-color-foreground-on-dark-color);
|
|
165
|
-
--don-pill-badge-background-color: var(--rhc-color-cool-grey-500);
|
|
166
|
-
}
|
|
167
|
-
[data-color='oranje'] .pill-badge__end {
|
|
168
|
-
--don-pill-badge-end-background-color: var(--rhc-color-oranje-300);
|
|
169
|
-
}
|
|
170
|
-
[data-color='donkergeel'] .pill-badge__end {
|
|
171
|
-
--don-pill-badge-end-background-color: var(--rhc-color-donkergeel-400);
|
|
172
|
-
}
|
|
173
|
-
[data-color='geel'] .pill-badge__end {
|
|
174
|
-
--don-pill-badge-end-background-color: var(--rhc-color-geel-400);
|
|
175
|
-
}
|
|
176
|
-
[data-color='donkergroen'] .pill-badge__end {
|
|
177
|
-
--don-pill-badge-end-background-color: var(--rhc-color-donkergroen-500);
|
|
178
|
-
--don-pill-badge-end-color: var(--rhc-color-foreground-on-dark-color);
|
|
179
|
-
--don-pill-badge-background-color: var(--rhc-color-cool-grey-500);
|
|
180
|
-
}
|
|
181
|
-
[data-color='groen'] .pill-badge__end {
|
|
182
|
-
--don-pill-badge-end-background-color: var(--rhc-color-groen-300);
|
|
183
|
-
}
|
|
184
|
-
[data-color='mosgroen'] .pill-badge__end {
|
|
185
|
-
--don-pill-badge-end-background-color: var(--rhc-color-mosgroen-300);
|
|
186
|
-
}
|
|
187
|
-
[data-color='mintgroen'] .pill-badge__end {
|
|
188
|
-
--don-pill-badge-end-background-color: var(--rhc-color-mintgroen-400);
|
|
189
|
-
}
|
|
190
|
-
[data-color='donkerblauw'] .pill-badge__end {
|
|
191
|
-
/* Not AAA prove */
|
|
192
|
-
--don-pill-badge-end-background-color: var(--rhc-color-donkerblauw-500);
|
|
193
|
-
--don-pill-badge-end-color: var(--rhc-color-foreground-on-dark-color);
|
|
194
|
-
--don-pill-badge-background-color: var(--rhc-color-cool-grey-500);
|
|
195
|
-
}
|
|
196
|
-
[data-color='hemelblauw'] .pill-badge__end {
|
|
197
|
-
--don-pill-badge-end-background-color: var(--rhc-color-hemelblauw-200);
|
|
198
|
-
}
|
|
199
|
-
[data-color='paars'] .pill-badge__end {
|
|
200
|
-
--don-pill-badge-end-background-color: var(--rhc-color-paars-500);
|
|
201
|
-
--don-pill-badge-end-color: var(--rhc-color-foreground-on-dark-color);
|
|
202
|
-
--don-pill-badge-background-color: var(--rhc-color-cool-grey-500);
|
|
203
|
-
}
|
|
204
|
-
[data-color='violet'] .pill-badge__end {
|
|
205
|
-
--don-pill-badge-end-background-color: var(--rhc-color-violet-200);
|
|
206
|
-
}
|
|
207
|
-
[data-color='lichtblauw'] .pill-badge__end {
|
|
208
|
-
--don-pill-badge-end-background-color: var(--rhc-color-lichtblauw-300);
|
|
209
|
-
}
|
|
210
|
-
[data-color='coolgrey'] .pill-badge__end,
|
|
211
|
-
[data-color='grijs'] .pill-badge__end,
|
|
212
|
-
[data-color='grey'] .pill-badge__end {
|
|
213
|
-
--don-pill-badge-end-background-color: var(--rhc-color-cool-grey-300);
|
|
214
|
-
}
|
|
1
|
+
:root {
|
|
2
|
+
--don-pill-badge-font-size: 0.875rem;
|
|
3
|
+
--don-pill-badge-gap: 0.5rem;
|
|
4
|
+
--don-pill-badge-border-radius: 5px;
|
|
5
|
+
--don-pill-badge-padding-inline: 0.5rem;
|
|
6
|
+
--don-pill-badge-padding-block: 0.25rem;
|
|
7
|
+
--don-pill-badge-background-color: var(--rhc-color-cool-grey-200);
|
|
8
|
+
--don-pill-badge-start-color: var(--rhc-color-foreground-on-dark-color);
|
|
9
|
+
--don-pill-badge-start-background-color: var(--rhc-color-cool-grey-700);
|
|
10
|
+
--don-pill-badge-end-color: var(--rhc-color-foreground-on-light-color);
|
|
11
|
+
--don-pill-badge-end-background-color: var(--rhc-color-groen-100);
|
|
12
|
+
--don-pill-badge-border-color: linear-gradient(
|
|
13
|
+
to top,
|
|
14
|
+
rgba(51, 51, 51, 0.25),
|
|
15
|
+
rgba(204, 204, 204, 0.25)
|
|
16
|
+
);
|
|
17
|
+
--don-pill-badge-outline-hover-color: var(--rhc-color-cool-grey-300);
|
|
18
|
+
--don-pill-badge-border-width: 1px;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.pill-badge-figure {
|
|
22
|
+
display: contents;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.pill-badge {
|
|
26
|
+
--percentage: 100%;
|
|
27
|
+
position: relative;
|
|
28
|
+
display: inline-block;
|
|
29
|
+
align-items: center;
|
|
30
|
+
width: fit-content;
|
|
31
|
+
height: auto;
|
|
32
|
+
overflow: clip;
|
|
33
|
+
font-size: var(--don-pill-badge-font-size);
|
|
34
|
+
background-color: var(--don-pill-badge-background-color);
|
|
35
|
+
border-radius: var(--don-pill-badge-border-radius);
|
|
36
|
+
|
|
37
|
+
a:any-link:has(&) {
|
|
38
|
+
text-decoration: none;
|
|
39
|
+
|
|
40
|
+
&:hover {
|
|
41
|
+
outline-width: 2px;
|
|
42
|
+
outline-style: auto;
|
|
43
|
+
outline-color: var(--don-pill-badge-outline-hover-color);
|
|
44
|
+
outline-offset: 0.125rem;
|
|
45
|
+
border-radius: var(--don-pill-badge-border-radius);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
&:focus,
|
|
49
|
+
&:focus-visible {
|
|
50
|
+
outline-style: auto;
|
|
51
|
+
outline-offset: 0.125rem;
|
|
52
|
+
border-radius: var(--don-pill-badge-border-radius);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* Because Biome CSS parser does not yet support modern attr() some of the following is commented out.
|
|
57
|
+
* Fixme: remove this workaround when https://github.com/biomejs/biome/issues/6183 is closed and tested */
|
|
58
|
+
|
|
59
|
+
/* Browser has modern attr() support */
|
|
60
|
+
/*
|
|
61
|
+
@supports (x: attr(x type(*))) {
|
|
62
|
+
--percentage: attr(data-percentage %, 100%);
|
|
63
|
+
}
|
|
64
|
+
*/
|
|
65
|
+
|
|
66
|
+
/* Browser does not have modern attr() support */
|
|
67
|
+
/* @supports not (x: attr(x type(*))) { */
|
|
68
|
+
&[data-percentage^='1'] {
|
|
69
|
+
--percentage: 10%;
|
|
70
|
+
}
|
|
71
|
+
&[data-percentage^='2'] {
|
|
72
|
+
--percentage: 20%;
|
|
73
|
+
}
|
|
74
|
+
&[data-percentage^='3'] {
|
|
75
|
+
--percentage: 30%;
|
|
76
|
+
}
|
|
77
|
+
&[data-percentage^='4'] {
|
|
78
|
+
--percentage: 40%;
|
|
79
|
+
}
|
|
80
|
+
&[data-percentage^='5'] {
|
|
81
|
+
--percentage: 50%;
|
|
82
|
+
}
|
|
83
|
+
&[data-percentage^='6'] {
|
|
84
|
+
--percentage: 60%;
|
|
85
|
+
}
|
|
86
|
+
&[data-percentage^='7'] {
|
|
87
|
+
--percentage: 70%;
|
|
88
|
+
}
|
|
89
|
+
&[data-percentage^='8'] {
|
|
90
|
+
--percentage: 80%;
|
|
91
|
+
}
|
|
92
|
+
&[data-percentage^='9'] {
|
|
93
|
+
--percentage: 90%;
|
|
94
|
+
}
|
|
95
|
+
&[data-percentage='100'] {
|
|
96
|
+
--percentage: 100%;
|
|
97
|
+
}
|
|
98
|
+
&[data-percentage='9'],
|
|
99
|
+
&[data-percentage='8'],
|
|
100
|
+
&[data-percentage='7'],
|
|
101
|
+
&[data-percentage='6'],
|
|
102
|
+
&[data-percentage='5'],
|
|
103
|
+
&[data-percentage='4'],
|
|
104
|
+
&[data-percentage='3'],
|
|
105
|
+
&[data-percentage='2'],
|
|
106
|
+
&[data-percentage='1'],
|
|
107
|
+
&[data-percentage='0'] {
|
|
108
|
+
--percentage: 0%;
|
|
109
|
+
}
|
|
110
|
+
/*}*/
|
|
111
|
+
|
|
112
|
+
/* --_don-pill-badge-end-color: attr(data-color type(<color>), var(--don-pill-badge-end-color));*/
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.pill-badge::before {
|
|
116
|
+
position: absolute;
|
|
117
|
+
inset: 0;
|
|
118
|
+
content: '';
|
|
119
|
+
background: var(--don-pill-badge-border-color) border-box;
|
|
120
|
+
border: var(--don-pill-badge-border-width) solid transparent;
|
|
121
|
+
border-radius: var(--don-pill-badge-border-radius);
|
|
122
|
+
mask:
|
|
123
|
+
linear-gradient(#000 0 0) content-box,
|
|
124
|
+
linear-gradient(#000 0 0);
|
|
125
|
+
mask-composite: exclude;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.pill-badge__start {
|
|
129
|
+
padding-block: var(--don-pill-badge-padding-block);
|
|
130
|
+
padding-inline: var(--don-pill-badge-padding-inline);
|
|
131
|
+
padding-inline-end: calc(0.5 * var(--don-pill-badge-gap));
|
|
132
|
+
color: var(--don-pill-badge-start-color);
|
|
133
|
+
background-color: var(--don-pill-badge-start-background-color);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.pill-badge__end {
|
|
137
|
+
padding-block: var(--don-pill-badge-padding-block);
|
|
138
|
+
padding-inline: var(--don-pill-badge-padding-inline);
|
|
139
|
+
padding-inline-start: calc(0.5 * var(--don-pill-badge-gap));
|
|
140
|
+
color: var(--don-pill-badge-end-color);
|
|
141
|
+
background-color: var(--don-pill-badge-end-background-color);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.pill-badge--type-percentage .pill-badge__end {
|
|
145
|
+
background: linear-gradient(
|
|
146
|
+
to right,
|
|
147
|
+
var(--don-pill-badge-end-background-color) var(--percentage),
|
|
148
|
+
var(--don-pill-badge-background-color) var(--percentage)
|
|
149
|
+
);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
/* Pre-defined Rijkshuisstijl colors,
|
|
153
|
+
* AA contrast checked, most are AAA prove, but not all because of font-size
|
|
154
|
+
*/
|
|
155
|
+
[data-color='robijnrood'] .pill-badge__end {
|
|
156
|
+
--don-pill-badge-end-background-color: var(--rhc-color-robijnrood-200);
|
|
157
|
+
}
|
|
158
|
+
[data-color='roze'] .pill-badge__end {
|
|
159
|
+
--don-pill-badge-end-background-color: var(--rhc-color-roze-300);
|
|
160
|
+
}
|
|
161
|
+
[data-color='rood'] .pill-badge__end {
|
|
162
|
+
/* Not AAA prove */
|
|
163
|
+
--don-pill-badge-end-background-color: var(--rhc-color-rood-500);
|
|
164
|
+
--don-pill-badge-end-color: var(--rhc-color-foreground-on-dark-color);
|
|
165
|
+
--don-pill-badge-background-color: var(--rhc-color-cool-grey-500);
|
|
166
|
+
}
|
|
167
|
+
[data-color='oranje'] .pill-badge__end {
|
|
168
|
+
--don-pill-badge-end-background-color: var(--rhc-color-oranje-300);
|
|
169
|
+
}
|
|
170
|
+
[data-color='donkergeel'] .pill-badge__end {
|
|
171
|
+
--don-pill-badge-end-background-color: var(--rhc-color-donkergeel-400);
|
|
172
|
+
}
|
|
173
|
+
[data-color='geel'] .pill-badge__end {
|
|
174
|
+
--don-pill-badge-end-background-color: var(--rhc-color-geel-400);
|
|
175
|
+
}
|
|
176
|
+
[data-color='donkergroen'] .pill-badge__end {
|
|
177
|
+
--don-pill-badge-end-background-color: var(--rhc-color-donkergroen-500);
|
|
178
|
+
--don-pill-badge-end-color: var(--rhc-color-foreground-on-dark-color);
|
|
179
|
+
--don-pill-badge-background-color: var(--rhc-color-cool-grey-500);
|
|
180
|
+
}
|
|
181
|
+
[data-color='groen'] .pill-badge__end {
|
|
182
|
+
--don-pill-badge-end-background-color: var(--rhc-color-groen-300);
|
|
183
|
+
}
|
|
184
|
+
[data-color='mosgroen'] .pill-badge__end {
|
|
185
|
+
--don-pill-badge-end-background-color: var(--rhc-color-mosgroen-300);
|
|
186
|
+
}
|
|
187
|
+
[data-color='mintgroen'] .pill-badge__end {
|
|
188
|
+
--don-pill-badge-end-background-color: var(--rhc-color-mintgroen-400);
|
|
189
|
+
}
|
|
190
|
+
[data-color='donkerblauw'] .pill-badge__end {
|
|
191
|
+
/* Not AAA prove */
|
|
192
|
+
--don-pill-badge-end-background-color: var(--rhc-color-donkerblauw-500);
|
|
193
|
+
--don-pill-badge-end-color: var(--rhc-color-foreground-on-dark-color);
|
|
194
|
+
--don-pill-badge-background-color: var(--rhc-color-cool-grey-500);
|
|
195
|
+
}
|
|
196
|
+
[data-color='hemelblauw'] .pill-badge__end {
|
|
197
|
+
--don-pill-badge-end-background-color: var(--rhc-color-hemelblauw-200);
|
|
198
|
+
}
|
|
199
|
+
[data-color='paars'] .pill-badge__end {
|
|
200
|
+
--don-pill-badge-end-background-color: var(--rhc-color-paars-500);
|
|
201
|
+
--don-pill-badge-end-color: var(--rhc-color-foreground-on-dark-color);
|
|
202
|
+
--don-pill-badge-background-color: var(--rhc-color-cool-grey-500);
|
|
203
|
+
}
|
|
204
|
+
[data-color='violet'] .pill-badge__end {
|
|
205
|
+
--don-pill-badge-end-background-color: var(--rhc-color-violet-200);
|
|
206
|
+
}
|
|
207
|
+
[data-color='lichtblauw'] .pill-badge__end {
|
|
208
|
+
--don-pill-badge-end-background-color: var(--rhc-color-lichtblauw-300);
|
|
209
|
+
}
|
|
210
|
+
[data-color='coolgrey'] .pill-badge__end,
|
|
211
|
+
[data-color='grijs'] .pill-badge__end,
|
|
212
|
+
[data-color='grey'] .pill-badge__end {
|
|
213
|
+
--don-pill-badge-end-background-color: var(--rhc-color-cool-grey-300);
|
|
214
|
+
}
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
import {
|
|
2
|
-
TextInput,
|
|
3
|
-
type TextInputProps,
|
|
4
|
-
} from "@rijkshuisstijl-community/components-react";
|
|
5
|
-
import { clsx } from "clsx";
|
|
6
|
-
import styles from "./styles.module.css";
|
|
7
|
-
|
|
8
|
-
interface ReadOnlyTextInputProps extends TextInputProps {
|
|
9
|
-
fontVariant?: "slashed-zero" | "monospace" | "normal";
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
const ReadOnlyTextInput = (props: ReadOnlyTextInputProps) => {
|
|
13
|
-
const { className, fontVariant = "normal", ...restProps } = props;
|
|
14
|
-
|
|
15
|
-
return (
|
|
16
|
-
<TextInput
|
|
17
|
-
readOnly
|
|
18
|
-
className={clsx(styles.input, styles[fontVariant], className)}
|
|
19
|
-
{...restProps}
|
|
20
|
-
/>
|
|
21
|
-
);
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
export default ReadOnlyTextInput;
|
|
1
|
+
import {
|
|
2
|
+
TextInput,
|
|
3
|
+
type TextInputProps,
|
|
4
|
+
} from "@rijkshuisstijl-community/components-react";
|
|
5
|
+
import { clsx } from "clsx";
|
|
6
|
+
import styles from "./styles.module.css";
|
|
7
|
+
|
|
8
|
+
interface ReadOnlyTextInputProps extends TextInputProps {
|
|
9
|
+
fontVariant?: "slashed-zero" | "monospace" | "normal";
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
const ReadOnlyTextInput = (props: ReadOnlyTextInputProps) => {
|
|
13
|
+
const { className, fontVariant = "normal", ...restProps } = props;
|
|
14
|
+
|
|
15
|
+
return (
|
|
16
|
+
<TextInput
|
|
17
|
+
readOnly
|
|
18
|
+
className={clsx(styles.input, styles[fontVariant], className)}
|
|
19
|
+
{...restProps}
|
|
20
|
+
/>
|
|
21
|
+
);
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
export default ReadOnlyTextInput;
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
.input.input {
|
|
2
|
-
--utrecht-textbox-max-inline-size: none;
|
|
3
|
-
--utrecht-pointer-target-min-size: 36px;
|
|
4
|
-
/* field-sizing: content; */
|
|
5
|
-
inline-size: -webkit-fill-available;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
.normal {
|
|
9
|
-
font-variant: normal;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.input.slashed-zero {
|
|
13
|
-
/* find a way to use RO font with slashed zero */
|
|
14
|
-
font-variant-numeric: slashed-zero;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
.input.monospace {
|
|
18
|
-
font-family: monospace;
|
|
19
|
-
}
|
|
1
|
+
.input.input {
|
|
2
|
+
--utrecht-textbox-max-inline-size: none;
|
|
3
|
+
--utrecht-pointer-target-min-size: 36px;
|
|
4
|
+
/* field-sizing: content; */
|
|
5
|
+
inline-size: -webkit-fill-available;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.normal {
|
|
9
|
+
font-variant: normal;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.input.slashed-zero {
|
|
13
|
+
/* find a way to use RO font with slashed zero */
|
|
14
|
+
font-variant-numeric: slashed-zero;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.input.monospace {
|
|
18
|
+
font-family: monospace;
|
|
19
|
+
}
|