@developer-overheid-nl/don-register-components 1.1.0 → 1.3.0

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 +118 -43
  2. package/LICENSE.md +291 -291
  3. package/README.md +20 -20
  4. package/package.json +3 -3
  5. package/src/alert/Alert.tsx +19 -19
  6. package/src/alert/styles.module.css +3 -3
  7. package/src/alignBox/AlignBox.tsx +114 -111
  8. package/src/alignBox/styles.module.css +110 -106
  9. package/src/amountLabel/AmountLabel.tsx +16 -0
  10. package/src/amountLabel/styles.module.css +11 -0
  11. package/src/analytics/PiwikPro.tsx +94 -72
  12. package/src/analytics/index.ts +1 -1
  13. package/src/article/Article.tsx +10 -10
  14. package/src/badgeList/BadgeList.tsx +34 -0
  15. package/src/badgeList/styles.module.css +37 -0
  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 +54 -54
  22. package/src/cardsList/styles.module.css +19 -19
  23. package/src/client.ts +7 -2
  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 -50
  29. package/src/dataBadgeLink/styles.module.css +89 -43
  30. package/src/dataSummary/DataSummary.tsx +22 -22
  31. package/src/dataSummary/DataSummaryItem.tsx +21 -21
  32. package/src/dataSummary/styles.module.css +75 -70
  33. package/src/facetFilters/FacetFilters.tsx +367 -0
  34. package/src/facetFilters/styles.module.css +3 -0
  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 -0
  41. package/src/formFieldCheckboxGroup/styles.module.css +5 -0
  42. package/src/formFieldCheckboxOption/FormFieldCheckboxOption.tsx +26 -0
  43. package/src/formFieldCheckboxOption/styles.module.css +22 -0
  44. package/src/formFieldLabel/FormFieldLabel.tsx +23 -23
  45. package/src/formFieldRadioGroup/FormFieldRadioGroup.tsx +13 -0
  46. package/src/formFieldRadioGroup/styles.module.css +5 -0
  47. package/src/formFieldRadioOption/FormFieldRadioOption.tsx +75 -0
  48. package/src/formFieldRadioOption/styles.module.css +49 -0
  49. package/src/formFieldSwitch/FormFieldSwitch.tsx +79 -0
  50. package/src/formFieldSwitch/styles.module.css +32 -0
  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 -10
  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 -32
  59. package/src/iconBadge/getAppearance.ts +53 -47
  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 -80
  64. package/src/infoButton/InfoButton.tsx +45 -0
  65. package/src/infoButton/styles.module.css +43 -0
  66. package/src/link/Link.tsx +10 -10
  67. package/src/markdown/Markdown.tsx +42 -42
  68. package/src/overlay/Overlay.tsx +18 -0
  69. package/src/overlay/styles.module.css +15 -0
  70. package/src/pagination/Pagination.tsx +267 -144
  71. package/src/pagination/styles.module.css +28 -13
  72. package/src/paragraph/Paragraph.tsx +24 -10
  73. package/src/paragraph/styles.module.css +6 -0
  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 -194
  77. package/src/readOnlyTextInput/ReadOnlyTextInput.tsx +24 -24
  78. package/src/readOnlyTextInput/styles.module.css +19 -19
  79. package/src/scoreBadge/ScoreBadge.tsx +133 -132
  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 -0
  84. package/src/switch/styles.module.css +7 -0
  85. package/src/toolTip/ToolTip.tsx +55 -0
  86. package/src/toolTip/styles.module.css +49 -0
  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/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;