@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.
Files changed (89) hide show
  1. package/CHANGELOG.md +130 -85
  2. package/LICENSE.md +291 -291
  3. package/README.md +20 -20
  4. package/package.json +5 -7
  5. package/src/alert/Alert.tsx +19 -19
  6. package/src/alert/styles.module.css +3 -3
  7. package/src/alignBox/AlignBox.tsx +114 -114
  8. package/src/alignBox/styles.module.css +110 -110
  9. package/src/amountLabel/AmountLabel.tsx +16 -16
  10. package/src/amountLabel/styles.module.css +11 -11
  11. package/src/analytics/PiwikPro.tsx +94 -94
  12. package/src/analytics/index.ts +1 -1
  13. package/src/article/Article.tsx +10 -10
  14. package/src/badgeList/BadgeList.tsx +34 -26
  15. package/src/badgeList/styles.module.css +37 -24
  16. package/src/block/Block.tsx +35 -35
  17. package/src/block/styles.module.css +29 -29
  18. package/src/button/Button.tsx +3 -3
  19. package/src/cardAsLink/CardAsLink.tsx +21 -21
  20. package/src/cardAsLink/styles.module.css +23 -23
  21. package/src/cardsList/CardsList.tsx +56 -54
  22. package/src/cardsList/styles.module.css +19 -19
  23. package/src/client.ts +7 -7
  24. package/src/container/Container.tsx +10 -10
  25. package/src/container/styles.module.css +28 -28
  26. package/src/copyButton/CopyButton.tsx +39 -39
  27. package/src/copyButton/styles.module.css +13 -13
  28. package/src/dataBadgeLink/DataBadgeLink.tsx +53 -53
  29. package/src/dataBadgeLink/styles.module.css +89 -69
  30. package/src/dataSummary/DataSummary.tsx +22 -22
  31. package/src/dataSummary/DataSummaryItem.tsx +21 -21
  32. package/src/dataSummary/styles.module.css +75 -75
  33. package/src/facetFilters/FacetFilters.tsx +419 -313
  34. package/src/facetFilters/styles.module.css +3 -3
  35. package/src/fieldset/FieldSet.tsx +3 -3
  36. package/src/filters/Filters.tsx +116 -115
  37. package/src/filters/styles.module.css +26 -26
  38. package/src/footer/Footer.tsx +76 -76
  39. package/src/footer/styles.module.css +103 -103
  40. package/src/formFieldCheckboxGroup/FormFieldCheckboxGroup.tsx +16 -16
  41. package/src/formFieldCheckboxGroup/styles.module.css +5 -5
  42. package/src/formFieldCheckboxOption/FormFieldCheckboxOption.tsx +26 -26
  43. package/src/formFieldCheckboxOption/styles.module.css +22 -22
  44. package/src/formFieldLabel/FormFieldLabel.tsx +23 -23
  45. package/src/formFieldRadioGroup/FormFieldRadioGroup.tsx +13 -13
  46. package/src/formFieldRadioGroup/styles.module.css +5 -5
  47. package/src/formFieldRadioOption/FormFieldRadioOption.tsx +75 -75
  48. package/src/formFieldRadioOption/styles.module.css +49 -49
  49. package/src/formFieldSwitch/FormFieldSwitch.tsx +79 -79
  50. package/src/formFieldSwitch/styles.module.css +32 -32
  51. package/src/formFieldTextInput/FormFieldTextInput.tsx +3 -3
  52. package/src/header/Header.tsx +137 -137
  53. package/src/header/styles.module.css +71 -71
  54. package/src/heading/Heading.tsx +15 -15
  55. package/src/headingGroup/HeadingGroup.tsx +48 -48
  56. package/src/headingGroup/styles.module.css +3 -3
  57. package/src/i18n.ts +25 -25
  58. package/src/iconBadge/IconBadge.tsx +35 -35
  59. package/src/iconBadge/getAppearance.ts +53 -53
  60. package/src/iconBadge/styles.module.css +19 -19
  61. package/src/iconsSprite/Icon.tsx +17 -17
  62. package/src/iconsSprite/IconsSprite.tsx +5 -5
  63. package/src/index.ts +107 -106
  64. package/src/infoButton/InfoButton.tsx +45 -45
  65. package/src/infoButton/styles.module.css +43 -43
  66. package/src/link/Link.tsx +10 -10
  67. package/src/markdown/Markdown.tsx +42 -42
  68. package/src/overlay/Overlay.tsx +18 -18
  69. package/src/overlay/styles.module.css +15 -15
  70. package/src/pagination/Pagination.tsx +267 -144
  71. package/src/pagination/styles.module.css +28 -13
  72. package/src/paragraph/Paragraph.tsx +24 -24
  73. package/src/paragraph/styles.module.css +6 -6
  74. package/src/pillBadge/PillBadge.examples.tsx +107 -107
  75. package/src/pillBadge/PillBadge.tsx +51 -51
  76. package/src/pillBadge/styles.module.css +214 -214
  77. package/src/readOnlyTextInput/ReadOnlyTextInput.tsx +24 -24
  78. package/src/readOnlyTextInput/styles.module.css +19 -19
  79. package/src/scoreBadge/ScoreBadge.tsx +133 -133
  80. package/src/search/Search.tsx +82 -66
  81. package/src/search/styles.module.css +39 -39
  82. package/src/siteLogo/SiteLogo.tsx +24 -24
  83. package/src/switch/Switch.tsx +86 -86
  84. package/src/switch/styles.module.css +7 -7
  85. package/src/toolTip/ToolTip.tsx +55 -55
  86. package/src/toolTip/styles.module.css +49 -48
  87. package/src/topNavigation/TopNavigation.tsx +67 -67
  88. package/src/topNavigation/styles.module.css +54 -54
  89. package/tsconfig.json +121 -121
