@dxc-technology/halstack-react 0.0.0-2c2ee9d → 0.0.0-2c8be25

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 (247) hide show
  1. package/README.md +66 -0
  2. package/babel.config.js +5 -2
  3. package/dist/BackgroundColorContext.js +46 -0
  4. package/dist/ThemeContext.js +237 -2
  5. package/dist/V3Select/V3Select.js +549 -0
  6. package/dist/V3Select/index.d.ts +27 -0
  7. package/dist/V3Textarea/V3Textarea.js +264 -0
  8. package/dist/V3Textarea/index.d.ts +27 -0
  9. package/dist/accordion/Accordion.js +170 -81
  10. package/dist/accordion/index.d.ts +28 -0
  11. package/dist/accordion-group/AccordionGroup.js +186 -0
  12. package/dist/accordion-group/index.d.ts +16 -0
  13. package/dist/alert/Alert.js +184 -83
  14. package/dist/alert/index.d.ts +51 -0
  15. package/dist/badge/Badge.js +63 -0
  16. package/dist/box/Box.js +39 -19
  17. package/dist/box/index.d.ts +25 -0
  18. package/dist/button/Button.js +93 -42
  19. package/dist/button/index.d.ts +24 -0
  20. package/dist/card/Card.js +64 -56
  21. package/dist/card/index.d.ts +22 -0
  22. package/dist/checkbox/Checkbox.js +117 -39
  23. package/dist/checkbox/index.d.ts +24 -0
  24. package/dist/chip/Chip.js +265 -0
  25. package/dist/chip/index.d.ts +22 -0
  26. package/dist/common/RequiredComponent.js +5 -15
  27. package/dist/common/variables.js +1507 -10
  28. package/dist/date/Date.js +110 -76
  29. package/dist/date/index.d.ts +27 -0
  30. package/dist/date-input/DateInput.js +400 -0
  31. package/dist/date-input/index.d.ts +95 -0
  32. package/dist/dialog/Dialog.js +87 -33
  33. package/dist/dialog/index.d.ts +18 -0
  34. package/dist/dropdown/Dropdown.js +226 -94
  35. package/dist/dropdown/index.d.ts +26 -0
  36. package/dist/file-input/FileInput.js +644 -0
  37. package/dist/file-input/FileItem.js +287 -0
  38. package/dist/file-input/index.d.ts +81 -0
  39. package/dist/footer/Footer.js +125 -45
  40. package/dist/footer/Icons.js +77 -0
  41. package/dist/footer/index.d.ts +25 -0
  42. package/dist/header/Header.js +215 -85
  43. package/dist/header/Icons.js +59 -0
  44. package/dist/header/index.d.ts +25 -0
  45. package/dist/heading/Heading.js +93 -22
  46. package/dist/heading/index.d.ts +17 -0
  47. package/dist/input-text/Icons.js +22 -0
  48. package/dist/input-text/InputText.js +300 -104
  49. package/dist/input-text/index.d.ts +36 -0
  50. package/dist/layout/ApplicationLayout.js +327 -0
  51. package/dist/layout/Icons.js +55 -0
  52. package/dist/link/Link.js +142 -34
  53. package/dist/link/index.d.ts +23 -0
  54. package/dist/main.d.ts +40 -0
  55. package/dist/main.js +120 -24
  56. package/dist/number-input/NumberInput.js +136 -0
  57. package/dist/number-input/NumberInputContext.js +16 -0
  58. package/dist/number-input/index.d.ts +113 -0
  59. package/dist/paginator/Icons.js +66 -0
  60. package/dist/paginator/Paginator.js +187 -60
  61. package/dist/paginator/index.d.ts +20 -0
  62. package/dist/password-input/PasswordInput.js +203 -0
  63. package/dist/password-input/index.d.ts +94 -0
  64. package/dist/progress-bar/ProgressBar.js +97 -44
  65. package/dist/progress-bar/index.d.ts +18 -0
  66. package/dist/radio/Radio.js +39 -34
  67. package/dist/radio/index.d.ts +23 -0
  68. package/dist/resultsetTable/ResultsetTable.js +99 -71
  69. package/dist/resultsetTable/index.d.ts +19 -0
  70. package/dist/select/Select.js +920 -249
  71. package/dist/select/index.d.ts +53 -0
  72. package/dist/sidenav/Sidenav.js +87 -125
  73. package/dist/sidenav/index.d.ts +13 -0
  74. package/dist/slider/Slider.js +219 -83
  75. package/dist/slider/index.d.ts +29 -0
  76. package/dist/spinner/Spinner.js +249 -64
  77. package/dist/spinner/index.d.ts +17 -0
  78. package/dist/stories/Button.js +71 -0
  79. package/dist/stories/Button.stories.js +55 -0
  80. package/dist/stories/Header.js +67 -0
  81. package/dist/stories/Header.stories.js +31 -0
  82. package/dist/stories/Introduction.stories.mdx +211 -0
  83. package/dist/stories/Page.js +68 -0
  84. package/dist/stories/Page.stories.js +39 -0
  85. package/dist/stories/assets/code-brackets.svg +1 -0
  86. package/dist/stories/assets/colors.svg +1 -0
  87. package/dist/stories/assets/comments.svg +1 -0
  88. package/dist/stories/assets/direction.svg +1 -0
  89. package/dist/stories/assets/flow.svg +1 -0
  90. package/dist/stories/assets/plugin.svg +1 -0
  91. package/dist/stories/assets/repo.svg +1 -0
  92. package/dist/stories/assets/stackalt.svg +1 -0
  93. package/dist/stories/button.css +30 -0
  94. package/dist/stories/header.css +26 -0
  95. package/dist/stories/page.css +69 -0
  96. package/dist/switch/Switch.js +54 -51
  97. package/dist/switch/index.d.ts +24 -0
  98. package/dist/table/Table.js +63 -15
  99. package/dist/table/index.d.ts +13 -0
  100. package/dist/tabs/Tabs.js +210 -50
  101. package/dist/tabs/index.d.ts +19 -0
  102. package/dist/tag/Tag.js +100 -35
  103. package/dist/tag/index.d.ts +24 -0
  104. package/dist/text-input/TextInput.js +974 -0
  105. package/dist/text-input/index.d.ts +135 -0
  106. package/dist/textarea/Textarea.js +250 -107
  107. package/dist/textarea/index.d.ts +117 -0
  108. package/dist/toggle/Toggle.js +16 -19
  109. package/dist/toggle/index.d.ts +21 -0
  110. package/dist/toggle-group/ToggleGroup.js +327 -0
  111. package/dist/toggle-group/index.d.ts +21 -0
  112. package/dist/upload/Upload.js +13 -8
  113. package/dist/upload/buttons-upload/ButtonsUpload.js +35 -25
  114. package/dist/upload/buttons-upload/Icons.js +40 -0
  115. package/dist/upload/dragAndDropArea/DragAndDropArea.js +84 -37
  116. package/dist/upload/dragAndDropArea/Icons.js +39 -0
  117. package/dist/upload/file-upload/FileToUpload.js +64 -33
  118. package/dist/upload/file-upload/Icons.js +66 -0
  119. package/dist/upload/files-upload/FilesToUpload.js +16 -16
  120. package/dist/upload/index.d.ts +15 -0
  121. package/dist/upload/transaction/Icons.js +160 -0
  122. package/dist/upload/transaction/Transaction.js +42 -49
  123. package/dist/upload/transactions/Transactions.js +38 -20
  124. package/dist/useTheme.js +22 -0
  125. package/dist/wizard/Icons.js +65 -0
  126. package/dist/wizard/Wizard.js +156 -61
  127. package/dist/wizard/index.d.ts +18 -0
  128. package/package.json +32 -17
  129. package/test/AccordionGroup.test.js +125 -0
  130. package/test/Chip.test.js +25 -0
  131. package/test/Date.test.js +15 -13
  132. package/test/DateInput.test.js +242 -0
  133. package/test/Dropdown.test.js +19 -4
  134. package/test/FileInput.test.js +201 -0
  135. package/test/Footer.test.js +2 -7
  136. package/test/Header.test.js +7 -20
  137. package/test/Heading.test.js +60 -12
  138. package/test/InputText.test.js +31 -28
  139. package/test/Link.test.js +25 -7
  140. package/test/NumberInput.test.js +259 -0
  141. package/test/Paginator.test.js +76 -60
  142. package/test/PasswordInput.test.js +83 -0
  143. package/test/ResultsetTable.test.js +65 -17
  144. package/test/Select.test.js +371 -147
  145. package/test/Sidenav.test.js +22 -64
  146. package/test/Slider.test.js +24 -15
  147. package/test/Spinner.test.js +5 -0
  148. package/test/Tabs.test.js +21 -0
  149. package/test/TextInput.test.js +732 -0
  150. package/test/Textarea.test.js +193 -0
  151. package/test/ToggleGroup.test.js +85 -0
  152. package/test/Upload.test.js +1 -1
  153. package/test/V3Select.test.js +212 -0
  154. package/test/{TextArea.test.js → V3TextArea.test.js} +6 -7
  155. package/dist/accordion/Accordion.stories.js +0 -207
  156. package/dist/accordion/readme.md +0 -96
  157. package/dist/alert/Alert.stories.js +0 -158
  158. package/dist/alert/close.svg +0 -4
  159. package/dist/alert/error.svg +0 -4
  160. package/dist/alert/info.svg +0 -4
  161. package/dist/alert/readme.md +0 -43
  162. package/dist/alert/success.svg +0 -4
  163. package/dist/alert/warning.svg +0 -4
  164. package/dist/button/Button.stories.js +0 -224
  165. package/dist/button/readme.md +0 -93
  166. package/dist/checkbox/Checkbox.stories.js +0 -144
  167. package/dist/checkbox/readme.md +0 -116
  168. package/dist/common/services/example-service.js +0 -10
  169. package/dist/common/services/example-service.test.js +0 -12
  170. package/dist/date/Date.stories.js +0 -205
  171. package/dist/date/calendar.svg +0 -1
  172. package/dist/date/calendar_dark.svg +0 -1
  173. package/dist/date/readme.md +0 -73
  174. package/dist/dialog/Dialog.stories.js +0 -217
  175. package/dist/dialog/readme.md +0 -32
  176. package/dist/dropdown/Dropdown.stories.js +0 -249
  177. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  178. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  179. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  180. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  181. package/dist/dropdown/readme.md +0 -69
  182. package/dist/footer/Footer.stories.js +0 -94
  183. package/dist/footer/dxc_logo_wht.png +0 -0
  184. package/dist/footer/readme.md +0 -41
  185. package/dist/header/Header.stories.js +0 -176
  186. package/dist/header/close_icon.svg +0 -1
  187. package/dist/header/dxc_logo_black.png +0 -0
  188. package/dist/header/dxc_logo_white.png +0 -0
  189. package/dist/header/hamb_menu_black.svg +0 -1
  190. package/dist/header/hamb_menu_white.svg +0 -1
  191. package/dist/header/readme.md +0 -33
  192. package/dist/input-text/InputText.stories.js +0 -209
  193. package/dist/input-text/error.svg +0 -1
  194. package/dist/input-text/readme.md +0 -91
  195. package/dist/link/readme.md +0 -51
  196. package/dist/paginator/images/next.svg +0 -3
  197. package/dist/paginator/images/nextPage.svg +0 -3
  198. package/dist/paginator/images/previous.svg +0 -3
  199. package/dist/paginator/images/previousPage.svg +0 -3
  200. package/dist/paginator/readme.md +0 -50
  201. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  202. package/dist/progress-bar/readme.md +0 -63
  203. package/dist/radio/Radio.stories.js +0 -166
  204. package/dist/radio/readme.md +0 -70
  205. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  206. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  207. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  208. package/dist/select/Select.stories.js +0 -235
  209. package/dist/select/readme.md +0 -72
  210. package/dist/sidenav/arrow_icon.svg +0 -3
  211. package/dist/slider/Slider.stories.js +0 -241
  212. package/dist/slider/readme.md +0 -64
  213. package/dist/spinner/Spinner.stories.js +0 -183
  214. package/dist/spinner/readme.md +0 -65
  215. package/dist/switch/Switch.stories.js +0 -134
  216. package/dist/switch/readme.md +0 -133
  217. package/dist/tabs/Tabs.stories.js +0 -130
  218. package/dist/tabs/readme.md +0 -78
  219. package/dist/tabs-for-sections/TabsForSections.js +0 -107
  220. package/dist/tabs-for-sections/readme.md +0 -78
  221. package/dist/toggle/Toggle.stories.js +0 -297
  222. package/dist/toggle/readme.md +0 -80
  223. package/dist/upload/Upload.stories.js +0 -72
  224. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  225. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  226. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  227. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  228. package/dist/upload/file-upload/audio-icon.svg +0 -4
  229. package/dist/upload/file-upload/close.svg +0 -4
  230. package/dist/upload/file-upload/file-icon.svg +0 -4
  231. package/dist/upload/file-upload/video-icon.svg +0 -4
  232. package/dist/upload/readme.md +0 -37
  233. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  234. package/dist/upload/transaction/audio-icon.svg +0 -4
  235. package/dist/upload/transaction/error-icon.svg +0 -4
  236. package/dist/upload/transaction/file-icon-err.svg +0 -4
  237. package/dist/upload/transaction/file-icon.svg +0 -4
  238. package/dist/upload/transaction/image-icon-err.svg +0 -4
  239. package/dist/upload/transaction/image-icon.svg +0 -4
  240. package/dist/upload/transaction/success-icon.svg +0 -4
  241. package/dist/upload/transaction/video-icon-err.svg +0 -4
  242. package/dist/upload/transaction/video-icon.svg +0 -4
  243. package/dist/wizard/invalid_icon.svg +0 -6
  244. package/dist/wizard/valid_icon.svg +0 -6
  245. package/dist/wizard/validation-wrong.svg +0 -6
  246. package/test/TabsForSections.test.js +0 -34
  247. package/test/Toggle.test.js +0 -43
