@dxc-technology/halstack-react 0.0.0-b3da1a9 → 0.0.0-b3de035

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 (51) hide show
  1. package/dist/ThemeContext.js +7 -7
  2. package/dist/V3Select/V3Select.js +549 -0
  3. package/dist/V3Select/index.d.ts +27 -0
  4. package/dist/V3Textarea/index.d.ts +27 -0
  5. package/dist/accordion/index.d.ts +28 -0
  6. package/dist/accordion-group/index.d.ts +16 -0
  7. package/dist/box/index.d.ts +25 -0
  8. package/dist/button/index.d.ts +24 -0
  9. package/dist/card/index.d.ts +22 -0
  10. package/dist/checkbox/index.d.ts +24 -0
  11. package/dist/chip/index.d.ts +22 -0
  12. package/dist/common/variables.js +125 -129
  13. package/dist/date/Date.js +6 -6
  14. package/dist/date/index.d.ts +27 -0
  15. package/dist/dialog/index.d.ts +18 -0
  16. package/dist/dropdown/index.d.ts +26 -0
  17. package/dist/file-input/FileItem.js +8 -1
  18. package/dist/file-input/index.d.ts +1 -1
  19. package/dist/footer/index.d.ts +25 -0
  20. package/dist/header/index.d.ts +25 -0
  21. package/dist/heading/index.d.ts +17 -0
  22. package/dist/input-text/index.d.ts +36 -0
  23. package/dist/link/index.d.ts +23 -0
  24. package/dist/main.d.ts +36 -4
  25. package/dist/main.js +8 -8
  26. package/dist/paginator/Paginator.js +3 -3
  27. package/dist/paginator/index.d.ts +20 -0
  28. package/dist/password-input/PasswordInput.js +6 -1
  29. package/dist/progress-bar/index.d.ts +18 -0
  30. package/dist/radio/index.d.ts +23 -0
  31. package/dist/resultsetTable/index.d.ts +19 -0
  32. package/dist/select/Select.js +822 -302
  33. package/dist/{new-select → select}/index.d.ts +1 -1
  34. package/dist/sidenav/index.d.ts +13 -0
  35. package/dist/slider/index.d.ts +29 -0
  36. package/dist/spinner/index.d.ts +17 -0
  37. package/dist/switch/index.d.ts +24 -0
  38. package/dist/table/index.d.ts +13 -0
  39. package/dist/tabs/index.d.ts +19 -0
  40. package/dist/tag/index.d.ts +24 -0
  41. package/dist/text-input/TextInput.js +3 -0
  42. package/dist/toggle/index.d.ts +21 -0
  43. package/dist/toggle-group/index.d.ts +21 -0
  44. package/dist/upload/Upload.js +3 -3
  45. package/dist/upload/index.d.ts +15 -0
  46. package/dist/wizard/index.d.ts +18 -0
  47. package/package.json +1 -1
  48. package/test/Date.test.js +34 -36
  49. package/test/Upload.test.js +4 -4
  50. package/test/{Select.test.js → V3Select.test.js} +12 -12
  51. package/dist/new-select/NewSelect.js +0 -1085
