@dxc-technology/halstack-react 0.0.0-8b133ff → 0.0.0-8b61ced

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 (212) hide show
  1. package/HalstackContext.d.ts +4 -2
  2. package/HalstackContext.js +109 -58
  3. package/accordion/Accordion.js +122 -103
  4. package/accordion/Accordion.stories.tsx +2 -3
  5. package/accordion/Accordion.test.js +9 -10
  6. package/accordion/types.d.ts +5 -4
  7. package/accordion-group/AccordionGroup.js +2 -21
  8. package/accordion-group/AccordionGroup.stories.tsx +27 -1
  9. package/accordion-group/AccordionGroup.test.js +20 -45
  10. package/accordion-group/types.d.ts +10 -3
  11. package/alert/Alert.js +5 -2
  12. package/badge/Badge.d.ts +1 -1
  13. package/badge/Badge.js +5 -3
  14. package/badge/types.d.ts +1 -0
  15. package/bleed/Bleed.js +1 -34
  16. package/bleed/Bleed.stories.tsx +94 -95
  17. package/bleed/types.d.ts +1 -1
  18. package/box/Box.js +23 -33
  19. package/box/types.d.ts +1 -0
  20. package/bulleted-list/BulletedList.d.ts +7 -0
  21. package/bulleted-list/BulletedList.js +123 -0
  22. package/bulleted-list/BulletedList.stories.tsx +200 -0
  23. package/bulleted-list/types.d.ts +11 -0
  24. package/{list → bulleted-list}/types.js +0 -0
  25. package/button/Button.js +46 -62
  26. package/button/Button.stories.tsx +9 -0
  27. package/button/types.d.ts +7 -7
  28. package/card/Card.js +34 -36
  29. package/card/types.d.ts +1 -0
  30. package/checkbox/Checkbox.d.ts +2 -2
  31. package/checkbox/Checkbox.js +95 -99
  32. package/checkbox/Checkbox.stories.tsx +79 -59
  33. package/checkbox/Checkbox.test.js +93 -16
  34. package/checkbox/types.d.ts +6 -2
  35. package/chip/types.d.ts +1 -1
  36. package/common/variables.js +237 -97
  37. package/date-input/Calendar.d.ts +4 -0
  38. package/date-input/Calendar.js +258 -0
  39. package/date-input/DateInput.js +81 -223
  40. package/date-input/DateInput.stories.tsx +30 -17
  41. package/date-input/DateInput.test.js +411 -138
  42. package/date-input/DatePicker.d.ts +4 -0
  43. package/date-input/DatePicker.js +160 -0
  44. package/date-input/YearPicker.d.ts +4 -0
  45. package/date-input/YearPicker.js +115 -0
  46. package/date-input/types.d.ts +53 -0
  47. package/dialog/Dialog.js +52 -28
  48. package/dialog/Dialog.stories.tsx +57 -2
  49. package/dialog/Dialog.test.js +34 -4
  50. package/dialog/types.d.ts +3 -2
  51. package/dropdown/Dropdown.d.ts +1 -1
  52. package/dropdown/Dropdown.js +247 -247
  53. package/dropdown/Dropdown.stories.tsx +126 -63
  54. package/dropdown/Dropdown.test.js +504 -108
  55. package/dropdown/DropdownMenu.d.ts +4 -0
  56. package/dropdown/DropdownMenu.js +80 -0
  57. package/dropdown/DropdownMenuItem.d.ts +4 -0
  58. package/dropdown/DropdownMenuItem.js +92 -0
  59. package/dropdown/types.d.ts +25 -5
  60. package/file-input/FileInput.d.ts +2 -2
  61. package/file-input/FileInput.js +183 -222
  62. package/file-input/FileInput.stories.tsx +38 -10
  63. package/file-input/FileInput.test.js +53 -12
  64. package/file-input/FileItem.d.ts +4 -14
  65. package/file-input/FileItem.js +43 -66
  66. package/file-input/types.d.ts +17 -0
  67. package/flex/Flex.d.ts +4 -0
  68. package/flex/Flex.js +69 -0
  69. package/flex/Flex.stories.tsx +103 -0
  70. package/flex/types.d.ts +32 -0
  71. package/{radio → flex}/types.js +0 -0
  72. package/footer/Footer.js +7 -5
  73. package/footer/Footer.stories.tsx +8 -1
  74. package/footer/Icons.js +1 -1
  75. package/footer/types.d.ts +2 -1
  76. package/header/Header.js +80 -75
  77. package/header/Header.stories.tsx +4 -4
  78. package/header/Icons.js +2 -2
  79. package/header/types.d.ts +3 -2
  80. package/inset/Inset.js +1 -34
  81. package/inset/Inset.stories.tsx +36 -36
  82. package/inset/types.d.ts +1 -1
  83. package/layout/ApplicationLayout.d.ts +16 -6
  84. package/layout/ApplicationLayout.js +70 -117
  85. package/layout/ApplicationLayout.stories.tsx +84 -93
  86. package/layout/Icons.d.ts +5 -0
  87. package/layout/Icons.js +13 -2
  88. package/layout/SidenavContext.d.ts +5 -0
  89. package/layout/SidenavContext.js +19 -0
  90. package/layout/types.d.ts +18 -33
  91. package/link/Link.d.ts +3 -2
  92. package/link/Link.js +58 -71
  93. package/link/Link.stories.tsx +95 -53
  94. package/link/Link.test.js +7 -15
  95. package/link/types.d.ts +7 -23
  96. package/main.d.ts +7 -10
  97. package/main.js +38 -56
  98. package/number-input/NumberInput.test.js +43 -7
  99. package/number-input/types.d.ts +1 -1
  100. package/package.json +16 -19
  101. package/paginator/Paginator.js +17 -38
  102. package/paginator/Paginator.test.js +43 -1
  103. package/paragraph/Paragraph.d.ts +6 -0
  104. package/paragraph/Paragraph.js +38 -0
  105. package/paragraph/Paragraph.stories.tsx +44 -0
  106. package/password-input/PasswordInput.js +7 -4
  107. package/password-input/PasswordInput.test.js +14 -14
  108. package/password-input/types.d.ts +1 -1
  109. package/progress-bar/ProgressBar.d.ts +2 -2
  110. package/progress-bar/ProgressBar.js +57 -51
  111. package/progress-bar/ProgressBar.stories.jsx +13 -11
  112. package/progress-bar/ProgressBar.test.js +67 -22
  113. package/progress-bar/types.d.ts +3 -4
  114. package/quick-nav/QuickNav.js +75 -22
  115. package/quick-nav/QuickNav.stories.tsx +131 -26
  116. package/quick-nav/types.d.ts +4 -4
  117. package/radio-group/Radio.d.ts +1 -1
  118. package/radio-group/Radio.js +43 -28
  119. package/radio-group/RadioGroup.js +30 -27
  120. package/radio-group/RadioGroup.stories.tsx +1 -0
  121. package/radio-group/RadioGroup.test.js +123 -96
  122. package/radio-group/types.d.ts +2 -2
  123. package/resultsetTable/Icons.d.ts +7 -0
  124. package/resultsetTable/Icons.js +51 -0
  125. package/resultsetTable/ResultsetTable.js +48 -107
  126. package/resultsetTable/ResultsetTable.stories.tsx +50 -25
  127. package/resultsetTable/ResultsetTable.test.js +65 -41
  128. package/resultsetTable/types.d.ts +2 -2
  129. package/select/Listbox.d.ts +1 -1
  130. package/select/Listbox.js +58 -8
  131. package/select/Select.js +80 -90
  132. package/select/Select.stories.tsx +147 -105
  133. package/select/Select.test.js +425 -249
  134. package/select/types.d.ts +2 -5
  135. package/sidenav/Sidenav.d.ts +6 -5
  136. package/sidenav/Sidenav.js +184 -52
  137. package/sidenav/Sidenav.stories.tsx +154 -156
  138. package/sidenav/Sidenav.test.js +25 -37
  139. package/sidenav/types.d.ts +50 -27
  140. package/slider/Slider.d.ts +2 -2
  141. package/slider/Slider.js +120 -95
  142. package/slider/Slider.stories.tsx +7 -1
  143. package/slider/Slider.test.js +121 -21
  144. package/slider/types.d.ts +6 -2
  145. package/spinner/Spinner.js +3 -3
  146. package/switch/Switch.d.ts +2 -2
  147. package/switch/Switch.js +138 -68
  148. package/switch/Switch.stories.tsx +8 -30
  149. package/switch/Switch.test.js +144 -17
  150. package/switch/types.d.ts +6 -2
  151. package/table/Table.js +1 -1
  152. package/table/Table.test.js +1 -1
  153. package/tabs/Tab.d.ts +4 -0
  154. package/tabs/Tab.js +135 -0
  155. package/tabs/Tabs.js +360 -104
  156. package/tabs/Tabs.stories.tsx +74 -7
  157. package/tabs/Tabs.test.js +217 -6
  158. package/tabs/types.d.ts +15 -5
  159. package/tabs-nav/NavTabs.d.ts +8 -0
  160. package/tabs-nav/NavTabs.js +125 -0
  161. package/tabs-nav/NavTabs.stories.tsx +170 -0
  162. package/tabs-nav/NavTabs.test.js +82 -0
  163. package/tabs-nav/Tab.d.ts +4 -0
  164. package/tabs-nav/Tab.js +130 -0
  165. package/tabs-nav/types.d.ts +53 -0
  166. package/{row → tabs-nav}/types.js +0 -0
  167. package/tag/Tag.js +1 -1
  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 +84 -0
  173. package/text-input/Suggestions.d.ts +4 -0
  174. package/text-input/Suggestions.js +134 -0
  175. package/text-input/TextInput.js +211 -330
  176. package/text-input/TextInput.stories.tsx +194 -182
  177. package/text-input/TextInput.test.js +738 -726
  178. package/text-input/types.d.ts +33 -2
  179. package/textarea/Textarea.js +10 -19
  180. package/textarea/types.d.ts +1 -1
  181. package/toggle-group/types.d.ts +1 -1
  182. package/typography/Typography.d.ts +4 -0
  183. package/typography/Typography.js +131 -0
  184. package/typography/Typography.stories.tsx +198 -0
  185. package/typography/types.d.ts +18 -0
  186. package/{stack → typography}/types.js +0 -0
  187. package/useTranslatedLabels.d.ts +2 -0
  188. package/useTranslatedLabels.js +20 -0
  189. package/wizard/Wizard.js +36 -41
  190. package/wizard/Wizard.stories.tsx +20 -1
  191. package/wizard/types.d.ts +5 -4
  192. package/common/RequiredComponent.js +0 -32
  193. package/list/List.d.ts +0 -4
  194. package/list/List.js +0 -47
  195. package/list/List.stories.tsx +0 -95
  196. package/list/types.d.ts +0 -7
  197. package/radio/Radio.d.ts +0 -4
  198. package/radio/Radio.js +0 -173
  199. package/radio/Radio.stories.tsx +0 -192
  200. package/radio/Radio.test.js +0 -71
  201. package/radio/types.d.ts +0 -54
  202. package/row/Row.d.ts +0 -3
  203. package/row/Row.js +0 -127
  204. package/row/Row.stories.tsx +0 -237
  205. package/row/types.d.ts +0 -28
  206. package/stack/Stack.d.ts +0 -3
  207. package/stack/Stack.js +0 -97
  208. package/stack/Stack.stories.tsx +0 -164
  209. package/stack/types.d.ts +0 -24
  210. package/text/Text.d.ts +0 -7
  211. package/text/Text.js +0 -30
  212. 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,
