@scottish-government/designsystem-react 0.5.1 → 0.7.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 (242) hide show
  1. package/.svgrrc +2 -1
  2. package/.svgrrc_documents +15 -0
  3. package/@types/common/FileIcon.d.ts +7 -0
  4. package/@types/components/Accordion.d.ts +2 -2
  5. package/@types/components/ConfirmationMessage.d.ts +1 -1
  6. package/@types/components/FileDownload.d.ts +11 -0
  7. package/@types/components/NotificationPanel.d.ts +1 -1
  8. package/@types/components/SummaryCard.d.ts +1 -1
  9. package/@types/components/Tabs.d.ts +1 -1
  10. package/@types/sgds.d.ts +2 -1
  11. package/CHANGELOG.md +81 -0
  12. package/README.md +4 -0
  13. package/dist/common/AbstractNotificationBanner.jsx +63 -0
  14. package/dist/common/ConditionalWrapper.jsx +8 -0
  15. package/dist/common/FileIcon.jsx +51 -0
  16. package/dist/common/HintText.jsx +9 -0
  17. package/dist/common/Icon.jsx +57 -0
  18. package/dist/common/ScreenReaderText.jsx +9 -0
  19. package/dist/common/WrapperTag.jsx +11 -0
  20. package/dist/common/file-icon.jsx +51 -0
  21. package/dist/common/icon.jsx +1 -1
  22. package/dist/components/Accordion/Accordion.jsx +102 -0
  23. package/dist/components/AspectBox/AspectBox.jsx +79 -0
  24. package/dist/components/BackToTop/BackToTop.jsx +27 -0
  25. package/dist/components/Breadcrumbs/Breadcrumbs.jsx +28 -0
  26. package/dist/components/Button/Button.jsx +30 -0
  27. package/dist/components/Checkbox/Checkbox.jsx +62 -0
  28. package/dist/components/ConfirmationMessage/ConfirmationMessage.jsx +24 -0
  29. package/dist/components/ContentsNav/ContentsNav.jsx +33 -0
  30. package/dist/components/CookieBanner/CookieBanner.jsx +21 -0
  31. package/dist/components/DatePicker/DatePicker.jsx +54 -0
  32. package/dist/components/Details/Details.jsx +17 -0
  33. package/dist/components/ErrorMessage/ErrorMessage.jsx +12 -0
  34. package/dist/components/ErrorSummary/ErrorSummary.jsx +27 -0
  35. package/dist/components/FileDownload/FileDownload.jsx +50 -0
  36. package/dist/components/HideThisPage/HideThisPage.jsx +71 -0
  37. package/dist/components/InsetText/InsetText.jsx +14 -0
  38. package/dist/components/NotificationBanner/NotificationBanner.jsx +26 -0
  39. package/dist/components/NotificationPanel/NotificationPanel.jsx +21 -0
  40. package/dist/components/PageHeader/PageHeader.jsx +15 -0
  41. package/dist/components/PageMetadata/PageMetadata.jsx +26 -0
  42. package/dist/components/Pagination/Pagination.jsx +97 -0
  43. package/dist/components/PhaseBanner/PhaseBanner.jsx +23 -0
  44. package/dist/components/Question/Question.jsx +22 -0
  45. package/dist/components/RadioButton/RadioButton.jsx +43 -0
  46. package/dist/components/Select/Select.jsx +52 -0
  47. package/dist/components/SequentialNavigation/SequentialNavigation.jsx +31 -0
  48. package/dist/components/SideNavigation/SideNavigation.jsx +52 -0
  49. package/dist/components/SiteHeader/SiteHeader.jsx +68 -0
  50. package/dist/components/SiteNavigation/SiteNavigation.jsx +22 -0
  51. package/dist/components/SiteSearch/SiteSearch.jsx +55 -0
  52. package/dist/components/SkipLinks/SkipLinks.jsx +21 -0
  53. package/dist/components/SummaryCard/SummaryCard.jsx +67 -0
  54. package/dist/components/SummaryList/SummaryList.jsx +75 -0
  55. package/dist/components/Table/Table.jsx +24 -0
  56. package/dist/components/Tabs/Tabs.jsx +99 -0
  57. package/dist/components/Tag/Tag.jsx +13 -0
  58. package/dist/components/TaskList/TaskList.jsx +95 -0
  59. package/dist/components/TextInput/TextInput.jsx +58 -0
  60. package/dist/components/Textarea/Textarea.jsx +54 -0
  61. package/dist/components/WarningText/WarningText.jsx +16 -0
  62. package/dist/components/file-download/file-download.jsx +50 -0
  63. package/dist/images/documents/audio.jsx +47 -0
  64. package/dist/images/documents/csv.jsx +57 -0
  65. package/dist/images/documents/excel.jsx +57 -0
  66. package/dist/images/documents/file.jsx +48 -0
  67. package/dist/images/documents/generic.jsx +47 -0
  68. package/dist/images/documents/geodata.jsx +44 -0
  69. package/dist/images/documents/ical.jsx +48 -0
  70. package/dist/images/documents/ico.jsx +48 -0
  71. package/dist/images/documents/image.jsx +43 -0
  72. package/dist/images/documents/index.js +50 -0
  73. package/dist/images/documents/odf.jsx +46 -0
  74. package/dist/images/documents/odg.jsx +46 -0
  75. package/dist/images/documents/odp.jsx +45 -0
  76. package/dist/images/documents/ods.jsx +55 -0
  77. package/dist/images/documents/odt.jsx +46 -0
  78. package/dist/images/documents/pdf.jsx +48 -0
  79. package/dist/images/documents/ppt.jsx +47 -0
  80. package/dist/images/documents/rtf.jsx +48 -0
  81. package/dist/images/documents/text.jsx +48 -0
  82. package/dist/images/documents/video.jsx +47 -0
  83. package/dist/images/documents/word.jsx +48 -0
  84. package/dist/images/documents/xml.jsx +48 -0
  85. package/dist/images/documents/zip.jsx +48 -0
  86. package/dist/images/icons/arrow_upward.jsx +41 -0
  87. package/dist/images/icons/calendar_today.jsx +41 -0
  88. package/dist/images/icons/cancel.jsx +40 -0
  89. package/dist/images/icons/check_circle.jsx +41 -0
  90. package/dist/images/icons/chevron_left.jsx +41 -0
  91. package/dist/images/icons/chevron_right.jsx +41 -0
  92. package/dist/images/icons/close.jsx +41 -0
  93. package/dist/images/icons/description.jsx +41 -0
  94. package/dist/images/icons/double_chevron_left.jsx +40 -0
  95. package/dist/images/icons/double_chevron_right.jsx +40 -0
  96. package/dist/images/icons/error.jsx +41 -0
  97. package/dist/images/icons/expand_less.jsx +41 -0
  98. package/dist/images/icons/expand_more.jsx +41 -0
  99. package/dist/images/icons/index.js +40 -0
  100. package/dist/images/icons/list.jsx +44 -0
  101. package/dist/images/icons/menu.jsx +41 -0
  102. package/dist/images/icons/priority_high.jsx +42 -0
  103. package/dist/images/icons/search.jsx +41 -0
  104. package/dist/tsconfig.tsbuildinfo +1 -1
  105. package/package.json +2 -1
  106. package/src/common/{abstract-notification-banner.test.tsx → AbstractNotificationBanner.test.tsx} +11 -11
  107. package/src/common/{abstract-notification-banner.tsx → AbstractNotificationBanner.tsx} +2 -2
  108. package/src/common/{conditional-wrapper.test.tsx → ConditionalWrapper.test.tsx} +1 -1
  109. package/src/common/FileIcon.test.tsx +50 -0
  110. package/src/common/FileIcon.tsx +25 -0
  111. package/src/common/{hint-text.test.tsx → HintText.test.tsx} +12 -12
  112. package/src/common/{icon.test.tsx → Icon.test.tsx} +16 -16
  113. package/src/common/{icon.tsx → Icon.tsx} +1 -1
  114. package/src/common/{screen-reader-text.test.tsx → ScreenReaderText.test.tsx} +5 -5
  115. package/src/common/{wrapper-tag.test.tsx → WrapperTag.test.tsx} +5 -5
  116. package/src/components/{accordion/accordion.test.tsx → Accordion/Accordion.test.tsx} +35 -35
  117. package/src/components/{accordion/accordion.tsx → Accordion/Accordion.tsx} +5 -5
  118. package/src/components/{aspect-box/aspect-box.test.tsx → AspectBox/AspectBox.test.tsx} +2 -2
  119. package/src/components/{back-to-top/back-to-top.test.tsx → BackToTop/BackToTop.test.tsx} +1 -1
  120. package/src/components/{back-to-top/back-to-top.tsx → BackToTop/BackToTop.tsx} +1 -1
  121. package/src/components/{breadcrumbs/breadcrumbs.test.tsx → Breadcrumbs/Breadcrumbs.test.tsx} +7 -7
  122. package/src/components/{button/button.test.tsx → Button/Button.test.tsx} +1 -1
  123. package/src/components/{button/button.tsx → Button/Button.tsx} +3 -3
  124. package/src/components/{checkbox/checkbox.test.tsx → Checkbox/Checkbox.test.tsx} +16 -16
  125. package/src/components/{checkbox/checkbox.tsx → Checkbox/Checkbox.tsx} +1 -1
  126. package/src/components/{confirmation-message/confirmation-message.test.tsx → ConfirmationMessage/ConfirmationMessage.test.tsx} +12 -14
  127. package/src/components/{confirmation-message/confirmation-message.tsx → ConfirmationMessage/ConfirmationMessage.tsx} +4 -4
  128. package/src/components/{contents-nav/contents-nav.test.tsx → ContentsNav/ContentsNav.test.tsx} +21 -28
  129. package/src/components/{contents-nav/contents-nav.tsx → ContentsNav/ContentsNav.tsx} +1 -1
  130. package/src/components/{cookie-banner/cookie-banner.test.tsx → CookieBanner/CookieBanner.test.tsx} +3 -3
  131. package/src/components/{cookie-banner/cookie-banner.tsx → CookieBanner/CookieBanner.tsx} +1 -1
  132. package/src/components/{date-picker/date-picker.test.tsx → DatePicker/DatePicker.test.tsx} +76 -66
  133. package/src/components/{date-picker/date-picker.tsx → DatePicker/DatePicker.tsx} +2 -2
  134. package/src/components/{details/details.test.tsx → Details/Details.test.tsx} +10 -10
  135. package/src/components/{error-message/error-message.test.tsx → ErrorMessage/ErrorMessage.test.tsx} +10 -10
  136. package/src/components/{error-summary/error-summary.test.tsx → ErrorSummary/ErrorSummary.test.tsx} +13 -14
  137. package/src/components/{error-summary/error-summary.tsx → ErrorSummary/ErrorSummary.tsx} +1 -1
  138. package/src/components/FileDownload/FileDownload.test.tsx +167 -0
  139. package/src/components/FileDownload/FileDownload.tsx +67 -0
  140. package/src/components/{hide-this-page/hide-this-page.test.tsx → HideThisPage/HideThisPage.test.tsx} +4 -4
  141. package/src/components/{hide-this-page/hide-this-page.tsx → HideThisPage/HideThisPage.tsx} +3 -3
  142. package/src/components/{inset-text/inset-text.test.tsx → InsetText/InsetText.test.tsx} +1 -1
  143. package/src/components/{notification-banner/notification-banner.test.tsx → NotificationBanner/NotificationBanner.test.tsx} +4 -4
  144. package/src/components/{notification-banner/notification-banner.tsx → NotificationBanner/NotificationBanner.tsx} +1 -1
  145. package/src/components/{notification-panel/notification-panel.test.tsx → NotificationPanel/NotificationPanel.test.tsx} +24 -23
  146. package/src/components/{notification-panel/notification-panel.tsx → NotificationPanel/NotificationPanel.tsx} +3 -3
  147. package/src/components/{page-header/page-header.test.tsx → PageHeader/PageHeader.test.tsx} +9 -9
  148. package/src/components/{page-metadata/page-metadata.test.tsx → PageMetadata/PageMetadata.test.tsx} +9 -9
  149. package/src/components/{pagination/pagination.test.tsx → Pagination/Pagination.test.tsx} +56 -56
  150. package/src/components/{pagination/pagination.tsx → Pagination/Pagination.tsx} +1 -1
  151. package/src/components/{phase-banner/phase-banner.test.tsx → PhaseBanner/PhaseBanner.test.tsx} +9 -9
  152. package/src/components/{phase-banner/phase-banner.tsx → PhaseBanner/PhaseBanner.tsx} +1 -1
  153. package/src/components/{question/question.test.tsx → Question/Question.test.tsx} +10 -10
  154. package/src/components/{question/question.tsx → Question/Question.tsx} +3 -3
  155. package/src/components/{radio-button/radio-button.test.tsx → RadioButton/RadioButton.test.tsx} +23 -23
  156. package/src/components/{radio-button/radio-button.tsx → RadioButton/RadioButton.tsx} +1 -1
  157. package/src/components/{select/select.test.tsx → Select/Select.test.tsx} +67 -64
  158. package/src/components/{select/select.tsx → Select/Select.tsx} +2 -2
  159. package/src/components/{sequential-navigation/sequential-navigation.test.tsx → SequentialNavigation/SequentialNavigation.test.tsx} +18 -18
  160. package/src/components/{side-navigation/side-navigation.test.tsx → SideNavigation/SideNavigation.test.tsx} +8 -8
  161. package/src/components/{site-header/site-header.test.tsx → SiteHeader/SiteHeader.test.tsx} +25 -25
  162. package/src/components/{site-header/site-header.tsx → SiteHeader/SiteHeader.tsx} +4 -4
  163. package/src/components/{site-navigation/site-navigation.test.tsx → SiteNavigation/SiteNavigation.test.tsx} +8 -8
  164. package/src/components/{site-search/site-search.test.tsx → SiteSearch/SiteSearch.test.tsx} +16 -16
  165. package/src/components/{site-search/site-search.tsx → SiteSearch/SiteSearch.tsx} +1 -1
  166. package/src/components/{skip-links/skip-links.test.tsx → SkipLinks/SkipLinks.test.tsx} +15 -15
  167. package/src/components/{summary-card/summary-card.test.tsx → SummaryCard/SummaryCard.test.tsx} +28 -28
  168. package/src/components/{summary-card/summary-card.tsx → SummaryCard/SummaryCard.tsx} +4 -4
  169. package/src/components/{summary-list/summary-list.test.tsx → SummaryList/SummaryList.test.tsx} +55 -56
  170. package/src/components/{summary-list/summary-list.tsx → SummaryList/SummaryList.tsx} +2 -2
  171. package/src/components/{table/table.test.tsx → Table/Table.test.tsx} +4 -4
  172. package/src/components/{tabs/tabs.test.tsx → Tabs/Tabs.test.tsx} +22 -42
  173. package/src/components/{tabs/tabs.tsx → Tabs/Tabs.tsx} +3 -3
  174. package/src/components/{tag/tag.test.tsx → Tag/Tag.test.tsx} +10 -10
  175. package/src/components/{task-list/task-list.test.tsx → TaskList/TaskList.test.tsx} +109 -108
  176. package/src/components/{task-list/task-list.tsx → TaskList/TaskList.tsx} +4 -4
  177. package/src/components/{text-input/text-input.test.tsx → TextInput/TextInput.test.tsx} +92 -87
  178. package/src/components/{text-input/text-input.tsx → TextInput/TextInput.tsx} +4 -4
  179. package/src/components/{textarea/textarea.test.tsx → Textarea/Textarea.test.tsx} +71 -67
  180. package/src/components/{textarea/textarea.tsx → Textarea/Textarea.tsx} +3 -3
  181. package/src/components/{warning-text/warning-text.test.tsx → WarningText/WarningText.test.tsx} +1 -1
  182. package/src/images/documents/audio.tsx +34 -0
  183. package/src/images/documents/csv.tsx +39 -0
  184. package/src/images/documents/excel.tsx +39 -0
  185. package/src/images/documents/file.tsx +30 -0
  186. package/src/images/documents/generic.tsx +26 -0
  187. package/src/images/documents/geodata.tsx +29 -0
  188. package/src/images/documents/ical.tsx +30 -0
  189. package/src/images/documents/ico.tsx +30 -0
  190. package/src/images/documents/image.tsx +25 -0
  191. package/src/images/documents/index.ts +22 -0
  192. package/src/images/documents/odf.tsx +28 -0
  193. package/src/images/documents/odg.tsx +28 -0
  194. package/src/images/documents/odp.tsx +33 -0
  195. package/src/images/documents/ods.tsx +37 -0
  196. package/src/images/documents/odt.tsx +28 -0
  197. package/src/images/documents/pdf.tsx +30 -0
  198. package/src/images/documents/ppt.tsx +28 -0
  199. package/src/images/documents/rtf.tsx +30 -0
  200. package/src/images/documents/text.tsx +30 -0
  201. package/src/images/documents/video.tsx +34 -0
  202. package/src/images/documents/word.tsx +30 -0
  203. package/src/images/documents/xml.tsx +30 -0
  204. package/src/images/documents/zip.tsx +30 -0
  205. package/src/images/icons/index.ts +17 -0
  206. package/vite.config.ts +1 -1
  207. package/src/icons/index.ts +0 -17
  208. /package/src/common/{conditional-wrapper.tsx → ConditionalWrapper.tsx} +0 -0
  209. /package/src/common/{hint-text.tsx → HintText.tsx} +0 -0
  210. /package/src/common/{screen-reader-text.tsx → ScreenReaderText.tsx} +0 -0
  211. /package/src/common/{wrapper-tag.tsx → WrapperTag.tsx} +0 -0
  212. /package/src/components/{aspect-box/aspect-box.tsx → AspectBox/AspectBox.tsx} +0 -0
  213. /package/src/components/{breadcrumbs/breadcrumbs.tsx → Breadcrumbs/Breadcrumbs.tsx} +0 -0
  214. /package/src/components/{details/details.tsx → Details/Details.tsx} +0 -0
  215. /package/src/components/{error-message/error-message.tsx → ErrorMessage/ErrorMessage.tsx} +0 -0
  216. /package/src/components/{inset-text/inset-text.tsx → InsetText/InsetText.tsx} +0 -0
  217. /package/src/components/{page-header/page-header.tsx → PageHeader/PageHeader.tsx} +0 -0
  218. /package/src/components/{page-metadata/page-metadata.tsx → PageMetadata/PageMetadata.tsx} +0 -0
  219. /package/src/components/{sequential-navigation/sequential-navigation.tsx → SequentialNavigation/SequentialNavigation.tsx} +0 -0
  220. /package/src/components/{side-navigation/side-navigation.tsx → SideNavigation/SideNavigation.tsx} +0 -0
  221. /package/src/components/{site-navigation/site-navigation.tsx → SiteNavigation/SiteNavigation.tsx} +0 -0
  222. /package/src/components/{skip-links/skip-links.tsx → SkipLinks/SkipLinks.tsx} +0 -0
  223. /package/src/components/{table/table.tsx → Table/Table.tsx} +0 -0
  224. /package/src/components/{tag/tag.tsx → Tag/Tag.tsx} +0 -0
  225. /package/src/components/{warning-text/warning-text.tsx → WarningText/WarningText.tsx} +0 -0
  226. /package/src/{icons/ArrowUpward.tsx → images/icons/arrow_upward.tsx} +0 -0
  227. /package/src/{icons/CalendarToday.tsx → images/icons/calendar_today.tsx} +0 -0
  228. /package/src/{icons/Cancel.tsx → images/icons/cancel.tsx} +0 -0
  229. /package/src/{icons/CheckCircle.tsx → images/icons/check_circle.tsx} +0 -0
  230. /package/src/{icons/ChevronLeft.tsx → images/icons/chevron_left.tsx} +0 -0
  231. /package/src/{icons/ChevronRight.tsx → images/icons/chevron_right.tsx} +0 -0
  232. /package/src/{icons/Close.tsx → images/icons/close.tsx} +0 -0
  233. /package/src/{icons/Description.tsx → images/icons/description.tsx} +0 -0
  234. /package/src/{icons/DoubleChevronLeft.tsx → images/icons/double_chevron_left.tsx} +0 -0
  235. /package/src/{icons/DoubleChevronRight.tsx → images/icons/double_chevron_right.tsx} +0 -0
  236. /package/src/{icons/Error.tsx → images/icons/error.tsx} +0 -0
  237. /package/src/{icons/ExpandLess.tsx → images/icons/expand_less.tsx} +0 -0
  238. /package/src/{icons/ExpandMore.tsx → images/icons/expand_more.tsx} +0 -0
  239. /package/src/{icons/List.tsx → images/icons/list.tsx} +0 -0
  240. /package/src/{icons/Menu.tsx → images/icons/menu.tsx} +0 -0
  241. /package/src/{icons/PriorityHigh.tsx → images/icons/priority_high.tsx} +0 -0
  242. /package/src/{icons/Search.tsx → images/icons/search.tsx} +0 -0
