@amsterdam/design-system-react 2.1.0 → 3.0.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 (279) hide show
  1. package/README.md +1 -1
  2. package/dist/Avatar/Avatar.d.ts +2 -2
  3. package/dist/Card/Card.d.ts +1 -1
  4. package/dist/Card/CardHeading.d.ts +1 -1
  5. package/dist/Checkbox/Checkbox.d.ts +1 -1
  6. package/dist/Column/Column.d.ts +1 -1
  7. package/dist/DateInput/DateInput.d.ts +1 -1
  8. package/dist/FieldSet/FieldSet.d.ts +11 -0
  9. package/dist/FieldSet/FieldSet.js +3 -3
  10. package/dist/Grid/Grid.d.ts +1 -1
  11. package/dist/Grid/GridCell.d.ts +1 -1
  12. package/dist/Hint/Hint.d.ts +1 -0
  13. package/dist/Hint/Hint.js +2 -2
  14. package/dist/Image/Image.js +1 -1
  15. package/dist/Label/Label.d.ts +11 -0
  16. package/dist/Label/Label.js +2 -2
  17. package/dist/LinkList/LinkList.d.ts +1 -1
  18. package/dist/Logo/Logo.d.ts +10 -5
  19. package/dist/Logo/Logo.js +17 -9
  20. package/dist/Menu/MenuLink.d.ts +2 -2
  21. package/dist/Page/Page.d.ts +6 -2
  22. package/dist/Page/Page.js +1 -1
  23. package/dist/PageFooter/PageFooter.d.ts +4 -1
  24. package/dist/PageFooter/PageFooterMenu.d.ts +27 -2
  25. package/dist/PageFooter/PageFooterMenu.js +6 -2
  26. package/dist/PageHeader/PageHeader.d.ts +14 -4
  27. package/dist/PageHeader/PageHeader.js +3 -2
  28. package/dist/PageHeader/PageHeaderGridCellNarrowWindowOnly.js +2 -1
  29. package/dist/PageHeader/PageHeaderMenuIcon.js +1 -1
  30. package/dist/PageHeader/PageHeaderMenuLink.d.ts +7 -0
  31. package/dist/PageHeader/PageHeaderMenuLink.js +3 -2
  32. package/dist/Paragraph/Paragraph.d.ts +2 -2
  33. package/dist/Paragraph/Paragraph.js +8 -1
  34. package/dist/PasswordInput/PasswordInput.d.ts +1 -1
  35. package/dist/Radio/Radio.d.ts +1 -1
  36. package/dist/Row/Row.d.ts +1 -1
  37. package/dist/SearchField/SearchField.d.ts +1 -1
  38. package/dist/Spotlight/Spotlight.d.ts +1 -1
  39. package/dist/TimeInput/TimeInput.d.ts +1 -1
  40. package/dist/common/useIsAfterBreakpoint.d.ts +4 -4
  41. package/dist/common/useIsAfterBreakpoint.js +12 -13
  42. package/dist/index.cjs.js +95 -62
  43. package/dist/index.cjs.js.map +1 -1
  44. package/dist/index.d.ts +1958 -61
  45. package/dist/index.esm.js +96 -63
  46. package/dist/index.esm.js.map +1 -1
  47. package/dist/tsconfig.build.tsbuildinfo +1 -1
  48. package/package.json +11 -16
  49. package/dist/Accordion/Accordion.test.d.ts +0 -5
  50. package/dist/Accordion/Accordion.test.js +0 -44
  51. package/dist/Accordion/AccordionSection.test.d.ts +0 -5
  52. package/dist/Accordion/AccordionSection.test.js +0 -100
  53. package/dist/ActionGroup/ActionGroup.test.d.ts +0 -5
  54. package/dist/ActionGroup/ActionGroup.test.js +0 -33
  55. package/dist/Alert/Alert.test.d.ts +0 -5
  56. package/dist/Alert/Alert.test.js +0 -74
  57. package/dist/App/App.d.ts +0 -12
  58. package/dist/App/App.js +0 -8
  59. package/dist/App/App.test.d.ts +0 -5
  60. package/dist/App/App.test.js +0 -33
  61. package/dist/App/index.d.ts +0 -6
  62. package/dist/App/index.js +0 -5
  63. package/dist/AppNavigation/AppNavigation.d.ts +0 -45
  64. package/dist/AppNavigation/AppNavigation.js +0 -18
  65. package/dist/AppNavigation/AppNavigation.test.d.ts +0 -5
  66. package/dist/AppNavigation/AppNavigation.test.js +0 -33
  67. package/dist/AppNavigation/AppNavigationButton.d.ts +0 -18
  68. package/dist/AppNavigation/AppNavigationButton.js +0 -17
  69. package/dist/AppNavigation/AppNavigationLink.d.ts +0 -19
  70. package/dist/AppNavigation/AppNavigationLink.js +0 -19
  71. package/dist/AppNavigation/AppNavigationMenu.d.ts +0 -9
  72. package/dist/AppNavigation/AppNavigationMenu.js +0 -5
  73. package/dist/AppNavigation/index.d.ts +0 -6
  74. package/dist/AppNavigation/index.js +0 -5
  75. package/dist/Avatar/Avatar.test.d.ts +0 -5
  76. package/dist/Avatar/Avatar.test.js +0 -63
  77. package/dist/Badge/Badge.test.d.ts +0 -5
  78. package/dist/Badge/Badge.test.js +0 -43
  79. package/dist/Blockquote/Blockquote.test.d.ts +0 -5
  80. package/dist/Blockquote/Blockquote.test.js +0 -46
  81. package/dist/Breadcrumb/Breadcrumb.test.d.ts +0 -5
  82. package/dist/Breadcrumb/Breadcrumb.test.js +0 -45
  83. package/dist/Breadcrumb/BreadcrumbLink.test.d.ts +0 -5
  84. package/dist/Breadcrumb/BreadcrumbLink.test.js +0 -40
  85. package/dist/Breakout/Breakout.test.d.ts +0 -5
  86. package/dist/Breakout/Breakout.test.js +0 -62
  87. package/dist/Breakout/BreakoutCell.test.d.ts +0 -5
  88. package/dist/Breakout/BreakoutCell.test.js +0 -128
  89. package/dist/Button/Button.test.d.ts +0 -5
  90. package/dist/Button/Button.test.js +0 -114
  91. package/dist/CallToActionLink/CallToActionLink.test.d.ts +0 -5
  92. package/dist/CallToActionLink/CallToActionLink.test.js +0 -33
  93. package/dist/Card/Card.test.d.ts +0 -5
  94. package/dist/Card/Card.test.js +0 -33
  95. package/dist/Card/CardHeading.test.d.ts +0 -5
  96. package/dist/Card/CardHeading.test.js +0 -38
  97. package/dist/Card/CardHeadingGroup.test.d.ts +0 -5
  98. package/dist/Card/CardHeadingGroup.test.js +0 -38
  99. package/dist/Card/CardImage.test.d.ts +0 -5
  100. package/dist/Card/CardImage.test.js +0 -33
  101. package/dist/Card/CardLink.test.d.ts +0 -5
  102. package/dist/Card/CardLink.test.js +0 -33
  103. package/dist/CharacterCount/CharacterCount.test.d.ts +0 -5
  104. package/dist/CharacterCount/CharacterCount.test.js +0 -38
  105. package/dist/Checkbox/Checkbox.test.d.ts +0 -5
  106. package/dist/Checkbox/Checkbox.test.js +0 -142
  107. package/dist/Column/Column.test.d.ts +0 -5
  108. package/dist/Column/Column.test.js +0 -59
  109. package/dist/DateInput/DateInput.test.d.ts +0 -5
  110. package/dist/DateInput/DateInput.test.js +0 -58
  111. package/dist/DescriptionList/DescriptionList.test.d.ts +0 -5
  112. package/dist/DescriptionList/DescriptionList.test.js +0 -43
  113. package/dist/DescriptionList/DescriptionListDescription.test.d.ts +0 -5
  114. package/dist/DescriptionList/DescriptionListDescription.test.js +0 -33
  115. package/dist/DescriptionList/DescriptionListSection.test.d.ts +0 -5
  116. package/dist/DescriptionList/DescriptionListSection.test.js +0 -33
  117. package/dist/DescriptionList/DescriptionListTerm.test.d.ts +0 -5
  118. package/dist/DescriptionList/DescriptionListTerm.test.js +0 -33
  119. package/dist/Dialog/Dialog.test.d.ts +0 -5
  120. package/dist/Dialog/Dialog.test.js +0 -82
  121. package/dist/ErrorMessage/ErrorMessage.test.d.ts +0 -5
  122. package/dist/ErrorMessage/ErrorMessage.test.js +0 -53
  123. package/dist/Field/Field.test.d.ts +0 -5
  124. package/dist/Field/Field.test.js +0 -38
  125. package/dist/FieldSet/FieldSet.test.d.ts +0 -5
  126. package/dist/FieldSet/FieldSet.test.js +0 -70
  127. package/dist/Figure/Figure.test.d.ts +0 -5
  128. package/dist/Figure/Figure.test.js +0 -33
  129. package/dist/Figure/FigureCaption.test.d.ts +0 -5
  130. package/dist/Figure/FigureCaption.test.js +0 -38
  131. package/dist/FileInput/FileInput.test.d.ts +0 -5
  132. package/dist/FileInput/FileInput.test.js +0 -33
  133. package/dist/FileList/FileList.test.d.ts +0 -5
  134. package/dist/FileList/FileList.test.js +0 -33
  135. package/dist/FileList/FileListItem.test.d.ts +0 -5
  136. package/dist/FileList/FileListItem.test.js +0 -44
  137. package/dist/Grid/Grid.test.d.ts +0 -5
  138. package/dist/Grid/Grid.test.js +0 -69
  139. package/dist/Grid/GridCell.test.d.ts +0 -5
  140. package/dist/Grid/GridCell.test.js +0 -84
  141. package/dist/Heading/Heading.test.d.ts +0 -5
  142. package/dist/Heading/Heading.test.js +0 -70
  143. package/dist/Hint/Hint.test.d.ts +0 -5
  144. package/dist/Hint/Hint.test.js +0 -53
  145. package/dist/Icon/Icon.test.d.ts +0 -5
  146. package/dist/Icon/Icon.test.js +0 -60
  147. package/dist/IconButton/IconButton.test.d.ts +0 -5
  148. package/dist/IconButton/IconButton.test.js +0 -48
  149. package/dist/Image/Image.test.d.ts +0 -5
  150. package/dist/Image/Image.test.js +0 -43
  151. package/dist/ImageSlider/ImageSlider.test.d.ts +0 -5
  152. package/dist/ImageSlider/ImageSlider.test.js +0 -70
  153. package/dist/ImageSlider/ImageSliderControls.test.d.ts +0 -5
  154. package/dist/ImageSlider/ImageSliderControls.test.js +0 -25
  155. package/dist/ImageSlider/ImageSliderItem.test.d.ts +0 -5
  156. package/dist/ImageSlider/ImageSliderItem.test.js +0 -37
  157. package/dist/ImageSlider/ImageSliderScroller.test.d.ts +0 -5
  158. package/dist/ImageSlider/ImageSliderScroller.test.js +0 -37
  159. package/dist/ImageSlider/ImageSliderThumbnails.test.d.ts +0 -5
  160. package/dist/ImageSlider/ImageSliderThumbnails.test.js +0 -52
  161. package/dist/InvalidFormAlert/InvalidFormAlert.test.d.ts +0 -5
  162. package/dist/InvalidFormAlert/InvalidFormAlert.test.js +0 -108
  163. package/dist/Label/Label.test.d.ts +0 -5
  164. package/dist/Label/Label.test.js +0 -82
  165. package/dist/Link/Link.test.d.ts +0 -5
  166. package/dist/Link/Link.test.js +0 -43
  167. package/dist/LinkList/LinkList.test.d.ts +0 -5
  168. package/dist/LinkList/LinkList.test.js +0 -33
  169. package/dist/LinkList/LinkListLink.test.d.ts +0 -5
  170. package/dist/LinkList/LinkListLink.test.js +0 -54
  171. package/dist/Logo/Logo.test.d.ts +0 -5
  172. package/dist/Logo/Logo.test.js +0 -33
  173. package/dist/Mark/Mark.test.d.ts +0 -5
  174. package/dist/Mark/Mark.test.js +0 -33
  175. package/dist/Menu/Menu.test.d.ts +0 -5
  176. package/dist/Menu/Menu.test.js +0 -55
  177. package/dist/Menu/MenuLink.test.d.ts +0 -5
  178. package/dist/Menu/MenuLink.test.js +0 -56
  179. package/dist/OrderedList/OrderedList.test.d.ts +0 -5
  180. package/dist/OrderedList/OrderedList.test.js +0 -55
  181. package/dist/OrderedList/OrderedListItem.test.d.ts +0 -5
  182. package/dist/OrderedList/OrderedListItem.test.js +0 -32
  183. package/dist/Overlap/Overlap.test.d.ts +0 -5
  184. package/dist/Overlap/Overlap.test.js +0 -38
  185. package/dist/Page/Page.test.d.ts +0 -5
  186. package/dist/Page/Page.test.js +0 -33
  187. package/dist/PageFooter/PageFooter.test.d.ts +0 -5
  188. package/dist/PageFooter/PageFooter.test.js +0 -33
  189. package/dist/PageFooter/PageFooterMenu.test.d.ts +0 -5
  190. package/dist/PageFooter/PageFooterMenu.test.js +0 -35
  191. package/dist/PageFooter/PageFooterMenuLink.test.d.ts +0 -5
  192. package/dist/PageFooter/PageFooterMenuLink.test.js +0 -33
  193. package/dist/PageFooter/PageFooterSpotlight.test.d.ts +0 -5
  194. package/dist/PageFooter/PageFooterSpotlight.test.js +0 -33
  195. package/dist/PageHeader/PageHeader.test.d.ts +0 -6
  196. package/dist/PageHeader/PageHeader.test.js +0 -131
  197. package/dist/PageHeader/PageHeaderGridCellNarrowWindowOnly.test.d.ts +0 -5
  198. package/dist/PageHeader/PageHeaderGridCellNarrowWindowOnly.test.js +0 -38
  199. package/dist/PageHeader/PageHeaderMenuLink.test.d.ts +0 -5
  200. package/dist/PageHeader/PageHeaderMenuLink.test.js +0 -45
  201. package/dist/PageHeading/PageHeading.test.d.ts +0 -5
  202. package/dist/PageHeading/PageHeading.test.js +0 -40
  203. package/dist/Pagination/Pagination.test.d.ts +0 -5
  204. package/dist/Pagination/Pagination.test.js +0 -137
  205. package/dist/Paragraph/Paragraph.test.d.ts +0 -5
  206. package/dist/Paragraph/Paragraph.test.js +0 -62
  207. package/dist/PasswordInput/PasswordInput.test.d.ts +0 -5
  208. package/dist/PasswordInput/PasswordInput.test.js +0 -89
  209. package/dist/Radio/Radio.test.d.ts +0 -5
  210. package/dist/Radio/Radio.test.js +0 -134
  211. package/dist/Row/Row.test.d.ts +0 -5
  212. package/dist/Row/Row.test.js +0 -64
  213. package/dist/SearchField/SearchField.test.d.ts +0 -5
  214. package/dist/SearchField/SearchField.test.js +0 -33
  215. package/dist/SearchField/SearchFieldButton.test.d.ts +0 -5
  216. package/dist/SearchField/SearchFieldButton.test.js +0 -47
  217. package/dist/SearchField/SearchFieldInput.test.d.ts +0 -5
  218. package/dist/SearchField/SearchFieldInput.test.js +0 -65
  219. package/dist/Select/Select.test.d.ts +0 -5
  220. package/dist/Select/Select.test.js +0 -74
  221. package/dist/Select/SelectOption.test.d.ts +0 -5
  222. package/dist/Select/SelectOption.test.js +0 -45
  223. package/dist/Select/SelectOptionGroup.test.d.ts +0 -5
  224. package/dist/Select/SelectOptionGroup.test.js +0 -45
  225. package/dist/SkipLink/SkipLink.test.d.ts +0 -5
  226. package/dist/SkipLink/SkipLink.test.js +0 -33
  227. package/dist/Spotlight/Spotlight.test.d.ts +0 -5
  228. package/dist/Spotlight/Spotlight.test.js +0 -46
  229. package/dist/StandaloneLink/StandaloneLink.test.d.ts +0 -5
  230. package/dist/StandaloneLink/StandaloneLink.test.js +0 -46
  231. package/dist/Switch/Switch.test.d.ts +0 -5
  232. package/dist/Switch/Switch.test.js +0 -69
  233. package/dist/Table/Table.test.d.ts +0 -5
  234. package/dist/Table/Table.test.js +0 -33
  235. package/dist/Table/TableBody.test.d.ts +0 -5
  236. package/dist/Table/TableBody.test.js +0 -34
  237. package/dist/Table/TableCaption.test.d.ts +0 -5
  238. package/dist/Table/TableCaption.test.js +0 -45
  239. package/dist/Table/TableCell.test.d.ts +0 -5
  240. package/dist/Table/TableCell.test.js +0 -36
  241. package/dist/Table/TableFooter.test.d.ts +0 -5
  242. package/dist/Table/TableFooter.test.js +0 -34
  243. package/dist/Table/TableHeader.test.d.ts +0 -5
  244. package/dist/Table/TableHeader.test.js +0 -34
  245. package/dist/Table/TableHeaderCell.test.d.ts +0 -5
  246. package/dist/Table/TableHeaderCell.test.js +0 -42
  247. package/dist/Table/TableRow.test.d.ts +0 -5
  248. package/dist/Table/TableRow.test.js +0 -35
  249. package/dist/TableOfContents/TableOfContents.test.d.ts +0 -5
  250. package/dist/TableOfContents/TableOfContents.test.js +0 -44
  251. package/dist/TableOfContents/TableOfContentsLink.test.d.ts +0 -5
  252. package/dist/TableOfContents/TableOfContentsLink.test.js +0 -34
  253. package/dist/TableOfContents/TableOfContentsList.test.d.ts +0 -5
  254. package/dist/TableOfContents/TableOfContentsList.test.js +0 -40
  255. package/dist/Tabs/Tabs.test.d.ts +0 -5
  256. package/dist/Tabs/Tabs.test.js +0 -104
  257. package/dist/Tabs/TabsButton.test.d.ts +0 -5
  258. package/dist/Tabs/TabsButton.test.js +0 -57
  259. package/dist/Tabs/TabsList.test.d.ts +0 -5
  260. package/dist/Tabs/TabsList.test.js +0 -32
  261. package/dist/Tabs/TabsPanel.test.d.ts +0 -5
  262. package/dist/Tabs/TabsPanel.test.js +0 -42
  263. package/dist/TextArea/TextArea.test.d.ts +0 -5
  264. package/dist/TextArea/TextArea.test.js +0 -105
  265. package/dist/TextInput/TextInput.test.d.ts +0 -5
  266. package/dist/TextInput/TextInput.test.js +0 -92
  267. package/dist/TimeInput/TimeInput.test.d.ts +0 -5
  268. package/dist/TimeInput/TimeInput.test.js +0 -51
  269. package/dist/UnorderedList/UnorderedList.test.d.ts +0 -5
  270. package/dist/UnorderedList/UnorderedList.test.js +0 -55
  271. package/dist/UnorderedList/UnorderedListItem.test.d.ts +0 -5
  272. package/dist/UnorderedList/UnorderedListItem.test.js +0 -32
  273. package/dist/common/formatFileSize.test.d.ts +0 -5
  274. package/dist/common/formatFileSize.test.js +0 -22
  275. package/dist/common/formatFileType.test.d.ts +0 -5
  276. package/dist/common/formatFileType.test.js +0 -27
  277. package/dist/common/useKeyboardFocus.test.d.ts +0 -5
  278. package/dist/common/useKeyboardFocus.test.js +0 -79
  279. package/dist/tsconfig.tsbuildinfo +0 -1
