@dxc-technology/halstack-react 0.0.0-506547 → 0.0.0-5145b03

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 (125) hide show
  1. package/README.md +1 -1
  2. package/dist/BackgroundColorContext.js +46 -0
  3. package/dist/ThemeContext.js +211 -141
  4. package/dist/V3Textarea/V3Textarea.js +264 -0
  5. package/dist/accordion/Accordion.js +131 -46
  6. package/dist/accordion-group/AccordionGroup.js +36 -9
  7. package/dist/alert/Alert.js +180 -80
  8. package/dist/alert/index.d.ts +51 -0
  9. package/dist/badge/Badge.js +28 -7
  10. package/dist/box/Box.js +29 -18
  11. package/dist/button/Button.js +60 -21
  12. package/dist/card/Card.js +72 -35
  13. package/dist/checkbox/Checkbox.js +97 -26
  14. package/dist/chip/Chip.js +93 -31
  15. package/dist/common/utils.js +2 -22
  16. package/dist/common/variables.js +1406 -203
  17. package/dist/date/Date.js +74 -52
  18. package/dist/date-input/DateInput.js +400 -0
  19. package/dist/date-input/index.d.ts +95 -0
  20. package/dist/dialog/Dialog.js +54 -31
  21. package/dist/dropdown/Dropdown.js +173 -75
  22. package/dist/file-input/FileInput.js +644 -0
  23. package/dist/file-input/FileItem.js +280 -0
  24. package/dist/file-input/index.d.ts +81 -0
  25. package/dist/footer/Footer.js +73 -44
  26. package/dist/footer/dxc_logo.svg +15 -0
  27. package/dist/header/Header.js +91 -56
  28. package/dist/header/dxc_logo_black.svg +8 -0
  29. package/dist/heading/Heading.js +81 -16
  30. package/dist/input-text/InputText.js +250 -113
  31. package/dist/layout/ApplicationLayout.js +11 -12
  32. package/dist/link/Link.js +84 -34
  33. package/dist/main.d.ts +8 -0
  34. package/dist/main.js +71 -7
  35. package/dist/new-select/NewSelect.js +836 -0
  36. package/dist/new-select/index.d.ts +53 -0
  37. package/dist/new-textarea/NewTextarea.js +369 -0
  38. package/dist/new-textarea/index.d.ts +117 -0
  39. package/dist/number-input/NumberInput.js +136 -0
  40. package/dist/number-input/NumberInputContext.js +16 -0
  41. package/dist/number-input/index.d.ts +113 -0
  42. package/dist/paginator/Paginator.js +64 -29
  43. package/dist/password-input/PasswordInput.js +198 -0
  44. package/dist/password-input/index.d.ts +94 -0
  45. package/dist/progress-bar/ProgressBar.js +91 -33
  46. package/dist/radio/Radio.js +30 -11
  47. package/dist/resultsetTable/ResultsetTable.js +79 -48
  48. package/dist/select/Select.js +225 -144
  49. package/dist/sidenav/Sidenav.js +65 -11
  50. package/dist/slider/Slider.js +198 -61
  51. package/dist/spinner/Spinner.js +246 -57
  52. package/dist/switch/Switch.js +51 -19
  53. package/dist/table/Table.js +49 -21
  54. package/dist/tabs/Tabs.js +58 -17
  55. package/dist/tag/Tag.js +68 -35
  56. package/dist/text-input/TextInput.js +971 -0
  57. package/dist/text-input/index.d.ts +135 -0
  58. package/dist/toggle/Toggle.js +16 -19
  59. package/dist/toggle-group/ToggleGroup.js +141 -37
  60. package/dist/upload/Upload.js +16 -11
  61. package/dist/upload/buttons-upload/ButtonsUpload.js +31 -14
  62. package/dist/upload/dragAndDropArea/DragAndDropArea.js +78 -28
  63. package/dist/upload/file-upload/FileToUpload.js +50 -24
  64. package/dist/upload/files-upload/FilesToUpload.js +16 -16
  65. package/dist/upload/readme.md +2 -2
  66. package/dist/upload/transaction/Transaction.js +44 -24
  67. package/dist/upload/transactions/Transactions.js +38 -20
  68. package/dist/wizard/Wizard.js +125 -42
  69. package/dist/wizard/invalid_icon.svg +4 -5
  70. package/dist/wizard/valid_icon.svg +4 -5
  71. package/package.json +6 -4
  72. package/test/AccordionGroup.test.js +16 -0
  73. package/test/Date.test.js +49 -45
  74. package/test/DateInput.test.js +242 -0
  75. package/test/Dropdown.test.js +15 -0
  76. package/test/FileInput.test.js +201 -0
  77. package/test/InputText.test.js +25 -17
  78. package/test/Link.test.js +3 -2
  79. package/test/NewTextarea.test.js +195 -0
  80. package/test/NumberInput.test.js +259 -0
  81. package/test/Paginator.test.js +1 -1
  82. package/test/PasswordInput.test.js +83 -0
  83. package/test/ResultsetTable.test.js +1 -2
  84. package/test/Select.test.js +44 -24
  85. package/test/Spinner.test.js +5 -0
  86. package/test/TextInput.test.js +732 -0
  87. package/test/ToggleGroup.test.js +5 -1
  88. package/test/Upload.test.js +5 -5
  89. package/test/{TextArea.test.js → V3TextArea.test.js} +6 -7
  90. package/dist/accordion/Accordion.stories.js +0 -207
  91. package/dist/accordion/readme.md +0 -96
  92. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  93. package/dist/accordion-group/readme.md +0 -70
  94. package/dist/alert/Alert.stories.js +0 -158
  95. package/dist/alert/close.svg +0 -4
  96. package/dist/alert/error.svg +0 -4
  97. package/dist/alert/info.svg +0 -4
  98. package/dist/alert/readme.md +0 -43
  99. package/dist/alert/success.svg +0 -4
  100. package/dist/alert/warning.svg +0 -4
  101. package/dist/button/Button.stories.js +0 -224
  102. package/dist/button/readme.md +0 -93
  103. package/dist/common/services/example-service.js +0 -10
  104. package/dist/common/services/example-service.test.js +0 -12
  105. package/dist/date/calendar.svg +0 -1
  106. package/dist/date/calendar_dark.svg +0 -1
  107. package/dist/dialog/Dialog.stories.js +0 -217
  108. package/dist/dialog/readme.md +0 -32
  109. package/dist/dropdown/Dropdown.stories.js +0 -249
  110. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  111. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  112. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  113. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  114. package/dist/dropdown/readme.md +0 -69
  115. package/dist/footer/Footer.stories.js +0 -94
  116. package/dist/footer/dxc_logo_wht.png +0 -0
  117. package/dist/header/dxc_logo_black.png +0 -0
  118. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  119. package/dist/header/dxc_logo_white.png +0 -0
  120. package/dist/input-text/InputText.stories.js +0 -209
  121. package/dist/select/Select.stories.js +0 -235
  122. package/dist/select/readme.md +0 -72
  123. package/dist/slider/Slider.stories.js +0 -241
  124. package/dist/textarea/Textarea.js +0 -224
  125. package/dist/toggle-group/readme.md +0 -82
