@dxc-technology/halstack-react 0.0.0-2c3a5e1 → 0.0.0-2d5bb6f

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