package/dist/SearchField/SearchField.d.ts CHANGED
@@ -14,7 +14,6 @@ export declare const SearchField: import("react").ForwardRefExoticComponent<HTML
14
14
  children?: import("react").ReactNode;
15
15
  className?: string | undefined | undefined;
16
16
  color?: string | undefined | undefined;
17
- type?: "submit" | "reset" | "button" | undefined | undefined;
18
17
  defaultChecked?: boolean | undefined | undefined;
19
18
  defaultValue?: string | number | readonly string[] | undefined;
20
19
  suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -280,6 +279,7 @@ export declare const SearchField: import("react").ForwardRefExoticComponent<HTML
280
279
  onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
281
280
  form?: string | undefined | undefined;
282
281
  value?: string | number | readonly string[] | undefined;
282
+ type?: "submit" | "reset" | "button" | undefined | undefined;
283
283
  disabled?: boolean | undefined | undefined;
284
284
  formAction?: string | undefined;
285
285
  formEncType?: string | undefined | undefined;
package/dist/Spotlight/Spotlight.d.ts CHANGED
@@ -23,5 +23,5 @@ export declare const Spotlight: import("react").ForwardRefExoticComponent<{
23
23
  color?: SpotlightColor;
24
24
  } & HTMLAttributes<HTMLElement> & {
25
25
  children?: import("react").ReactNode | undefined;
26
- } & import("react").RefAttributes<unknown>>;
26
+ } & import("react").RefAttributes<any>>;
27
27
  export {};