@@ -0,0 +1,28 @@
1
+ type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2
+ type Margin = {
3
+ top?: Space;
4
+ bottom?: Space;
5
+ left?: Space;
6
+ right?: Space;
7
+ };
8
+ type Padding = {
9
+ top?: Space;
10
+ bottom?: Space;
11
+ left?: Space;
12
+ right?: Space;
13
+ };
14
+
15
+ type Props = {
16
+ label?: string;
17
+ iconSrc?: string;
18
+ icon?: any;
19
+ assistiveText?: string;
20
+ disabled?: boolean;
21
+ onChange?: void;
22
+ isExpanded?: boolean;
23
+ margin?: Space | Margin;
24
+ padding?: Space | Padding;
25
+ tabIndex?: number;
26
+ };
27
+
28
+ export default function DxcAccordion(props: Props): JSX.Element;
@@ -0,0 +1,16 @@
1
+ type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2
+ type Margin = {
3
+ top?: Space;
4
+ bottom?: Space;
5
+ left?: Space;
6
+ right?: Space;
7
+ };
8
+
9
+ type Props = {
10
+ disabled?: boolean;
11
+ onActiveChange?: void;
12
+ indexActive?: number;
13
+ margin?: Space | Margin;
14
+ };
15
+
16
+ export default function DxcAccordionGroup(props: Props): JSX.Element;
@@ -0,0 +1,25 @@
1
+ type Size = "small" | "medium" | "large" | "fillParent" | "fitContent";
2
+ type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
+ type Margin = {
4
+ top?: Space;
5
+ bottom?: Space;
6
+ left?: Space;
7
+ right?: Space;
8
+ };
9
+ type Padding = {
10
+ top?: Space;
11
+ bottom?: Space;
12
+ left?: Space;
13
+ right?: Space;
14
+ };
15
+
16
+
17
+ type Props = {
18
+ shadowDepth?: 0 | 1 | 2;
19
+ margin?: Space | Margin;
20
+ padging?: Space | Padding;
21
+ display: string;
22
+ size: Size;
23
+ };
24
+
25
+ export default function DxcBox(props: Props): JSX.Element;
@@ -0,0 +1,24 @@
1
+ type Size = "small" | "medium" | "large" | "fillParent" | "fitContent";
2
+ type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
+ type Margin = {
4
+ top?: Space;
5
+ bottom?: Space;
6
+ left?: Space;
7
+ right?: Space;
8
+ };
9
+
10
+ type Props = {
11
+ label?: string;
12
+ mode?: "primary" | "secondary" | "text";
13
+ disabled?: boolean;
14
+ iconPosition?: "before" | "after";
15
+ type?: "button" | "reset" | "submit";
16
+ iconSrc?: string;
17
+ icon?: any;
18
+ onClick?: void;
19
+ margin?: Space | Margin;
20
+ size?: Size;
21
+ tabIndex?: number;
22
+ };
23
+
24
+ export default function DxcButton(props: Props): JSX.Element;
@@ -0,0 +1,22 @@
1
+ type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2
+ type Margin = {
3
+ top?: Space;
4
+ bottom?: Space;
5
+ left?: Space;
6
+ right?: Space;
7
+ };
8
+
9
+ type Props = {
10
+ imageSrc?: string;
11
+ margin?: Space | Margin;
12
+ contentPadding?: any;
13
+ linkHref?: string;
14
+ onClick?: void;
15
+ imageBgColor?: string;
16
+ imagePadding?: any;
17
+ imagePosition?: "before" | "after";
18
+ outlined?: boolean;
19
+ imageCover?: boolean;
20
+ };
21
+
22
+ export default function DxcCard(props: Props): JSX.Element;
@@ -0,0 +1,24 @@
1
+ type Size = "small" | "medium" | "large" | "fillParent" | "fitContent";
2
+ type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
+ type Margin = {
4
+ top?: Space;
5
+ bottom?: Space;
6
+ left?: Space;
7
+ right?: Space;
8
+ };
9
+
10
+ type Props = {
11
+ checked?: boolean;
12
+ value?: any;
13
+ label?: string;
14
+ labelPosition?: "before" | "after";
15
+ name?: string,
16
+ disabled?: boolean;
17
+ onChange?: void;
18
+ required?: boolean;
19
+ margin?: Space | Margin;
20
+ size?: Size;
21
+ tabIndex?: number;
22
+ };
23
+
24
+ export default function DxcCheckbox(props: Props): JSX.Element;
@@ -0,0 +1,22 @@
1
+ type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2
+ type Margin = {
3
+ top?: Space;
4
+ bottom?: Space;
5
+ left?: Space;
6
+ right?: Space;
7
+ };
8
+
9
+ type Props = {
10
+ label?: string;
11
+ suffixIcon?: any;
12
+ preffixIcon?: any;
13
+ suffixIconSrc?: string;
14
+ onClickSuffix?: void;
15
+ prefixIconSrc?: string;
16
+ onClickPrefix?: void;
17
+ disabled?: boolean;
18
+ margin?: Space | Margin;
19
+ tabIndex?: number;
20
+ };
21
+
22
+ export default function DxcChip(props: Props): JSX.Element;
@@ -40,6 +40,7 @@ var globalTokens = {
40
40
  hal_blue_l_45: "#0086e6",
41
41
  hal_blue_s_35: "#0067b3",
42
42
  hal_blue_d_20: "#003c66",
43
+ color_blue_200: "#cceaff",
43
44
  color_blue_500: "#33AAFF",
44
45
  color_blue_50: "#f5fbff",
45
46
  hal_red_l_95: "#ffe6e9",
@@ -50,6 +51,7 @@ var globalTokens = {
50
51
  hal_red_d_20: "#65010e",
51
52
  color_red_700: "#ffccd3",
52
53
  color_red_50: "#FFF5F6",
54
+ color_red_600: "#fe0123",
53
55
  hal_green_l_95: "#eafaef",
54
56
  hal_green_l_80: "#acecbe",
55
57
  hal_green_s_39: "#24a148",
@@ -539,7 +541,11 @@ var componentTokens = {
539
541
  dropBorderRadius: globalTokens.border_radius_large,
540
542
  fileItemBorderThickness: globalTokens.border_width_1,
541
543
  fileItemBorderStyle: globalTokens.border_solid,
542
- fileItemBorderRadius: globalTokens.border_radius_medium
544
+ fileItemBorderRadius: globalTokens.border_radius_medium,
545
+ hoverDeleteFileItemBackgroundColor: globalTokens.hal_grey_l_95,
546
+ activeDeleteFileItemBackgroundColor: globalTokens.hal_grey_l_80,
547
+ errorHoverDeleteFileItemBackgroundColor: globalTokens.hal_red_l_95,
548
+ errorActiveDeleteFileItemBackgroundColor: globalTokens.hal_red_s_41
543
549
  },
544
550
  footer: {
545
551
  height: "124px",
@@ -709,7 +715,7 @@ var componentTokens = {
709
715
  disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
710
716
  errorBorderColor: globalTokens.hal_red_s_41,
711
717
  errorBorderColorOnDark: globalTokens.hal_red_l_60,
712
- hoverErrorBorderColor: "#fe0123",
718
+ hoverErrorBorderColor: globalTokens.color_red_600,
713
719
  hoverErrorBorderColorOnDark: "#fe677b",
714
720
  errorMessageColor: globalTokens.hal_red_s_41,
715
721
  errorMessageColorOnDark: globalTokens.hal_red_l_60,
@@ -868,6 +874,87 @@ var componentTokens = {
868
874
  fontWeight: globalTokens.type_regular
869
875
  },
870
876
  select: {
877
+ fontFamily: globalTokens.type_sans,
878
+ disabledColor: globalTokens.hal_grey_l_60,
879
+ enabledInputBorderColor: globalTokens.hal_black,
880
+ hoverInputBorderColor: globalTokens.hal_purple_l_65,
881
+ focusInputBorderColor: globalTokens.hal_blue_l_50,
882
+ errorInputBorderColor: globalTokens.hal_red_s_41,
883
+ hoverInputErrorBorderColor: globalTokens.color_red_600,
884
+ disabledInputBorderColor: globalTokens.hal_grey_l_60,
885
+ errorColor: globalTokens.hal_red_s_41,
886
+ labelFontColor: globalTokens.hal_black,
887
+ labelFontSize: globalTokens.type_scale_02,
888
+ labelFontStyle: globalTokens.type_normal,
889
+ labelFontWeight: globalTokens.type_semibold,
890
+ labelLineHeight: globalTokens.type_leading_loose_01,
891
+ optionalLabelFontWeight: globalTokens.type_regular,
892
+ // new
893
+ helperTextFontColor: globalTokens.hal_black,
894
+ helperTextFontSize: globalTokens.type_scale_01,
895
+ helperTextFontStyle: globalTokens.type_normal,
896
+ helperTextFontWeight: globalTokens.type_regular,
897
+ helperTextLineHeight: globalTokens.type_leading_normal,
898
+ placeholderFontColor: "#000000b3",
899
+ valueFontColor: globalTokens.hal_black,
900
+ valueFontSize: globalTokens.type_scale_03,
901
+ valueFontStyle: globalTokens.type_normal,
902
+ valueFontWeight: globalTokens.type_regular,
903
+ actionIconColor: globalTokens.hal_black,
904
+ // new
905
+ hoverActionIconColor: globalTokens.hal_black,
906
+ activeActionIconColor: globalTokens.hal_black,
907
+ actionBackgroundColor: globalTokens.transparent,
908
+ hoverActionBackgroundColor: globalTokens.hal_grey_l_95,
909
+ activeActionBackgroundColor: globalTokens.hal_grey_l_80,
910
+ disabledActionBackgroundColor: globalTokens.transparent,
911
+ errorMessageFontSize: globalTokens.type_scale_01,
912
+ errorMessagetFontStyle: globalTokens.type_normal,
913
+ errorMessageFontWeight: globalTokens.type_regular,
914
+ errorMessagetLineHeight: globalTokens.type_leading_normal,
915
+ listItemFontColor: globalTokens.hal_black,
916
+ listItemFontSize: globalTokens.type_scale_02,
917
+ listItemFontStyle: globalTokens.type_normal,
918
+ listItemFontWeight: globalTokens.type_regular,
919
+ listItemIconColor: globalTokens.hal_black,
920
+ listGroupItemFontWeight: globalTokens.type_semibold,
921
+ listItemDividerColor: globalTokens.hal_grey_l_90,
922
+ focusListItemBorderColor: globalTokens.hal_blue_l_50,
923
+ // new
924
+ systemMessageFontColor: globalTokens.hal_grey_s_40,
925
+ // new
926
+ collapseIndicatorColor: globalTokens.hal_black,
927
+ itemListBackgroundColor: globalTokens.hal_white,
928
+ // new
929
+ itemListBorderColor: globalTokens.hal_grey_l_75,
930
+ // new
931
+ selectedListItemBackgroundColor: globalTokens.hal_blue_l_95,
932
+ selectedHoverListItemBackgroundColor: globalTokens.color_blue_200,
933
+ selectedActiveListItemBackgroundColor: globalTokens.hal_blue_l_80,
934
+ selectedListItemIconColor: globalTokens.hal_blue_d_20,
935
+ unselectedHoverListItemBackgroundColor: globalTokens.hal_grey_l_95,
936
+ unselectedActiveListItemBackgroundColor: globalTokens.hal_grey_l_90,
937
+ selectionIndicatorFontColor: globalTokens.hal_black,
938
+ // new
939
+ selectionIndicatorFontSize: "11px",
940
+ // new
941
+ selectionIndicatorFontStyle: globalTokens.type_regular,
942
+ // new
943
+ selectionIndicatorFontWeight: globalTokens.type_normal,
944
+ // new
945
+ selectionIndicatorBorderColor: globalTokens.hal_grey_l_75,
946
+ selectionIndicatorBackgroundColor: globalTokens.color_grey_50,
947
+ enabledSelectionIndicatorActionBackgroundColor: globalTokens.transparent,
948
+ enabledSelectionIndicatorActionIconColor: globalTokens.hal_black,
949
+ // new
950
+ hoverSelectionIndicatorActionBackgroundColor: globalTokens.hal_grey_l_95,
951
+ hoverSelectionIndicatorActionIconColor: globalTokens.hal_black,
952
+ // new
953
+ activeSelectionIndicatorActionBackgroundColor: globalTokens.hal_grey_l_80,
954
+ activeSelectionIndicatorActionIconColor: globalTokens.hal_black // new
955
+
956
+ },
957
+ V3Select: {
871
958
  fontFamily: globalTokens.type_sans,
872
959
  assistiveTextFontColor: globalTokens.hal_black,
873
960
  assistiveTextFontColorOnDark: globalTokens.hal_white,
@@ -926,97 +1013,6 @@ var componentTokens = {
926
1013
  focusColor: globalTokens.hal_blue_l_50,
927
1014
  focusColorOnDark: globalTokens.hal_blue_l_50
928
1015
  },
929
- newSelect: {
930
- fontFamily: globalTokens.type_sans,
931
- enabledBorderColor: globalTokens.hal_black,
932
- enabledBorderColorOnDark: globalTokens.hal_white,
933
- hoverBorderColor: globalTokens.hal_purple_l_65,
934
- hoverBorderColorOnDark: globalTokens.hal_purple_l_65,
935
- focusBorderColor: globalTokens.hal_blue_l_50,
936
- focusBorderColorOnDark: globalTokens.hal_blue_l_50,
937
- disabledBorderColor: globalTokens.hal_grey_l_60,
938
- disabledBorderColorOnDark: globalTokens.hal_grey_l_60,
939
- disabledContainerFillColor: globalTokens.hal_grey_l_95,
940
- disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
941
- errorBorderColor: globalTokens.hal_red_s_41,
942
- errorBorderColorOnDark: globalTokens.hal_red_l_60,
943
- hoverErrorBorderColor: "#fe0123",
944
- hoverErrorBorderColorOnDark: "#fe677b",
945
- errorMessageColor: globalTokens.hal_red_s_41,
946
- errorMessageColorOnDark: globalTokens.hal_red_l_60,
947
- errorIconColor: globalTokens.hal_red_s_41,
948
- errorIconColorOnDark: globalTokens.hal_red_l_60,
949
- labelFontColor: globalTokens.hal_black,
950
- labelFontColorOnDark: globalTokens.hal_white,
951
- labelFontSize: globalTokens.type_scale_02,
952
- labelFontStyle: globalTokens.type_normal,
953
- labelFontWeight: globalTokens.type_semibold,
954
- disabledLabelFontColor: globalTokens.hal_grey_l_60,
955
- disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
956
- optionalLabelFontWeight: globalTokens.type_regular,
957
- helperTextFontColor: globalTokens.hal_black,
958
- helperTextFontColorOnDark: globalTokens.hal_white,
959
- helperTextFontSize: globalTokens.type_scale_01,
960
- helperTextFontStyle: globalTokens.type_normal,
961
- helperTextFontWeight: globalTokens.type_regular,
962
- disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
963
- disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
964
- placeholderFontColor: "#808080",
965
- placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
966
- disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
967
- disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
968
- valueFontColor: globalTokens.hal_black,
969
- valueFontColorOnDark: globalTokens.hal_white,
970
- valueFontSize: globalTokens.type_scale_03,
971
- valueFontStyle: globalTokens.type_normal,
972
- valueFontWeight: globalTokens.type_regular,
973
- disabledValueFontColor: globalTokens.hal_grey_l_60,
974
- disabledValueFontColorOnDark: globalTokens.hal_grey_l_60,
975
- actionIconColor: globalTokens.hal_black,
976
- actionIconColorOnDark: globalTokens.hal_white,
977
- disabledActionIconColor: globalTokens.hal_grey_l_60,
978
- disabledActionIconColorOnDark: globalTokens.hal_grey_l_60,
979
- hoverActionIconColor: globalTokens.hal_black,
980
- hoverActionIconColorOnDark: globalTokens.hal_white,
981
- focusActionIconColor: globalTokens.hal_black,
982
- focusActionIconColorOnDark: globalTokens.hal_white,
983
- activeActionIconColor: globalTokens.hal_black,
984
- activeActionIconColorOnDark: globalTokens.hal_black,
985
- actionBackgroundColor: globalTokens.transparent,
986
- actionBackgroundColorOnDark: globalTokens.transparent,
987
- disabledActionBackgroundColor: globalTokens.transparent,
988
- disabledActionBackgroundColorOnDark: globalTokens.transparent,
989
- hoverActionBackgroundColor: globalTokens.hal_grey_l_95,
990
- hoverActionBackgroundColorOnDark: globalTokens.hal_grey_s_40,
991
- focusActionBorderColor: globalTokens.hal_blue_l_50,
992
- focusActionBorderColorOnDark: globalTokens.hal_blue_l_50,
993
- activeActionBackgroundColor: globalTokens.hal_grey_l_80,
994
- activeActionBackgroundColorOnDark: globalTokens.hal_grey_l_60,
995
- listOptionFontColor: globalTokens.hal_black,
996
- listOptionFontSize: globalTokens.type_scale_02,
997
- listOptionFontStyle: globalTokens.type_normal,
998
- listOptionFontWeight: globalTokens.type_regular,
999
- systemMessageFontColor: globalTokens.hal_grey_s_40,
1000
- errorMessageBorderColor: globalTokens.hal_red_s_41,
1001
- errorMessageBackgroundColor: globalTokens.hal_red_l_95,
1002
- hoverListOptionBackgroundColor: globalTokens.hal_grey_l_95,
1003
- activeListOptionBackgroundColor: globalTokens.hal_grey_l_90,
1004
- arrowColor: globalTokens.hal_black,
1005
- arrowColorOnDark: globalTokens.hal_white,
1006
- disabledArrowColor: globalTokens.hal_grey_l_60,
1007
- disabledArrowColorOnDark: globalTokens.hal_grey_l_60,
1008
- enabledListBorderColor: globalTokens.hal_grey_l_80,
1009
- listOptionBorderBottomColor: globalTokens.hal_grey_l_90,
1010
- selectedListOptionBackgroundColor: globalTokens.hal_grey_l_90,
1011
- selectionIndicatorBorderColor: globalTokens.hal_grey_l_75,
1012
- selectionIndicatorBackgroundColor: globalTokens.color_grey_50,
1013
- enabledSelectionIndicatorActionBackgroundColor: globalTokens.transparent,
1014
- enabledSelectionIndicatorActionIconColor: globalTokens.hal_black,
1015
- hoverSelectionIndicatorActionBackgroundColor: globalTokens.hal_grey_l_95,
1016
- hoverSelectionIndicatorActionIconColor: globalTokens.hal_black,
1017
- activeSelectionIndicatorActionBackgroundColor: globalTokens.hal_grey_l_80,
1018
- activeSelectionIndicatorActionIconColor: globalTokens.hal_black
1019
- },
1020
1016
  sidenav: {
1021
1017
  backgroundColor: globalTokens.hal_grey_l_95,
1022
1018
  arrowContainerColor: globalTokens.hal_grey_l_90,
@@ -1289,7 +1285,7 @@ var componentTokens = {
1289
1285
  disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
1290
1286
  errorBorderColor: globalTokens.hal_red_s_41,
1291
1287
  errorBorderColorOnDark: globalTokens.hal_red_l_60,
1292
- hoverErrorBorderColor: "#fe0123",
1288
+ hoverErrorBorderColor: globalTokens.color_red_600,
1293
1289
  hoverErrorBorderColorOnDark: "#fe677b",
1294
1290
  errorMessageColor: globalTokens.hal_red_s_41,
1295
1291
  errorMessageColorOnDark: globalTokens.hal_red_l_60,
@@ -1322,6 +1318,41 @@ var componentTokens = {
1322
1318
  disabledValueFontColor: globalTokens.hal_grey_l_60,
1323
1319
  disabledValueFontColorOnDark: globalTokens.hal_grey_l_60
1324
1320
  },
1321
+ V3Textarea: {
1322
+ fontFamily: globalTokens.type_sans,
1323
+ assistiveTextFontSize: globalTokens.type_scale_01,
1324
+ assistiveTextFontStyle: globalTokens.type_normal,
1325
+ assistiveTextFontWeight: globalTokens.type_regular,
1326
+ assistiveTextFontColor: globalTokens.black,
1327
+ assistiveTextFontColorOnDark: globalTokens.white,
1328
+ assistiveTextLetterSpacing: "0.03333em",
1329
+ disabledColor: globalTokens.lighterBlack,
1330
+ disabledColorOnDark: "#575757",
1331
+ errorColor: globalTokens.red,
1332
+ errorColorOnDark: globalTokens.hal_red_l_60,
1333
+ scrollBarThumbColor: globalTokens.darkGrey,
1334
+ scrollBarThumbColorOnDark: globalTokens.white,
1335
+ scrollBarTrackColor: globalTokens.lightGrey,
1336
+ scrollBarTrackColorOnDark: "#999999",
1337
+ labelFontSize: globalTokens.type_scale_03,
1338
+ labelFontStyle: globalTokens.type_normal,
1339
+ labelFontWeight: globalTokens.type_regular,
1340
+ labelFontColor: globalTokens.black,
1341
+ labelFontColorOnDark: globalTokens.white,
1342
+ labelLetterSpacing: "0.00938em",
1343
+ valueFontSize: globalTokens.type_scale_03,
1344
+ valueFontStyle: globalTokens.type_normal,
1345
+ valueFontWeight: globalTokens.type_regular,
1346
+ valueFontColor: globalTokens.black,
1347
+ valueFontColorOnDark: globalTokens.white,
1348
+ valueLetterSpacing: globalTokens.type_spacing_normal,
1349
+ valueLineHeight: "1.1875em",
1350
+ underlineColor: globalTokens.black,
1351
+ underlineColorOnDark: globalTokens.white,
1352
+ underlineFocusColor: globalTokens.black,
1353
+ underlineFocusColorOnDark: globalTokens.white,
1354
+ underlineThickness: "1px"
1355
+ },
1325
1356
  toggleGroup: {
1326
1357
  containerBackgroundColor: globalTokens.color_grey_50,
1327
1358
  containerBorderColor: globalTokens.hal_grey_l_60,
@@ -1433,41 +1464,6 @@ var componentTokens = {
1433
1464
  uploadedFilesSubtitleFontColor: globalTokens.darkGrey,
1434
1465
  uploadedFilesNumberFontWeight: globalTokens.type_bold
1435
1466
  },
1436
- V3Textarea: {
1437
- fontFamily: globalTokens.type_sans,
1438
- assistiveTextFontSize: globalTokens.type_scale_01,
1439
- assistiveTextFontStyle: globalTokens.type_normal,
1440
- assistiveTextFontWeight: globalTokens.type_regular,
1441
- assistiveTextFontColor: globalTokens.black,
1442
- assistiveTextFontColorOnDark: globalTokens.white,
1443
- assistiveTextLetterSpacing: "0.03333em",
1444
- disabledColor: globalTokens.lighterBlack,
1445
- disabledColorOnDark: "#575757",
1446
- errorColor: globalTokens.red,
1447
- errorColorOnDark: globalTokens.hal_red_l_60,
1448
- scrollBarThumbColor: globalTokens.darkGrey,
1449
- scrollBarThumbColorOnDark: globalTokens.white,
1450
- scrollBarTrackColor: globalTokens.lightGrey,
1451
- scrollBarTrackColorOnDark: "#999999",
1452
- labelFontSize: globalTokens.type_scale_03,
1453
- labelFontStyle: globalTokens.type_normal,
1454
- labelFontWeight: globalTokens.type_regular,
1455
- labelFontColor: globalTokens.black,
1456
- labelFontColorOnDark: globalTokens.white,
1457
- labelLetterSpacing: "0.00938em",
1458
- valueFontSize: globalTokens.type_scale_03,
1459
- valueFontStyle: globalTokens.type_normal,
1460
- valueFontWeight: globalTokens.type_regular,
1461
- valueFontColor: globalTokens.black,
1462
- valueFontColorOnDark: globalTokens.white,
1463
- valueLetterSpacing: globalTokens.type_spacing_normal,
1464
- valueLineHeight: "1.1875em",
1465
- underlineColor: globalTokens.black,
1466
- underlineColorOnDark: globalTokens.white,
1467
- underlineFocusColor: globalTokens.black,
1468
- underlineFocusColorOnDark: globalTokens.white,
1469
- underlineThickness: "1px"
1470
- },
1471
1467
  wizard: {
1472
1468
  disabledBackgroundColor: globalTokens.lightGrey,
1473
1469
  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 _V3DxcDate$propTypes;
44
+ var _DxcDate$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 V3DxcDate = function V3DxcDate(_ref) {
56
+ var DxcDate = function DxcDate(_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
- V3DxcDate.propTypes = (_V3DxcDate$propTypes = {
359
+ DxcDate.propTypes = (_DxcDate$propTypes = {
360
360
  value: _propTypes["default"].string,
361
361
  format: _propTypes["default"].string,
362
362
  label: _propTypes["default"].string,
@@ -369,11 +369,11 @@ V3DxcDate.propTypes = (_V3DxcDate$propTypes = {
369
369
  invalid: _propTypes["default"].bool,
370
370
  onChange: _propTypes["default"].func,
371
371
  onBlur: _propTypes["default"].func
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({
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({
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"])(_V3DxcDate$propTypes, "tabIndex", _propTypes["default"].number), _V3DxcDate$propTypes);
378
- var _default = V3DxcDate;
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;
379
379
  exports["default"] = _default;
@@ -0,0 +1,27 @@
1
+ type Size = "small" | "medium" | "large" | "fillParent";
2
+ type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
+ type Margin = {
4
+ top?: Space;
5
+ bottom?: Space;
6
+ left?: Space;
7
+ right?: Space;
8
+ };
9
+
10
+ type Props = {
11
+ value?: string;
12
+ format?: string;
13
+ label?: string;
14
+ name?: string,
15
+ disabled?: boolean;
16
+ required?: boolean;
17
+ assistiveText?: string;
18
+ invalid?: boolean;
19
+ onChange?: void;
20
+ placeholder?: string;
21
+ onBlur?: void;
22
+ margin?: Space | Margin;
23
+ size?: Size;
24
+ tabIndex?: number;
25
+ };
26
+
27
+ export default function DxcDate(props: Props): JSX.Element;
@@ -0,0 +1,18 @@
1
+ type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2
+ type Padding = {
3
+ top?: Space;
4
+ bottom?: Space;
5
+ left?: Space;
6
+ right?: Space;
7
+ };
8
+
9
+ type Props = {
10
+ isCloseVisible?: boolean;
11
+ onCloseClick?: void;
12
+ overlay?: boolean;
13
+ onBackgroundClick?: void;
14
+ padding?: Padding,
15
+ tabIndex?: number;
16
+ };
17
+
18
+ export default function DxcDialog(props: Props): JSX.Element;
@@ -0,0 +1,26 @@
1
+ type Size = "small" | "medium" | "large" | "fillParent" | "fitContent";
2
+ type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
+ type Margin = {
4
+ top?: Space;
5
+ bottom?: Space;
6
+ left?: Space;
7
+ right?: Space;
8
+ };
9
+
10
+ type Props = {
11
+ options?: any;
12
+ optionsIconPosition?: "before" | "after";
13
+ icon?: any;
14
+ iconSrc?: string;
15
+ iconPosition?: "before" | "after";
16
+ label?: string;
17
+ disabled?: boolean;
18
+ caretHidden?: boolean;
19
+ onSelectOption?: void;
20
+ expandOnHover?: boolean;
21
+ margin?: Space | Margin;
22
+ size?: Size;
23
+ tabIndex?: number;
24
+ };
25
+
26
+ export default function DxcDropdown(props: Props): JSX.Element;
@@ -30,7 +30,7 @@ function _templateObject10() {
30
30
  }
31
31
 
32
32
  function _templateObject9() {
33
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-wrap: wrap;\n align-content: center;\n height: 24px;\n width: 24px;\n font-size: 1rem;\n font-family: ", ";\n border: 1px solid transparent;\n border-radius: 4px;\n margin-left: 4px;\n background-color: transparent;\n padding: 3px;\n cursor: pointer;\n svg {\n line-height: 18px;\n }\n"]);
33
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-wrap: wrap;\n align-content: center;\n height: 24px;\n width: 24px;\n font-size: 1rem;\n font-family: ", ";\n border: 1px solid transparent;\n border-radius: 4px;\n margin-left: 4px;\n background-color: transparent;\n padding: 3px;\n cursor: pointer;\n svg {\n line-height: 18px;\n }\n &:hover {\n background-color: ", ";\n }\n &:focus {\n background-color: ", ";\n }\n &:active {\n background-color: ", ";\n }\n"]);
34
34
 
35
35
  _templateObject9 = function _templateObject9() {
36
36
  return data;
@@ -194,6 +194,7 @@ var FileItem = function FileItem(_ref) {
194
194
  }, name), error && _react["default"].createElement(ErrorIcon, {
195
195
  "aria-label": "Error"
196
196
  }, errorIcon), _react["default"].createElement(DeleteIcon, {
197
+ error: error,
197
198
  onClick: function onClick() {
198
199
  return onDelete(name);
199
200
  },
@@ -251,6 +252,12 @@ var ErrorIcon = _styledComponents["default"].span(_templateObject8());
251
252
 
252
253
  var DeleteIcon = _styledComponents["default"].button(_templateObject9(), function (props) {
253
254
  return props.theme.fontFamily;
255
+ }, function (props) {
256
+ return props.error ? props.theme.errorHoverDeleteFileItemBackgroundColor : props.theme.hoverDeleteFileItemBackgroundColor;
257
+ }, function (props) {
258
+ return props.error ? props.theme.errorHoverDeleteFileItemBackgroundColor : props.theme.hoverDeleteFileItemBackgroundColor;
259
+ }, function (props) {
260
+ return props.error ? props.theme.errorActiveDeleteFileItemBackgroundColor : props.theme.activeDeleteFileItemBackgroundColor;
254
261
  });
255
262
 
256
263
  var ErrorMessage = _styledComponents["default"].span(_templateObject10(), function (props) {
@@ -78,4 +78,4 @@ type Props = {
78
78
  tabIndex?: number;
79
79
  };
80
80
 
81
- export default function DxcTextInput(props: Props): JSX.Element;
81
+ export default function DxcFileInput(props: Props): JSX.Element;
@@ -0,0 +1,25 @@
1
+ type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2
+ type Margin = {
3
+ top?: Space;
4
+ bottom?: Space;
5
+ left?: Space;
6
+ right?: Space;
7
+ };
8
+ type Padding = {
9
+ top?: Space;
10
+ bottom?: Space;
11
+ left?: Space;
12
+ right?: Space;
13
+ };
14
+
15
+ type Props = {
16
+ socialLinks?: any;
17
+ bottomLinks?: any;
18
+ copyright?: string;
19
+ padding?: Space | Padding;
20
+ margin?: Space | Margin;
21
+ tabIndex?: number;
22
+
23
+ };
24
+
25
+ export default function DxcFooter(props: Props): JSX.Element;