@dxc-technology/halstack-react 0.0.0-dec566a → 0.0.0-df9abc7

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 (380) hide show
  1. package/README.md +1 -2
  2. package/dist/index.d.mts +6581 -0
  3. package/dist/index.d.ts +6581 -0
  4. package/dist/index.js +14078 -0
  5. package/dist/index.mjs +14020 -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 -169
  13. package/accordion/Accordion.stories.tsx +0 -252
  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 -7
  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/AccordionGroupContext.d.ts +0 -3
  24. package/accordion-group/AccordionGroupContext.js +0 -8
  25. package/accordion-group/types.d.ts +0 -67
  26. package/accordion-group/types.js +0 -5
  27. package/action-icon/ActionIcon.d.ts +0 -4
  28. package/action-icon/ActionIcon.js +0 -48
  29. package/action-icon/ActionIcon.stories.tsx +0 -41
  30. package/action-icon/ActionIcon.test.js +0 -64
  31. package/action-icon/types.d.ts +0 -26
  32. package/action-icon/types.js +0 -5
  33. package/alert/Alert.d.ts +0 -4
  34. package/alert/Alert.js +0 -200
  35. package/alert/Alert.stories.tsx +0 -198
  36. package/alert/Alert.test.js +0 -75
  37. package/alert/types.d.ts +0 -49
  38. package/alert/types.js +0 -5
  39. package/badge/Badge.d.ts +0 -4
  40. package/badge/Badge.js +0 -159
  41. package/badge/Badge.stories.tsx +0 -210
  42. package/badge/Badge.test.js +0 -30
  43. package/badge/types.d.ts +0 -54
  44. package/badge/types.js +0 -5
  45. package/bleed/Bleed.d.ts +0 -3
  46. package/bleed/Bleed.js +0 -43
  47. package/bleed/Bleed.stories.tsx +0 -342
  48. package/bleed/types.d.ts +0 -37
  49. package/bleed/types.js +0 -5
  50. package/box/Box.d.ts +0 -4
  51. package/box/Box.js +0 -75
  52. package/box/Box.stories.tsx +0 -119
  53. package/box/Box.test.js +0 -13
  54. package/box/types.d.ts +0 -32
  55. package/box/types.js +0 -5
  56. package/bulleted-list/BulletedList.d.ts +0 -7
  57. package/bulleted-list/BulletedList.js +0 -92
  58. package/bulleted-list/BulletedList.stories.tsx +0 -115
  59. package/bulleted-list/types.d.ts +0 -38
  60. package/bulleted-list/types.js +0 -5
  61. package/button/Button.d.ts +0 -4
  62. package/button/Button.js +0 -121
  63. package/button/Button.stories.tsx +0 -326
  64. package/button/Button.test.js +0 -38
  65. package/button/types.d.ts +0 -57
  66. package/button/types.js +0 -5
  67. package/card/Card.d.ts +0 -4
  68. package/card/Card.js +0 -120
  69. package/card/Card.stories.tsx +0 -171
  70. package/card/Card.test.js +0 -39
  71. package/card/types.d.ts +0 -62
  72. package/card/types.js +0 -5
  73. package/checkbox/Checkbox.d.ts +0 -4
  74. package/checkbox/Checkbox.js +0 -215
  75. package/checkbox/Checkbox.stories.tsx +0 -222
  76. package/checkbox/Checkbox.test.js +0 -199
  77. package/checkbox/types.d.ts +0 -72
  78. package/checkbox/types.js +0 -5
  79. package/chip/Chip.d.ts +0 -4
  80. package/chip/Chip.js +0 -121
  81. package/chip/Chip.stories.tsx +0 -214
  82. package/chip/Chip.test.js +0 -41
  83. package/chip/types.d.ts +0 -45
  84. package/chip/types.js +0 -5
  85. package/common/coreTokens.d.ts +0 -237
  86. package/common/coreTokens.js +0 -184
  87. package/common/utils.d.ts +0 -1
  88. package/common/utils.js +0 -16
  89. package/common/variables.d.ts +0 -1395
  90. package/common/variables.js +0 -1267
  91. package/container/Container.d.ts +0 -4
  92. package/container/Container.js +0 -194
  93. package/container/Container.stories.tsx +0 -214
  94. package/container/types.d.ts +0 -74
  95. package/container/types.js +0 -5
  96. package/contextual-menu/ContextualMenu.d.ts +0 -7
  97. package/contextual-menu/ContextualMenu.js +0 -71
  98. package/contextual-menu/ContextualMenu.stories.tsx +0 -182
  99. package/contextual-menu/ContextualMenu.test.js +0 -71
  100. package/contextual-menu/MenuItemAction.d.ts +0 -4
  101. package/contextual-menu/MenuItemAction.js +0 -46
  102. package/contextual-menu/types.d.ts +0 -22
  103. package/contextual-menu/types.js +0 -5
  104. package/date-input/Calendar.d.ts +0 -4
  105. package/date-input/Calendar.js +0 -214
  106. package/date-input/DateInput.d.ts +0 -4
  107. package/date-input/DateInput.js +0 -223
  108. package/date-input/DateInput.stories.tsx +0 -285
  109. package/date-input/DateInput.test.js +0 -808
  110. package/date-input/DatePicker.d.ts +0 -4
  111. package/date-input/DatePicker.js +0 -115
  112. package/date-input/Icons.d.ts +0 -6
  113. package/date-input/Icons.js +0 -58
  114. package/date-input/YearPicker.d.ts +0 -4
  115. package/date-input/YearPicker.js +0 -100
  116. package/date-input/types.d.ts +0 -164
  117. package/date-input/types.js +0 -5
  118. package/dialog/Dialog.d.ts +0 -4
  119. package/dialog/Dialog.js +0 -104
  120. package/dialog/Dialog.stories.tsx +0 -365
  121. package/dialog/Dialog.test.js +0 -307
  122. package/dialog/types.d.ts +0 -36
  123. package/dialog/types.js +0 -5
  124. package/divider/Divider.d.ts +0 -4
  125. package/divider/Divider.js +0 -36
  126. package/divider/Divider.stories.tsx +0 -223
  127. package/divider/Divider.test.js +0 -38
  128. package/divider/types.d.ts +0 -21
  129. package/divider/types.js +0 -5
  130. package/dropdown/Dropdown.d.ts +0 -4
  131. package/dropdown/Dropdown.js +0 -319
  132. package/dropdown/Dropdown.stories.tsx +0 -427
  133. package/dropdown/Dropdown.test.js +0 -599
  134. package/dropdown/DropdownMenu.d.ts +0 -4
  135. package/dropdown/DropdownMenu.js +0 -63
  136. package/dropdown/DropdownMenuItem.d.ts +0 -4
  137. package/dropdown/DropdownMenuItem.js +0 -70
  138. package/dropdown/types.d.ts +0 -96
  139. package/dropdown/types.js +0 -5
  140. package/file-input/FileInput.d.ts +0 -4
  141. package/file-input/FileInput.js +0 -479
  142. package/file-input/FileInput.stories.tsx +0 -618
  143. package/file-input/FileInput.test.js +0 -459
  144. package/file-input/FileItem.d.ts +0 -4
  145. package/file-input/FileItem.js +0 -135
  146. package/file-input/types.d.ts +0 -129
  147. package/file-input/types.js +0 -5
  148. package/flex/Flex.d.ts +0 -4
  149. package/flex/Flex.js +0 -57
  150. package/flex/Flex.stories.tsx +0 -112
  151. package/flex/types.d.ts +0 -97
  152. package/flex/types.js +0 -5
  153. package/footer/Footer.d.ts +0 -4
  154. package/footer/Footer.js +0 -138
  155. package/footer/Footer.stories.tsx +0 -171
  156. package/footer/Footer.test.js +0 -85
  157. package/footer/Icons.d.ts +0 -3
  158. package/footer/Icons.js +0 -136
  159. package/footer/types.d.ts +0 -64
  160. package/footer/types.js +0 -5
  161. package/grid/Grid.d.ts +0 -7
  162. package/grid/Grid.js +0 -76
  163. package/grid/Grid.stories.tsx +0 -219
  164. package/grid/types.d.ts +0 -115
  165. package/grid/types.js +0 -5
  166. package/header/Header.d.ts +0 -8
  167. package/header/Header.js +0 -220
  168. package/header/Header.stories.tsx +0 -251
  169. package/header/Header.test.js +0 -66
  170. package/header/Icons.d.ts +0 -2
  171. package/header/Icons.js +0 -29
  172. package/header/types.d.ts +0 -33
  173. package/header/types.js +0 -5
  174. package/heading/Heading.d.ts +0 -4
  175. package/heading/Heading.js +0 -137
  176. package/heading/Heading.stories.tsx +0 -54
  177. package/heading/Heading.test.js +0 -169
  178. package/heading/types.d.ts +0 -33
  179. package/heading/types.js +0 -5
  180. package/icon/Icon.d.ts +0 -4
  181. package/icon/Icon.js +0 -33
  182. package/icon/Icon.stories.tsx +0 -28
  183. package/icon/types.d.ts +0 -4
  184. package/icon/types.js +0 -5
  185. package/image/Image.d.ts +0 -4
  186. package/image/Image.js +0 -70
  187. package/image/Image.stories.tsx +0 -129
  188. package/image/types.d.ts +0 -72
  189. package/image/types.js +0 -5
  190. package/inset/Inset.d.ts +0 -3
  191. package/inset/Inset.js +0 -43
  192. package/inset/Inset.stories.tsx +0 -230
  193. package/inset/types.d.ts +0 -37
  194. package/inset/types.js +0 -5
  195. package/layout/ApplicationLayout.d.ts +0 -20
  196. package/layout/ApplicationLayout.js +0 -134
  197. package/layout/ApplicationLayout.stories.tsx +0 -162
  198. package/layout/Icons.d.ts +0 -8
  199. package/layout/Icons.js +0 -58
  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 -7
  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/NavTabsContext.d.ts +0 -3
  215. package/nav-tabs/NavTabsContext.js +0 -8
  216. package/nav-tabs/Tab.d.ts +0 -4
  217. package/nav-tabs/Tab.js +0 -118
  218. package/nav-tabs/types.d.ts +0 -52
  219. package/nav-tabs/types.js +0 -5
  220. package/number-input/NumberInput.d.ts +0 -4
  221. package/number-input/NumberInput.js +0 -86
  222. package/number-input/NumberInput.stories.tsx +0 -131
  223. package/number-input/NumberInput.test.js +0 -989
  224. package/number-input/NumberInputContext.d.ts +0 -3
  225. package/number-input/NumberInputContext.js +0 -8
  226. package/number-input/types.d.ts +0 -136
  227. package/number-input/types.js +0 -5
  228. package/paginator/Icons.d.ts +0 -5
  229. package/paginator/Icons.js +0 -40
  230. package/paginator/Paginator.d.ts +0 -4
  231. package/paginator/Paginator.js +0 -135
  232. package/paginator/Paginator.stories.tsx +0 -87
  233. package/paginator/Paginator.test.js +0 -335
  234. package/paginator/types.d.ts +0 -38
  235. package/paginator/types.js +0 -5
  236. package/paragraph/Paragraph.d.ts +0 -5
  237. package/paragraph/Paragraph.js +0 -22
  238. package/paragraph/Paragraph.stories.tsx +0 -27
  239. package/password-input/Icons.d.ts +0 -6
  240. package/password-input/Icons.js +0 -35
  241. package/password-input/PasswordInput.d.ts +0 -4
  242. package/password-input/PasswordInput.js +0 -97
  243. package/password-input/PasswordInput.stories.tsx +0 -99
  244. package/password-input/PasswordInput.test.js +0 -198
  245. package/password-input/types.d.ts +0 -111
  246. package/password-input/types.js +0 -5
  247. package/progress-bar/ProgressBar.d.ts +0 -4
  248. package/progress-bar/ProgressBar.js +0 -144
  249. package/progress-bar/ProgressBar.stories.tsx +0 -93
  250. package/progress-bar/ProgressBar.test.js +0 -93
  251. package/progress-bar/types.d.ts +0 -37
  252. package/progress-bar/types.js +0 -5
  253. package/quick-nav/QuickNav.d.ts +0 -4
  254. package/quick-nav/QuickNav.js +0 -94
  255. package/quick-nav/QuickNav.stories.tsx +0 -356
  256. package/quick-nav/types.d.ts +0 -21
  257. package/quick-nav/types.js +0 -5
  258. package/radio-group/Radio.d.ts +0 -4
  259. package/radio-group/Radio.js +0 -124
  260. package/radio-group/RadioGroup.d.ts +0 -4
  261. package/radio-group/RadioGroup.js +0 -235
  262. package/radio-group/RadioGroup.stories.tsx +0 -214
  263. package/radio-group/RadioGroup.test.js +0 -756
  264. package/radio-group/types.d.ts +0 -114
  265. package/radio-group/types.js +0 -5
  266. package/resultset-table/Icons.d.ts +0 -7
  267. package/resultset-table/Icons.js +0 -47
  268. package/resultset-table/ResultsetTable.d.ts +0 -7
  269. package/resultset-table/ResultsetTable.js +0 -170
  270. package/resultset-table/ResultsetTable.stories.tsx +0 -401
  271. package/resultset-table/ResultsetTable.test.js +0 -381
  272. package/resultset-table/types.d.ts +0 -100
  273. package/resultset-table/types.js +0 -5
  274. package/select/Icons.d.ts +0 -10
  275. package/select/Icons.js +0 -89
  276. package/select/Listbox.d.ts +0 -4
  277. package/select/Listbox.js +0 -143
  278. package/select/Option.d.ts +0 -4
  279. package/select/Option.js +0 -87
  280. package/select/Select.d.ts +0 -4
  281. package/select/Select.js +0 -590
  282. package/select/Select.stories.tsx +0 -971
  283. package/select/Select.test.js +0 -2370
  284. package/select/types.d.ts +0 -209
  285. package/select/types.js +0 -5
  286. package/sidenav/Icons.d.ts +0 -7
  287. package/sidenav/Icons.js +0 -47
  288. package/sidenav/Sidenav.d.ts +0 -10
  289. package/sidenav/Sidenav.js +0 -197
  290. package/sidenav/Sidenav.stories.tsx +0 -282
  291. package/sidenav/Sidenav.test.js +0 -37
  292. package/sidenav/SidenavContext.d.ts +0 -5
  293. package/sidenav/SidenavContext.js +0 -13
  294. package/sidenav/types.d.ts +0 -76
  295. package/sidenav/types.js +0 -5
  296. package/slider/Slider.d.ts +0 -4
  297. package/slider/Slider.js +0 -285
  298. package/slider/Slider.test.js +0 -254
  299. package/slider/types.d.ts +0 -86
  300. package/slider/types.js +0 -5
  301. package/spinner/Spinner.d.ts +0 -4
  302. package/spinner/Spinner.js +0 -206
  303. package/spinner/Spinner.stories.tsx +0 -129
  304. package/spinner/Spinner.test.js +0 -55
  305. package/spinner/types.d.ts +0 -32
  306. package/spinner/types.js +0 -5
  307. package/status-light/StatusLight.d.ts +0 -4
  308. package/status-light/StatusLight.js +0 -51
  309. package/status-light/StatusLight.stories.tsx +0 -74
  310. package/status-light/StatusLight.test.js +0 -25
  311. package/status-light/types.d.ts +0 -17
  312. package/status-light/types.js +0 -5
  313. package/switch/Switch.d.ts +0 -4
  314. package/switch/Switch.js +0 -214
  315. package/switch/Switch.stories.tsx +0 -137
  316. package/switch/Switch.test.js +0 -180
  317. package/switch/types.d.ts +0 -66
  318. package/switch/types.js +0 -5
  319. package/table/DropdownTheme.js +0 -62
  320. package/table/Table.d.ts +0 -8
  321. package/table/Table.js +0 -161
  322. package/table/Table.stories.tsx +0 -651
  323. package/table/Table.test.js +0 -113
  324. package/table/types.d.ts +0 -49
  325. package/table/types.js +0 -5
  326. package/tabs/Tab.d.ts +0 -4
  327. package/tabs/Tab.js +0 -116
  328. package/tabs/Tabs.d.ts +0 -4
  329. package/tabs/Tabs.js +0 -384
  330. package/tabs/Tabs.stories.tsx +0 -226
  331. package/tabs/Tabs.test.js +0 -294
  332. package/tabs/types.d.ts +0 -92
  333. package/tabs/types.js +0 -5
  334. package/tag/Tag.d.ts +0 -4
  335. package/tag/Tag.js +0 -151
  336. package/tag/Tag.stories.tsx +0 -155
  337. package/tag/Tag.test.js +0 -49
  338. package/tag/types.d.ts +0 -69
  339. package/tag/types.js +0 -5
  340. package/text-input/Suggestion.d.ts +0 -4
  341. package/text-input/Suggestion.js +0 -67
  342. package/text-input/Suggestions.d.ts +0 -4
  343. package/text-input/Suggestions.js +0 -86
  344. package/text-input/TextInput.d.ts +0 -4
  345. package/text-input/TextInput.js +0 -567
  346. package/text-input/TextInput.stories.tsx +0 -465
  347. package/text-input/TextInput.test.js +0 -1756
  348. package/text-input/types.d.ts +0 -205
  349. package/text-input/types.js +0 -5
  350. package/textarea/Textarea.d.ts +0 -4
  351. package/textarea/Textarea.js +0 -234
  352. package/textarea/Textarea.stories.tsx +0 -174
  353. package/textarea/Textarea.test.js +0 -406
  354. package/textarea/types.d.ts +0 -141
  355. package/textarea/types.js +0 -5
  356. package/toggle-group/ToggleGroup.d.ts +0 -4
  357. package/toggle-group/ToggleGroup.js +0 -201
  358. package/toggle-group/ToggleGroup.stories.tsx +0 -218
  359. package/toggle-group/ToggleGroup.test.js +0 -137
  360. package/toggle-group/types.d.ts +0 -114
  361. package/toggle-group/types.js +0 -5
  362. package/typography/Typography.d.ts +0 -4
  363. package/typography/Typography.js +0 -23
  364. package/typography/Typography.stories.tsx +0 -198
  365. package/typography/types.d.ts +0 -18
  366. package/typography/types.js +0 -5
  367. package/useTheme.d.ts +0 -1148
  368. package/useTheme.js +0 -15
  369. package/useTranslatedLabels.d.ts +0 -85
  370. package/useTranslatedLabels.js +0 -14
  371. package/utils/BaseTypography.d.ts +0 -21
  372. package/utils/BaseTypography.js +0 -94
  373. package/utils/FocusLock.d.ts +0 -13
  374. package/utils/FocusLock.js +0 -124
  375. package/wizard/Wizard.d.ts +0 -4
  376. package/wizard/Wizard.js +0 -250
  377. package/wizard/Wizard.stories.tsx +0 -253
  378. package/wizard/Wizard.test.js +0 -114
  379. package/wizard/types.d.ts +0 -64
  380. 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 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,28 +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
- <DxcTypography as="p" fontSize="1.5rem">
17
- <DxcIcon icon="home" />
18
- <DxcIcon icon="filled_home" />
19
- </DxcTypography>
20
- </ExampleContainer>
21
- <ExampleContainer>
22
- <DxcTypography as="p" fontSize="1.5rem" color="#b182e3">
23
- <DxcIcon icon="home" />
24
- <DxcIcon icon="filled_home" />
25
- </DxcTypography>
26
- </ExampleContainer>
27
- </>
28
- );
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
- });