package/dist/TimeInput/TimeInput.d.ts CHANGED
@@ -13,4 +13,4 @@ export type TimeInputProps = {
13
13
  export declare const TimeInput: import("react").ForwardRefExoticComponent<{
14
14
  /** Whether the value fails a validation rule. */
15
15
  invalid?: boolean;
16
- } & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "aria-invalid"> & import("react").RefAttributes<HTMLInputElement>>;
16
+ } & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & import("react").RefAttributes<HTMLInputElement>>;
package/dist/common/useIsAfterBreakpoint.d.ts CHANGED
@@ -3,9 +3,9 @@
3
3
  * Copyright Gemeente Amsterdam
4
4
  */
5
5
  export declare const BREAKPOINTS: {
6
- medium: string;
7
- wide: string;
6
+ readonly medium: "37.5rem";
7
+ readonly wide: "72.5rem";
8
8
  };
9
- type useIsAfterBreakpointProps = 'medium' | 'wide';
10
- declare const useIsAfterBreakpoint: (breakpoint: useIsAfterBreakpointProps) => boolean;
9
+ type Breakpoint = keyof typeof BREAKPOINTS;
10
+ declare const useIsAfterBreakpoint: (breakpoint: Breakpoint) => boolean;
11
11
  export default useIsAfterBreakpoint;
