@dxc-technology/halstack-react 0.0.0-301f60b → 0.0.0-309222c

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 (221) hide show
  1. package/HalstackContext.d.ts +12 -0
  2. package/HalstackContext.js +294 -0
  3. package/accordion/Accordion.d.ts +1 -1
  4. package/accordion/Accordion.js +121 -123
  5. package/accordion/Accordion.stories.tsx +13 -14
  6. package/accordion/Accordion.test.js +25 -11
  7. package/accordion/types.d.ts +9 -4
  8. package/accordion-group/AccordionGroup.d.ts +1 -1
  9. package/accordion-group/AccordionGroup.js +15 -36
  10. package/accordion-group/AccordionGroup.stories.tsx +28 -2
  11. package/accordion-group/AccordionGroup.test.js +30 -37
  12. package/accordion-group/types.d.ts +14 -3
  13. package/alert/Alert.js +5 -2
  14. package/badge/Badge.d.ts +1 -1
  15. package/badge/Badge.js +5 -3
  16. package/badge/types.d.ts +1 -0
  17. package/bleed/Bleed.js +1 -34
  18. package/bleed/Bleed.stories.tsx +94 -95
  19. package/bleed/types.d.ts +25 -1
  20. package/box/Box.js +23 -33
  21. package/box/types.d.ts +1 -0
  22. package/bulleted-list/BulletedList.d.ts +7 -0
  23. package/bulleted-list/BulletedList.js +123 -0
  24. package/bulleted-list/BulletedList.stories.tsx +200 -0
  25. package/bulleted-list/types.d.ts +11 -0
  26. package/{list → bulleted-list}/types.js +0 -0
  27. package/button/Button.js +53 -68
  28. package/button/Button.stories.tsx +9 -0
  29. package/button/types.d.ts +7 -7
  30. package/card/Card.js +24 -27
  31. package/card/types.d.ts +1 -0
  32. package/checkbox/Checkbox.d.ts +2 -2
  33. package/checkbox/Checkbox.js +106 -109
  34. package/checkbox/Checkbox.stories.tsx +146 -130
  35. package/checkbox/Checkbox.test.js +100 -10
  36. package/checkbox/types.d.ts +13 -5
  37. package/chip/types.d.ts +1 -1
  38. package/common/variables.js +236 -101
  39. package/date-input/DateInput.js +56 -42
  40. package/date-input/DateInput.stories.tsx +7 -7
  41. package/date-input/DateInput.test.js +161 -87
  42. package/date-input/types.d.ts +16 -9
  43. package/dialog/Dialog.js +46 -50
  44. package/dialog/Dialog.stories.tsx +57 -2
  45. package/dialog/Dialog.test.js +34 -4
  46. package/dialog/types.d.ts +3 -2
  47. package/dropdown/Dropdown.d.ts +1 -1
  48. package/dropdown/Dropdown.js +247 -251
  49. package/dropdown/Dropdown.stories.tsx +126 -63
  50. package/dropdown/Dropdown.test.js +504 -108
  51. package/dropdown/DropdownMenu.d.ts +4 -0
  52. package/dropdown/DropdownMenu.js +80 -0
  53. package/dropdown/DropdownMenuItem.d.ts +4 -0
  54. package/dropdown/DropdownMenuItem.js +92 -0
  55. package/dropdown/types.d.ts +25 -5
  56. package/file-input/FileInput.d.ts +2 -2
  57. package/file-input/FileInput.js +183 -222
  58. package/file-input/FileInput.stories.tsx +38 -10
  59. package/file-input/FileInput.test.js +53 -12
  60. package/file-input/FileItem.d.ts +4 -14
  61. package/file-input/FileItem.js +43 -66
  62. package/file-input/types.d.ts +17 -0
  63. package/flex/Flex.d.ts +4 -0
  64. package/flex/Flex.js +69 -0
  65. package/flex/Flex.stories.tsx +103 -0
  66. package/flex/types.d.ts +32 -0
  67. package/{radio → flex}/types.js +0 -0
  68. package/footer/Footer.js +15 -88
  69. package/footer/Footer.stories.tsx +8 -1
  70. package/footer/Icons.js +1 -1
  71. package/footer/types.d.ts +2 -1
  72. package/header/Header.js +95 -114
  73. package/header/Header.stories.tsx +46 -36
  74. package/header/Header.test.js +18 -2
  75. package/header/Icons.js +2 -2
  76. package/header/types.d.ts +3 -2
  77. package/inset/Inset.js +1 -34
  78. package/inset/Inset.stories.tsx +36 -36
  79. package/inset/types.d.ts +25 -1
  80. package/layout/ApplicationLayout.d.ts +16 -6
  81. package/layout/ApplicationLayout.js +71 -131
  82. package/layout/ApplicationLayout.stories.tsx +84 -93
  83. package/layout/Icons.d.ts +5 -0
  84. package/layout/Icons.js +13 -2
  85. package/layout/SidenavContext.d.ts +5 -0
  86. package/layout/SidenavContext.js +19 -0
  87. package/layout/types.d.ts +18 -33
  88. package/link/Link.d.ts +3 -2
  89. package/link/Link.js +58 -75
  90. package/link/Link.stories.tsx +95 -53
  91. package/link/Link.test.js +7 -15
  92. package/link/types.d.ts +7 -23
  93. package/main.d.ts +8 -10
  94. package/main.js +46 -56
  95. package/number-input/NumberInput.js +11 -18
  96. package/number-input/NumberInput.stories.tsx +5 -5
  97. package/number-input/NumberInput.test.js +45 -11
  98. package/number-input/types.d.ts +17 -10
  99. package/package.json +20 -16
  100. package/paginator/Paginator.js +17 -38
  101. package/paginator/Paginator.test.js +43 -1
  102. package/paragraph/Paragraph.d.ts +6 -0
  103. package/paragraph/Paragraph.js +38 -0
  104. package/paragraph/Paragraph.stories.tsx +44 -0
  105. package/password-input/PasswordInput.js +7 -4
  106. package/password-input/PasswordInput.test.js +16 -18
  107. package/password-input/types.d.ts +14 -11
  108. package/progress-bar/ProgressBar.d.ts +2 -2
  109. package/progress-bar/ProgressBar.js +57 -51
  110. package/progress-bar/ProgressBar.stories.jsx +13 -11
  111. package/progress-bar/ProgressBar.test.js +67 -22
  112. package/progress-bar/types.d.ts +3 -4
  113. package/quick-nav/QuickNav.d.ts +4 -0
  114. package/quick-nav/QuickNav.js +117 -0
  115. package/quick-nav/QuickNav.stories.tsx +342 -0
  116. package/quick-nav/types.d.ts +21 -0
  117. package/{row → quick-nav}/types.js +0 -0
  118. package/radio-group/Radio.d.ts +1 -1
  119. package/radio-group/Radio.js +43 -28
  120. package/radio-group/RadioGroup.js +30 -27
  121. package/radio-group/RadioGroup.stories.tsx +1 -0
  122. package/radio-group/RadioGroup.test.js +123 -96
  123. package/radio-group/types.d.ts +2 -2
  124. package/resultsetTable/ResultsetTable.js +1 -3
  125. package/resultsetTable/ResultsetTable.test.js +42 -0
  126. package/select/Listbox.d.ts +4 -0
  127. package/select/Listbox.js +198 -0
  128. package/select/Option.js +1 -1
  129. package/select/Select.js +131 -226
  130. package/select/Select.stories.tsx +160 -115
  131. package/select/Select.test.js +608 -275
  132. package/select/types.d.ts +40 -13
  133. package/sidenav/Sidenav.d.ts +6 -5
  134. package/sidenav/Sidenav.js +184 -52
  135. package/sidenav/Sidenav.stories.tsx +154 -156
  136. package/sidenav/Sidenav.test.js +25 -37
  137. package/sidenav/types.d.ts +50 -27
  138. package/slider/Slider.d.ts +2 -2
  139. package/slider/Slider.js +122 -96
  140. package/slider/Slider.stories.tsx +15 -9
  141. package/slider/Slider.test.js +142 -21
  142. package/slider/types.d.ts +10 -2
  143. package/spinner/Spinner.js +1 -1
  144. package/switch/Switch.d.ts +2 -2
  145. package/switch/Switch.js +150 -67
  146. package/switch/Switch.stories.tsx +20 -42
  147. package/switch/Switch.test.js +155 -3
  148. package/switch/types.d.ts +12 -4
  149. package/table/Table.js +1 -1
  150. package/table/Table.test.js +1 -1
  151. package/tabs/Tab.d.ts +4 -0
  152. package/tabs/Tab.js +135 -0
  153. package/tabs/Tabs.d.ts +1 -1
  154. package/tabs/Tabs.js +362 -108
  155. package/tabs/Tabs.stories.tsx +74 -8
  156. package/tabs/Tabs.test.js +241 -13
  157. package/tabs/types.d.ts +19 -5
  158. package/tabs-nav/NavTabs.d.ts +8 -0
  159. package/tabs-nav/NavTabs.js +125 -0
  160. package/tabs-nav/NavTabs.stories.tsx +170 -0
  161. package/tabs-nav/NavTabs.test.js +82 -0
  162. package/tabs-nav/Tab.d.ts +4 -0
  163. package/tabs-nav/Tab.js +130 -0
  164. package/tabs-nav/types.d.ts +53 -0
  165. package/{stack → tabs-nav}/types.js +0 -0
  166. package/tag/Tag.js +15 -20
  167. package/tag/Tag.stories.tsx +12 -8
  168. package/tag/types.d.ts +1 -1
  169. package/text-input/Icons.d.ts +8 -0
  170. package/text-input/Icons.js +60 -0
  171. package/text-input/Suggestion.d.ts +4 -0
  172. package/text-input/Suggestion.js +57 -0
  173. package/text-input/Suggestions.d.ts +4 -0
  174. package/text-input/Suggestions.js +134 -0
  175. package/text-input/TextInput.js +213 -334
  176. package/text-input/TextInput.stories.tsx +189 -182
  177. package/text-input/TextInput.test.js +659 -760
  178. package/text-input/types.d.ts +46 -12
  179. package/textarea/Textarea.js +12 -23
  180. package/textarea/Textarea.test.js +10 -20
  181. package/textarea/types.d.ts +14 -11
  182. package/toggle-group/ToggleGroup.d.ts +1 -1
  183. package/toggle-group/ToggleGroup.js +5 -4
  184. package/toggle-group/ToggleGroup.stories.tsx +4 -4
  185. package/toggle-group/ToggleGroup.test.js +35 -4
  186. package/toggle-group/types.d.ts +9 -1
  187. package/typography/Typography.d.ts +4 -0
  188. package/typography/Typography.js +131 -0
  189. package/typography/Typography.stories.tsx +198 -0
  190. package/typography/types.d.ts +18 -0
  191. package/typography/types.js +5 -0
  192. package/useTheme.js +2 -2
  193. package/useTranslatedLabels.d.ts +2 -0
  194. package/useTranslatedLabels.js +20 -0
  195. package/wizard/Wizard.d.ts +1 -1
  196. package/wizard/Wizard.js +58 -54
  197. package/wizard/Wizard.stories.tsx +33 -24
  198. package/wizard/Wizard.test.js +36 -23
  199. package/wizard/types.d.ts +10 -5
  200. package/ThemeContext.d.ts +0 -10
  201. package/ThemeContext.js +0 -243
  202. package/list/List.d.ts +0 -4
  203. package/list/List.js +0 -47
  204. package/list/List.stories.tsx +0 -95
  205. package/list/types.d.ts +0 -7
  206. package/radio/Radio.d.ts +0 -4
  207. package/radio/Radio.js +0 -174
  208. package/radio/Radio.stories.tsx +0 -192
  209. package/radio/Radio.test.js +0 -71
  210. package/radio/types.d.ts +0 -54
  211. package/row/Row.d.ts +0 -3
  212. package/row/Row.js +0 -127
  213. package/row/Row.stories.tsx +0 -237
  214. package/row/types.d.ts +0 -10
  215. package/stack/Stack.d.ts +0 -3
  216. package/stack/Stack.js +0 -97
  217. package/stack/Stack.stories.tsx +0 -164
  218. package/stack/types.d.ts +0 -9
  219. package/text/Text.d.ts +0 -7
  220. package/text/Text.js +0 -30
  221. package/text/Text.stories.tsx +0 -19