package/dist/link/Link.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", {
@@ -9,20 +11,62 @@ exports["default"] = void 0;
9
11
 
10
12
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
11
13
 
12
- var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
13
-
14
14
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
15
15
 
16
+ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
17
+
16
18
  var _react = _interopRequireDefault(require("react"));
17
19
 
18
- var _styledComponents = _interopRequireDefault(require("styled-components"));
20
+ var _styledComponents = _interopRequireWildcard(require("styled-components"));
19
21
 
20
22
  var _propTypes = _interopRequireDefault(require("prop-types"));
21
23
 
22
24
  var _variables = require("../common/variables.js");
23
25
 
26
+ var _useTheme = _interopRequireDefault(require("../useTheme.js"));
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
+
38
+ function _templateObject5() {
39
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n ", ";\n"]);
40
+
41
+ _templateObject5 = function _templateObject5() {
42
+ return data;
43
+ };
44
+
45
+ return data;
46
+ }
47
+
48
+ function _templateObject4() {
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"]);
50
+
51
+ _templateObject4 = function _templateObject4() {
52
+ return data;
53
+ };
54
+
55
+ return data;
56
+ }
57
+
58
+ function _templateObject3() {
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"]);
60
+
61
+ _templateObject3 = function _templateObject3() {
62
+ return data;
63
+ };
64
+
65
+ return data;
66
+ }
67
+
24
68
  function _templateObject2() {
25
- 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"]);
26
70
 
27
71
  _templateObject2 = function _templateObject2() {
28
72
  return data;
@@ -32,7 +76,7 @@ function _templateObject2() {
32
76
  }
33
77
 
34
78
  function _templateObject() {
35
- var data = (0, _taggedTemplateLiteral2["default"])(["\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n\n ", ";\n \n color: ", " !important;\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 color: ", " !important;\n text-decoration: none;\n padding-bottom: 1px !important;\n border-bottom: 1px solid;\n\n cursor: pointer;\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"]);
36
80
 
37
81
  _templateObject = function _templateObject() {
38
82
  return data;
@@ -42,41 +86,56 @@ function _templateObject() {
42
86
  }
43
87
 
44
88
  var DxcLink = function DxcLink(_ref) {
45
- var _ref$underlined = _ref.underlined,
46
- underlined = _ref$underlined === void 0 ? true : _ref$underlined,
47
- _ref$inheritColor = _ref.inheritColor,
89
+ var _ref$inheritColor = _ref.inheritColor,
48
90
  inheritColor = _ref$inheritColor === void 0 ? false : _ref$inheritColor,
49
91
  _ref$disabled = _ref.disabled,
50
92
  disabled = _ref$disabled === void 0 ? false : _ref$disabled,
51
93
  iconSrc = _ref.iconSrc,
94
+ icon = _ref.icon,
52
95
  _ref$iconPosition = _ref.iconPosition,
53
96
  iconPosition = _ref$iconPosition === void 0 ? "before" : _ref$iconPosition,
54
97
  _ref$href = _ref.href,
55
98
  href = _ref$href === void 0 ? "" : _ref$href,
56
- _ref$theme = _ref.theme,
57
- theme = _ref$theme === void 0 ? "light" : _ref$theme,
58
99
  _ref$newWindow = _ref.newWindow,
59
100
  newWindow = _ref$newWindow === void 0 ? false : _ref$newWindow,
101
+ onClick = _ref.onClick,
60
102
  _ref$text = _ref.text,
61
103
  text = _ref$text === void 0 ? "" : _ref$text,
62
- margin = _ref.margin;
63
- return _react["default"].createElement(LinkText, {
64
- underlined: underlined,
65
- inheritColor: inheritColor,
66
- disabled: disabled,
67
- href: href,
68
- brightness: theme,
69
- margin: margin,
70
- iconPosition: iconPosition,
71
- target: newWindow ? "_blank" : "_self"
72
- }, text, iconSrc ? _react["default"].createElement(LinkIcon, {
104
+ margin = _ref.margin,
105
+ _ref$tabIndex = _ref.tabIndex,
106
+ tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
107
+ var colorsTheme = (0, _useTheme["default"])();
108
+
109
+ var linkContent = _react["default"].createElement(LinkText, {
110
+ iconPosition: iconPosition
111
+ }, text, icon ? _react["default"].createElement(LinkIconContainer, {
112
+ iconPosition: iconPosition
113
+ }, (0, _typeof2["default"])(icon) === "object" ? icon : _react["default"].createElement(icon)) : iconSrc && _react["default"].createElement(LinkIcon, {
73
114
  src: iconSrc,
74
- brightness: theme,
75
115
  iconPosition: iconPosition
76
- }) : '');
116
+ }));
117
+
118
+ return _react["default"].createElement(_styledComponents.ThemeProvider, {
119
+ theme: colorsTheme.link
120
+ }, _react["default"].createElement(DxcLinkContainer, {
121
+ margin: margin
122
+ }, onClick ? _react["default"].createElement(StyledButton, {
123
+ type: "button",
124
+ onClick: !disabled && onClick,
125
+ margin: margin,
126
+ disabled: disabled,
127
+ inheritColor: inheritColor
128
+ }, linkContent) : _react["default"].createElement(StyledLink, {
129
+ tabIndex: tabIndex,
130
+ href: !disabled && href,
131
+ target: newWindow ? "_blank" : "_self",
132
+ margin: margin,
133
+ disabled: disabled,
134
+ inheritColor: inheritColor
135
+ }, linkContent)));
77
136
  };
78
137
 
79
- var LinkText = _styledComponents["default"].a(_templateObject(), function (props) {
138
+ var DxcLinkContainer = _styledComponents["default"].div(_templateObject(), function (props) {
80
139
  return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
81
140
  }, function (props) {
82
141
  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
@@ -86,36 +145,84 @@ var LinkText = _styledComponents["default"].a(_templateObject(), function (props
86
145
  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
87
146
  }, function (props) {
88
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;
152
+ }, function (props) {
153
+ return props.disabled ? "pointer-events: none;" : "";
154
+ }, function (props) {
155
+ return "padding-bottom: ".concat(props.theme.underlineSpacing, ";\n border-bottom: ").concat(props.theme.underlineThickness, " ").concat(props.theme.underlineStyle, " transparent;");
156
+ }, function (props) {
157
+ return !props.inheritColor ? props.theme.visitedFontColor : "";
158
+ }, function (props) {
159
+ return "color: ".concat(props.theme.visitedFontColor, ";\n border-bottom-color: ").concat(props.theme.visitedUnderlineColor, ";");
160
+ }, function (props) {
161
+ return "color: ".concat(props.theme.hoverFontColor, ";\n border-bottom-color: ").concat(props.theme.hoverUnderlineColor, ";\n cursor: pointer;");
89
162
  }, function (props) {
90
- return props.underlined ? "text-decoration: none;\n padding-bottom: 1px !important;\n border-bottom: 1px solid;" : "text-decoration: none";
163
+ return props.theme.focusColor;
91
164
  }, function (props) {
92
- return props.disabled ? props.brightness === "light" ? "#525252" : "#959595" : !props.inheritColor ? props.brightness === "light" ? "#006BF6" : "#4797FF" : props.brightness === "dark" ? "#FFFFFF" : "inherit";
165
+ return props.disabled && "outline: none";
93
166
  }, function (props) {
94
- return !props.underlined ? "text-decoration-color: transparent;" : "";
167
+ return "color: ".concat(props.theme.activeFontColor, " !important;\n border-bottom-color: ").concat(props.theme.activeUnderlineColor, " !important;");
168
+ });
169
+
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;
95
176
  }, function (props) {
96
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;");
186
+ });
187
+
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;
97
196
  }, function (props) {
98
197
  return props.iconPosition === "after" ? "row" : "row-reverse";
99
198
  }, function (props) {
100
199
  return props.iconPosition === "after" ? "flex-start" : "flex-end";
200
+ });
201
+
202
+ var LinkIcon = _styledComponents["default"].img(_templateObject5(), function (props) {
203
+ return props.theme.iconSize;
101
204
  }, function (props) {
102
- return props.brightness === "light" ? "#006BF6" : "#4797FF";
205
+ return props.theme.iconSize;
103
206
  }, function (props) {
104
- return !props.disabled ? "color: ".concat(props.brightness === "light" ? "#8800F6" : "#C175FF", " !important; ") : "";
207
+ return "".concat(props.iconPosition === "before" ? "margin-right" : "margin-left", ": ").concat(props.theme.iconSpacing);
105
208
  });
106
209
 
107
- var LinkIcon = _styledComponents["default"].img(_templateObject2(), function (props) {
108
- return props.iconPosition === "before" ? "margin-right" : "margin-left";
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);
109
216
  });
110
217
 
111
218
  DxcLink.propTypes = {
112
- underlined: _propTypes["default"].bool,
113
219
  inheritColor: _propTypes["default"].bool,
114
220
  disabled: _propTypes["default"].bool,
221
+ icon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].func]),
115
222
  iconSrc: _propTypes["default"].string,
116
223
  iconPosition: _propTypes["default"].oneOf(["after", "before"]),
117
224
  href: _propTypes["default"].string,
118
- theme: _propTypes["default"].oneOf(["light", "dark", ""]),
225
+ onClick: _propTypes["default"].func,
119
226
  margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
120
227
  top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
121
228
  bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
@@ -123,7 +230,8 @@ DxcLink.propTypes = {
123
230
  right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
124
231
  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
125
232
  newWindow: _propTypes["default"].bool,
126
- text: _propTypes["default"].string
233
+ text: _propTypes["default"].string,
234
+ tabIndex: _propTypes["default"].number
127
235
  };
128
236
  var _default = DxcLink;
129
237
  exports["default"] = _default;
@@ -0,0 +1,23 @@
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
+ inheritColor?: boolean;
11
+ disabled?: boolean;
12
+ iconSrc?: string;
13
+ icon?: any;
14
+ iconPosition?: "before" | "after";
15
+ href?: string;
16
+ newWindow?: boolean;
17
+ onClick?: void;
18
+ text?: string;
19
+ margin?: Space | Margin;
20
+ tabIndex?: number;
21
+ };
22
+
23
+ export default function DxcLink(props: Props): JSX.Element;
package/dist/main.d.ts ADDED
@@ -0,0 +1,40 @@
1
+ export { default as DxcAccordion } from "./accordion/index";
2
+ export { default as DxcAccordionGroup } from "./accordion-group/index";
3
+ export { default as DxcAlert } from "./alert/index";
4
+ export { default as DxcBox } from "./box/index";
5
+ export { default as DxcButton } from "./button/index";
6
+ export { default as DxcCard } from "./card/index";
7
+ export { default as DxcCheckbox } from "./checkbox/index";
8
+ export { default as DxcChip } from "./chip/index";
9
+ export { default as DxcDate } from "./date/index";
10
+ export { default as DxcDateInput } from "./date-input/index";
11
+ export { default as DxcDialog } from "./dialog/index";
12
+ export { default as DxcDropdown } from "./dropdown/index";
13
+ export { default as DxcFileInput } from "./file-input/index";
14
+ export { default as DxcFooter } from "./footer/index";
15
+ export { default as DxcHeader } from "./header/index";
16
+ export { default as DxcHeading } from "./heading/index";
17
+ export { default as DxcInputText } from "./input-text/index";
18
+ export { default as DxcLink } from "./link/index";
19
+ export { default as DxcNumberInput } from "./number-input/index";
20
+ export { default as DxcPaginator } from "./paginator/index";
21
+ export { default as DxcPasswordInput } from "./password-input/index";
22
+ export { default as DxcProgressBar } from "./progress-bar/index";
23
+ export { default as DxcRadio } from "./radio/index";
24
+ export { default as DxcResultsetTable } from "./resultsetTable/index";
25
+ export { default as DxcSelect } from "./select/index";
26
+ export { default as DxcSidenav } from "./sidenav/index";
27
+ export { default as DxcSlider } from "./slider/index";
28
+ export { default as DxcSpinner } from "./spinner/index";
29
+ export { default as DxcSwitch } from "./switch/index";
30
+ export { default as DxcTable } from "./table/index";
31
+ export { default as DxcTabs } from "./tabs/index";
32
+ export { default as DxcTag } from "./tag/index";
33
+ export { default as DxcTextInput } from "./text-input/index";
34
+ export { default as DxcTextarea } from "./textarea/index";
35
+ export { default as DxcToggle } from "./toggle/index";
36
+ export { default as DxcToggleGroup } from "./toggle-group/index";
37
+ export { default as DxcUpload } from "./upload/index";
38
+ export { default as V3DxcSelect } from "./V3Select/index";
39
+ export { default as V3DxcTextarea } from "./V3Textarea/index";
40
+ export { default as DxcWizard } from "./wizard/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, "DxcInputText", {
69
71
  enumerable: true,
