@dxc-technology/halstack-react 0.0.0-dbd540d → 0.0.0-dfcca07

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 (324) hide show
  1. package/BackgroundColorContext.js +50 -0
  2. package/ThemeContext.js +246 -0
  3. package/{dist/V3Select → V3Select}/V3Select.js +33 -127
  4. package/{dist/V3Select → V3Select}/index.d.ts +0 -0
  5. package/{dist/V3Textarea → V3Textarea}/V3Textarea.js +10 -14
  6. package/{dist/V3Textarea → V3Textarea}/index.d.ts +0 -0
  7. package/accordion/Accordion.d.ts +4 -0
  8. package/{dist/accordion → accordion}/Accordion.js +35 -130
  9. package/accordion/types.d.ts +68 -0
  10. package/accordion/types.js +5 -0
  11. package/accordion-group/AccordionGroup.d.ts +7 -0
  12. package/accordion-group/AccordionGroup.js +170 -0
  13. package/accordion-group/AccordionGroup.stories.tsx +225 -0
  14. package/accordion-group/types.d.ts +72 -0
  15. package/accordion-group/types.js +5 -0
  16. package/alert/Alert.d.ts +4 -0
  17. package/{dist/alert → alert}/Alert.js +38 -151
  18. package/alert/Alert.stories.tsx +170 -0
  19. package/alert/types.d.ts +49 -0
  20. package/alert/types.js +5 -0
  21. package/badge/Badge.js +59 -0
  22. package/box/Box.d.ts +4 -0
  23. package/{dist/box → box}/Box.js +13 -43
  24. package/box/Box.stories.tsx +132 -0
  25. package/box/types.d.ts +43 -0
  26. package/box/types.js +5 -0
  27. package/button/Button.d.ts +4 -0
  28. package/{dist/button → button}/Button.js +22 -81
  29. package/button/Button.stories.tsx +276 -0
  30. package/button/types.d.ts +57 -0
  31. package/button/types.js +5 -0
  32. package/card/Card.d.ts +4 -0
  33. package/{dist/card → card}/Card.js +33 -123
  34. package/card/Card.stories.tsx +201 -0
  35. package/card/ice-cream.jpg +0 -0
  36. package/card/types.d.ts +67 -0
  37. package/card/types.js +5 -0
  38. package/checkbox/Checkbox.d.ts +4 -0
  39. package/{dist/checkbox → checkbox}/Checkbox.js +13 -59
  40. package/checkbox/Checkbox.stories.tsx +192 -0
  41. package/checkbox/types.d.ts +60 -0
  42. package/checkbox/types.js +5 -0
  43. package/{dist/chip → chip}/Chip.js +17 -61
  44. package/chip/Chip.stories.tsx +121 -0
  45. package/{dist/chip → chip}/index.d.ts +0 -0
  46. package/{dist/common → common}/OpenSans.css +0 -0
  47. package/{dist/common → common}/RequiredComponent.js +3 -11
  48. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  49. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  50. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  51. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  52. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  53. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  54. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  55. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  56. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  57. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  58. package/{dist/common → common}/utils.js +0 -0
  59. package/{dist/common → common}/variables.js +72 -68
  60. package/{dist/date → date}/Date.js +16 -22
  61. package/{dist/date → date}/index.d.ts +0 -0
  62. package/date-input/DateInput.d.ts +4 -0
  63. package/{dist/date-input → date-input}/DateInput.js +22 -61
  64. package/date-input/DateInput.stories.tsx +138 -0
  65. package/date-input/types.d.ts +100 -0
  66. package/date-input/types.js +5 -0
  67. package/dialog/Dialog.d.ts +4 -0
  68. package/{dist/dialog → dialog}/Dialog.js +20 -73
  69. package/dialog/Dialog.stories.tsx +212 -0
  70. package/dialog/types.d.ts +43 -0
  71. package/dialog/types.js +5 -0
  72. package/dropdown/Dropdown.d.ts +4 -0
  73. package/{dist/dropdown → dropdown}/Dropdown.js +44 -171
  74. package/dropdown/types.d.ts +89 -0
  75. package/dropdown/types.js +5 -0
  76. package/file-input/FileInput.d.ts +4 -0
  77. package/{dist/file-input → file-input}/FileInput.js +69 -202
  78. package/file-input/FileItem.d.ts +14 -0
  79. package/file-input/FileItem.js +184 -0
  80. package/file-input/types.d.ts +87 -0
  81. package/file-input/types.js +5 -0
  82. package/footer/Footer.d.ts +4 -0
  83. package/{dist/footer → footer}/Footer.js +38 -193
  84. package/footer/Footer.stories.jsx +151 -0
  85. package/{dist/footer → footer}/Icons.js +13 -13
  86. package/footer/types.d.ts +69 -0
  87. package/footer/types.js +5 -0
  88. package/header/Header.d.ts +7 -0
  89. package/{dist/header → header}/Header.js +60 -206
  90. package/header/Header.stories.tsx +162 -0
  91. package/{dist/header → header}/Icons.js +7 -32
  92. package/header/types.d.ts +47 -0
  93. package/header/types.js +5 -0
  94. package/heading/Heading.d.ts +4 -0
  95. package/{dist/heading → heading}/Heading.js +24 -95
  96. package/heading/Heading.stories.tsx +53 -0
  97. package/heading/types.d.ts +33 -0
  98. package/heading/types.js +5 -0
  99. package/{dist/input-text → input-text}/Icons.js +2 -2
  100. package/{dist/input-text → input-text}/InputText.js +36 -130
  101. package/{dist/input-text → input-text}/index.d.ts +1 -1
  102. package/{dist/layout → layout}/ApplicationLayout.js +31 -123
  103. package/{dist/layout → layout}/Icons.js +7 -7
  104. package/link/Link.d.ts +3 -0
  105. package/{dist/link → link}/Link.js +18 -94
  106. package/link/Link.stories.tsx +146 -0
  107. package/link/types.d.ts +74 -0
  108. package/link/types.js +5 -0
  109. package/main.d.ts +44 -0
  110. package/{dist/main.js → main.js} +91 -87
  111. package/number-input/NumberInput.d.ts +4 -0
  112. package/number-input/NumberInput.js +86 -0
  113. package/number-input/NumberInput.stories.tsx +115 -0
  114. package/number-input/NumberInputContext.d.ts +4 -0
  115. package/{dist/number-input → number-input}/NumberInputContext.js +5 -2
  116. package/number-input/numberInputContextTypes.d.ts +19 -0
  117. package/number-input/numberInputContextTypes.js +5 -0
  118. package/number-input/types.d.ts +117 -0
  119. package/number-input/types.js +5 -0
  120. package/package.json +20 -17
  121. package/{dist/paginator → paginator}/Icons.js +9 -9
  122. package/paginator/Paginator.d.ts +4 -0
  123. package/{dist/paginator → paginator}/Paginator.js +24 -131
  124. package/paginator/Paginator.stories.tsx +63 -0
  125. package/paginator/types.d.ts +38 -0
  126. package/paginator/types.js +5 -0
  127. package/password-input/PasswordInput.d.ts +4 -0
  128. package/{dist/password-input → password-input}/PasswordInput.js +22 -61
  129. package/password-input/PasswordInput.stories.tsx +131 -0
  130. package/password-input/types.d.ts +107 -0
  131. package/password-input/types.js +5 -0
  132. package/progress-bar/ProgressBar.d.ts +4 -0
  133. package/{dist/progress-bar → progress-bar}/ProgressBar.js +20 -92
  134. package/progress-bar/ProgressBar.stories.jsx +58 -0
  135. package/progress-bar/types.d.ts +37 -0
  136. package/progress-bar/types.js +5 -0
  137. package/radio/Radio.d.ts +4 -0
  138. package/{dist/radio → radio}/Radio.js +15 -50
  139. package/radio/Radio.stories.tsx +192 -0
  140. package/radio/types.d.ts +54 -0
  141. package/radio/types.js +5 -0
  142. package/resultsetTable/ResultsetTable.d.ts +4 -0
  143. package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +38 -145
  144. package/resultsetTable/types.d.ts +67 -0
  145. package/resultsetTable/types.js +5 -0
  146. package/{dist/select → select}/Select.js +248 -479
  147. package/select/Select.stories.tsx +572 -0
  148. package/select/index.d.ts +131 -0
  149. package/sidenav/Sidenav.d.ts +9 -0
  150. package/{dist/sidenav → sidenav}/Sidenav.js +19 -62
  151. package/sidenav/Sidenav.stories.tsx +165 -0
  152. package/sidenav/types.d.ts +50 -0
  153. package/sidenav/types.js +5 -0
  154. package/slider/Slider.d.ts +4 -0
  155. package/{dist/slider → slider}/Slider.js +72 -159
  156. package/slider/Slider.stories.tsx +177 -0
  157. package/slider/types.d.ts +78 -0
  158. package/slider/types.js +5 -0
  159. package/spinner/Spinner.d.ts +4 -0
  160. package/spinner/Spinner.js +250 -0
  161. package/spinner/Spinner.stories.jsx +102 -0
  162. package/spinner/types.d.ts +32 -0
  163. package/spinner/types.js +5 -0
  164. package/switch/Switch.d.ts +4 -0
  165. package/{dist/switch → switch}/Switch.js +26 -69
  166. package/switch/Switch.stories.tsx +160 -0
  167. package/switch/types.d.ts +58 -0
  168. package/switch/types.js +5 -0
  169. package/table/Table.d.ts +4 -0
  170. package/{dist/table → table}/Table.js +10 -24
  171. package/table/Table.stories.jsx +276 -0
  172. package/table/types.d.ts +21 -0
  173. package/table/types.js +5 -0
  174. package/tabs/Tabs.d.ts +4 -0
  175. package/tabs/Tabs.js +213 -0
  176. package/tabs/Tabs.stories.tsx +121 -0
  177. package/tabs/types.d.ts +70 -0
  178. package/tabs/types.js +5 -0
  179. package/tag/Tag.d.ts +4 -0
  180. package/tag/Tag.js +193 -0
  181. package/tag/Tag.stories.tsx +145 -0
  182. package/tag/types.d.ts +60 -0
  183. package/tag/types.js +5 -0
  184. package/text-input/TextInput.d.ts +4 -0
  185. package/{dist/text-input → text-input}/TextInput.js +255 -443
  186. package/text-input/TextInput.stories.tsx +456 -0
  187. package/text-input/types.d.ts +159 -0
  188. package/text-input/types.js +5 -0
  189. package/{dist/textarea → textarea}/Textarea.js +33 -86
  190. package/textarea/Textarea.stories.jsx +135 -0
  191. package/{dist/textarea → textarea}/index.d.ts +18 -8
  192. package/{dist/toggle → toggle}/Toggle.js +15 -49
  193. package/{dist/toggle → toggle}/index.d.ts +0 -0
  194. package/toggle-group/ToggleGroup.d.ts +4 -0
  195. package/{dist/toggle-group → toggle-group}/ToggleGroup.js +28 -138
  196. package/toggle-group/ToggleGroup.stories.tsx +178 -0
  197. package/toggle-group/types.d.ts +84 -0
  198. package/toggle-group/types.js +5 -0
  199. package/{dist/upload → upload}/Upload.js +11 -15
  200. package/{dist/upload → upload}/buttons-upload/ButtonsUpload.js +13 -37
  201. package/{dist/upload → upload}/buttons-upload/Icons.js +7 -7
  202. package/upload/dragAndDropArea/DragAndDropArea.js +225 -0
  203. package/{dist/upload → upload}/dragAndDropArea/Icons.js +6 -6
  204. package/upload/file-upload/FileToUpload.js +115 -0
  205. package/{dist/upload → upload}/file-upload/Icons.js +13 -13
  206. package/{dist/upload → upload}/files-upload/FilesToUpload.js +12 -26
  207. package/{dist/upload → upload}/index.d.ts +0 -0
  208. package/{dist/upload → upload}/transaction/Icons.js +31 -31
  209. package/upload/transaction/Transaction.js +104 -0
  210. package/upload/transactions/Transactions.js +94 -0
  211. package/{dist/useTheme.js → useTheme.js} +0 -0
  212. package/{dist/wizard → wizard}/Icons.js +8 -8
  213. package/wizard/Wizard.d.ts +4 -0
  214. package/{dist/wizard → wizard}/Wizard.js +32 -206
  215. package/wizard/Wizard.stories.jsx +224 -0
  216. package/wizard/types.d.ts +64 -0
  217. package/wizard/types.js +5 -0
  218. package/README.md +0 -66
  219. package/babel.config.js +0 -7
  220. package/dist/BackgroundColorContext.js +0 -46
  221. package/dist/ThemeContext.js +0 -250
  222. package/dist/accordion/index.d.ts +0 -28
  223. package/dist/accordion-group/AccordionGroup.js +0 -186
  224. package/dist/accordion-group/index.d.ts +0 -16
  225. package/dist/alert/index.d.ts +0 -51
  226. package/dist/badge/Badge.js +0 -63
  227. package/dist/box/index.d.ts +0 -25
  228. package/dist/button/index.d.ts +0 -24
  229. package/dist/card/index.d.ts +0 -22
  230. package/dist/checkbox/index.d.ts +0 -24
  231. package/dist/date-input/index.d.ts +0 -95
  232. package/dist/dialog/index.d.ts +0 -18
  233. package/dist/dropdown/index.d.ts +0 -26
  234. package/dist/file-input/FileItem.js +0 -287
  235. package/dist/file-input/index.d.ts +0 -81
  236. package/dist/footer/index.d.ts +0 -25
  237. package/dist/header/index.d.ts +0 -25
  238. package/dist/heading/index.d.ts +0 -17
  239. package/dist/link/index.d.ts +0 -23
  240. package/dist/main.d.ts +0 -40
  241. package/dist/number-input/NumberInput.js +0 -136
  242. package/dist/number-input/index.d.ts +0 -113
  243. package/dist/paginator/index.d.ts +0 -20
  244. package/dist/password-input/index.d.ts +0 -94
  245. package/dist/progress-bar/index.d.ts +0 -18
  246. package/dist/radio/index.d.ts +0 -23
  247. package/dist/resultsetTable/index.d.ts +0 -19
  248. package/dist/select/index.d.ts +0 -53
  249. package/dist/sidenav/index.d.ts +0 -13
  250. package/dist/slider/index.d.ts +0 -29
  251. package/dist/spinner/Spinner.js +0 -381
  252. package/dist/spinner/index.d.ts +0 -17
  253. package/dist/stories/Button.js +0 -71
  254. package/dist/stories/Button.stories.js +0 -55
  255. package/dist/stories/Header.js +0 -67
  256. package/dist/stories/Header.stories.js +0 -31
  257. package/dist/stories/Introduction.stories.mdx +0 -211
  258. package/dist/stories/Page.js +0 -68
  259. package/dist/stories/Page.stories.js +0 -39
  260. package/dist/stories/assets/code-brackets.svg +0 -1
  261. package/dist/stories/assets/colors.svg +0 -1
  262. package/dist/stories/assets/comments.svg +0 -1
  263. package/dist/stories/assets/direction.svg +0 -1
  264. package/dist/stories/assets/flow.svg +0 -1
  265. package/dist/stories/assets/plugin.svg +0 -1
  266. package/dist/stories/assets/repo.svg +0 -1
  267. package/dist/stories/assets/stackalt.svg +0 -1
  268. package/dist/stories/button.css +0 -30
  269. package/dist/stories/header.css +0 -26
  270. package/dist/stories/page.css +0 -69
  271. package/dist/switch/index.d.ts +0 -24
  272. package/dist/table/index.d.ts +0 -13
  273. package/dist/tabs/Tabs.js +0 -343
  274. package/dist/tabs/index.d.ts +0 -19
  275. package/dist/tag/Tag.js +0 -282
  276. package/dist/tag/index.d.ts +0 -24
  277. package/dist/text-input/index.d.ts +0 -135
  278. package/dist/toggle-group/index.d.ts +0 -21
  279. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
  280. package/dist/upload/file-upload/FileToUpload.js +0 -189
  281. package/dist/upload/transaction/Transaction.js +0 -148
  282. package/dist/upload/transactions/Transactions.js +0 -138
  283. package/dist/wizard/index.d.ts +0 -18
  284. package/test/Accordion.test.js +0 -33
  285. package/test/AccordionGroup.test.js +0 -125
  286. package/test/Alert.test.js +0 -53
  287. package/test/Box.test.js +0 -10
  288. package/test/Button.test.js +0 -18
  289. package/test/Card.test.js +0 -30
  290. package/test/Checkbox.test.js +0 -45
  291. package/test/Chip.test.js +0 -25
  292. package/test/Date.test.js +0 -395
  293. package/test/DateInput.test.js +0 -242
  294. package/test/Dialog.test.js +0 -23
  295. package/test/Dropdown.test.js +0 -145
  296. package/test/FileInput.test.js +0 -201
  297. package/test/Footer.test.js +0 -94
  298. package/test/Header.test.js +0 -34
  299. package/test/Heading.test.js +0 -83
  300. package/test/InputText.test.js +0 -239
  301. package/test/Link.test.js +0 -43
  302. package/test/NumberInput.test.js +0 -259
  303. package/test/Paginator.test.js +0 -181
  304. package/test/PasswordInput.test.js +0 -83
  305. package/test/ProgressBar.test.js +0 -35
  306. package/test/Radio.test.js +0 -37
  307. package/test/ResultsetTable.test.js +0 -330
  308. package/test/Select.test.js +0 -415
  309. package/test/Sidenav.test.js +0 -45
  310. package/test/Slider.test.js +0 -74
  311. package/test/Spinner.test.js +0 -32
  312. package/test/Switch.test.js +0 -45
  313. package/test/Table.test.js +0 -36
  314. package/test/Tabs.test.js +0 -109
  315. package/test/Tag.test.js +0 -32
  316. package/test/TextInput.test.js +0 -732
  317. package/test/Textarea.test.js +0 -193
  318. package/test/ToggleGroup.test.js +0 -85
  319. package/test/Upload.test.js +0 -60
  320. package/test/V3Select.test.js +0 -212
  321. package/test/V3TextArea.test.js +0 -51
  322. package/test/Wizard.test.js +0 -130
  323. package/test/mocks/pngMock.js +0 -1
  324. package/test/mocks/svgMock.js +0 -1