@@ -3,9 +3,9 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.typeface = exports.spaces = exports.responsiveSizes = exports.globalTokens = exports.componentTokens = void 0;
6
+ exports.typeface = exports.spaces = exports.responsiveSizes = exports.globalTokens = exports.defaultTranslatedComponentLabels = exports.componentTokens = void 0;
7
7
  var globalTokens = {
8
- // Color
8
+ // Color
9
9
  inherit: "inherit",
10
10
  transparent: "transparent",
11
11
  hal_white: "#ffffff",
@@ -19,12 +19,15 @@ var globalTokens = {
19
19
  color_grey_800: "#4d4d4d",
20
20
  color_grey_600: "#808080",
21
21
  color_grey_50: "#fafafa",
22
+ color_grey_a_100: "#0000000d",
23
+ color_grey_a_300: "#00000033",
22
24
  hal_purple_l_95: "#f2eafa",
23
25
  hal_purple_l_90: "#e5d5f6",
24
26
  hal_purple_l_65: "#a46ede",
25
27
  hal_purple_s_38: "#5f249f",
26
28
  hal_purple_d_30: "#4b1c7d",
27
29
  hal_purple_d_20: "#321353",
30
+ hal_purple_d_70: "#9A6BB2",
28
31
  color_purple_600: "#7D2FD0",
29
32
  color_purple_300: "#cbacec",
30
33
  hal_blue_l_95: "#e6f4ff",
@@ -107,7 +110,7 @@ var globalTokens = {
107
110
  type_normal: "normal",
108
111
  type_spacing_tight_02: "-0.05em",
109
112
  type_spacing_tight_01: "-0.025em",
110
- type_spacing_normal: "0",
113
+ type_spacing_normal: "0em",
111
114
  type_spacing_wide_01: "0.025em",
112
115
  type_spacing_wide_02: "0.05em",
113
116
  type_spacing_wide_03: "0.1em",
@@ -176,13 +179,13 @@ var componentTokens = {
176
179
  titleLabelFontStyle: globalTokens.type_normal,
177
180
  titleLabelFontColor: globalTokens.hal_black,
178
181
  disabledTitleLabelFontColor: globalTokens.hal_grey_l_60,
179
- titleLabelPaddingLeft: "0px",
180
- titleLabelPaddingRight: "16px",
181
182
  titleLabelPaddingTop: "0px",
182
183
  titleLabelPaddingBottom: "0px",
184
+ titleLabelPaddingLeft: "0px",
185
+ titleLabelPaddingRight: "16px",
186
+ focusBorderColor: globalTokens.hal_blue_l_50,
183
187
  focusBorderStyle: "solid",
184
188
  focusBorderThickness: "2px",
185
- focusBorderColor: globalTokens.hal_blue_l_50,
186
189
  borderRadius: "4px",
187
190
  boxShadowOffsetX: "0px",
188
191
  boxShadowOffsetY: "6px",
@@ -236,7 +239,7 @@ var componentTokens = {
236
239
  successBackgroundColor: globalTokens.hal_green_l_95,
237
240
  warningBackgroundColor: globalTokens.hal_yellow_l_95,
238
241
  errorBackgroundColor: globalTokens.hal_red_l_95,
239
- hoverActionBackgroundColor: "#0000000D",
242
+ hoverActionBackgroundColor: globalTokens.color_grey_a_100,
240
243
  activeActionBackgroundColor: "#0000001A",
241
244
  focusActionBorderColor: globalTokens.hal_blue_l_50,
242
245
  overlayColor: "#000000B3"
@@ -257,12 +260,21 @@ var componentTokens = {
257
260
  oneShadowDepthShadowOffsetY: "3px",
258
261
  oneShadowDepthShadowBlur: "6px",
259
262
  oneShadowDepthShadowSpread: "0px",
260
- oneShadowDepthShadowColor: "#00000033",
263
+ oneShadowDepthShadowColor: globalTokens.color_grey_a_300,
261
264
  twoShadowDepthShadowOffsetX: "0px",
262
265
  twoShadowDepthShadowOffsetY: "3px",
263
266
  twoShadowDepthShadowBlur: "10px",
264
267
  twoShadowDepthShadowSpread: "0px",
265
- twoShadowDepthShadowColor: "#00000033"
268
+ twoShadowDepthShadowColor: globalTokens.color_grey_a_300
269
+ },
270
+ bulletedList: {
271
+ fontColor: globalTokens.hal_black,
272
+ fontColorOnDark: globalTokens.hal_white,
273
+ bulletIconHeight: "1.5rem",
274
+ bulletIconWidth: "1.5rem",
275
+ bulletHeight: "5px",
276
+ bulletWidth: "5px",
277
+ bulletMarginRight: "0.5rem"
266
278
  },
267
279
  button: {
268
280
  labelFontLineHeight: globalTokens.type_leading_normal,
@@ -342,7 +354,7 @@ var componentTokens = {
342
354
  backgroundColorChecked: globalTokens.hal_blue_s_35,
343
355
  backgroundColorCheckedOnDark: globalTokens.hal_grey_l_90,
344
356
  hoverBackgroundColorChecked: globalTokens.hal_blue_d_20,
345
- hoverBackgroundColorCheckedOnDark: global.hal_white,
357
+ hoverBackgroundColorCheckedOnDark: globalTokens.hal_white,
346
358
  disabledBackgroundColorChecked: globalTokens.hal_grey_l_60,
347
359
  disabledBackgroundColorCheckedOnDark: globalTokens.color_grey_800,
348
360
  borderColor: globalTokens.hal_blue_s_35,
@@ -423,7 +435,10 @@ var componentTokens = {
423
435
  boxShadowOffsetY: "1px",
424
436
  boxShadowBlur: "3px",
425
437
  boxShadowColor: "rgba(0, 0, 0, 0.2)",
426
- overlayOpacity: "0.7"
438
+ overlayOpacity: "0.7",
439
+ fontFamily: globalTokens.type_sans,
440
+ fontSize: globalTokens.type_scale_03,
441
+ fontWeight: globalTokens.type_regular
427
442
  },
428
443
  dropdown: {
429
444
  buttonBackgroundColor: globalTokens.hal_white,
@@ -483,14 +498,13 @@ var componentTokens = {
483
498
  focusDropBorderColor: globalTokens.hal_blue_l_50,
484
499
  disabledDropBorderColor: globalTokens.hal_grey_l_60,
485
500
  dragoverDropBackgroundColor: globalTokens.color_blue_50,
486
- hoverFileItemIconBackgroundColor: globalTokens.hal_grey_l_95,
487
501
  activeFileItemIconBackgrounColor: globalTokens.hal_grey_l_80,
488
502
  errorFileItemBorderColor: globalTokens.hal_red_s_41,
489
503
  errorFileItemBackgroundColor: globalTokens.color_red_50,
490
- errorFileItemIconBackgroundColor: globalTokens.color_red_700,
504
+ errorFilePreviewBackgroundColor: globalTokens.color_red_700,
491
505
  errorFileItemIconColor: globalTokens.hal_red_s_41,
492
506
  fileItemIconBackgroundColor: globalTokens.hal_grey_l_95,
493
- fileItemIconColor: globalTokens.color_grey_600,
507
+ deleteFileItemColor: globalTokens.hal_black,
494
508
  errorMessageFontColor: globalTokens.hal_red_s_41,
495
509
  labelFontFamily: globalTokens.type_sans,
496
510
  labelFontSize: globalTokens.type_scale_02,
@@ -517,9 +531,12 @@ var componentTokens = {
517
531
  fileItemBorderThickness: globalTokens.border_width_1,
518
532
  fileItemBorderStyle: globalTokens.border_solid,
519
533
  fileItemBorderRadius: globalTokens.border_radius_medium,
520
- hoverDeleteFileItemBackgroundColor: "#0000000d",
521
- activeDeleteFileItemBackgroundColor: "#00000033",
522
- focusActionBorderColor: globalTokens.hal_blue_l_50
534
+ hoverDeleteFileItemBackgroundColor: globalTokens.color_grey_a_100,
535
+ activeDeleteFileItemBackgroundColor: globalTokens.color_grey_a_300,
536
+ focusDeleteFileItemBorderColor: globalTokens.hal_blue_l_50,
537
+ filePreviewBackgroundColor: globalTokens.hal_grey_l_95,
538
+ filePreviewIconColor: globalTokens.color_grey_600,
539
+ errorFilePreviewIconColor: globalTokens.hal_red_s_41
523
540
  },
524
541
  footer: {
525
542
  height: "124px",
@@ -712,7 +729,7 @@ var componentTokens = {
712
729
  link: {
713
730
  fontColor: globalTokens.hal_blue_s_35,
714
731
  fontFamily: globalTokens.inherit,
715
- fontSize: globalTokens.type_scale_root,
732
+ fontSize: globalTokens.inherit,
716
733
  fontStyle: globalTokens.type_normal,
717
734
  fontWeight: globalTokens.type_regular,
718
735
  iconSize: "16px",
@@ -729,6 +746,13 @@ var componentTokens = {
729
746
  activeUnderlineColor: globalTokens.black,
730
747
  focusColor: globalTokens.hal_blue_l_50
731
748
  },
749
+ paragraph: {
750
+ fontColor: globalTokens.hal_black,
751
+ fontColorOnDark: globalTokens.hal_white,
752
+ display: "block",
753
+ fontSize: globalTokens.type_scale_03,
754
+ fontWeight: globalTokens.type_regular
755
+ },
732
756
  paginator: {
733
757
  backgroundColor: globalTokens.darkWhite,
734
758
  fontColor: globalTokens.hal_black,
@@ -737,15 +761,15 @@ var componentTokens = {
737
761
  fontStyle: globalTokens.type_normal,
738
762
  fontWeight: globalTokens.type_regular,
739
763
  fontTextTransform: "none",
740
- height: "64px",
741
- width: "100%",
764
+ verticalPadding: "0.75rem",
765
+ horizontalPadding: "2rem",
742
766
  marginRight: "40px",
743
767
  marginLeft: "20px",
744
768
  itemsPerPageSelectorMarginLeft: "0px",
745
- itemsPerPageSelectorMarginRight: "30px",
769
+ itemsPerPageSelectorMarginRight: "0.5rem",
746
770
  pageSelectorMarginRight: "30px",
747
771
  pageSelectorMarginLeft: "0px",
748
- totalItemsContainerMarginRight: "30px",
772
+ totalItemsContainerMarginRight: "2.5rem",
749
773
  totalItemsContainerMarginLeft: "0px"
750
774
  },
751
775
  progressBar: {
@@ -777,21 +801,20 @@ var componentTokens = {
777
801
  overlayColor: globalTokens.black,
778
802
  overlayOpacity: "0.8"
779
803
  },
780
- radio: {
781
- circleLabelSpacing: "10px",
782
- circleSize: "24px",
783
- color: globalTokens.black,
784
- colorOnDark: globalTokens.white,
785
- disabledColor: globalTokens.lighterBlack,
786
- disabledColorOnDark: "#575757",
787
- disabledFontColor: globalTokens.lighterBlack,
788
- disabledFontColorOnDark: "#575757",
789
- focusColor: globalTokens.hal_blue_l_50,
790
- focusColorOnDark: "#1682FF",
791
- fontColor: globalTokens.inherit,
792
- fontColorOnDark: globalTokens.white,
804
+ quickNav: {
805
+ fontColor: globalTokens.hal_grey_s_40,
806
+ hoverFontColor: globalTokens.hal_purple_d_70,
807
+ dividerBorderColor: globalTokens.hal_grey_l_75,
808
+ focusBorderColor: globalTokens.hal_blue_l_50,
809
+ focusBorderStyle: globalTokens.border_solid,
810
+ focusBorderThickness: globalTokens.border_width_2,
811
+ focusBorderRadius: globalTokens.border_width_2,
812
+ paddingTop: globalTokens.spacing_03,
813
+ paddingBottom: globalTokens.spacing_03,
814
+ paddingLeft: globalTokens.spacing_05,
815
+ paddingRight: globalTokens.spacing_05,
793
816
  fontFamily: globalTokens.type_sans,
794
- fontSize: globalTokens.type_scale_root,
817
+ fontSize: globalTokens.type_scale_02,
795
818
  fontStyle: globalTokens.type_normal,
796
819
  fontWeight: globalTokens.type_regular
797
820
  },
@@ -905,24 +928,35 @@ var componentTokens = {
905
928
  arrowContainerColor: globalTokens.hal_grey_l_90,
906
929
  arrowColor: globalTokens.hal_black,
907
930
  titleFontFamily: globalTokens.type_sans,
908
- titleFontSize: globalTokens.type_scale_05,
931
+ titleFontSize: globalTokens.type_scale_04,
909
932
  titleFontStyle: globalTokens.type_normal,
910
- titleFontWeight: globalTokens.type_regular,
911
- titleFontColor: globalTokens.hal_black,
933
+ titleFontWeight: globalTokens.type_semibold,
934
+ titleFontColor: globalTokens.color_grey_800,
912
935
  titleFontTextTransform: "none",
913
936
  titleFontLetterSpacing: globalTokens.type_spacing_normal,
914
- subtitleFontFamily: globalTokens.type_sans,
915
- subtitleFontSize: globalTokens.type_scale_03,
916
- subtitleFontStyle: globalTokens.type_normal,
917
- subtitleFontWeight: globalTokens.type_regular,
918
- subtitleFontColor: globalTokens.color_grey_800,
919
- subtitleFontTextTransform: globalTokens.type_uppercase,
920
- subtitleFontLetterSpacing: globalTokens.type_spacing_wide_02,
937
+ groupTitleFontFamily: globalTokens.type_sans,
938
+ groupTitleFontSize: globalTokens.type_scale_02,
939
+ groupTitleFontStyle: globalTokens.type_normal,
940
+ groupTitleFontWeight: globalTokens.type_semibold,
941
+ groupTitleFontColor: globalTokens.black,
942
+ groupTitleHoverBackgroundColor: globalTokens.hal_grey_l_90,
943
+ groupTitleActiveBackgroundColor: globalTokens.hal_grey_l_80,
944
+ groupTitleSelectedFontColor: globalTokens.white,
945
+ groupTitleSelectedBackgroundColor: globalTokens.color_grey_800,
946
+ groupTitleSelectedHoverFontColor: globalTokens.white,
947
+ groupTitleSelectedHoverBackgroundColor: globalTokens.color_grey_600,
948
+ groupTitleFontTextTransform: globalTokens.type_uppercase,
949
+ groupTitleFontLetterSpacing: globalTokens.type_spacing_wide_02,
921
950
  linkFontFamily: globalTokens.type_sans,
922
951
  linkFontSize: globalTokens.type_scale_02,
923
952
  linkFontStyle: globalTokens.type_normal,
924
953
  linkFontWeight: globalTokens.type_regular,
925
954
  linkFontColor: globalTokens.color_grey_800,
955
+ linkHoverBackgroundColor: globalTokens.hal_grey_l_90,
956
+ linkSelectedFontColor: globalTokens.white,
957
+ linkSelectedBackgroundColor: globalTokens.color_grey_800,
958
+ linkSelectedHoverFontColor: globalTokens.white,
959
+ linkSelectedHoverBackgroundColor: globalTokens.color_grey_600,
926
960
  linkFontTextTransform: "none",
927
961
  linkFontLetterSpacing: globalTokens.type_spacing_wide_01,
928
962
  linkTextDecoration: globalTokens.type_no_line,
@@ -990,7 +1024,7 @@ var componentTokens = {
990
1024
  trackLineColorOnDark: globalTokens.hal_blue_l_50,
991
1025
  totalLineThickness: "2px",
992
1026
  totalLineVerticalPosition: "50%",
993
- totalLineColor: globalTokens.hal_grey_l_90,
1027
+ totalLineColor: "#0000001a",
994
1028
  totalLineColorOnDark: globalTokens.hal_grey_l_75,
995
1029
  disabledThumbVerticalPosition: "10px",
996
1030
  disabledThumbBackgroundColor: globalTokens.hal_grey_l_60,
@@ -1010,7 +1044,7 @@ var componentTokens = {
1010
1044
  },
1011
1045
  spinner: {
1012
1046
  trackCircleColor: "#5f249f",
1013
- trackCircleColorOnDark: "#a46ede",
1047
+ trackCircleColorOverlay: "#a46ede",
1014
1048
  totalCircleColor: globalTokens.white,
1015
1049
  labelFontFamily: globalTokens.type_sans,
1016
1050
  labelFontSize: globalTokens.type_scale_02,
@@ -1071,10 +1105,10 @@ var componentTokens = {
1071
1105
  thumbFocusColorOnDark: "#1682FF",
1072
1106
  thumbHeight: "24px",
1073
1107
  thumbWidth: "24px",
1074
- thumbShift: "40%",
1108
+ thumbShift: "1.25rem",
1075
1109
  trackHeight: "12px",
1076
- trackWidth: "60px",
1077
- spaceBetweenLabelSwitch: "0px"
1110
+ trackWidth: "36px",
1111
+ spaceBetweenLabelSwitch: "8px"
1078
1112
  },
1079
1113
  tag: {
1080
1114
  fontFamily: globalTokens.type_sans,
@@ -1145,6 +1179,7 @@ var componentTokens = {
1145
1179
  disabledFontColor: "#999999",
1146
1180
  disabledIconColor: "#999999",
1147
1181
  disabledFontStyle: globalTokens.type_normal,
1182
+ disabledBadgeBackgroundColor: "#0000004D",
1148
1183
  hoverBackgroundColor: "#f2eafa",
1149
1184
  pressedBackgroundColor: "#e5d5f6",
1150
1185
  pressedFontWeight: globalTokens.type_semibold,
@@ -1264,57 +1299,64 @@ var componentTokens = {
1264
1299
  optionFocusBorderThickness: globalTokens.border_width_2
1265
1300
  },
1266
1301
  wizard: {
1267
- disabledBackgroundColor: globalTokens.lightGrey,
1268
- disabledFontColor: globalTokens.darkGrey,
1269
- stepContainerFontSize: globalTokens.type_scale_03,
1270
- stepContainerFontFamily: globalTokens.type_sans,
1271
- stepContainerFontStyle: globalTokens.type_normal,
1272
- stepContainerFontWeight: globalTokens.type_regular,
1273
- stepContainerLetterSpacing: globalTokens.type_spacing_wide_02,
1274
- stepContainerFontColor: globalTokens.black,
1275
- stepContainerSelectedFontColor: globalTokens.white,
1276
- stepContainerSelectedBackgroundColor: globalTokens.hal_purple_s_38,
1277
- stepContainerBackgroundColor: globalTokens.white,
1278
- stepContainerIconSize: "19px",
1302
+ visitedStepFontColor: globalTokens.hal_black,
1303
+ visitedStepBackgroundColor: globalTokens.hal_white,
1304
+ visitedStepBorderColor: globalTokens.hal_black,
1305
+ unvisitedStepFontColor: globalTokens.hal_grey_s_40,
1306
+ unvisitedLabelFontColor: globalTokens.hal_grey_s_40,
1307
+ unvisitedHelperTextFontColor: globalTokens.hal_grey_s_40,
1308
+ unvisitedStepBackgroundColor: globalTokens.transparent,
1309
+ unvisitedStepBorderColor: globalTokens.hal_grey_s_40,
1310
+ selectedStepFontColor: globalTokens.white,
1311
+ selectedStepBackgroundColor: globalTokens.hal_purple_s_38,
1312
+ selectedStepBorderColor: globalTokens.hal_purple_s_38,
1313
+ selectedLabelFontColor: globalTokens.hal_black,
1314
+ selectedHelperTextFontColor: globalTokens.hal_black,
1315
+ selectedStepWidth: "32px",
1316
+ selectedStepHeight: "32px",
1317
+ selectedStepBorderThickness: "2px",
1318
+ selectedStepBorderStyle: "solid",
1319
+ selectedStepBorderRadius: "45px",
1320
+ stepFontSize: globalTokens.type_scale_03,
1321
+ stepFontFamily: globalTokens.type_sans,
1322
+ stepFontStyle: globalTokens.type_normal,
1323
+ stepFontWeight: globalTokens.type_regular,
1324
+ stepFontTracking: globalTokens.type_spacing_wide_02,
1325
+ stepIconSize: "20px",
1326
+ stepWidth: "32px",
1327
+ stepHeight: "32px",
1328
+ stepBorderThickness: "2px",
1329
+ stepBorderStyle: "solid",
1330
+ stepBorderRadius: "45px",
1331
+ visitedLabelFontColor: globalTokens.hal_black,
1279
1332
  labelFontSize: globalTokens.type_scale_03,
1280
1333
  labelFontFamily: globalTokens.type_sans,
1281
1334
  labelFontStyle: globalTokens.type_normal,
1282
1335
  labelFontWeight: globalTokens.type_regular,
1283
- labelLetterSpacing: globalTokens.type_spacing_normal,
1336
+ labelFontTracking: globalTokens.type_spacing_normal,
1284
1337
  labelFontTextTransform: "none",
1285
1338
  labelTextAlign: "left",
1286
- labelFontColor: globalTokens.darkGrey,
1287
- visitedLabelFontColor: globalTokens.black,
1288
- visitedDescriptionFontColor: globalTokens.black,
1289
- descriptionFontSize: globalTokens.type_scale_01,
1290
- descriptionFontFamily: globalTokens.type_sans,
1291
- descriptionFontStyle: globalTokens.type_normal,
1292
- descriptionFontWeight: globalTokens.type_regular,
1293
- descriptionLetterSpacing: globalTokens.type_spacing_wide_01,
1294
- descriptionFontTextTransform: "none",
1295
- descriptionFontColor: globalTokens.darkGrey,
1296
- descriptionTextAlign: "left",
1297
- circleWidth: "32px",
1298
- circleHeight: "32px",
1299
- circleBorderThickness: "2px",
1300
- circleBorderStyle: "solid",
1301
- circleBorderRadius: "45px",
1302
- circleBorderColor: globalTokens.black,
1303
- selectedCircleWidth: "32px",
1304
- selectedCircleHeight: "32px",
1305
- selectedCircleBorderThickness: "2px",
1306
- selectedCircleBorderStyle: "solid",
1307
- selectedCircleBorderRadius: "45px",
1308
- selectedCircleBorderColor: globalTokens.purple,
1309
- disabledCircleWidth: "32px",
1310
- disabledCircleHeight: "32px",
1311
- disabledCircleBorderThickness: "2px",
1312
- disabledCircleBorderStyle: "solid",
1313
- disabledCircleBorderRadius: "45px",
1314
- disabledCircleBorderColor: globalTokens.lightGrey,
1339
+ helperTextFontSize: globalTokens.type_scale_02,
1340
+ helperTextFontFamily: globalTokens.type_sans,
1341
+ helperTextFontStyle: globalTokens.type_normal,
1342
+ helperTextFontWeight: globalTokens.type_regular,
1343
+ helperTextFontTracking: globalTokens.type_spacing_normal,
1344
+ helperTextFontTextTransform: "none",
1345
+ visitedHelperTextFontColor: globalTokens.hal_black,
1346
+ helperTextTextAlign: "left",
1347
+ disabledStepBackgroundColor: globalTokens.hal_grey_l_95,
1348
+ disabledStepFontColor: globalTokens.hal_grey_l_60,
1349
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
1350
+ disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
1351
+ disabledStepBorderColor: globalTokens.hal_grey_l_95,
1352
+ disabledStepWidth: "32px",
1353
+ disabledStepHeight: "32px",
1354
+ disabledStepBorderThickness: "2px",
1355
+ disabledStepBorderStyle: "solid",
1356
+ disabledStepBorderRadius: "45px",
1315
1357
  separatorBorderThickness: "1px",
1316
1358
  separatorBorderStyle: "solid",
1317
- separatorColor: globalTokens.lightGrey,
1359
+ separatorColor: globalTokens.hal_grey_s_40,
1318
1360
  focusColor: globalTokens.hal_blue_l_50
1319
1361
  }
1320
1362
  };
@@ -1330,12 +1372,11 @@ var spaces = {
1330
1372
  };
1331
1373
  exports.spaces = spaces;
1332
1374
  var responsiveSizes = {
1333
- mobileSmall: "320",
1334
- mobileMedium: "375",
1335
- mobileLarge: "425",
1336
- tablet: "768",
1337
- laptop: "1024",
1338
- desktop: "1440"
1375
+ xsmall: "20",
1376
+ small: "30",
1377
+ medium: "45",
1378
+ large: "66",
1379
+ xlarge: "90"
1339
1380
  };
1340
1381
  exports.responsiveSizes = responsiveSizes;
1341
1382
  var typeface = {
@@ -1370,4 +1411,98 @@ var typeface = {
1370
1411
  textTransform: "uppercase"
1371
1412
  }
1372
1413
  };
1373
- exports.typeface = typeface;
1414
+ exports.typeface = typeface;
1415
+ var defaultTranslatedComponentLabels = {
1416
+ formFields: {
1417
+ optionalLabel: "(Optional)",
1418
+ requiredSelectionErrorMessage: "This field is required. Please, choose an option.",
1419
+ requiredValueErrorMessage: "This field is required. Please, enter a value.",
1420
+ formatRequestedErrorMessage: "Please match the format requested.",
1421
+ lengthErrorMessage: function lengthErrorMessage(minLength, maxLength) {
1422
+ return "Min length ".concat(minLength, ", max length ").concat(maxLength, ".");
1423
+ },
1424
+ logoAlternativeText: "Logo"
1425
+ },
1426
+ applicationLayout: {
1427
+ visibilityToggleTitle: "Toggle visibility sidenav"
1428
+ },
1429
+ alert: {
1430
+ infoTitleText: "information",
1431
+ successTitleText: "success",
1432
+ warningTitleText: "warning",
1433
+ errorTitleText: "error"
1434
+ },
1435
+ dateInput: {
1436
+ invalidDateErrorMessage: "Invalid date."
1437
+ },
1438
+ fileInput: {
1439
+ fileSizeGreaterThanErrorMessage: "File size must be greater than min size.",
1440
+ fileSizeLessThanErrorMessage: "File size must be less than max size.",
1441
+ multipleButtonLabelDefault: "Select files",
1442
+ singleButtonLabelDefault: "Select file",
1443
+ dropAreaButtonLabelDefault: "Select",
1444
+ multipleDropAreaLabelDefault: "or drop files",
1445
+ singleDropAreaLabelDefault: "or drop a file",
1446
+ deleteFileActionTitle: "Remove file"
1447
+ },
1448
+ footer: {
1449
+ copyrightText: function copyrightText(year) {
1450
+ return "\xA9 DXC Technology ".concat(year, ". All rights reserved.");
1451
+ }
1452
+ },
1453
+ header: {
1454
+ closeIcon: "Close menu",
1455
+ hamburguerTitle: "Menu"
1456
+ },
1457
+ numberInput: {
1458
+ valueGreaterThanOrEqualToErrorMessage: function valueGreaterThanOrEqualToErrorMessage(value) {
1459
+ return "Value must be greater than or equal to ".concat(value, ".");
1460
+ },
1461
+ valueLessThanOrEqualToErrorMessage: function valueLessThanOrEqualToErrorMessage(value) {
1462
+ return "Value must be less than or equal to ".concat(value, ".");
1463
+ },
1464
+ decrementValueTitle: "Decrement value",
1465
+ incrementValueTitle: "Increment value"
1466
+ },
1467
+ paginator: {
1468
+ itemsPerPageText: "Items per page: ",
1469
+ minToMaxOfText: function minToMaxOfText(minNumberOfItems, maxNumberOfItems, totalItems) {
1470
+ return "".concat(minNumberOfItems, " to ").concat(maxNumberOfItems, " of ").concat(totalItems);
1471
+ },
1472
+ goToPageText: "Go to page:",
1473
+ pageOfText: function pageOfText(pageNumber, totalPagesNumber) {
1474
+ return "Page: ".concat(pageNumber, " of ").concat(totalPagesNumber);
1475
+ }
1476
+ },
1477
+ passwordInput: {
1478
+ inputShowPasswordTitle: "Show password",
1479
+ inputHidePasswordTitle: "Hide password"
1480
+ },
1481
+ quickNav: {
1482
+ contentTitle: "Contents"
1483
+ },
1484
+ radioGroup: {
1485
+ optionalItemLabelDefault: "N/A"
1486
+ },
1487
+ select: {
1488
+ noMatchesErrorMessage: "No matches found",
1489
+ actionClearSelectionTitle: "Clear selection",
1490
+ actionClearSearchTitle: "Clear search"
1491
+ },
1492
+ tabs: {
1493
+ scrollLeft: "Scroll left",
1494
+ scrollRight: "Scroll right"
1495
+ },
1496
+ textInput: {
1497
+ clearFieldActionTitle: "Clear field",
1498
+ searchingMessage: "Searching...",
1499
+ fetchingDataErrorMessage: "Error fetching data"
1500
+ },
1501
+ calendar: {
1502
+ days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
1503
+ daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
1504
+ months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
1505
+ monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
1506
+ }
1507
+ };
1508
+ exports.defaultTranslatedComponentLabels = defaultTranslatedComponentLabels;