@dxc-technology/halstack-react 0.0.0-5aa300b → 0.0.0-5aaca4c

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 (328) hide show
  1. package/README.md +46 -0
  2. package/dist/index.d.mts +3931 -0
  3. package/dist/index.d.ts +3931 -0
  4. package/dist/index.js +14176 -0
  5. package/dist/index.mjs +14088 -0
  6. package/package.json +85 -67
  7. package/BackgroundColorContext.d.ts +0 -10
  8. package/BackgroundColorContext.js +0 -47
  9. package/HalstackContext.d.ts +0 -12
  10. package/HalstackContext.js +0 -294
  11. package/accordion/Accordion.d.ts +0 -4
  12. package/accordion/Accordion.js +0 -239
  13. package/accordion/Accordion.stories.tsx +0 -346
  14. package/accordion/Accordion.test.js +0 -71
  15. package/accordion/types.d.ts +0 -69
  16. package/accordion/types.js +0 -5
  17. package/accordion-group/AccordionGroup.d.ts +0 -7
  18. package/accordion-group/AccordionGroup.js +0 -149
  19. package/accordion-group/AccordionGroup.stories.tsx +0 -251
  20. package/accordion-group/AccordionGroup.test.js +0 -126
  21. package/accordion-group/types.d.ts +0 -79
  22. package/accordion-group/types.js +0 -5
  23. package/alert/Alert.d.ts +0 -4
  24. package/alert/Alert.js +0 -293
  25. package/alert/Alert.stories.tsx +0 -170
  26. package/alert/Alert.test.js +0 -92
  27. package/alert/types.d.ts +0 -49
  28. package/alert/types.js +0 -5
  29. package/badge/Badge.d.ts +0 -4
  30. package/badge/Badge.js +0 -61
  31. package/badge/types.d.ts +0 -5
  32. package/badge/types.js +0 -5
  33. package/bleed/Bleed.d.ts +0 -3
  34. package/bleed/Bleed.js +0 -51
  35. package/bleed/Bleed.stories.tsx +0 -341
  36. package/bleed/types.d.ts +0 -37
  37. package/bleed/types.js +0 -5
  38. package/box/Box.d.ts +0 -4
  39. package/box/Box.js +0 -116
  40. package/box/Box.stories.tsx +0 -132
  41. package/box/Box.test.js +0 -18
  42. package/box/types.d.ts +0 -44
  43. package/box/types.js +0 -5
  44. package/bulleted-list/BulletedList.d.ts +0 -7
  45. package/bulleted-list/BulletedList.js +0 -123
  46. package/bulleted-list/BulletedList.stories.tsx +0 -200
  47. package/bulleted-list/types.d.ts +0 -11
  48. package/bulleted-list/types.js +0 -5
  49. package/button/Button.d.ts +0 -4
  50. package/button/Button.js +0 -154
  51. package/button/Button.stories.tsx +0 -334
  52. package/button/Button.test.js +0 -35
  53. package/button/types.d.ts +0 -53
  54. package/button/types.js +0 -5
  55. package/card/Card.d.ts +0 -4
  56. package/card/Card.js +0 -161
  57. package/card/Card.stories.tsx +0 -201
  58. package/card/Card.test.js +0 -50
  59. package/card/ice-cream.jpg +0 -0
  60. package/card/types.d.ts +0 -68
  61. package/card/types.js +0 -5
  62. package/checkbox/Checkbox.d.ts +0 -4
  63. package/checkbox/Checkbox.js +0 -250
  64. package/checkbox/Checkbox.stories.tsx +0 -208
  65. package/checkbox/Checkbox.test.js +0 -155
  66. package/checkbox/types.d.ts +0 -68
  67. package/checkbox/types.js +0 -5
  68. package/chip/Chip.d.ts +0 -4
  69. package/chip/Chip.js +0 -149
  70. package/chip/Chip.stories.tsx +0 -151
  71. package/chip/Chip.test.js +0 -56
  72. package/chip/types.d.ts +0 -45
  73. package/chip/types.js +0 -5
  74. package/common/OpenSans.css +0 -81
  75. package/common/fonts/OpenSans-Bold.ttf +0 -0
  76. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  77. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  78. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  79. package/common/fonts/OpenSans-Italic.ttf +0 -0
  80. package/common/fonts/OpenSans-Light.ttf +0 -0
  81. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  82. package/common/fonts/OpenSans-Regular.ttf +0 -0
  83. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  84. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  85. package/common/utils.js +0 -22
  86. package/common/variables.js +0 -1512
  87. package/date-input/Calendar.d.ts +0 -4
  88. package/date-input/Calendar.js +0 -258
  89. package/date-input/DateInput.d.ts +0 -4
  90. package/date-input/DateInput.js +0 -227
  91. package/date-input/DateInput.stories.tsx +0 -151
  92. package/date-input/DateInput.test.js +0 -752
  93. package/date-input/DatePicker.d.ts +0 -4
  94. package/date-input/DatePicker.js +0 -160
  95. package/date-input/YearPicker.d.ts +0 -4
  96. package/date-input/YearPicker.js +0 -115
  97. package/date-input/types.d.ts +0 -160
  98. package/date-input/types.js +0 -5
  99. package/dialog/Dialog.d.ts +0 -4
  100. package/dialog/Dialog.js +0 -162
  101. package/dialog/Dialog.stories.tsx +0 -267
  102. package/dialog/Dialog.test.js +0 -70
  103. package/dialog/types.d.ts +0 -44
  104. package/dialog/types.js +0 -5
  105. package/dropdown/Dropdown.d.ts +0 -4
  106. package/dropdown/Dropdown.js +0 -389
  107. package/dropdown/Dropdown.stories.tsx +0 -320
  108. package/dropdown/Dropdown.test.js +0 -585
  109. package/dropdown/DropdownMenu.d.ts +0 -4
  110. package/dropdown/DropdownMenu.js +0 -80
  111. package/dropdown/DropdownMenuItem.d.ts +0 -4
  112. package/dropdown/DropdownMenuItem.js +0 -92
  113. package/dropdown/types.d.ts +0 -100
  114. package/dropdown/types.js +0 -5
  115. package/file-input/FileInput.d.ts +0 -4
  116. package/file-input/FileInput.js +0 -551
  117. package/file-input/FileInput.stories.tsx +0 -535
  118. package/file-input/FileInput.test.js +0 -498
  119. package/file-input/FileItem.d.ts +0 -4
  120. package/file-input/FileItem.js +0 -161
  121. package/file-input/types.d.ts +0 -129
  122. package/file-input/types.js +0 -5
  123. package/flex/Flex.d.ts +0 -4
  124. package/flex/Flex.js +0 -69
  125. package/flex/Flex.stories.tsx +0 -103
  126. package/flex/types.d.ts +0 -32
  127. package/flex/types.js +0 -5
  128. package/footer/Footer.d.ts +0 -4
  129. package/footer/Footer.js +0 -185
  130. package/footer/Footer.stories.tsx +0 -137
  131. package/footer/Footer.test.js +0 -109
  132. package/footer/Icons.d.ts +0 -2
  133. package/footer/Icons.js +0 -77
  134. package/footer/types.d.ts +0 -66
  135. package/footer/types.js +0 -5
  136. package/header/Header.d.ts +0 -7
  137. package/header/Header.js +0 -305
  138. package/header/Header.stories.tsx +0 -172
  139. package/header/Header.test.js +0 -79
  140. package/header/Icons.d.ts +0 -2
  141. package/header/Icons.js +0 -34
  142. package/header/types.d.ts +0 -48
  143. package/header/types.js +0 -5
  144. package/heading/Heading.d.ts +0 -4
  145. package/heading/Heading.js +0 -159
  146. package/heading/Heading.stories.tsx +0 -54
  147. package/heading/Heading.test.js +0 -186
  148. package/heading/types.d.ts +0 -33
  149. package/heading/types.js +0 -5
  150. package/inset/Inset.d.ts +0 -3
  151. package/inset/Inset.js +0 -51
  152. package/inset/Inset.stories.tsx +0 -229
  153. package/inset/types.d.ts +0 -37
  154. package/inset/types.js +0 -5
  155. package/layout/ApplicationLayout.d.ts +0 -20
  156. package/layout/ApplicationLayout.js +0 -171
  157. package/layout/ApplicationLayout.stories.tsx +0 -162
  158. package/layout/Icons.d.ts +0 -5
  159. package/layout/Icons.js +0 -66
  160. package/layout/SidenavContext.d.ts +0 -5
  161. package/layout/SidenavContext.js +0 -19
  162. package/layout/types.d.ts +0 -42
  163. package/layout/types.js +0 -5
  164. package/link/Link.d.ts +0 -4
  165. package/link/Link.js +0 -136
  166. package/link/Link.stories.tsx +0 -193
  167. package/link/Link.test.js +0 -83
  168. package/link/types.d.ts +0 -54
  169. package/link/types.js +0 -5
  170. package/main.d.ts +0 -44
  171. package/main.js +0 -369
  172. package/number-input/NumberInput.d.ts +0 -4
  173. package/number-input/NumberInput.js +0 -76
  174. package/number-input/NumberInput.stories.tsx +0 -115
  175. package/number-input/NumberInput.test.js +0 -542
  176. package/number-input/NumberInputContext.d.ts +0 -4
  177. package/number-input/NumberInputContext.js +0 -19
  178. package/number-input/numberInputContextTypes.d.ts +0 -19
  179. package/number-input/numberInputContextTypes.js +0 -5
  180. package/number-input/types.d.ts +0 -124
  181. package/number-input/types.js +0 -5
  182. package/paginator/Icons.d.ts +0 -5
  183. package/paginator/Icons.js +0 -54
  184. package/paginator/Paginator.d.ts +0 -4
  185. package/paginator/Paginator.js +0 -165
  186. package/paginator/Paginator.stories.tsx +0 -63
  187. package/paginator/Paginator.test.js +0 -308
  188. package/paginator/types.d.ts +0 -38
  189. package/paginator/types.js +0 -5
  190. package/paragraph/Paragraph.d.ts +0 -6
  191. package/paragraph/Paragraph.js +0 -38
  192. package/paragraph/Paragraph.stories.tsx +0 -44
  193. package/password-input/PasswordInput.d.ts +0 -4
  194. package/password-input/PasswordInput.js +0 -166
  195. package/password-input/PasswordInput.stories.tsx +0 -131
  196. package/password-input/PasswordInput.test.js +0 -181
  197. package/password-input/types.d.ts +0 -110
  198. package/password-input/types.js +0 -5
  199. package/progress-bar/ProgressBar.d.ts +0 -4
  200. package/progress-bar/ProgressBar.js +0 -176
  201. package/progress-bar/ProgressBar.stories.jsx +0 -60
  202. package/progress-bar/ProgressBar.test.js +0 -110
  203. package/progress-bar/types.d.ts +0 -36
  204. package/progress-bar/types.js +0 -5
  205. package/quick-nav/QuickNav.d.ts +0 -4
  206. package/quick-nav/QuickNav.js +0 -117
  207. package/quick-nav/QuickNav.stories.tsx +0 -342
  208. package/quick-nav/types.d.ts +0 -21
  209. package/quick-nav/types.js +0 -5
  210. package/radio-group/Radio.d.ts +0 -4
  211. package/radio-group/Radio.js +0 -156
  212. package/radio-group/RadioGroup.d.ts +0 -4
  213. package/radio-group/RadioGroup.js +0 -283
  214. package/radio-group/RadioGroup.stories.tsx +0 -101
  215. package/radio-group/RadioGroup.test.js +0 -722
  216. package/radio-group/types.d.ts +0 -114
  217. package/radio-group/types.js +0 -5
  218. package/resultsetTable/Icons.d.ts +0 -7
  219. package/resultsetTable/Icons.js +0 -51
  220. package/resultsetTable/ResultsetTable.d.ts +0 -4
  221. package/resultsetTable/ResultsetTable.js +0 -195
  222. package/resultsetTable/ResultsetTable.stories.tsx +0 -300
  223. package/resultsetTable/ResultsetTable.test.js +0 -330
  224. package/resultsetTable/types.d.ts +0 -67
  225. package/resultsetTable/types.js +0 -5
  226. package/select/Icons.d.ts +0 -10
  227. package/select/Icons.js +0 -93
  228. package/select/Listbox.d.ts +0 -4
  229. package/select/Listbox.js +0 -198
  230. package/select/Option.d.ts +0 -4
  231. package/select/Option.js +0 -108
  232. package/select/Select.d.ts +0 -4
  233. package/select/Select.js +0 -645
  234. package/select/Select.stories.tsx +0 -683
  235. package/select/Select.test.js +0 -2233
  236. package/select/types.d.ts +0 -210
  237. package/select/types.js +0 -5
  238. package/sidenav/Sidenav.d.ts +0 -10
  239. package/sidenav/Sidenav.js +0 -266
  240. package/sidenav/Sidenav.stories.tsx +0 -189
  241. package/sidenav/Sidenav.test.js +0 -44
  242. package/sidenav/types.d.ts +0 -73
  243. package/sidenav/types.js +0 -5
  244. package/slider/Slider.d.ts +0 -4
  245. package/slider/Slider.js +0 -343
  246. package/slider/Slider.stories.tsx +0 -183
  247. package/slider/Slider.test.js +0 -250
  248. package/slider/types.d.ts +0 -86
  249. package/slider/types.js +0 -5
  250. package/spinner/Spinner.d.ts +0 -4
  251. package/spinner/Spinner.js +0 -250
  252. package/spinner/Spinner.stories.jsx +0 -103
  253. package/spinner/Spinner.test.js +0 -64
  254. package/spinner/types.d.ts +0 -32
  255. package/spinner/types.js +0 -5
  256. package/switch/Switch.d.ts +0 -4
  257. package/switch/Switch.js +0 -262
  258. package/switch/Switch.stories.tsx +0 -138
  259. package/switch/Switch.test.js +0 -225
  260. package/switch/types.d.ts +0 -66
  261. package/switch/types.js +0 -5
  262. package/table/Table.d.ts +0 -4
  263. package/table/Table.js +0 -118
  264. package/table/Table.stories.jsx +0 -277
  265. package/table/Table.test.js +0 -26
  266. package/table/types.d.ts +0 -21
  267. package/table/types.js +0 -5
  268. package/tabs/Tab.d.ts +0 -4
  269. package/tabs/Tab.js +0 -133
  270. package/tabs/Tabs.d.ts +0 -4
  271. package/tabs/Tabs.js +0 -467
  272. package/tabs/Tabs.stories.tsx +0 -188
  273. package/tabs/Tabs.test.js +0 -351
  274. package/tabs/types.d.ts +0 -92
  275. package/tabs/types.js +0 -5
  276. package/tabs-nav/NavTabs.d.ts +0 -8
  277. package/tabs-nav/NavTabs.js +0 -125
  278. package/tabs-nav/NavTabs.stories.tsx +0 -172
  279. package/tabs-nav/NavTabs.test.js +0 -82
  280. package/tabs-nav/Tab.d.ts +0 -4
  281. package/tabs-nav/Tab.js +0 -128
  282. package/tabs-nav/types.d.ts +0 -53
  283. package/tabs-nav/types.js +0 -5
  284. package/tag/Tag.d.ts +0 -4
  285. package/tag/Tag.js +0 -183
  286. package/tag/Tag.stories.tsx +0 -142
  287. package/tag/Tag.test.js +0 -60
  288. package/tag/types.d.ts +0 -69
  289. package/tag/types.js +0 -5
  290. package/text-input/Icons.d.ts +0 -8
  291. package/text-input/Icons.js +0 -60
  292. package/text-input/Suggestion.d.ts +0 -4
  293. package/text-input/Suggestion.js +0 -84
  294. package/text-input/Suggestions.d.ts +0 -4
  295. package/text-input/Suggestions.js +0 -134
  296. package/text-input/TextInput.d.ts +0 -4
  297. package/text-input/TextInput.js +0 -673
  298. package/text-input/TextInput.stories.tsx +0 -500
  299. package/text-input/TextInput.test.js +0 -1724
  300. package/text-input/types.d.ts +0 -197
  301. package/text-input/types.js +0 -5
  302. package/textarea/Textarea.d.ts +0 -4
  303. package/textarea/Textarea.js +0 -277
  304. package/textarea/Textarea.stories.jsx +0 -157
  305. package/textarea/Textarea.test.js +0 -437
  306. package/textarea/types.d.ts +0 -137
  307. package/textarea/types.js +0 -5
  308. package/toggle-group/ToggleGroup.d.ts +0 -4
  309. package/toggle-group/ToggleGroup.js +0 -215
  310. package/toggle-group/ToggleGroup.stories.tsx +0 -173
  311. package/toggle-group/ToggleGroup.test.js +0 -156
  312. package/toggle-group/types.d.ts +0 -105
  313. package/toggle-group/types.js +0 -5
  314. package/typography/Typography.d.ts +0 -4
  315. package/typography/Typography.js +0 -131
  316. package/typography/Typography.stories.tsx +0 -198
  317. package/typography/types.d.ts +0 -18
  318. package/typography/types.js +0 -5
  319. package/useTheme.d.ts +0 -2
  320. package/useTheme.js +0 -22
  321. package/useTranslatedLabels.d.ts +0 -2
  322. package/useTranslatedLabels.js +0 -20
  323. package/wizard/Wizard.d.ts +0 -4
  324. package/wizard/Wizard.js +0 -285
  325. package/wizard/Wizard.stories.tsx +0 -233
  326. package/wizard/Wizard.test.js +0 -141
  327. package/wizard/types.d.ts +0 -65
  328. package/wizard/types.js +0 -5