package/dist/common/useIsAfterBreakpoint.js CHANGED
@@ -2,7 +2,7 @@
2
2
  * @license EUPL-1.2+
3
3
  * Copyright Gemeente Amsterdam
4
4
  */
5
- import { useLayoutEffect, useState } from 'react';
5
+ import { useEffect, useState } from 'react';
6
6
  // TODO: we should set the breakpoint in JS somewhere and render this and the sass variables from that
7
7
  export const BREAKPOINTS = {
8
8
  medium: '37.5rem',
@@ -10,19 +10,18 @@ export const BREAKPOINTS = {
10
10
  };
11
11
  const useIsAfterBreakpoint = (breakpoint) => {
12
12
  const [matches, setMatches] = useState(false);
13
- useLayoutEffect(() => {
13
+ useEffect(() => {
14
14
  // Check for window object to avoid SSR issues
15
- if (breakpoint && typeof window !== 'undefined') {
16
- const media = window.matchMedia(`(min-width: ${BREAKPOINTS[breakpoint]})`);
17
- if (media.matches !== matches) {
18
- setMatches(media.matches);
19
- }
20
- const listener = () => setMatches(media.matches);
21
- window.addEventListener('resize', listener);
22
- return () => window.removeEventListener('resize', listener);
23
- }
24
- return undefined;
25
- }, [matches, breakpoint]);
15
+ if (typeof window === 'undefined')
16
+ return undefined;
17
+ const query = `(min-width: ${BREAKPOINTS[breakpoint]})`;
18
+ const media = window.matchMedia(query);
19
+ const listener = () => setMatches(media.matches);
20
+ // Set initial state
21
+ setMatches(media.matches);
22
+ media.addEventListener('change', listener);
23
+ return () => media.removeEventListener('change', listener);
24
+ }, [breakpoint]);
26
25
  return matches;
27
26
  };
28
27
  export default useIsAfterBreakpoint;
package/dist/index.cjs.js CHANGED
@@ -661,6 +661,17 @@ CardHeading.displayName = 'Card.Heading';
661
661
  var _excluded$1l = ["children", "className", "color", "size"];
662
662
  function ownKeys$1u(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
663
663
  function _objectSpread$1u(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1u(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1u(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
664
+ var wrapChildren = function wrapChildren(size, children) {
665
+ if (size === 'large') return jsxRuntime.jsx("b", {
666
+ className: "ams-paragraph__b",
667
+ children: children
668
+ });
669
+ if (size === 'small') return jsxRuntime.jsx("small", {
670
+ className: "ams-paragraph__small",
671
+ children: children
672
+ });
673
+ return children;
674
+ };
664
675
  /**
665
676
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-paragraph--docs Paragraph docs at Amsterdam Design System}
666
677
  */
@@ -674,7 +685,7 @@ var Paragraph = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
674
685
  className: clsx.clsx('ams-paragraph', color && "ams-paragraph--".concat(color), size && "ams-paragraph--".concat(size), className),
675
686
  ref: ref
676
687
  }, restProps), {}, {
677
- children: children
688
+ children: wrapChildren(size, children)
678
689
  }));
679
690
  });
