@dxc-technology/halstack-react 0.0.0-9b45027 → 0.0.0-9bd9511

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 (294) hide show
  1. package/BackgroundColorContext.d.ts +2 -2
  2. package/BackgroundColorContext.js +1 -11
  3. package/HalstackContext.d.ts +13 -0
  4. package/HalstackContext.js +318 -0
  5. package/accordion/Accordion.d.ts +1 -1
  6. package/accordion/Accordion.js +124 -179
  7. package/accordion/Accordion.stories.tsx +115 -27
  8. package/accordion/Accordion.test.js +56 -0
  9. package/accordion/types.d.ts +12 -11
  10. package/accordion-group/AccordionGroup.d.ts +1 -1
  11. package/accordion-group/AccordionGroup.js +28 -77
  12. package/accordion-group/AccordionGroup.stories.tsx +28 -2
  13. package/accordion-group/AccordionGroup.test.js +108 -0
  14. package/accordion-group/types.d.ts +19 -12
  15. package/alert/Alert.js +18 -46
  16. package/alert/Alert.stories.tsx +28 -0
  17. package/alert/Alert.test.js +75 -0
  18. package/alert/types.d.ts +3 -3
  19. package/badge/Badge.d.ts +4 -0
  20. package/badge/Badge.js +6 -16
  21. package/badge/types.d.ts +5 -0
  22. package/bleed/Bleed.d.ts +2 -2
  23. package/bleed/Bleed.js +14 -55
  24. package/bleed/Bleed.stories.tsx +94 -95
  25. package/bleed/types.d.ts +26 -2
  26. package/box/Box.js +34 -63
  27. package/box/Box.stories.tsx +15 -0
  28. package/box/Box.test.js +13 -0
  29. package/box/types.d.ts +5 -4
  30. package/bulleted-list/BulletedList.d.ts +7 -0
  31. package/bulleted-list/BulletedList.js +98 -0
  32. package/bulleted-list/BulletedList.stories.tsx +200 -0
  33. package/bulleted-list/types.d.ts +11 -0
  34. package/bulleted-list/types.js +5 -0
  35. package/button/Button.js +61 -100
  36. package/button/Button.stories.tsx +159 -8
  37. package/button/Button.test.js +26 -0
  38. package/button/types.d.ts +8 -8
  39. package/card/Card.js +44 -70
  40. package/card/Card.test.js +39 -0
  41. package/card/types.d.ts +4 -3
  42. package/checkbox/Checkbox.d.ts +2 -2
  43. package/checkbox/Checkbox.js +115 -162
  44. package/checkbox/Checkbox.stories.tsx +198 -130
  45. package/checkbox/Checkbox.test.js +128 -0
  46. package/checkbox/types.d.ts +14 -6
  47. package/chip/Chip.d.ts +1 -1
  48. package/chip/Chip.js +29 -91
  49. package/chip/Chip.stories.tsx +98 -13
  50. package/chip/Chip.test.js +42 -0
  51. package/chip/types.d.ts +8 -16
  52. package/common/utils.js +1 -6
  53. package/common/variables.d.ts +1431 -0
  54. package/common/variables.js +480 -554
  55. package/date-input/Calendar.d.ts +4 -0
  56. package/date-input/Calendar.js +215 -0
  57. package/date-input/DateInput.js +164 -300
  58. package/date-input/DateInput.stories.tsx +199 -33
  59. package/date-input/DateInput.test.js +648 -0
  60. package/date-input/DatePicker.d.ts +4 -0
  61. package/date-input/DatePicker.js +116 -0
  62. package/date-input/Icons.d.ts +6 -0
  63. package/date-input/Icons.js +63 -0
  64. package/date-input/YearPicker.d.ts +4 -0
  65. package/date-input/YearPicker.js +101 -0
  66. package/date-input/types.d.ts +71 -13
  67. package/dialog/Dialog.js +52 -84
  68. package/dialog/Dialog.stories.tsx +99 -22
  69. package/dialog/Dialog.test.js +56 -0
  70. package/dialog/types.d.ts +4 -3
  71. package/dropdown/Dropdown.d.ts +1 -1
  72. package/dropdown/Dropdown.js +240 -323
  73. package/dropdown/Dropdown.stories.tsx +255 -64
  74. package/dropdown/Dropdown.test.js +479 -0
  75. package/dropdown/DropdownMenu.d.ts +4 -0
  76. package/dropdown/DropdownMenu.js +60 -0
  77. package/dropdown/DropdownMenuItem.d.ts +4 -0
  78. package/dropdown/DropdownMenuItem.js +70 -0
  79. package/dropdown/types.d.ts +30 -19
  80. package/file-input/FileInput.d.ts +2 -2
  81. package/file-input/FileInput.js +224 -351
  82. package/file-input/FileInput.stories.tsx +122 -11
  83. package/file-input/FileInput.test.js +445 -0
  84. package/file-input/FileItem.d.ts +4 -14
  85. package/file-input/FileItem.js +48 -97
  86. package/file-input/types.d.ts +24 -7
  87. package/flex/Flex.d.ts +4 -0
  88. package/flex/Flex.js +57 -0
  89. package/flex/Flex.stories.tsx +103 -0
  90. package/flex/types.d.ts +32 -0
  91. package/flex/types.js +5 -0
  92. package/footer/Footer.js +36 -143
  93. package/footer/Footer.stories.tsx +99 -1
  94. package/footer/Footer.test.js +92 -0
  95. package/footer/Icons.js +1 -5
  96. package/footer/types.d.ts +7 -6
  97. package/header/Header.js +112 -177
  98. package/header/Header.stories.tsx +189 -36
  99. package/header/Header.test.js +66 -0
  100. package/header/Icons.js +2 -6
  101. package/header/types.d.ts +4 -3
  102. package/heading/Heading.js +8 -29
  103. package/heading/Heading.test.js +169 -0
  104. package/heading/types.d.ts +3 -3
  105. package/inset/Inset.js +14 -55
  106. package/inset/Inset.stories.tsx +36 -36
  107. package/inset/types.d.ts +26 -2
  108. package/layout/ApplicationLayout.d.ts +16 -6
  109. package/layout/ApplicationLayout.js +71 -164
  110. package/layout/ApplicationLayout.stories.tsx +84 -93
  111. package/layout/Icons.d.ts +5 -0
  112. package/layout/Icons.js +11 -10
  113. package/layout/SidenavContext.d.ts +5 -0
  114. package/layout/SidenavContext.js +15 -0
  115. package/layout/types.d.ts +18 -33
  116. package/link/Link.d.ts +3 -2
  117. package/link/Link.js +61 -106
  118. package/link/Link.stories.tsx +159 -52
  119. package/link/Link.test.js +65 -0
  120. package/link/types.d.ts +9 -29
  121. package/main.d.ts +11 -15
  122. package/main.js +48 -121
  123. package/nav-tabs/NavTabs.d.ts +8 -0
  124. package/nav-tabs/NavTabs.js +95 -0
  125. package/nav-tabs/NavTabs.stories.tsx +260 -0
  126. package/nav-tabs/NavTabs.test.js +75 -0
  127. package/nav-tabs/Tab.d.ts +4 -0
  128. package/nav-tabs/Tab.js +120 -0
  129. package/nav-tabs/types.d.ts +53 -0
  130. package/nav-tabs/types.js +5 -0
  131. package/number-input/NumberInput.js +21 -38
  132. package/number-input/NumberInput.stories.tsx +5 -5
  133. package/number-input/NumberInput.test.js +406 -0
  134. package/number-input/NumberInputContext.js +0 -5
  135. package/number-input/numberInputContextTypes.d.ts +1 -1
  136. package/number-input/types.d.ts +21 -14
  137. package/package.json +22 -25
  138. package/paginator/Icons.d.ts +5 -0
  139. package/paginator/Icons.js +16 -38
  140. package/paginator/Paginator.js +31 -82
  141. package/paginator/Paginator.stories.tsx +24 -0
  142. package/paginator/Paginator.test.js +266 -0
  143. package/paginator/types.d.ts +1 -1
  144. package/paragraph/Paragraph.d.ts +6 -0
  145. package/paragraph/Paragraph.js +28 -0
  146. package/paragraph/Paragraph.stories.tsx +44 -0
  147. package/password-input/PasswordInput.js +28 -54
  148. package/password-input/PasswordInput.test.js +138 -0
  149. package/password-input/types.d.ts +18 -15
  150. package/progress-bar/ProgressBar.d.ts +2 -2
  151. package/progress-bar/ProgressBar.js +65 -84
  152. package/progress-bar/ProgressBar.stories.jsx +47 -12
  153. package/progress-bar/ProgressBar.test.js +93 -0
  154. package/progress-bar/types.d.ts +3 -4
  155. package/quick-nav/QuickNav.d.ts +4 -0
  156. package/quick-nav/QuickNav.js +95 -0
  157. package/quick-nav/QuickNav.stories.tsx +356 -0
  158. package/quick-nav/types.d.ts +21 -0
  159. package/quick-nav/types.js +5 -0
  160. package/radio-group/Radio.d.ts +1 -1
  161. package/radio-group/Radio.js +61 -66
  162. package/radio-group/RadioGroup.js +99 -129
  163. package/radio-group/RadioGroup.stories.tsx +171 -36
  164. package/radio-group/RadioGroup.test.js +620 -0
  165. package/radio-group/types.d.ts +85 -7
  166. package/resultsetTable/Icons.d.ts +7 -0
  167. package/resultsetTable/Icons.js +48 -0
  168. package/resultsetTable/ResultsetTable.js +66 -157
  169. package/resultsetTable/ResultsetTable.stories.tsx +50 -25
  170. package/resultsetTable/ResultsetTable.test.js +292 -0
  171. package/resultsetTable/types.d.ts +5 -5
  172. package/select/Icons.d.ts +10 -0
  173. package/select/Icons.js +90 -0
  174. package/select/Listbox.d.ts +4 -0
  175. package/select/Listbox.js +144 -0
  176. package/select/Option.d.ts +4 -0
  177. package/select/Option.js +81 -0
  178. package/select/Select.js +201 -485
  179. package/select/Select.stories.tsx +600 -201
  180. package/select/Select.test.js +1845 -0
  181. package/select/types.d.ts +62 -22
  182. package/sidenav/Sidenav.d.ts +6 -5
  183. package/sidenav/Sidenav.js +164 -74
  184. package/sidenav/Sidenav.stories.tsx +249 -149
  185. package/sidenav/Sidenav.test.js +37 -0
  186. package/sidenav/types.d.ts +50 -27
  187. package/slider/Slider.d.ts +2 -2
  188. package/slider/Slider.js +143 -164
  189. package/slider/Slider.stories.tsx +72 -9
  190. package/slider/Slider.test.js +222 -0
  191. package/slider/types.d.ts +11 -3
  192. package/spinner/Spinner.js +12 -41
  193. package/spinner/Spinner.stories.jsx +27 -1
  194. package/spinner/Spinner.test.js +55 -0
  195. package/spinner/types.d.ts +3 -3
  196. package/switch/Switch.d.ts +2 -2
  197. package/switch/Switch.js +148 -107
  198. package/switch/Switch.stories.tsx +53 -42
  199. package/switch/Switch.test.js +180 -0
  200. package/switch/types.d.ts +13 -5
  201. package/table/Table.js +5 -23
  202. package/table/Table.stories.jsx +80 -1
  203. package/table/Table.test.js +21 -0
  204. package/table/types.d.ts +3 -3
  205. package/tabs/Tab.d.ts +4 -0
  206. package/tabs/Tab.js +115 -0
  207. package/tabs/Tabs.d.ts +1 -1
  208. package/tabs/Tabs.js +318 -139
  209. package/tabs/Tabs.stories.tsx +119 -13
  210. package/tabs/Tabs.test.js +295 -0
  211. package/tabs/types.d.ts +21 -7
  212. package/tag/Tag.d.ts +1 -1
  213. package/tag/Tag.js +36 -75
  214. package/tag/Tag.stories.tsx +37 -27
  215. package/tag/Tag.test.js +49 -0
  216. package/tag/types.d.ts +25 -16
  217. package/text-input/Icons.d.ts +8 -0
  218. package/text-input/Icons.js +57 -0
  219. package/text-input/Suggestion.d.ts +4 -0
  220. package/text-input/Suggestion.js +68 -0
  221. package/text-input/Suggestions.d.ts +4 -0
  222. package/text-input/Suggestions.js +109 -0
  223. package/text-input/TextInput.js +232 -438
  224. package/text-input/TextInput.stories.tsx +310 -197
  225. package/text-input/TextInput.test.js +1404 -0
  226. package/text-input/types.d.ts +55 -17
  227. package/textarea/Textarea.js +53 -96
  228. package/textarea/Textarea.stories.jsx +93 -13
  229. package/textarea/Textarea.test.js +360 -0
  230. package/textarea/types.d.ts +22 -15
  231. package/toggle-group/ToggleGroup.d.ts +1 -1
  232. package/toggle-group/ToggleGroup.js +23 -57
  233. package/toggle-group/ToggleGroup.stories.tsx +46 -4
  234. package/toggle-group/ToggleGroup.test.js +124 -0
  235. package/toggle-group/types.d.ts +19 -11
  236. package/translatedLabelsType.d.ts +82 -0
  237. package/translatedLabelsType.js +5 -0
  238. package/typography/Typography.d.ts +4 -0
  239. package/typography/Typography.js +119 -0
  240. package/typography/Typography.stories.tsx +198 -0
  241. package/typography/types.d.ts +18 -0
  242. package/typography/types.js +5 -0
  243. package/useTheme.d.ts +1 -1
  244. package/useTheme.js +3 -9
  245. package/useTranslatedLabels.d.ts +3 -0
  246. package/useTranslatedLabels.js +15 -0
  247. package/wizard/Wizard.d.ts +1 -1
  248. package/wizard/Wizard.js +68 -98
  249. package/wizard/Wizard.stories.tsx +48 -19
  250. package/wizard/Wizard.test.js +114 -0
  251. package/wizard/types.d.ts +12 -7
  252. package/ThemeContext.d.ts +0 -15
  253. package/ThemeContext.js +0 -243
  254. package/V3Select/V3Select.js +0 -455
  255. package/V3Select/index.d.ts +0 -27
  256. package/V3Textarea/V3Textarea.js +0 -260
  257. package/V3Textarea/index.d.ts +0 -27
  258. package/common/RequiredComponent.js +0 -32
  259. package/date/Date.js +0 -373
  260. package/date/index.d.ts +0 -27
  261. package/input-text/Icons.js +0 -22
  262. package/input-text/InputText.js +0 -611
  263. package/input-text/index.d.ts +0 -36
  264. package/list/List.d.ts +0 -8
  265. package/list/List.js +0 -47
  266. package/list/List.stories.tsx +0 -95
  267. package/radio/Radio.d.ts +0 -4
  268. package/radio/Radio.js +0 -174
  269. package/radio/Radio.stories.tsx +0 -192
  270. package/radio/types.d.ts +0 -54
  271. package/row/Row.d.ts +0 -11
  272. package/row/Row.js +0 -127
  273. package/row/Row.stories.tsx +0 -239
  274. package/stack/Stack.d.ts +0 -10
  275. package/stack/Stack.js +0 -97
  276. package/stack/Stack.stories.tsx +0 -166
  277. package/text/Text.d.ts +0 -7
  278. package/text/Text.js +0 -30
  279. package/text/Text.stories.tsx +0 -19
  280. package/toggle/Toggle.js +0 -186
  281. package/toggle/index.d.ts +0 -21
  282. package/upload/Upload.js +0 -201
  283. package/upload/buttons-upload/ButtonsUpload.js +0 -111
  284. package/upload/buttons-upload/Icons.js +0 -40
  285. package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
  286. package/upload/dragAndDropArea/Icons.js +0 -39
  287. package/upload/file-upload/FileToUpload.js +0 -115
  288. package/upload/file-upload/Icons.js +0 -66
  289. package/upload/files-upload/FilesToUpload.js +0 -109
  290. package/upload/index.d.ts +0 -15
  291. package/upload/transaction/Icons.js +0 -160
  292. package/upload/transaction/Transaction.js +0 -104
  293. package/upload/transactions/Transactions.js +0 -94
  294. /package/{radio → badge}/types.js +0 -0
