@dxc-technology/halstack-react 0.0.0-49c38a4 → 0.0.0-4a67e25

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 (225) 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 -106
  39. package/date-input/DateInput.js +56 -42
  40. package/date-input/DateInput.stories.tsx +19 -8
  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 +32 -28
  121. package/radio-group/RadioGroup.stories.tsx +5 -0
  122. package/radio-group/RadioGroup.test.js +144 -116
  123. package/radio-group/types.d.ts +79 -2
  124. package/resultsetTable/ResultsetTable.js +1 -3
  125. package/resultsetTable/ResultsetTable.test.js +42 -0
  126. package/select/Icons.d.ts +10 -0
  127. package/select/Icons.js +93 -0
  128. package/select/Listbox.d.ts +4 -0
  129. package/select/Listbox.js +198 -0
  130. package/select/Option.d.ts +4 -0
  131. package/select/Option.js +110 -0
  132. package/select/Select.js +141 -365
  133. package/select/Select.stories.tsx +160 -115
  134. package/select/Select.test.js +609 -276
  135. package/select/types.d.ts +52 -12
  136. package/sidenav/Sidenav.d.ts +6 -5
  137. package/sidenav/Sidenav.js +184 -52
  138. package/sidenav/Sidenav.stories.tsx +154 -156
  139. package/sidenav/Sidenav.test.js +25 -37
  140. package/sidenav/types.d.ts +50 -27
  141. package/slider/Slider.d.ts +2 -2
  142. package/slider/Slider.js +122 -96
  143. package/slider/Slider.stories.tsx +15 -9
  144. package/slider/Slider.test.js +142 -21
  145. package/slider/types.d.ts +10 -2
  146. package/spinner/Spinner.js +1 -1
  147. package/switch/Switch.d.ts +2 -2
  148. package/switch/Switch.js +150 -67
  149. package/switch/Switch.stories.tsx +20 -42
  150. package/switch/Switch.test.js +155 -3
  151. package/switch/types.d.ts +12 -4
  152. package/table/Table.js +1 -1
  153. package/table/Table.test.js +1 -1
  154. package/tabs/Tab.d.ts +4 -0
  155. package/tabs/Tab.js +135 -0
  156. package/tabs/Tabs.d.ts +1 -1
  157. package/tabs/Tabs.js +362 -108
  158. package/tabs/Tabs.stories.tsx +74 -8
  159. package/tabs/Tabs.test.js +241 -13
  160. package/tabs/types.d.ts +19 -5
  161. package/tabs-nav/NavTabs.d.ts +8 -0
  162. package/tabs-nav/NavTabs.js +125 -0
  163. package/tabs-nav/NavTabs.stories.tsx +170 -0
  164. package/tabs-nav/NavTabs.test.js +82 -0
  165. package/tabs-nav/Tab.d.ts +4 -0
  166. package/tabs-nav/Tab.js +130 -0
  167. package/tabs-nav/types.d.ts +53 -0
  168. package/{stack → tabs-nav}/types.js +0 -0
  169. package/tag/Tag.js +15 -20
  170. package/tag/Tag.stories.tsx +12 -8
  171. package/tag/types.d.ts +1 -1
  172. package/text-input/Icons.d.ts +8 -0
  173. package/text-input/Icons.js +60 -0
  174. package/text-input/Suggestion.d.ts +4 -0
  175. package/text-input/Suggestion.js +57 -0
  176. package/text-input/Suggestions.d.ts +4 -0
  177. package/text-input/Suggestions.js +134 -0
  178. package/text-input/TextInput.js +214 -333
  179. package/text-input/TextInput.stories.tsx +199 -192
  180. package/text-input/TextInput.test.js +686 -753
  181. package/text-input/types.d.ts +50 -12
  182. package/textarea/Textarea.js +15 -24
  183. package/textarea/Textarea.stories.jsx +5 -5
  184. package/textarea/Textarea.test.js +37 -36
  185. package/textarea/types.d.ts +18 -11
  186. package/toggle-group/ToggleGroup.d.ts +1 -1
  187. package/toggle-group/ToggleGroup.js +5 -4
  188. package/toggle-group/ToggleGroup.stories.tsx +4 -4
  189. package/toggle-group/ToggleGroup.test.js +35 -4
  190. package/toggle-group/types.d.ts +9 -1
  191. package/typography/Typography.d.ts +4 -0
  192. package/typography/Typography.js +131 -0
  193. package/typography/Typography.stories.tsx +198 -0
  194. package/typography/types.d.ts +18 -0
  195. package/typography/types.js +5 -0
  196. package/useTheme.js +2 -2
  197. package/useTranslatedLabels.d.ts +2 -0
  198. package/useTranslatedLabels.js +20 -0
  199. package/wizard/Wizard.d.ts +1 -1
  200. package/wizard/Wizard.js +58 -54
  201. package/wizard/Wizard.stories.tsx +33 -24
  202. package/wizard/Wizard.test.js +36 -23
  203. package/wizard/types.d.ts +10 -5
  204. package/ThemeContext.d.ts +0 -15
  205. package/ThemeContext.js +0 -235
  206. package/list/List.d.ts +0 -4
  207. package/list/List.js +0 -47
  208. package/list/List.stories.tsx +0 -95
  209. package/list/types.d.ts +0 -7
  210. package/radio/Radio.d.ts +0 -4
  211. package/radio/Radio.js +0 -174
  212. package/radio/Radio.stories.tsx +0 -192
  213. package/radio/Radio.test.js +0 -71
  214. package/radio/types.d.ts +0 -54
  215. package/row/Row.d.ts +0 -3
  216. package/row/Row.js +0 -127
  217. package/row/Row.stories.tsx +0 -237
  218. package/row/types.d.ts +0 -10
  219. package/stack/Stack.d.ts +0 -3
  220. package/stack/Stack.js +0 -97
  221. package/stack/Stack.stories.tsx +0 -164
  222. package/stack/types.d.ts +0 -9
  223. package/text/Text.d.ts +0 -7
  224. package/text/Text.js +0 -30
  225. package/text/Text.stories.tsx +0 -19
