@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
@@ -1,32 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- /**
3
- * @license EUPL-1.2+
4
- * Copyright Gemeente Amsterdam
5
- */
6
- import { render, screen } from '@testing-library/react';
7
- import { createRef } from 'react';
8
- import { OrderedListItem } from './OrderedListItem';
9
- import '@testing-library/jest-dom';
10
- describe('Ordered list item', () => {
11
- it('renders', () => {
12
- render(_jsx(OrderedListItem, {}));
13
- const component = screen.getByRole('listitem');
14
- expect(component).toBeInTheDocument();
15
- });
16
- it('renders a design system BEM class name', () => {
17
- render(_jsx(OrderedListItem, {}));
18
- const component = screen.getByRole('listitem');
19
- expect(component).toHaveClass('ams-ordered-list__item');
20
- });
21
- it('renders an extra class name', () => {
22
- render(_jsx(OrderedListItem, { className: "extra" }));
23
- const component = screen.getByRole('listitem');
24
- expect(component).toHaveClass('ams-ordered-list__item extra');
25
- });
26
- it('supports ForwardRef in React', () => {
27
- const ref = createRef();
28
- render(_jsx(OrderedListItem, { ref: ref }));
29
- const component = screen.getByRole('listitem');
30
- expect(ref.current).toBe(component);
31
- });
32
- });
@@ -1,5 +0,0 @@
1
- /**
2
- * @license EUPL-1.2+
3
- * Copyright Gemeente Amsterdam
4
- */
5
- import '@testing-library/jest-dom';
@@ -1,38 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- /**
3
- * @license EUPL-1.2+
4
- * Copyright Gemeente Amsterdam
5
- */
6
- import { render, screen } from '@testing-library/react';
7
- import { createRef } from 'react';
8
- import { Overlap } from './Overlap';
9
- import '@testing-library/jest-dom';
10
- describe('Overlap', () => {
11
- it('renders', () => {
12
- const { container } = render(_jsx(Overlap, {}));
13
- const component = container.querySelector(':only-child');
14
- expect(component).toBeInTheDocument();
15
- expect(component).toBeVisible();
16
- });
17
- it('renders a design system BEM class name', () => {
18
- const { container } = render(_jsx(Overlap, {}));
19
- const component = container.querySelector(':only-child');
20
- expect(component).toHaveClass('ams-overlap');
21
- });
22
- it('renders an extra class name', () => {
23
- const { container } = render(_jsx(Overlap, { className: "extra" }));
24
- const component = container.querySelector(':only-child');
25
- expect(component).toHaveClass('ams-overlap extra');
26
- });
27
- it('supports ForwardRef in React', () => {
28
- const ref = createRef();
29
- const { container } = render(_jsx(Overlap, { ref: ref }));
30
- const component = container.querySelector(':only-child');
31
- expect(ref.current).toBe(component);
32
- });
33
- it('renders children', () => {
34
- render(_jsx(Overlap, { children: _jsx("p", { children: "Test Child" }) }));
35
- const testChild = screen.getByText('Test Child');
36
- expect(testChild).toBeTruthy();
37
- });
38
- });
@@ -1,5 +0,0 @@
1
- /**
2
- * @license EUPL-1.2+
3
- * Copyright Gemeente Amsterdam
4
- */
5
- import '@testing-library/jest-dom';
@@ -1,33 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- /**
3
- * @license EUPL-1.2+
4
- * Copyright Gemeente Amsterdam
5
- */
6
- import { render } from '@testing-library/react';
7
- import { createRef } from 'react';
8
- import { Page } from './Page';
9
- import '@testing-library/jest-dom';
10
- describe('Page', () => {
11
- it('renders', () => {
12
- const { container } = render(_jsx(Page, {}));
13
- const component = container.querySelector(':only-child');
14
- expect(component).toBeInTheDocument();
15
- expect(component).toBeVisible();
16
- });
17
- it('renders a design system BEM class name', () => {
18
- const { container } = render(_jsx(Page, {}));
19
- const component = container.querySelector(':only-child');
20
- expect(component).toHaveClass('ams-page');
21
- });
22
- it('renders an extra class name', () => {
23
- const { container } = render(_jsx(Page, { className: "extra" }));
24
- const component = container.querySelector(':only-child');
25
- expect(component).toHaveClass('ams-page extra');
26
- });
27
- it('supports ForwardRef in React', () => {
28
- const ref = createRef();
29
- const { container } = render(_jsx(Page, { ref: ref }));
30
- const component = container.querySelector(':only-child');
31
- expect(ref.current).toBe(component);
32
- });
33
- });
@@ -1,5 +0,0 @@
1
- /**
2
- * @license EUPL-1.2+
3
- * Copyright Gemeente Amsterdam
4
- */
5
- import '@testing-library/jest-dom';
@@ -1,33 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- /**
3
- * @license EUPL-1.2+
4
- * Copyright Gemeente Amsterdam
5
- */
6
- import { render, screen } from '@testing-library/react';
7
- import { createRef } from 'react';
8
- import { PageFooter } from './PageFooter';
9
- import '@testing-library/jest-dom';
10
- describe('Page Footer', () => {
11
- it('renders an HTML footer element', () => {
12
- render(_jsx(PageFooter, {}));
13
- const component = screen.getByRole('contentinfo');
14
- expect(component).toBeInTheDocument();
15
- expect(component).toBeVisible();
16
- });
17
- it('renders a design system BEM class name', () => {
18
- render(_jsx(PageFooter, {}));
19
- const component = screen.getByRole('contentinfo');
20
- expect(component).toHaveClass('ams-page-footer');
21
- });
22
- it('renders an extra class name', () => {
23
- render(_jsx(PageFooter, { className: "extra" }));
24
- const component = screen.getByRole('contentinfo');
25
- expect(component).toHaveClass('ams-page-footer extra');
26
- });
27
- it('supports ForwardRef in React', () => {
28
- const ref = createRef();
29
- render(_jsx(PageFooter, { ref: ref }));
30
- const component = screen.getByRole('contentinfo');
31
- expect(ref.current).toBe(component);
32
- });
33
- });
@@ -1,5 +0,0 @@
1
- /**
2
- * @license EUPL-1.2+
3
- * Copyright Gemeente Amsterdam
4
- */
5
- import '@testing-library/jest-dom';
@@ -1,35 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- /**
3
- * @license EUPL-1.2+
4
- * Copyright Gemeente Amsterdam
5
- */
6
- import { render, screen } from '@testing-library/react';
7
- import { createRef } from 'react';
8
- import { PageFooter } from './PageFooter';
9
- import '@testing-library/jest-dom';
10
- describe('Page Footer Menu', () => {
11
- it('renders a footer menu with children', () => {
12
- render(_jsxs(PageFooter.Menu, { children: [_jsx(PageFooter.MenuLink, { href: "#", lang: "en", children: "English" }), _jsx(PageFooter.MenuLink, { href: "#", children: "Mijn Amsterdam" })] }));
13
- const component = screen.getByRole('list');
14
- const children = screen.getAllByRole('listitem');
15
- expect(component).toBeInTheDocument();
16
- expect(component).toBeVisible();
17
- expect(children).toHaveLength(2);
18
- });
19
- it('renders a design system BEM class name', () => {
20
- render(_jsx(PageFooter.Menu, {}));
21
- const component = screen.getByRole('list');
22
- expect(component).toHaveClass('ams-page-footer__menu');
23
- });
24
- it('is able to pass a React ref', () => {
25
- const ref = createRef();
26
- render(_jsx(PageFooter.Menu, { ref: ref, children: _jsx(PageFooter.MenuLink, { href: "#", lang: "en", children: "English" }) }));
27
- const component = screen.getByRole('list');
28
- expect(ref.current).toBe(component);
29
- });
30
- it('renders an extra class name', () => {
31
- render(_jsx(PageFooter.Menu, { className: "intro" }));
32
- const component = screen.getByRole('list');
33
- expect(component).toHaveClass('ams-page-footer__menu intro');
34
- });
35
- });
@@ -1,5 +0,0 @@
1
- /**
2
- * @license EUPL-1.2+
3
- * Copyright Gemeente Amsterdam
4
- */
5
- import '@testing-library/jest-dom';
@@ -1,33 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- /**
3
- * @license EUPL-1.2+
4
- * Copyright Gemeente Amsterdam
5
- */
6
- import { render, screen } from '@testing-library/react';
7
- import { createRef } from 'react';
8
- import { PageFooter } from './PageFooter';
9
- import '@testing-library/jest-dom';
10
- describe('Page Footer Menu Link', () => {
11
- it('renders with href attribute', () => {
12
- render(_jsx(PageFooter.MenuLink, { href: "#", children: "Link" }));
13
- const component = screen.getByRole('link');
14
- expect(component).toBeInTheDocument();
15
- expect(component).toHaveAttribute('href', '#');
16
- });
17
- it('renders a design system BEM class name', () => {
18
- render(_jsx(PageFooter.MenuLink, { href: "#", children: "Link" }));
19
- const component = screen.getByRole('link');
20
- expect(component).toHaveClass('ams-page-footer__menu-link');
21
- });
22
- it('renders an extra class name', () => {
23
- render(_jsx(PageFooter.MenuLink, { className: "extra", href: "#", children: "Link" }));
24
- const component = screen.getByRole('link');
25
- expect(component).toHaveClass('ams-page-footer__menu-link extra');
26
- });
27
- it('supports ForwardRef in React', () => {
28
- const ref = createRef();
29
- render(_jsx(PageFooter.MenuLink, { className: "extra", href: "#", ref: ref, children: "Link" }));
30
- const component = screen.getByRole('link');
31
- expect(ref.current).toBe(component);
32
- });
33
- });
@@ -1,5 +0,0 @@
1
- /**
2
- * @license EUPL-1.2+
3
- * Copyright Gemeente Amsterdam
4
- */
5
- import '@testing-library/jest-dom';
@@ -1,33 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- /**
3
- * @license EUPL-1.2+
4
- * Copyright Gemeente Amsterdam
5
- */
6
- import { render } from '@testing-library/react';
7
- import { createRef } from 'react';
8
- import { PageFooter } from './PageFooter';
9
- import '@testing-library/jest-dom';
10
- describe('Page Footer Spotlight', () => {
11
- it('renders', () => {
12
- const { container } = render(_jsx(PageFooter.Spotlight, {}));
13
- const component = container.querySelector(':only-child');
14
- expect(component).toBeInTheDocument();
15
- expect(component).toBeVisible();
16
- });
17
- it('renders a design system BEM class name', () => {
18
- const { container } = render(_jsx(PageFooter.Spotlight, {}));
19
- const component = container.querySelector(':only-child');
20
- expect(component).toHaveClass('ams-page-footer__spotlight');
21
- });
22
- it('renders an extra class name', () => {
23
- const { container } = render(_jsx(PageFooter.Spotlight, { className: "extra" }));
24
- const component = container.querySelector(':only-child');
25
- expect(component).toHaveClass('ams-page-footer__spotlight extra');
26
- });
27
- it('supports ForwardRef in React', () => {
28
- const ref = createRef();
29
- const { container } = render(_jsx(PageFooter.Spotlight, { ref: ref }));
30
- const component = container.querySelector(':only-child');
31
- expect(ref.current).toBe(component);
32
- });
33
- });
@@ -1,6 +0,0 @@
1
- /**
2
- * @license EUPL-1.2+
3
- * Copyright Gemeente Amsterdam
4
- */
5
- import './matchMedia.mock';
6
- import '@testing-library/jest-dom';
@@ -1,131 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { render, screen } from '@testing-library/react';
3
- import userEvent from '@testing-library/user-event';
4
- import { createRef } from 'react';
5
- import './matchMedia.mock'; // Must be imported before PageHeader
6
- import { PageHeader } from './PageHeader';
7
- import '@testing-library/jest-dom';
8
- describe('Page Header', () => {
9
- it('renders', () => {
10
- render(_jsx(PageHeader, {}));
11
- const component = screen.getByRole('banner');
12
- expect(component).toBeInTheDocument();
13
- expect(component).toBeVisible();
14
- });
15
- it('renders a design system BEM class name', () => {
16
- render(_jsx(PageHeader, {}));
17
- const component = screen.getByRole('banner');
18
- expect(component).toHaveClass('ams-page-header');
19
- });
20
- it('renders an extra class name', () => {
21
- render(_jsx(PageHeader, { className: "extra" }));
22
- const component = screen.getByRole('banner');
23
- expect(component).toHaveClass('ams-page-header extra');
24
- });
25
- it('supports ForwardRef in React', () => {
26
- const ref = createRef();
27
- render(_jsx(PageHeader, { ref: ref }));
28
- const component = screen.getByRole('banner');
29
- expect(ref.current).toBe(component);
30
- });
31
- it('renders a logo link', () => {
32
- render(_jsx(PageHeader, {}));
33
- const component = screen.getByRole('link');
34
- expect(component).toHaveClass('ams-page-header__logo-link');
35
- });
36
- it('renders a different brand logo', () => {
37
- const { container } = render(_jsx(PageHeader, { logoBrand: "ggd-amsterdam" }));
38
- const component = container.querySelector('.ams-logo__text-secondary');
39
- expect(component).toBeInTheDocument();
40
- });
41
- it('renders a custom logo link', () => {
42
- render(_jsx(PageHeader, { logoLink: "/home" }));
43
- const logoLink = screen.getByRole('link');
44
- expect(logoLink).toHaveAttribute('href', '/home');
45
- });
46
- it('renders a custom logo link title', () => {
47
- render(_jsx(PageHeader, { logoLinkTitle: "Go to homepage" }));
48
- const logoLinkTitle = screen.getByRole('link', { name: 'Gemeente Amsterdam logo Go to homepage' });
49
- expect(logoLinkTitle).toBeInTheDocument();
50
- });
51
- it('renders a custom accessible name for the logo', () => {
52
- render(_jsx(PageHeader, { logoAccessibleName: "Custom accessible name" }));
53
- const logoLinkTitle = screen.getByRole('link', { name: 'Custom accessible name Ga naar de homepage' });
54
- expect(logoLinkTitle).toBeInTheDocument();
55
- });
56
- it('renders an application name', () => {
57
- render(_jsx(PageHeader, { brandName: "Application name" }));
58
- const brandName = screen.getByText('Application name');
59
- expect(brandName).toBeInTheDocument();
60
- });
61
- it('renders the correct class for the responsive logo', () => {
62
- const { container } = render(_jsx(PageHeader, { brandName: "Application name" }));
63
- const logoContainer = container.querySelector('.ams-page-header__logo-container');
64
- expect(logoContainer).toBeInTheDocument();
65
- });
66
- it('renders a nav section', () => {
67
- render(_jsx(PageHeader, { children: "Test" }));
68
- const component = screen.getByRole('navigation');
69
- expect(component).toHaveClass('ams-page-header__navigation');
70
- });
71
- it('renders a nav section with a custom label', () => {
72
- render(_jsx(PageHeader, { navigationLabel: "Custom Navigation", children: "Test" }));
73
- const component = screen.getByRole('navigation', { name: 'Custom Navigation' });
74
- expect(component).toBeInTheDocument();
75
- });
76
- it('renders a menu', () => {
77
- render(_jsx(PageHeader, { menuItems: _jsx(PageHeader.MenuLink, { children: "Menu Item" }) }));
78
- const component = screen.getByRole('list');
79
- expect(component).toHaveClass('ams-page-header__menu');
80
- });
81
- it('renders menu items', () => {
82
- render(_jsx(PageHeader, { menuItems: [
83
- _jsx(PageHeader.MenuLink, { href: "/", children: "Menu Item 1" }, 1),
84
- _jsx(PageHeader.MenuLink, { href: "/", children: "Menu Item 2" }, 2),
85
- ] }));
86
- const item1 = screen.getByRole('link', { name: 'Menu Item 1' });
87
- const item2 = screen.getByRole('link', { name: 'Menu Item 2' });
88
- expect(item1).toBeInTheDocument();
89
- expect(item2).toBeInTheDocument();
90
- });
91
- it('renders a menu button', () => {
92
- render(_jsx(PageHeader, { children: "Test" }));
93
- const component = screen.getByRole('button', { name: 'Menu' });
94
- expect(component).toHaveClass('ams-page-header__mega-menu-button');
95
- });
96
- it('renders a menu button icon', () => {
97
- const { container } = render(_jsx(PageHeader, { children: "Test" }));
98
- const component = container.querySelector('.ams-page-header__menu-icon');
99
- expect(component).toBeInTheDocument();
100
- });
101
- it('renders a custom menu button text', () => {
102
- render(_jsx(PageHeader, { menuButtonText: "Custom button text", children: "Test" }));
103
- const component = screen.getByRole('button', { name: 'Custom button text' });
104
- expect(component).toBeInTheDocument();
105
- });
106
- it('renders the correct class when noMenuButtonOnWideWindow is true', () => {
107
- render(_jsx(PageHeader, { noMenuButtonOnWideWindow: true, children: "Test" }));
108
- const component = screen.getByRole('listitem');
109
- expect(component).toHaveClass('ams-page-header__mega-menu-button-item--hide-on-wide-window');
110
- });
111
- it('opens and closes the mega menu', async () => {
112
- const user = userEvent.setup();
113
- const { container } = render(_jsx(PageHeader, { children: "Test" }));
114
- const closedMegaMenu = container.querySelector('.ams-page-header__mega-menu--closed');
115
- expect(closedMegaMenu).toBeInTheDocument();
116
- const menuButton = screen.getByRole('button', { name: 'Menu' });
117
- await user.click(menuButton);
118
- const openMegaMenu = container.querySelector('.ams-page-header__mega-menu');
119
- expect(openMegaMenu).toBeInTheDocument();
120
- expect(openMegaMenu).not.toHaveClass('ams-page-header__mega-menu--closed');
121
- });
122
- it.skip('closes the mega menu when it is open and the screen width passes the breakpoint', () => {
123
- // TODO: Add this test
124
- });
125
- it('renders a custom logo link component', () => {
126
- const CustomLink = (props) => _jsx("a", { "data-test": true, ...props });
127
- render(_jsx(PageHeader, { logoLinkComponent: CustomLink }));
128
- const customLink = screen.getByRole('link', { name: 'Gemeente Amsterdam logo Ga naar de homepage' });
129
- expect(customLink).toHaveAttribute('data-test');
130
- });
131
- });
@@ -1,5 +0,0 @@
1
- /**
2
- * @license EUPL-1.2+
3
- * Copyright Gemeente Amsterdam
4
- */
5
- import '@testing-library/jest-dom';
@@ -1,38 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- /**
3
- * @license EUPL-1.2+
4
- * Copyright Gemeente Amsterdam
5
- */
6
- import { render } from '@testing-library/react';
7
- import { createRef } from 'react';
8
- import { PageHeaderGridCellNarrowWindowOnly } from './PageHeaderGridCellNarrowWindowOnly';
9
- import '@testing-library/jest-dom';
10
- describe('Page Header Grid Cell Narrow Window Only', () => {
11
- it('renders', () => {
12
- const { container } = render(_jsx(PageHeaderGridCellNarrowWindowOnly, {}));
13
- const component = container.querySelector(':only-child');
14
- expect(component).toBeInTheDocument();
15
- expect(component).toBeVisible();
16
- });
17
- it('renders a Grid.Cell', () => {
18
- const { container } = render(_jsx(PageHeaderGridCellNarrowWindowOnly, {}));
19
- const component = container.querySelector(':only-child');
20
- expect(component).toHaveClass('ams-grid__cell');
21
- });
22
- it('renders a design system BEM class name', () => {
23
- const { container } = render(_jsx(PageHeaderGridCellNarrowWindowOnly, {}));
24
- const component = container.querySelector(':only-child');
25
- expect(component).toHaveClass('ams-page-header__grid-cell-narrow-window-only');
26
- });
27
- it('renders an extra class name', () => {
28
- const { container } = render(_jsx(PageHeaderGridCellNarrowWindowOnly, { className: "extra" }));
29
- const component = container.querySelector(':only-child');
30
- expect(component).toHaveClass('ams-page-header__grid-cell-narrow-window-only extra');
31
- });
32
- it('supports ForwardRef in React', () => {
33
- const ref = createRef();
34
- const { container } = render(_jsx(PageHeaderGridCellNarrowWindowOnly, { ref: ref }));
35
- const component = container.querySelector(':only-child');
36
- expect(ref.current).toBe(component);
37
- });
38
- });
@@ -1,5 +0,0 @@
1
- /**
2
- * @license EUPL-1.2+
3
- * Copyright Gemeente Amsterdam
4
- */
5
- import '@testing-library/jest-dom';
@@ -1,45 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- /**
3
- * @license EUPL-1.2+
4
- * Copyright Gemeente Amsterdam
5
- */
6
- import { render, screen } from '@testing-library/react';
7
- import { createRef } from 'react';
8
- import { PageHeaderMenuLink } from './PageHeaderMenuLink';
9
- import '@testing-library/jest-dom';
10
- describe('Page Header Menu Link', () => {
11
- it('renders', () => {
12
- render(_jsx(PageHeaderMenuLink, { href: "/" }));
13
- const component = screen.getByRole('listitem');
14
- expect(component).toBeInTheDocument();
15
- expect(component).toBeVisible();
16
- });
17
- it('renders a design system BEM class name', () => {
18
- render(_jsx(PageHeaderMenuLink, { href: "/" }));
19
- const item = screen.getByRole('listitem');
20
- expect(item).toHaveClass('ams-page-header__menu-item');
21
- const link = screen.getByRole('link');
22
- expect(link).toHaveClass('ams-page-header__menu-link');
23
- });
24
- it('renders an extra class name', () => {
25
- render(_jsx(PageHeaderMenuLink, { className: "extra", href: "/" }));
26
- const component = screen.getByRole('link');
27
- expect(component).toHaveClass('ams-page-header__menu-link extra');
28
- });
29
- it('renders the href attribute', () => {
30
- render(_jsx(PageHeaderMenuLink, { href: "/" }));
31
- const component = screen.getByRole('link');
32
- expect(component).toHaveAttribute('href', '/');
33
- });
34
- it('renders the ‘fixed’ prop classname', () => {
35
- render(_jsx(PageHeaderMenuLink, { fixed: true, href: "/" }));
36
- const component = screen.getByRole('listitem');
37
- expect(component).toHaveClass('ams-page-header__menu-item--fixed');
38
- });
39
- it('supports ForwardRef in React', () => {
40
- const ref = createRef();
41
- render(_jsx(PageHeaderMenuLink, { href: "/", ref: ref }));
42
- const component = screen.getByRole('link');
43
- expect(ref.current).toBe(component);
44
- });
45
- });
@@ -1,5 +0,0 @@
1
- /**
2
- * @license EUPL-1.2+
3
- * Copyright Gemeente Amsterdam
4
- */
5
- import '@testing-library/jest-dom';
@@ -1,40 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- /**
3
- * @license EUPL-1.2+
4
- * Copyright Gemeente Amsterdam
5
- */
6
- import { render, screen } from '@testing-library/react';
7
- import { createRef } from 'react';
8
- import { PageHeading } from './PageHeading';
9
- import '@testing-library/jest-dom';
10
- describe('Page heading', () => {
11
- it('renders a heading role element', () => {
12
- render(_jsx(PageHeading, { children: "Breaking news" }));
13
- const pageHeading = screen.getByRole('heading', {
14
- name: 'Breaking news',
15
- });
16
- expect(pageHeading).toBeInTheDocument();
17
- expect(pageHeading).toBeVisible();
18
- });
19
- it('renders a design system BEM class name', () => {
20
- const { container } = render(_jsx(PageHeading, {}));
21
- const component = container.querySelector(':only-child');
22
- expect(component).toHaveClass('ams-page-heading');
23
- });
24
- it('renders an extra class name', () => {
25
- const { container } = render(_jsx(PageHeading, { className: "extra" }));
26
- const component = container.querySelector(':only-child');
27
- expect(component).toHaveClass('ams-page-heading extra');
28
- });
29
- it('renders the class name for inverse color', () => {
30
- render(_jsx(PageHeading, { color: "inverse", children: "Titel" }));
31
- const pageHeading = screen.getByRole('heading', { name: 'Titel' });
32
- expect(pageHeading).toHaveClass('ams-page-heading--inverse');
33
- });
34
- it('supports ForwardRef in React', () => {
35
- const ref = createRef();
36
- const { container } = render(_jsx(PageHeading, { ref: ref }));
37
- const component = container.querySelector(':only-child');
38
- expect(ref.current).toBe(component);
39
- });
40
- });
@@ -1,5 +0,0 @@
1
- /**
2
- * @license EUPL-1.2+
3
- * Copyright Gemeente Amsterdam
4
- */
5
- import '@testing-library/jest-dom';