@dxc-technology/halstack-react 0.0.0-f70a97e → 0.0.0-f78eb80

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 (376) hide show
  1. package/README.md +1 -2
  2. package/dist/index.d.mts +6668 -0
  3. package/dist/index.d.ts +6668 -0
  4. package/dist/index.js +14564 -0
  5. package/dist/index.mjs +14507 -0
  6. package/package.json +68 -68
  7. package/BackgroundColorContext.d.ts +0 -1
  8. package/BackgroundColorContext.js +0 -30
  9. package/HalstackContext.d.ts +0 -1249
  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/action-icon/ActionIcon.d.ts +0 -4
  26. package/action-icon/ActionIcon.js +0 -47
  27. package/action-icon/ActionIcon.stories.tsx +0 -41
  28. package/action-icon/ActionIcon.test.js +0 -64
  29. package/action-icon/types.d.ts +0 -26
  30. package/action-icon/types.js +0 -5
  31. package/alert/Alert.d.ts +0 -4
  32. package/alert/Alert.js +0 -254
  33. package/alert/Alert.stories.tsx +0 -198
  34. package/alert/Alert.test.js +0 -75
  35. package/alert/types.d.ts +0 -49
  36. package/alert/types.js +0 -5
  37. package/badge/Badge.d.ts +0 -4
  38. package/badge/Badge.js +0 -159
  39. package/badge/Badge.stories.tsx +0 -210
  40. package/badge/Badge.test.js +0 -30
  41. package/badge/types.d.ts +0 -54
  42. package/badge/types.js +0 -5
  43. package/bleed/Bleed.d.ts +0 -3
  44. package/bleed/Bleed.js +0 -43
  45. package/bleed/Bleed.stories.tsx +0 -342
  46. package/bleed/types.d.ts +0 -37
  47. package/bleed/types.js +0 -5
  48. package/box/Box.d.ts +0 -4
  49. package/box/Box.js +0 -75
  50. package/box/Box.stories.tsx +0 -119
  51. package/box/Box.test.js +0 -13
  52. package/box/types.d.ts +0 -32
  53. package/box/types.js +0 -5
  54. package/bulleted-list/BulletedList.d.ts +0 -7
  55. package/bulleted-list/BulletedList.js +0 -89
  56. package/bulleted-list/BulletedList.stories.tsx +0 -115
  57. package/bulleted-list/types.d.ts +0 -38
  58. package/bulleted-list/types.js +0 -5
  59. package/button/Button.d.ts +0 -4
  60. package/button/Button.js +0 -121
  61. package/button/Button.stories.tsx +0 -326
  62. package/button/Button.test.js +0 -38
  63. package/button/types.d.ts +0 -57
  64. package/button/types.js +0 -5
  65. package/card/Card.d.ts +0 -4
  66. package/card/Card.js +0 -120
  67. package/card/Card.stories.tsx +0 -171
  68. package/card/Card.test.js +0 -39
  69. package/card/types.d.ts +0 -62
  70. package/card/types.js +0 -5
  71. package/checkbox/Checkbox.d.ts +0 -4
  72. package/checkbox/Checkbox.js +0 -215
  73. package/checkbox/Checkbox.stories.tsx +0 -222
  74. package/checkbox/Checkbox.test.js +0 -199
  75. package/checkbox/types.d.ts +0 -72
  76. package/checkbox/types.js +0 -5
  77. package/chip/Chip.d.ts +0 -4
  78. package/chip/Chip.js +0 -121
  79. package/chip/Chip.stories.tsx +0 -214
  80. package/chip/Chip.test.js +0 -41
  81. package/chip/types.d.ts +0 -45
  82. package/chip/types.js +0 -5
  83. package/common/coreTokens.d.ts +0 -237
  84. package/common/coreTokens.js +0 -184
  85. package/common/utils.d.ts +0 -1
  86. package/common/utils.js +0 -16
  87. package/common/variables.d.ts +0 -1395
  88. package/common/variables.js +0 -1267
  89. package/container/Container.d.ts +0 -4
  90. package/container/Container.js +0 -194
  91. package/container/Container.stories.tsx +0 -214
  92. package/container/types.d.ts +0 -74
  93. package/container/types.js +0 -5
  94. package/contextual-menu/ContextualMenu.d.ts +0 -7
  95. package/contextual-menu/ContextualMenu.js +0 -71
  96. package/contextual-menu/ContextualMenu.stories.tsx +0 -182
  97. package/contextual-menu/ContextualMenu.test.js +0 -71
  98. package/contextual-menu/MenuItemAction.d.ts +0 -4
  99. package/contextual-menu/MenuItemAction.js +0 -46
  100. package/contextual-menu/types.d.ts +0 -22
  101. package/contextual-menu/types.js +0 -5
  102. package/date-input/Calendar.d.ts +0 -4
  103. package/date-input/Calendar.js +0 -214
  104. package/date-input/DateInput.d.ts +0 -4
  105. package/date-input/DateInput.js +0 -223
  106. package/date-input/DateInput.stories.tsx +0 -285
  107. package/date-input/DateInput.test.js +0 -808
  108. package/date-input/DatePicker.d.ts +0 -4
  109. package/date-input/DatePicker.js +0 -115
  110. package/date-input/Icons.d.ts +0 -6
  111. package/date-input/Icons.js +0 -58
  112. package/date-input/YearPicker.d.ts +0 -4
  113. package/date-input/YearPicker.js +0 -100
  114. package/date-input/types.d.ts +0 -164
  115. package/date-input/types.js +0 -5
  116. package/dialog/Dialog.d.ts +0 -4
  117. package/dialog/Dialog.js +0 -104
  118. package/dialog/Dialog.stories.tsx +0 -365
  119. package/dialog/Dialog.test.js +0 -307
  120. package/dialog/types.d.ts +0 -36
  121. package/dialog/types.js +0 -5
  122. package/divider/Divider.d.ts +0 -4
  123. package/divider/Divider.js +0 -36
  124. package/divider/Divider.stories.tsx +0 -223
  125. package/divider/Divider.test.js +0 -38
  126. package/divider/types.d.ts +0 -19
  127. package/divider/types.js +0 -5
  128. package/dropdown/Dropdown.d.ts +0 -4
  129. package/dropdown/Dropdown.js +0 -336
  130. package/dropdown/Dropdown.stories.tsx +0 -438
  131. package/dropdown/Dropdown.test.js +0 -599
  132. package/dropdown/DropdownMenu.d.ts +0 -4
  133. package/dropdown/DropdownMenu.js +0 -63
  134. package/dropdown/DropdownMenuItem.d.ts +0 -4
  135. package/dropdown/DropdownMenuItem.js +0 -67
  136. package/dropdown/types.d.ts +0 -98
  137. package/dropdown/types.js +0 -5
  138. package/file-input/FileInput.d.ts +0 -4
  139. package/file-input/FileInput.js +0 -479
  140. package/file-input/FileInput.stories.tsx +0 -618
  141. package/file-input/FileInput.test.js +0 -459
  142. package/file-input/FileItem.d.ts +0 -4
  143. package/file-input/FileItem.js +0 -135
  144. package/file-input/types.d.ts +0 -129
  145. package/file-input/types.js +0 -5
  146. package/flex/Flex.d.ts +0 -4
  147. package/flex/Flex.js +0 -57
  148. package/flex/Flex.stories.tsx +0 -112
  149. package/flex/types.d.ts +0 -97
  150. package/flex/types.js +0 -5
  151. package/footer/Footer.d.ts +0 -4
  152. package/footer/Footer.js +0 -138
  153. package/footer/Footer.stories.tsx +0 -171
  154. package/footer/Footer.test.js +0 -85
  155. package/footer/Icons.d.ts +0 -3
  156. package/footer/Icons.js +0 -136
  157. package/footer/types.d.ts +0 -64
  158. package/footer/types.js +0 -5
  159. package/grid/Grid.d.ts +0 -7
  160. package/grid/Grid.js +0 -76
  161. package/grid/Grid.stories.tsx +0 -219
  162. package/grid/types.d.ts +0 -115
  163. package/grid/types.js +0 -5
  164. package/header/Header.d.ts +0 -8
  165. package/header/Header.js +0 -220
  166. package/header/Header.stories.tsx +0 -251
  167. package/header/Header.test.js +0 -66
  168. package/header/Icons.d.ts +0 -2
  169. package/header/Icons.js +0 -29
  170. package/header/types.d.ts +0 -33
  171. package/header/types.js +0 -5
  172. package/heading/Heading.d.ts +0 -4
  173. package/heading/Heading.js +0 -137
  174. package/heading/Heading.stories.tsx +0 -54
  175. package/heading/Heading.test.js +0 -169
  176. package/heading/types.d.ts +0 -33
  177. package/heading/types.js +0 -5
  178. package/icon/Icon.d.ts +0 -4
  179. package/icon/Icon.js +0 -33
  180. package/icon/Icon.stories.tsx +0 -26
  181. package/icon/types.d.ts +0 -4
  182. package/icon/types.js +0 -5
  183. package/image/Image.d.ts +0 -4
  184. package/image/Image.js +0 -70
  185. package/image/Image.stories.tsx +0 -129
  186. package/image/types.d.ts +0 -72
  187. package/image/types.js +0 -5
  188. package/inset/Inset.d.ts +0 -3
  189. package/inset/Inset.js +0 -43
  190. package/inset/Inset.stories.tsx +0 -230
  191. package/inset/types.d.ts +0 -37
  192. package/inset/types.js +0 -5
  193. package/layout/ApplicationLayout.d.ts +0 -20
  194. package/layout/ApplicationLayout.js +0 -134
  195. package/layout/ApplicationLayout.stories.tsx +0 -162
  196. package/layout/Icons.d.ts +0 -8
  197. package/layout/Icons.js +0 -58
  198. package/layout/SidenavContext.d.ts +0 -5
  199. package/layout/SidenavContext.js +0 -13
  200. package/layout/types.d.ts +0 -41
  201. package/layout/types.js +0 -5
  202. package/link/Link.d.ts +0 -4
  203. package/link/Link.js +0 -115
  204. package/link/Link.stories.tsx +0 -253
  205. package/link/Link.test.js +0 -63
  206. package/link/types.d.ts +0 -54
  207. package/link/types.js +0 -5
  208. package/main.d.ts +0 -49
  209. package/main.js +0 -357
  210. package/nav-tabs/NavTabs.d.ts +0 -8
  211. package/nav-tabs/NavTabs.js +0 -93
  212. package/nav-tabs/NavTabs.stories.tsx +0 -276
  213. package/nav-tabs/NavTabs.test.js +0 -76
  214. package/nav-tabs/Tab.d.ts +0 -4
  215. package/nav-tabs/Tab.js +0 -118
  216. package/nav-tabs/types.d.ts +0 -52
  217. package/nav-tabs/types.js +0 -5
  218. package/number-input/NumberInput.d.ts +0 -11
  219. package/number-input/NumberInput.js +0 -86
  220. package/number-input/NumberInput.stories.tsx +0 -131
  221. package/number-input/NumberInput.test.js +0 -989
  222. package/number-input/types.d.ts +0 -130
  223. package/number-input/types.js +0 -5
  224. package/paginator/Icons.d.ts +0 -5
  225. package/paginator/Icons.js +0 -40
  226. package/paginator/Paginator.d.ts +0 -4
  227. package/paginator/Paginator.js +0 -135
  228. package/paginator/Paginator.stories.tsx +0 -87
  229. package/paginator/Paginator.test.js +0 -335
  230. package/paginator/types.d.ts +0 -38
  231. package/paginator/types.js +0 -5
  232. package/paragraph/Paragraph.d.ts +0 -5
  233. package/paragraph/Paragraph.js +0 -22
  234. package/paragraph/Paragraph.stories.tsx +0 -27
  235. package/password-input/Icons.d.ts +0 -6
  236. package/password-input/Icons.js +0 -35
  237. package/password-input/PasswordInput.d.ts +0 -4
  238. package/password-input/PasswordInput.js +0 -97
  239. package/password-input/PasswordInput.stories.tsx +0 -99
  240. package/password-input/PasswordInput.test.js +0 -198
  241. package/password-input/types.d.ts +0 -111
  242. package/password-input/types.js +0 -5
  243. package/progress-bar/ProgressBar.d.ts +0 -4
  244. package/progress-bar/ProgressBar.js +0 -144
  245. package/progress-bar/ProgressBar.stories.tsx +0 -93
  246. package/progress-bar/ProgressBar.test.js +0 -93
  247. package/progress-bar/types.d.ts +0 -37
  248. package/progress-bar/types.js +0 -5
  249. package/quick-nav/QuickNav.d.ts +0 -4
  250. package/quick-nav/QuickNav.js +0 -94
  251. package/quick-nav/QuickNav.stories.tsx +0 -356
  252. package/quick-nav/types.d.ts +0 -21
  253. package/quick-nav/types.js +0 -5
  254. package/radio-group/Radio.d.ts +0 -4
  255. package/radio-group/Radio.js +0 -124
  256. package/radio-group/RadioGroup.d.ts +0 -4
  257. package/radio-group/RadioGroup.js +0 -235
  258. package/radio-group/RadioGroup.stories.tsx +0 -214
  259. package/radio-group/RadioGroup.test.js +0 -756
  260. package/radio-group/types.d.ts +0 -114
  261. package/radio-group/types.js +0 -5
  262. package/resultset-table/Icons.d.ts +0 -7
  263. package/resultset-table/Icons.js +0 -47
  264. package/resultset-table/ResultsetTable.d.ts +0 -7
  265. package/resultset-table/ResultsetTable.js +0 -166
  266. package/resultset-table/ResultsetTable.stories.tsx +0 -397
  267. package/resultset-table/ResultsetTable.test.js +0 -371
  268. package/resultset-table/types.d.ts +0 -73
  269. package/resultset-table/types.js +0 -5
  270. package/select/Icons.d.ts +0 -10
  271. package/select/Icons.js +0 -89
  272. package/select/Listbox.d.ts +0 -4
  273. package/select/Listbox.js +0 -143
  274. package/select/Option.d.ts +0 -4
  275. package/select/Option.js +0 -87
  276. package/select/Select.d.ts +0 -4
  277. package/select/Select.js +0 -590
  278. package/select/Select.stories.tsx +0 -971
  279. package/select/Select.test.js +0 -2370
  280. package/select/types.d.ts +0 -209
  281. package/select/types.js +0 -5
  282. package/sidenav/Icons.d.ts +0 -7
  283. package/sidenav/Icons.js +0 -47
  284. package/sidenav/Sidenav.d.ts +0 -10
  285. package/sidenav/Sidenav.js +0 -197
  286. package/sidenav/Sidenav.stories.tsx +0 -282
  287. package/sidenav/Sidenav.test.js +0 -37
  288. package/sidenav/types.d.ts +0 -76
  289. package/sidenav/types.js +0 -5
  290. package/slider/Slider.d.ts +0 -4
  291. package/slider/Slider.js +0 -285
  292. package/slider/Slider.test.js +0 -254
  293. package/slider/types.d.ts +0 -86
  294. package/slider/types.js +0 -5
  295. package/spinner/Spinner.d.ts +0 -4
  296. package/spinner/Spinner.js +0 -206
  297. package/spinner/Spinner.stories.tsx +0 -129
  298. package/spinner/Spinner.test.js +0 -55
  299. package/spinner/types.d.ts +0 -32
  300. package/spinner/types.js +0 -5
  301. package/status-light/StatusLight.d.ts +0 -4
  302. package/status-light/StatusLight.js +0 -51
  303. package/status-light/StatusLight.stories.tsx +0 -74
  304. package/status-light/StatusLight.test.js +0 -25
  305. package/status-light/types.d.ts +0 -17
  306. package/status-light/types.js +0 -5
  307. package/switch/Switch.d.ts +0 -4
  308. package/switch/Switch.js +0 -214
  309. package/switch/Switch.stories.tsx +0 -137
  310. package/switch/Switch.test.js +0 -180
  311. package/switch/types.d.ts +0 -66
  312. package/switch/types.js +0 -5
  313. package/table/DropdownTheme.js +0 -62
  314. package/table/Table.d.ts +0 -8
  315. package/table/Table.js +0 -170
  316. package/table/Table.stories.tsx +0 -658
  317. package/table/Table.test.js +0 -113
  318. package/table/types.d.ts +0 -63
  319. package/table/types.js +0 -5
  320. package/tabs/Tab.d.ts +0 -4
  321. package/tabs/Tab.js +0 -116
  322. package/tabs/Tabs.d.ts +0 -4
  323. package/tabs/Tabs.js +0 -384
  324. package/tabs/Tabs.stories.tsx +0 -226
  325. package/tabs/Tabs.test.js +0 -294
  326. package/tabs/types.d.ts +0 -92
  327. package/tabs/types.js +0 -5
  328. package/tag/Tag.d.ts +0 -4
  329. package/tag/Tag.js +0 -151
  330. package/tag/Tag.stories.tsx +0 -155
  331. package/tag/Tag.test.js +0 -49
  332. package/tag/types.d.ts +0 -69
  333. package/tag/types.js +0 -5
  334. package/text-input/Icons.d.ts +0 -8
  335. package/text-input/Icons.js +0 -56
  336. package/text-input/Suggestion.d.ts +0 -4
  337. package/text-input/Suggestion.js +0 -67
  338. package/text-input/Suggestions.d.ts +0 -4
  339. package/text-input/Suggestions.js +0 -84
  340. package/text-input/TextInput.d.ts +0 -4
  341. package/text-input/TextInput.js +0 -565
  342. package/text-input/TextInput.stories.tsx +0 -465
  343. package/text-input/TextInput.test.js +0 -1756
  344. package/text-input/types.d.ts +0 -205
  345. package/text-input/types.js +0 -5
  346. package/textarea/Textarea.d.ts +0 -4
  347. package/textarea/Textarea.js +0 -234
  348. package/textarea/Textarea.stories.tsx +0 -174
  349. package/textarea/Textarea.test.js +0 -406
  350. package/textarea/types.d.ts +0 -141
  351. package/textarea/types.js +0 -5
  352. package/toggle-group/ToggleGroup.d.ts +0 -4
  353. package/toggle-group/ToggleGroup.js +0 -201
  354. package/toggle-group/ToggleGroup.stories.tsx +0 -218
  355. package/toggle-group/ToggleGroup.test.js +0 -137
  356. package/toggle-group/types.d.ts +0 -114
  357. package/toggle-group/types.js +0 -5
  358. package/typography/Typography.d.ts +0 -4
  359. package/typography/Typography.js +0 -23
  360. package/typography/Typography.stories.tsx +0 -198
  361. package/typography/types.d.ts +0 -18
  362. package/typography/types.js +0 -5
  363. package/useTheme.d.ts +0 -1148
  364. package/useTheme.js +0 -15
  365. package/useTranslatedLabels.d.ts +0 -85
  366. package/useTranslatedLabels.js +0 -14
  367. package/utils/BaseTypography.d.ts +0 -21
  368. package/utils/BaseTypography.js +0 -94
  369. package/utils/FocusLock.d.ts +0 -13
  370. package/utils/FocusLock.js +0 -124
  371. package/wizard/Wizard.d.ts +0 -4
  372. package/wizard/Wizard.js +0 -250
  373. package/wizard/Wizard.stories.tsx +0 -253
  374. package/wizard/Wizard.test.js +0 -114
  375. package/wizard/types.d.ts +0 -64
  376. package/wizard/types.js +0 -5
