@dxc-technology/halstack-react 0.0.0-5dd2266 → 0.0.0-5ec4be9

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 (353) hide show
  1. package/README.md +3 -4
  2. package/dist/index.d.mts +4014 -0
  3. package/dist/index.d.ts +4014 -0
  4. package/dist/index.js +14967 -0
  5. package/dist/index.mjs +14878 -0
  6. package/package.json +83 -67
  7. package/BackgroundColorContext.d.ts +0 -1
  8. package/BackgroundColorContext.js +0 -30
  9. package/HalstackContext.d.ts +0 -1235
  10. package/HalstackContext.js +0 -310
  11. package/accordion/Accordion.d.ts +0 -4
  12. package/accordion/Accordion.js +0 -182
  13. package/accordion/Accordion.stories.tsx +0 -283
  14. package/accordion/Accordion.test.js +0 -56
  15. package/accordion/types.d.ts +0 -57
  16. package/accordion/types.js +0 -5
  17. package/accordion-group/AccordionGroup.d.ts +0 -8
  18. package/accordion-group/AccordionGroup.js +0 -101
  19. package/accordion-group/AccordionGroup.stories.tsx +0 -252
  20. package/accordion-group/AccordionGroup.test.js +0 -98
  21. package/accordion-group/AccordionGroupAccordion.d.ts +0 -4
  22. package/accordion-group/AccordionGroupAccordion.js +0 -31
  23. package/accordion-group/types.d.ts +0 -67
  24. package/accordion-group/types.js +0 -5
  25. package/alert/Alert.d.ts +0 -4
  26. package/alert/Alert.js +0 -254
  27. package/alert/Alert.stories.tsx +0 -198
  28. package/alert/Alert.test.js +0 -75
  29. package/alert/types.d.ts +0 -49
  30. package/alert/types.js +0 -5
  31. package/badge/Badge.d.ts +0 -4
  32. package/badge/Badge.js +0 -48
  33. package/badge/types.d.ts +0 -5
  34. package/badge/types.js +0 -5
  35. package/bleed/Bleed.d.ts +0 -3
  36. package/bleed/Bleed.js +0 -43
  37. package/bleed/Bleed.stories.tsx +0 -342
  38. package/bleed/types.d.ts +0 -37
  39. package/bleed/types.js +0 -5
  40. package/box/Box.d.ts +0 -4
  41. package/box/Box.js +0 -75
  42. package/box/Box.stories.tsx +0 -119
  43. package/box/Box.test.js +0 -13
  44. package/box/types.d.ts +0 -32
  45. package/box/types.js +0 -5
  46. package/bulleted-list/BulletedList.d.ts +0 -7
  47. package/bulleted-list/BulletedList.js +0 -89
  48. package/bulleted-list/BulletedList.stories.tsx +0 -115
  49. package/bulleted-list/types.d.ts +0 -38
  50. package/bulleted-list/types.js +0 -5
  51. package/button/Button.d.ts +0 -4
  52. package/button/Button.js +0 -120
  53. package/button/Button.stories.tsx +0 -344
  54. package/button/Button.test.js +0 -36
  55. package/button/types.d.ts +0 -57
  56. package/button/types.js +0 -5
  57. package/card/Card.d.ts +0 -4
  58. package/card/Card.js +0 -120
  59. package/card/Card.stories.tsx +0 -171
  60. package/card/Card.test.js +0 -39
  61. package/card/types.d.ts +0 -62
  62. package/card/types.js +0 -5
  63. package/checkbox/Checkbox.d.ts +0 -4
  64. package/checkbox/Checkbox.js +0 -215
  65. package/checkbox/Checkbox.stories.tsx +0 -222
  66. package/checkbox/Checkbox.test.js +0 -199
  67. package/checkbox/types.d.ts +0 -72
  68. package/checkbox/types.js +0 -5
  69. package/chip/Chip.d.ts +0 -4
  70. package/chip/Chip.js +0 -121
  71. package/chip/Chip.stories.tsx +0 -214
  72. package/chip/Chip.test.js +0 -41
  73. package/chip/types.d.ts +0 -45
  74. package/chip/types.js +0 -5
  75. package/common/OpenSans.css +0 -69
  76. package/common/coreTokens.d.ts +0 -237
  77. package/common/coreTokens.js +0 -184
  78. package/common/fonts/OpenSans-Bold.ttf +0 -0
  79. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  80. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  81. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  82. package/common/fonts/OpenSans-Italic.ttf +0 -0
  83. package/common/fonts/OpenSans-Light.ttf +0 -0
  84. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  85. package/common/fonts/OpenSans-Regular.ttf +0 -0
  86. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  87. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  88. package/common/utils.d.ts +0 -1
  89. package/common/utils.js +0 -16
  90. package/common/variables.d.ts +0 -1381
  91. package/common/variables.js +0 -1253
  92. package/container/Container.d.ts +0 -4
  93. package/container/Container.js +0 -194
  94. package/container/Container.stories.tsx +0 -214
  95. package/container/types.d.ts +0 -74
  96. package/container/types.js +0 -5
  97. package/date-input/Calendar.d.ts +0 -4
  98. package/date-input/Calendar.js +0 -214
  99. package/date-input/DateInput.d.ts +0 -4
  100. package/date-input/DateInput.js +0 -223
  101. package/date-input/DateInput.stories.tsx +0 -285
  102. package/date-input/DateInput.test.js +0 -808
  103. package/date-input/DatePicker.d.ts +0 -4
  104. package/date-input/DatePicker.js +0 -115
  105. package/date-input/Icons.d.ts +0 -6
  106. package/date-input/Icons.js +0 -58
  107. package/date-input/YearPicker.d.ts +0 -4
  108. package/date-input/YearPicker.js +0 -100
  109. package/date-input/types.d.ts +0 -164
  110. package/date-input/types.js +0 -5
  111. package/dialog/Dialog.d.ts +0 -4
  112. package/dialog/Dialog.js +0 -104
  113. package/dialog/Dialog.stories.tsx +0 -365
  114. package/dialog/Dialog.test.js +0 -307
  115. package/dialog/types.d.ts +0 -36
  116. package/dialog/types.js +0 -5
  117. package/dropdown/Dropdown.d.ts +0 -4
  118. package/dropdown/Dropdown.js +0 -334
  119. package/dropdown/Dropdown.stories.tsx +0 -438
  120. package/dropdown/Dropdown.test.js +0 -599
  121. package/dropdown/DropdownMenu.d.ts +0 -4
  122. package/dropdown/DropdownMenu.js +0 -63
  123. package/dropdown/DropdownMenuItem.d.ts +0 -4
  124. package/dropdown/DropdownMenuItem.js +0 -67
  125. package/dropdown/types.d.ts +0 -98
  126. package/dropdown/types.js +0 -5
  127. package/file-input/FileInput.d.ts +0 -4
  128. package/file-input/FileInput.js +0 -479
  129. package/file-input/FileInput.stories.tsx +0 -618
  130. package/file-input/FileInput.test.js +0 -459
  131. package/file-input/FileItem.d.ts +0 -4
  132. package/file-input/FileItem.js +0 -135
  133. package/file-input/types.d.ts +0 -129
  134. package/file-input/types.js +0 -5
  135. package/flex/Flex.d.ts +0 -4
  136. package/flex/Flex.js +0 -57
  137. package/flex/Flex.stories.tsx +0 -112
  138. package/flex/types.d.ts +0 -97
  139. package/flex/types.js +0 -5
  140. package/footer/Footer.d.ts +0 -4
  141. package/footer/Footer.js +0 -125
  142. package/footer/Footer.stories.tsx +0 -152
  143. package/footer/Footer.test.js +0 -85
  144. package/footer/Icons.d.ts +0 -2
  145. package/footer/Icons.js +0 -72
  146. package/footer/types.d.ts +0 -58
  147. package/footer/types.js +0 -5
  148. package/grid/Grid.d.ts +0 -7
  149. package/grid/Grid.js +0 -76
  150. package/grid/Grid.stories.tsx +0 -219
  151. package/grid/types.d.ts +0 -115
  152. package/grid/types.js +0 -5
  153. package/header/Header.d.ts +0 -8
  154. package/header/Header.js +0 -220
  155. package/header/Header.stories.tsx +0 -251
  156. package/header/Header.test.js +0 -66
  157. package/header/Icons.d.ts +0 -2
  158. package/header/Icons.js +0 -29
  159. package/header/types.d.ts +0 -33
  160. package/header/types.js +0 -5
  161. package/heading/Heading.d.ts +0 -4
  162. package/heading/Heading.js +0 -137
  163. package/heading/Heading.stories.tsx +0 -54
  164. package/heading/Heading.test.js +0 -169
  165. package/heading/types.d.ts +0 -33
  166. package/heading/types.js +0 -5
  167. package/image/Image.d.ts +0 -4
  168. package/image/Image.js +0 -70
  169. package/image/Image.stories.tsx +0 -127
  170. package/image/types.d.ts +0 -72
  171. package/image/types.js +0 -5
  172. package/inset/Inset.d.ts +0 -3
  173. package/inset/Inset.js +0 -43
  174. package/inset/Inset.stories.tsx +0 -230
  175. package/inset/types.d.ts +0 -37
  176. package/inset/types.js +0 -5
  177. package/layout/ApplicationLayout.d.ts +0 -20
  178. package/layout/ApplicationLayout.js +0 -134
  179. package/layout/ApplicationLayout.stories.tsx +0 -162
  180. package/layout/Icons.d.ts +0 -8
  181. package/layout/Icons.js +0 -58
  182. package/layout/SidenavContext.d.ts +0 -5
  183. package/layout/SidenavContext.js +0 -13
  184. package/layout/types.d.ts +0 -41
  185. package/layout/types.js +0 -5
  186. package/link/Link.d.ts +0 -4
  187. package/link/Link.js +0 -115
  188. package/link/Link.stories.tsx +0 -253
  189. package/link/Link.test.js +0 -63
  190. package/link/types.d.ts +0 -54
  191. package/link/types.js +0 -5
  192. package/main.d.ts +0 -46
  193. package/main.js +0 -336
  194. package/nav-tabs/NavTabs.d.ts +0 -8
  195. package/nav-tabs/NavTabs.js +0 -90
  196. package/nav-tabs/NavTabs.stories.tsx +0 -274
  197. package/nav-tabs/NavTabs.test.js +0 -75
  198. package/nav-tabs/Tab.d.ts +0 -4
  199. package/nav-tabs/Tab.js +0 -117
  200. package/nav-tabs/types.d.ts +0 -52
  201. package/nav-tabs/types.js +0 -5
  202. package/number-input/NumberInput.d.ts +0 -11
  203. package/number-input/NumberInput.js +0 -67
  204. package/number-input/NumberInput.stories.tsx +0 -131
  205. package/number-input/NumberInput.test.js +0 -830
  206. package/number-input/types.d.ts +0 -130
  207. package/number-input/types.js +0 -5
  208. package/paginator/Icons.d.ts +0 -5
  209. package/paginator/Icons.js +0 -40
  210. package/paginator/Paginator.d.ts +0 -4
  211. package/paginator/Paginator.js +0 -135
  212. package/paginator/Paginator.stories.tsx +0 -87
  213. package/paginator/Paginator.test.js +0 -335
  214. package/paginator/types.d.ts +0 -38
  215. package/paginator/types.js +0 -5
  216. package/paragraph/Paragraph.d.ts +0 -5
  217. package/paragraph/Paragraph.js +0 -22
  218. package/paragraph/Paragraph.stories.tsx +0 -27
  219. package/password-input/Icons.d.ts +0 -6
  220. package/password-input/Icons.js +0 -35
  221. package/password-input/PasswordInput.d.ts +0 -4
  222. package/password-input/PasswordInput.js +0 -97
  223. package/password-input/PasswordInput.stories.tsx +0 -99
  224. package/password-input/PasswordInput.test.js +0 -198
  225. package/password-input/types.d.ts +0 -111
  226. package/password-input/types.js +0 -5
  227. package/progress-bar/ProgressBar.d.ts +0 -4
  228. package/progress-bar/ProgressBar.js +0 -144
  229. package/progress-bar/ProgressBar.stories.tsx +0 -93
  230. package/progress-bar/ProgressBar.test.js +0 -93
  231. package/progress-bar/types.d.ts +0 -37
  232. package/progress-bar/types.js +0 -5
  233. package/quick-nav/QuickNav.d.ts +0 -4
  234. package/quick-nav/QuickNav.js +0 -94
  235. package/quick-nav/QuickNav.stories.tsx +0 -356
  236. package/quick-nav/types.d.ts +0 -21
  237. package/quick-nav/types.js +0 -5
  238. package/radio-group/Radio.d.ts +0 -4
  239. package/radio-group/Radio.js +0 -124
  240. package/radio-group/RadioGroup.d.ts +0 -4
  241. package/radio-group/RadioGroup.js +0 -235
  242. package/radio-group/RadioGroup.stories.tsx +0 -214
  243. package/radio-group/RadioGroup.test.js +0 -756
  244. package/radio-group/types.d.ts +0 -114
  245. package/radio-group/types.js +0 -5
  246. package/resultset-table/Icons.d.ts +0 -7
  247. package/resultset-table/Icons.js +0 -47
  248. package/resultset-table/ResultsetTable.d.ts +0 -4
  249. package/resultset-table/ResultsetTable.js +0 -159
  250. package/resultset-table/ResultsetTable.stories.tsx +0 -300
  251. package/resultset-table/ResultsetTable.test.js +0 -305
  252. package/resultset-table/types.d.ts +0 -67
  253. package/resultset-table/types.js +0 -5
  254. package/select/Icons.d.ts +0 -10
  255. package/select/Icons.js +0 -89
  256. package/select/Listbox.d.ts +0 -4
  257. package/select/Listbox.js +0 -143
  258. package/select/Option.d.ts +0 -4
  259. package/select/Option.js +0 -80
  260. package/select/Select.d.ts +0 -4
  261. package/select/Select.js +0 -580
  262. package/select/Select.stories.tsx +0 -971
  263. package/select/Select.test.js +0 -2370
  264. package/select/types.d.ts +0 -209
  265. package/select/types.js +0 -5
  266. package/sidenav/Icons.d.ts +0 -7
  267. package/sidenav/Icons.js +0 -47
  268. package/sidenav/Sidenav.d.ts +0 -10
  269. package/sidenav/Sidenav.js +0 -196
  270. package/sidenav/Sidenav.stories.tsx +0 -282
  271. package/sidenav/Sidenav.test.js +0 -37
  272. package/sidenav/types.d.ts +0 -76
  273. package/sidenav/types.js +0 -5
  274. package/slider/Slider.d.ts +0 -4
  275. package/slider/Slider.js +0 -285
  276. package/slider/Slider.test.js +0 -254
  277. package/slider/types.d.ts +0 -86
  278. package/slider/types.js +0 -5
  279. package/spinner/Spinner.d.ts +0 -4
  280. package/spinner/Spinner.js +0 -206
  281. package/spinner/Spinner.stories.tsx +0 -129
  282. package/spinner/Spinner.test.js +0 -55
  283. package/spinner/types.d.ts +0 -32
  284. package/spinner/types.js +0 -5
  285. package/switch/Switch.d.ts +0 -4
  286. package/switch/Switch.js +0 -214
  287. package/switch/Switch.stories.tsx +0 -137
  288. package/switch/Switch.test.js +0 -180
  289. package/switch/types.d.ts +0 -66
  290. package/switch/types.js +0 -5
  291. package/table/Table.d.ts +0 -4
  292. package/table/Table.js +0 -96
  293. package/table/Table.stories.tsx +0 -356
  294. package/table/Table.test.js +0 -21
  295. package/table/types.d.ts +0 -21
  296. package/table/types.js +0 -5
  297. package/tabs/Tab.d.ts +0 -4
  298. package/tabs/Tab.js +0 -113
  299. package/tabs/Tabs.d.ts +0 -4
  300. package/tabs/Tabs.js +0 -385
  301. package/tabs/Tabs.stories.tsx +0 -226
  302. package/tabs/Tabs.test.js +0 -294
  303. package/tabs/types.d.ts +0 -92
  304. package/tabs/types.js +0 -5
  305. package/tag/Tag.d.ts +0 -4
  306. package/tag/Tag.js +0 -151
  307. package/tag/Tag.stories.tsx +0 -155
  308. package/tag/Tag.test.js +0 -49
  309. package/tag/types.d.ts +0 -69
  310. package/tag/types.js +0 -5
  311. package/text-input/Icons.d.ts +0 -8
  312. package/text-input/Icons.js +0 -56
  313. package/text-input/Suggestion.d.ts +0 -4
  314. package/text-input/Suggestion.js +0 -67
  315. package/text-input/Suggestions.d.ts +0 -4
  316. package/text-input/Suggestions.js +0 -84
  317. package/text-input/TextInput.d.ts +0 -4
  318. package/text-input/TextInput.js +0 -578
  319. package/text-input/TextInput.stories.tsx +0 -465
  320. package/text-input/TextInput.test.js +0 -1739
  321. package/text-input/types.d.ts +0 -205
  322. package/text-input/types.js +0 -5
  323. package/textarea/Textarea.d.ts +0 -4
  324. package/textarea/Textarea.js +0 -234
  325. package/textarea/Textarea.stories.tsx +0 -174
  326. package/textarea/Textarea.test.js +0 -406
  327. package/textarea/types.d.ts +0 -141
  328. package/textarea/types.js +0 -5
  329. package/toggle-group/ToggleGroup.d.ts +0 -4
  330. package/toggle-group/ToggleGroup.js +0 -201
  331. package/toggle-group/ToggleGroup.stories.tsx +0 -218
  332. package/toggle-group/ToggleGroup.test.js +0 -137
  333. package/toggle-group/types.d.ts +0 -114
  334. package/toggle-group/types.js +0 -5
  335. package/typography/Typography.d.ts +0 -4
  336. package/typography/Typography.js +0 -23
  337. package/typography/Typography.stories.tsx +0 -198
  338. package/typography/types.d.ts +0 -18
  339. package/typography/types.js +0 -5
  340. package/useTheme.d.ts +0 -1134
  341. package/useTheme.js +0 -15
  342. package/useTranslatedLabels.d.ts +0 -85
  343. package/useTranslatedLabels.js +0 -14
  344. package/utils/BaseTypography.d.ts +0 -21
  345. package/utils/BaseTypography.js +0 -94
  346. package/utils/FocusLock.d.ts +0 -13
  347. package/utils/FocusLock.js +0 -121
  348. package/wizard/Wizard.d.ts +0 -4
  349. package/wizard/Wizard.js +0 -250
  350. package/wizard/Wizard.stories.tsx +0 -253
  351. package/wizard/Wizard.test.js +0 -114
  352. package/wizard/types.d.ts +0 -64
  353. package/wizard/types.js +0 -5
