@dxc-technology/halstack-react 0.0.0-7d46b9f → 0.0.0-7da4003

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 (109) hide show
  1. package/dist/ThemeContext.js +6 -6
  2. package/dist/V3Textarea/V3Textarea.js +264 -0
  3. package/dist/alert/Alert.js +4 -4
  4. package/dist/button/Button.js +1 -1
  5. package/dist/common/variables.js +199 -74
  6. package/dist/date/Date.js +6 -6
  7. package/dist/{new-date/NewDate.js → date-input/DateInput.js} +36 -36
  8. package/dist/{new-date → date-input}/index.d.ts +3 -3
  9. package/dist/file-input/FileInput.js +2 -2
  10. package/dist/file-input/index.d.ts +1 -1
  11. package/dist/footer/Footer.js +44 -18
  12. package/dist/footer/Icons.js +77 -0
  13. package/dist/header/Header.js +80 -49
  14. package/dist/header/Icons.js +59 -0
  15. package/dist/input-text/Icons.js +22 -0
  16. package/dist/input-text/InputText.js +7 -9
  17. package/dist/layout/ApplicationLayout.js +4 -8
  18. package/dist/layout/Icons.js +55 -0
  19. package/dist/main.d.ts +6 -5
  20. package/dist/main.js +29 -21
  21. package/dist/new-select/NewSelect.js +836 -0
  22. package/dist/new-select/index.d.ts +53 -0
  23. package/dist/{number/Number.js → number-input/NumberInput.js} +8 -8
  24. package/dist/{number/NumberContext.js → number-input/NumberInputContext.js} +2 -2
  25. package/dist/{number → number-input}/index.d.ts +3 -3
  26. package/dist/paginator/Icons.js +66 -0
  27. package/dist/paginator/Paginator.js +5 -11
  28. package/dist/{password/Password.js → password-input/PasswordInput.js} +8 -10
  29. package/dist/{password → password-input}/index.d.ts +5 -5
  30. package/dist/slider/Slider.js +104 -19
  31. package/dist/{new-input-text/NewInputText.js → text-input/TextInput.js} +36 -32
  32. package/dist/{new-input-text → text-input}/index.d.ts +1 -1
  33. package/dist/textarea/Textarea.js +227 -122
  34. package/dist/{new-textarea → textarea}/index.d.ts +1 -1
  35. package/dist/toggle-group/ToggleGroup.js +132 -28
  36. package/dist/upload/Upload.js +3 -3
  37. package/dist/upload/buttons-upload/ButtonsUpload.js +7 -11
  38. package/dist/upload/buttons-upload/Icons.js +40 -0
  39. package/dist/upload/dragAndDropArea/DragAndDropArea.js +14 -14
  40. package/dist/upload/dragAndDropArea/Icons.js +39 -0
  41. package/dist/upload/file-upload/FileToUpload.js +26 -21
  42. package/dist/upload/file-upload/Icons.js +66 -0
  43. package/dist/upload/readme.md +2 -2
  44. package/dist/upload/transaction/Icons.js +160 -0
  45. package/dist/upload/transaction/Transaction.js +11 -38
  46. package/dist/wizard/Icons.js +65 -0
  47. package/dist/wizard/Wizard.js +3 -9
  48. package/package.json +1 -1
  49. package/test/Date.test.js +48 -44
  50. package/test/{NewDate.test.js → DateInput.test.js} +33 -23
  51. package/test/Footer.test.js +2 -7
  52. package/test/Header.test.js +5 -10
  53. package/test/InputText.test.js +24 -16
  54. package/test/{Number.test.js → NumberInput.test.js} +47 -45
  55. package/test/PasswordInput.test.js +83 -0
  56. package/test/Slider.test.js +9 -17
  57. package/test/{NewInputText.test.js → TextInput.test.js} +46 -48
  58. package/test/{NewTextarea.test.js → Textarea.test.js} +16 -18
  59. package/test/ToggleGroup.test.js +5 -1
  60. package/test/Upload.test.js +5 -5
  61. package/test/{TextArea.test.js → V3TextArea.test.js} +6 -7
  62. package/dist/footer/Footer.stories.js +0 -94
  63. package/dist/footer/dxc_logo.svg +0 -15
  64. package/dist/footer/readme.md +0 -41
  65. package/dist/header/Header.stories.js +0 -176
  66. package/dist/header/close_icon.svg +0 -1
  67. package/dist/header/dxc_logo_black.svg +0 -8
  68. package/dist/header/hamb_menu_black.svg +0 -1
  69. package/dist/header/hamb_menu_white.svg +0 -1
  70. package/dist/header/readme.md +0 -33
  71. package/dist/input-text/InputText.stories.js +0 -209
  72. package/dist/input-text/error.svg +0 -1
  73. package/dist/input-text/readme.md +0 -91
  74. package/dist/layout/facebook.svg +0 -45
  75. package/dist/layout/linkedin.svg +0 -50
  76. package/dist/layout/twitter.svg +0 -53
  77. package/dist/new-textarea/NewTextarea.js +0 -365
  78. package/dist/paginator/images/next.svg +0 -3
  79. package/dist/paginator/images/nextPage.svg +0 -3
  80. package/dist/paginator/images/previous.svg +0 -3
  81. package/dist/paginator/images/previousPage.svg +0 -3
  82. package/dist/paginator/readme.md +0 -50
  83. package/dist/password/styles.css +0 -3
  84. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  85. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  86. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  87. package/dist/slider/Slider.stories.js +0 -241
  88. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  89. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  90. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  91. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  92. package/dist/upload/file-upload/audio-icon.svg +0 -4
  93. package/dist/upload/file-upload/close.svg +0 -4
  94. package/dist/upload/file-upload/file-icon.svg +0 -4
  95. package/dist/upload/file-upload/video-icon.svg +0 -4
  96. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  97. package/dist/upload/transaction/audio-icon.svg +0 -4
  98. package/dist/upload/transaction/error-icon.svg +0 -4
  99. package/dist/upload/transaction/file-icon-err.svg +0 -4
  100. package/dist/upload/transaction/file-icon.svg +0 -4
  101. package/dist/upload/transaction/image-icon-err.svg +0 -4
  102. package/dist/upload/transaction/image-icon.svg +0 -4
  103. package/dist/upload/transaction/success-icon.svg +0 -4
  104. package/dist/upload/transaction/video-icon-err.svg +0 -4
  105. package/dist/upload/transaction/video-icon.svg +0 -4
  106. package/dist/wizard/invalid_icon.svg +0 -5
  107. package/dist/wizard/valid_icon.svg +0 -5
  108. package/dist/wizard/validation-wrong.svg +0 -6
  109. package/test/Password.test.js +0 -83