@@ -1,250 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _typeof3 = require("@babel/runtime/helpers/typeof");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports["default"] = void 0;
11
-
12
- var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
13
-
14
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
15
-
16
- var _react = _interopRequireWildcard(require("react"));
17
-
18
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
19
-
20
- var _variables = require("../common/variables.js");
21
-
22
- var _useTheme = _interopRequireDefault(require("../useTheme"));
23
-
24
- var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
25
-
26
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
27
-
28
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
29
-
30
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
31
-
32
- var DxcSpinner = function DxcSpinner(_ref) {
33
- var _ref$label = _ref.label,
34
- label = _ref$label === void 0 ? "" : _ref$label,
35
- value = _ref.value,
36
- _ref$showValue = _ref.showValue,
37
- showValue = _ref$showValue === void 0 ? false : _ref$showValue,
38
- _ref$mode = _ref.mode,
39
- mode = _ref$mode === void 0 ? "large" : _ref$mode,
40
- margin = _ref.margin;
41
- var colorsTheme = (0, _useTheme["default"])();
42
- var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
43
- return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
44
- theme: colorsTheme.spinner
45
- }, /*#__PURE__*/_react["default"].createElement(DXCSpinner, {
46
- margin: margin,
47
- mode: mode
48
- }, /*#__PURE__*/_react["default"].createElement(SpinnerContainer, {
49
- backgroundType: backgroundType,
50
- mode: mode
51
- }, mode === "overlay" && /*#__PURE__*/_react["default"].createElement(BackOverlay, null), /*#__PURE__*/_react["default"].createElement(BackgroundSpinner, {
52
- mode: mode
53
- }, mode !== "small" && /*#__PURE__*/_react["default"].createElement(SVGBackground, {
54
- viewBox: "0 0 140 140"
55
- }, /*#__PURE__*/_react["default"].createElement(CircleBackground, {
56
- cx: "70",
57
- cy: "70",
58
- r: "65",
59
- mode: mode
60
- })), mode === "small" && /*#__PURE__*/_react["default"].createElement(SVGBackground, {
61
- viewBox: "0 0 16 16"
62
- }, /*#__PURE__*/_react["default"].createElement(CircleBackground, {
63
- cx: "8",
64
- cy: "8",
65
- r: "6",
66
- mode: mode
67
- }))), value >= 0 && value <= 100 ? /*#__PURE__*/_react["default"].createElement(Spinner, {
68
- role: "progressbar",
69
- mode: mode
70
- }, mode !== "small" && /*#__PURE__*/_react["default"].createElement(SVGSpinner, {
71
- viewBox: "0 0 140 140",
72
- isDeterminated: true
73
- }, /*#__PURE__*/_react["default"].createElement(CircleSpinner, {
74
- cx: "70",
75
- cy: "70",
76
- r: "65",
77
- backgroundType: backgroundType,
78
- mode: mode,
79
- isDeterminated: true,
80
- value: value
81
- })), mode === "small" && /*#__PURE__*/_react["default"].createElement(SVGSpinner, {
82
- viewBox: "0 0 16 16",
83
- isDeterminated: true
84
- }, /*#__PURE__*/_react["default"].createElement(CircleSpinner, {
85
- cx: "8",
86
- cy: "8",
87
- r: "6",
88
- backgroundType: backgroundType,
89
- mode: mode,
90
- isDeterminated: true,
91
- value: value
92
- }))) : /*#__PURE__*/_react["default"].createElement(Spinner, {
93
- role: "progressbar",
94
- mode: mode
95
- }, mode !== "small" && /*#__PURE__*/_react["default"].createElement(SVGSpinner, {
96
- viewBox: "0 0 140 140",
97
- isDeterminated: false
98
- }, /*#__PURE__*/_react["default"].createElement(CircleSpinner, {
99
- cx: "70",
100
- cy: "70",
101
- r: "65",
102
- backgroundType: backgroundType,
103
- mode: mode,
104
- isDeterminated: false
105
- })), mode === "small" && /*#__PURE__*/_react["default"].createElement(SVGSpinner, {
106
- viewBox: "0 0 16 16",
107
- isDeterminated: false
108
- }, /*#__PURE__*/_react["default"].createElement(CircleSpinner, {
109
- cx: "8",
110
- cy: "8",
111
- r: "6",
112
- backgroundType: backgroundType,
113
- mode: mode,
114
- isDeterminated: false
115
- }))), mode !== "small" && /*#__PURE__*/_react["default"].createElement(LabelsContainer, {
116
- label: label,
117
- value: value,
118
- showValue: showValue
119
- }, /*#__PURE__*/_react["default"].createElement(SpinnerLabel, {
120
- backgroundType: backgroundType,
121
- mode: mode
122
- }, label), (value || value === 0) && showValue && /*#__PURE__*/_react["default"].createElement(SpinnerProgress, {
123
- backgroundType: backgroundType,
124
- mode: mode,
125
- showValue: showValue
126
- }, value, "%")))));
127
- };
128
-
129
- var determinatedValue = function determinatedValue(props, strokeDashArray) {
130
- var val = 0;
131
-
132
- if (props.value >= 0 && props.value <= 100) {
133
- val = strokeDashArray * (1 - props.value / 100);
134
- }
135
-
136
- return val;
137
- };
138
-
139
- 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) {
140
- return props.mode === "overlay" ? "100vh" : "";
141
- }, function (props) {
142
- return props.mode === "overlay" ? "100vw" : "";
143
- }, function (props) {
144
- return props.mode === "overlay" ? "flex" : "";
145
- }, function (props) {
146
- return props.mode === "overlay" ? "fixed" : "";
147
- }, function (props) {
148
- return props.mode === "overlay" ? 0 : "";
149
- }, function (props) {
150
- return props.mode === "overlay" ? 0 : "";
151
- }, function (props) {
152
- return props.mode === "overlay" ? "center" : "";
153
- }, function (props) {
154
- return props.mode === "overlay" ? "center" : "";
155
- }, function (props) {
156
- return props.mode === "overlay" ? 1300 : "";
157
- }, function (props) {
158
- return props.mode != "overlay" ? props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px" : "";
159
- }, function (props) {
160
- return props.mode != "overlay" ? props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "" : "";
161
- }, function (props) {
162
- return props.mode != "overlay" ? props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "" : "";
163
- }, function (props) {
164
- return props.mode != "overlay" ? props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "" : "";
165
- }, function (props) {
166
- return props.mode != "overlay" ? props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "" : "";
167
- });
168
-
169
- 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) {
170
- return props.mode === "small" ? "16px" : "140px";
171
- }, function (props) {
172
- return props.mode === "small" ? "16px" : "140px";
173
- });
174
-
175
- 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) {
176
- return "".concat(props.theme.overlayBackgroundColor);
177
- }, function (props) {
178
- return "".concat(props.theme.overlayOpacity);
179
- });
180
-
181
- var BackgroundSpinner = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n height: inherit;\n width: inherit;\n position: absolute;\n"])));
182
-
183
- var SVGBackground = _styledComponents["default"].svg(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n height: inherit;\n width: inherit;\n"])));
184
-
185
- 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) {
186
- return "".concat(props.theme.totalCircleColor);
187
- }, function (props) {
188
- return props.mode !== "small" ? "409" : "38";
189
- }, function (props) {
190
- return props.mode !== "small" ? "8.5px" : "2px";
191
- });
192
-
193
- var Spinner = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n height: inherit;\n width: inherit;\n position: relative;\n"])));
194
-
195
- 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) {
196
- return !props.isDeterminated ? "1.4s linear infinite both spinner-svg" : "";
197
- });
198
-
199
- 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) {
200
- 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";
201
- }, function (props) {
202
- return props.backgroundType === "dark" || props.mode === "overlay" ? props.theme.trackCircleColorOverlay : props.theme.trackCircleColor;
203
- }, function (props) {
204
- return !props.isDeterminated ? "50% 50%" : "";
205
- }, function (props) {
206
- return props.mode !== "small" ? "409" : "38";
207
- }, function (props) {
208
- return props.mode !== "small" ? "8.5px" : "2px";
209
- }, function (props) {
210
- return props.isDeterminated ? props.mode !== "small" ? determinatedValue(props, 409) : determinatedValue(props, 38) : "";
211
- });
212
-
213
- 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"])));
214
-
215
- 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) {
216
- return props.mode === "overlay" ? props.theme.overlayLabelFontFamily : props.theme.labelFontFamily;
217
- }, function (props) {
218
- return props.mode === "overlay" ? props.theme.overlayLabelFontWeight : props.theme.labelFontWeight;
219
- }, function (props) {
220
- return props.mode === "overlay" ? props.theme.overlayLabelFontSize : props.theme.labelFontSize;
221
- }, function (props) {
222
- return props.mode === "overlay" ? props.theme.overlayLabelFontStyle : props.theme.labelFontStyle;
223
- }, function (props) {
224
- return props.mode === "overlay" ? props.theme.overlayLabelFontColor : props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
225
- }, function (props) {
226
- return props.mode === "overlay" ? props.theme.overlayLabelTextAlign : props.theme.labelTextAlign;
227
- }, function (props) {
228
- return props.mode === "overlay" ? props.theme.overlayLabelLetterSpacing : props.theme.labelLetterSpacing;
229
- });
230
-
231
- 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) {
232
- return props.value !== "" && props.showValue === true && "block" || "none";
233
- }, function (props) {
234
- return props.mode === "overlay" ? props.theme.overlayProgressValueFontFamily : props.theme.progressValueFontFamily;
235
- }, function (props) {
236
- return props.mode === "overlay" ? props.theme.overlayProgressValueFontWeight : props.theme.progressValueFontWeight;
237
- }, function (props) {
238
- return props.mode === "overlay" ? props.theme.overlayProgressValueFontSize : props.theme.progressValueFontSize;
239
- }, function (props) {
240
- return props.mode === "overlay" ? props.theme.overlayProgressValueFontStyle : props.theme.progressValueFontStyle;
241
- }, function (props) {
242
- return props.mode === "overlay" ? props.theme.overlayProgressValueFontColor : props.backgroundType === "dark" ? props.theme.progressValueFontColorOnDark : props.theme.progressValueFontColor;
243
- }, function (props) {
244
- return props.mode === "overlay" ? props.theme.overlayProgressValueTextAlign : props.theme.progressValueTextAlign;
245
- }, function (props) {
246
- return props.mode === "overlay" ? props.theme.overlayProgressValueLetterSpacing : props.theme.progressValueLetterSpacing;
247
- });
248
-
249
- var _default = DxcSpinner;
250
- exports["default"] = _default;
@@ -1,103 +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
-
6
- export default {
7
- title: "Spinner",
8
- component: DxcSpinner,
9
- };
10
-
11
- export const Chromatic = () => (
12
- <>
13
- <ExampleContainer>
14
- <Title title="With label" theme="light" level={4} />
15
- <DxcSpinner label="Label" value="50"></DxcSpinner>
16
- <Title title="With value label" theme="light" level={4} />
17
- <DxcSpinner value="50" showValue></DxcSpinner>
18
- <Title title="With label and value label" theme="light" level={4} />
19
- <DxcSpinner label="Label" value="50" showValue></DxcSpinner>
20
- <Title title="With 100%" theme="light" level={4} />
21
- <DxcSpinner label="Label" value="100" showValue></DxcSpinner>
22
- </ExampleContainer>
23
- <Title title="Modes" theme="light" level={2} />
24
- <ExampleContainer>
25
- <Title title="Mode large" theme="light" level={4} />
26
- <DxcSpinner mode="large" value="50"></DxcSpinner>
27
- <Title title="Mode small" theme="light" level={4} />
28
- <DxcSpinner mode="small" value="50"></DxcSpinner>
29
- <Title title="Mode small with 100%" theme="light" level={4} />
30
- <DxcSpinner mode="small" value="100" showValue></DxcSpinner>
31
- </ExampleContainer>
32
- <Title title="Margins with large mode" theme="light" level={2} />
33
- <ExampleContainer>
34
- <Title title="Xxsmall margin" theme="light" level={4} />
35
- <DxcSpinner margin="xxsmall" value="75"></DxcSpinner>
36
- <Title title="Xsmall margin" theme="light" level={4} />
37
- <DxcSpinner margin="xsmall" value="75"></DxcSpinner>
38
- <Title title="Small margin" theme="light" level={4} />
39
- <DxcSpinner margin="small" value="75"></DxcSpinner>
40
- <Title title="Medium margin" theme="light" level={4} />
41
- <DxcSpinner margin="medium" value="75"></DxcSpinner>
42
- <Title title="Large margin" theme="light" level={4} />
43
- <DxcSpinner margin="large" value="75"></DxcSpinner>
44
- <Title title="Xlarge margin" theme="light" level={4} />
45
- <DxcSpinner margin="xlarge" value="75"></DxcSpinner>
46
- <Title title="Xxlarge margin" theme="light" level={4} />
47
- <DxcSpinner margin="xxlarge" value="75"></DxcSpinner>
48
- </ExampleContainer>
49
- <Title title="Margins with small mode" theme="light" level={2} />
50
- <ExampleContainer>
51
- <Title title="Xxsmall margin" theme="light" level={4} />
52
- <DxcSpinner margin="xxsmall" mode="small" value="75"></DxcSpinner>
53
- <Title title="Xsmall margin" theme="light" level={4} />
54
- <DxcSpinner margin="xsmall" mode="small" value="75"></DxcSpinner>
55
- <Title title="Small margin" theme="light" level={4} />
56
- <DxcSpinner margin="small" mode="small" value="75"></DxcSpinner>
57
- <Title title="Medium margin" theme="light" level={4} />
58
- <DxcSpinner margin="medium" mode="small" value="75"></DxcSpinner>
59
- <Title title="Large margin" theme="light" level={4} />
60
- <DxcSpinner margin="large" mode="small" value="75"></DxcSpinner>
61
- <Title title="Xlarge margin" theme="light" level={4} />
62
- <DxcSpinner margin="xlarge" mode="small" value="75"></DxcSpinner>
63
- <Title title="Xxlarge margin" theme="light" level={4} />
64
- <DxcSpinner margin="xxlarge" mode="small" value="75"></DxcSpinner>
65
- <hr />
66
- </ExampleContainer>
67
- </>
68
- );
69
-
70
- export const SpinnerOverlay = () => (
71
- <ExampleContainer>
72
- <Title title="Mode overlay" theme="light" level={4} />
73
- <DxcSpinner mode="overlay" value="25"></DxcSpinner>
74
- </ExampleContainer>
75
- );
76
-
77
- export const SpinnerOverlayWith100 = () => (
78
- <ExampleContainer>
79
- <Title title="Mode overlay" theme="light" level={4} />
80
- <DxcSpinner mode="overlay" value="100"></DxcSpinner>
81
- </ExampleContainer>
82
- );
83
-
84
- export const SpinnerOverlayWithLabel = () => (
85
- <ExampleContainer>
86
- <Title title="Mode overlay" theme="light" level={4} />
87
- <DxcSpinner mode="overlay" value="50" label="Label"></DxcSpinner>
88
- </ExampleContainer>
89
- );
90
-
91
- export const SpinnerOverlayWithValue = () => (
92
- <ExampleContainer>
93
- <Title title="Mode overlay" theme="light" level={4} />
94
- <DxcSpinner mode="overlay" value="50" showValue></DxcSpinner>
95
- </ExampleContainer>
96
- );
97
-
98
- export const SpinnerOverlayWithValueAndLabel = () => (
99
- <ExampleContainer>
100
- <Title title="Mode overlay" theme="light" level={4} />
101
- <DxcSpinner mode="overlay" label="Label" value="50" showValue></DxcSpinner>
102
- </ExampleContainer>
103
- );
@@ -1,64 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _react = _interopRequireDefault(require("react"));
6
-
7
- var _react2 = require("@testing-library/react");
8
-
9
- var _Spinner = _interopRequireDefault(require("./Spinner"));
10
-
11
- describe("Spinner component tests", function () {
12
- test("Spinner renders with correct label", function () {
13
- var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Spinner["default"], {
14
- label: "test-loading"
15
- })),
16
- getByText = _render.getByText;
17
-
18
- expect(getByText("test-loading")).toBeTruthy();
19
- });
20
- test("Spinner shows value correctly", function () {
21
- var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Spinner["default"], {
22
- label: "test-loading",
23
- value: 75,
24
- showValue: true
25
- })),
26
- getByText = _render2.getByText;
27
-
28
- expect(getByText("75%")).toBeTruthy();
29
- });
30
- test("Small spinner hides value and label correctly", function () {
31
- var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Spinner["default"], {
32
- mode: "small",
33
- label: "test-loading",
34
- value: 75,
35
- showValue: true
36
- })),
37
- queryByText = _render3.queryByText;
38
-
39
- expect(queryByText("test-loading")).toBeFalsy();
40
- expect(queryByText("75%")).toBeFalsy();
41
- });
42
- test("Overlay spinner shows value and label correctly", function () {
43
- var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Spinner["default"], {
44
- mode: "overlay",
45
- label: "test-loading",
46
- value: 75,
47
- showValue: true
48
- })),
49
- getByText = _render4.getByText;
50
-
51
- expect(getByText("test-loading")).toBeTruthy();
52
- expect(getByText("75%")).toBeTruthy();
53
- });
54
- test("Get spinner by role", function () {
55
- var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Spinner["default"], {
56
- label: "test-loading",
57
- value: 75,
58
- showValue: true
59
- })),
60
- getByRole = _render5.getByRole;
61
-
62
- expect(getByRole("progressbar")).toBeTruthy();
63
- });
64
- });
@@ -1,32 +0,0 @@
1
- declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2
- declare type Margin = {
3
- top?: Space;
4
- bottom?: Space;
5
- left?: Space;
6
- right?: Space;
7
- };
8
- declare 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;