package/row/Row.js DELETED
@@ -1,127 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = Row;
9
-
10
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
-
12
- var _react = _interopRequireDefault(require("react"));
13
-
14
- var _styledComponents = _interopRequireDefault(require("styled-components"));
15
-
16
- var _templateObject;
17
-
18
- function Row(_ref) {
19
- var _ref$gutter = _ref.gutter,
20
- gutter = _ref$gutter === void 0 ? "none" : _ref$gutter,
21
- align = _ref.align,
22
- justify = _ref.justify,
23
- _ref$wrap = _ref.wrap,
24
- wrap = _ref$wrap === void 0 ? true : _ref$wrap,
25
- _ref$reverse = _ref.reverse,
26
- reverse = _ref$reverse === void 0 ? false : _ref$reverse,
27
- children = _ref.children;
28
- return /*#__PURE__*/_react["default"].createElement(StyledRow, {
29
- gutter: gutter,
30
- align: align,
31
- justify: justify,
32
- wrap: wrap,
33
- reverse: reverse
34
- }, children);
35
- }
36
-
37
- var StyledRow = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: ", ";\n flex-wrap: ", ";\n align-items: ", ";\n justify-content: ", ";\n gap: ", ";\n"])), function (_ref2) {
38
- var reverse = _ref2.reverse;
39
- return reverse ? "row-reverse" : "row";
40
- }, function (_ref3) {
41
- var wrap = _ref3.wrap;
42
- return wrap ? "wrap" : "nowrap";
43
- }, function (_ref4) {
44
- var align = _ref4.align;
45
-
46
- switch (align) {
47
- case "start":
48
- return "flex-start";
49
-
50
- case "center":
51
- return "center";
52
-
53
- case "end":
54
- return "flex-end";
55
-
56
- case "baseline":
57
- return "baseline";
58
-
59
- case "stretch":
60
- return "stretch";
61
-
62
- default:
63
- return "initial";
64
- }
65
- }, function (_ref5) {
66
- var justify = _ref5.justify;
67
-
68
- switch (justify) {
69
- case "spaceBetween":
70
- return "space-between";
71
-
72
- case "spaceAround":
73
- return "space-around";
74
-
75
- case "spaceEvenly":
76
- return "space-evenly";
77
-
78
- case "start":
79
- return "flex-start";
80
-
81
- case "center":
82
- return "center";
83
-
84
- case "end":
85
- return "flex-end";
86
-
87
- default:
88
- return "initial";
89
- }
90
- }, function (_ref6) {
91
- var gutter = _ref6.gutter;
92
-
93
- switch (gutter) {
94
- case "none":
95
- return "0";
96
-
97
- case "xxxsmall":
98
- return "0.125rem";
99
-
100
- case "xxsmall":
101
- return "0.25rem";
102
-
103
- case "xsmall":
104
- return "0.5rem";
105
-
106
- case "small":
107
- return "1rem";
108
-
109
- case "medium":
110
- return "1.5rem";
111
-
112
- case "large":
113
- return "2rem";
114
-
115
- case "xlarge":
116
- return "3rem";
117
-
118
- case "xxlarge":
119
- return "4rem";
120
-
121
- case "xxxlarge":
122
- return "5rem";
123
-
124
- default:
125
- return "0";
126
- }
127
- });
package/row/Row.stories.tsx DELETED
@@ -1,239 +0,0 @@
1
- import React from "react";
2
- import Title from "../../.storybook/components/Title";
3
- import styled from "styled-components";
4
- import DxcRow from "./Row";
5
-
6
- export default {
7
- title: "Row",
8
- component: DxcRow,
9
- };
10
-
11
- export const Chromatic = () => (
12
- <>
13
- <Title title="Default" theme="light" level={4} />
14
- <Container>
15
- <DxcRow>
16
- <Placeholder></Placeholder>
17
- <Placeholder></Placeholder>
18
- <Placeholder></Placeholder>
19
- </DxcRow>
20
- </Container>
21
- <Title title="Justify = center" theme="light" level={4} />
22
- <Container>
23
- <DxcRow justify="center">
24
- <Placeholder></Placeholder>
25
- <Placeholder></Placeholder>
26
- <Placeholder></Placeholder>
27
- </DxcRow>
28
- </Container>
29
- <Title title="Justify = end" theme="light" level={4} />
30
- <Container>
31
- <DxcRow justify="end">
32
- <Placeholder></Placeholder>
33
- <Placeholder></Placeholder>
34
- <Placeholder></Placeholder>
35
- </DxcRow>
36
- </Container>
37
- <Title title="Justify = spaceAround" theme="light" level={4} />
38
- <Container>
39
- <DxcRow justify="spaceAround">
40
- <Placeholder></Placeholder>
41
- <Placeholder></Placeholder>
42
- <Placeholder></Placeholder>
43
- </DxcRow>
44
- </Container>
45
- <Title title="Justify = spaceBetween" theme="light" level={4} />
46
- <Container>
47
- <DxcRow justify="spaceBetween">
48
- <Placeholder></Placeholder>
49
- <Placeholder></Placeholder>
50
- <Placeholder></Placeholder>
51
- </DxcRow>
52
- </Container>
53
- <Title title="Justify = spaceEvenly" theme="light" level={4} />
54
- <Container>
55
- <DxcRow justify="spaceEvenly">
56
- <Placeholder></Placeholder>
57
- <Placeholder></Placeholder>
58
- <Placeholder></Placeholder>
59
- </DxcRow>
60
- </Container>
61
- <Title title="Justify = start" theme="light" level={4} />
62
- <Container>
63
- <DxcRow justify="start">
64
- <Placeholder></Placeholder>
65
- <Placeholder></Placeholder>
66
- <Placeholder></Placeholder>
67
- </DxcRow>
68
- </Container>
69
- <Title title="Align = baseline" theme="light" level={4} />
70
- <Container>
71
- <DxcRow align="baseline">
72
- <Placeholder paddingTop={20}>test</Placeholder>
73
- <Placeholder>test</Placeholder>
74
- <Placeholder paddingBottom={60}>test</Placeholder>
75
- </DxcRow>
76
- </Container>
77
- <Title title="Align = center" theme="light" level={4} />
78
- <Container>
79
- <DxcRow align="center">
80
- <Placeholder paddingTop={20}></Placeholder>
81
- <Placeholder></Placeholder>
82
- <Placeholder paddingTop={60}></Placeholder>
83
- </DxcRow>
84
- </Container>
85
- <Title title="Align = end" theme="light" level={4} />
86
- <Container>
87
- <DxcRow align="end">
88
- <Placeholder paddingTop={20}></Placeholder>
89
- <Placeholder></Placeholder>
90
- <Placeholder paddingTop={60}></Placeholder>
91
- </DxcRow>
92
- </Container>
93
- <Title title="Align = start" theme="light" level={4} />
94
- <Container>
95
- <DxcRow align="start">
96
- <Placeholder paddingTop={20}></Placeholder>
97
- <Placeholder></Placeholder>
98
- <Placeholder paddingTop={60}></Placeholder>
99
- </DxcRow>
100
- </Container>
101
- <Title title="Align = stretch" theme="light" level={4} />
102
- <Container>
103
- <DxcRow align="stretch">
104
- <Placeholder paddingTop={20}></Placeholder>
105
- <Placeholder></Placeholder>
106
- <Placeholder paddingTop={60}></Placeholder>
107
- </DxcRow>
108
- </Container>
109
- <Title title="gutter = xxxsmall" theme="light" level={4} />
110
- <Container>
111
- <DxcRow gutter="xxxsmall">
112
- <Placeholder></Placeholder>
113
- <Placeholder></Placeholder>
114
- <Placeholder></Placeholder>
115
- </DxcRow>
116
- </Container>
117
- <Title title="gutter = xxsmall" theme="light" level={4} />
118
- <Container>
119
- <DxcRow gutter="xxsmall">
120
- <Placeholder></Placeholder>
121
- <Placeholder></Placeholder>
122
- <Placeholder></Placeholder>
123
- </DxcRow>
124
- </Container>
125
- <Title title="gutter = xsmall" theme="light" level={4} />
126
- <Container>
127
- <DxcRow gutter="xsmall">
128
- <Placeholder></Placeholder>
129
- <Placeholder></Placeholder>
130
- <Placeholder></Placeholder>
131
- </DxcRow>
132
- </Container>
133
- <Title title="gutter = small" theme="light" level={4} />
134
- <Container>
135
- <DxcRow gutter="small">
136
- <Placeholder></Placeholder>
137
- <Placeholder></Placeholder>
138
- <Placeholder></Placeholder>
139
- </DxcRow>
140
- </Container>
141
- <Title title="gutter = medium" theme="light" level={4} />
142
- <Container>
143
- <DxcRow gutter="medium">
144
- <Placeholder></Placeholder>
145
- <Placeholder></Placeholder>
146
- <Placeholder></Placeholder>
147
- </DxcRow>
148
- </Container>
149
- <Title title="gutter = large" theme="light" level={4} />
150
- <Container>
151
- <DxcRow gutter="large">
152
- <Placeholder></Placeholder>
153
- <Placeholder></Placeholder>
154
- <Placeholder></Placeholder>
155
- </DxcRow>
156
- </Container>
157
- <Title title="gutter = xlarge" theme="light" level={4} />
158
- <Container>
159
- <DxcRow gutter="xlarge">
160
- <Placeholder></Placeholder>
161
- <Placeholder></Placeholder>
162
- <Placeholder></Placeholder>
163
- </DxcRow>
164
- </Container>
165
- <Title title="gutter = xxlarge" theme="light" level={4} />
166
- <Container>
167
- <DxcRow gutter="xxlarge">
168
- <Placeholder></Placeholder>
169
- <Placeholder></Placeholder>
170
- <Placeholder></Placeholder>
171
- </DxcRow>
172
- </Container>
173
- <Title title="gutter = xxxlarge" theme="light" level={4} />
174
- <Container>
175
- <DxcRow gutter="xxxlarge">
176
- <Placeholder></Placeholder>
177
- <Placeholder></Placeholder>
178
- <Placeholder></Placeholder>
179
- </DxcRow>
180
- </Container>
181
- <Title title="gutter = none" theme="light" level={4} />
182
- <Container>
183
- <DxcRow gutter="none">
184
- <Placeholder></Placeholder>
185
- <Placeholder></Placeholder>
186
- <Placeholder></Placeholder>
187
- </DxcRow>
188
- </Container>
189
- <Title title="reverse = false" theme="light" level={4} />
190
- <Container>
191
- <DxcRow reverse={false}>
192
- <Placeholder>1</Placeholder>
193
- <Placeholder>2</Placeholder>
194
- <Placeholder>3</Placeholder>
195
- </DxcRow>
196
- </Container>
197
- <Title title="reverse = true" theme="light" level={4} />
198
- <Container>
199
- <DxcRow reverse={true}>
200
- <Placeholder>1</Placeholder>
201
- <Placeholder>2</Placeholder>
202
- <Placeholder>3</Placeholder>
203
- </DxcRow>
204
- </Container>
205
- <Title title="wrap = true" theme="light" level={4} />
206
- <Container width={300}>
207
- <DxcRow wrap={true}>
208
- <Placeholder>1</Placeholder>
209
- <Placeholder>2</Placeholder>
210
- <Placeholder>3</Placeholder>
211
- </DxcRow>
212
- </Container>
213
- <Title title="wrap = false" theme="light" level={4} />
214
- <Container width={300}>
215
- <DxcRow wrap={false}>
216
- <Placeholder>1</Placeholder>
217
- <Placeholder>2</Placeholder>
218
- <Placeholder>3</Placeholder>
219
- </DxcRow>
220
- </Container>
221
- </>
222
- );
223
-
224
- const Container = styled.div`
225
- background: #d0d0d0;
226
- padding: 10px;
227
- border-radius: 10px;
228
- width: ${({ width }) => (width ? `${width}px` : "unset")};
229
- `;
230
-
231
- const Placeholder = styled.div`
232
- min-height: 80px;
233
- min-width: 120px;
234
- border: 1px solid #fabada;
235
- background-color: #fff7fb;
236
- border-radius: 5px;
237
- padding-top: ${({ paddingTop }) => `${paddingTop ?? 0}px`};
238
- padding-bottom: ${({ paddingBottom }) => `${paddingBottom ?? 0}px`};
239
- `;
package/stack/Stack.d.ts DELETED
@@ -1,10 +0,0 @@
1
- import React from "react";
2
- declare type StackProps = {
3
- gutter?: "none" | "xxxsmall" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge";
4
- divider?: boolean;
5
- align?: "start" | "center" | "end" | "baseline" | "stretch";
6
- as?: React.ElementType;
7
- children: React.ReactNode;
8
- };
9
- export default function Stack({ gutter, divider, align, as, children }: StackProps): JSX.Element;
10
- export {};
package/stack/Stack.js DELETED
@@ -1,97 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = Stack;
9
-
10
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
-
12
- var _react = _interopRequireDefault(require("react"));
13
-
14
- var _styledComponents = _interopRequireDefault(require("styled-components"));
15
-
16
- var _templateObject, _templateObject2;
17
-
18
- function Stack(_ref) {
19
- var gutter = _ref.gutter,
20
- divider = _ref.divider,
21
- align = _ref.align,
22
- _ref$as = _ref.as,
23
- as = _ref$as === void 0 ? "div" : _ref$as,
24
- children = _ref.children;
25
- return /*#__PURE__*/_react["default"].createElement(StyledStack, {
26
- gutter: gutter,
27
- divider: divider,
28
- align: align,
29
- as: as
30
- }, _react["default"].Children.map(children, function (child, index) {
31
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, child, divider && index !== _react["default"].Children.count(children) - 1 && /*#__PURE__*/_react["default"].createElement(Divider, null));
32
- }));
33
- }
34
-
35
- var Divider = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n height: 1px;\n background-color: #999999;\n"])));
36
-
37
- var StyledStack = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n align-items: ", ";\n gap: ", ";\n margin: 0;\n padding: 0;\n"])), function (_ref2) {
38
- var align = _ref2.align;
39
-
40
- switch (align) {
41
- case "start":
42
- return "flex-start";
43
-
44
- case "center":
45
- return "center";
46
-
47
- case "end":
48
- return "flex-end";
49
-
50
- case "baseline":
51
- return "baseline";
52
-
53
- case "stretch":
54
- return "stretch";
55
-
56
- default:
57
- return "initial";
58
- }
59
- }, function (_ref3) {
60
- var gutter = _ref3.gutter,
61
- divider = _ref3.divider;
62
-
63
- switch (gutter) {
64
- case "none":
65
- return "0";
66
-
67
- case "xxxsmall":
68
- return "calc(0.125rem / ".concat(divider ? 2 : 1, ")");
69
-
70
- case "xxsmall":
71
- return "calc(0.25rem / ".concat(divider ? 2 : 1, ")");
72
-
73
- case "xsmall":
74
- return "calc(0.5rem / ".concat(divider ? 2 : 1, ")");
75
-
76
- case "small":
77
- return "calc(1rem / ".concat(divider ? 2 : 1, ")");
78
-
79
- case "medium":
80
- return "calc(1.5rem / ".concat(divider ? 2 : 1, ")");
81
-
82
- case "large":
83
- return "calc(2rem / ".concat(divider ? 2 : 1, ")");
84
-
85
- case "xlarge":
86
- return "calc(3rem / ".concat(divider ? 2 : 1, ")");
87
-
88
- case "xxlarge":
89
- return "calc(4rem / ".concat(divider ? 2 : 1, ")");
90
-
91
- case "xxxlarge":
92
- return "calc(5rem / ".concat(divider ? 2 : 1, ")");
93
-
94
- default:
95
- return "0";
96
- }
97
- });
package/stack/Stack.stories.tsx DELETED
@@ -1,166 +0,0 @@
1
- import React from "react";
2
- import Title from "../../.storybook/components/Title";
3
- import styled from "styled-components";
4
- import DxcStack from "./Stack";
5
-
6
- export default {
7
- title: "Stack",
8
- component: DxcStack,
9
- };
10
-
11
- export const Chromatic = () => (
12
- <>
13
- <Title title="Default" theme="light" level={4} />
14
- <Container>
15
- <DxcStack>
16
- <Placeholder></Placeholder>
17
- <Placeholder></Placeholder>
18
- <Placeholder></Placeholder>
19
- </DxcStack>
20
- </Container>
21
- <Title title="Align = baseline" theme="light" level={4} />
22
- <Container>
23
- <DxcStack align="baseline">
24
- <Placeholder paddingLeft={20}></Placeholder>
25
- <Placeholder></Placeholder>
26
- <Placeholder paddingRight={60}></Placeholder>
27
- </DxcStack>
28
- </Container>
29
- <Title title="Align = center" theme="light" level={4} />
30
- <Container>
31
- <DxcStack align="center">
32
- <Placeholder paddingLeft={20}></Placeholder>
33
- <Placeholder></Placeholder>
34
- <Placeholder paddingLeft={60}></Placeholder>
35
- </DxcStack>
36
- </Container>
37
- <Title title="Align = end" theme="light" level={4} />
38
- <Container>
39
- <DxcStack align="end">
40
- <Placeholder paddingLeft={20}></Placeholder>
41
- <Placeholder></Placeholder>
42
- <Placeholder paddingLeft={60}></Placeholder>
43
- </DxcStack>
44
- </Container>
45
- <Title title="Align = start" theme="light" level={4} />
46
- <Container>
47
- <DxcStack align="start">
48
- <Placeholder paddingLeft={20}></Placeholder>
49
- <Placeholder></Placeholder>
50
- <Placeholder paddingLeft={60}></Placeholder>
51
- </DxcStack>
52
- </Container>
53
- <Title title="Align = stretch" theme="light" level={4} />
54
- <Container>
55
- <DxcStack align="stretch">
56
- <Placeholder paddingLeft={20}></Placeholder>
57
- <Placeholder></Placeholder>
58
- <Placeholder paddingLeft={60}></Placeholder>
59
- </DxcStack>
60
- </Container>
61
- <Title title="gutter = xxxsmall" theme="light" level={4} />
62
- <Container>
63
- <DxcStack gutter="xxxsmall">
64
- <Placeholder></Placeholder>
65
- <Placeholder></Placeholder>
66
- <Placeholder></Placeholder>
67
- </DxcStack>
68
- </Container>
69
- <Title title="gutter = xxsmall" theme="light" level={4} />
70
- <Container>
71
- <DxcStack gutter="xxsmall">
72
- <Placeholder></Placeholder>
73
- <Placeholder></Placeholder>
74
- <Placeholder></Placeholder>
75
- </DxcStack>
76
- </Container>
77
- <Title title="gutter = xsmall" theme="light" level={4} />
78
- <Container>
79
- <DxcStack gutter="xsmall">
80
- <Placeholder></Placeholder>
81
- <Placeholder></Placeholder>
82
- <Placeholder></Placeholder>
83
- </DxcStack>
84
- </Container>
85
- <Title title="gutter = small" theme="light" level={4} />
86
- <Container>
87
- <DxcStack gutter="small">
88
- <Placeholder></Placeholder>
89
- <Placeholder></Placeholder>
90
- <Placeholder></Placeholder>
91
- </DxcStack>
92
- </Container>
93
- <Title title="gutter = medium" theme="light" level={4} />
94
- <Container>
95
- <DxcStack gutter="medium">
96
- <Placeholder></Placeholder>
97
- <Placeholder></Placeholder>
98
- <Placeholder></Placeholder>
99
- </DxcStack>
100
- </Container>
101
- <Title title="gutter = large" theme="light" level={4} />
102
- <Container>
103
- <DxcStack gutter="large">
104
- <Placeholder></Placeholder>
105
- <Placeholder></Placeholder>
106
- <Placeholder></Placeholder>
107
- </DxcStack>
108
- </Container>
109
- <Title title="gutter = xlarge" theme="light" level={4} />
110
- <Container>
111
- <DxcStack gutter="xlarge">
112
- <Placeholder></Placeholder>
113
- <Placeholder></Placeholder>
114
- <Placeholder></Placeholder>
115
- </DxcStack>
116
- </Container>
117
- <Title title="gutter = xxlarge" theme="light" level={4} />
118
- <Container>
119
- <DxcStack gutter="xxlarge">
120
- <Placeholder></Placeholder>
121
- <Placeholder></Placeholder>
122
- <Placeholder></Placeholder>
123
- </DxcStack>
124
- </Container>
125
- <Title title="gutter = xxxlarge" theme="light" level={4} />
126
- <Container>
127
- <DxcStack gutter="xxxlarge">
128
- <Placeholder></Placeholder>
129
- <Placeholder></Placeholder>
130
- <Placeholder></Placeholder>
131
- </DxcStack>
132
- </Container>
133
- <Title title="gutter = xxlarge && divider" theme="light" level={4} />
134
- <Container>
135
- <DxcStack gutter="xxlarge" divider>
136
- <Placeholder></Placeholder>
137
- <Placeholder></Placeholder>
138
- <Placeholder></Placeholder>
139
- </DxcStack>
140
- </Container>
141
- <Title title="gutter = none" theme="light" level={4} />
142
- <Container>
143
- <DxcStack gutter="none">
144
- <Placeholder></Placeholder>
145
- <Placeholder></Placeholder>
146
- <Placeholder></Placeholder>
147
- </DxcStack>
148
- </Container>
149
- </>
150
- );
151
-
152
- const Container = styled.div`
153
- background: #d0d0d0;
154
- padding: 10px;
155
- border-radius: 10px;
156
- `;
157
-
158
- const Placeholder = styled.div`
159
- min-height: 80px;
160
- min-width: 120px;
161
- border: 1px solid #fabada;
162
- background-color: #fff7fb;
163
- border-radius: 5px;
164
- padding-left: ${({ paddingLeft }) => `${paddingLeft ?? 0}px`};
165
- padding-right: ${({ paddingRight }) => `${paddingRight ?? 0}px`};
166
- `;
package/text/Text.d.ts DELETED
@@ -1,7 +0,0 @@
1
- import React from "react";
2
- declare type TextProps = {
3
- as?: "p" | "span";
4
- children: React.ReactNode;
5
- };
6
- declare function Text({ as, children }: TextProps): JSX.Element;
7
- export default Text;
package/text/Text.js DELETED
@@ -1,30 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = void 0;
9
-
10
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
-
12
- var _react = _interopRequireDefault(require("react"));
13
-
14
- var _styledComponents = _interopRequireDefault(require("styled-components"));
15
-
16
- var _templateObject;
17
-
18
- function Text(_ref) {
19
- var _ref$as = _ref.as,
20
- as = _ref$as === void 0 ? "span" : _ref$as,
21
- children = _ref.children;
22
- return /*#__PURE__*/_react["default"].createElement(StyledText, {
23
- as: as
24
- }, children);
25
- }
26
-
27
- var StyledText = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n margin: 0px;\n font-family: Open Sans, sans-serif;\n"])));
28
-
29
- var _default = Text;
30
- exports["default"] = _default;