@dxc-technology/halstack-react 0.0.0-878c09d → 0.0.0-8c3739a

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 (124) hide show
  1. package/README.md +1 -1
  2. package/babel.config.js +6 -2
  3. package/dist/BackgroundColorContext.js +46 -0
  4. package/dist/ThemeContext.js +235 -2
  5. package/dist/accordion/Accordion.js +152 -67
  6. package/dist/accordion-group/AccordionGroup.js +37 -10
  7. package/dist/alert/Alert.js +183 -84
  8. package/dist/alert/index.d.ts +51 -0
  9. package/dist/badge/Badge.js +23 -18
  10. package/dist/box/Box.js +31 -23
  11. package/dist/button/Button.js +61 -25
  12. package/dist/card/Card.js +72 -35
  13. package/dist/checkbox/Checkbox.js +98 -38
  14. package/dist/chip/Chip.js +97 -40
  15. package/dist/common/RequiredComponent.js +2 -8
  16. package/dist/common/utils.js +2 -22
  17. package/dist/common/variables.js +1439 -303
  18. package/dist/date/Date.js +69 -49
  19. package/dist/date-input/DateInput.js +400 -0
  20. package/dist/date-input/index.d.ts +95 -0
  21. package/dist/dialog/Dialog.js +58 -37
  22. package/dist/dropdown/Dropdown.js +176 -81
  23. package/dist/file-input/FileInput.js +644 -0
  24. package/dist/file-input/FileItem.js +280 -0
  25. package/dist/file-input/index.d.ts +81 -0
  26. package/dist/footer/Footer.js +74 -50
  27. package/dist/footer/dxc_logo.svg +15 -0
  28. package/dist/header/Header.js +93 -63
  29. package/dist/header/dxc_logo_black.svg +8 -0
  30. package/dist/heading/Heading.js +81 -16
  31. package/dist/input-text/InputText.js +250 -113
  32. package/dist/layout/ApplicationLayout.js +14 -18
  33. package/dist/link/Link.js +86 -41
  34. package/dist/main.d.ts +8 -0
  35. package/dist/main.js +74 -2
  36. package/dist/new-select/NewSelect.js +836 -0
  37. package/dist/new-select/index.d.ts +53 -0
  38. package/dist/new-textarea/NewTextarea.js +369 -0
  39. package/dist/new-textarea/index.d.ts +117 -0
  40. package/dist/number-input/NumberInput.js +136 -0
  41. package/dist/number-input/NumberInputContext.js +16 -0
  42. package/dist/number-input/index.d.ts +113 -0
  43. package/dist/paginator/Paginator.js +113 -56
  44. package/dist/password-input/PasswordInput.js +198 -0
  45. package/dist/password-input/index.d.ts +94 -0
  46. package/dist/progress-bar/ProgressBar.js +95 -38
  47. package/dist/radio/Radio.js +31 -17
  48. package/dist/resultsetTable/ResultsetTable.js +82 -65
  49. package/dist/select/Select.js +226 -150
  50. package/dist/sidenav/Sidenav.js +66 -15
  51. package/dist/slider/Slider.js +197 -69
  52. package/dist/spinner/Spinner.js +247 -59
  53. package/dist/switch/Switch.js +50 -27
  54. package/dist/table/Table.js +51 -24
  55. package/dist/tabs/Tabs.js +95 -43
  56. package/dist/tag/Tag.js +68 -35
  57. package/dist/text-input/TextInput.js +971 -0
  58. package/dist/text-input/index.d.ts +135 -0
  59. package/dist/textarea/Textarea.js +77 -40
  60. package/dist/toggle/Toggle.js +16 -19
  61. package/dist/toggle-group/ToggleGroup.js +142 -41
  62. package/dist/upload/Upload.js +13 -8
  63. package/dist/upload/buttons-upload/ButtonsUpload.js +31 -14
  64. package/dist/upload/dragAndDropArea/DragAndDropArea.js +78 -28
  65. package/dist/upload/file-upload/FileToUpload.js +50 -24
  66. package/dist/upload/files-upload/FilesToUpload.js +16 -16
  67. package/dist/upload/transaction/Transaction.js +44 -24
  68. package/dist/upload/transactions/Transactions.js +38 -20
  69. package/dist/useTheme.js +22 -0
  70. package/dist/wizard/Wizard.js +127 -47
  71. package/dist/wizard/invalid_icon.svg +4 -5
  72. package/dist/wizard/valid_icon.svg +4 -5
  73. package/package.json +8 -2
  74. package/test/AccordionGroup.test.js +16 -0
  75. package/test/Date.test.js +13 -13
  76. package/test/DateInput.test.js +242 -0
  77. package/test/Dropdown.test.js +15 -0
  78. package/test/FileInput.test.js +201 -0
  79. package/test/InputText.test.js +25 -17
  80. package/test/Link.test.js +3 -2
  81. package/test/NewTextarea.test.js +195 -0
  82. package/test/NumberInput.test.js +259 -0
  83. package/test/Paginator.test.js +40 -57
  84. package/test/PasswordInput.test.js +83 -0
  85. package/test/ResultsetTable.test.js +33 -8
  86. package/test/Select.test.js +44 -24
  87. package/test/Spinner.test.js +5 -0
  88. package/test/TextInput.test.js +732 -0
  89. package/test/ToggleGroup.test.js +5 -1
  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/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