70
72
  get: function get() {
71
73
  return _InputText["default"];
@@ -77,10 +79,10 @@ Object.defineProperty(exports, "DxcRadio", {
77
79
  return _Radio["default"];
78
80
  }
79
81
  });
80
- Object.defineProperty(exports, "DxcSelect", {
82
+ Object.defineProperty(exports, "V3DxcSelect", {
81
83
  enumerable: true,
82
84
  get: function get() {
83
- return _Select["default"];
85
+ return _V3Select["default"];
84
86
  }
85
87
  });
86
88
  Object.defineProperty(exports, "DxcSlider", {
@@ -101,12 +103,6 @@ Object.defineProperty(exports, "DxcTabs", {
101
103
  return _Tabs["default"];
102
104
  }
103
105
  });
104
- Object.defineProperty(exports, "DxcTabsForSections", {
105
- enumerable: true,
106
- get: function get() {
107
- return _TabsForSections["default"];
108
- }
109
- });
110
106
  Object.defineProperty(exports, "DxcProgressBar", {
111
107
  enumerable: true,
112
108
  get: function get() {
@@ -125,12 +121,6 @@ Object.defineProperty(exports, "DxcUpload", {
125
121
  return _Upload["default"];
126
122
  }
127
123
  });
128
- Object.defineProperty(exports, "DxcToggle", {
129
- enumerable: true,
130
- get: function get() {
131
- return _Toggle["default"];
132
- }
133
- });
134
124
  Object.defineProperty(exports, "DxcTable", {
135
125
  enumerable: true,
136
126
  get: function get() {
@@ -179,10 +169,10 @@ Object.defineProperty(exports, "DxcHeading", {
179
169
  return _Heading["default"];
180
170
  }
181
171
  });
182
- Object.defineProperty(exports, "DxcTextarea", {
172
+ Object.defineProperty(exports, "V3DxcTextarea", {
183
173
  enumerable: true,
184
174
  get: function get() {
185
- return _Textarea["default"];
175
+ return _V3Textarea["default"];
186
176
  }
187
177
  });
188
178
  Object.defineProperty(exports, "DxcResultsetTable", {
@@ -191,12 +181,96 @@ Object.defineProperty(exports, "DxcResultsetTable", {
191
181
  return _ResultsetTable["default"];
192
182
  }
193
183
  });
184
+ Object.defineProperty(exports, "DxcChip", {
185
+ enumerable: true,
186
+ get: function get() {
187
+ return _Chip["default"];
188
+ }
189
+ });
190
+ Object.defineProperty(exports, "DxcApplicationLayout", {
191
+ enumerable: true,
192
+ get: function get() {
193
+ return _ApplicationLayout["default"];
194
+ }
195
+ });
196
+ Object.defineProperty(exports, "DxcToggleGroup", {
197
+ enumerable: true,
198
+ get: function get() {
199
+ return _ToggleGroup["default"];
200
+ }
201
+ });
202
+ Object.defineProperty(exports, "DxcAccordionGroup", {
203
+ enumerable: true,
204
+ get: function get() {
205
+ return _AccordionGroup["default"];
206
+ }
207
+ });
208
+ Object.defineProperty(exports, "DxcBadge", {
209
+ enumerable: true,
210
+ get: function get() {
211
+ return _Badge["default"];
212
+ }
213
+ });
214
+ Object.defineProperty(exports, "DxcTextInput", {
215
+ enumerable: true,
216
+ get: function get() {
217
+ return _TextInput["default"];
218
+ }
219
+ });
220
+ Object.defineProperty(exports, "DxcPasswordInput", {
221
+ enumerable: true,
222
+ get: function get() {
223
+ return _PasswordInput["default"];
224
+ }
225
+ });
226
+ Object.defineProperty(exports, "DxcDateInput", {
227
+ enumerable: true,
228
+ get: function get() {
229
+ return _DateInput["default"];
230
+ }
231
+ });
232
+ Object.defineProperty(exports, "DxcNumberInput", {
233
+ enumerable: true,
234
+ get: function get() {
235
+ return _NumberInput["default"];
236
+ }
237
+ });
238
+ Object.defineProperty(exports, "DxcTextarea", {
239
+ enumerable: true,
240
+ get: function get() {
241
+ return _Textarea["default"];
242
+ }
243
+ });
244
+ Object.defineProperty(exports, "DxcSelect", {
245
+ enumerable: true,
246
+ get: function get() {
247
+ return _Select["default"];
248
+ }
249
+ });
250
+ Object.defineProperty(exports, "DxcFileInput", {
251
+ enumerable: true,
252
+ get: function get() {
253
+ return _FileInput["default"];
254
+ }
255
+ });
194
256
  Object.defineProperty(exports, "ThemeContext", {
195
257
  enumerable: true,
196
258
  get: function get() {
197
259
  return _ThemeContext["default"];
198
260
  }
199
261
  });
262
+ Object.defineProperty(exports, "ThemeProvider", {
263
+ enumerable: true,
264
+ get: function get() {
265
+ return _ThemeContext.ThemeProvider;
266
+ }
267
+ });
268
+ Object.defineProperty(exports, "BackgroundColorProvider", {
269
+ enumerable: true,
270
+ get: function get() {
271
+ return _BackgroundColorContext.BackgroundColorProvider;
272
+ }
273
+ });
200
274
 
201
275
  var _Alert = _interopRequireDefault(require("./alert/Alert"));
202
276
 
@@ -222,7 +296,7 @@ var _InputText = _interopRequireDefault(require("./input-text/InputText"));
222
296
 
223
297
  var _Radio = _interopRequireDefault(require("./radio/Radio"));
224
298
 
225
- var _Select = _interopRequireDefault(require("./select/Select"));
299
+ var _V3Select = _interopRequireDefault(require("./V3Select/V3Select"));
226
300
 
227
301
  var _Slider = _interopRequireDefault(require("./slider/Slider"));
228
302
 
@@ -230,16 +304,12 @@ var _Switch = _interopRequireDefault(require("./switch/Switch"));
230
304
 
231
305
  var _Tabs = _interopRequireDefault(require("./tabs/Tabs"));
232
306
 
233
- var _TabsForSections = _interopRequireDefault(require("./tabs-for-sections/TabsForSections"));
234
-
235
307
  var _ProgressBar = _interopRequireDefault(require("./progress-bar/ProgressBar"));
236
308
 
237
309
  var _Spinner = _interopRequireDefault(require("./spinner/Spinner"));
238
310
 
239
311
  var _Upload = _interopRequireDefault(require("./upload/Upload"));
240
312
 
241
- var _Toggle = _interopRequireDefault(require("./toggle/Toggle"));
242
-
243
313
  var _Table = _interopRequireDefault(require("./table/Table"));
244
314
 
245
315
  var _Box = _interopRequireDefault(require("./box/Box"));
@@ -256,8 +326,34 @@ var _Link = _interopRequireDefault(require("./link/Link"));
256
326
 
257
327
  var _Heading = _interopRequireDefault(require("./heading/Heading"));
258
328
 
259
- var _Textarea = _interopRequireDefault(require("./textarea/Textarea"));
329
+ var _V3Textarea = _interopRequireDefault(require("./V3Textarea/V3Textarea"));
260
330
 
261
331
  var _ResultsetTable = _interopRequireDefault(require("./resultsetTable/ResultsetTable"));
262
332
 
263
- var _ThemeContext = _interopRequireDefault(require("./ThemeContext.js"));
333
+ var _Chip = _interopRequireDefault(require("./chip/Chip"));
334
+
335
+ var _ApplicationLayout = _interopRequireDefault(require("./layout/ApplicationLayout"));
336
+
337
+ var _ToggleGroup = _interopRequireDefault(require("./toggle-group/ToggleGroup"));
338
+
339
+ var _AccordionGroup = _interopRequireDefault(require("./accordion-group/AccordionGroup"));
340
+
341
+ var _Badge = _interopRequireDefault(require("./badge/Badge"));
342
+
343
+ var _TextInput = _interopRequireDefault(require("./text-input/TextInput"));
344
+
345
+ var _PasswordInput = _interopRequireDefault(require("./password-input/PasswordInput"));
346
+
347
+ var _DateInput = _interopRequireDefault(require("./date-input/DateInput"));
348
+
349
+ var _NumberInput = _interopRequireDefault(require("./number-input/NumberInput"));
350
+
351
+ var _Textarea = _interopRequireDefault(require("./textarea/Textarea"));
352
+
353
+ var _Select = _interopRequireDefault(require("./select/Select"));
354
+
355
+ var _FileInput = _interopRequireDefault(require("./file-input/FileInput"));
356
+
357
+ var _ThemeContext = _interopRequireWildcard(require("./ThemeContext.js"));
358
+
359
+ var _BackgroundColorContext = require("./BackgroundColorContext.js");