@dxc-technology/halstack-react 0.0.0-f0d662d → 0.0.0-f1bbdfe

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