@@ -1,169 +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 _Heading = _interopRequireDefault(require("./Heading.tsx"));
7
- describe("Heading component tests", function () {
8
- test("Heading renders with default level", function () {
9
- var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
10
- text: "my-heading-test"
11
- })),
12
- getByText = _render.getByText,
13
- getByRole = _render.getByRole;
14
- expect(getByText("my-heading-test")).toBeTruthy();
15
- expect(getByRole("heading", {
16
- level: 1
17
- })).toBeTruthy();
18
- });
19
- test("Heading renders with level 1", function () {
20
- var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
21
- text: "my-heading-test",
22
- level: 1
23
- })),
24
- getByText = _render2.getByText,
25
- getByRole = _render2.getByRole;
26
- expect(getByText("my-heading-test")).toBeTruthy();
27
- expect(getByRole("heading", {
28
- level: 1
29
- })).toBeTruthy();
30
- });
31
- test("Heading renders with level 2", function () {
32
- var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
33
- text: "my-heading-test",
34
- level: 2
35
- })),
36
- getByText = _render3.getByText,
37
- getByRole = _render3.getByRole;
38
- expect(getByText("my-heading-test")).toBeTruthy();
39
- expect(getByRole("heading", {
40
- level: 2
41
- })).toBeTruthy();
42
- });
43
- test("Heading renders with level 3", function () {
44
- var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
45
- text: "my-heading-test",
46
- level: 3
47
- })),
48
- getByText = _render4.getByText,
49
- getByRole = _render4.getByRole;
50
- expect(getByText("my-heading-test")).toBeTruthy();
51
- expect(getByRole("heading", {
52
- level: 3
53
- })).toBeTruthy();
54
- });
55
- test("Heading renders with level 4", function () {
56
- var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
57
- text: "my-heading-test",
58
- level: 4
59
- })),
60
- getByText = _render5.getByText,
61
- getByRole = _render5.getByRole;
62
- expect(getByText("my-heading-test")).toBeTruthy();
63
- expect(getByRole("heading", {
64
- level: 4
65
- })).toBeTruthy();
66
- });
67
- test("Heading renders with level 5", function () {
68
- var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
69
- text: "my-heading-test",
70
- level: 5
71
- })),
72
- getByText = _render6.getByText,
73
- getByRole = _render6.getByRole;
74
- expect(getByText("my-heading-test")).toBeTruthy();
75
- expect(getByRole("heading", {
76
- level: 5
77
- })).toBeTruthy();
78
- });
79
- test("Heading renders with default level and as h5", function () {
80
- var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
81
- text: "my-heading-test",
82
- as: "h5"
83
- })),
84
- getByText = _render7.getByText,
85
- getByRole = _render7.getByRole;
86
- expect(getByText("my-heading-test")).toBeTruthy();
87
- expect(getByRole("heading", {
88
- level: 5
89
- })).toBeTruthy();
90
- });
91
- test("Heading renders with level 1 and as h5", function () {
92
- var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
93
- text: "my-heading-test",
94
- level: 1,
95
- as: "h5"
96
- })),
97
- getByText = _render8.getByText,
98
- getByRole = _render8.getByRole;
99
- expect(getByText("my-heading-test")).toBeTruthy();
100
- expect(getByRole("heading", {
101
- level: 5
102
- })).toBeTruthy();
103
- });
104
- test("Heading renders with level 2 and as h4", function () {
105
- var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
106
- text: "my-heading-test",
107
- level: 2,
108
- as: "h4"
109
- })),
110
- getByText = _render9.getByText,
111
- getByRole = _render9.getByRole;
112
- expect(getByText("my-heading-test")).toBeTruthy();
113
- expect(getByRole("heading", {
114
- level: 4
115
- })).toBeTruthy();
116
- });
117
- test("Heading renders with level 3 and as h2", function () {
118
- var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
119
- text: "my-heading-test",
120
- level: 3,
121
- as: "h2"
122
- })),
123
- getByText = _render10.getByText,
124
- getByRole = _render10.getByRole;
125
- expect(getByText("my-heading-test")).toBeTruthy();
126
- expect(getByRole("heading", {
127
- level: 2
128
- })).toBeTruthy();
129
- });
130
- test("Heading renders with level 4 and as h3", function () {
131
- var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
132
- text: "my-heading-test",
133
- level: 4,
134
- as: "h3"
135
- })),
136
- getByText = _render11.getByText,
137
- getByRole = _render11.getByRole;
138
- expect(getByText("my-heading-test")).toBeTruthy();
139
- expect(getByRole("heading", {
140
- level: 3
141
- })).toBeTruthy();
142
- });
143
- test("Heading renders with level 5 as h4", function () {
144
- var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
145
- text: "my-heading-test",
146
- level: 5,
147
- as: "h4"
148
- })),
149
- getByText = _render12.getByText,
150
- getByRole = _render12.getByRole;
151
- expect(getByText("my-heading-test")).toBeTruthy();
152
- expect(getByRole("heading", {
153
- level: 4
154
- })).toBeTruthy();
155
- });
156
- test("Heading renders with level 5 and invalid as", function () {
157
- var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
158
- text: "my-heading-test",
159
- level: 5,
160
- as: "h4afdssf"
161
- })),
162
- getByText = _render13.getByText,
163
- getByRole = _render13.getByRole;
164
- expect(getByText("my-heading-test")).toBeTruthy();
165
- expect(getByRole("heading", {
166
- level: 5
167
- })).toBeTruthy();
168
- });
169
- });
@@ -1,33 +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
- * Defines the heading level from 1 to 5. The styles of the heading are applied according to the level.
11
- * The html tag of the heading will be the one specified in the 'as' prop.
12
- * If 'as' is not specified, the html tag of the heading is the one specified in the 'level' prop.
13
- */
14
- level?: 1 | 2 | 3 | 4 | 5;
15
- /**
16
- * Heading text.
17
- */
18
- text: string;
19
- /**
20
- * Modifies the default weight of the heading.
21
- */
22
- weight?: "light" | "normal" | "bold";
23
- /**
24
- * Specifies the HTML tag of the heading.
25
- */
26
- as?: "h1" | "h2" | "h3" | "h4" | "h5";
27
- /**
28
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
29
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
30
- */
31
- margin?: Space | Margin;
32
- };
33
- export default Props;
package/heading/types.js DELETED
@@ -1,5 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
package/icon/Icon.d.ts DELETED
@@ -1,4 +0,0 @@
1
- /// <reference types="react" />
2
- import IconPropsType from "./types";
3
- declare const DxcIcon: ({ icon }: IconPropsType) => JSX.Element;
4
- export default DxcIcon;
package/icon/Icon.js DELETED
@@ -1,33 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports["default"] = void 0;
8
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
9
- var _react = _interopRequireDefault(require("react"));
10
- var _styledComponents = _interopRequireDefault(require("styled-components"));
11
- var _templateObject;
12
- var DxcIcon = function DxcIcon(_ref) {
13
- var icon = _ref.icon;
14
- var filled = false;
15
- var iconName = icon;
16
- if (icon.startsWith("filled_")) {
17
- filled = true;
18
- iconName = icon.replace(/filled_/g, "");
19
- }
20
- return /*#__PURE__*/_react["default"].createElement(IconContainer, {
21
- role: "img",
22
- "aria-label": icon,
23
- filled: filled,
24
- icon: iconName,
25
- "aria-hidden": "true"
26
- });
27
- };
28
- var IconContainer = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n font-family: \"Material Symbols Outlined\";\n font-weight: normal;\n font-style: normal;\n font-size: 24px;\n line-height: 1;\n letter-spacing: normal;\n text-transform: none;\n display: inline-block;\n white-space: nowrap;\n word-wrap: normal;\n direction: ltr;\n -webkit-font-feature-settings: \"liga\";\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n -moz-osx-font-smoothing: grayscale;\n font-variation-settings: ", ";\n ::before {\n content: \"", "\";\n }\n"])), function (props) {
29
- return props.filled ? "'FILL' 1" : "'FILL' 0";
30
- }, function (props) {
31
- return props.icon;
32
- });
33
- var _default = exports["default"] = DxcIcon;
@@ -1,26 +0,0 @@
1
- import React from "react";
2
- import DxcIcon from "./Icon";
3
- import Title from "../../.storybook/components/Title";
4
- import ExampleContainer from "../../.storybook/components/ExampleContainer";
5
- import { DxcTypography } from "../main";
6
-
7
- export default {
8
- title: "Icon",
9
- component: DxcIcon,
10
- };
11
-
12
- export const Chromatic = () => (
13
- <>
14
- <Title title="Icon component" theme="light" level={2} />
15
- <ExampleContainer>
16
- <DxcIcon icon="home" />
17
- <DxcIcon icon="filled_home" />
18
- </ExampleContainer>
19
- <ExampleContainer>
20
- <DxcTypography as="p" color="#b182e3">
21
- <DxcIcon icon="home" />
22
- <DxcIcon icon="filled_home" />
23
- </DxcTypography>
24
- </ExampleContainer>
25
- </>
26
- );
package/icon/types.d.ts DELETED
@@ -1,4 +0,0 @@
1
- type Props = {
2
- icon: string;
3
- };
4
- export default Props;
package/icon/types.js DELETED
@@ -1,5 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
package/image/Image.d.ts DELETED
@@ -1,4 +0,0 @@
1
- import React from "react";
2
- import ImagePropsType from "./types";
3
- declare const DxcImage: ({ alt, caption, lazyLoading, src, srcSet, sizes, width, height, objectFit, objectPosition, onLoad, onError, }: ImagePropsType) => React.JSX.Element;
4
- export default DxcImage;
package/image/Image.js DELETED
@@ -1,70 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- var _typeof = require("@babel/runtime/helpers/typeof");
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = void 0;
9
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
10
- var _react = _interopRequireDefault(require("react"));
11
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
12
- var _useTheme = _interopRequireDefault(require("../useTheme"));
13
- var _BaseTypography = _interopRequireDefault(require("../utils/BaseTypography"));
14
- var _templateObject;
15
- 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); }
16
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(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; }
17
- var CaptionWrapper = function CaptionWrapper(_ref) {
18
- var condition = _ref.condition,
19
- wrapper = _ref.wrapper,
20
- children = _ref.children;
21
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, condition ? wrapper(children) : children);
22
- };
23
- var DxcImage = function DxcImage(_ref2) {
24
- var alt = _ref2.alt,
25
- caption = _ref2.caption,
26
- _ref2$lazyLoading = _ref2.lazyLoading,
27
- lazyLoading = _ref2$lazyLoading === void 0 ? false : _ref2$lazyLoading,
28
- src = _ref2.src,
29
- srcSet = _ref2.srcSet,
30
- sizes = _ref2.sizes,
31
- width = _ref2.width,
32
- height = _ref2.height,
33
- objectFit = _ref2.objectFit,
34
- objectPosition = _ref2.objectPosition,
35
- onLoad = _ref2.onLoad,
36
- onError = _ref2.onError;
37
- var colorsTheme = (0, _useTheme["default"])();
38
- return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
39
- theme: colorsTheme.image
40
- }, /*#__PURE__*/_react["default"].createElement(CaptionWrapper, {
41
- condition: caption != undefined,
42
- wrapper: function wrapper(children) {
43
- return /*#__PURE__*/_react["default"].createElement(Figure, null, children, /*#__PURE__*/_react["default"].createElement(_BaseTypography["default"], {
44
- as: "figcaption",
45
- color: colorsTheme.image.captionFontColor,
46
- fontFamily: colorsTheme.image.captionFontFamily,
47
- fontSize: colorsTheme.image.captionFontSize,
48
- fontStyle: colorsTheme.image.captionFontStyle,
49
- fontWeight: colorsTheme.image.captionFontWeight,
50
- lineHeight: colorsTheme.image.captionLineHeight
51
- }, caption));
52
- }
53
- }, /*#__PURE__*/_react["default"].createElement("img", {
54
- alt: alt,
55
- loading: lazyLoading ? "lazy" : undefined,
56
- onLoad: onLoad,
57
- onError: onError,
58
- src: src,
59
- srcSet: srcSet,
60
- sizes: sizes,
61
- style: {
62
- objectFit: objectFit,
63
- objectPosition: objectPosition,
64
- width: width,
65
- height: height
66
- }
67
- })));
68
- };
69
- var Figure = _styledComponents["default"].figure(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n width: fit-content;\n margin: 0;\n padding: 0;\n"])));
70
- var _default = exports["default"] = DxcImage;
@@ -1,129 +0,0 @@
1
- import React from "react";
2
- import DxcImage from "./Image";
3
- import Title from "../../.storybook/components/Title";
4
- import ExampleContainer from "../../.storybook/components/ExampleContainer";
5
- import DxcFlex from "../flex/Flex";
6
- import DxcInset from "../inset/Inset";
7
- import DxcParagraph from "../paragraph/Paragraph";
8
-
9
- export default {
10
- title: "Image",
11
- component: DxcImage,
12
- };
13
-
14
- export const Chromatic = () => (
15
- <>
16
- <Title title="Image component" theme="light" level={2} />
17
- <ExampleContainer>
18
- <Title title="Simple image" theme="light" level={4} />
19
- <DxcImage
20
- alt="Example image"
21
- width="100%"
22
- src="https://images.ctfassets.net/hrltx12pl8hq/5596z2BCR9KmT1KeRBrOQa/4070fd4e2f1a13f71c2c46afeb18e41c/shutterstock_451077043-hero1.jpg"
23
- />
24
- </ExampleContainer>
25
- <ExampleContainer>
26
- <Title title="Image with text" theme="light" level={4} />
27
- <DxcParagraph>
28
- Lorem ipsum dolor sit amet consectetur. Tincidunt sed pharetra mollis duis volutpat urna. Hendrerit aliquet et
29
- arcu purus. Sodales elementum sollicitudin consequat elementum tortor. Lectus eget cursus ut ac pharetra
30
- lobortis integer eu. Potenti amet ac id risus ac nunc orci nibh. Tempus vitae vitae aenean arcu. Nibh tristique
31
- porta dui enim eget tristique rutrum. Quisque faucibus suscipit nibh est sed. Netus venenatis congue diam in dui
32
- morbi dignissim lorem. Urna aliquet sem in tincidunt. Nunc arcu nec fringilla enim purus ut justo nisi. Vel mus
33
- ut ornare faucibus blandit diam sit vestibulum massa. Semper nullam sit sagittis hendrerit augue. In fermentum
34
- metus proin arcu faucibus proin nibh sit. Vel integer sed enim in sed vel nec ut vitae. Commodo sagittis
35
- volutpat id lorem.
36
- </DxcParagraph>
37
- <DxcInset top="2rem" bottom="2rem">
38
- <DxcImage
39
- alt="Ratatouille is a great movie"
40
- caption="Ratatouille with a smile on his face."
41
- src="https://hips.hearstapps.com/es.h-cdn.co/fotoes/images/cinefilia/por-que-ratatouille-nos-sigue-enamorando-10-anos-despues/136444706-1-esl-ES/Por-que-Ratatouille-nos-sigue-enamorando-10-anos-despues.jpg"
42
- />
43
- </DxcInset>
44
- <DxcParagraph>
45
- Lorem ipsum dolor sit amet consectetur. Tincidunt sed pharetra mollis duis volutpat urna. Hendrerit aliquet et
46
- arcu purus. Sodales elementum sollicitudin consequat elementum tortor. Lectus eget cursus ut ac pharetra
47
- lobortis integer eu. Potenti amet ac id risus ac nunc orci nibh. Tempus vitae vitae aenean arcu. Nibh tristique
48
- porta dui enim eget tristique rutrum. Quisque faucibus suscipit nibh est sed. Netus venenatis congue diam in dui
49
- morbi dignissim lorem. Urna aliquet sem in tincidunt. Nunc arcu nec fringilla enim purus ut justo nisi. Vel mus
50
- ut ornare faucibus blandit diam sit vestibulum massa. Semper nullam sit sagittis hendrerit augue. In fermentum
51
- metus proin arcu faucibus proin nibh sit. Vel integer sed enim in sed vel nec ut vitae. Commodo sagittis
52
- volutpat id lorem.
53
- </DxcParagraph>
54
- </ExampleContainer>
55
- <ExampleContainer>
56
- <Title title="Example image" theme="light" level={4} />
57
- <DxcFlex gap="1rem">
58
- <DxcImage
59
- alt="Camera pic"
60
- caption="Picture of a camera and the sunset."
61
- width="500px"
62
- src="https://assets.entrepreneur.com/content/3x2/2000/20191009140007-GettyImages-1053962188.jpeg"
63
- />
64
- <DxcParagraph>
65
- Lorem ipsum dolor sit amet consectetur. Tincidunt sed pharetra mollis duis volutpat urna. Hendrerit aliquet et
66
- arcu purus. Sodales elementum sollicitudin consequat elementum tortor. Lectus eget cursus ut ac pharetra
67
- lobortis integer eu. Potenti amet ac id risus ac nunc orci nibh. Tempus vitae vitae aenean arcu. Nibh
68
- tristique porta dui enim eget tristique rutrum. Quisque faucibus suscipit nibh est sed. Netus venenatis congue
69
- diam in dui morbi dignissim lorem. Urna aliquet sem in tincidunt. Nunc arcu nec fringilla enim purus ut justo
70
- nisi. Vel mus ut ornare faucibus blandit diam sit vestibulum massa. Semper nullam sit sagittis hendrerit
71
- augue. In fermentum metus proin arcu faucibus proin nibh sit. Vel integer sed enim in sed vel nec ut vitae.
72
- Commodo sagittis volutpat id lorem. Lorem ipsum dolor sit amet consectetur. Tincidunt sed pharetra mollis duis
73
- volutpat urna. Hendrerit aliquet et arcu purus. Sodales elementum sollicitudin consequat elementum tortor.
74
- Lectus eget cursus ut ac pharetra lobortis integer eu. Potenti amet ac id risus ac nunc orci nibh. Tempus
75
- vitae vitae aenean arcu. Nibh tristique porta dui enim eget tristique rutrum. Quisque faucibus suscipit nibh
76
- est sed. Netus venenatis congue diam in dui morbi dignissim lorem. Urna aliquet sem in tincidunt. Nunc arcu
77
- nec fringilla enim purus ut justo nisi. Vel mus ut ornare faucibus blandit diam sit vestibulum massa. Semper
78
- nullam sit sagittis hendrerit augue. In fermentum metus proin arcu faucibus proin nibh sit. Vel integer sed
79
- enim in sed vel nec ut vitae. Commodo sagittis volutpat id lorem.
80
- </DxcParagraph>
81
- </DxcFlex>
82
- </ExampleContainer>
83
- <ExampleContainer>
84
- <Title title="Object position" theme="light" level={4} />
85
- <DxcImage
86
- alt="Moon pic"
87
- caption="Picture of the moon."
88
- width="250px"
89
- src="https://interactive-examples.mdn.mozilla.net/media/examples/moon.jpg"
90
- objectPosition="right top"
91
- objectFit="none"
92
- />
93
- </ExampleContainer>
94
- <ExampleContainer>
95
- <Title title="Object fit: contain" theme="light" level={4} />
96
- <div style={{ display: "flex", width: "fit-content", border: "1px solid #000", padding: "0.5rem" }}>
97
- <DxcImage
98
- alt="Dog pic"
99
- src="https://cc-prod.scene7.com/is/image/CCProdAuthor/What-is-Stock-Photography_P1_mobile?$pjpeg$&jpegSize=200&wid=720"
100
- width="200px"
101
- height="200px"
102
- objectFit="contain"
103
- caption="Pretty dog."
104
- />
105
- </div>
106
- </ExampleContainer>
107
- <ExampleContainer>
108
- <Title title="Object fit: cover" theme="light" level={4} />
109
- <div style={{ width: "75%", height: "300px" }}>
110
- <DxcImage
111
- alt="Spaceship pic"
112
- src="https://media.istockphoto.com/id/1344443930/es/foto/lanzamiento-de-cohetes-del-transbordador-espacial-en-el-cielo-y-nubes-al-espacio-exterior.jpg?s=612x612&w=0&k=20&c=CO2A96GnnWvJsgZuj9WfYCVIBVzicnQDfnzwD1nomN0="
113
- objectFit="cover"
114
- width="50%"
115
- height="100%"
116
- objectPosition="0px 0px"
117
- />
118
- <DxcImage
119
- alt="Spaceship pic"
120
- src="https://media.istockphoto.com/id/1344443930/es/foto/lanzamiento-de-cohetes-del-transbordador-espacial-en-el-cielo-y-nubes-al-espacio-exterior.jpg?s=612x612&w=0&k=20&c=CO2A96GnnWvJsgZuj9WfYCVIBVzicnQDfnzwD1nomN0="
121
- objectFit="cover"
122
- width="50%"
123
- height="100%"
124
- objectPosition="0px 0px"
125
- />
126
- </div>
127
- </ExampleContainer>
128
- </>
129
- );
package/image/types.d.ts DELETED
@@ -1,72 +0,0 @@
1
- /// <reference types="react" />
2
- type Props = {
3
- /**
4
- * Alternative text description displayed when the specified image is not loaded.
5
- *
6
- * See MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt
7
- * See W3C alt decision tree: https://www.w3.org/WAI/tutorials/images/decision-tree/
8
- */
9
- alt: string;
10
- /**
11
- * Image legend with a descriptive purpose. It is placed below the image and is complementary to the alt attribute,
12
- * which is required regardless of the presence of the caption or not.
13
- */
14
- caption?: string;
15
- /**
16
- * If true, the image will be loaded only when it is visible on the screen (lazy loading).
17
- * Otherwise and by default, the image will be loaded as soon as the component is mounted (eager loading).
18
- */
19
- lazyLoading?: boolean;
20
- /**
21
- * URL of the image. This prop is required and must be valid.
22
- */
23
- src: string;
24
- /**
25
- * List of one or more strings separated by commas indicating a set of possible images for the user agent to use.
26
- *
27
- * See MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset
28
- */
29
- srcSet?: string;
30
- /**
31
- * One or more strings separated by commas, indicating a set of source sizes.
32
- * If the srcSet attribute is absent or contains no values with a width descriptor,
33
- * then this attribute has no effect.
34
- *
35
- * See MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes
36
- */
37
- sizes?: string;
38
- /**
39
- * Sets the rendered width of the image.
40
- */
41
- width?: string;
42
- /**
43
- * Sets the rendered height of the image.
44
- */
45
- height?: string;
46
- /**
47
- * Sets the object-fit CSS property.
48
- *
49
- * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
50
- */
51
- objectFit?: "contain" | "cover" | "fill" | "none" | "scale-down";
52
- /**
53
- * Sets the object-position CSS property.
54
- *
55
- * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
56
- */
57
- objectPosition?: string;
58
- /**
59
- * This function will be called when the image is loaded.
60
- */
61
- onLoad?: React.ReactEventHandler<HTMLImageElement>;
62
- /**
63
- * This function will be called when the image fails to load.
64
- */
65
- onError?: React.ReactEventHandler<HTMLImageElement>;
66
- };
67
- export type CaptionWrapperProps = {
68
- condition: boolean;
69
- wrapper: (children: React.ReactNode) => JSX.Element;
70
- children: React.ReactNode;
71
- };
72
- export default Props;
package/image/types.js DELETED
@@ -1,5 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
package/inset/Inset.d.ts DELETED
@@ -1,3 +0,0 @@
1
- /// <reference types="react" />
2
- import InsetPropsType from "./types";
3
- export default function Inset({ space, horizontal, vertical, top, right, bottom, left, children, }: InsetPropsType): JSX.Element;
package/inset/Inset.js DELETED
@@ -1,43 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports["default"] = Inset;
8
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
9
- var _react = _interopRequireDefault(require("react"));
10
- var _styledComponents = _interopRequireDefault(require("styled-components"));
11
- var _templateObject;
12
- function Inset(_ref) {
13
- var space = _ref.space,
14
- horizontal = _ref.horizontal,
15
- vertical = _ref.vertical,
16
- top = _ref.top,
17
- right = _ref.right,
18
- bottom = _ref.bottom,
19
- left = _ref.left,
20
- children = _ref.children;
21
- return /*#__PURE__*/_react["default"].createElement(StyledInset, {
22
- space: space,
23
- horizontal: horizontal,
24
- vertical: vertical,
25
- top: top,
26
- right: right,
27
- bottom: bottom,
28
- left: left
29
- }, children);
30
- }
31
- function getSpacingValue(spacingName) {
32
- return spacingName ? spacingName : "0rem";
33
- }
34
- var StyledInset = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n ", "\n"])), function (_ref2) {
35
- var space = _ref2.space,
36
- horizontal = _ref2.horizontal,
37
- vertical = _ref2.vertical,
38
- top = _ref2.top,
39
- right = _ref2.right,
40
- bottom = _ref2.bottom,
41
- left = _ref2.left;
42
- return "\n padding: ".concat(getSpacingValue(top || vertical || space), " ").concat(getSpacingValue(right || horizontal || space), "\n ").concat(getSpacingValue(bottom || vertical || space), " ").concat(getSpacingValue(left || horizontal || space), ";\n");
43
- });