package/src/paragraph/Paragraph.tsx CHANGED
@@ -1,24 +1,24 @@
1
- import {
2
- Paragraph as RHCParagraph,
3
- type ParagraphProps as RHCParagraphProps,
4
- } from "@rijkshuisstijl-community/components-react";
5
- import clsx from "clsx";
6
- import styles from "./styles.module.css";
7
-
8
- interface ParagraphProps extends RHCParagraphProps {
9
- purpose?: "lead" | "short";
10
- }
11
-
12
- const Paragraph = (props: ParagraphProps) => {
13
- const { className, purpose } = props;
14
-
15
- return (
16
- <RHCParagraph
17
- className={clsx(className, purpose === "short" && styles.short)}
18
- purpose={purpose}
19
- {...props}
20
- />
21
- );
22
- };
23
-
24
- export default Paragraph;
1
+ import {
2
+ Paragraph as RHCParagraph,
3
+ type ParagraphProps as RHCParagraphProps,
4
+ } from "@rijkshuisstijl-community/components-react";
5
+ import clsx from "clsx";
6
+ import styles from "./styles.module.css";
7
+
8
+ interface ParagraphProps extends RHCParagraphProps {
9
+ purpose?: "lead" | "short";
10
+ }
11
+
12
+ const Paragraph = (props: ParagraphProps) => {
13
+ const { className, purpose } = props;
14
+
15
+ return (
16
+ <RHCParagraph
17
+ className={clsx(className, purpose === "short" && styles.short)}
18
+ purpose={purpose}
19
+ {...props}
20
+ />
21
+ );
22
+ };
23
+
24
+ export default Paragraph;
package/src/paragraph/styles.module.css CHANGED
@@ -1,6 +1,6 @@
1
- .short {
2
- --nl-paragraph-font-size: 0.875rem;
3
- --nl-paragraph-margin-block-end: 0.5rem;
4
- padding-inline-start: 0.25rem;
5
- border-inline-start: 1px solid var(--rhc-color-cool-grey-300);
6
- }
1
+ .short {
2
+ --nl-paragraph-font-size: 0.875rem;
3
+ --nl-paragraph-margin-block-end: 0.5rem;
4
+ padding-inline-start: 0.25rem;
5
+ border-inline-start: 1px solid var(--rhc-color-cool-grey-300);
6
+ }
package/src/pillBadge/PillBadge.examples.tsx CHANGED
@@ -1,107 +1,107 @@
1
- /* Temporary file to showcase PillBadge examples in e.g. Storybook later */
2
-
3
- import Block from "../block/Block";
4
- import PillBadge from "./PillBadge";
5
-
6
- export const PillBadgeExamples = () => {
7
- return (
8
- <Block layout="flex-col">
9
- <PillBadge
10
- startValue="Kleur"
11
- endValue="robijnrood"
12
- type="color"
13
- color="robijnrood"
14
- />
15
- <PillBadge startValue="Kleur" endValue="roze" type="color" color="roze" />
16
- <PillBadge startValue="Kleur" endValue="rood" type="color" color="rood" />
17
- <PillBadge
18
- startValue="Kleur"
19
- endValue="oranje"
20
- type="color"
21
- color="oranje"
22
- />
23
- <PillBadge
24
- startValue="Kleur"
25
- endValue="donkergeel"
26
- type="color"
27
- color="donkergeel"
28
- />
29
- <PillBadge startValue="Kleur" endValue="geel" type="color" color="geel" />
30
- <PillBadge
31
- startValue="Kleur"
32
- endValue="donkergroen"
33
- type="color"
34
- color="donkergroen"
35
- />
36
- <PillBadge
37
- startValue="Kleur"
38
- endValue="groen"
39
- type="color"
40
- color="groen"
41
- />
42
- <PillBadge
43
- startValue="Kleur"
44
- endValue="mosgroen"
45
- type="color"
46
- color="mosgroen"
47
- />
48
- <PillBadge
49
- startValue="Kleur"
50
- endValue="mintgroen"
51
- type="color"
52
- color="mintgroen"
53
- />
54
- <PillBadge
55
- startValue="Kleur"
56
- endValue="donkerblauw"
57
- type="color"
58
- color="donkerblauw"
59
- />
60
- <PillBadge
61
- startValue="Kleur"
62
- endValue="hemelblauw"
63
- type="color"
64
- color="hemelblauw"
65
- />
66
- <PillBadge
67
- startValue="Kleur"
68
- endValue="paars"
69
- type="color"
70
- color="paars"
71
- />
72
- <PillBadge
73
- startValue="Kleur"
74
- endValue="violet"
75
- type="color"
76
- color="violet"
77
- />
78
- <PillBadge
79
- startValue="Kleur"
80
- endValue="lichtblauw"
81
- type="color"
82
- color="lichtblauw"
83
- />
84
- <PillBadge
85
- startValue="Kleur"
86
- endValue="coolgrey"
87
- type="color"
88
- color="coolgrey"
89
- />
90
- <PillBadge startValue="Percentage" endValue="76" type="percentage" />
91
- <PillBadge
92
- startValue="Percentage & Kleur"
93
- endValue="42"
94
- type="percentage"
95
- color="robijnrood"
96
- />
97
- <PillBadge
98
- startValue="Percentage & Kleur"
99
- endValue="21"
100
- type="percentage"
101
- color="rood"
102
- />
103
- </Block>
104
- );
105
- };
106
-
107
- export default PillBadgeExamples;
1
+ /* Temporary file to showcase PillBadge examples in e.g. Storybook later */
2
+
3
+ import Block from "../block/Block";
4
+ import PillBadge from "./PillBadge";
5
+
6
+ export const PillBadgeExamples = () => {
7
+ return (
8
+ <Block layout="flex-col">
9
+ <PillBadge
10
+ startValue="Kleur"
11
+ endValue="robijnrood"
12
+ type="color"
13
+ color="robijnrood"
14
+ />
15
+ <PillBadge startValue="Kleur" endValue="roze" type="color" color="roze" />
16
+ <PillBadge startValue="Kleur" endValue="rood" type="color" color="rood" />
17
+ <PillBadge
18
+ startValue="Kleur"
19
+ endValue="oranje"
20
+ type="color"
21
+ color="oranje"
22
+ />
23
+ <PillBadge
24
+ startValue="Kleur"
25
+ endValue="donkergeel"
26
+ type="color"
27
+ color="donkergeel"
28
+ />
29
+ <PillBadge startValue="Kleur" endValue="geel" type="color" color="geel" />
30
+ <PillBadge
31
+ startValue="Kleur"
32
+ endValue="donkergroen"
33
+ type="color"
34
+ color="donkergroen"
35
+ />
36
+ <PillBadge
37
+ startValue="Kleur"
38
+ endValue="groen"
39
+ type="color"
40
+ color="groen"
41
+ />
42
+ <PillBadge
43
+ startValue="Kleur"
44
+ endValue="mosgroen"
45
+ type="color"
46
+ color="mosgroen"
47
+ />
48
+ <PillBadge
49
+ startValue="Kleur"
50
+ endValue="mintgroen"
51
+ type="color"
52
+ color="mintgroen"
53
+ />
54
+ <PillBadge
55
+ startValue="Kleur"
56
+ endValue="donkerblauw"
57
+ type="color"
58
+ color="donkerblauw"
59
+ />
60
+ <PillBadge
61
+ startValue="Kleur"
62
+ endValue="hemelblauw"
63
+ type="color"
64
+ color="hemelblauw"
65
+ />
66
+ <PillBadge
67
+ startValue="Kleur"
68
+ endValue="paars"
69
+ type="color"
70
+ color="paars"
71
+ />
72
+ <PillBadge
73
+ startValue="Kleur"
74
+ endValue="violet"
75
+ type="color"
76
+ color="violet"
77
+ />
78
+ <PillBadge
79
+ startValue="Kleur"
80
+ endValue="lichtblauw"
81
+ type="color"
82
+ color="lichtblauw"
83
+ />
84
+ <PillBadge
85
+ startValue="Kleur"
86
+ endValue="coolgrey"
87
+ type="color"
88
+ color="coolgrey"
89
+ />
90
+ <PillBadge startValue="Percentage" endValue="76" type="percentage" />
91
+ <PillBadge
92
+ startValue="Percentage & Kleur"
93
+ endValue="42"
94
+ type="percentage"
95
+ color="robijnrood"
96
+ />
97
+ <PillBadge
98
+ startValue="Percentage & Kleur"
99
+ endValue="21"
100
+ type="percentage"
101
+ color="rood"
102
+ />
103
+ </Block>
104
+ );
105
+ };
106
+
107
+ export default PillBadgeExamples;
package/src/pillBadge/PillBadge.tsx CHANGED
@@ -1,51 +1,51 @@
1
- import clsx from "clsx";
2
- import type { PropsWithChildren } from "react";
3
- import styles from "./styles.module.css";
4
-
5
- export interface PillBadgeProps {
6
- className?: string;
7
- startValue: string | number | null | undefined;
8
- endValue: string | number | null | undefined;
9
- caption?: string;
10
- type?: "color" | "percentage";
11
- color?: string; // todo: enum
12
- }
13
-
14
- const PillBadge = (props: PropsWithChildren<PillBadgeProps>) => {
15
- const {
16
- className,
17
- startValue,
18
- endValue,
19
- caption,
20
- type = "color",
21
- color,
22
- children,
23
- ...restProps
24
- } = props;
25
-
26
- return (
27
- <figure
28
- className={clsx(styles["pill-badge-figure"], className)}
29
- {...restProps}
30
- >
31
- <div
32
- className={clsx(
33
- styles["pill-badge"],
34
- type === "percentage" && styles["pill-badge--type-percentage"],
35
- )}
36
- data-percentage={type === "percentage" ? endValue : undefined}
37
- data-color={color}
38
- >
39
- <span className={styles["pill-badge__start"]}>{startValue || "■"}</span>
40
- <span className={styles["pill-badge__end"]}>
41
- {endValue || "-"}
42
- {type === "percentage" ? "%" : ""}
43
- </span>
44
- </div>
45
- {children}
46
- {caption && <figcaption>{caption}</figcaption>}
47
- </figure>
48
- );
49
- };
50
-
51
- export default PillBadge;
1
+ import clsx from "clsx";
2
+ import type { PropsWithChildren } from "react";
3
+ import styles from "./styles.module.css";
4
+
5
+ export interface PillBadgeProps {
6
+ className?: string;
7
+ startValue: string | number | null | undefined;
8
+ endValue: string | number | null | undefined;
9
+ caption?: string;
10
+ type?: "color" | "percentage";
11
+ color?: string; // todo: enum
12
+ }
13
+
14
+ const PillBadge = (props: PropsWithChildren<PillBadgeProps>) => {
15
+ const {
16
+ className,
17
+ startValue,
18
+ endValue,
19
+ caption,
20
+ type = "color",
21
+ color,
22
+ children,
23
+ ...restProps
24
+ } = props;
25
+
26
+ return (
27
+ <figure
28
+ className={clsx(styles["pill-badge-figure"], className)}
29
+ {...restProps}
30
+ >
31
+ <div
32
+ className={clsx(
33
+ styles["pill-badge"],
34
+ type === "percentage" && styles["pill-badge--type-percentage"],
35
+ )}
36
+ data-percentage={type === "percentage" ? endValue : undefined}
37
+ data-color={color}
38
+ >
39
+ <span className={styles["pill-badge__start"]}>{startValue || "■"}</span>
40
+ <span className={styles["pill-badge__end"]}>
41
+ {endValue || "-"}
42
+ {type === "percentage" ? "%" : ""}
43
+ </span>
44
+ </div>
45
+ {children}
46
+ {caption && <figcaption>{caption}</figcaption>}
47
+ </figure>
48
+ );
49
+ };
50
+
51
+ export default PillBadge;