@@ -1,9 +1,12 @@
1
1
  import { test, expect } from 'vitest';
2
2
  import { render, screen, within } from '@testing-library/react';
3
- import ContentsNav, {Link} from './contents-nav';
3
+ import ContentsNav, {Link} from './ContentsNav';
4
+
5
+ const ITEM_HREF = '#foo';
6
+ const ITEM_TITLE = 'My content';
4
7
 
5
8
  test('contents nav renders correctly', () => {
6
- const items = [
9
+ const ITEMS = [
7
10
  {
8
11
  title: 'Apply for Blue Badge',
9
12
  current: true
@@ -26,10 +29,10 @@ test('contents nav renders correctly', () => {
26
29
  }
27
30
  ];
28
31
 
29
- const label = 'Pages in this guide';
32
+ const LABEL_TEXT = 'Pages in this guide';
30
33
 
31
34
  render(
32
- <ContentsNav label={label} items={items} />
35
+ <ContentsNav label={LABEL_TEXT} items={ITEMS} />
33
36
  )
34
37
 
35
38
  const contentsNav = screen.getByRole('navigation');
@@ -37,33 +40,30 @@ test('contents nav renders correctly', () => {
37
40
  const contentsNavList = within(contentsNav).getByRole('list');
38
41
 
39
42
  expect(contentsNav).toHaveClass('ds_contents-nav');
40
- expect(contentsNav.ariaLabel).toEqual(label);
43
+ expect(contentsNav.ariaLabel).toEqual(LABEL_TEXT);
41
44
  expect(contentsNav.tagName).toEqual('NAV');
42
45
  expect(contentsNavTitle).toHaveClass('ds_contents-nav__title');
43
46
  expect(contentsNavTitle.textContent).toEqual('Contents');
44
47
  expect(contentsNavList).toHaveClass('ds_contents-nav__list');
45
48
  expect(contentsNavList.tagName).toEqual('UL');
46
- expect(contentsNavList.children.length).toEqual(items.length);
49
+ expect(contentsNavList.children.length).toEqual(ITEMS.length);
47
50
  });
48
51
 
49
52
  test('contents nav with custom title', () => {
50
- const title = 'My title';
53
+ const TITLE_TEXT = 'My title';
51
54
 
52
55
  render(
53
- <ContentsNav title={title} items={[]} />
56
+ <ContentsNav title={TITLE_TEXT} items={[]} />
54
57
  );
55
58
 
56
59
  const contentsNav = screen.getByRole('navigation');
57
60
  const contentsNavTitle = within(contentsNav).getByRole('heading');
58
- expect(contentsNavTitle.textContent).toEqual(title);
61
+ expect(contentsNavTitle.textContent).toEqual(TITLE_TEXT);
59
62
  });
60
63
 
61
64
  test('contents nav item', () => {
62
- const href = '#foo';
63
- const content = 'My content';
64
-
65
65
  render(
66
- <Link href={href} title={content} />
66
+ <Link href={ITEM_HREF} title={ITEM_TITLE} />
67
67
  );
68
68
 
69
69
  const listItem = screen.getByRole('listitem');
@@ -73,20 +73,17 @@ test('contents nav item', () => {
73
73
  expect(listItem.tagName).toEqual('LI');
74
74
  expect(link).toHaveClass('ds_contents-nav__link');
75
75
  expect(link.tagName).toEqual('A');
76
- expect(link.textContent).toEqual(content);
77
- expect(link).toHaveAttribute('href', href);
76
+ expect(link.textContent).toEqual(ITEM_TITLE);
77
+ expect(link).toHaveAttribute('href', ITEM_HREF);
78
78
  });
79
79
 
80
80
  test('contents nav current item with href', () => {
81
- const href = '#foo';
82
- const content = 'My content';
83
-
84
81
  render(
85
- <Link current href={href} title={content} />
82
+ <Link current href={ITEM_HREF} title={ITEM_TITLE} />
86
83
  );
87
84
 
88
85
  const listItem = screen.getByRole('listitem');
89
- const link = within(listItem).getByText(content);
86
+ const link = within(listItem).getByText(ITEM_TITLE);
90
87
 
91
88
  expect(listItem.ariaCurrent).toEqual('page');
92
89
  expect(link.tagName).toEqual('SPAN');
@@ -94,14 +91,12 @@ test('contents nav current item with href', () => {
94
91
  });
95
92
 
96
93
  test('contents nav current item without href', () => {
97
- const content = 'My content';
98
-
99
94
  render(
100
- <Link current title={content} />
95
+ <Link current title={ITEM_TITLE} />
101
96
  );
102
97
 
103
98
  const listItem = screen.getByRole('listitem');
104
- const link = within(listItem).getByText(content);
99
+ const link = within(listItem).getByText(ITEM_TITLE);
105
100
 
106
101
  expect(listItem.ariaCurrent).toEqual('page');
107
102
  expect(link.tagName).toEqual('SPAN');
@@ -109,14 +104,12 @@ test('contents nav current item without href', () => {
109
104
  });
110
105
 
111
106
  test('contents nav item without href', () => {
112
- const content = 'My content';
113
-
114
107
  render(
115
- <Link title={content} />
108
+ <Link title={ITEM_TITLE} />
116
109
  );
117
110
 
118
111
  const listItem = screen.getByRole('listitem');
119
- const link = within(listItem).getByText(content);
112
+ const link = within(listItem).getByText(ITEM_TITLE);
120
113
 
121
114
  expect(link.tagName).toEqual('SPAN');
122
115
  expect(link).not.toHaveClass('ds_current');
@@ -1,4 +1,4 @@
1
- import WrapperTag from '../../common/wrapper-tag';
1
+ import WrapperTag from '../../common/WrapperTag';
2
2
 
3
3
  export const Link: React.FC<SGDS.Component.ContentsNav.Link> = ({
4
4
  current,
@@ -5,9 +5,9 @@
5
5
 
6
6
  import { test, expect } from 'vitest';
7
7
  import { render } from '@testing-library/react';
8
- import CookieBanner from './cookie-banner';
8
+ import CookieBanner from './CookieBanner';
9
9
 
10
- const text = 'We need to tell you about something';
10
+ const BANNER_TEXT = 'We need to tell you about something';
11
11
 
12
12
  /**
13
13
  * CookieBanner has additional classNames
@@ -15,7 +15,7 @@ const text = 'We need to tell you about something';
15
15
  test('cookie banner renders correctly', () => {
16
16
  render(
17
17
  <CookieBanner>
18
- {text}
18
+ {BANNER_TEXT}
19
19
  </CookieBanner>
20
20
  );
21
21
 
@@ -1,5 +1,5 @@
1
1
 
2
- import AbstractNotificationBanner from '../../common/abstract-notification-banner';
2
+ import AbstractNotificationBanner from '../../common/AbstractNotificationBanner';
3
3
  // @ts-ignore
4
4
  import DSCookieBanner from '@scottish-government/design-system/src/components/cookie-notification/cookie-notification.js';
5
5
 
@@ -1,21 +1,21 @@
1
1
  import { test, expect, vi } from 'vitest';
2
2
  import { render, screen, within, fireEvent } from '@testing-library/react';
3
- import DatePicker from './date-picker';
3
+ import DatePicker from './DatePicker';
4
4
 
5
- const labelText = 'Date of birth';
6
- const id = 'date-picker';
5
+ const LABEL_TEXT = 'Date of birth';
6
+ const DATE_PICKER_ID = 'date-picker';
7
7
 
8
8
  test('date picker renders correctly', () => {
9
9
  render(
10
10
  <DatePicker
11
- id={id}
12
- label={labelText}
11
+ id={DATE_PICKER_ID}
12
+ label={LABEL_TEXT}
13
13
  />
14
14
  );
15
15
 
16
16
  // a little hacky. maybe testid would be better?
17
17
  const datePicker = screen.getAllByRole('generic')[1];
18
- const label = within(datePicker).getByText(labelText);
18
+ const label = within(datePicker).getByText(LABEL_TEXT);
19
19
  const textInput = within(datePicker).getByRole('textbox');
20
20
 
21
21
  expect(datePicker).toHaveClass('ds_datepicker');
@@ -23,36 +23,38 @@ test('date picker renders correctly', () => {
23
23
  expect(label).toHaveAttribute('for', textInput.id);
24
24
  expect(label.tagName).toEqual('LABEL');
25
25
  expect(textInput).toHaveClass('ds_input', 'ds_input--fixed-10');
26
- expect(textInput.id).toEqual(id);
26
+ expect(textInput.id).toEqual(DATE_PICKER_ID);
27
27
 
28
28
  // todo: check for DS script being fired
29
29
  });
30
30
 
31
31
  test('date picker with disabled dates', () => {
32
- const disabledDates = '18/05/2023 19/05/2023'
32
+ const DISABLED_DATES = '18/05/2023 19/05/2023'
33
+
33
34
  render(
34
35
  <DatePicker
35
- id={id}
36
- label={labelText}
37
- disabledDates={disabledDates}
36
+ id={DATE_PICKER_ID}
37
+ label={LABEL_TEXT}
38
+ disabledDates={DISABLED_DATES}
38
39
  />
39
40
  );
40
41
  const datePicker = screen.getAllByRole('generic')[1];
41
42
 
42
- expect(datePicker).toHaveAttribute('data-disableddates', disabledDates);
43
+ expect(datePicker).toHaveAttribute('data-disableddates', DISABLED_DATES);
43
44
  });
44
45
 
45
46
  test('date picker with hint text', () => {
46
- const hintText = 'My hint text'
47
+ const HINT_TEXT = 'My hint text'
48
+
47
49
  render(
48
50
  <DatePicker
49
- id={id}
50
- label={labelText}
51
- hintText={hintText}
51
+ id={DATE_PICKER_ID}
52
+ label={LABEL_TEXT}
53
+ hintText={HINT_TEXT}
52
54
  />
53
55
  );
54
56
  const datePicker = screen.getAllByRole('generic')[1];
55
- const hintTextEl = screen.getByText(hintText);
57
+ const hintTextEl = screen.getByText(HINT_TEXT);
56
58
  const textInput = within(datePicker).getByRole('textbox');
57
59
 
58
60
  expect(hintTextEl).toBeInTheDocument();
@@ -60,56 +62,60 @@ test('date picker with hint text', () => {
60
62
  });
61
63
 
62
64
  test('date picker with custom icon path', () => {
63
- const iconPath = '/my/icon/path'
65
+ const ICON_PATH = '/my/icon/path'
66
+
64
67
  render(
65
68
  <DatePicker
66
- id={id}
67
- label={labelText}
68
- iconPath={iconPath}
69
+ id={DATE_PICKER_ID}
70
+ label={LABEL_TEXT}
71
+ iconPath={ICON_PATH}
69
72
  />
70
73
  );
71
74
  const datePicker = screen.getAllByRole('generic')[1];
72
- const label = within(datePicker).getByText(labelText);
75
+ const label = within(datePicker).getByText(LABEL_TEXT);
73
76
  const textInput = within(datePicker).getByRole('textbox');
74
77
 
75
78
  // todo
76
79
  });
77
80
 
78
81
  test('date picker with max date', () => {
79
- const maxDate = '28/05/2023'
82
+ const MAX_DATE = '28/05/2023'
83
+
80
84
  render(
81
85
  <DatePicker
82
- id={id}
83
- label={labelText}
84
- maxDate={maxDate}
86
+ id={DATE_PICKER_ID}
87
+ label={LABEL_TEXT}
88
+ maxDate={MAX_DATE}
85
89
  />
86
90
  );
87
91
  const datePicker = screen.getAllByRole('generic')[1];
88
92
 
89
- expect(datePicker).toHaveAttribute('data-maxDate', maxDate);
93
+ expect(datePicker).toHaveAttribute('data-maxDate', MAX_DATE);
90
94
  });
91
95
 
92
96
  test('date picker with min date', () => {
93
- const minDate = '28/05/2023'
97
+ const MIN_DATE = '28/05/2023'
98
+
94
99
  render(
95
100
  <DatePicker
96
- id={id}
97
- label={labelText}
98
- minDate={minDate}
101
+ id={DATE_PICKER_ID}
102
+ label={LABEL_TEXT}
103
+ minDate={MIN_DATE}
99
104
  />
100
105
  );
101
106
  const datePicker = screen.getAllByRole('generic')[1];
102
107
 
103
- expect(datePicker).toHaveAttribute('data-mindate', minDate);
108
+ expect(datePicker).toHaveAttribute('data-mindate', MIN_DATE);
104
109
  });
105
110
 
106
111
  test('date picker with blur fn', () => {
107
- const onBlurFn = vi.fn();
112
+ const ONBLUR_FUNCTION = vi.fn();
113
+
108
114
  render(
109
115
  <DatePicker
110
- id={id}
111
- label={labelText}
112
- onBlur={onBlurFn}
116
+ id={DATE_PICKER_ID}
117
+ label={LABEL_TEXT}
118
+ onBlur={ONBLUR_FUNCTION}
113
119
  />
114
120
  );
115
121
  const datePicker = screen.getAllByRole('generic')[1];
@@ -117,16 +123,17 @@ test('date picker with blur fn', () => {
117
123
 
118
124
  fireEvent.blur(textInput);
119
125
 
120
- expect(onBlurFn).toHaveBeenCalled();
126
+ expect(ONBLUR_FUNCTION).toHaveBeenCalled();
121
127
  });
122
128
 
123
129
  test('date picker with change fn', () => {
124
- const onChangeFn = vi.fn();
130
+ const ONCHANGE_FUNCTION = vi.fn();
131
+
125
132
  render(
126
133
  <DatePicker
127
- id={id}
128
- label={labelText}
129
- onChange={onChangeFn}
134
+ id={DATE_PICKER_ID}
135
+ label={LABEL_TEXT}
136
+ onChange={ONCHANGE_FUNCTION}
130
137
  />
131
138
  );
132
139
  const datePicker = screen.getAllByRole('generic')[1];
@@ -134,32 +141,34 @@ test('date picker with change fn', () => {
134
141
 
135
142
  fireEvent.change(textInput, {target: {value: 'foo'}});
136
143
 
137
- expect(onChangeFn).toHaveBeenCalled();
144
+ expect(ONCHANGE_FUNCTION).toHaveBeenCalled();
138
145
  });
139
146
 
140
147
  test('date picker with initial value', () => {
141
- const initialValue = '28/05/2023';
148
+ const INITIAL_VALUE = '28/05/2023';
149
+
142
150
  render(
143
151
  <DatePicker
144
- id={id}
145
- label={labelText}
146
- value={initialValue}
152
+ id={DATE_PICKER_ID}
153
+ label={LABEL_TEXT}
154
+ value={INITIAL_VALUE}
147
155
  />
148
156
  );
149
157
  const datePicker = screen.getAllByRole('generic')[1];
150
158
  const textInput = within(datePicker).getByRole('textbox');
151
159
 
152
- expect(textInput).toHaveValue(initialValue);
160
+ expect(textInput).toHaveValue(INITIAL_VALUE);
153
161
  });
154
162
 
155
163
  test('date picker with multiple inputs', () => {
156
- const initialValue = '28/05/2023';
164
+ const INITIAL_VALUE = '28/05/2023';
165
+
157
166
  render(
158
167
  <DatePicker
159
- id={id}
160
- label={labelText}
168
+ id={DATE_PICKER_ID}
169
+ label={LABEL_TEXT}
161
170
  multiple
162
- value={initialValue}
171
+ value={INITIAL_VALUE}
163
172
  />
164
173
  );
165
174
 
@@ -174,13 +183,13 @@ test('date picker with multiple inputs', () => {
174
183
 
175
184
  expect(textInputs.length).toEqual(3);
176
185
 
177
- expect(dateInput).toHaveValue(initialValue.split('/')[0]);
178
- expect(monthInput).toHaveValue(initialValue.split('/')[1]);
179
- expect(yearInput).toHaveValue(initialValue.split('/')[2]);
186
+ expect(dateInput).toHaveValue(INITIAL_VALUE.split('/')[0]);
187
+ expect(monthInput).toHaveValue(INITIAL_VALUE.split('/')[1]);
188
+ expect(yearInput).toHaveValue(INITIAL_VALUE.split('/')[2]);
180
189
 
181
- expect(dateInput).toHaveAttribute('id', `${id}-day`);
182
- expect(monthInput).toHaveAttribute('id', `${id}-month`);
183
- expect(yearInput).toHaveAttribute('id', `${id}-year`);
190
+ expect(dateInput).toHaveAttribute('id', `${DATE_PICKER_ID}-day`);
191
+ expect(monthInput).toHaveAttribute('id', `${DATE_PICKER_ID}-month`);
192
+ expect(yearInput).toHaveAttribute('id', `${DATE_PICKER_ID}-year`);
184
193
 
185
194
  expect(dateInput).toHaveClass('ds_input', 'ds_input--fixed-2', 'js-datepicker-date');
186
195
  expect(monthInput).toHaveClass('ds_input', 'ds_input--fixed-2', 'js-datepicker-month');
@@ -196,18 +205,19 @@ test('date picker with multiple inputs', () => {
196
205
  });
197
206
 
198
207
  test('date picker with error message', () => {
199
- const errorMessage = 'This is a required field';
208
+ const ERROR_MESSAGE_TEXT = 'This is a required field';
209
+
200
210
  render(
201
211
  <DatePicker
202
- id={id}
203
- label={labelText}
212
+ id={DATE_PICKER_ID}
213
+ label={LABEL_TEXT}
204
214
  error
205
- errorMessage={errorMessage}
215
+ errorMessage={ERROR_MESSAGE_TEXT}
206
216
  />
207
217
  );
208
218
 
209
219
  const textInput = screen.getByRole('textbox');
210
- const errorMessageElement = screen.getByText(errorMessage);
220
+ const errorMessageElement = screen.getByText(ERROR_MESSAGE_TEXT);
211
221
 
212
222
  expect(textInput).toHaveClass('ds_input--error')
213
223
  expect(textInput).toHaveAttribute('aria-describedby', errorMessageElement.id);
@@ -219,8 +229,8 @@ test('date picker with error message', () => {
219
229
  test('passing additional props', () => {
220
230
  render(
221
231
  <DatePicker
222
- id={id}
223
- label={labelText}
232
+ id={DATE_PICKER_ID}
233
+ label={LABEL_TEXT}
224
234
  data-test="foo"
225
235
  />
226
236
  )
@@ -232,8 +242,8 @@ test('passing additional props', () => {
232
242
  test('passing additional CSS classes', () => {
233
243
  render(
234
244
  <DatePicker
235
- id={id}
236
- label={labelText}
245
+ id={DATE_PICKER_ID}
246
+ label={LABEL_TEXT}
237
247
  className="foo"
238
248
  />
239
249
  )
@@ -1,8 +1,8 @@
1
1
  import { useEffect, useRef } from 'react';
2
2
  // @ts-ignore
3
3
  import DSDatePicker from '@scottish-government/design-system/src/components/date-picker/date-picker';
4
- import ErrorMessage from '../error-message/error-message';
5
- import TextInput from '../text-input/text-input';
4
+ import ErrorMessage from '../ErrorMessage/ErrorMessage';
5
+ import TextInput from '../TextInput/TextInput';
6
6
 
7
7
  const DatePicker: React.FC<SGDS.Component.DatePicker> = ({
8
8
  className,
@@ -1,19 +1,19 @@
1
1
  import { test, expect } from 'vitest';
2
2
  import { render, screen } from '@testing-library/react';
3
- import Details from './details';
3
+ import Details from './Details';
4
4
 
5
- const summaryText = 'I can\'t sign in';
6
- const content = '<p>hello</p>';
5
+ const SUMARY_TEXT = 'I can\'t sign in';
6
+ const CONTENT = '<p>hello</p>';
7
7
 
8
8
  test('details renders correctly', () => {
9
9
 
10
10
  render(
11
- <Details summary={summaryText}>
11
+ <Details summary={SUMARY_TEXT}>
12
12
  <p>hello</p>
13
13
  </Details>
14
14
  );
15
15
 
16
- const summaryElement = screen.getByText(summaryText);
16
+ const summaryElement = screen.getByText(SUMARY_TEXT);
17
17
  const detailsElement = summaryElement.parentElement;
18
18
  const textElement = summaryElement.nextElementSibling;
19
19
 
@@ -22,29 +22,29 @@ test('details renders correctly', () => {
22
22
  expect(summaryElement).toHaveClass('ds_details__summary');
23
23
  expect(summaryElement?.tagName).toEqual('SUMMARY');
24
24
  expect(textElement).toHaveClass('ds_details__text');
25
- expect(textElement?.innerHTML).toEqual(content);
25
+ expect(textElement?.innerHTML).toEqual(CONTENT);
26
26
  });
27
27
 
28
28
  test('passing additional props', () => {
29
29
  render(
30
- <Details data-test="foo" summary={summaryText}>
30
+ <Details data-test="foo" summary={SUMARY_TEXT}>
31
31
  <p>hello</p>
32
32
  </Details>
33
33
  )
34
34
 
35
- const summaryElement = screen.getByText(summaryText);
35
+ const summaryElement = screen.getByText(SUMARY_TEXT);
36
36
  const detailsElement = summaryElement.parentElement;
37
37
  expect(detailsElement?.dataset.test).toEqual('foo');
38
38
  });
39
39
 
40
40
  test('passing additional CSS classes', () => {
41
41
  render(
42
- <Details className="foo" summary={summaryText}>
42
+ <Details className="foo" summary={SUMARY_TEXT}>
43
43
  <p>hello</p>
44
44
  </Details>
45
45
  )
46
46
 
47
- const summaryElement = screen.getByText(summaryText);
47
+ const summaryElement = screen.getByText(SUMARY_TEXT);
48
48
  const detailsElement = summaryElement.parentElement;
49
49
  expect(detailsElement).toHaveClass('foo', 'ds_details');
50
50
  });
@@ -1,28 +1,28 @@
1
1
  import { test, expect } from 'vitest';
2
2
  import { render, screen } from '@testing-library/react';
3
- import ErrorMessage from './error-message';
3
+ import ErrorMessage from './ErrorMessage';
4
4
 
5
- const errorText = 'Error message';
6
- const errorId = 'errormessage';
5
+ const ERROR_TEXT = 'Error message';
6
+ const ERROR_ID = 'errormessage';
7
7
 
8
8
  test('error message renders correctly', () => {
9
9
 
10
10
  render(
11
- <ErrorMessage text={errorText} id={errorId}/>
11
+ <ErrorMessage text={ERROR_TEXT} id={ERROR_ID}/>
12
12
  );
13
13
 
14
14
  const errorMessageElement = screen.getByRole('paragraph');
15
15
 
16
- expect(errorMessageElement).toHaveAttribute('id', errorId);
16
+ expect(errorMessageElement).toHaveAttribute('id', ERROR_ID);
17
17
  expect(errorMessageElement).toHaveClass('ds_question__error-message');
18
- expect(errorMessageElement.textContent).toEqual(errorText);
18
+ expect(errorMessageElement.textContent).toEqual(ERROR_TEXT);
19
19
  });
20
20
 
21
21
  test('error message with HTML content', () => {
22
- const errorId = 'errormessage';
22
+ const ERROR_ID = 'errormessage';
23
23
 
24
24
  render(
25
- <ErrorMessage id={errorId}>hello <a href="#foo">world</a></ErrorMessage>
25
+ <ErrorMessage id={ERROR_ID}>hello <a href="#foo">world</a></ErrorMessage>
26
26
  );
27
27
 
28
28
  const errorMessageElement = screen.getByRole('paragraph');
@@ -32,7 +32,7 @@ test('error message with HTML content', () => {
32
32
 
33
33
  test('passing additional props', () => {
34
34
  render(
35
- <ErrorMessage data-test="foo" text={errorText} id={errorId}/>
35
+ <ErrorMessage data-test="foo" text={ERROR_TEXT} id={ERROR_ID}/>
36
36
  )
37
37
 
38
38
  const errorMessageElement = screen.getByRole('paragraph');
@@ -41,7 +41,7 @@ test('passing additional props', () => {
41
41
 
42
42
  test('passing additional CSS classes', () => {
43
43
  render(
44
- <ErrorMessage className="foo" text={errorText} id={errorId}/>
44
+ <ErrorMessage className="foo" text={ERROR_TEXT} id={ERROR_ID}/>
45
45
  )
46
46
 
47
47
  const errorMessageElement = screen.getByRole('paragraph');
@@ -1,19 +1,18 @@
1
1
  import { test, expect } from 'vitest';
2
2
  import { render, screen, within } from '@testing-library/react';
3
- import ErrorSummary from './error-summary';
4
- import { title } from 'process';
3
+ import ErrorSummary from './ErrorSummary';
5
4
 
6
- const errors = [
5
+ const ERRORS = [
7
6
  { fragmentId: 'did-resolve', title: 'Did this resolve your issue?' },
8
7
  { fragmentId: 'what-topics', title: 'What topics are you interested in?' },
9
8
  { fragmentId: 'more-detail', title: 'Please provide more detail' }
10
9
  ];
11
10
 
12
11
  test('error summary renders correctly', () => {
13
- const titleId = 'error-summary-title';
12
+ const TITLE_ID = 'error-summary-title';
14
13
 
15
14
  render(
16
- <ErrorSummary data-testid="errorsummary" errors={errors} />
15
+ <ErrorSummary data-testid="errorsummary" errors={ERRORS} />
17
16
  );
18
17
 
19
18
  const errorSummaryElement = screen.getByTestId('errorsummary');
@@ -28,30 +27,30 @@ test('error summary renders correctly', () => {
28
27
  expect(errorSummaryElement.tagName).toEqual('DIV');
29
28
 
30
29
  expect(errorSummaryTitle).toHaveClass('ds_error-summary__title');
31
- expect(errorSummaryTitle).toHaveAttribute('id', titleId);
30
+ expect(errorSummaryTitle).toHaveAttribute('id', TITLE_ID);
32
31
  expect(errorSummaryTitle.tagName).toEqual('H2');
33
32
  expect(errorSummaryTitle.textContent).toEqual('There is a problem');
34
33
 
35
34
  expect(errorSummaryList).toHaveClass('ds_error-summary__list');
36
35
  expect(errorSummaryList.tagName).toEqual('UL');
37
36
 
38
- expect(errorSummaryItems.length).toEqual(errors.length);
37
+ expect(errorSummaryItems.length).toEqual(ERRORS.length);
39
38
 
40
- expect(errorSummaryLink1).toHaveAttribute('href', `#${errors[0].fragmentId}`);
41
- expect(errorSummaryLink1.textContent).toEqual(errors[0].title);
39
+ expect(errorSummaryLink1).toHaveAttribute('href', `#${ERRORS[0].fragmentId}`);
40
+ expect(errorSummaryLink1.textContent).toEqual(ERRORS[0].title);
42
41
  });
43
42
 
44
43
  test('error summary with custom title', () => {
45
- const title = 'Foo';
44
+ const TITLE_TEXT = 'Foo';
46
45
 
47
46
  render(
48
- <ErrorSummary data-testid="errorsummary" errors={errors} title={title} />
47
+ <ErrorSummary data-testid="errorsummary" errors={ERRORS} title={TITLE_TEXT} />
49
48
  );
50
49
 
51
50
  const errorSummaryElement = screen.getByTestId('errorsummary');
52
51
  const errorSummaryTitle = within(errorSummaryElement).getByRole('heading');
53
52
 
54
- expect(errorSummaryTitle.textContent).toEqual(title);
53
+ expect(errorSummaryTitle.textContent).toEqual(TITLE_TEXT);
55
54
  });
56
55
 
57
56
  test('error summary with no errors (empty array) should not display', () => {
@@ -89,7 +88,7 @@ test('error sumary item with no link', () => {
89
88
 
90
89
  test('passing additional props', () => {
91
90
  render(
92
- <ErrorSummary data-testid="errorsummary" errors={errors} data-test="foo" />
91
+ <ErrorSummary data-testid="errorsummary" errors={ERRORS} data-test="foo" />
93
92
  )
94
93
 
95
94
  const errorSummaryElement = screen.getByTestId('errorsummary');
@@ -98,7 +97,7 @@ test('passing additional props', () => {
98
97
 
99
98
  test('passing additional CSS classes', () => {
100
99
  render(
101
- <ErrorSummary data-testid="errorsummary" errors={errors} className="foo" />
100
+ <ErrorSummary data-testid="errorsummary" errors={ERRORS} className="foo" />
102
101
  )
103
102
 
104
103
  const errorSummaryElement = screen.getByTestId('errorsummary');
@@ -1,4 +1,4 @@
1
- import ConditionalWrapper from '../../common/conditional-wrapper';
1
+ import ConditionalWrapper from '../../common/ConditionalWrapper';
2
2
 
3
3
  const Error: React.FC<SGDS.Component.ErrorSummary.Error> = ({
4
4
  fragmentId,