@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports.typeface = exports.responsiveSizes = exports.spaces = exports.componentTokens = exports.globalTokens = void 0;
9
9
 
10
- var _dxc_logo_black = _interopRequireDefault(require("../header/dxc_logo_black.svg"));
10
+ var _Icons = require("../header/Icons");
11
11
 
12
- var _dxc_logo = _interopRequireDefault(require("../footer/dxc_logo.svg"));
12
+ var _Icons2 = _interopRequireDefault(require("../footer/Icons"));
13
13
 
14
14
  var globalTokens = {
15
15
  // Color
@@ -25,6 +25,7 @@ var globalTokens = {
25
25
  hal_black: "#000000",
26
26
  color_grey_800: "#4d4d4d",
27
27
  color_grey_600: "#808080",
28
+ color_grey_50: "#fafafa",
28
29
  hal_purple_l_95: "#f2eafa",
29
30
  hal_purple_l_90: "#e5d5f6",
30
31
  hal_purple_l_65: "#a46ede",
@@ -32,6 +33,7 @@ var globalTokens = {
32
33
  hal_purple_d_30: "#4b1c7d",
33
34
  hal_purple_d_20: "#321353",
34
35
  color_purple_600: "#7D2FD0",
36
+ color_purple_300: "#cbacec",
35
37
  hal_blue_l_95: "#e6f4ff",
36
38
  hal_blue_l_80: "#99d5ff",
37
39
  hal_blue_l_50: "#0095ff",
@@ -123,7 +125,7 @@ var globalTokens = {
123
125
  type_leading_compact_02: "1.25em",
124
126
  type_leading_compact_01: "1.365em",
125
127
  type_leading_normal: "1.5em",
126
- type_leading_loose_01: "1.75em",
128
+ type_leading_loose_01: "1.715em",
127
129
  type_leading_loose_02: "2em",
128
130
  fontSize10: "10px",
129
131
  // Spacing
@@ -154,10 +156,7 @@ var globalTokens = {
154
156
  border_radius_full: "9999px",
155
157
  border_solid: "solid",
156
158
  border_dashed: "dashed",
157
- border_none: "none",
158
- // Padding
159
- padding_08: "8px",
160
- padding_16: "16px"
159
+ border_none: "none"
161
160
  };
162
161
  exports.globalTokens = globalTokens;
163
162
  var componentTokens = {
@@ -274,10 +273,10 @@ var componentTokens = {
274
273
  button: {
275
274
  labelFontLineHeight: globalTokens.type_leading_normal,
276
275
  labelLetterSpacing: globalTokens.type_spacing_wide_01,
277
- paddingLeft: globalTokens.padding_08,
278
- paddingRight: globalTokens.padding_08,
279
- paddingTop: globalTokens.padding_08,
280
- paddingBottom: globalTokens.padding_08,
276
+ paddingLeft: globalTokens.spacing_03,
277
+ paddingRight: globalTokens.spacing_03,
278
+ paddingTop: globalTokens.spacing_03,
279
+ paddingBottom: globalTokens.spacing_03,
281
280
  focusBorderColor: globalTokens.hal_blue_l_50,
282
281
  focusBorderColorOnDark: globalTokens.hal_blue_l_50,
283
282
  primaryBackgroundColor: globalTokens.hal_purple_s_38,
@@ -413,7 +412,7 @@ var componentTokens = {
413
412
  pickerHeight: "316px",
414
413
  pickerWidth: "290px"
415
414
  },
416
- newDate: {
415
+ dateInput: {
417
416
  pickerFontFamily: globalTokens.type_sans,
418
417
  pickerBackgroundColor: globalTokens.hal_white,
419
418
  pickerHoverDateFontColor: globalTokens.hal_black,
@@ -527,7 +526,7 @@ var componentTokens = {
527
526
  helperTextFontFamily: globalTokens.type_sans,
528
527
  helperTextFontSize: globalTokens.type_scale_01,
529
528
  helperTextFontWeight: globalTokens.type_regular,
530
- helperTextLineHeight: globalTokens.type_scale_05,
529
+ helperTextLineHeight: globalTokens.type_leading_normal,
531
530
  dropLabelFontFamily: globalTokens.type_sans,
532
531
  dropLabelFontSize: globalTokens.type_scale_03,
533
532
  dropLabelFontWeight: globalTokens.type_regular,
@@ -560,7 +559,7 @@ var componentTokens = {
560
559
  copyrightFontStyle: globalTokens.type_normal,
561
560
  copyrightFontWeight: globalTokens.type_regular,
562
561
  copyrightFontColor: globalTokens.hal_white,
563
- logo: _dxc_logo["default"],
562
+ logo: _Icons2["default"],
564
563
  logoHeight: "32px",
565
564
  logoWidth: "auto",
566
565
  socialLinksSize: "24px",
@@ -578,8 +577,8 @@ var componentTokens = {
578
577
  hamburguerTextTransform: globalTokens.type_uppercase,
579
578
  hamburguerIconColor: globalTokens.hal_black,
580
579
  hamburguerHoverColor: globalTokens.mediumGreyBlack,
581
- logo: _dxc_logo_black["default"],
582
- logoResponsive: _dxc_logo_black["default"],
580
+ logo: _Icons.dxcLogo,
581
+ logoResponsive: _Icons.dxcLogo,
583
582
  logoHeight: "40px",
584
583
  logoWidth: "auto",
585
584
  menuBackgroundColor: globalTokens.hal_white,
@@ -694,7 +693,7 @@ var componentTokens = {
694
693
  underlineFocusColorOnDark: globalTokens.white,
695
694
  underlineThickness: "1px"
696
695
  },
697
- newInputText: {
696
+ textInput: {
698
697
  fontFamily: globalTokens.type_sans,
699
698
  enabledBorderColor: globalTokens.hal_black,
700
699
  enabledBorderColorOnDark: globalTokens.hal_white,
@@ -719,6 +718,7 @@ var componentTokens = {
719
718
  labelFontSize: globalTokens.type_scale_02,
720
719
  labelFontStyle: globalTokens.type_normal,
721
720
  labelFontWeight: globalTokens.type_semibold,
721
+ labelLineHeight: globalTokens.type_leading_loose_01,
722
722
  disabledLabelFontColor: globalTokens.hal_grey_l_60,
723
723
  disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
724
724
  optionalLabelFontWeight: globalTokens.type_regular,
@@ -727,6 +727,7 @@ var componentTokens = {
727
727
  helperTextFontSize: globalTokens.type_scale_01,
728
728
  helperTextFontStyle: globalTokens.type_normal,
729
729
  helperTextFontWeight: globalTokens.type_regular,
730
+ helperTextLineHeight: globalTokens.type_leading_normal,
730
731
  disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
731
732
  disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
732
733
  prefixColor: globalTokens.hal_grey_s_40,
@@ -923,6 +924,90 @@ var componentTokens = {
923
924
  focusColor: globalTokens.hal_blue_l_50,
924
925
  focusColorOnDark: globalTokens.hal_blue_l_50
925
926
  },
927
+ newSelect: {
928
+ fontFamily: globalTokens.type_sans,
929
+ enabledBorderColor: globalTokens.hal_black,
930
+ enabledBorderColorOnDark: globalTokens.hal_white,
931
+ hoverBorderColor: globalTokens.hal_purple_l_65,
932
+ hoverBorderColorOnDark: globalTokens.hal_purple_l_65,
933
+ focusBorderColor: globalTokens.hal_blue_l_50,
934
+ focusBorderColorOnDark: globalTokens.hal_blue_l_50,
935
+ disabledBorderColor: globalTokens.hal_grey_l_60,
936
+ disabledBorderColorOnDark: globalTokens.hal_grey_l_60,
937
+ disabledContainerFillColor: globalTokens.hal_grey_l_95,
938
+ disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
939
+ errorBorderColor: globalTokens.hal_red_s_41,
940
+ errorBorderColorOnDark: globalTokens.hal_red_l_60,
941
+ hoverErrorBorderColor: "#fe0123",
942
+ hoverErrorBorderColorOnDark: "#fe677b",
943
+ errorMessageColor: globalTokens.hal_red_s_41,
944
+ errorMessageColorOnDark: globalTokens.hal_red_l_60,
945
+ errorIconColor: globalTokens.hal_red_s_41,
946
+ errorIconColorOnDark: globalTokens.hal_red_l_60,
947
+ labelFontColor: globalTokens.hal_black,
948
+ labelFontColorOnDark: globalTokens.hal_white,
949
+ labelFontSize: globalTokens.type_scale_02,
950
+ labelFontStyle: globalTokens.type_normal,
951
+ labelFontWeight: globalTokens.type_semibold,
952
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
953
+ disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
954
+ optionalLabelFontWeight: globalTokens.type_regular,
955
+ helperTextFontColor: globalTokens.hal_black,
956
+ helperTextFontColorOnDark: globalTokens.hal_white,
957
+ helperTextFontSize: globalTokens.type_scale_01,
958
+ helperTextFontStyle: globalTokens.type_normal,
959
+ helperTextFontWeight: globalTokens.type_regular,
960
+ disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
961
+ disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
962
+ placeholderFontColor: "#808080",
963
+ placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
964
+ disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
965
+ disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
966
+ valueFontColor: globalTokens.hal_black,
967
+ valueFontColorOnDark: globalTokens.hal_white,
968
+ valueFontSize: globalTokens.type_scale_03,
969
+ valueFontStyle: globalTokens.type_normal,
970
+ valueFontWeight: globalTokens.type_regular,
971
+ disabledValueFontColor: globalTokens.hal_grey_l_60,
972
+ disabledValueFontColorOnDark: globalTokens.hal_grey_l_60,
973
+ actionIconColor: globalTokens.hal_black,
974
+ actionIconColorOnDark: globalTokens.hal_white,
975
+ disabledActionIconColor: globalTokens.hal_grey_l_60,
976
+ disabledActionIconColorOnDark: globalTokens.hal_grey_l_60,
977
+ hoverActionIconColor: globalTokens.hal_black,
978
+ hoverActionIconColorOnDark: globalTokens.hal_white,
979
+ focusActionIconColor: globalTokens.hal_black,
980
+ focusActionIconColorOnDark: globalTokens.hal_white,
981
+ activeActionIconColor: globalTokens.hal_black,
982
+ activeActionIconColorOnDark: globalTokens.hal_black,
983
+ actionBackgroundColor: globalTokens.transparent,
984
+ actionBackgroundColorOnDark: globalTokens.transparent,
985
+ disabledActionBackgroundColor: globalTokens.transparent,
986
+ disabledActionBackgroundColorOnDark: globalTokens.transparent,
987
+ hoverActionBackgroundColor: globalTokens.hal_grey_l_95,
988
+ hoverActionBackgroundColorOnDark: globalTokens.hal_grey_s_40,
989
+ focusActionBorderColor: globalTokens.hal_blue_l_50,
990
+ focusActionBorderColorOnDark: globalTokens.hal_blue_l_50,
991
+ activeActionBackgroundColor: globalTokens.hal_grey_l_80,
992
+ activeActionBackgroundColorOnDark: globalTokens.hal_grey_l_60,
993
+ listOptionFontColor: globalTokens.hal_black,
994
+ listOptionFontSize: globalTokens.type_scale_02,
995
+ listOptionFontStyle: globalTokens.type_normal,
996
+ listOptionFontWeight: globalTokens.type_regular,
997
+ systemMessageFontColor: globalTokens.hal_grey_s_40,
998
+ errorMessageBorderColor: globalTokens.hal_red_s_41,
999
+ errorMessageBackgroundColor: globalTokens.hal_red_l_95,
1000
+ hoverListOptionBackgroundColor: globalTokens.hal_grey_l_95,
1001
+ activeListOptionBackgroundColor: globalTokens.hal_grey_l_90,
1002
+ // NUEVO
1003
+ arrowColor: globalTokens.hal_black,
1004
+ arrowColorOnDark: globalTokens.hal_white,
1005
+ disabledArrowColor: globalTokens.hal_grey_l_60,
1006
+ disabledArrowColorOnDark: globalTokens.hal_grey_l_60,
1007
+ enabledListBorderColor: globalTokens.hal_grey_l_80,
1008
+ listOptionBorderBottomColor: globalTokens.hal_grey_l_90,
1009
+ selectedListOptionBackgroundColor: globalTokens.hal_grey_l_90
1010
+ },
926
1011
  sidenav: {
927
1012
  backgroundColor: globalTokens.hal_grey_l_95,
928
1013
  arrowContainerColor: globalTokens.hal_grey_l_90,
@@ -962,13 +1047,28 @@ var componentTokens = {
962
1047
  fontSize: globalTokens.type_scale_03,
963
1048
  fontStyle: globalTokens.type_normal,
964
1049
  fontWeight: globalTokens.type_regular,
1050
+ labelFontFamily: globalTokens.type_sans,
1051
+ labelFontSize: globalTokens.type_scale_02,
1052
+ labelFontStyle: globalTokens.type_normal,
1053
+ labelFontWeight: globalTokens.type_semibold,
1054
+ labelLineHeight: globalTokens.type_leading_loose_01,
1055
+ helperTextFontFamily: globalTokens.type_sans,
1056
+ helperTextFontSize: globalTokens.type_scale_01,
1057
+ helperTextFontStyle: globalTokens.type_normal,
1058
+ helperTextFontWeight: globalTokens.type_regular,
1059
+ helperTextLineHeight: globalTokens.type_leading_normal,
965
1060
  fontColor: globalTokens.hal_black,
966
1061
  fontColorOnDark: globalTokens.hal_white,
1062
+ labelFontColor: globalTokens.hal_black,
1063
+ helperTextFontColor: globalTokens.hal_black,
967
1064
  disabledFontColor: globalTokens.hal_grey_l_60,
968
1065
  fontLetterSpacing: globalTokens.type_spacing_normal,
969
1066
  thumbHeight: "12px",
970
1067
  thumbWidth: "12px",
1068
+ hoverThumbHeight: "14px",
1069
+ hoverThumbWidth: "14px",
971
1070
  thumbVerticalPosition: "12px",
1071
+ hoverThumbVerticalPosition: "11px",
972
1072
  thumbBackgroundColor: globalTokens.hal_blue_s_35,
973
1073
  thumbBackgroundColorOnDark: globalTokens.hal_blue_l_50,
974
1074
  hoverThumbScale: "1.166666",
@@ -1003,7 +1103,10 @@ var componentTokens = {
1003
1103
  disabledTotalLineColor: globalTokens.hal_grey_l_95,
1004
1104
  disabledTotalLineColorOnDark: globalTokens.hal_grey_s_40,
1005
1105
  focusColor: globalTokens.hal_blue_l_50,
1006
- focusColorOnDark: globalTokens.hal_blue_l_50
1106
+ focusColorOnDark: globalTokens.hal_blue_l_50,
1107
+ floorLabelMarginRight: globalTokens.type_scale_03,
1108
+ ceilLabelMarginLeft: globalTokens.type_scale_03,
1109
+ inputMarginLeft: globalTokens.type_scale_06
1007
1110
  },
1008
1111
  spinner: {
1009
1112
  trackCircleColor: "#5f249f",
@@ -1096,7 +1199,7 @@ var componentTokens = {
1096
1199
  rowSeparatorColor: globalTokens.lightGrey,
1097
1200
  dataBackgroundColor: globalTokens.white,
1098
1201
  dataFontFamily: globalTokens.type_sans,
1099
- dataFontSize: globalTokens.type_scale_root,
1202
+ dataFontSize: globalTokens.type_scale_02,
1100
1203
  dataFontStyle: globalTokens.type_normal,
1101
1204
  dataFontWeight: globalTokens.type_regular,
1102
1205
  dataFontColor: globalTokens.black,
@@ -1164,41 +1267,6 @@ var componentTokens = {
1164
1267
  badgeRadiusWithNotificationNumber: "10px"
1165
1268
  },
1166
1269
  textarea: {
1167
- fontFamily: globalTokens.type_sans,
1168
- assistiveTextFontSize: globalTokens.type_scale_01,
1169
- assistiveTextFontStyle: globalTokens.type_normal,
1170
- assistiveTextFontWeight: globalTokens.type_regular,
1171
- assistiveTextFontColor: globalTokens.black,
1172
- assistiveTextFontColorOnDark: globalTokens.white,
1173
- assistiveTextLetterSpacing: "0.03333em",
1174
- disabledColor: globalTokens.lighterBlack,
1175
- disabledColorOnDark: "#575757",
1176
- errorColor: globalTokens.red,
1177
- errorColorOnDark: globalTokens.hal_red_l_60,
1178
- scrollBarThumbColor: globalTokens.darkGrey,
1179
- scrollBarThumbColorOnDark: globalTokens.white,
1180
- scrollBarTrackColor: globalTokens.lightGrey,
1181
- scrollBarTrackColorOnDark: "#999999",
1182
- labelFontSize: globalTokens.type_scale_03,
1183
- labelFontStyle: globalTokens.type_normal,
1184
- labelFontWeight: globalTokens.type_regular,
1185
- labelFontColor: globalTokens.black,
1186
- labelFontColorOnDark: globalTokens.white,
1187
- labelLetterSpacing: "0.00938em",
1188
- valueFontSize: globalTokens.type_scale_03,
1189
- valueFontStyle: globalTokens.type_normal,
1190
- valueFontWeight: globalTokens.type_regular,
1191
- valueFontColor: globalTokens.black,
1192
- valueFontColorOnDark: globalTokens.white,
1193
- valueLetterSpacing: globalTokens.type_spacing_normal,
1194
- valueLineHeight: "1.1875em",
1195
- underlineColor: globalTokens.black,
1196
- underlineColorOnDark: globalTokens.white,
1197
- underlineFocusColor: globalTokens.black,
1198
- underlineFocusColorOnDark: globalTokens.white,
1199
- underlineThickness: "1px"
1200
- },
1201
- newTextarea: {
1202
1270
  fontFamily: globalTokens.type_sans,
1203
1271
  enabledBorderColor: globalTokens.hal_black,
1204
1272
  enabledBorderColorOnDark: globalTokens.hal_white,
@@ -1221,6 +1289,7 @@ var componentTokens = {
1221
1289
  labelFontSize: globalTokens.type_scale_02,
1222
1290
  labelFontStyle: globalTokens.type_normal,
1223
1291
  labelFontWeight: globalTokens.type_semibold,
1292
+ labelLineHeight: globalTokens.type_leading_loose_01,
1224
1293
  disabledLabelFontColor: globalTokens.hal_grey_l_60,
1225
1294
  disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
1226
1295
  optionalLabelFontWeight: globalTokens.type_regular,
@@ -1229,6 +1298,7 @@ var componentTokens = {
1229
1298
  helperTextFontSize: globalTokens.type_scale_01,
1230
1299
  helperTextFontStyle: globalTokens.type_normal,
1231
1300
  helperTextFontWeight: globalTokens.type_regular,
1301
+ helperTextLineHeight: globalTokens.type_leading_normal,
1232
1302
  disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
1233
1303
  disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
1234
1304
  placeholderFontColor: "#808080",
@@ -1244,32 +1314,52 @@ var componentTokens = {
1244
1314
  disabledValueFontColorOnDark: globalTokens.hal_grey_l_60
1245
1315
  },
1246
1316
  toggleGroup: {
1247
- fontFamily: globalTokens.type_sans,
1248
- fontSize: globalTokens.type_scale_03,
1249
- fontStyle: globalTokens.type_normal,
1250
- fontWeight: globalTokens.type_regular,
1251
- selectedBackgroundColor: globalTokens.hal_purple_s_38,
1252
- selectedHoverBackgroundColor: globalTokens.hal_purple_d_30,
1253
- selectedActiveBackgroundColor: globalTokens.hal_purple_d_20,
1254
- selectedDisabledBackgroundColor: globalTokens.hal_purple_l_95,
1255
- selectedFontColor: globalTokens.hal_white,
1256
- selectedDisabledFontColor: "#cbacec",
1317
+ containerBackgroundColor: globalTokens.color_grey_50,
1318
+ containerBorderColor: globalTokens.hal_grey_l_60,
1319
+ labelFontColor: globalTokens.hal_black,
1320
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
1321
+ helperTextFontColor: globalTokens.hal_black,
1322
+ disabledHelperTextFontcolor: globalTokens.hal_grey_l_60,
1257
1323
  unselectedBackgroundColor: globalTokens.hal_grey_l_90,
1258
1324
  unselectedHoverBackgroundColor: globalTokens.hal_grey_l_80,
1259
1325
  unselectedActiveBackgroundColor: globalTokens.hal_purple_s_38,
1260
1326
  unselectedDisabledBackgroundColor: globalTokens.hal_grey_l_95,
1261
1327
  unselectedFontColor: globalTokens.hal_black,
1262
1328
  unselectedDisabledFontColor: globalTokens.hal_grey_l_60,
1263
- iconSize: "24px",
1264
- iconPaddingTop: "8px",
1265
- iconPaddingBottom: "8px",
1266
- iconPaddingRight: "8px",
1267
- iconPaddingLeft: "8px",
1268
- labelPaddingTop: "8px",
1269
- labelPaddingBottom: "8px",
1270
- labelPaddingLeft: "24px",
1271
- labelPaddingRight: "24px",
1272
- focusColor: globalTokens.hal_blue_l_50
1329
+ selectedBackgroundColor: globalTokens.hal_purple_s_38,
1330
+ selectedHoverBackgroundColor: globalTokens.hal_purple_d_30,
1331
+ selectedActiveBackgroundColor: globalTokens.hal_purple_d_20,
1332
+ selectedDisabledBackgroundColor: globalTokens.hal_purple_l_95,
1333
+ selectedFontColor: globalTokens.hal_white,
1334
+ selectedDisabledFontColor: globalTokens.color_purple_300,
1335
+ focusColor: globalTokens.hal_blue_l_50,
1336
+ labelFontFamily: globalTokens.type_sans,
1337
+ labelFontSize: globalTokens.type_scale_02,
1338
+ labelFontStyle: globalTokens.type_normal,
1339
+ labelFontWeight: globalTokens.type_semibold,
1340
+ labelLineHeight: globalTokens.type_leading_loose_01,
1341
+ helperTextFontFamily: globalTokens.type_sans,
1342
+ helperTextFontSize: globalTokens.type_scale_01,
1343
+ helperTextFontStyle: globalTokens.type_normal,
1344
+ helperTextFontWeight: globalTokens.type_regular,
1345
+ helperTextLineHeight: globalTokens.type_leading_normal,
1346
+ optionLabelFontFamily: globalTokens.type_sans,
1347
+ optionLabelFontSize: globalTokens.type_scale_03,
1348
+ optionLabelFontStyle: globalTokens.type_normal,
1349
+ optionLabelFontWeight: globalTokens.type_regular,
1350
+ iconPaddingRight: globalTokens.spacing_03,
1351
+ iconPaddingLeft: globalTokens.spacing_03,
1352
+ labelPaddingLeft: globalTokens.spacing_06,
1353
+ labelPaddingRight: globalTokens.spacing_06,
1354
+ iconMarginRight: globalTokens.spacing_03,
1355
+ containerMarginTop: globalTokens.spacing_02,
1356
+ optionBorderThickness: globalTokens.border_width_0,
1357
+ optionBorderStyle: globalTokens.border_none,
1358
+ optionBorderRadius: globalTokens.border_radius_medium,
1359
+ containerBorderThickness: globalTokens.border_width_1,
1360
+ containerBorderStyle: globalTokens.border_solid,
1361
+ containerBorderRadius: globalTokens.border_radius_large,
1362
+ optionFocusBorderThickness: globalTokens.border_width_2
1273
1363
  },
1274
1364
  upload: {
1275
1365
  fontFamily: globalTokens.type_sans,
@@ -1334,6 +1424,41 @@ var componentTokens = {
1334
1424
  uploadedFilesSubtitleFontColor: globalTokens.darkGrey,
1335
1425
  uploadedFilesNumberFontWeight: globalTokens.type_bold
1336
1426
  },
1427
+ V3Textarea: {
1428
+ fontFamily: globalTokens.type_sans,
1429
+ assistiveTextFontSize: globalTokens.type_scale_01,
1430
+ assistiveTextFontStyle: globalTokens.type_normal,
1431
+ assistiveTextFontWeight: globalTokens.type_regular,
1432
+ assistiveTextFontColor: globalTokens.black,
1433
+ assistiveTextFontColorOnDark: globalTokens.white,
1434
+ assistiveTextLetterSpacing: "0.03333em",
1435
+ disabledColor: globalTokens.lighterBlack,
1436
+ disabledColorOnDark: "#575757",
1437
+ errorColor: globalTokens.red,
1438
+ errorColorOnDark: globalTokens.hal_red_l_60,
1439
+ scrollBarThumbColor: globalTokens.darkGrey,
1440
+ scrollBarThumbColorOnDark: globalTokens.white,
1441
+ scrollBarTrackColor: globalTokens.lightGrey,
1442
+ scrollBarTrackColorOnDark: "#999999",
1443
+ labelFontSize: globalTokens.type_scale_03,
1444
+ labelFontStyle: globalTokens.type_normal,
1445
+ labelFontWeight: globalTokens.type_regular,
1446
+ labelFontColor: globalTokens.black,
1447
+ labelFontColorOnDark: globalTokens.white,
1448
+ labelLetterSpacing: "0.00938em",
1449
+ valueFontSize: globalTokens.type_scale_03,
1450
+ valueFontStyle: globalTokens.type_normal,
1451
+ valueFontWeight: globalTokens.type_regular,
1452
+ valueFontColor: globalTokens.black,
1453
+ valueFontColorOnDark: globalTokens.white,
1454
+ valueLetterSpacing: globalTokens.type_spacing_normal,
1455
+ valueLineHeight: "1.1875em",
1456
+ underlineColor: globalTokens.black,
1457
+ underlineColorOnDark: globalTokens.white,
1458
+ underlineFocusColor: globalTokens.black,
1459
+ underlineFocusColorOnDark: globalTokens.white,
1460
+ underlineThickness: "1px"
1461
+ },
1337
1462
  wizard: {
1338
1463
  disabledBackgroundColor: globalTokens.lightGrey,
1339
1464
  disabledFontColor: globalTokens.darkGrey,
package/dist/date/Date.js CHANGED
@@ -41,7 +41,7 @@ var _variables = require("../common/variables.js");
41
41
 
42
42
  var _useTheme = _interopRequireDefault(require("../useTheme.js"));
43
43
 
44
- var _DxcDate$propTypes;
44
+ var _V3DxcDate$propTypes;
45
45
 
46
46
  function _templateObject() {
47
47
  var data = (0, _taggedTemplateLiteral2["default"])([""]);
@@ -53,7 +53,7 @@ function _templateObject() {
53
53
  return data;
54
54
  }
55
55
 
56
- var DxcDate = function DxcDate(_ref) {
56
+ var V3DxcDate = function V3DxcDate(_ref) {
57
57
  var value = _ref.value,
58
58
  _ref$format = _ref.format,
59
59
  format = _ref$format === void 0 ? "dd-MM-yyyy" : _ref$format,
@@ -356,7 +356,7 @@ var sizes = {
356
356
 
357
357
  var StyledDPicker = _styledComponents["default"].div(_templateObject());
358
358
 
359
- DxcDate.propTypes = (_DxcDate$propTypes = {
359
+ V3DxcDate.propTypes = (_V3DxcDate$propTypes = {
360
360
  value: _propTypes["default"].string,
361
361
  format: _propTypes["default"].string,
362
362
  label: _propTypes["default"].string,
@@ -369,11 +369,11 @@ DxcDate.propTypes = (_DxcDate$propTypes = {
369
369
  invalid: _propTypes["default"].bool,
370
370
  onChange: _propTypes["default"].func,
371
371
  onBlur: _propTypes["default"].func
372
- }, (0, _defineProperty2["default"])(_DxcDate$propTypes, "onChange", _propTypes["default"].func), (0, _defineProperty2["default"])(_DxcDate$propTypes, "size", _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes)))), (0, _defineProperty2["default"])(_DxcDate$propTypes, "margin", _propTypes["default"].oneOfType([_propTypes["default"].shape({
372
+ }, (0, _defineProperty2["default"])(_V3DxcDate$propTypes, "onChange", _propTypes["default"].func), (0, _defineProperty2["default"])(_V3DxcDate$propTypes, "size", _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes)))), (0, _defineProperty2["default"])(_V3DxcDate$propTypes, "margin", _propTypes["default"].oneOfType([_propTypes["default"].shape({
373
373
  top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
374
374
  bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
375
375
  left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
376
376
  right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
377
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])), (0, _defineProperty2["default"])(_DxcDate$propTypes, "tabIndex", _propTypes["default"].number), _DxcDate$propTypes);
378
- var _default = DxcDate;
377
+ }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])), (0, _defineProperty2["default"])(_V3DxcDate$propTypes, "tabIndex", _propTypes["default"].number), _V3DxcDate$propTypes);
378
+ var _default = V3DxcDate;
379
379
  exports["default"] = _default;
@@ -37,7 +37,7 @@ var _variables = require("../common/variables.js");
37
37
 
38
38
  var _useTheme = _interopRequireDefault(require("../useTheme.js"));
39
39
 
40
- var _NewInputText = _interopRequireDefault(require("../new-input-text/NewInputText"));
40
+ var _TextInput = _interopRequireDefault(require("../text-input/TextInput"));
41
41
 
42
42
  function _templateObject() {
43
43
  var data = (0, _taggedTemplateLiteral2["default"])([""]);
@@ -49,7 +49,7 @@ function _templateObject() {
49
49
  return data;
50
50
  }
51
51
 
52
- var DxcNewDate = _react["default"].forwardRef(function (_ref, ref) {
52
+ var DxcDateInput = _react["default"].forwardRef(function (_ref, ref) {
53
53
  var _ref$label = _ref.label,
54
54
  label = _ref$label === void 0 ? "" : _ref$label,
55
55
  _ref$name = _ref.name,
@@ -175,12 +175,12 @@ var DxcNewDate = _react["default"].forwardRef(function (_ref, ref) {
175
175
  overrides: {
176
176
  MuiTypography: {
177
177
  root: {
178
- fontFamily: "".concat(colorsTheme.newDate.pickerFontFamily, " !important")
178
+ fontFamily: "".concat(colorsTheme.dateInput.pickerFontFamily, " !important")
179
179
  }
180
180
  },
181
181
  MuiPickersYearSelection: {
182
182
  container: {
183
- color: colorsTheme.newDate.pickerYearFontColor,
183
+ color: colorsTheme.dateInput.pickerYearFontColor,
184
184
  "&::-webkit-scrollbar": {
185
185
  width: "3px"
186
186
  },
@@ -196,8 +196,8 @@ var DxcNewDate = _react["default"].forwardRef(function (_ref, ref) {
196
196
  },
197
197
  MuiPickersToolbar: {
198
198
  toolbar: {
199
- backgroundColor: colorsTheme.newDate.pickerBackgroundColor,
200
- color: colorsTheme.newDate.pickerDayFontColor
199
+ backgroundColor: colorsTheme.dateInput.pickerBackgroundColor,
200
+ color: colorsTheme.dateInput.pickerDayFontColor
201
201
  }
202
202
  },
203
203
  MuiIconButton: {
@@ -215,7 +215,7 @@ var DxcNewDate = _react["default"].forwardRef(function (_ref, ref) {
215
215
  MuiButtonBase: {
216
216
  root: {
217
217
  "&:focus": {
218
- outline: colorsTheme.newDate.pickerFocusColor + " solid 2px"
218
+ outline: colorsTheme.dateInput.pickerFocusColor + " solid 2px"
219
219
  }
220
220
  }
221
221
  },
@@ -225,38 +225,38 @@ var DxcNewDate = _react["default"].forwardRef(function (_ref, ref) {
225
225
  maxWidth: "unset",
226
226
  minHeight: "unset",
227
227
  padding: "0px 10px",
228
- height: colorsTheme.newDate.pickerHeight,
229
- width: colorsTheme.newDate.pickerWidth,
230
- backgroundColor: colorsTheme.newDate.pickerBackgroundColor,
231
- fontFamily: colorsTheme.newDate.pickerFontFamily
228
+ height: colorsTheme.dateInput.pickerHeight,
229
+ width: colorsTheme.dateInput.pickerWidth,
230
+ backgroundColor: colorsTheme.dateInput.pickerBackgroundColor,
231
+ fontFamily: colorsTheme.dateInput.pickerFontFamily
232
232
  }
233
233
  },
234
234
  MuiPickersToolbarText: {
235
235
  toolbarTxt: {
236
- color: colorsTheme.newDate.pickerActualDateFontColor,
237
- fontFamily: colorsTheme.newDate.pickerFontFamily,
236
+ color: colorsTheme.dateInput.pickerActualDateFontColor,
237
+ fontFamily: colorsTheme.dateInput.pickerFontFamily,
238
238
  fontSize: "2rem"
239
239
  },
240
240
  toolbarBtnSelected: {
241
- color: colorsTheme.newDate.pickerActualDateFontColor
241
+ color: colorsTheme.dateInput.pickerActualDateFontColor
242
242
  }
243
243
  },
244
244
  MuiPickersCalendarHeader: {
245
245
  transitionContainer: {
246
- color: colorsTheme.newDate.pickerMonthFontColor
246
+ color: colorsTheme.dateInput.pickerMonthFontColor
247
247
  },
248
248
  dayLabel: {
249
- color: colorsTheme.newDate.pickerWeekFontColor,
250
- fontFamily: colorsTheme.newDate.pickerFontFamily
249
+ color: colorsTheme.dateInput.pickerWeekFontColor,
250
+ fontFamily: colorsTheme.dateInput.pickerFontFamily
251
251
  },
252
252
  switchHeader: {
253
253
  backgroundColor: "#ffffff",
254
- color: colorsTheme.newDate.pickerDayFontColor
254
+ color: colorsTheme.dateInput.pickerDayFontColor
255
255
  },
256
256
  iconButton: {
257
- backgroundColor: colorsTheme.newDate.pickerMonthArrowsBackgroundColor,
257
+ backgroundColor: colorsTheme.dateInput.pickerMonthArrowsBackgroundColor,
258
258
  "&:hover": {
259
- backgroundColor: colorsTheme.newDate.pickerMonthArrowsBackgroundColor
259
+ backgroundColor: colorsTheme.dateInput.pickerMonthArrowsBackgroundColor
260
260
  }
261
261
  }
262
262
  },
@@ -267,37 +267,37 @@ var DxcNewDate = _react["default"].forwardRef(function (_ref, ref) {
267
267
  },
268
268
  MuiPickersDay: {
269
269
  current: {
270
- color: colorsTheme.newDate.pickerDayFontColor
270
+ color: colorsTheme.dateInput.pickerDayFontColor
271
271
  },
272
272
  day: {
273
- fontFamily: colorsTheme.newDate.pickerFontFamily,
274
- color: colorsTheme.newDate.pickerDayFontColor,
273
+ fontFamily: colorsTheme.dateInput.pickerFontFamily,
274
+ color: colorsTheme.dateInput.pickerDayFontColor,
275
275
  "&:hover": {
276
- backgroundColor: colorsTheme.newDate.pickerHoverDateBackgroundColor,
277
- color: colorsTheme.newDate.pickerHoverDateFontColor
276
+ backgroundColor: colorsTheme.dateInput.pickerHoverDateBackgroundColor,
277
+ color: colorsTheme.dateInput.pickerHoverDateFontColor
278
278
  }
279
279
  },
280
280
  daySelected: {
281
- backgroundColor: colorsTheme.newDate.pickerSelectedDateBackgroundColor,
282
- color: colorsTheme.newDate.pickerSelectedDateColor,
281
+ backgroundColor: colorsTheme.dateInput.pickerSelectedDateBackgroundColor,
282
+ color: colorsTheme.dateInput.pickerSelectedDateColor,
283
283
  "&:hover": {
284
- backgroundColor: colorsTheme.newDate.pickerSelectedDateBackgroundColor,
285
- color: colorsTheme.newDate.pickerSelectedDateColor,
284
+ backgroundColor: colorsTheme.dateInput.pickerSelectedDateBackgroundColor,
285
+ color: colorsTheme.dateInput.pickerSelectedDateColor,
286
286
  opacity: "1"
287
287
  }
288
288
  }
289
289
  },
290
290
  MuiPickersYear: {
291
291
  yearSelected: {
292
- color: colorsTheme.newDate.pickerSelectedDateColor,
293
- backgroundColor: colorsTheme.newDate.pickerSelectedDateBackgroundColor,
292
+ color: colorsTheme.dateInput.pickerSelectedDateColor,
293
+ backgroundColor: colorsTheme.dateInput.pickerSelectedDateBackgroundColor,
294
294
  margin: "0px 100px",
295
295
  borderRadius: "20px"
296
296
  },
297
297
  root: {
298
298
  "&:focus": {
299
- color: colorsTheme.newDate.pickerHoverDateFontColor,
300
- backgroundColor: colorsTheme.newDate.pickerHoverDateBackgroundColor
299
+ color: colorsTheme.dateInput.pickerHoverDateFontColor,
300
+ backgroundColor: colorsTheme.dateInput.pickerHoverDateBackgroundColor
301
301
  }
302
302
  }
303
303
  },
@@ -314,7 +314,7 @@ var DxcNewDate = _react["default"].forwardRef(function (_ref, ref) {
314
314
  theme: dateTheme
315
315
  }, _react["default"].createElement(_pickers.MuiPickersUtilsProvider, {
316
316
  utils: _dateFns["default"]
317
- }, _react["default"].createElement(StyledDPicker, null, _react["default"].createElement(_NewInputText["default"], {
317
+ }, _react["default"].createElement(StyledDPicker, null, _react["default"].createElement(_TextInput["default"], {
318
318
  label: label,
319
319
  name: name,
320
320
  value: value !== null && value !== void 0 ? value : innerValue,
@@ -373,7 +373,7 @@ var sizes = {
373
373
 
374
374
  var StyledDPicker = _styledComponents["default"].div(_templateObject());
375
375
 
376
- DxcNewDate.propTypes = {
376
+ DxcDateInput.propTypes = {
377
377
  label: _propTypes["default"].string,
378
378
  name: _propTypes["default"].string,
379
379
  value: _propTypes["default"].string,
@@ -396,5 +396,5 @@ DxcNewDate.propTypes = {
396
396
  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
397
397
  tabIndex: _propTypes["default"].number
398
398
  };
399
- var _default = DxcNewDate;
399
+ var _default = DxcDateInput;
400
400
  exports["default"] = _default;