- var _ThemeContext = _interopRequireDefault(require("../ThemeContext.js"));
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
  };
@@ -211,10 +209,7 @@ var childTypeExists = function childTypeExists(children, childType) {
211
209
  var DxcApplicationLayout = function DxcApplicationLayout(_ref4) {
212
210
  var children = _ref4.children;
213
211
  var ref = (0, _react.useRef)(null);
214
- var customTheme = (0, _react.useContext)(_ThemeContext["default"]);
215
- var colorsTheme = (0, _react.useMemo)(function () {
216
- return (0, _utils.getCustomTheme)(_variables.theme, (0, _utils.getCustomTheme)(_variables.defaultTheme, customTheme));
217
- }, [customTheme]);
212
+ var colorsTheme = (0, _useTheme["default"])();
218
213
 
219
214
  var _useState = (0, _react.useState)(true),
220
215
  _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -228,8 +223,8 @@ var DxcApplicationLayout = function DxcApplicationLayout(_ref4) {
228
223
 
229
224
  var childrenArray = _react["default"].Children.toArray(children);
230
225
 
231
- var header = childTypeExists(childrenArray, _halstackReact.DxcHeader) || childTypeExists(childrenArray, Header) || defaultHeader();
232
- 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();
233
228
  var sideNav = childTypeExists(childrenArray, SideNav);
234
229
  var main = childTypeExists(childrenArray, Main);
235
230
  var displayArrow = sideNav && sideNav.props && sideNav.props.displayArrow;
@@ -281,6 +276,7 @@ var DxcApplicationLayout = function DxcApplicationLayout(_ref4) {
281
276
  }, _react["default"].createElement(HeaderContainer, null, header), _react["default"].createElement(BodyContainer, null, _react["default"].createElement(ContentContainer, null, _react["default"].createElement(SideNavArrowContainer, {
282
277
  isSideNavVisible: isSideNavVisible
283
278
  }, sideNav, _react["default"].createElement(ArrowContainer, null, sideNav && (displayArrow || isResponsive) && _react["default"].createElement(ArrowTrigger, {
279
+ tabIndex: 0,
284
280
  onClick: handleSidenav,
285
281
  isSideNavVisible: isSideNavVisible
286
282
  }, _react["default"].createElement(ArrowIcon, null)))), _react["default"].createElement(MainBodyContainer, null, _react["default"].createElement(MainContent, {
@@ -324,7 +320,7 @@ var SideNavArrowContainer = _styledComponents["default"].div(_templateObject8(),
324
320
  var ArrowContainer = _styledComponents["default"].div(_templateObject9());
325
321
 
326
322
  var ArrowTrigger = _styledComponents["default"].div(_templateObject10(), function (props) {
327
- return "".concat(props.theme.arrowContainerColor).concat(props.theme.arrowContainerOpacity);
323
+ return "".concat(props.theme.arrowContainerColor);
328
324
  }, function (props) {
329
325
  return props.isSideNavVisible ? "rotate(-180deg)" : "rotate(0deg)";
330
326
  }, function (props) {
package/dist/link/Link.js CHANGED
@@ -15,7 +15,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
15
15
 
16
16
  var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
17
17
 
18
- var _react = _interopRequireWildcard(require("react"));
18
+ var _react = _interopRequireDefault(require("react"));
19
19
 
20
20
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
21
21
 
@@ -23,12 +23,20 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
23
23
 
24
24
  var _variables = require("../common/variables.js");
25
25
 
26
- var _utils = require("../common/utils.js");
26
+ var _useTheme = _interopRequireDefault(require("../useTheme.js"));
27
27
 
28
- var _ThemeContext = _interopRequireDefault(require("../ThemeContext.js"));
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
+ }
29
37
 
30
38
  function _templateObject5() {
31
- 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"]);
32
40
 
33
41
  _templateObject5 = function _templateObject5() {
34
42
  return data;
@@ -38,7 +46,7 @@ function _templateObject5() {
38
46
  }
39
47
 
40
48
  function _templateObject4() {
41
- 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"]);
42
50
 
43
51
  _templateObject4 = function _templateObject4() {
44
52
  return data;
@@ -48,7 +56,7 @@ function _templateObject4() {
48
56
  }
49
57
 
50
58
  function _templateObject3() {
51
- 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"]);
52
60
 
53
61
  _templateObject3 = function _templateObject3() {
54
62
  return data;
@@ -58,7 +66,7 @@ function _templateObject3() {
58
66
  }
59
67
 
60
68
  function _templateObject2() {
61
- 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"]);
62
70
 
63
71
  _templateObject2 = function _templateObject2() {
64
72
  return data;
@@ -68,7 +76,7 @@ function _templateObject2() {
68
76
  }
69
77
 
70
78
  function _templateObject() {
71
- 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"]);
72
80
 
73
81
  _templateObject = function _templateObject() {
74
82
  return data;
@@ -78,9 +86,7 @@ function _templateObject() {
78
86
  }
79
87
 
80
88
  var DxcLink = function DxcLink(_ref) {
81
- var _ref$underlined = _ref.underlined,
82
- underlined = _ref$underlined === void 0 ? true : _ref$underlined,
83
- _ref$inheritColor = _ref.inheritColor,
89
+ var _ref$inheritColor = _ref.inheritColor,
84
90
  inheritColor = _ref$inheritColor === void 0 ? false : _ref$inheritColor,
85
91
  _ref$disabled = _ref.disabled,
86
92
  disabled = _ref$disabled === void 0 ? false : _ref$disabled,
@@ -95,17 +101,12 @@ var DxcLink = function DxcLink(_ref) {
95
101
  onClick = _ref.onClick,
96
102
  _ref$text = _ref.text,
97
103
  text = _ref$text === void 0 ? "" : _ref$text,
98
- margin = _ref.margin;
99
- var customTheme = (0, _react.useContext)(_ThemeContext["default"]);
100
- var colorsTheme = (0, _react.useMemo)(function () {
101
- return (0, _utils.getCustomTheme)(_variables.theme, (0, _utils.getCustomTheme)(_variables.defaultTheme, customTheme));
102
- }, [customTheme]);
104
+ margin = _ref.margin,
105
+ _ref$tabIndex = _ref.tabIndex,
106
+ tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
107
+ var colorsTheme = (0, _useTheme["default"])();
103
108
 
104
109
  var linkContent = _react["default"].createElement(LinkText, {
105
- underlined: underlined,
106
- inheritColor: inheritColor,
107
- disabled: disabled,
108
- margin: margin,
109
110
  iconPosition: iconPosition
110
111
  }, text, icon ? _react["default"].createElement(LinkIconContainer, {
111
112
  iconPosition: iconPosition
@@ -116,17 +117,25 @@ var DxcLink = function DxcLink(_ref) {
116
117
 
117
118
  return _react["default"].createElement(_styledComponents.ThemeProvider, {
118
119
  theme: colorsTheme.link
120
+ }, _react["default"].createElement(DxcLinkContainer, {
121
+ margin: margin
119
122
  }, onClick ? _react["default"].createElement(StyledButton, {
123
+ type: "button",
120
124
  onClick: !disabled && onClick,
121
- disabled: disabled
125
+ margin: margin,
126
+ disabled: disabled,
127
+ inheritColor: inheritColor
122
128
  }, linkContent) : _react["default"].createElement(StyledLink, {
129
+ tabIndex: tabIndex,
123
130
  href: !disabled && href,
124
131
  target: newWindow ? "_blank" : "_self",
132
+ margin: margin,
133
+ disabled: disabled,
125
134
  inheritColor: inheritColor
126
- }, linkContent));
135
+ }, linkContent)));
127
136
  };
128
137
 
129
- var LinkText = _styledComponents["default"].div(_templateObject(), function (props) {
138
+ var DxcLinkContainer = _styledComponents["default"].div(_templateObject(), function (props) {
130
139
  return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
131
140
  }, function (props) {
132
141
  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
@@ -136,42 +145,77 @@ var LinkText = _styledComponents["default"].div(_templateObject(), function (pro
136
145
  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
137
146
  }, function (props) {
138
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;
139
152
  }, function (props) {
140
- 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;" : "";
141
154
  }, function (props) {
142
- 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;");
143
156
  }, function (props) {
144
- return !props.underlined ? "text-decoration-color: transparent;" : "";
157
+ return !props.inheritColor ? props.theme.visitedFontColor : "";
145
158
  }, function (props) {
146
- return props.disabled ? "pointer-events: none;" : "";
159
+ return "color: ".concat(props.theme.visitedFontColor, ";\n border-bottom-color: ").concat(props.theme.visitedUnderlineColor, ";");
147
160
  }, function (props) {
148
- 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;");
149
162
  }, function (props) {
150
- return props.iconPosition === "after" ? "flex-start" : "flex-end";
163
+ return props.theme.focusColor;
151
164
  }, function (props) {
152
- 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";
153
166
  }, function (props) {
154
- 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;");
155
168
  });
156
169
 
157
- var LinkIcon = _styledComponents["default"].img(_templateObject2(), function (props) {
158
- 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;");
159
186
  });
160
187
 
161
- var LinkIconContainer = _styledComponents["default"].div(_templateObject3(), function (props) {
162
- 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";
163
200
  });
164
201
 
165
- var StyledLink = _styledComponents["default"].a(_templateObject4(), function (props) {
166
- 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);
167
208
  });
168
209
 
169
- var StyledButton = _styledComponents["default"].button(_templateObject5(), function (props) {
170
- 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);
171
216
  });
172
217
 
173
218
  DxcLink.propTypes = {
174
- underlined: _propTypes["default"].bool,
175
219
  inheritColor: _propTypes["default"].bool,
176
220
  disabled: _propTypes["default"].bool,
177
221
  icon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].func]),
@@ -186,7 +230,8 @@ DxcLink.propTypes = {
186
230
  right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
187
231
  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
188
232
  newWindow: _propTypes["default"].bool,
189
- text: _propTypes["default"].string
233
+ text: _propTypes["default"].string,
234
+ tabIndex: _propTypes["default"].number
190
235
  };
191
236
  var _default = DxcLink;
192
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
@@ -1,5 +1,7 @@
1
1
  "use strict";
2
2
 
3
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
+
3
5
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
6
 
5
7
  Object.defineProperty(exports, "__esModule", {
@@ -65,7 +67,7 @@ Object.defineProperty(exports, "DxcHeader", {
65
67
  return _Header["default"];
66
68
  }
67
69
  });
68
- Object.defineProperty(exports, "DxcInput", {
70
+ Object.defineProperty(exports, "V3DxcInputText", {
69
71
  enumerable: true,
70
72
  get: function get() {
71
73
  return _InputText["default"];
@@ -215,12 +217,66 @@ Object.defineProperty(exports, "DxcBadge", {
215
217
  return _Badge["default"];
216
218
  }
217
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
+ });
218
262
  Object.defineProperty(exports, "ThemeContext", {
219
263
  enumerable: true,
220
264
  get: function get() {
221
265
  return _ThemeContext["default"];
222
266
  }
223
267
  });
268
+ Object.defineProperty(exports, "ThemeProvider", {
269
+ enumerable: true,
270
+ get: function get() {
271
+ return _ThemeContext.ThemeProvider;
272
+ }
273
+ });
274
+ Object.defineProperty(exports, "BackgroundColorProvider", {
275
+ enumerable: true,
276
+ get: function get() {
277
+ return _BackgroundColorContext.BackgroundColorProvider;
278
+ }
279
+ });
224
280
 
225
281
  var _Alert = _interopRequireDefault(require("./alert/Alert"));
226
282
 
@@ -292,4 +348,20 @@ var _AccordionGroup = _interopRequireDefault(require("./accordion-group/Accordio
292
348
 
293
349
  var _Badge = _interopRequireDefault(require("./badge/Badge"));
294
350
 
295
- var _ThemeContext = _interopRequireDefault(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");