680
691
  Paragraph.displayName = 'Paragraph';
@@ -706,7 +717,7 @@ var generateAspectRatioClass = function generateAspectRatioClass(aspectRatio) {
706
717
  return aspectRatio && "ams-aspect-ratio-".concat(aspectRatio.replace(':', '-'));
707
718
  };
708
719
 
709
- var _excluded$1j = ["aspectRatio", "className"];
720
+ var _excluded$1j = ["aspectRatio", "className", "width"];
710
721
  function ownKeys$1s(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
711
722
  function _objectSpread$1s(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1s(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1s(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
712
723
  /**
@@ -715,11 +726,12 @@ function _objectSpread$1s(e) { for (var r = 1; r < arguments.length; r++) { var
715
726
  var Image = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
716
727
  var aspectRatio = _ref.aspectRatio,
717
728
  className = _ref.className,
729
+ width = _ref.width,
718
730
  restProps = _objectWithoutProperties(_ref, _excluded$1j);
719
731
  return jsxRuntime.jsx("img", _objectSpread$1s(_objectSpread$1s({}, restProps), {}, {
720
732
  className: clsx.clsx('ams-image', generateAspectRatioClass(aspectRatio), className),
721
733
  ref: ref,
722
- width: 600
734
+ width: width !== null && width !== void 0 ? width : 600
723
735
  }));
724
736
  });
725
737
  Image.displayName = 'Image';
@@ -1106,7 +1118,7 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
1106
1118
  });
1107
1119
  Field.displayName = 'Field';
1108
1120
 
1109
- var _excluded$14 = ["className", "hint", "optional"];
1121
+ var _excluded$14 = ["className", "hint", "inFieldSet", "optional"];
1110
1122
  function ownKeys$1c(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
1111
1123
  function _objectSpread$1c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1c(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
1112
1124
  var getHintText = function getHintText(_ref) {
@@ -1122,6 +1134,7 @@ var getHintText = function getHintText(_ref) {
1122
1134
  var Hint = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
1123
1135
  var className = _ref2.className,
1124
1136
  hint = _ref2.hint,
1137
+ inFieldSet = _ref2.inFieldSet,
1125
1138
  optional = _ref2.optional,
1126
1139
  restProps = _objectWithoutProperties(_ref2, _excluded$14);
1127
1140
  var hintText = getHintText({
@@ -1129,14 +1142,14 @@ var Hint = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
1129
1142
  optional: optional
1130
1143
  });
1131
1144
  return hintText && jsxRuntime.jsxs("span", _objectSpread$1c(_objectSpread$1c({}, restProps), {}, {
1132
- className: clsx.clsx('ams-hint', className),
1145
+ className: clsx.clsx('ams-hint', inFieldSet && 'ams-hint--in-fieldset', className),
1133
1146
  ref: ref,
1134
1147
  children: ["(", hintText, ")"]
1135
1148
  }));
1136
1149
  });
1137
1150
  Hint.displayName = 'Hint';
1138
1151
 
1139
- var _excluded$13 = ["children", "className", "hint", "invalid", "legend", "legendIsPageHeading", "optional"];
1152
+ var _excluded$13 = ["children", "className", "hint", "inFieldSet", "invalid", "legend", "legendIsPageHeading", "optional"];
1140
1153
  function ownKeys$1b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
1141
1154
  function _objectSpread$1b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1b(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
1142
1155
  /**
@@ -1146,6 +1159,7 @@ var FieldSet = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
1146
1159
  var children = _ref.children,
1147
1160
  className = _ref.className,
1148
1161
  hint = _ref.hint,
1162
+ inFieldSet = _ref.inFieldSet,
1149
1163
  invalid = _ref.invalid,
1150
1164
  legend = _ref.legend,
1151
1165
  legendIsPageHeading = _ref.legendIsPageHeading,
@@ -1154,6 +1168,7 @@ var FieldSet = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
1154
1168
  var legendContent = jsxRuntime.jsxs(jsxRuntime.Fragment, {
1155
1169
  children: [legend, " ", jsxRuntime.jsx(Hint, {
1156
1170
  hint: hint,
1171
+ inFieldSet: inFieldSet,
1157
1172
  optional: optional
1158
1173
  })]
1159
1174
  });
@@ -1161,7 +1176,7 @@ var FieldSet = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
1161
1176
  className: clsx.clsx('ams-field-set', invalid && 'ams-field-set--invalid', className),
1162
1177
  ref: ref,
1163
1178
  children: [jsxRuntime.jsx("legend", {
1164
- className: "ams-field-set__legend",
1179
+ className: clsx.clsx('ams-field-set__legend', inFieldSet && 'ams-field-set__legend--in-fieldset'),
1165
1180
  children: legendIsPageHeading ? jsxRuntime.jsx("h1", {
1166
1181
  className: "ams-field-set__heading",
1167
1182
  children: legendContent
@@ -1863,7 +1878,7 @@ var InvalidFormAlert = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
1863
1878
  });
1864
1879
  InvalidFormAlert.displayName = 'InvalidFormAlert';
1865
1880
 
1866
- var _excluded$O = ["children", "className", "hint", "isPageHeading", "optional"];
1881
+ var _excluded$O = ["children", "className", "hint", "inFieldSet", "isPageHeading", "optional"];
1867
1882
  function ownKeys$W(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
1868
1883
  function _objectSpread$W(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$W(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$W(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
1869
1884
  /**
@@ -1873,14 +1888,16 @@ var Label = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
1873
1888
  var children = _ref.children,
1874
1889
  className = _ref.className,
1875
1890
  hint = _ref.hint,
1891
+ inFieldSet = _ref.inFieldSet,
1876
1892
  isPageHeading = _ref.isPageHeading,
1877
1893
  optional = _ref.optional,
1878
1894
  restProps = _objectWithoutProperties(_ref, _excluded$O);
1879
1895
  var labelElement = jsxRuntime.jsxs("label", _objectSpread$W(_objectSpread$W({}, restProps), {}, {
1880
- className: clsx.clsx('ams-label', className),
1896
+ className: clsx.clsx('ams-label', inFieldSet && 'ams-label--in-fieldset', className),
1881
1897
  ref: ref,
1882
1898
  children: [children, " ", jsxRuntime.jsx(Hint, {
1883
1899
  hint: hint,
1900
+ inFieldSet: inFieldSet,
1884
1901
  optional: optional
1885
1902
  })]
1886
1903
  }));
@@ -2101,27 +2118,27 @@ function _objectSpread$O(e) { for (var r = 1; r < arguments.length; r++) { var t
2101
2118
  var logoConfig = {
2102
2119
  amsterdam: {
2103
2120
  label: 'Gemeente Amsterdam logo',
2104
- logo: LogoAmsterdam
2121
+ svg: LogoAmsterdam
2105
2122
  },
2106
2123
  'ggd-amsterdam': {
2107
2124
  label: 'GGD Amsterdam logo',
2108
- logo: LogoGgdAmsterdam
2125
+ svg: LogoGgdAmsterdam
2109
2126
  },
2110
2127
  'museum-weesp': {
2111
2128
  label: 'Gemeente Amsterdam Museum Weesp logo',
2112
- logo: LogoMuseumWeesp
2129
+ svg: LogoMuseumWeesp
2113
2130
  },
2114
2131
  stadsarchief: {
2115
2132
  label: 'Gemeente Amsterdam Stadsarchief logo',
2116
- logo: LogoStadsarchief
2133
+ svg: LogoStadsarchief
2117
2134
  },
2118
2135
  'stadsbank-van-lening': {
2119
2136
  label: 'Gemeente Amsterdam Stadsbank van Lening logo',
2120
- logo: LogoStadsbankVanLening
2137
+ svg: LogoStadsbankVanLening
2121
2138
  },
2122
2139
  'vga-verzekeringen': {
2123
2140
  label: 'Gemeente Amsterdam VGA Verzekeringen logo',
2124
- logo: LogoVgaVerzekeringen
2141
+ svg: LogoVgaVerzekeringen
2125
2142
  }
2126
2143
  };
2127
2144
  /**
@@ -2133,10 +2150,11 @@ var Logo = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
2133
2150
  brand = _ref$brand === void 0 ? 'amsterdam' : _ref$brand,
2134
2151
  className = _ref.className,
2135
2152
  restProps = _objectWithoutProperties(_ref, _excluded$M);
2136
- var LogoComponent = logoConfig[brand].logo;
2137
- var logoLabel = logoConfig[brand].label;
2153
+ var config = typeof brand === 'string' ? logoConfig[brand] : brand;
2154
+ var label = config.label,
2155
+ LogoComponent = config.svg;
2138
2156
  return jsxRuntime.jsx(LogoComponent, _objectSpread$O(_objectSpread$O({}, restProps), {}, {
2139
- "aria-label": ariaLabel || logoLabel,
2157
+ "aria-label": ariaLabel || label,
2140
2158
  className: clsx.clsx('ams-logo', className),
2141
2159
  ref: ref
2142
2160
  }));
@@ -2278,7 +2296,7 @@ var Overlap = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
2278
2296
  });
2279
2297
  Overlap.displayName = 'Overlap';
2280
2298
 
2281
- var _excluded$F = ["children", "className"];
2299
+ var _excluded$F = ["children", "className", "withMenu"];
2282
2300
  function ownKeys$H(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
2283
2301
  function _objectSpread$H(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$H(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$H(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
2284
2302
  /**
@@ -2287,27 +2305,38 @@ function _objectSpread$H(e) { for (var r = 1; r < arguments.length; r++) { var t
2287
2305
  var Page = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
2288
2306
  var children = _ref.children,
2289
2307
  className = _ref.className,
2308
+ withMenu = _ref.withMenu,
2290
2309
  restProps = _objectWithoutProperties(_ref, _excluded$F);
2291
2310
  return jsxRuntime.jsx("div", _objectSpread$H(_objectSpread$H({}, restProps), {}, {
2292
- className: clsx.clsx('ams-page', className),
2311
+ className: clsx.clsx('ams-page', withMenu && 'ams-page--with-menu', className),
2293
2312
  ref: ref,
2294
2313
  children: children
2295
2314
  }));
2296
2315
  });
2297
2316
  Page.displayName = 'Page';
2298
2317
 
2299
- var _excluded$E = ["children", "className"];
2318
+ var _excluded$E = ["children", "className", "heading", "headingLevel"];
2300
2319
  function ownKeys$G(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
2301
2320
  function _objectSpread$G(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$G(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$G(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
2302
2321
  var PageFooterMenu = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
2303
2322
  var children = _ref.children,
2304
2323
  className = _ref.className,
2324
+ _ref$heading = _ref.heading,
2325
+ heading = _ref$heading === void 0 ? 'Over deze website' : _ref$heading,
2326
+ _ref$headingLevel = _ref.headingLevel,
2327
+ headingLevel = _ref$headingLevel === void 0 ? 2 : _ref$headingLevel,
2305
2328
  restProps = _objectWithoutProperties(_ref, _excluded$E);
2306
- return jsxRuntime.jsx("ul", _objectSpread$G(_objectSpread$G({}, restProps), {}, {
2307
- className: clsx.clsx('ams-page-footer__menu', className),
2308
- ref: ref,
2309
- children: children
2310
- }));
2329
+ var HeadingTag = getHeadingTag(headingLevel);
2330
+ return jsxRuntime.jsxs(jsxRuntime.Fragment, {
2331
+ children: [jsxRuntime.jsx(HeadingTag, {
2332
+ className: "ams-visually-hidden",
2333
+ children: heading
2334
+ }), jsxRuntime.jsx("ul", _objectSpread$G(_objectSpread$G({}, restProps), {}, {
2335
+ className: clsx.clsx('ams-page-footer__menu', className),
2336
+ ref: ref,
2337
+ children: children
2338
+ }))]
2339
+ });
2311
2340
  });
2312
2341
  PageFooterMenu.displayName = 'PageFooter.Menu';
2313
2342
 
@@ -2377,23 +2406,21 @@ var useIsAfterBreakpoint = function useIsAfterBreakpoint(breakpoint) {
2377
2406
  _useState2 = _slicedToArray(_useState, 2),
2378
2407
  matches = _useState2[0],
2379
2408
  setMatches = _useState2[1];
2380
- react.useLayoutEffect(function () {
2409
+ react.useEffect(function () {
2381
2410
  // Check for window object to avoid SSR issues
2382
- if (typeof window !== 'undefined') {
2383
- var media = window.matchMedia("(min-width: ".concat(BREAKPOINTS[breakpoint], ")"));
2384
- if (media.matches !== matches) {
2385
- setMatches(media.matches);
2386
- }
2387
- var listener = function listener() {
2388
- return setMatches(media.matches);
2389
- };
2390
- window.addEventListener('resize', listener);
2391
- return function () {
2392
- return window.removeEventListener('resize', listener);
2393
- };
2394
- }
2395
- return undefined;
2396
- }, [matches, breakpoint]);
2411
+ if (typeof window === 'undefined') return undefined;
2412
+ var query = "(min-width: ".concat(BREAKPOINTS[breakpoint], ")");
2413
+ var media = window.matchMedia(query);
2414
+ var listener = function listener() {
2415
+ return setMatches(media.matches);
2416
+ };
2417
+ // Set initial state
2418
+ setMatches(media.matches);
2419
+ media.addEventListener('change', listener);
2420
+ return function () {
2421
+ return media.removeEventListener('change', listener);
2422
+ };
2423
+ }, [breakpoint]);
2397
2424
  return matches;
2398
2425
  };
2399
2426
 
@@ -2406,6 +2433,8 @@ var PageHeaderGridCellNarrowWindowOnly = /*#__PURE__*/react.forwardRef(function
2406
2433
  restProps = _objectWithoutProperties(_ref, _excluded$A);
2407
2434
  return jsxRuntime.jsx(Grid.Cell, _objectSpread$C(_objectSpread$C({}, restProps), {}, {
2408
2435
  className: clsx.clsx('ams-page-header__grid-cell-narrow-window-only', className),
2436
+ hidden // Hide until its CSS loads; this cell duplicates the non-fixed links in the Page Header Menu.
2437
+ : true,
2409
2438
  ref: ref,
2410
2439
  children: children
2411
2440
  }));
@@ -2421,48 +2450,42 @@ var PageHeaderMenuIcon = function PageHeaderMenuIcon(props) {
2421
2450
  viewBox: "0 0 24 24",
2422
2451
  xmlns: "http://www.w3.org/2000/svg"
2423
2452
  }, props), {}, {
2424
- children: [jsxRuntime.jsx("line", {
2453
+ children: [jsxRuntime.jsx("path", {
2425
2454
  className: "ams-page-header__menu-icon-top",
2426
- x1: "0",
2427
- x2: "100%",
2428
- y1: "50%",
2429
- y2: "50%"
2430
- }), jsxRuntime.jsx("line", {
2455
+ d: "M1 5h22v2H1z"
2456
+ }), jsxRuntime.jsx("path", {
2431
2457
  className: "ams-page-header__menu-icon-middle",
2432
- x1: "0",
2433
- x2: "100%",
2434
- y1: "50%",
2435
- y2: "50%"
2436
- }), jsxRuntime.jsx("line", {
2458
+ d: "M1 11h22v2H1z"
2459
+ }), jsxRuntime.jsx("path", {
2437
2460
  className: "ams-page-header__menu-icon-bottom",
2438
- x1: "0",
2439
- x2: "100%",
2440
- y1: "50%",
2441
- y2: "50%"
2461
+ d: "M1 17h22v2H1z"
2442
2462
  })]
2443
2463
  }));
2444
2464
  };
2445
2465
 
2446
- var _excluded$z = ["children", "className", "fixed"];
2466
+ var _excluded$z = ["children", "className", "fixed", "icon"];
2447
2467
  function ownKeys$A(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
2448
2468
  function _objectSpread$A(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$A(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$A(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
2449
2469
  var PageHeaderMenuLink = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
2450
2470
  var children = _ref.children,
2451
2471
  className = _ref.className,
2452
2472
  fixed = _ref.fixed,
2473
+ icon = _ref.icon,
2453
2474
  restProps = _objectWithoutProperties(_ref, _excluded$z);
2454
2475
  return jsxRuntime.jsx("li", {
2455
2476
  className: clsx.clsx('ams-page-header__menu-item', fixed && 'ams-page-header__menu-item--fixed'),
2456
- children: jsxRuntime.jsx("a", _objectSpread$A(_objectSpread$A({}, restProps), {}, {
2477
+ children: jsxRuntime.jsxs("a", _objectSpread$A(_objectSpread$A({}, restProps), {}, {
2457
2478
  className: clsx.clsx('ams-page-header__menu-link', className),
2458
2479
  ref: ref,
2459
- children: children
2480
+ children: [children, icon && jsxRuntime.jsx(Icon, {
2481
+ svg: icon
2482
+ })]
2460
2483
  }))
2461
2484
  });
2462
2485
  });
2463
2486
  PageHeaderMenuLink.displayName = 'PageHeader.MenuLink';
2464
2487
 
2465
- var _excluded$y = ["brandName", "children", "className", "logoAccessibleName", "logoBrand", "logoLink", "logoLinkComponent", "logoLinkTitle", "menuButtonText", "menuItems", "navigationLabel", "noMenuButtonOnWideWindow"];
2488
+ var _excluded$y = ["brandName", "children", "className", "logoAccessibleName", "logoBrand", "logoLink", "logoLinkComponent", "logoLinkTitle", "menuButtonText", "menuButtonTextForHide", "menuButtonTextForShow", "menuItems", "navigationLabel", "noMenuButtonOnWideWindow"];
2466
2489
  function ownKeys$z(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
2467
2490
  function _objectSpread$z(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$z(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$z(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
2468
2491
  var LogoLinkContent = function LogoLinkContent(_ref) {
@@ -2500,6 +2523,10 @@ var PageHeaderRoot = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
2500
2523
  logoLinkTitle = _ref2$logoLinkTitle === void 0 ? "Ga naar de homepage".concat(brandName ? " van ".concat(brandName) : '') : _ref2$logoLinkTitle,
2501
2524
  _ref2$menuButtonText = _ref2.menuButtonText,
2502
2525
  menuButtonText = _ref2$menuButtonText === void 0 ? 'Menu' : _ref2$menuButtonText,
2526
+ _ref2$menuButtonTextF = _ref2.menuButtonTextForHide,
2527
+ menuButtonTextForHide = _ref2$menuButtonTextF === void 0 ? 'Verberg navigatiemenu' : _ref2$menuButtonTextF,
2528
+ _ref2$menuButtonTextF2 = _ref2.menuButtonTextForShow,
2529
+ menuButtonTextForShow = _ref2$menuButtonTextF2 === void 0 ? 'Laat navigatiemenu zien' : _ref2$menuButtonTextF2,
2503
2530
  menuItems = _ref2.menuItems,
2504
2531
  _ref2$navigationLabel = _ref2.navigationLabel,
2505
2532
  navigationLabel = _ref2$navigationLabel === void 0 ? 'Hoofdnavigatie' : _ref2$navigationLabel,
@@ -2551,7 +2578,9 @@ var PageHeaderRoot = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
2551
2578
  }), jsxRuntime.jsxs("ul", {
2552
2579
  className: "ams-page-header__menu",
2553
2580
  children: [menuItems, hasMegaMenu && jsxRuntime.jsx("li", {
2554
- className: clsx.clsx(noMenuButtonOnWideWindow && 'ams-page-header__mega-menu-button-item--hide-on-wide-window'),
2581
+ className: clsx.clsx('ams-page-header__mega-menu-button-item', noMenuButtonOnWideWindow && 'ams-page-header__mega-menu-button-item--hide-on-wide-window'),
2582
+ hidden // Hide the list item containing the menu button until its CSS loads. If it doesn't load, the menu will always be visible.
2583
+ : true,
2555
2584
  children: jsxRuntime.jsxs("button", {
2556
2585
  "aria-controls": "ams-page-header-mega-menu",
2557
2586
  "aria-expanded": open,
@@ -2561,8 +2590,12 @@ var PageHeaderRoot = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
2561
2590
  },
2562
2591
  type: "button",
2563
2592
  children: [jsxRuntime.jsx("span", {
2593
+ "aria-hidden": "true",
2564
2594
  className: "ams-page-header__mega-menu-button-label",
2565
2595
  children: menuButtonText
2596
+ }), jsxRuntime.jsx("span", {
2597
+ className: "ams-visually-hidden",
2598
+ children: open ? menuButtonTextForHide : menuButtonTextForShow
2566
2599
  }), jsxRuntime.jsx("span", {
2567
2600
  "aria-hidden": "true",
2568
2601
  className: "ams-page-header__mega-menu-button-hidden-label",
package/dist/index.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}