@@ -3,14 +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;
7
-
8
- var _Icons = require("../header/Icons");
9
-
10
- var _Icons2 = require("../footer/Icons");
11
-
6
+ exports.typeface = exports.spaces = exports.responsiveSizes = exports.globalTokens = exports.defaultTranslatedComponentLabels = exports.componentTokens = void 0;
12
7
  var globalTokens = {
13
- // Color
8
+ // Color
14
9
  inherit: "inherit",
15
10
  transparent: "transparent",
16
11
  hal_white: "#ffffff",
@@ -24,12 +19,15 @@ var globalTokens = {
24
19
  color_grey_800: "#4d4d4d",
25
20
  color_grey_600: "#808080",
26
21
  color_grey_50: "#fafafa",
22
+ color_grey_a_100: "#0000000d",
23
+ color_grey_a_300: "#00000033",
27
24
  hal_purple_l_95: "#f2eafa",
28
25
  hal_purple_l_90: "#e5d5f6",
29
26
  hal_purple_l_65: "#a46ede",
30
27
  hal_purple_s_38: "#5f249f",
31
28
  hal_purple_d_30: "#4b1c7d",
32
29
  hal_purple_d_20: "#321353",
30
+ hal_purple_d_70: "#9A6BB2",
33
31
  color_purple_600: "#7D2FD0",
34
32
  color_purple_300: "#cbacec",
35
33
  hal_blue_l_95: "#e6f4ff",
@@ -112,7 +110,7 @@ var globalTokens = {
112
110
  type_normal: "normal",
113
111
  type_spacing_tight_02: "-0.05em",
114
112
  type_spacing_tight_01: "-0.025em",
115
- type_spacing_normal: "0",
113
+ type_spacing_normal: "0em",
116
114
  type_spacing_wide_01: "0.025em",
117
115
  type_spacing_wide_02: "0.05em",
118
116
  type_spacing_wide_03: "0.1em",
@@ -181,13 +179,13 @@ var componentTokens = {
181
179
  titleLabelFontStyle: globalTokens.type_normal,
182
180
  titleLabelFontColor: globalTokens.hal_black,
183
181
  disabledTitleLabelFontColor: globalTokens.hal_grey_l_60,
184
- titleLabelPaddingLeft: "0px",
185
- titleLabelPaddingRight: "16px",
186
182
  titleLabelPaddingTop: "0px",
187
183
  titleLabelPaddingBottom: "0px",
184
+ titleLabelPaddingLeft: "0px",
185
+ titleLabelPaddingRight: "16px",
186
+ focusBorderColor: globalTokens.hal_blue_l_50,
188
187
  focusBorderStyle: "solid",
189
188
  focusBorderThickness: "2px",
190
- focusBorderColor: globalTokens.hal_blue_l_50,
191
189
  borderRadius: "4px",
192
190
  boxShadowOffsetX: "0px",
193
191
  boxShadowOffsetY: "6px",
@@ -241,7 +239,7 @@ var componentTokens = {
241
239
  successBackgroundColor: globalTokens.hal_green_l_95,
242
240
  warningBackgroundColor: globalTokens.hal_yellow_l_95,
243
241
  errorBackgroundColor: globalTokens.hal_red_l_95,
244
- hoverActionBackgroundColor: "#0000000D",
242
+ hoverActionBackgroundColor: globalTokens.color_grey_a_100,
245
243
  activeActionBackgroundColor: "#0000001A",
246
244
  focusActionBorderColor: globalTokens.hal_blue_l_50,
247
245
  overlayColor: "#000000B3"
@@ -262,12 +260,21 @@ var componentTokens = {
262
260
  oneShadowDepthShadowOffsetY: "3px",
263
261
  oneShadowDepthShadowBlur: "6px",
264
262
  oneShadowDepthShadowSpread: "0px",
265
- oneShadowDepthShadowColor: "#00000033",
263
+ oneShadowDepthShadowColor: globalTokens.color_grey_a_300,
266
264
  twoShadowDepthShadowOffsetX: "0px",
267
265
  twoShadowDepthShadowOffsetY: "3px",
268
266
  twoShadowDepthShadowBlur: "10px",
269
267
  twoShadowDepthShadowSpread: "0px",
270
- 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"
271
278
  },
272
279
  button: {
273
280
  labelFontLineHeight: globalTokens.type_leading_normal,
@@ -347,7 +354,7 @@ var componentTokens = {
347
354
  backgroundColorChecked: globalTokens.hal_blue_s_35,
348
355
  backgroundColorCheckedOnDark: globalTokens.hal_grey_l_90,
349
356
  hoverBackgroundColorChecked: globalTokens.hal_blue_d_20,
350
- hoverBackgroundColorCheckedOnDark: global.hal_white,
357
+ hoverBackgroundColorCheckedOnDark: globalTokens.hal_white,
351
358
  disabledBackgroundColorChecked: globalTokens.hal_grey_l_60,
352
359
  disabledBackgroundColorCheckedOnDark: globalTokens.color_grey_800,
353
360
  borderColor: globalTokens.hal_blue_s_35,
@@ -428,7 +435,10 @@ var componentTokens = {
428
435
  boxShadowOffsetY: "1px",
429
436
  boxShadowBlur: "3px",
430
437
  boxShadowColor: "rgba(0, 0, 0, 0.2)",
431
- overlayOpacity: "0.7"
438
+ overlayOpacity: "0.7",
439
+ fontFamily: globalTokens.type_sans,
440
+ fontSize: globalTokens.type_scale_03,
441
+ fontWeight: globalTokens.type_regular
432
442
  },
433
443
  dropdown: {
434
444
  buttonBackgroundColor: globalTokens.hal_white,
@@ -488,14 +498,13 @@ var componentTokens = {
488
498
  focusDropBorderColor: globalTokens.hal_blue_l_50,
489
499
  disabledDropBorderColor: globalTokens.hal_grey_l_60,
490
500
  dragoverDropBackgroundColor: globalTokens.color_blue_50,
491
- hoverFileItemIconBackgroundColor: globalTokens.hal_grey_l_95,
492
501
  activeFileItemIconBackgrounColor: globalTokens.hal_grey_l_80,
493
502
  errorFileItemBorderColor: globalTokens.hal_red_s_41,
494
503
  errorFileItemBackgroundColor: globalTokens.color_red_50,
495
- errorFileItemIconBackgroundColor: globalTokens.color_red_700,
504
+ errorFilePreviewBackgroundColor: globalTokens.color_red_700,
496
505
  errorFileItemIconColor: globalTokens.hal_red_s_41,
497
506
  fileItemIconBackgroundColor: globalTokens.hal_grey_l_95,
498
- fileItemIconColor: globalTokens.color_grey_600,
507
+ deleteFileItemColor: globalTokens.hal_black,
499
508
  errorMessageFontColor: globalTokens.hal_red_s_41,
500
509
  labelFontFamily: globalTokens.type_sans,
501
510
  labelFontSize: globalTokens.type_scale_02,
@@ -522,9 +531,12 @@ var componentTokens = {
522
531
  fileItemBorderThickness: globalTokens.border_width_1,
523
532
  fileItemBorderStyle: globalTokens.border_solid,
524
533
  fileItemBorderRadius: globalTokens.border_radius_medium,
525
- hoverDeleteFileItemBackgroundColor: "#0000000d",
526
- activeDeleteFileItemBackgroundColor: "#00000033",
527
- 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
528
540
  },
529
541
  footer: {
530
542
  height: "124px",
@@ -717,7 +729,7 @@ var componentTokens = {
717
729
  link: {
718
730
  fontColor: globalTokens.hal_blue_s_35,
719
731
  fontFamily: globalTokens.inherit,
720
- fontSize: globalTokens.type_scale_root,
732
+ fontSize: globalTokens.inherit,
721
733
  fontStyle: globalTokens.type_normal,
722
734
  fontWeight: globalTokens.type_regular,
723
735
  iconSize: "16px",
@@ -734,6 +746,13 @@ var componentTokens = {
734
746
  activeUnderlineColor: globalTokens.black,
735
747
  focusColor: globalTokens.hal_blue_l_50
736
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
+ },
737
756
  paginator: {
738
757
  backgroundColor: globalTokens.darkWhite,
739
758
  fontColor: globalTokens.hal_black,
@@ -742,15 +761,15 @@ var componentTokens = {
742
761
  fontStyle: globalTokens.type_normal,
743
762
  fontWeight: globalTokens.type_regular,
744
763
  fontTextTransform: "none",
745
- height: "64px",
746
- width: "100%",
764
+ verticalPadding: "0.75rem",
765
+ horizontalPadding: "2rem",
747
766
  marginRight: "40px",
748
767
  marginLeft: "20px",
749
768
  itemsPerPageSelectorMarginLeft: "0px",
750
- itemsPerPageSelectorMarginRight: "30px",
769
+ itemsPerPageSelectorMarginRight: "0.5rem",
751
770
  pageSelectorMarginRight: "30px",
752
771
  pageSelectorMarginLeft: "0px",
753
- totalItemsContainerMarginRight: "30px",
772
+ totalItemsContainerMarginRight: "2.5rem",
754
773
  totalItemsContainerMarginLeft: "0px"
755
774
  },
756
775
  progressBar: {
@@ -782,21 +801,20 @@ var componentTokens = {
782
801
  overlayColor: globalTokens.black,
783
802
  overlayOpacity: "0.8"
784
803
  },
785
- radio: {
786
- circleLabelSpacing: "10px",
787
- circleSize: "24px",
788
- color: globalTokens.black,
789
- colorOnDark: globalTokens.white,
790
- disabledColor: globalTokens.lighterBlack,
791
- disabledColorOnDark: "#575757",
792
- disabledFontColor: globalTokens.lighterBlack,
793
- disabledFontColorOnDark: "#575757",
794
- focusColor: globalTokens.hal_blue_l_50,
795
- focusColorOnDark: "#1682FF",
796
- fontColor: globalTokens.inherit,
797
- 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,
798
816
  fontFamily: globalTokens.type_sans,
799
- fontSize: globalTokens.type_scale_root,
817
+ fontSize: globalTokens.type_scale_02,
800
818
  fontStyle: globalTokens.type_normal,
801
819
  fontWeight: globalTokens.type_regular
802
820
  },
@@ -910,24 +928,35 @@ var componentTokens = {
910
928
  arrowContainerColor: globalTokens.hal_grey_l_90,
911
929
  arrowColor: globalTokens.hal_black,
912
930
  titleFontFamily: globalTokens.type_sans,
913
- titleFontSize: globalTokens.type_scale_05,
931
+ titleFontSize: globalTokens.type_scale_04,
914
932
  titleFontStyle: globalTokens.type_normal,
915
- titleFontWeight: globalTokens.type_regular,
916
- titleFontColor: globalTokens.hal_black,
933
+ titleFontWeight: globalTokens.type_semibold,
934
+ titleFontColor: globalTokens.color_grey_800,
917
935
  titleFontTextTransform: "none",
918
936
  titleFontLetterSpacing: globalTokens.type_spacing_normal,
919
- subtitleFontFamily: globalTokens.type_sans,
920
- subtitleFontSize: globalTokens.type_scale_03,
921
- subtitleFontStyle: globalTokens.type_normal,
922
- subtitleFontWeight: globalTokens.type_regular,
923
- subtitleFontColor: globalTokens.color_grey_800,
924
- subtitleFontTextTransform: globalTokens.type_uppercase,
925
- 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,
926
950
  linkFontFamily: globalTokens.type_sans,
927
951
  linkFontSize: globalTokens.type_scale_02,
928
952
  linkFontStyle: globalTokens.type_normal,
929
953
  linkFontWeight: globalTokens.type_regular,
930
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,
931
960
  linkFontTextTransform: "none",
932
961
  linkFontLetterSpacing: globalTokens.type_spacing_wide_01,
933
962
  linkTextDecoration: globalTokens.type_no_line,
@@ -995,7 +1024,7 @@ var componentTokens = {
995
1024
  trackLineColorOnDark: globalTokens.hal_blue_l_50,
996
1025
  totalLineThickness: "2px",
997
1026
  totalLineVerticalPosition: "50%",
998
- totalLineColor: globalTokens.hal_grey_l_90,
1027
+ totalLineColor: "#0000001a",
999
1028
  totalLineColorOnDark: globalTokens.hal_grey_l_75,
1000
1029
  disabledThumbVerticalPosition: "10px",
1001
1030
  disabledThumbBackgroundColor: globalTokens.hal_grey_l_60,
@@ -1015,7 +1044,7 @@ var componentTokens = {
1015
1044
  },
1016
1045
  spinner: {
1017
1046
  trackCircleColor: "#5f249f",
1018
- trackCircleColorOnDark: "#a46ede",
1047
+ trackCircleColorOverlay: "#a46ede",
1019
1048
  totalCircleColor: globalTokens.white,
1020
1049
  labelFontFamily: globalTokens.type_sans,
1021
1050
  labelFontSize: globalTokens.type_scale_02,
@@ -1076,10 +1105,10 @@ var componentTokens = {
1076
1105
  thumbFocusColorOnDark: "#1682FF",
1077
1106
  thumbHeight: "24px",
1078
1107
  thumbWidth: "24px",
1079
- thumbShift: "40%",
1108
+ thumbShift: "1.25rem",
1080
1109
  trackHeight: "12px",
1081
- trackWidth: "60px",
1082
- spaceBetweenLabelSwitch: "0px"
1110
+ trackWidth: "36px",
1111
+ spaceBetweenLabelSwitch: "8px"
1083
1112
  },
1084
1113
  tag: {
1085
1114
  fontFamily: globalTokens.type_sans,
@@ -1150,6 +1179,7 @@ var componentTokens = {
1150
1179
  disabledFontColor: "#999999",
1151
1180
  disabledIconColor: "#999999",
1152
1181
  disabledFontStyle: globalTokens.type_normal,
1182
+ disabledBadgeBackgroundColor: "#0000004D",
1153
1183
  hoverBackgroundColor: "#f2eafa",
1154
1184
  pressedBackgroundColor: "#e5d5f6",
1155
1185
  pressedFontWeight: globalTokens.type_semibold,
@@ -1269,57 +1299,64 @@ var componentTokens = {
1269
1299
  optionFocusBorderThickness: globalTokens.border_width_2
1270
1300
  },
1271
1301
  wizard: {
1272
- disabledBackgroundColor: globalTokens.lightGrey,
1273
- disabledFontColor: globalTokens.darkGrey,
1274
- stepContainerFontSize: globalTokens.type_scale_03,
1275
- stepContainerFontFamily: globalTokens.type_sans,
1276
- stepContainerFontStyle: globalTokens.type_normal,
1277
- stepContainerFontWeight: globalTokens.type_regular,
1278
- stepContainerLetterSpacing: globalTokens.type_spacing_wide_02,
1279
- stepContainerFontColor: globalTokens.black,
1280
- stepContainerSelectedFontColor: globalTokens.white,
1281
- stepContainerSelectedBackgroundColor: globalTokens.hal_purple_s_38,
1282
- stepContainerBackgroundColor: globalTokens.white,
1283
- 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,
1284
1332
  labelFontSize: globalTokens.type_scale_03,
1285
1333
  labelFontFamily: globalTokens.type_sans,
1286
1334
  labelFontStyle: globalTokens.type_normal,
1287
1335
  labelFontWeight: globalTokens.type_regular,
1288
- labelLetterSpacing: globalTokens.type_spacing_normal,
1336
+ labelFontTracking: globalTokens.type_spacing_normal,
1289
1337
  labelFontTextTransform: "none",
1290
1338
  labelTextAlign: "left",
1291
- labelFontColor: globalTokens.darkGrey,
1292
- visitedLabelFontColor: globalTokens.black,
1293
- visitedDescriptionFontColor: globalTokens.black,
1294
- descriptionFontSize: globalTokens.type_scale_01,
1295
- descriptionFontFamily: globalTokens.type_sans,
1296
- descriptionFontStyle: globalTokens.type_normal,
1297
- descriptionFontWeight: globalTokens.type_regular,
1298
- descriptionLetterSpacing: globalTokens.type_spacing_wide_01,
1299
- descriptionFontTextTransform: "none",
1300
- descriptionFontColor: globalTokens.darkGrey,
1301
- descriptionTextAlign: "left",
1302
- circleWidth: "32px",
1303
- circleHeight: "32px",
1304
- circleBorderThickness: "2px",
1305
- circleBorderStyle: "solid",
1306
- circleBorderRadius: "45px",
1307
- circleBorderColor: globalTokens.black,
1308
- selectedCircleWidth: "32px",
1309
- selectedCircleHeight: "32px",
1310
- selectedCircleBorderThickness: "2px",
1311
- selectedCircleBorderStyle: "solid",
1312
- selectedCircleBorderRadius: "45px",
1313
- selectedCircleBorderColor: globalTokens.purple,
1314
- disabledCircleWidth: "32px",
1315
- disabledCircleHeight: "32px",
1316
- disabledCircleBorderThickness: "2px",
1317
- disabledCircleBorderStyle: "solid",
1318
- disabledCircleBorderRadius: "45px",
1319
- 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",
1320
1357
  separatorBorderThickness: "1px",
1321
1358
  separatorBorderStyle: "solid",
1322
- separatorColor: globalTokens.lightGrey,
1359
+ separatorColor: globalTokens.hal_grey_s_40,
1323
1360
  focusColor: globalTokens.hal_blue_l_50
1324
1361
  }
1325
1362
  };
@@ -1335,12 +1372,11 @@ var spaces = {
1335
1372
  };
1336
1373
  exports.spaces = spaces;
1337
1374
  var responsiveSizes = {
1338
- mobileSmall: "320",
1339
- mobileMedium: "375",
1340
- mobileLarge: "425",
1341
- tablet: "768",
1342
- laptop: "1024",
1343
- desktop: "1440"
1375
+ xsmall: "20",
1376
+ small: "30",
1377
+ medium: "45",
1378
+ large: "66",
1379
+ xlarge: "90"
1344
1380
  };
1345
1381
  exports.responsiveSizes = responsiveSizes;
1346
1382
  var typeface = {
@@ -1375,4 +1411,98 @@ var typeface = {
1375
1411
  textTransform: "uppercase"
1376
1412
  }
1377
1413
  };
1378
- 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;