@@ -17,7 +17,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
17
17
 
18
18
  var _react = _interopRequireWildcard(require("react"));
19
19
 
20
- var _halstackReact = require("@dxc-technology/halstack-react");
20
+ var _main = require("../main");
21
21
 
22
22
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
23
23
 
@@ -31,12 +31,10 @@ var _twitter = _interopRequireDefault(require("./twitter.svg"));
31
31
 
32
32
  var _facebook = _interopRequireDefault(require("./facebook.svg"));
33
33
 
34
- var _utils = require("../common/utils.js");
35
-
36
34
  var _useTheme = _interopRequireDefault(require("../useTheme.js"));
37
35
 
38
36
  function _templateObject10() {
39
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n justify-content: center;\n position: sticky;\n top: 45vh;\n width: 42px;\n min-height: 42px;\n background-color: ", ";\n border-radius: 50%;\n transform: ", ";\n transition: transform 0.4s ease-in-out;\n z-index: 10;\n cursor: pointer;\n & > svg {\n fill: ", ";\n }\n"]);
37
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n justify-content: center;\n position: sticky;\n top: 45vh;\n width: 42px;\n min-height: 42px;\n background-color: ", ";\n border-radius: 50%;\n transform: ", ";\n transition: transform 0.4s ease-in-out;\n z-index: 1250;\n cursor: pointer;\n & > svg {\n fill: ", ";\n }\n"]);
40
38
 
41
39
  _templateObject10 = function _templateObject10() {
42
40
  return data;
@@ -56,7 +54,7 @@ function _templateObject9() {
56
54
  }
57
55
 
58
56
  function _templateObject8() {
59
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: row;\n z-index: 2;\n transform: ", ";\n transition: transform 0.4s ease-in-out;\n height: calc(100vh - 64px);\n position: sticky;\n top: 64px;\n"]);
57
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: row;\n z-index: 1200;\n transform: ", ";\n transition: transform 0.4s ease-in-out;\n height: calc(100vh - 64px);\n position: sticky;\n top: 64px;\n"]);
60
58
 
61
59
  _templateObject8 = function _templateObject8() {
62
60
  return data;
@@ -86,7 +84,7 @@ function _templateObject6() {
86
84
  }
87
85
 
88
86
  function _templateObject5() {
89
- var data = (0, _taggedTemplateLiteral2["default"])(["\n width: 100%;\n display: flex;\n flex-direction: column;\n"]);
87
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n width: 100%;\n min-width: 0;\n display: flex;\n flex-direction: column;\n"]);
90
88
 
91
89
  _templateObject5 = function _templateObject5() {
92
90
  return data;
@@ -116,7 +114,7 @@ function _templateObject3() {
116
114
  }
117
115
 
118
116
  function _templateObject2() {
119
- var data = (0, _taggedTemplateLiteral2["default"])(["\n z-index: 10;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n"]);
117
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n z-index: 1250;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n"]);
120
118
 
121
119
  _templateObject2 = function _templateObject2() {
122
120
  return data;
@@ -156,7 +154,7 @@ var SideNav = function SideNav(props) {
156
154
  var displayArrow = props.displayArrow,
157
155
  mode = props.mode,
158
156
  childProps = (0, _objectWithoutProperties2["default"])(props, ["displayArrow", "mode"]);
159
- return _react["default"].createElement(_halstackReact.DxcSidenav, childProps, childProps.children);
157
+ return _react["default"].createElement(_main.DxcSidenav, childProps, childProps.children);
160
158
  };
161
159
 
162
160
  SideNav.propTypes = {
@@ -171,7 +169,7 @@ SideNav.propTypes = {
171
169
  };
172
170
 
173
171
  var defaultFooter = function defaultFooter() {
174
- return _react["default"].createElement(_halstackReact.DxcFooter, {
172
+ return _react["default"].createElement(_main.DxcFooter, {
175
173
  copyright: "\xA9 DXC Technology ".concat(year, "\u200B\u200B\u200B\u200B. All rights reserved."),
176
174
  bottomLinks: [{
177
175
  href: "https://www.linkedin.com/company/dxctechnology",
@@ -197,7 +195,7 @@ var defaultFooter = function defaultFooter() {
197
195
  };
198
196
 
199
197
  var defaultHeader = function defaultHeader() {
200
- return _react["default"].createElement(_halstackReact.DxcHeader, {
198
+ return _react["default"].createElement(_main.DxcHeader, {
201
199
  underlined: true
202
200
  });
203
201
  };
@@ -225,8 +223,8 @@ var DxcApplicationLayout = function DxcApplicationLayout(_ref4) {
225
223
 
226
224
  var childrenArray = _react["default"].Children.toArray(children);
227
225
 
228
- var header = childTypeExists(childrenArray, _halstackReact.DxcHeader) || childTypeExists(childrenArray, Header) || defaultHeader();
229
- var footer = childTypeExists(childrenArray, _halstackReact.DxcFooter) || childTypeExists(childrenArray, Footer) || defaultFooter();
226
+ var header = childTypeExists(childrenArray, _main.DxcHeader) || childTypeExists(childrenArray, Header) || defaultHeader();
227
+ var footer = childTypeExists(childrenArray, _main.DxcFooter) || childTypeExists(childrenArray, Footer) || defaultFooter();
230
228
  var sideNav = childTypeExists(childrenArray, SideNav);
231
229
  var main = childTypeExists(childrenArray, Main);
232
230
  var displayArrow = sideNav && sideNav.props && sideNav.props.displayArrow;
@@ -278,6 +276,7 @@ var DxcApplicationLayout = function DxcApplicationLayout(_ref4) {
278
276
  }, _react["default"].createElement(HeaderContainer, null, header), _react["default"].createElement(BodyContainer, null, _react["default"].createElement(ContentContainer, null, _react["default"].createElement(SideNavArrowContainer, {
279
277
  isSideNavVisible: isSideNavVisible
280
278
  }, sideNav, _react["default"].createElement(ArrowContainer, null, sideNav && (displayArrow || isResponsive) && _react["default"].createElement(ArrowTrigger, {
279
+ tabIndex: 0,
281
280
  onClick: handleSidenav,
282
281
  isSideNavVisible: isSideNavVisible
283
282
  }, _react["default"].createElement(ArrowIcon, null)))), _react["default"].createElement(MainBodyContainer, null, _react["default"].createElement(MainContent, {
package/dist/link/Link.js CHANGED
@@ -25,8 +25,18 @@ var _variables = require("../common/variables.js");
25
25
 
26
26
  var _useTheme = _interopRequireDefault(require("../useTheme.js"));
27
27
 
28
+ function _templateObject6() {
29
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n ", ";\n overflow: hidden;\n \n img,\n svg {\n height: 100%;\n width: 100%;\n }\n"]);
30
+
31
+ _templateObject6 = function _templateObject6() {
32
+ return data;
33
+ };
34
+
35
+ return data;
36
+ }
37
+
28
38
  function _templateObject5() {
29
- var data = (0, _taggedTemplateLiteral2["default"])(["\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n outline: 0;\n font-family: inherit;\n ", "\n"]);
39
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n ", ";\n"]);
30
40
 
31
41
  _templateObject5 = function _templateObject5() {
32
42
  return data;
@@ -36,7 +46,7 @@ function _templateObject5() {
36
46
  }
37
47
 
38
48
  function _templateObject4() {
39
- var data = (0, _taggedTemplateLiteral2["default"])(["\n text-decoration: none;\n color: ", ";\n"]);
49
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n font-size: ", ";\n font-weight: ", ";\n font-style: ", ";\n font-family: ", ";\n display: inline-flex;\n flex-direction: ", ";\n justify-content: ", ";\n align-items: center;\n max-width: 100%;\n"]);
40
50
 
41
51
  _templateObject4 = function _templateObject4() {
42
52
  return data;
@@ -46,7 +56,7 @@ function _templateObject4() {
46
56
  }
47
57
 
48
58
  function _templateObject3() {
49
- var data = (0, _taggedTemplateLiteral2["default"])(["\n width: 16px;\n height: 16px;\n ", ": 6px;\n overflow: hidden;\n\n img,\n svg {\n height: 100%;\n width: 100%;\n }\n"]);
59
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n font-family: inherit;\n text-decoration-color: transparent;\n\n ", "\n ", "\n color: ", ";\n ", "\n\n &:hover {\n ", "\n }\n &:focus {\n outline-color: ", ";\n outline-width: 2px;\n outline-offset: 1px;\n ", "\n }\n &:active {\n ", "\n }\n"]);
50
60
 
51
61
  _templateObject3 = function _templateObject3() {
52
62
  return data;
@@ -56,7 +66,7 @@ function _templateObject3() {
56
66
  }
57
67
 
58
68
  function _templateObject2() {
59
- var data = (0, _taggedTemplateLiteral2["default"])(["\n width: 16px;\n height: 16px;\n ", ": 6px;\n"]);
69
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n ", "\n\n text-decoration-color: transparent;\n ", "\n\n &:visited {\n color: ", ";\n &:hover {\n ", "\n }\n }\n &:hover {\n ", "\n }\n &:focus {\n outline-color: ", ";\n outline-width: 2px;\n ", "\n }\n &:active {\n ", "\n }\n"]);
60
70
 
61
71
  _templateObject2 = function _templateObject2() {
62
72
  return data;
@@ -66,7 +76,7 @@ function _templateObject2() {
66
76
  }
67
77
 
68
78
  function _templateObject() {
69
- var data = (0, _taggedTemplateLiteral2["default"])(["\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n\n text-decoration: none;\n\n ", "\n\n color: ", ";\n ", "\n ", "\n \n display: inline-flex;\n flex-direction: ", ";\n justify-content: ", ";\n align-items: center;\n\n max-width: 100%;\n font-size: 16px;\n padding-bottom: 2px;\n\n &:hover {\n ", "\n }\n\n &:visited {\n ", "\n }\n"]);
79
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"]);
70
80
 
71
81
  _templateObject = function _templateObject() {
72
82
  return data;
@@ -76,9 +86,7 @@ function _templateObject() {
76
86
  }
77
87
 
78
88
  var DxcLink = function DxcLink(_ref) {
79
- var _ref$underlined = _ref.underlined,
80
- underlined = _ref$underlined === void 0 ? true : _ref$underlined,
81
- _ref$inheritColor = _ref.inheritColor,
89
+ var _ref$inheritColor = _ref.inheritColor,
82
90
  inheritColor = _ref$inheritColor === void 0 ? false : _ref$inheritColor,
83
91
  _ref$disabled = _ref.disabled,
84
92
  disabled = _ref$disabled === void 0 ? false : _ref$disabled,
@@ -93,14 +101,12 @@ var DxcLink = function DxcLink(_ref) {
93
101
  onClick = _ref.onClick,
94
102
  _ref$text = _ref.text,
95
103
  text = _ref$text === void 0 ? "" : _ref$text,
96
- margin = _ref.margin;
104
+ margin = _ref.margin,
105
+ _ref$tabIndex = _ref.tabIndex,
106
+ tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
97
107
  var colorsTheme = (0, _useTheme["default"])();
98
108
 
99
109
  var linkContent = _react["default"].createElement(LinkText, {
100
- underlined: underlined,
101
- inheritColor: inheritColor,
102
- disabled: disabled,
103
- margin: margin,
104
110
  iconPosition: iconPosition
105
111
  }, text, icon ? _react["default"].createElement(LinkIconContainer, {
106
112
  iconPosition: iconPosition
@@ -111,17 +117,25 @@ var DxcLink = function DxcLink(_ref) {
111
117
 
112
118
  return _react["default"].createElement(_styledComponents.ThemeProvider, {
113
119
  theme: colorsTheme.link
120
+ }, _react["default"].createElement(DxcLinkContainer, {
121
+ margin: margin
114
122
  }, onClick ? _react["default"].createElement(StyledButton, {
123
+ type: "button",
115
124
  onClick: !disabled && onClick,
116
- disabled: disabled
125
+ margin: margin,
126
+ disabled: disabled,
127
+ inheritColor: inheritColor
117
128
  }, linkContent) : _react["default"].createElement(StyledLink, {
129
+ tabIndex: tabIndex,
118
130
  href: !disabled && href,
119
131
  target: newWindow ? "_blank" : "_self",
132
+ margin: margin,
133
+ disabled: disabled,
120
134
  inheritColor: inheritColor
121
- }, linkContent));
135
+ }, linkContent)));
122
136
  };
123
137
 
124
- var LinkText = _styledComponents["default"].div(_templateObject(), function (props) {
138
+ var DxcLinkContainer = _styledComponents["default"].div(_templateObject(), function (props) {
125
139
  return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
126
140
  }, function (props) {
127
141
  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
@@ -131,42 +145,77 @@ var LinkText = _styledComponents["default"].div(_templateObject(), function (pro
131
145
  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
132
146
  }, function (props) {
133
147
  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
148
+ });
149
+
150
+ var StyledLink = _styledComponents["default"].a(_templateObject2(), function (props) {
151
+ return props.inheritColor ? "inherit" : !props.disabled ? props.theme.fontColor : props.theme.disabledColor;
134
152
  }, function (props) {
135
- return props.underlined && "padding-bottom: 1px !important; \n border-bottom: 1px solid ".concat(!props.inheritColor ? !props.disabled ? props.theme.underlinedBackgroundColor : props.theme.disabledUnderlinedBackgroundColor : "", ";");
153
+ return props.disabled ? "pointer-events: none;" : "";
136
154
  }, function (props) {
137
- return props.inheritColor ? "inherit" : !props.disabled ? props.theme.fontColor : props.theme.disabledColor;
155
+ return "padding-bottom: ".concat(props.theme.underlineSpacing, ";\n border-bottom: ").concat(props.theme.underlineThickness, " ").concat(props.theme.underlineStyle, " transparent;");
138
156
  }, function (props) {
139
- return !props.underlined ? "text-decoration-color: transparent;" : "";
157
+ return !props.inheritColor ? props.theme.visitedFontColor : "";
140
158
  }, function (props) {
141
- return props.disabled ? "pointer-events: none;" : "";
159
+ return "color: ".concat(props.theme.visitedFontColor, ";\n border-bottom-color: ").concat(props.theme.visitedUnderlineColor, ";");
142
160
  }, function (props) {
143
- return props.iconPosition === "after" ? "row" : "row-reverse";
161
+ return "color: ".concat(props.theme.hoverFontColor, ";\n border-bottom-color: ").concat(props.theme.hoverUnderlineColor, ";\n cursor: pointer;");
144
162
  }, function (props) {
145
- return props.iconPosition === "after" ? "flex-start" : "flex-end";
163
+ return props.theme.focusColor;
146
164
  }, function (props) {
147
- return !props.disabled && "color: ".concat(props.theme.hoverFontColor, " !important;\n text-decoration: none;\n padding-bottom: 1px !important;\n border-bottom: 1px solid;\n cursor: pointer;");
165
+ return props.disabled && "outline: none";
148
166
  }, function (props) {
149
- return props.underlined ? !props.disabled ? "color: ".concat(props.theme.visitedFontColor, " !important; border-bottom: 1px solid ").concat(props.theme.visitedUnderlinedBackgroundColor) : "" : "";
167
+ return "color: ".concat(props.theme.activeFontColor, " !important;\n border-bottom-color: ").concat(props.theme.activeUnderlineColor, " !important;");
150
168
  });
151
169
 
152
- var LinkIcon = _styledComponents["default"].img(_templateObject2(), function (props) {
153
- return props.iconPosition === "before" ? "margin-right" : "margin-left";
170
+ var StyledButton = _styledComponents["default"].button(_templateObject3(), function (props) {
171
+ return "padding-bottom: ".concat(props.theme.underlineSpacing, ";\n border-bottom: ").concat(props.theme.underlineThickness, " ").concat(props.theme.underlineStyle, " transparent;");
172
+ }, function (props) {
173
+ return props.disabled && "cursor: default;";
174
+ }, function (props) {
175
+ return props.inheritColor ? "inherit" : !props.disabled ? props.theme.fontColor : props.theme.disabledColor;
176
+ }, function (props) {
177
+ return props.disabled ? "pointer-events: none;" : "";
178
+ }, function (props) {
179
+ return "color: ".concat(props.theme.hoverFontColor, ";\n border-bottom-color: ").concat(props.theme.hoverUnderlineColor, ";\n cursor: pointer;");
180
+ }, function (props) {
181
+ return props.theme.focusColor;
182
+ }, function (props) {
183
+ return props.disabled && "outline: none";
184
+ }, function (props) {
185
+ return "color: ".concat(props.theme.activeFontColor, " !important;\n border-bottom-color: ").concat(props.theme.activeUnderlineColor, " !important;");
154
186
  });
155
187
 
156
- var LinkIconContainer = _styledComponents["default"].div(_templateObject3(), function (props) {
157
- return props.iconPosition === "before" ? "margin-right" : "margin-left";
188
+ var LinkText = _styledComponents["default"].div(_templateObject4(), function (props) {
189
+ return props.theme.fontSize;
190
+ }, function (props) {
191
+ return props.theme.fontWeight;
192
+ }, function (props) {
193
+ return props.theme.fontStyle;
194
+ }, function (props) {
195
+ return props.theme.fontFamily;
196
+ }, function (props) {
197
+ return props.iconPosition === "after" ? "row" : "row-reverse";
198
+ }, function (props) {
199
+ return props.iconPosition === "after" ? "flex-start" : "flex-end";
158
200
  });
159
201
 
160
- var StyledLink = _styledComponents["default"].a(_templateObject4(), function (props) {
161
- return props.inheritColor ? "inherit" : !props.disabled ? props.theme.fontColor : props.theme.disabledColor;
202
+ var LinkIcon = _styledComponents["default"].img(_templateObject5(), function (props) {
203
+ return props.theme.iconSize;
204
+ }, function (props) {
205
+ return props.theme.iconSize;
206
+ }, function (props) {
207
+ return "".concat(props.iconPosition === "before" ? "margin-right" : "margin-left", ": ").concat(props.theme.iconSpacing);
162
208
  });
163
209
 
164
- var StyledButton = _styledComponents["default"].button(_templateObject5(), function (props) {
165
- return props.disabled && "cursor: default;";
210
+ var LinkIconContainer = _styledComponents["default"].div(_templateObject6(), function (props) {
211
+ return props.theme.iconSize;
212
+ }, function (props) {
213
+ return props.theme.iconSize;
214
+ }, function (props) {
215
+ return "".concat(props.iconPosition === "before" ? "margin-right" : "margin-left", ": ").concat(props.theme.iconSpacing);
166
216
  });
167
217
 
168
218
  DxcLink.propTypes = {
169
- underlined: _propTypes["default"].bool,
170
219
  inheritColor: _propTypes["default"].bool,
171
220
  disabled: _propTypes["default"].bool,
172
221
  icon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].func]),
@@ -181,7 +230,8 @@ DxcLink.propTypes = {
181
230
  right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
182
231
  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
183
232
  newWindow: _propTypes["default"].bool,
184
- text: _propTypes["default"].string
233
+ text: _propTypes["default"].string,
234
+ tabIndex: _propTypes["default"].number
185
235
  };
186
236
  var _default = DxcLink;
187
237
  exports["default"] = _default;
package/dist/main.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ export { default as DxcAlert } from "./alert/index";
2
+ export { default as DxcNewSelect } from "./new-select/index";
3
+ export { default as DxcTextInput } from "./text-input/index";
4
+ export { default as DxcDateInput } from "./date-input/index";
5
+ export { default as DxcNewTextarea } from "./new-textarea/index";
6
+ export { default as DxcNumberInput } from "./number-input/index";
7
+ export { default as DxcPasswordInput } from "./password-input/index";
8
+ export { default as DxcFileInput } from "./file-input/index";
package/dist/main.js CHANGED
@@ -37,7 +37,7 @@ Object.defineProperty(exports, "DxcCheckbox", {
37
37
  return _Checkbox["default"];
38
38
  }
39
39
  });
40
- Object.defineProperty(exports, "DxcDate", {
40
+ Object.defineProperty(exports, "V3DxcDate", {
41
41
  enumerable: true,
42
42
  get: function get() {
43
43
  return _Date["default"];
@@ -67,7 +67,7 @@ Object.defineProperty(exports, "DxcHeader", {
67
67
  return _Header["default"];
68
68
  }
69
69
  });
70
- Object.defineProperty(exports, "DxcInput", {
70
+ Object.defineProperty(exports, "V3DxcInputText", {
71
71
  enumerable: true,
72
72
  get: function get() {
73
73
  return _InputText["default"];
@@ -121,7 +121,7 @@ Object.defineProperty(exports, "DxcSpinner", {
121
121
  return _Spinner["default"];
122
122
  }
123
123
  });
124
- Object.defineProperty(exports, "DxcUpload", {
124
+ Object.defineProperty(exports, "V3DxcUpload", {
125
125
  enumerable: true,
126
126
  get: function get() {
127
127
  return _Upload["default"];
@@ -175,10 +175,10 @@ Object.defineProperty(exports, "DxcHeading", {
175
175
  return _Heading["default"];
176
176
  }
177
177
  });
178
- Object.defineProperty(exports, "DxcTextarea", {
178
+ Object.defineProperty(exports, "V3DxcTextarea", {
179
179
  enumerable: true,
180
180
  get: function get() {
181
- return _Textarea["default"];
181
+ return _V3Textarea["default"];
182
182
  }
183
183
  });
184
184
  Object.defineProperty(exports, "DxcResultsetTable", {
@@ -217,6 +217,48 @@ Object.defineProperty(exports, "DxcBadge", {
217
217
  return _Badge["default"];
218
218
  }
219
219
  });
220
+ Object.defineProperty(exports, "DxcTextInput", {
221
+ enumerable: true,
222
+ get: function get() {
223
+ return _TextInput["default"];
224
+ }
225
+ });
226
+ Object.defineProperty(exports, "DxcPasswordInput", {
227
+ enumerable: true,
228
+ get: function get() {
229
+ return _PasswordInput["default"];
230
+ }
231
+ });
232
+ Object.defineProperty(exports, "DxcDateInput", {
233
+ enumerable: true,
234
+ get: function get() {
235
+ return _DateInput["default"];
236
+ }
237
+ });
238
+ Object.defineProperty(exports, "DxcNumberInput", {
239
+ enumerable: true,
240
+ get: function get() {
241
+ return _NumberInput["default"];
242
+ }
243
+ });
244
+ Object.defineProperty(exports, "DxcNewTextarea", {
245
+ enumerable: true,
246
+ get: function get() {
247
+ return _NewTextarea["default"];
248
+ }
249
+ });
250
+ Object.defineProperty(exports, "DxcNewSelect", {
251
+ enumerable: true,
252
+ get: function get() {
253
+ return _NewSelect["default"];
254
+ }
255
+ });
256
+ Object.defineProperty(exports, "DxcFileInput", {
257
+ enumerable: true,
258
+ get: function get() {
259
+ return _FileInput["default"];
260
+ }
261
+ });
220
262
  Object.defineProperty(exports, "ThemeContext", {
221
263
  enumerable: true,
222
264
  get: function get() {
@@ -229,6 +271,12 @@ Object.defineProperty(exports, "ThemeProvider", {
229
271
  return _ThemeContext.ThemeProvider;
230
272
  }
231
273
  });
274
+ Object.defineProperty(exports, "BackgroundColorProvider", {
275
+ enumerable: true,
276
+ get: function get() {
277
+ return _BackgroundColorContext.BackgroundColorProvider;
278
+ }
279
+ });
232
280
 
233
281
  var _Alert = _interopRequireDefault(require("./alert/Alert"));
234
282
 
@@ -286,7 +334,7 @@ var _Link = _interopRequireDefault(require("./link/Link"));
286
334
 
287
335
  var _Heading = _interopRequireDefault(require("./heading/Heading"));
288
336
 
289
- var _Textarea = _interopRequireDefault(require("./textarea/Textarea"));
337
+ var _V3Textarea = _interopRequireDefault(require("./V3Textarea/V3Textarea"));
290
338
 
291
339
  var _ResultsetTable = _interopRequireDefault(require("./resultsetTable/ResultsetTable"));
292
340
 
@@ -300,4 +348,20 @@ var _AccordionGroup = _interopRequireDefault(require("./accordion-group/Accordio
300
348
 
301
349
  var _Badge = _interopRequireDefault(require("./badge/Badge"));
302
350
 
303
- var _ThemeContext = _interopRequireWildcard(require("./ThemeContext.js"));
351
+ var _TextInput = _interopRequireDefault(require("./text-input/TextInput"));
352
+
353
+ var _PasswordInput = _interopRequireDefault(require("./password-input/PasswordInput"));
354
+
355
+ var _DateInput = _interopRequireDefault(require("./date-input/DateInput"));
356
+
357
+ var _NumberInput = _interopRequireDefault(require("./number-input/NumberInput"));
358
+
359
+ var _NewTextarea = _interopRequireDefault(require("./new-textarea/NewTextarea"));
360
+
361
+ var _NewSelect = _interopRequireDefault(require("./new-select/NewSelect"));
362
+
363
+ var _FileInput = _interopRequireDefault(require("./file-input/FileInput"));
364
+
365
+ var _ThemeContext = _interopRequireWildcard(require("./ThemeContext.js"));
366
+
367
+ var _BackgroundColorContext = require("./BackgroundColorContext.js");