@@ -1,16 +0,0 @@
1
- type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2
- type Margin = {
3
- top?: Space;
4
- bottom?: Space;
5
- left?: Space;
6
- right?: Space;
7
- };
8
-
9
- type Props = {
10
- disabled?: boolean;
11
- onActiveChange?: void;
12
- indexActive?: number;
13
- margin?: Space | Margin;
14
- };
15
-
16
- export default function DxcAccordionGroup(props: Props): JSX.Element;
@@ -1,51 +0,0 @@
1
- type Size = "small" | "medium" | "large" | "fillParent" | "fitContent";
2
- type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
- type Margin = {
4
- top?: Space;
5
- bottom?: Space;
6
- left?: Space;
7
- right?: Space;
8
- };
9
-
10
- type Props = {
11
- /**
12
- * Uses on of the available alert types.
13
- */
14
- type?: "info" | "confirm" | "warning" | "error";
15
- /**
16
- * Uses on of the available alert modes:
17
- * 'inline': If onClose function is received, close button will be visible and the function will be executed when it's clicked.
18
- * There is no overlay layer. Position should be decided by the user.
19
- * 'modal': The alert will be displayed in the middle of the screen with an overlay layer behind.
20
- * The onClose function will be executed when the X button or the overlay is clicked. d
21
- * The user has the responsibility of hidding the modal in the onClose function, otherwise the modal will remain visible.
22
- */
23
- mode?: "inline" | "modal";
24
- /**
25
- * Text to display after icon and alert type and before content.
26
- */
27
- inlineText?: string;
28
- /**
29
- * This function will be called when the user clicks the close button. If there is no function we should close the alert by default.
30
- */
31
- onClose?: () => void;
32
- /**
33
- * The details section of the alert. Can be used to render custom content in this area.
34
- */
35
- children?: React.ReactNode;
36
- /**
37
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
38
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
39
- */
40
- margin?: Space | Margin;
41
- /**
42
- * Size of the component ('small' | 'medium' | 'large' | 'fillParent' | 'fitContent').
43
- */
44
- size?: Size;
45
- /**
46
- * Tabindex value given to the close button.
47
- */
48
- tabIndex?: number;
49
- };
50
-
51
- export default function Alert(props: Props): JSX.Element;
@@ -1,63 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
-
5
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports["default"] = void 0;
11
-
12
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
-
14
- var _react = _interopRequireDefault(require("react"));
15
-
16
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
17
-
18
- var _useTheme = _interopRequireDefault(require("../useTheme.js"));
19
-
20
- function _templateObject() {
21
- var data = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n letter-spacing: ", ";\n width: ", ";\n height: ", ";\n border-radius: ", ";\n display: flex;\n padding-bottom: 1px;\n padding-right: 1px;\n flex-wrap: wrap;\n box-sizing: border-box;\n align-items: center;\n line-height: 1;\n align-content: center;\n flex-direction: row;\n justify-content: center;\n"]);
22
-
23
- _templateObject = function _templateObject() {
24
- return data;
25
- };
26
-
27
- return data;
28
- }
29
-
30
- var DxcBadge = function DxcBadge(_ref) {
31
- var notificationText = _ref.notificationText;
32
- var colorsTheme = (0, _useTheme["default"])();
33
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
34
- theme: colorsTheme.tabs
35
- }, _react["default"].createElement(StyledDxcBadge, {
36
- notificationText: notificationText
37
- }, _react["default"].createElement("span", null, notificationText)));
38
- };
39
-
40
- var StyledDxcBadge = _styledComponents["default"].div(_templateObject(), function (props) {
41
- return props.theme.badgeBackgroundColor;
42
- }, function (props) {
43
- return props.theme.badgeFontFamily;
44
- }, function (props) {
45
- return props.theme.badgeFontSize;
46
- }, function (props) {
47
- return props.theme.badgeFontStyle;
48
- }, function (props) {
49
- return props.theme.badgeFontWeight;
50
- }, function (props) {
51
- return props.theme.badgeFontColor;
52
- }, function (props) {
53
- return props.theme.badgeLetterSpacing;
54
- }, function (props) {
55
- return props.notificationText === true ? props.theme.badgeWidth : props.theme.badgeWidthWithNotificationNumber;
56
- }, function (props) {
57
- return props.notificationText === true ? props.theme.badgeHeight : props.theme.badgeHeightWithNotificationNumber;
58
- }, function (props) {
59
- return props.notificationText === true ? props.theme.badgeRadius : props.theme.badgeRadiusWithNotificationNumber;
60
- });
61
-
62
- var _default = DxcBadge;
63
- exports["default"] = _default;
@@ -1,25 +0,0 @@
1
- type Size = "small" | "medium" | "large" | "fillParent" | "fitContent";
2
- type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
- type Margin = {
4
- top?: Space;
5
- bottom?: Space;
6
- left?: Space;
7
- right?: Space;
8
- };
9
- type Padding = {
10
- top?: Space;
11
- bottom?: Space;
12
- left?: Space;
13
- right?: Space;
14
- };
15
-
16
-
17
- type Props = {
18
- shadowDepth?: 0 | 1 | 2;
19
- margin?: Space | Margin;
20
- padging?: Space | Padding;
21
- display: string;
22
- size: Size;
23
- };
24
-
25
- export default function DxcBox(props: Props): JSX.Element;
@@ -1,24 +0,0 @@
1
- type Size = "small" | "medium" | "large" | "fillParent" | "fitContent";
2
- type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
- type Margin = {
4
- top?: Space;
5
- bottom?: Space;
6
- left?: Space;
7
- right?: Space;
8
- };
9
-
10
- type Props = {
11
- label?: string;
12
- mode?: "primary" | "secondary" | "text";
13
- disabled?: boolean;
14
- iconPosition?: "before" | "after";
15
- type?: "button" | "reset" | "submit";
16
- iconSrc?: string;
17
- icon?: any;
18
- onClick?: void;
19
- margin?: Space | Margin;
20
- size?: Size;
21
- tabIndex?: number;
22
- };
23
-
24
- export default function DxcButton(props: Props): JSX.Element;
@@ -1,22 +0,0 @@
1
- type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2
- type Margin = {
3
- top?: Space;
4
- bottom?: Space;
5
- left?: Space;
6
- right?: Space;
7
- };
8
-
9
- type Props = {
10
- imageSrc?: string;
11
- margin?: Space | Margin;
12
- contentPadding?: any;
13
- linkHref?: string;
14
- onClick?: void;
15
- imageBgColor?: string;
16
- imagePadding?: any;
17
- imagePosition?: "before" | "after";
18
- outlined?: boolean;
19
- imageCover?: boolean;
20
- };
21
-
22
- export default function DxcCard(props: Props): JSX.Element;
@@ -1,24 +0,0 @@
1
- type Size = "small" | "medium" | "large" | "fillParent" | "fitContent";
2
- type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
- type Margin = {
4
- top?: Space;
5
- bottom?: Space;
6
- left?: Space;
7
- right?: Space;
8
- };
9
-
10
- type Props = {
11
- checked?: boolean;
12
- value?: any;
13
- label?: string;
14
- labelPosition?: "before" | "after";
15
- name?: string,
16
- disabled?: boolean;
17
- onChange?: void;
18
- required?: boolean;
19
- margin?: Space | Margin;
20
- size?: Size;
21
- tabIndex?: number;
22
- };
23
-
24
- export default function DxcCheckbox(props: Props): JSX.Element;
@@ -1,95 +0,0 @@
1
- type Size = "small" | "medium" | "large" | "fillParent";
2
- type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
- type Margin = {
4
- top?: Space;
5
- bottom?: Space;
6
- left?: Space;
7
- right?: Space;
8
- };
9
-
10
- type Props = {
11
- /**
12
- * Text to be placed above the date.
13
- */
14
- label?: string;
15
- /**
16
- * Name attribute of the input element.
17
- */
18
- name?: string;
19
- /**
20
- * Value of the input element. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
21
- */
22
- value?: string;
23
- /**
24
- * The format in which the date value will be displayed. User must use this format when editing the value or it will be considered as an invalid date.
25
- */
26
- format?: string;
27
- /**
28
- * Helper text to be placed above the date.
29
- */
30
- helperText?: string;
31
- /**
32
- * If true, the date format will appear as placeholder in the field.
33
- */
34
- placeholder?: boolean;
35
- /**
36
- * If true, the date input will have an action to clear the entered value.
37
- */
38
- clearable?: boolean;
39
- /**
40
- * If true, the component will be disabled.
41
- */
42
- disabled?: boolean;
43
- /**
44
- * If true, the date will be optional, showing '(Optional)'
45
- * next to the label. Otherwise, the field will be considered required and an error will be
46
- * passed as a parameter to the OnBlur and onChange functions when it has
47
- * not been filled.
48
- */
49
- optional?: boolean;
50
- /**
51
- * This function will be called when the user types within the input
52
- * element of the component. An object including the string value, the
53
- * error and the date value will be passed to this function.
54
- * If the string value is a valid date, error will
55
- * be null. Also, if the string value is not a valid date, date will be null.
56
- */
57
- onChange?: (val: { value: string; error: string; date: Date }) => void;
58
- /**
59
- * This function will be called when the input element loses the focus.
60
- * An object including the string value, the error and the date value
61
- * will be passed to this function. If the string value is a valid date, error will
62
- * be null. Also, if the string value is not a valid date, date will be null.
63
- */
64
- onBlur?: (val: { value: string; error: string; date: Date }) => void;
65
- /**
66
- * If it is defined, the component will change its appearance, showing
67
- * the error below the date input component. If it is not defined, the error
68
- * messages will be managed internally, but never displayed on its own.
69
- */
70
- error?: string;
71
- /**
72
- * HTML autocomplete attribute. Lets the user specify if any permission the user agent has to provide automated assistance in filling out the input value.
73
- * Its value must be one of all the possible values of the HTML autocomplete attribute: 'on', 'off', 'email', 'username', 'new-password', ...
74
- */
75
- autocomplete?: string;
76
- /**
77
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
78
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
79
- */
80
- margin?: Space | Margin;
81
- /**
82
- * Size of the component ('medium' | 'large' | 'fillParent').
83
- */
84
- size?: Size;
85
- /**
86
- * Value of the tabindex attribute.
87
- */
88
- tabIndex?: number;
89
- /**
90
- * Reference to the component.
91
- */
92
- ref?: React.RefObject<HTMLDivElement>;
93
- };
94
-
95
- export default function DxcDateInput(props: Props): JSX.Element;
@@ -1,18 +0,0 @@
1
- type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2
- type Padding = {
3
- top?: Space;
4
- bottom?: Space;
5
- left?: Space;
6
- right?: Space;
7
- };
8
-
9
- type Props = {
10
- isCloseVisible?: boolean;
11
- onCloseClick?: void;
12
- overlay?: boolean;
13
- onBackgroundClick?: void;
14
- padding?: Padding,
15
- tabIndex?: number;
16
- };
17
-
18
- export default function DxcDialog(props: Props): JSX.Element;
@@ -1,26 +0,0 @@
1
- type Size = "small" | "medium" | "large" | "fillParent" | "fitContent";
2
- type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
- type Margin = {
4
- top?: Space;
5
- bottom?: Space;
6
- left?: Space;
7
- right?: Space;
8
- };
9
-
10
- type Props = {
11
- options?: any;
12
- optionsIconPosition?: "before" | "after";
13
- icon?: any;
14
- iconSrc?: string;
15
- iconPosition?: "before" | "after";
16
- label?: string;
17
- disabled?: boolean;
18
- caretHidden?: boolean;
19
- onSelectOption?: void;
20
- expandOnHover?: boolean;
21
- margin?: Space | Margin;
22
- size?: Size;
23
- tabIndex?: number;
24
- };
25
-
26
- export default function DxcDropdown(props: Props): JSX.Element;
@@ -1,287 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
-
5
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports["default"] = void 0;
11
-
12
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
-
14
- var _react = _interopRequireDefault(require("react"));
15
-
16
- var _propTypes = _interopRequireDefault(require("prop-types"));
17
-
18
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
19
-
20
- var _useTheme = _interopRequireDefault(require("../useTheme.js"));
21
-
22
- function _templateObject10() {
23
- var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"]);
24
-
25
- _templateObject10 = function _templateObject10() {
26
- return data;
27
- };
28
-
29
- return data;
30
- }
31
-
32
- function _templateObject9() {
33
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-wrap: wrap;\n align-content: center;\n height: 24px;\n width: 24px;\n font-size: 1rem;\n font-family: ", ";\n border: 1px solid transparent;\n border-radius: 4px;\n margin-left: 4px;\n background-color: transparent;\n padding: 3px;\n cursor: pointer;\n svg {\n line-height: 18px;\n }\n &:hover {\n background-color: ", ";\n }\n &:focus {\n background-color: ", ";\n }\n &:active {\n background-color: ", ";\n }\n"]);
34
-
35
- _templateObject9 = function _templateObject9() {
36
- return data;
37
- };
38
-
39
- return data;
40
- }
41
-
42
- function _templateObject8() {
43
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-wrap: wrap;\n align-content: center;\n padding: 3px;\n height: 18px;\n width: 18px;\n color: #d0011b;\n"]);
44
-
45
- _templateObject8 = function _templateObject8() {
46
- return data;
47
- };
48
-
49
- return data;
50
- }
51
-
52
- function _templateObject7() {
53
- var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n width: ", ";\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"]);
54
-
55
- _templateObject7 = function _templateObject7() {
56
- return data;
57
- };
58
-
59
- return data;
60
- }
61
-
62
- function _templateObject6() {
63
- var data = (0, _taggedTemplateLiteral2["default"])([""]);
64
-
65
- _templateObject6 = function _templateObject6() {
66
- return data;
67
- };
68
-
69
- return data;
70
- }
71
-
72
- function _templateObject5() {
73
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 12px;\n background-color: ", ";\n width: 48px;\n height: 48px;\n border-radius: 2px;\n color: ", ";\n"]);
74
-
75
- _templateObject5 = function _templateObject5() {
76
- return data;
77
- };
78
-
79
- return data;
80
- }
81
-
82
- function _templateObject4() {
83
- var data = (0, _taggedTemplateLiteral2["default"])(["\n width: 48px;\n height: 48px;\n object-fit: contain;\n margin-right: 12px;\n border-radius: 2px;\n"]);
84
-
85
- _templateObject4 = function _templateObject4() {
86
- return data;
87
- };
88
-
89
- return data;
90
- }
91
-
92
- function _templateObject3() {
93
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: row;\n align-items: center;\n"]);
94
-
95
- _templateObject3 = function _templateObject3() {
96
- return data;
97
- };
98
-
99
- return data;
100
- }
101
-
102
- function _templateObject2() {
103
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n"]);
104
-
105
- _templateObject2 = function _templateObject2() {
106
- return data;
107
- };
108
-
109
- return data;
110
- }
111
-
112
- function _templateObject() {
113
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: row;\n padding: ", ";\n background-color: ", ";\n border-radius: ", ";\n width: ", ";\n min-height: ", ";\n border-color: ", ";\n border-width: ", ";\n border-style: ", ";\n display: flex;\n justify-content: center;\n"]);
114
-
115
- _templateObject = function _templateObject() {
116
- return data;
117
- };
118
-
119
- return data;
120
- }
121
-
122
- var deleteIcon = _react["default"].createElement("svg", {
123
- xmlns: "http://www.w3.org/2000/svg",
124
- width: "24",
125
- height: "24",
126
- viewBox: "0 0 24 24",
127
- fill: "currentColor"
128
- }, _react["default"].createElement("path", {
129
- d: "M0 0h24v24H0V0z",
130
- fill: "none"
131
- }), _react["default"].createElement("path", {
132
- d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
133
- }));
134
-
135
- var errorIcon = _react["default"].createElement("svg", {
136
- xmlns: "http://www.w3.org/2000/svg",
137
- height: "24px",
138
- viewBox: "0 0 24 24",
139
- width: "24px",
140
- fill: "currentColor"
141
- }, _react["default"].createElement("path", {
142
- d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
143
- }));
144
-
145
- var FileItem = function FileItem(_ref) {
146
- var mode = _ref.mode,
147
- multiple = _ref.multiple,
148
- _ref$name = _ref.name,
149
- name = _ref$name === void 0 ? "" : _ref$name,
150
- _ref$error = _ref.error,
151
- error = _ref$error === void 0 ? "" : _ref$error,
152
- showPreview = _ref.showPreview,
153
- preview = _ref.preview,
154
- type = _ref.type,
155
- numFiles = _ref.numFiles,
156
- onDelete = _ref.onDelete;
157
- var colorsTheme = (0, _useTheme["default"])();
158
- var isImage = type.includes("image");
159
-
160
- var getIconAriaLabel = function getIconAriaLabel() {
161
- if (type.includes("video")) {
162
- return "video";
163
- }
164
-
165
- if (type.includes("audio")) {
166
- return "audio";
167
- }
168
-
169
- return "file";
170
- };
171
-
172
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
173
- theme: colorsTheme.fileInput
174
- }, _react["default"].createElement(Container, {
175
- mode: mode,
176
- multiple: multiple,
177
- error: error,
178
- showPreview: showPreview,
179
- numFiles: numFiles
180
- }, showPreview && (isImage ? _react["default"].createElement(ImagePreview, {
181
- src: preview,
182
- alt: name
183
- }) : _react["default"].createElement(IconPreviewContainer, {
184
- error: error,
185
- "aria-label": getIconAriaLabel()
186
- }, _react["default"].createElement(IconPreview, {
187
- error: error
188
- }, preview))), _react["default"].createElement(FileItemContent, null, _react["default"].createElement(FileItemContainer, null, _react["default"].createElement(FileName, {
189
- mode: mode,
190
- multiple: multiple,
191
- error: error,
192
- showPreview: showPreview,
193
- numFiles: numFiles
194
- }, name), error && _react["default"].createElement(ErrorIcon, {
195
- "aria-label": "Error"
196
- }, errorIcon), _react["default"].createElement(DeleteIcon, {
197
- error: error,
198
- onClick: function onClick() {
199
- return onDelete(name);
200
- },
201
- "aria-label": "Remove ".concat(name)
202
- }, deleteIcon)), error && (multiple || numFiles > 1) && _react["default"].createElement(ErrorMessage, null, error))));
203
- };
204
-
205
- var Container = _styledComponents["default"].div(_templateObject(), function (props) {
206
- return props.showPreview ? "8px" : "8px 8px 8px 16px";
207
- }, function (props) {
208
- return props.error && props.theme.errorFileItemBackgroundColor;
209
- }, function (props) {
210
- return props.theme.fileItemBorderRadius;
211
- }, function (props) {
212
- return props.mode === "file" && !props.multiple && props.numFiles === 1 ? "calc(230px - 26px)" : !props.showPreview ? "calc(320px - 26px)" : props.showPreview && "calc(320px - 18px)";
213
- }, function (props) {
214
- return props.mode === "file" && !props.multiple && props.numFiles === 1 || !props.showPreview && !props.error ? "calc(40px - 18px)" : !props.showPreview && props.error ? "calc(59px - 18px)" : "calc(64px - 18px)";
215
- }, function (props) {
216
- return props.error ? props.theme.errorFileItemBorderColor : props.theme.fileItemBorderColor;
217
- }, function (props) {
218
- return props.theme.fileItemBorderThickness;
219
- }, function (props) {
220
- return props.theme.fileItemBorderStyle;
221
- });
222
-
223
- var FileItemContent = _styledComponents["default"].div(_templateObject2());
224
-
225
- var FileItemContainer = _styledComponents["default"].div(_templateObject3());
226
-
227
- var ImagePreview = _styledComponents["default"].img(_templateObject4());
228
-
229
- var IconPreviewContainer = _styledComponents["default"].div(_templateObject5(), function (props) {
230
- return props.error ? props.theme.errorFileItemIconBackgroundColor : props.theme.fileItemIconBackgroundColor;
231
- }, function (props) {
232
- return props.error ? props.theme.errorFileItemIconColor : props.theme.fileItemIconColor;
233
- });
234
-
235
- var IconPreview = _styledComponents["default"].div(_templateObject6());
236
-
237
- var FileName = _styledComponents["default"].span(_templateObject7(), function (props) {
238
- return props.theme.fileNameFontColor;
239
- }, function (props) {
240
- return props.mode === "file" && !props.multiple && props.error && props.numFiles === 1 ? "calc(230px - 76px)" : props.mode === "file" && !props.multiple && !props.error && props.numFiles === 1 ? "calc(230px - 50px)" : !props.showPreview && !props.error ? "calc(320px - 52px)" : !props.showPreview && props.error ? "calc(320px - 76px)" : props.showPreview && props.error ? "calc(320px - 128px)" : props.showPreview && !props.error && "calc(320px - 102px)";
241
- }, function (props) {
242
- return props.theme.fileItemFontFamily;
243
- }, function (props) {
244
- return props.theme.fileItemFontSize;
245
- }, function (props) {
246
- return props.theme.fileItemFontWeight;
247
- }, function (props) {
248
- return props.theme.fileItemLineHeight;
249
- });
250
-
251
- var ErrorIcon = _styledComponents["default"].span(_templateObject8());
252
-
253
- var DeleteIcon = _styledComponents["default"].button(_templateObject9(), function (props) {
254
- return props.theme.fontFamily;
255
- }, function (props) {
256
- return props.error ? props.theme.errorHoverDeleteFileItemBackgroundColor : props.theme.hoverDeleteFileItemBackgroundColor;
257
- }, function (props) {
258
- return props.error ? props.theme.errorHoverDeleteFileItemBackgroundColor : props.theme.hoverDeleteFileItemBackgroundColor;
259
- }, function (props) {
260
- return props.error ? props.theme.errorActiveDeleteFileItemBackgroundColor : props.theme.activeDeleteFileItemBackgroundColor;
261
- });
262
-
263
- var ErrorMessage = _styledComponents["default"].span(_templateObject10(), function (props) {
264
- return props.theme.errorMessageFontColor;
265
- }, function (props) {
266
- return props.theme.errorMessageFontFamily;
267
- }, function (props) {
268
- return props.theme.errorMessageFontSize;
269
- }, function (props) {
270
- return props.theme.errorMessageFontWeight;
271
- }, function (props) {
272
- return props.theme.errorMessageLineHeight;
273
- });
274
-
275
- FileItem.propTypes = {
276
- mode: _propTypes["default"].string,
277
- multiple: _propTypes["default"].bool,
278
- name: _propTypes["default"].string,
279
- type: _propTypes["default"].string,
280
- showPreview: _propTypes["default"]["boolean"],
281
- numFiles: _propTypes["default"].number,
282
- preview: _propTypes["default"].string,
283
- error: _propTypes["default"].string,
284
- onDelete: _propTypes["default"].func
285
- };
286
- var _default = FileItem;
287
- exports["default"] = _default;