@@ -1,206 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- var _typeof3 = require("@babel/runtime/helpers/typeof");
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = void 0;
9
- var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
10
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
- var _react = _interopRequireDefault(require("react"));
12
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
13
- var _variables = require("../common/variables");
14
- var _useTheme = _interopRequireDefault(require("../useTheme"));
15
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
16
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
17
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
18
- var DxcSpinner = function DxcSpinner(_ref) {
19
- var _ref$label = _ref.label,
20
- label = _ref$label === void 0 ? "" : _ref$label,
21
- value = _ref.value,
22
- _ref$showValue = _ref.showValue,
23
- showValue = _ref$showValue === void 0 ? false : _ref$showValue,
24
- _ref$mode = _ref.mode,
25
- mode = _ref$mode === void 0 ? "large" : _ref$mode,
26
- margin = _ref.margin;
27
- var colorsTheme = (0, _useTheme["default"])();
28
- return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
29
- theme: colorsTheme.spinner
30
- }, /*#__PURE__*/_react["default"].createElement(DXCSpinner, {
31
- margin: margin,
32
- mode: mode
33
- }, /*#__PURE__*/_react["default"].createElement(SpinnerContainer, {
34
- mode: mode
35
- }, mode === "overlay" && /*#__PURE__*/_react["default"].createElement(BackOverlay, null), /*#__PURE__*/_react["default"].createElement(BackgroundSpinner, null, mode !== "small" && /*#__PURE__*/_react["default"].createElement(SVGBackground, {
36
- viewBox: "0 0 140 140"
37
- }, /*#__PURE__*/_react["default"].createElement(CircleBackground, {
38
- cx: "70",
39
- cy: "70",
40
- r: "65",
41
- mode: mode
42
- })), mode === "small" && /*#__PURE__*/_react["default"].createElement(SVGBackground, {
43
- viewBox: "0 0 16 16"
44
- }, /*#__PURE__*/_react["default"].createElement(CircleBackground, {
45
- cx: "8",
46
- cy: "8",
47
- r: "6",
48
- mode: mode
49
- }))), value >= 0 && value <= 100 ? /*#__PURE__*/_react["default"].createElement(Spinner, {
50
- role: "progressbar"
51
- }, mode !== "small" && /*#__PURE__*/_react["default"].createElement(SVGSpinner, {
52
- viewBox: "0 0 140 140",
53
- isDeterminated: true
54
- }, /*#__PURE__*/_react["default"].createElement(CircleSpinner, {
55
- cx: "70",
56
- cy: "70",
57
- r: "65",
58
- mode: mode,
59
- isDeterminated: true,
60
- value: value
61
- })), mode === "small" && /*#__PURE__*/_react["default"].createElement(SVGSpinner, {
62
- viewBox: "0 0 16 16",
63
- isDeterminated: true
64
- }, /*#__PURE__*/_react["default"].createElement(CircleSpinner, {
65
- cx: "8",
66
- cy: "8",
67
- r: "6",
68
- mode: mode,
69
- isDeterminated: true,
70
- value: value
71
- }))) : /*#__PURE__*/_react["default"].createElement(Spinner, {
72
- role: "progressbar"
73
- }, mode !== "small" && /*#__PURE__*/_react["default"].createElement(SVGSpinner, {
74
- viewBox: "0 0 140 140",
75
- isDeterminated: false
76
- }, /*#__PURE__*/_react["default"].createElement(CircleSpinner, {
77
- cx: "70",
78
- cy: "70",
79
- r: "65",
80
- mode: mode,
81
- isDeterminated: false,
82
- value: value
83
- })), mode === "small" && /*#__PURE__*/_react["default"].createElement(SVGSpinner, {
84
- viewBox: "0 0 16 16",
85
- isDeterminated: false
86
- }, /*#__PURE__*/_react["default"].createElement(CircleSpinner, {
87
- cx: "8",
88
- cy: "8",
89
- r: "6",
90
- mode: mode,
91
- isDeterminated: false,
92
- value: value
93
- }))), mode !== "small" && /*#__PURE__*/_react["default"].createElement(LabelsContainer, null, /*#__PURE__*/_react["default"].createElement(SpinnerLabel, {
94
- mode: mode
95
- }, label), (value || value === 0) && showValue && /*#__PURE__*/_react["default"].createElement(SpinnerProgress, {
96
- value: value,
97
- mode: mode,
98
- showValue: showValue
99
- }, value, "%")))));
100
- };
101
- var determinateValue = function determinateValue(value, strokeDashArray) {
102
- var val = 0;
103
- if (value >= 0 && value <= 100) {
104
- val = strokeDashArray * (1 - value / 100);
105
- }
106
- return val;
107
- };
108
- var DXCSpinner = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n height: ", ";\n width: ", ";\n display: ", ";\n position: ", ";\n top: ", ";\n left: ", ";\n justify-content: ", ";\n align-items: ", ";\n z-index: ", ";\n\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"])), function (props) {
109
- return props.mode === "overlay" ? "100vh" : "";
110
- }, function (props) {
111
- return props.mode === "overlay" ? "100vw" : "";
112
- }, function (props) {
113
- return props.mode === "overlay" ? "flex" : "";
114
- }, function (props) {
115
- return props.mode === "overlay" ? "fixed" : "";
116
- }, function (props) {
117
- return props.mode === "overlay" ? 0 : "";
118
- }, function (props) {
119
- return props.mode === "overlay" ? 0 : "";
120
- }, function (props) {
121
- return props.mode === "overlay" ? "center" : "";
122
- }, function (props) {
123
- return props.mode === "overlay" ? "center" : "";
124
- }, function (props) {
125
- return props.mode === "overlay" ? 1300 : "";
126
- }, function (props) {
127
- return props.mode != "overlay" ? props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px" : "";
128
- }, function (props) {
129
- return props.mode != "overlay" ? props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "" : "";
130
- }, function (props) {
131
- return props.mode != "overlay" ? props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "" : "";
132
- }, function (props) {
133
- return props.mode != "overlay" ? props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "" : "";
134
- }, function (props) {
135
- return props.mode != "overlay" ? props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "" : "";
136
- });
137
- var SpinnerContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n align-items: center;\n display: flex;\n height: ", ";\n width: ", ";\n justify-content: center;\n position: relative;\n background-color: transparent;\n\n @keyframes spinner-svg {\n 0% {\n transform: rotateZ(0deg);\n }\n 100% {\n transform: rotateZ(360deg);\n }\n }\n @keyframes svg-circle-large {\n 0% {\n stroke-dashoffset: 400;\n transform: rotate(0);\n }\n\n 50% {\n stroke-dashoffset: 75;\n transform: rotate(45deg);\n }\n\n 100% {\n stroke-dashoffset: 400;\n transform: rotate(360deg);\n }\n }\n @keyframes svg-circle-small {\n 0% {\n stroke-dashoffset: 35;\n transform: rotate(0);\n }\n\n 50% {\n stroke-dashoffset: 8;\n transform: rotate(45deg);\n }\n\n 100% {\n stroke-dashoffset: 35;\n transform: rotate(360deg);\n }\n }\n"])), function (props) {
138
- return props.mode === "small" ? "16px" : "140px";
139
- }, function (props) {
140
- return props.mode === "small" ? "16px" : "140px";
141
- });
142
- var BackOverlay = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n width: 100vw;\n height: 100vh;\n opacity: 1;\n transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n position: fixed;\n top: 0;\n left: 0;\n background-color: ", ";\n opacity: ", ";\n"])), function (props) {
143
- return "".concat(props.theme.overlayBackgroundColor);
144
- }, function (props) {
145
- return "".concat(props.theme.overlayOpacity);
146
- });
147
- var BackgroundSpinner = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n height: inherit;\n width: inherit;\n position: absolute;\n"])));
148
- var SVGBackground = _styledComponents["default"].svg(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n height: inherit;\n width: inherit;\n"])));
149
- var CircleBackground = _styledComponents["default"].circle(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n animation: none;\n fill: transparent;\n stroke: ", ";\n stroke-dasharray: ", ";\n stroke-linecap: initial;\n stroke-width: ", ";\n transform-origin: 50% 50%;\n vector-effect: non-scaling-stroke;\n"])), function (props) {
150
- return "".concat(props.theme.totalCircleColor);
151
- }, function (props) {
152
- return props.mode !== "small" ? "409" : "38";
153
- }, function (props) {
154
- return props.mode !== "small" ? "8.5px" : "2px";
155
- });
156
- var Spinner = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n height: inherit;\n width: inherit;\n position: relative;\n"])));
157
- var SVGSpinner = _styledComponents["default"].svg(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n height: inherit;\n width: inherit;\n transform: rotate(-90deg);\n top: 0;\n left: 0;\n transform-origin: center;\n overflow: visible;\n animation: ", ";\n"])), function (props) {
158
- return !props.isDeterminated ? "1.4s linear infinite both spinner-svg" : "";
159
- });
160
- var CircleSpinner = _styledComponents["default"].circle(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n fill: transparent;\n stroke-linecap: initial;\n vector-effect: non-scaling-stroke;\n animation: ", ";\n stroke: ", ";\n transform-origin: ", ";\n stroke-dasharray: ", ";\n stroke-width: ", ";\n stroke-dashoffset: ", ";\n"])), function (props) {
161
- return props.isDeterminated ? "none" : props.mode !== "small" ? "1.4s ease-in-out infinite both svg-circle-large" : "1.4s ease-in-out infinite both svg-circle-small";
162
- }, function (props) {
163
- return props.mode === "overlay" ? props.theme.trackCircleColorOverlay : props.theme.trackCircleColor;
164
- }, function (props) {
165
- return !props.isDeterminated ? "50% 50%" : "";
166
- }, function (props) {
167
- return props.mode !== "small" ? "409" : "38";
168
- }, function (props) {
169
- return props.mode !== "small" ? "8.5px" : "2px";
170
- }, function (props) {
171
- return props.isDeterminated ? props.mode !== "small" ? determinateValue(props.value, 409) : determinateValue(props.value, 38) : "";
172
- });
173
- var LabelsContainer = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n display: block;\n margin: 0 auto;\n position: absolute;\n text-align: center;\n width: 110px;\n"])));
174
- var SpinnerLabel = _styledComponents["default"].p(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n margin: 0;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-family: ", ";\n font-weight: ", ";\n font-size: ", ";\n font-style: ", ";\n color: ", ";\n text-align: ", ";\n letter-spacing: ", ";\n"])), function (props) {
175
- return props.mode === "overlay" ? props.theme.overlayLabelFontFamily : props.theme.labelFontFamily;
176
- }, function (props) {
177
- return props.mode === "overlay" ? props.theme.overlayLabelFontWeight : props.theme.labelFontWeight;
178
- }, function (props) {
179
- return props.mode === "overlay" ? props.theme.overlayLabelFontSize : props.theme.labelFontSize;
180
- }, function (props) {
181
- return props.mode === "overlay" ? props.theme.overlayLabelFontStyle : props.theme.labelFontStyle;
182
- }, function (props) {
183
- return props.mode === "overlay" ? props.theme.overlayLabelFontColor : props.theme.labelFontColor;
184
- }, function (props) {
185
- return props.mode === "overlay" ? props.theme.overlayLabelTextAlign : props.theme.labelTextAlign;
186
- }, function (props) {
187
- return props.mode === "overlay" ? props.theme.overlayLabelLetterSpacing : props.theme.labelLetterSpacing;
188
- });
189
- var SpinnerProgress = _styledComponents["default"].p(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n margin: 0;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: ", ";\n font-family: ", ";\n font-weight: ", ";\n font-size: ", ";\n font-style: ", ";\n color: ", ";\n text-align: ", ";\n letter-spacing: ", ";\n"])), function (props) {
190
- return props.value && props.showValue === true && "block" || "none";
191
- }, function (props) {
192
- return props.mode === "overlay" ? props.theme.overlayProgressValueFontFamily : props.theme.progressValueFontFamily;
193
- }, function (props) {
194
- return props.mode === "overlay" ? props.theme.overlayProgressValueFontWeight : props.theme.progressValueFontWeight;
195
- }, function (props) {
196
- return props.mode === "overlay" ? props.theme.overlayProgressValueFontSize : props.theme.progressValueFontSize;
197
- }, function (props) {
198
- return props.mode === "overlay" ? props.theme.overlayProgressValueFontStyle : props.theme.progressValueFontStyle;
199
- }, function (props) {
200
- return props.mode === "overlay" ? props.theme.overlayProgressValueFontColor : props.theme.progressValueFontColor;
201
- }, function (props) {
202
- return props.mode === "overlay" ? props.theme.overlayProgressValueTextAlign : props.theme.progressValueTextAlign;
203
- }, function (props) {
204
- return props.mode === "overlay" ? props.theme.overlayProgressValueLetterSpacing : props.theme.progressValueLetterSpacing;
205
- });
206
- var _default = exports["default"] = DxcSpinner;
@@ -1,129 +0,0 @@
1
- import React from "react";
2
- import DxcSpinner from "./Spinner";
3
- import Title from "../../.storybook/components/Title";
4
- import ExampleContainer from "../../.storybook/components/ExampleContainer";
5
- import { HalstackProvider } from "../HalstackContext";
6
-
7
- export default {
8
- title: "Spinner",
9
- component: DxcSpinner,
10
- };
11
-
12
- const opinionatedTheme = {
13
- spinner: {
14
- accentColor: "#5f249f",
15
- baseColor: "#ffffff",
16
- fontColor: "#000000",
17
- overlayColor: "#a46ede",
18
- overlayFontColor: "#ffffff",
19
- },
20
- };
21
-
22
- export const Chromatic = () => (
23
- <>
24
- <ExampleContainer>
25
- <Title title="With label" theme="light" level={4} />
26
- <DxcSpinner label="Label" value={50}></DxcSpinner>
27
- <Title title="With value label" theme="light" level={4} />
28
- <DxcSpinner value={50} showValue></DxcSpinner>
29
- <Title title="With label and value label" theme="light" level={4} />
30
- <DxcSpinner label="Label" value={50} showValue></DxcSpinner>
31
- <Title title="With 100%" theme="light" level={4} />
32
- <DxcSpinner label="Label" value={100} showValue></DxcSpinner>
33
- </ExampleContainer>
34
- <Title title="Modes" theme="light" level={2} />
35
- <ExampleContainer>
36
- <Title title="Mode large" theme="light" level={4} />
37
- <DxcSpinner mode="large" value={50}></DxcSpinner>
38
- <Title title="Mode small" theme="light" level={4} />
39
- <DxcSpinner mode="small" value={50}></DxcSpinner>
40
- <Title title="Mode small with 100%" theme="light" level={4} />
41
- <DxcSpinner mode="small" value={100} showValue></DxcSpinner>
42
- </ExampleContainer>
43
- <Title title="Margins with large mode" theme="light" level={2} />
44
- <ExampleContainer>
45
- <Title title="Xxsmall margin" theme="light" level={4} />
46
- <DxcSpinner margin="xxsmall" value={75}></DxcSpinner>
47
- <Title title="Xsmall margin" theme="light" level={4} />
48
- <DxcSpinner margin="xsmall" value={75}></DxcSpinner>
49
- <Title title="Small margin" theme="light" level={4} />
50
- <DxcSpinner margin="small" value={75}></DxcSpinner>
51
- <Title title="Medium margin" theme="light" level={4} />
52
- <DxcSpinner margin="medium" value={75}></DxcSpinner>
53
- <Title title="Large margin" theme="light" level={4} />
54
- <DxcSpinner margin="large" value={75}></DxcSpinner>
55
- <Title title="Xlarge margin" theme="light" level={4} />
56
- <DxcSpinner margin="xlarge" value={75}></DxcSpinner>
57
- <Title title="Xxlarge margin" theme="light" level={4} />
58
- <DxcSpinner margin="xxlarge" value={75}></DxcSpinner>
59
- </ExampleContainer>
60
- <Title title="Margins with small mode" theme="light" level={2} />
61
- <ExampleContainer>
62
- <Title title="Xxsmall margin" theme="light" level={4} />
63
- <DxcSpinner margin="xxsmall" mode="small" value={75}></DxcSpinner>
64
- <Title title="Xsmall margin" theme="light" level={4} />
65
- <DxcSpinner margin="xsmall" mode="small" value={75}></DxcSpinner>
66
- <Title title="Small margin" theme="light" level={4} />
67
- <DxcSpinner margin="small" mode="small" value={75}></DxcSpinner>
68
- <Title title="Medium margin" theme="light" level={4} />
69
- <DxcSpinner margin="medium" mode="small" value={75}></DxcSpinner>
70
- <Title title="Large margin" theme="light" level={4} />
71
- <DxcSpinner margin="large" mode="small" value={75}></DxcSpinner>
72
- <Title title="Xlarge margin" theme="light" level={4} />
73
- <DxcSpinner margin="xlarge" mode="small" value={75}></DxcSpinner>
74
- <Title title="Xxlarge margin" theme="light" level={4} />
75
- <DxcSpinner margin="xxlarge" mode="small" value={75}></DxcSpinner>
76
- </ExampleContainer>
77
- <Title title="Opinionated theme" theme="light" level={2} />
78
- <ExampleContainer>
79
- <Title title="With label and value label" theme="light" level={4} />
80
- <HalstackProvider theme={opinionatedTheme}>
81
- <DxcSpinner label="Label" value={50} showValue></DxcSpinner>
82
- </HalstackProvider>
83
- </ExampleContainer>
84
- </>
85
- );
86
-
87
- export const SpinnerOverlay = () => (
88
- <ExampleContainer>
89
- <Title title="Mode overlay" theme="light" level={4} />
90
- <DxcSpinner mode="overlay" value={25}></DxcSpinner>
91
- </ExampleContainer>
92
- );
93
-
94
- export const SpinnerOverlayWith100 = () => (
95
- <ExampleContainer>
96
- <Title title="Mode overlay" theme="light" level={4} />
97
- <DxcSpinner mode="overlay" value={100}></DxcSpinner>
98
- </ExampleContainer>
99
- );
100
-
101
- export const SpinnerOverlayWithLabel = () => (
102
- <ExampleContainer>
103
- <Title title="Mode overlay" theme="light" level={4} />
104
- <DxcSpinner mode="overlay" value={50} label="Label"></DxcSpinner>
105
- </ExampleContainer>
106
- );
107
-
108
- export const SpinnerOverlayWithValue = () => (
109
- <ExampleContainer>
110
- <Title title="Mode overlay" theme="light" level={4} />
111
- <DxcSpinner mode="overlay" value={50} showValue></DxcSpinner>
112
- </ExampleContainer>
113
- );
114
-
115
- export const SpinnerOverlayWithValueAndLabel = () => (
116
- <ExampleContainer>
117
- <Title title="Mode overlay" theme="light" level={4} />
118
- <DxcSpinner mode="overlay" label="Label" value={50} showValue></DxcSpinner>
119
- </ExampleContainer>
120
- );
121
-
122
- export const SpinnerOverlayWithValueAndLabelOpinionated = () => (
123
- <ExampleContainer>
124
- <HalstackProvider theme={opinionatedTheme}>
125
- <Title title="Mode overlay" theme="light" level={4} />
126
- <DxcSpinner mode="overlay" label="Label" value={50} showValue></DxcSpinner>
127
- </HalstackProvider>
128
- </ExampleContainer>
129
- );
@@ -1,55 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- var _react = _interopRequireDefault(require("react"));
5
- var _react2 = require("@testing-library/react");
6
- var _Spinner = _interopRequireDefault(require("./Spinner.tsx"));
7
- describe("Spinner component tests", function () {
8
- test("Spinner renders with correct label", function () {
9
- var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Spinner["default"], {
10
- label: "test-loading"
11
- })),
12
- getByText = _render.getByText;
13
- expect(getByText("test-loading")).toBeTruthy();
14
- });
15
- test("Spinner shows value correctly", function () {
16
- var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Spinner["default"], {
17
- label: "test-loading",
18
- value: 75,
19
- showValue: true
20
- })),
21
- getByText = _render2.getByText;
22
- expect(getByText("75%")).toBeTruthy();
23
- });
24
- test("Small spinner hides value and label correctly", function () {
25
- var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Spinner["default"], {
26
- mode: "small",
27
- label: "test-loading",
28
- value: 75,
29
- showValue: true
30
- })),
31
- queryByText = _render3.queryByText;
32
- expect(queryByText("test-loading")).toBeFalsy();
33
- expect(queryByText("75%")).toBeFalsy();
34
- });
35
- test("Overlay spinner shows value and label correctly", function () {
36
- var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Spinner["default"], {
37
- mode: "overlay",
38
- label: "test-loading",
39
- value: 75,
40
- showValue: true
41
- })),
42
- getByText = _render4.getByText;
43
- expect(getByText("test-loading")).toBeTruthy();
44
- expect(getByText("75%")).toBeTruthy();
45
- });
46
- test("Get spinner by role", function () {
47
- var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Spinner["default"], {
48
- label: "test-loading",
49
- value: 75,
50
- showValue: true
51
- })),
52
- getByRole = _render5.getByRole;
53
- expect(getByRole("progressbar")).toBeTruthy();
54
- });
55
- });
@@ -1,32 +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
- type Props = {
9
- /**
10
- * Text to be placed inside the spinner.
11
- */
12
- label?: string;
13
- /**
14
- * The value of the progress indicator. If it's received the
15
- * component is determinate, otherwise is indeterminate.
16
- */
17
- value?: number;
18
- /**
19
- * If true, the value is displayed inside the spinner..
20
- */
21
- showValue?: boolean;
22
- /**
23
- * Available modes of the spinner.
24
- */
25
- mode?: "large" | "small" | "overlay";
26
- /**
27
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
28
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
29
- */
30
- margin?: Space | Margin;
31
- };
32
- export default Props;
package/spinner/types.js DELETED
@@ -1,5 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
@@ -1,4 +0,0 @@
1
- import React from "react";
2
- import SwitchPropsType from "./types";
3
- declare const DxcSwitch: React.ForwardRefExoticComponent<SwitchPropsType & React.RefAttributes<HTMLDivElement>>;
4
- export default DxcSwitch;