@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,342 +0,0 @@
1
- import React from "react";
2
- import styled from "styled-components";
3
- import Title from "../../.storybook/components/Title";
4
- import DxcBleed from "./Bleed";
5
- import DxcFlex from "../flex/Flex";
6
-
7
- export default {
8
- title: "Bleed",
9
- component: DxcBleed,
10
- };
11
-
12
- export const Chromatic = () => (
13
- <>
14
- <Title title="Space = none" theme="light" level={4} />
15
- <Container>
16
- <DxcFlex direction="column" gap="1.5rem">
17
- <Placeholder></Placeholder>
18
- <DxcBleed space="0rem">
19
- <Placeholder></Placeholder>
20
- </DxcBleed>
21
- <Placeholder></Placeholder>
22
- </DxcFlex>
23
- </Container>
24
- <Title title="Space = xxxsmall" theme="light" level={4} />
25
- <Container>
26
- <DxcFlex direction="column" gap="1.5rem">
27
- <Placeholder></Placeholder>
28
- <DxcBleed space="0.125rem">
29
- <Placeholder></Placeholder>
30
- </DxcBleed>
31
- <Placeholder></Placeholder>
32
- </DxcFlex>
33
- </Container>
34
- <Title title="Space = xxsmall" theme="light" level={4} />
35
- <Container>
36
- <DxcFlex direction="column" gap="1.5rem">
37
- <Placeholder></Placeholder>
38
- <DxcBleed space="0.25rem">
39
- <Placeholder></Placeholder>
40
- </DxcBleed>
41
- <Placeholder></Placeholder>
42
- </DxcFlex>
43
- </Container>
44
- <Title title="Space = xsmall" theme="light" level={4} />
45
- <Container>
46
- <DxcFlex direction="column" gap="1.5rem">
47
- <Placeholder></Placeholder>
48
- <DxcBleed space="0.5rem">
49
- <Placeholder></Placeholder>
50
- </DxcBleed>
51
- <Placeholder></Placeholder>
52
- </DxcFlex>
53
- </Container>
54
- <Title title="Space = small" theme="light" level={4} />
55
- <Container>
56
- <DxcFlex direction="column" gap="1.5rem">
57
- <Placeholder></Placeholder>
58
- <DxcBleed space="1rem">
59
- <Placeholder></Placeholder>
60
- </DxcBleed>
61
- <Placeholder></Placeholder>
62
- </DxcFlex>
63
- </Container>
64
- <Title title="Space = medium" theme="light" level={4} />
65
- <Container>
66
- <DxcFlex direction="column" gap="1.5rem">
67
- <Placeholder></Placeholder>
68
- <DxcBleed space="1.5rem">
69
- <Placeholder></Placeholder>
70
- </DxcBleed>
71
- <Placeholder></Placeholder>
72
- </DxcFlex>
73
- </Container>
74
- <Title title="Space = large" theme="light" level={4} />
75
- <Container>
76
- <DxcFlex direction="column" gap="1.5rem">
77
- <Placeholder></Placeholder>
78
- <DxcBleed space="2rem">
79
- <Placeholder></Placeholder>
80
- </DxcBleed>
81
- <Placeholder></Placeholder>
82
- </DxcFlex>
83
- </Container>
84
- <Title title="Space = xlarge" theme="light" level={4} />
85
- <Container>
86
- <DxcFlex direction="column" gap="1.5rem">
87
- <Placeholder></Placeholder>
88
- <DxcBleed space="3rem">
89
- <Placeholder></Placeholder>
90
- </DxcBleed>
91
- <Placeholder></Placeholder>
92
- </DxcFlex>
93
- </Container>
94
- <Title title="Space = xxlarge" theme="light" level={4} />
95
- <Container>
96
- <DxcFlex direction="column" gap="1.5rem">
97
- <Placeholder></Placeholder>
98
- <DxcBleed space="4rem">
99
- <Placeholder></Placeholder>
100
- </DxcBleed>
101
- <Placeholder></Placeholder>
102
- </DxcFlex>
103
- </Container>
104
- <Title title="Space = xxxlarge" theme="light" level={4} />
105
- <Container>
106
- <DxcFlex direction="column" gap="1.5rem">
107
- <Placeholder></Placeholder>
108
- <DxcBleed space="5rem">
109
- <Placeholder></Placeholder>
110
- </DxcBleed>
111
- <Placeholder></Placeholder>
112
- </DxcFlex>
113
- </Container>
114
-
115
- <Title title="Horizontal = none" theme="light" level={4} />
116
- <Container>
117
- <DxcFlex direction="column" gap="1.5rem">
118
- <Placeholder></Placeholder>
119
- <DxcBleed horizontal="0rem">
120
- <Placeholder></Placeholder>
121
- </DxcBleed>
122
- <Placeholder></Placeholder>
123
- </DxcFlex>
124
- </Container>
125
- <Title title="Horizontal = xxxsmall" theme="light" level={4} />
126
- <Container>
127
- <DxcFlex direction="column" gap="1.5rem">
128
- <Placeholder></Placeholder>
129
- <DxcBleed horizontal="0.125rem">
130
- <Placeholder></Placeholder>
131
- </DxcBleed>
132
- <Placeholder></Placeholder>
133
- </DxcFlex>
134
- </Container>
135
- <Title title="Horizontal = xxsmall" theme="light" level={4} />
136
- <Container>
137
- <DxcFlex direction="column" gap="1.5rem">
138
- <Placeholder></Placeholder>
139
- <DxcBleed horizontal="0.25rem">
140
- <Placeholder></Placeholder>
141
- </DxcBleed>
142
- <Placeholder></Placeholder>
143
- </DxcFlex>
144
- </Container>
145
- <Title title="Horizontal = xsmall" theme="light" level={4} />
146
- <Container>
147
- <DxcFlex direction="column" gap="1.5rem">
148
- <Placeholder></Placeholder>
149
- <DxcBleed horizontal="0.5rem">
150
- <Placeholder></Placeholder>
151
- </DxcBleed>
152
- <Placeholder></Placeholder>
153
- </DxcFlex>
154
- </Container>
155
- <Title title="Horizontal = small" theme="light" level={4} />
156
- <Container>
157
- <DxcFlex direction="column" gap="1.5rem">
158
- <Placeholder></Placeholder>
159
- <DxcBleed horizontal="1rem">
160
- <Placeholder></Placeholder>
161
- </DxcBleed>
162
- <Placeholder></Placeholder>
163
- </DxcFlex>
164
- </Container>
165
- <Title title="Horizontal = medium" theme="light" level={4} />
166
- <Container>
167
- <DxcFlex direction="column" gap="1.5rem">
168
- <Placeholder></Placeholder>
169
- <DxcBleed horizontal="1.5rem">
170
- <Placeholder></Placeholder>
171
- </DxcBleed>
172
- <Placeholder></Placeholder>
173
- </DxcFlex>
174
- </Container>
175
- <Title title="Horizontal = large" theme="light" level={4} />
176
- <Container>
177
- <DxcFlex direction="column" gap="1.5rem">
178
- <Placeholder></Placeholder>
179
- <DxcBleed horizontal="2rem">
180
- <Placeholder></Placeholder>
181
- </DxcBleed>
182
- <Placeholder></Placeholder>
183
- </DxcFlex>
184
- </Container>
185
- <Title title="Horizontal = xlarge" theme="light" level={4} />
186
- <Container>
187
- <DxcFlex direction="column" gap="1.5rem">
188
- <Placeholder></Placeholder>
189
- <DxcBleed horizontal="3rem">
190
- <Placeholder></Placeholder>
191
- </DxcBleed>
192
- <Placeholder></Placeholder>
193
- </DxcFlex>
194
- </Container>
195
- <Title title="Horizontal = xxlarge" theme="light" level={4} />
196
- <Container>
197
- <DxcFlex direction="column" gap="1.5rem">
198
- <Placeholder></Placeholder>
199
- <DxcBleed horizontal="4rem">
200
- <Placeholder></Placeholder>
201
- </DxcBleed>
202
- <Placeholder></Placeholder>
203
- </DxcFlex>
204
- </Container>
205
- <Title title="Horizontal = xxxlarge" theme="light" level={4} />
206
- <Container>
207
- <DxcFlex direction="column" gap="1.5rem">
208
- <Placeholder></Placeholder>
209
- <DxcBleed horizontal="5rem">
210
- <Placeholder></Placeholder>
211
- </DxcBleed>
212
- <Placeholder></Placeholder>
213
- </DxcFlex>
214
- </Container>
215
-
216
- <Title title="Vertical = none" theme="light" level={4} />
217
- <Container>
218
- <DxcFlex direction="column" gap="1.5rem">
219
- <Placeholder></Placeholder>
220
- <DxcBleed vertical="0rem">
221
- <Placeholder></Placeholder>
222
- </DxcBleed>
223
- <Placeholder></Placeholder>
224
- </DxcFlex>
225
- </Container>
226
- <Title title="Vertical = xxxsmall" theme="light" level={4} />
227
- <Container>
228
- <DxcFlex direction="column" gap="1.5rem">
229
- <Placeholder></Placeholder>
230
- <DxcBleed vertical="0.125rem">
231
- <Placeholder></Placeholder>
232
- </DxcBleed>
233
- <Placeholder></Placeholder>
234
- </DxcFlex>
235
- </Container>
236
- <Title title="Vertical = xxsmall" theme="light" level={4} />
237
- <Container>
238
- <DxcFlex direction="column" gap="1.5rem">
239
- <Placeholder></Placeholder>
240
- <DxcBleed vertical="0.25rem">
241
- <Placeholder></Placeholder>
242
- </DxcBleed>
243
- <Placeholder></Placeholder>
244
- </DxcFlex>
245
- </Container>
246
- <Title title="Vertical = xsmall" theme="light" level={4} />
247
- <Container>
248
- <DxcFlex direction="column" gap="1.5rem">
249
- <Placeholder></Placeholder>
250
- <DxcBleed vertical="0.5rem">
251
- <Placeholder></Placeholder>
252
- </DxcBleed>
253
- <Placeholder></Placeholder>
254
- </DxcFlex>
255
- </Container>
256
- <Title title="Vertical = small" theme="light" level={4} />
257
- <Container>
258
- <DxcFlex direction="column" gap="1.5rem">
259
- <Placeholder></Placeholder>
260
- <DxcBleed vertical="1rem">
261
- <Placeholder></Placeholder>
262
- </DxcBleed>
263
- <Placeholder></Placeholder>
264
- </DxcFlex>
265
- </Container>
266
- <Title title="Vertical = medium" theme="light" level={4} />
267
- <Container>
268
- <DxcFlex direction="column" gap="1.5rem">
269
- <Placeholder></Placeholder>
270
- <DxcBleed vertical="1.5rem">
271
- <Placeholder></Placeholder>
272
- </DxcBleed>
273
- <Placeholder></Placeholder>
274
- </DxcFlex>
275
- </Container>
276
- <Title title="Vertical = large" theme="light" level={4} />
277
- <Container>
278
- <DxcFlex direction="column" gap="1.5rem">
279
- <Placeholder></Placeholder>
280
- <DxcBleed vertical="2rem">
281
- <Placeholder></Placeholder>
282
- </DxcBleed>
283
- <Placeholder></Placeholder>
284
- </DxcFlex>
285
- </Container>
286
- <Title title="Vertical = xlarge" theme="light" level={4} />
287
- <Container>
288
- <DxcFlex direction="column" gap="1.5rem">
289
- <Placeholder></Placeholder>
290
- <DxcBleed vertical="3rem">
291
- <Placeholder></Placeholder>
292
- </DxcBleed>
293
- <Placeholder></Placeholder>
294
- </DxcFlex>
295
- </Container>
296
- <Title title="Vertical = xxlarge" theme="light" level={4} />
297
- <Container>
298
- <DxcFlex direction="column" gap="1.5rem">
299
- <Placeholder></Placeholder>
300
- <DxcBleed vertical="4rem">
301
- <Placeholder></Placeholder>
302
- </DxcBleed>
303
- <Placeholder></Placeholder>
304
- </DxcFlex>
305
- </Container>
306
- <Title title="Vertical = xxxlarge" theme="light" level={4} />
307
- <Container>
308
- <DxcFlex direction="column" gap="1.5rem">
309
- <Placeholder></Placeholder>
310
- <DxcBleed vertical="5rem">
311
- <Placeholder></Placeholder>
312
- </DxcBleed>
313
- <Placeholder></Placeholder>
314
- </DxcFlex>
315
- </Container>
316
-
317
- <Title title="Top = xsmall, right = small, bottom = medium and left = large" theme="light" level={4} />
318
- <Container>
319
- <DxcFlex direction="column" gap="1.5rem">
320
- <Placeholder></Placeholder>
321
- <DxcBleed top="0.5rem" right="1rem" bottom="1.5rem" left="2rem">
322
- <Placeholder></Placeholder>
323
- </DxcBleed>
324
- <Placeholder></Placeholder>
325
- </DxcFlex>
326
- </Container>
327
- </>
328
- );
329
-
330
- const Container = styled.div`
331
- background: #f2eafa;
332
- padding: 5rem;
333
- margin: 2.5rem;
334
- `;
335
-
336
- const Placeholder = styled.div`
337
- min-height: 40px;
338
- min-width: 120px;
339
- border: 1px solid #a46ede;
340
- border-radius: 0.5rem;
341
- background-color: #e5d5f6;
342
- `;
package/bleed/types.d.ts DELETED
@@ -1,37 +0,0 @@
1
- /// <reference types="react" />
2
- type Spacing = "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "1rem" | "1.5rem" | "2rem" | "3rem" | "4rem" | "5rem";
3
- type Props = {
4
- /**
5
- * Applies the spacing scale to all sides.
6
- */
7
- space?: Spacing;
8
- /**
9
- * Applies the spacing scale to the left and right sides.
10
- */
11
- horizontal?: Spacing;
12
- /**
13
- * Applies the spacing scale to the top and bottom sides.
14
- */
15
- vertical?: Spacing;
16
- /**
17
- * Applies the spacing scale to the top side.
18
- */
19
- top?: Spacing;
20
- /**
21
- * Applies the spacing scale to the right side.
22
- */
23
- right?: Spacing;
24
- /**
25
- * Applies the spacing scale to the bottom side.
26
- */
27
- bottom?: Spacing;
28
- /**
29
- * Applies the spacing scale to the left side.
30
- */
31
- left?: Spacing;
32
- /**
33
- * Custom content inside the bleed.
34
- */
35
- children: React.ReactNode;
36
- };
37
- export default Props;
package/bleed/types.js DELETED
@@ -1,5 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
package/box/Box.d.ts DELETED
@@ -1,4 +0,0 @@
1
- /// <reference types="react" />
2
- import BoxPropsType from "./types";
3
- declare const DxcBox: ({ shadowDepth, display, children, margin, size, }: BoxPropsType) => JSX.Element;
4
- export default DxcBox;
package/box/Box.js DELETED
@@ -1,75 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- var _typeof3 = require("@babel/runtime/helpers/typeof");
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = void 0;
9
- var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
10
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
- var _react = _interopRequireDefault(require("react"));
12
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
13
- var _variables = require("../common/variables");
14
- var _utils = require("../common/utils");
15
- var _useTheme = _interopRequireDefault(require("../useTheme"));
16
- var _templateObject;
17
- 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); }
18
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
19
- var DxcBox = function DxcBox(_ref) {
20
- var _ref$shadowDepth = _ref.shadowDepth,
21
- shadowDepth = _ref$shadowDepth === void 0 ? 2 : _ref$shadowDepth,
22
- _ref$display = _ref.display,
23
- display = _ref$display === void 0 ? "inline-flex" : _ref$display,
24
- children = _ref.children,
25
- margin = _ref.margin,
26
- _ref$size = _ref.size,
27
- size = _ref$size === void 0 ? "fitContent" : _ref$size;
28
- var colorsTheme = (0, _useTheme["default"])();
29
- return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
30
- theme: colorsTheme.box
31
- }, /*#__PURE__*/_react["default"].createElement(Box, {
32
- shadowDepth: shadowDepth,
33
- display: display,
34
- margin: margin,
35
- size: size
36
- }, children));
37
- };
38
- var sizes = {
39
- small: "48px",
40
- medium: "240px",
41
- large: "480px",
42
- fillParent: "100%",
43
- fitContent: "fit-content"
44
- };
45
- var calculateWidth = function calculateWidth(margin, size) {
46
- return size === "fillParent" ? "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")") : sizes[size];
47
- };
48
- var Box = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: ", ";\n border-radius: ", ";\n border-width: ", ";\n border-style: ", ";\n border-color: ", ";\n overflow: hidden;\n width: ", ";\n background-color: ", ";\n box-shadow: ", ";\n\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"])), function (props) {
49
- return props.display;
50
- }, function (props) {
51
- return props.theme.borderRadius;
52
- }, function (props) {
53
- return props.theme.borderThickness;
54
- }, function (props) {
55
- return props.theme.borderStyle;
56
- }, function (props) {
57
- return props.theme.borderColor;
58
- }, function (props) {
59
- return calculateWidth(props.margin, props.size);
60
- }, function (props) {
61
- return props.theme.backgroundColor;
62
- }, function (props) {
63
- return props.shadowDepth === 1 ? "".concat(props.theme.oneShadowDepthShadowOffsetX, " ").concat(props.theme.oneShadowDepthShadowOffsetY, " ").concat(props.theme.oneShadowDepthShadowBlur, " ").concat(props.theme.oneShadowDepthShadowSpread, " ").concat(props.theme.oneShadowDepthShadowColor) : props.shadowDepth === 2 ? "".concat(props.theme.twoShadowDepthShadowOffsetX, " ").concat(props.theme.twoShadowDepthShadowOffsetY, " ").concat(props.theme.twoShadowDepthShadowBlur, " ").concat(props.theme.twoShadowDepthShadowSpread, " ").concat(props.theme.twoShadowDepthShadowColor) : "".concat(props.theme.noneShadowDepthShadowOffsetX, " ").concat(props.theme.noneShadowDepthShadowOffsetY, " ").concat(props.theme.noneShadowDepthShadowBlur, " ").concat(props.theme.noneShadowDepthShadowSpread, " ").concat(props.theme.noneShadowDepthShadowColor);
64
- }, function (props) {
65
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
66
- }, function (props) {
67
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
68
- }, function (props) {
69
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
70
- }, function (props) {
71
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
72
- }, function (props) {
73
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
74
- });
75
- var _default = exports["default"] = DxcBox;
@@ -1,119 +0,0 @@
1
- import React from "react";
2
- import Title from "../../.storybook/components/Title";
3
- import ExampleContainer from "../../.storybook/components/ExampleContainer";
4
- import DxcBox from "./Box";
5
- import DxcInset from "../inset/Inset";
6
- import { HalstackProvider } from "../HalstackContext";
7
-
8
- export default {
9
- title: "Box ",
10
- component: DxcBox,
11
- };
12
-
13
- const opinionatedTheme = {
14
- box: {
15
- baseColor: "#ffffff",
16
- },
17
- };
18
-
19
- export const Chromatic = () => (
20
- <>
21
- <Title title="Display flex" theme="light" level={2} />
22
- <ExampleContainer>
23
- <DxcBox display="flex">
24
- <DxcInset space="2rem">Box</DxcInset>
25
- </DxcBox>
26
- </ExampleContainer>
27
- <Title title="ShadowDepth" theme="light" level={2} />
28
- <ExampleContainer>
29
- <Title title="ShadowDepth 0" theme="light" level={4} />
30
- <DxcBox shadowDepth={0} margin="medium">
31
- <DxcInset space="2rem">Box</DxcInset>
32
- </DxcBox>
33
- </ExampleContainer>
34
- <ExampleContainer>
35
- <Title title="ShadowDepth 1" theme="light" level={4} />
36
- <DxcBox shadowDepth={1} margin="medium">
37
- <DxcInset space="2rem">Box</DxcInset>
38
- </DxcBox>
39
- </ExampleContainer>
40
- <ExampleContainer>
41
- <Title title="ShadowDepth 2" theme="light" level={4} />
42
- <DxcBox shadowDepth={2} margin="medium">
43
- <DxcInset space="2rem">Box</DxcInset>
44
- </DxcBox>
45
- </ExampleContainer>
46
- <Title title="Margins" theme="light" level={2} />
47
- <ExampleContainer>
48
- <Title title="Xxsmall margin" theme="light" level={4} />
49
- <DxcBox margin="xxsmall">
50
- <DxcInset space="2rem">Box</DxcInset>
51
- </DxcBox>
52
- </ExampleContainer>
53
- <ExampleContainer>
54
- <Title title="Xsmall margin" theme="light" level={4} />
55
- <DxcBox margin="xsmall">
56
- <DxcInset space="2rem">Box</DxcInset>
57
- </DxcBox>
58
- </ExampleContainer>
59
- <ExampleContainer>
60
- <Title title="Small margin" theme="light" level={4} />
61
- <DxcBox margin="small">
62
- <DxcInset space="2rem">Box</DxcInset>
63
- </DxcBox>
64
- </ExampleContainer>
65
- <ExampleContainer>
66
- <Title title="Medium margin" theme="light" level={4} />
67
- <DxcBox margin="medium">
68
- <DxcInset space="2rem">Box</DxcInset>
69
- </DxcBox>
70
- </ExampleContainer>
71
- <ExampleContainer>
72
- <Title title="Large margin" theme="light" level={4} />
73
- <DxcBox margin="large">
74
- <DxcInset space="2rem">Box</DxcInset>
75
- </DxcBox>
76
- </ExampleContainer>
77
- <ExampleContainer>
78
- <Title title="Xlarge margin" theme="light" level={4} />
79
- <DxcBox margin="xlarge">
80
- <DxcInset space="2rem">Box</DxcInset>
81
- </DxcBox>
82
- </ExampleContainer>
83
- <ExampleContainer>
84
- <Title title="Xxlarge margin" theme="light" level={4} />
85
- <DxcBox margin="xxlarge">
86
- <DxcInset space="2rem">Box</DxcInset>
87
- </DxcBox>
88
- </ExampleContainer>
89
- <Title title="Sizes" theme="light" level={2} />
90
- <ExampleContainer>
91
- <Title title="Small size" theme="light" level={4} />
92
- <DxcBox size="small">Box</DxcBox>
93
- </ExampleContainer>
94
- <ExampleContainer>
95
- <Title title="Medium size" theme="light" level={4} />
96
- <DxcBox size="medium">Box</DxcBox>
97
- </ExampleContainer>
98
- <ExampleContainer>
99
- <Title title="Large size" theme="light" level={4} />
100
- <DxcBox size="large">Box</DxcBox>
101
- </ExampleContainer>
102
- <ExampleContainer>
103
- <Title title="FillParent size" theme="light" level={4} />
104
- <DxcBox size="fillParent">Box</DxcBox>
105
- </ExampleContainer>
106
- <ExampleContainer>
107
- <Title title="FitContent" theme="light" level={4} />
108
- <DxcBox size="fitContent">Box</DxcBox>
109
- </ExampleContainer>
110
- <Title title="Opinionated theme" theme="light" level={2} />
111
- <ExampleContainer>
112
- <HalstackProvider theme={opinionatedTheme}>
113
- <DxcBox display="flex">
114
- <DxcInset space="2rem">Box</DxcInset>
115
- </DxcBox>
116
- </HalstackProvider>
117
- </ExampleContainer>
118
- </>
119
- );
package/box/Box.test.js DELETED
@@ -1,13 +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 _Card = _interopRequireDefault(require("../card/Card.tsx"));
7
- describe("Box component tests", function () {
8
- test("Box renders with correct text", function () {
9
- var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Card["default"], null, "test-box")),
10
- getByText = _render.getByText;
11
- expect(getByText("test-box")).toBeTruthy();
12
- });
13
- });
package/box/types.d.ts DELETED
@@ -1,32 +0,0 @@
1
- /// <reference types="react" />
2
- type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
- type Margin = {
4
- top?: Space;
5
- bottom?: Space;
6
- left?: Space;
7
- right?: Space;
8
- };
9
- type Props = {
10
- /**
11
- * The size of the shadow to be displayed around the box.
12
- */
13
- shadowDepth?: 0 | 1 | 2;
14
- /**
15
- * Changes the display CSS property of the box div.
16
- */
17
- display?: string;
18
- /**
19
- * Custom content that will be placed in the box component.
20
- */
21
- children: React.ReactNode;
22
- /**
23
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
24
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
25
- */
26
- margin?: Space | Margin;
27
- /**
28
- * Size of the component.
29
- */
30
- size?: "small" | "medium" | "large" | "fillParent" | "fitContent";
31
- };
32
- export default Props;
package/box/types.js DELETED
@@ -1,5 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
@@ -1,7 +0,0 @@
1
- /// <reference types="react" />
2
- import BulletedListPropsType, { BulletedListItemPropsType } from "./types";
3
- declare const DxcBulletedList: {
4
- ({ children, type, icon }: BulletedListPropsType): JSX.Element;
5
- Item: ({ children }: BulletedListItemPropsType) => JSX.Element;
6
- };
7
- export default DxcBulletedList;