@@ -396,7 +408,7 @@ var componentTokens = {
396
408
  pickerHoverDateBackgroundColor: globalTokens.hal_purple_l_90,
397
409
  pickerSelectedDateColor: globalTokens.hal_white,
398
410
  pickerSelectedDateBackgroundColor: globalTokens.hal_purple_s_38,
399
- pickerActualDateFontColor: globalTokens.hal_grey_l_60,
411
+ pickerActualDateFontColor: globalTokens.hal_black,
400
412
  pickerYearFontColor: globalTokens.hal_black,
401
413
  pickerMonthFontColor: globalTokens.hal_black,
402
414
  pickerWeekFontColor: globalTokens.hal_black,
@@ -404,7 +416,8 @@ var componentTokens = {
404
416
  pickerMonthArrowsBackgroundColor: globalTokens.transparent,
405
417
  pickerFocusColor: globalTokens.hal_blue_l_50,
406
418
  pickerHeight: "316px",
407
- pickerWidth: "290px"
419
+ // not referenced in the actual implementation
420
+ pickerWidth: "292px"
408
421
  },
409
422
  dialog: {
410
423
  overlayColor: globalTokens.hal_black,
@@ -423,7 +436,10 @@ var componentTokens = {
423
436
  boxShadowOffsetY: "1px",
424
437
  boxShadowBlur: "3px",
425
438
  boxShadowColor: "rgba(0, 0, 0, 0.2)",
426
- overlayOpacity: "0.7"
439
+ overlayOpacity: "0.7",
440
+ fontFamily: globalTokens.type_sans,
441
+ fontSize: globalTokens.type_scale_03,
442
+ fontWeight: globalTokens.type_regular
427
443
  },
428
444
  dropdown: {
429
445
  buttonBackgroundColor: globalTokens.hal_white,
@@ -483,14 +499,13 @@ var componentTokens = {
483
499
  focusDropBorderColor: globalTokens.hal_blue_l_50,
484
500
  disabledDropBorderColor: globalTokens.hal_grey_l_60,
485
501
  dragoverDropBackgroundColor: globalTokens.color_blue_50,
486
- hoverFileItemIconBackgroundColor: globalTokens.hal_grey_l_95,
487
502
  activeFileItemIconBackgrounColor: globalTokens.hal_grey_l_80,
488
503
  errorFileItemBorderColor: globalTokens.hal_red_s_41,
489
504
  errorFileItemBackgroundColor: globalTokens.color_red_50,
490
- errorFileItemIconBackgroundColor: globalTokens.color_red_700,
505
+ errorFilePreviewBackgroundColor: globalTokens.color_red_700,
491
506
  errorFileItemIconColor: globalTokens.hal_red_s_41,
492
507
  fileItemIconBackgroundColor: globalTokens.hal_grey_l_95,
493
- fileItemIconColor: globalTokens.color_grey_600,
508
+ deleteFileItemColor: globalTokens.hal_black,
494
509
  errorMessageFontColor: globalTokens.hal_red_s_41,
495
510
  labelFontFamily: globalTokens.type_sans,
496
511
  labelFontSize: globalTokens.type_scale_02,
@@ -517,9 +532,12 @@ var componentTokens = {
517
532
  fileItemBorderThickness: globalTokens.border_width_1,
518
533
  fileItemBorderStyle: globalTokens.border_solid,
519
534
  fileItemBorderRadius: globalTokens.border_radius_medium,
520
- hoverDeleteFileItemBackgroundColor: "#0000000d",
521
- activeDeleteFileItemBackgroundColor: "#00000033",
522
- focusActionBorderColor: globalTokens.hal_blue_l_50
535
+ hoverDeleteFileItemBackgroundColor: globalTokens.color_grey_a_100,
536
+ activeDeleteFileItemBackgroundColor: globalTokens.color_grey_a_300,
537
+ focusDeleteFileItemBorderColor: globalTokens.hal_blue_l_50,
538
+ filePreviewBackgroundColor: globalTokens.hal_grey_l_95,
539
+ filePreviewIconColor: globalTokens.color_grey_600,
540
+ errorFilePreviewIconColor: globalTokens.hal_red_s_41
523
541
  },
524
542
  footer: {
525
543
  height: "124px",
@@ -712,7 +730,7 @@ var componentTokens = {
712
730
  link: {
713
731
  fontColor: globalTokens.hal_blue_s_35,
714
732
  fontFamily: globalTokens.inherit,
715
- fontSize: globalTokens.type_scale_root,
733
+ fontSize: globalTokens.inherit,
716
734
  fontStyle: globalTokens.type_normal,
717
735
  fontWeight: globalTokens.type_regular,
718
736
  iconSize: "16px",
@@ -729,6 +747,13 @@ var componentTokens = {
729
747
  activeUnderlineColor: globalTokens.black,
730
748
  focusColor: globalTokens.hal_blue_l_50
731
749
  },
750
+ paragraph: {
751
+ fontColor: globalTokens.hal_black,
752
+ fontColorOnDark: globalTokens.hal_white,
753
+ display: "block",
754
+ fontSize: globalTokens.type_scale_03,
755
+ fontWeight: globalTokens.type_regular
756
+ },
732
757
  paginator: {
733
758
  backgroundColor: globalTokens.darkWhite,
734
759
  fontColor: globalTokens.hal_black,
@@ -737,15 +762,15 @@ var componentTokens = {
737
762
  fontStyle: globalTokens.type_normal,
738
763
  fontWeight: globalTokens.type_regular,
739
764
  fontTextTransform: "none",
740
- height: "64px",
741
- width: "100%",
765
+ verticalPadding: "0.75rem",
766
+ horizontalPadding: "2rem",
742
767
  marginRight: "40px",
743
768
  marginLeft: "20px",
744
769
  itemsPerPageSelectorMarginLeft: "0px",
745
- itemsPerPageSelectorMarginRight: "30px",
770
+ itemsPerPageSelectorMarginRight: "0.5rem",
746
771
  pageSelectorMarginRight: "30px",
747
772
  pageSelectorMarginLeft: "0px",
748
- totalItemsContainerMarginRight: "30px",
773
+ totalItemsContainerMarginRight: "2.5rem",
749
774
  totalItemsContainerMarginLeft: "0px"
750
775
  },
751
776
  progressBar: {
@@ -777,21 +802,20 @@ var componentTokens = {
777
802
  overlayColor: globalTokens.black,
778
803
  overlayOpacity: "0.8"
779
804
  },
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,
805
+ quickNav: {
806
+ fontColor: globalTokens.hal_grey_s_40,
807
+ hoverFontColor: globalTokens.hal_purple_d_70,
808
+ dividerBorderColor: globalTokens.hal_grey_l_75,
809
+ focusBorderColor: globalTokens.hal_blue_l_50,
810
+ focusBorderStyle: globalTokens.border_solid,
811
+ focusBorderThickness: globalTokens.border_width_2,
812
+ focusBorderRadius: globalTokens.border_width_2,
813
+ paddingTop: globalTokens.spacing_03,
814
+ paddingBottom: globalTokens.spacing_03,
815
+ paddingLeft: globalTokens.spacing_05,
816
+ paddingRight: globalTokens.spacing_05,
793
817
  fontFamily: globalTokens.type_sans,
794
- fontSize: globalTokens.type_scale_root,
818
+ fontSize: globalTokens.type_scale_02,
795
819
  fontStyle: globalTokens.type_normal,
796
820
  fontWeight: globalTokens.type_regular
797
821
  },
@@ -905,24 +929,35 @@ var componentTokens = {
905
929
  arrowContainerColor: globalTokens.hal_grey_l_90,
906
930
  arrowColor: globalTokens.hal_black,
907
931
  titleFontFamily: globalTokens.type_sans,
908
- titleFontSize: globalTokens.type_scale_05,
932
+ titleFontSize: globalTokens.type_scale_04,
909
933
  titleFontStyle: globalTokens.type_normal,
910
- titleFontWeight: globalTokens.type_regular,
911
- titleFontColor: globalTokens.hal_black,
934
+ titleFontWeight: globalTokens.type_semibold,
935
+ titleFontColor: globalTokens.color_grey_800,
912
936
  titleFontTextTransform: "none",
913
937
  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,
938
+ groupTitleFontFamily: globalTokens.type_sans,
939
+ groupTitleFontSize: globalTokens.type_scale_02,
940
+ groupTitleFontStyle: globalTokens.type_normal,
941
+ groupTitleFontWeight: globalTokens.type_semibold,
942
+ groupTitleFontColor: globalTokens.black,
943
+ groupTitleHoverBackgroundColor: globalTokens.hal_grey_l_90,
944
+ groupTitleActiveBackgroundColor: globalTokens.hal_grey_l_80,
945
+ groupTitleSelectedFontColor: globalTokens.white,
946
+ groupTitleSelectedBackgroundColor: globalTokens.color_grey_800,
947
+ groupTitleSelectedHoverFontColor: globalTokens.white,
948
+ groupTitleSelectedHoverBackgroundColor: globalTokens.color_grey_600,
949
+ groupTitleFontTextTransform: globalTokens.type_uppercase,
950
+ groupTitleFontLetterSpacing: globalTokens.type_spacing_wide_02,
921
951
  linkFontFamily: globalTokens.type_sans,
922
952
  linkFontSize: globalTokens.type_scale_02,
923
953
  linkFontStyle: globalTokens.type_normal,
924
954
  linkFontWeight: globalTokens.type_regular,
925
955
  linkFontColor: globalTokens.color_grey_800,
956
+ linkHoverBackgroundColor: globalTokens.hal_grey_l_90,
957
+ linkSelectedFontColor: globalTokens.white,
958
+ linkSelectedBackgroundColor: globalTokens.color_grey_800,
959
+ linkSelectedHoverFontColor: globalTokens.white,
960
+ linkSelectedHoverBackgroundColor: globalTokens.color_grey_600,
926
961
  linkFontTextTransform: "none",
927
962
  linkFontLetterSpacing: globalTokens.type_spacing_wide_01,
928
963
  linkTextDecoration: globalTokens.type_no_line,
@@ -990,7 +1025,7 @@ var componentTokens = {
990
1025
  trackLineColorOnDark: globalTokens.hal_blue_l_50,
991
1026
  totalLineThickness: "2px",
992
1027
  totalLineVerticalPosition: "50%",
993
- totalLineColor: globalTokens.hal_grey_l_90,
1028
+ totalLineColor: "#0000001a",
994
1029
  totalLineColorOnDark: globalTokens.hal_grey_l_75,
995
1030
  disabledThumbVerticalPosition: "10px",
996
1031
  disabledThumbBackgroundColor: globalTokens.hal_grey_l_60,
@@ -1010,7 +1045,7 @@ var componentTokens = {
1010
1045
  },
1011
1046
  spinner: {
1012
1047
  trackCircleColor: "#5f249f",
1013
- trackCircleColorOnDark: "#a46ede",
1048
+ trackCircleColorOverlay: "#a46ede",
1014
1049
  totalCircleColor: globalTokens.white,
1015
1050
  labelFontFamily: globalTokens.type_sans,
1016
1051
  labelFontSize: globalTokens.type_scale_02,
@@ -1071,10 +1106,10 @@ var componentTokens = {
1071
1106
  thumbFocusColorOnDark: "#1682FF",
1072
1107
  thumbHeight: "24px",
1073
1108
  thumbWidth: "24px",
1074
- thumbShift: "40%",
1109
+ thumbShift: "1.25rem",
1075
1110
  trackHeight: "12px",
1076
- trackWidth: "60px",
1077
- spaceBetweenLabelSwitch: "0px"
1111
+ trackWidth: "36px",
1112
+ spaceBetweenLabelSwitch: "8px"
1078
1113
  },
1079
1114
  tag: {
1080
1115
  fontFamily: globalTokens.type_sans,
@@ -1145,6 +1180,7 @@ var componentTokens = {
1145
1180
  disabledFontColor: "#999999",
1146
1181
  disabledIconColor: "#999999",
1147
1182
  disabledFontStyle: globalTokens.type_normal,
1183
+ disabledBadgeBackgroundColor: "#0000004D",
1148
1184
  hoverBackgroundColor: "#f2eafa",
1149
1185
  pressedBackgroundColor: "#e5d5f6",
1150
1186
  pressedFontWeight: globalTokens.type_semibold,
@@ -1264,57 +1300,64 @@ var componentTokens = {
1264
1300
  optionFocusBorderThickness: globalTokens.border_width_2
1265
1301
  },
1266
1302
  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",
1303
+ visitedStepFontColor: globalTokens.hal_black,
1304
+ visitedStepBackgroundColor: globalTokens.hal_white,
1305
+ visitedStepBorderColor: globalTokens.hal_black,
1306
+ unvisitedStepFontColor: globalTokens.hal_grey_s_40,
1307
+ unvisitedLabelFontColor: globalTokens.hal_grey_s_40,
1308
+ unvisitedHelperTextFontColor: globalTokens.hal_grey_s_40,
1309
+ unvisitedStepBackgroundColor: globalTokens.transparent,
1310
+ unvisitedStepBorderColor: globalTokens.hal_grey_s_40,
1311
+ selectedStepFontColor: globalTokens.white,
1312
+ selectedStepBackgroundColor: globalTokens.hal_purple_s_38,
1313
+ selectedStepBorderColor: globalTokens.hal_purple_s_38,
1314
+ selectedLabelFontColor: globalTokens.hal_black,
1315
+ selectedHelperTextFontColor: globalTokens.hal_black,
1316
+ selectedStepWidth: "32px",
1317
+ selectedStepHeight: "32px",
1318
+ selectedStepBorderThickness: "2px",
1319
+ selectedStepBorderStyle: "solid",
1320
+ selectedStepBorderRadius: "45px",
1321
+ stepFontSize: globalTokens.type_scale_03,
1322
+ stepFontFamily: globalTokens.type_sans,
1323
+ stepFontStyle: globalTokens.type_normal,
1324
+ stepFontWeight: globalTokens.type_regular,
1325
+ stepFontTracking: globalTokens.type_spacing_wide_02,
1326
+ stepIconSize: "20px",
1327
+ stepWidth: "32px",
1328
+ stepHeight: "32px",
1329
+ stepBorderThickness: "2px",
1330
+ stepBorderStyle: "solid",
1331
+ stepBorderRadius: "45px",
1332
+ visitedLabelFontColor: globalTokens.hal_black,
1279
1333
  labelFontSize: globalTokens.type_scale_03,
1280
1334
  labelFontFamily: globalTokens.type_sans,
1281
1335
  labelFontStyle: globalTokens.type_normal,
1282
1336
  labelFontWeight: globalTokens.type_regular,
1283
- labelLetterSpacing: globalTokens.type_spacing_normal,
1337
+ labelFontTracking: globalTokens.type_spacing_normal,
1284
1338
  labelFontTextTransform: "none",
1285
1339
  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,
1340
+ helperTextFontSize: globalTokens.type_scale_02,
1341
+ helperTextFontFamily: globalTokens.type_sans,
1342
+ helperTextFontStyle: globalTokens.type_normal,
1343
+ helperTextFontWeight: globalTokens.type_regular,
1344
+ helperTextFontTracking: globalTokens.type_spacing_normal,
1345
+ helperTextFontTextTransform: "none",
1346
+ visitedHelperTextFontColor: globalTokens.hal_black,
1347
+ helperTextTextAlign: "left",
1348
+ disabledStepBackgroundColor: globalTokens.hal_grey_l_95,
1349
+ disabledStepFontColor: globalTokens.hal_grey_l_60,
1350
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
1351
+ disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
1352
+ disabledStepBorderColor: globalTokens.hal_grey_l_95,
1353
+ disabledStepWidth: "32px",
1354
+ disabledStepHeight: "32px",
1355
+ disabledStepBorderThickness: "2px",
1356
+ disabledStepBorderStyle: "solid",
1357
+ disabledStepBorderRadius: "45px",
1315
1358
  separatorBorderThickness: "1px",
1316
1359
  separatorBorderStyle: "solid",
1317
- separatorColor: globalTokens.lightGrey,
1360
+ separatorColor: globalTokens.hal_grey_s_40,
1318
1361
  focusColor: globalTokens.hal_blue_l_50
1319
1362
  }
1320
1363
  };
@@ -1369,4 +1412,101 @@ var typeface = {
1369
1412
  textTransform: "uppercase"
1370
1413
  }
1371
1414
  };
1372
- exports.typeface = typeface;
1415
+ exports.typeface = typeface;
1416
+ var defaultTranslatedComponentLabels = {
1417
+ formFields: {
1418
+ optionalLabel: "(Optional)",
1419
+ requiredSelectionErrorMessage: "This field is required. Please, choose an option.",
1420
+ requiredValueErrorMessage: "This field is required. Please, enter a value.",
1421
+ formatRequestedErrorMessage: "Please match the format requested.",
1422
+ lengthErrorMessage: function lengthErrorMessage(minLength, maxLength) {
1423
+ return "Min length ".concat(minLength, ", max length ").concat(maxLength, ".");
1424
+ },
1425
+ logoAlternativeText: "Logo"
1426
+ },
1427
+ applicationLayout: {
1428
+ visibilityToggleTitle: "Toggle visibility sidenav"
1429
+ },
1430
+ alert: {
1431
+ infoTitleText: "information",
1432
+ successTitleText: "success",
1433
+ warningTitleText: "warning",
1434
+ errorTitleText: "error"
1435
+ },
1436
+ dateInput: {
1437
+ invalidDateErrorMessage: "Invalid date."
1438
+ },
1439
+ fileInput: {
1440
+ fileSizeGreaterThanErrorMessage: "File size must be greater than min size.",
1441
+ fileSizeLessThanErrorMessage: "File size must be less than max size.",
1442
+ multipleButtonLabelDefault: "Select files",
1443
+ singleButtonLabelDefault: "Select file",
1444
+ dropAreaButtonLabelDefault: "Select",
1445
+ multipleDropAreaLabelDefault: "or drop files",
1446
+ singleDropAreaLabelDefault: "or drop a file",
1447
+ deleteFileActionTitle: "Remove file"
1448
+ },
1449
+ footer: {
1450
+ copyrightText: function copyrightText(year) {
1451
+ return "\xA9 DXC Technology ".concat(year, ". All rights reserved.");
1452
+ }
1453
+ },
1454
+ header: {
1455
+ closeIcon: "Close menu",
1456
+ hamburguerTitle: "Menu"
1457
+ },
1458
+ numberInput: {
1459
+ valueGreaterThanOrEqualToErrorMessage: function valueGreaterThanOrEqualToErrorMessage(value) {
1460
+ return "Value must be greater than or equal to ".concat(value, ".");
1461
+ },
1462
+ valueLessThanOrEqualToErrorMessage: function valueLessThanOrEqualToErrorMessage(value) {
1463
+ return "Value must be less than or equal to ".concat(value, ".");
1464
+ },
1465
+ decrementValueTitle: "Decrement value",
1466
+ incrementValueTitle: "Increment value"
1467
+ },
1468
+ paginator: {
1469
+ itemsPerPageText: "Items per page: ",
1470
+ minToMaxOfText: function minToMaxOfText(minNumberOfItems, maxNumberOfItems, totalItems) {
1471
+ return "".concat(minNumberOfItems, " to ").concat(maxNumberOfItems, " of ").concat(totalItems);
1472
+ },
1473
+ goToPageText: "Go to page:",
1474
+ pageOfText: function pageOfText(pageNumber, totalPagesNumber) {
1475
+ return "Page: ".concat(pageNumber, " of ").concat(totalPagesNumber);
1476
+ }
1477
+ },
1478
+ passwordInput: {
1479
+ inputShowPasswordTitle: "Show password",
1480
+ inputHidePasswordTitle: "Hide password"
1481
+ },
1482
+ quickNav: {
1483
+ contentTitle: "Contents"
1484
+ },
1485
+ radioGroup: {
1486
+ optionalItemLabelDefault: "N/A"
1487
+ },
1488
+ select: {
1489
+ noMatchesErrorMessage: "No matches found",
1490
+ actionClearSelectionTitle: "Clear selection",
1491
+ actionClearSearchTitle: "Clear search"
1492
+ },
1493
+ tabs: {
1494
+ scrollLeft: "Scroll left",
1495
+ scrollRight: "Scroll right"
1496
+ },
1497
+ textInput: {
1498
+ clearFieldActionTitle: "Clear field",
1499
+ searchingMessage: "Searching...",
1500
+ fetchingDataErrorMessage: "Error fetching data"
1501
+ },
1502
+ calendar: {
1503
+ days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
1504
+ daysShort: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
1505
+ months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
1506
+ monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
1507
+ previousMonthTitle: "Previous month",
1508
+ nextMonthTitle: "Next month",
1509
+ openCalendar: "Open calendar"
1510
+ }
1511
+ };
1512
+ exports.defaultTranslatedComponentLabels = defaultTranslatedComponentLabels;
@@ -0,0 +1,4 @@
1
+ import React from "react";
2
+ import { CalendarPropsType } from "./types";
3
+ declare const _default: React.MemoExoticComponent<({ selectedDate, innerDate, onInnerDateChange, onDaySelect }: CalendarPropsType) => JSX.Element>;
4
+ export default _default;