@dxc-technology/halstack-react 0.0.0-4448bdb → 0.0.0-453c87a

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 (278) hide show
  1. package/HalstackContext.d.ts +12 -0
  2. package/HalstackContext.js +294 -0
  3. package/accordion/Accordion.d.ts +1 -1
  4. package/accordion/Accordion.js +117 -136
  5. package/accordion/Accordion.stories.tsx +65 -26
  6. package/accordion/Accordion.test.js +71 -0
  7. package/accordion/types.d.ts +11 -10
  8. package/accordion-group/AccordionGroup.d.ts +1 -1
  9. package/accordion-group/AccordionGroup.js +15 -36
  10. package/accordion-group/AccordionGroup.stories.tsx +28 -2
  11. package/accordion-group/AccordionGroup.test.js +126 -0
  12. package/accordion-group/types.d.ts +16 -9
  13. package/alert/Alert.js +5 -2
  14. package/alert/Alert.test.js +92 -0
  15. package/badge/Badge.d.ts +4 -0
  16. package/badge/Badge.js +5 -3
  17. package/badge/types.d.ts +5 -0
  18. package/{radio → badge}/types.js +0 -0
  19. package/bleed/Bleed.d.ts +3 -0
  20. package/bleed/Bleed.js +51 -0
  21. package/bleed/Bleed.stories.tsx +341 -0
  22. package/bleed/types.d.ts +37 -0
  23. package/bleed/types.js +5 -0
  24. package/box/Box.js +23 -33
  25. package/box/Box.test.js +18 -0
  26. package/box/types.d.ts +1 -0
  27. package/bulleted-list/BulletedList.d.ts +7 -0
  28. package/bulleted-list/BulletedList.js +123 -0
  29. package/bulleted-list/BulletedList.stories.tsx +200 -0
  30. package/bulleted-list/types.d.ts +11 -0
  31. package/bulleted-list/types.js +5 -0
  32. package/button/Button.d.ts +1 -1
  33. package/button/Button.js +54 -79
  34. package/button/Button.stories.tsx +66 -8
  35. package/button/Button.test.js +35 -0
  36. package/button/types.d.ts +8 -12
  37. package/card/Card.js +24 -27
  38. package/card/Card.test.js +50 -0
  39. package/card/types.d.ts +1 -0
  40. package/checkbox/Checkbox.d.ts +2 -2
  41. package/checkbox/Checkbox.js +106 -109
  42. package/checkbox/Checkbox.stories.tsx +146 -130
  43. package/checkbox/Checkbox.test.js +155 -0
  44. package/checkbox/types.d.ts +13 -5
  45. package/chip/Chip.d.ts +1 -1
  46. package/chip/Chip.js +17 -67
  47. package/chip/Chip.stories.tsx +44 -14
  48. package/chip/Chip.test.js +56 -0
  49. package/chip/types.d.ts +5 -13
  50. package/common/variables.js +346 -446
  51. package/date-input/Calendar.d.ts +4 -0
  52. package/date-input/Calendar.js +246 -0
  53. package/date-input/DateInput.js +171 -260
  54. package/date-input/DateInput.stories.tsx +137 -38
  55. package/date-input/DateInput.test.js +835 -0
  56. package/date-input/DatePicker.d.ts +4 -0
  57. package/date-input/DatePicker.js +132 -0
  58. package/date-input/Icons.d.ts +6 -0
  59. package/date-input/Icons.js +75 -0
  60. package/date-input/YearPicker.d.ts +4 -0
  61. package/date-input/YearPicker.js +116 -0
  62. package/date-input/types.d.ts +67 -9
  63. package/dialog/Dialog.js +46 -50
  64. package/dialog/Dialog.stories.tsx +57 -2
  65. package/dialog/Dialog.test.js +70 -0
  66. package/dialog/types.d.ts +3 -2
  67. package/dropdown/Dropdown.d.ts +1 -1
  68. package/dropdown/Dropdown.js +249 -277
  69. package/dropdown/Dropdown.stories.tsx +153 -80
  70. package/dropdown/Dropdown.test.js +585 -0
  71. package/dropdown/DropdownMenu.d.ts +4 -0
  72. package/dropdown/DropdownMenu.js +80 -0
  73. package/dropdown/DropdownMenuItem.d.ts +4 -0
  74. package/dropdown/DropdownMenuItem.js +92 -0
  75. package/dropdown/types.d.ts +29 -18
  76. package/file-input/FileInput.d.ts +2 -2
  77. package/file-input/FileInput.js +183 -222
  78. package/file-input/FileInput.stories.tsx +38 -10
  79. package/file-input/FileInput.test.js +498 -0
  80. package/file-input/FileItem.d.ts +4 -14
  81. package/file-input/FileItem.js +43 -66
  82. package/file-input/types.d.ts +17 -0
  83. package/flex/Flex.d.ts +4 -0
  84. package/flex/Flex.js +69 -0
  85. package/flex/Flex.stories.tsx +103 -0
  86. package/flex/types.d.ts +32 -0
  87. package/flex/types.js +5 -0
  88. package/footer/Footer.js +24 -99
  89. package/footer/Footer.stories.tsx +8 -1
  90. package/footer/Footer.test.js +109 -0
  91. package/footer/Icons.js +1 -1
  92. package/footer/types.d.ts +2 -1
  93. package/header/Header.js +95 -114
  94. package/header/Header.stories.tsx +46 -36
  95. package/header/Header.test.js +79 -0
  96. package/header/Icons.js +2 -2
  97. package/header/types.d.ts +3 -2
  98. package/heading/Heading.test.js +186 -0
  99. package/inset/Inset.d.ts +3 -0
  100. package/inset/Inset.js +51 -0
  101. package/inset/Inset.stories.tsx +229 -0
  102. package/inset/types.d.ts +37 -0
  103. package/inset/types.js +5 -0
  104. package/layout/ApplicationLayout.d.ts +16 -6
  105. package/layout/ApplicationLayout.js +71 -125
  106. package/layout/ApplicationLayout.stories.tsx +84 -93
  107. package/layout/Icons.d.ts +5 -0
  108. package/layout/Icons.js +13 -2
  109. package/layout/SidenavContext.d.ts +5 -0
  110. package/layout/SidenavContext.js +19 -0
  111. package/layout/types.d.ts +18 -33
  112. package/link/Link.d.ts +3 -2
  113. package/link/Link.js +61 -86
  114. package/link/Link.stories.tsx +99 -52
  115. package/link/Link.test.js +83 -0
  116. package/link/types.d.ts +9 -29
  117. package/main.d.ts +11 -15
  118. package/main.js +53 -79
  119. package/number-input/NumberInput.js +11 -18
  120. package/number-input/NumberInput.stories.tsx +5 -5
  121. package/number-input/NumberInput.test.js +542 -0
  122. package/number-input/types.d.ts +17 -10
  123. package/package.json +19 -22
  124. package/paginator/Icons.d.ts +5 -0
  125. package/paginator/Icons.js +16 -28
  126. package/paginator/Paginator.js +19 -46
  127. package/paginator/Paginator.test.js +308 -0
  128. package/paragraph/Paragraph.d.ts +6 -0
  129. package/paragraph/Paragraph.js +38 -0
  130. package/paragraph/Paragraph.stories.tsx +44 -0
  131. package/password-input/PasswordInput.js +7 -4
  132. package/password-input/PasswordInput.test.js +181 -0
  133. package/password-input/types.d.ts +14 -11
  134. package/progress-bar/ProgressBar.d.ts +2 -2
  135. package/progress-bar/ProgressBar.js +57 -51
  136. package/progress-bar/ProgressBar.stories.jsx +13 -11
  137. package/progress-bar/ProgressBar.test.js +110 -0
  138. package/progress-bar/types.d.ts +3 -4
  139. package/quick-nav/QuickNav.d.ts +4 -0
  140. package/quick-nav/QuickNav.js +117 -0
  141. package/quick-nav/QuickNav.stories.tsx +342 -0
  142. package/quick-nav/types.d.ts +21 -0
  143. package/quick-nav/types.js +5 -0
  144. package/radio-group/Radio.d.ts +1 -1
  145. package/radio-group/Radio.js +57 -31
  146. package/radio-group/RadioGroup.js +75 -60
  147. package/radio-group/RadioGroup.stories.tsx +61 -39
  148. package/radio-group/RadioGroup.test.js +722 -0
  149. package/radio-group/types.d.ts +81 -3
  150. package/resultsetTable/Icons.d.ts +7 -0
  151. package/resultsetTable/Icons.js +51 -0
  152. package/resultsetTable/ResultsetTable.js +49 -105
  153. package/resultsetTable/ResultsetTable.stories.tsx +56 -33
  154. package/resultsetTable/ResultsetTable.test.js +330 -0
  155. package/resultsetTable/types.d.ts +2 -2
  156. package/select/Icons.d.ts +10 -0
  157. package/select/Icons.js +93 -0
  158. package/select/Listbox.d.ts +4 -0
  159. package/select/Listbox.js +198 -0
  160. package/select/Option.d.ts +4 -0
  161. package/select/Option.js +108 -0
  162. package/select/Select.js +147 -365
  163. package/select/Select.stories.tsx +324 -213
  164. package/select/Select.test.js +2233 -0
  165. package/select/types.d.ts +52 -12
  166. package/sidenav/Sidenav.d.ts +6 -5
  167. package/sidenav/Sidenav.js +182 -52
  168. package/sidenav/Sidenav.stories.tsx +163 -156
  169. package/sidenav/Sidenav.test.js +44 -0
  170. package/sidenav/types.d.ts +50 -27
  171. package/slider/Slider.d.ts +2 -2
  172. package/slider/Slider.js +122 -96
  173. package/slider/Slider.stories.tsx +15 -9
  174. package/slider/Slider.test.js +250 -0
  175. package/slider/types.d.ts +10 -2
  176. package/spinner/Spinner.js +3 -3
  177. package/spinner/Spinner.test.js +64 -0
  178. package/switch/Switch.d.ts +2 -2
  179. package/switch/Switch.js +150 -67
  180. package/switch/Switch.stories.tsx +20 -42
  181. package/switch/Switch.test.js +225 -0
  182. package/switch/types.d.ts +12 -4
  183. package/table/Table.js +1 -1
  184. package/table/Table.test.js +26 -0
  185. package/tabs/Tab.d.ts +4 -0
  186. package/tabs/Tab.js +133 -0
  187. package/tabs/Tabs.d.ts +1 -1
  188. package/tabs/Tabs.js +364 -110
  189. package/tabs/Tabs.stories.tsx +84 -18
  190. package/tabs/Tabs.test.js +351 -0
  191. package/tabs/types.d.ts +39 -17
  192. package/tabs-nav/NavTabs.d.ts +8 -0
  193. package/tabs-nav/NavTabs.js +125 -0
  194. package/tabs-nav/NavTabs.stories.tsx +172 -0
  195. package/tabs-nav/NavTabs.test.js +82 -0
  196. package/tabs-nav/Tab.d.ts +4 -0
  197. package/tabs-nav/Tab.js +128 -0
  198. package/tabs-nav/types.d.ts +53 -0
  199. package/tabs-nav/types.js +5 -0
  200. package/tag/Tag.d.ts +1 -1
  201. package/tag/Tag.js +18 -28
  202. package/tag/Tag.stories.tsx +25 -28
  203. package/tag/Tag.test.js +60 -0
  204. package/tag/types.d.ts +23 -14
  205. package/text-input/Icons.d.ts +8 -0
  206. package/text-input/Icons.js +60 -0
  207. package/text-input/Suggestion.d.ts +4 -0
  208. package/text-input/Suggestion.js +84 -0
  209. package/text-input/Suggestions.d.ts +4 -0
  210. package/text-input/Suggestions.js +134 -0
  211. package/text-input/TextInput.js +219 -332
  212. package/text-input/TextInput.stories.tsx +242 -197
  213. package/text-input/TextInput.test.js +1724 -0
  214. package/text-input/types.d.ts +51 -13
  215. package/textarea/Textarea.js +20 -27
  216. package/textarea/Textarea.stories.jsx +33 -12
  217. package/textarea/Textarea.test.js +437 -0
  218. package/textarea/types.d.ts +18 -11
  219. package/toggle-group/ToggleGroup.d.ts +1 -1
  220. package/toggle-group/ToggleGroup.js +5 -4
  221. package/toggle-group/ToggleGroup.stories.tsx +4 -4
  222. package/toggle-group/ToggleGroup.test.js +156 -0
  223. package/toggle-group/types.d.ts +9 -1
  224. package/typography/Typography.d.ts +4 -0
  225. package/typography/Typography.js +131 -0
  226. package/typography/Typography.stories.tsx +198 -0
  227. package/typography/types.d.ts +18 -0
  228. package/typography/types.js +5 -0
  229. package/useTheme.js +2 -2
  230. package/useTranslatedLabels.d.ts +2 -0
  231. package/useTranslatedLabels.js +20 -0
  232. package/wizard/Wizard.d.ts +1 -1
  233. package/wizard/Wizard.js +58 -54
  234. package/wizard/Wizard.stories.tsx +33 -24
  235. package/wizard/Wizard.test.js +141 -0
  236. package/wizard/types.d.ts +10 -5
  237. package/ThemeContext.d.ts +0 -15
  238. package/ThemeContext.js +0 -243
  239. package/V3Select/V3Select.js +0 -455
  240. package/V3Select/index.d.ts +0 -27
  241. package/V3Textarea/V3Textarea.js +0 -260
  242. package/V3Textarea/index.d.ts +0 -27
  243. package/common/RequiredComponent.js +0 -32
  244. package/date/Date.js +0 -373
  245. package/date/index.d.ts +0 -27
  246. package/input-text/Icons.js +0 -22
  247. package/input-text/InputText.js +0 -611
  248. package/input-text/index.d.ts +0 -36
  249. package/list/List.d.ts +0 -8
  250. package/list/List.js +0 -47
  251. package/list/List.stories.tsx +0 -95
  252. package/radio/Radio.d.ts +0 -4
  253. package/radio/Radio.js +0 -174
  254. package/radio/Radio.stories.tsx +0 -192
  255. package/radio/types.d.ts +0 -54
  256. package/row/Row.d.ts +0 -11
  257. package/row/Row.js +0 -127
  258. package/row/Row.stories.tsx +0 -239
  259. package/stack/Stack.d.ts +0 -10
  260. package/stack/Stack.js +0 -97
  261. package/stack/Stack.stories.tsx +0 -166
  262. package/text/Text.d.ts +0 -7
  263. package/text/Text.js +0 -30
  264. package/text/Text.stories.tsx +0 -19
  265. package/toggle/Toggle.js +0 -186
  266. package/toggle/index.d.ts +0 -21
  267. package/upload/Upload.js +0 -201
  268. package/upload/buttons-upload/ButtonsUpload.js +0 -111
  269. package/upload/buttons-upload/Icons.js +0 -40
  270. package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
  271. package/upload/dragAndDropArea/Icons.js +0 -39
  272. package/upload/file-upload/FileToUpload.js +0 -115
  273. package/upload/file-upload/Icons.js +0 -66
  274. package/upload/files-upload/FilesToUpload.js +0 -109
  275. package/upload/index.d.ts +0 -15
  276. package/upload/transaction/Icons.js +0 -160
  277. package/upload/transaction/Transaction.js +0 -104
  278. package/upload/transactions/Transactions.js +0 -94
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;