@dxc-technology/halstack-react 0.0.0-1d5e7bf → 0.0.0-1da0f40

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 (216) hide show
  1. package/HalstackContext.js +98 -50
  2. package/accordion/Accordion.js +117 -104
  3. package/accordion/Accordion.stories.tsx +103 -15
  4. package/accordion/Accordion.test.js +10 -11
  5. package/accordion/types.d.ts +5 -4
  6. package/accordion-group/AccordionGroup.js +1 -21
  7. package/accordion-group/AccordionGroup.stories.tsx +27 -1
  8. package/accordion-group/AccordionGroup.test.js +21 -46
  9. package/accordion-group/types.d.ts +10 -3
  10. package/alert/Alert.js +1 -1
  11. package/alert/Alert.stories.tsx +28 -0
  12. package/alert/Alert.test.js +1 -1
  13. package/bleed/Bleed.stories.tsx +63 -63
  14. package/box/Box.js +2 -4
  15. package/box/Box.stories.tsx +15 -0
  16. package/box/Box.test.js +1 -1
  17. package/box/types.d.ts +1 -0
  18. package/bulleted-list/BulletedList.d.ts +7 -0
  19. package/bulleted-list/BulletedList.js +123 -0
  20. package/bulleted-list/BulletedList.stories.tsx +200 -0
  21. package/bulleted-list/types.d.ts +11 -0
  22. package/button/Button.js +50 -70
  23. package/button/Button.stories.tsx +159 -8
  24. package/button/Button.test.js +1 -1
  25. package/button/types.d.ts +7 -7
  26. package/card/Card.test.js +1 -1
  27. package/card/types.d.ts +1 -0
  28. package/checkbox/Checkbox.d.ts +2 -2
  29. package/checkbox/Checkbox.js +92 -99
  30. package/checkbox/Checkbox.stories.tsx +131 -59
  31. package/checkbox/Checkbox.test.js +94 -17
  32. package/checkbox/types.d.ts +6 -2
  33. package/chip/Chip.js +16 -22
  34. package/chip/Chip.stories.tsx +96 -9
  35. package/chip/Chip.test.js +3 -5
  36. package/chip/types.d.ts +1 -1
  37. package/common/variables.js +333 -299
  38. package/date-input/Calendar.d.ts +4 -0
  39. package/date-input/Calendar.js +258 -0
  40. package/date-input/DateInput.js +134 -237
  41. package/date-input/DateInput.stories.tsx +199 -33
  42. package/date-input/DateInput.test.js +494 -138
  43. package/date-input/DatePicker.d.ts +4 -0
  44. package/date-input/DatePicker.js +146 -0
  45. package/date-input/Icons.d.ts +6 -0
  46. package/date-input/Icons.js +75 -0
  47. package/date-input/YearPicker.d.ts +4 -0
  48. package/date-input/YearPicker.js +126 -0
  49. package/date-input/types.d.ts +51 -0
  50. package/dialog/Dialog.js +79 -68
  51. package/dialog/Dialog.stories.tsx +230 -123
  52. package/dialog/Dialog.test.js +334 -5
  53. package/dialog/types.d.ts +3 -2
  54. package/dropdown/Dropdown.d.ts +1 -1
  55. package/dropdown/Dropdown.js +246 -249
  56. package/dropdown/Dropdown.stories.tsx +245 -56
  57. package/dropdown/Dropdown.test.js +507 -110
  58. package/dropdown/DropdownMenu.d.ts +4 -0
  59. package/dropdown/DropdownMenu.js +70 -0
  60. package/dropdown/DropdownMenuItem.d.ts +4 -0
  61. package/dropdown/DropdownMenuItem.js +81 -0
  62. package/dropdown/types.d.ts +25 -5
  63. package/file-input/FileInput.d.ts +2 -2
  64. package/file-input/FileInput.js +174 -219
  65. package/file-input/FileInput.stories.tsx +122 -11
  66. package/file-input/FileInput.test.js +14 -14
  67. package/file-input/FileItem.d.ts +4 -14
  68. package/file-input/FileItem.js +39 -63
  69. package/file-input/types.d.ts +17 -0
  70. package/flex/Flex.d.ts +4 -0
  71. package/flex/Flex.js +69 -0
  72. package/flex/Flex.stories.tsx +103 -0
  73. package/flex/types.d.ts +32 -0
  74. package/footer/Footer.stories.tsx +99 -1
  75. package/footer/Footer.test.js +14 -26
  76. package/footer/types.d.ts +2 -1
  77. package/header/Header.js +87 -87
  78. package/header/Header.stories.tsx +152 -9
  79. package/header/Header.test.js +2 -2
  80. package/header/Icons.js +2 -2
  81. package/header/types.d.ts +3 -2
  82. package/heading/Heading.test.js +1 -1
  83. package/inset/Inset.stories.tsx +4 -4
  84. package/layout/ApplicationLayout.d.ts +15 -6
  85. package/layout/ApplicationLayout.js +36 -64
  86. package/layout/ApplicationLayout.stories.tsx +80 -44
  87. package/layout/types.d.ts +17 -27
  88. package/link/Link.js +2 -2
  89. package/link/Link.stories.tsx +72 -5
  90. package/link/Link.test.js +2 -4
  91. package/link/types.d.ts +1 -1
  92. package/main.d.ts +6 -10
  93. package/main.js +28 -60
  94. package/{tabs-nav → nav-tabs}/NavTabs.js +6 -6
  95. package/{tabs-nav → nav-tabs}/NavTabs.stories.tsx +96 -6
  96. package/{tabs-nav → nav-tabs}/NavTabs.test.js +1 -1
  97. package/{tabs-nav → nav-tabs}/Tab.js +38 -20
  98. package/{tabs-nav → nav-tabs}/types.d.ts +1 -1
  99. package/number-input/NumberInput.test.js +44 -8
  100. package/package.json +16 -21
  101. package/paginator/Icons.d.ts +5 -0
  102. package/paginator/Icons.js +16 -28
  103. package/paginator/Paginator.js +6 -12
  104. package/paginator/Paginator.stories.tsx +24 -0
  105. package/paginator/Paginator.test.js +45 -48
  106. package/paragraph/Paragraph.d.ts +6 -0
  107. package/paragraph/Paragraph.js +38 -0
  108. package/paragraph/Paragraph.stories.tsx +44 -0
  109. package/password-input/PasswordInput.test.js +14 -13
  110. package/progress-bar/ProgressBar.d.ts +2 -2
  111. package/progress-bar/ProgressBar.js +59 -53
  112. package/progress-bar/ProgressBar.stories.jsx +38 -3
  113. package/progress-bar/ProgressBar.test.js +68 -23
  114. package/progress-bar/types.d.ts +3 -4
  115. package/quick-nav/QuickNav.js +17 -16
  116. package/quick-nav/QuickNav.stories.tsx +124 -32
  117. package/radio-group/Radio.d.ts +1 -1
  118. package/radio-group/Radio.js +43 -28
  119. package/radio-group/RadioGroup.js +24 -24
  120. package/radio-group/RadioGroup.stories.tsx +132 -18
  121. package/radio-group/RadioGroup.test.js +124 -97
  122. package/radio-group/types.d.ts +2 -2
  123. package/resultsetTable/Icons.d.ts +7 -0
  124. package/resultsetTable/Icons.js +51 -0
  125. package/resultsetTable/ResultsetTable.js +48 -107
  126. package/resultsetTable/ResultsetTable.stories.tsx +50 -25
  127. package/resultsetTable/ResultsetTable.test.js +41 -64
  128. package/resultsetTable/types.d.ts +2 -2
  129. package/select/Listbox.js +4 -10
  130. package/select/Option.js +11 -24
  131. package/select/Select.js +54 -50
  132. package/select/Select.stories.tsx +494 -149
  133. package/select/Select.test.js +393 -327
  134. package/select/types.d.ts +3 -5
  135. package/sidenav/Sidenav.d.ts +6 -5
  136. package/sidenav/Sidenav.js +174 -55
  137. package/sidenav/Sidenav.stories.tsx +249 -149
  138. package/sidenav/Sidenav.test.js +25 -37
  139. package/sidenav/types.d.ts +50 -27
  140. package/slider/Slider.d.ts +2 -2
  141. package/slider/Slider.js +120 -95
  142. package/slider/Slider.stories.tsx +64 -1
  143. package/slider/Slider.test.js +122 -22
  144. package/slider/types.d.ts +6 -2
  145. package/spinner/Spinner.js +2 -2
  146. package/spinner/Spinner.stories.jsx +27 -1
  147. package/spinner/Spinner.test.js +1 -1
  148. package/switch/Switch.d.ts +2 -2
  149. package/switch/Switch.js +135 -68
  150. package/switch/Switch.stories.tsx +41 -30
  151. package/switch/Switch.test.js +145 -18
  152. package/switch/types.d.ts +6 -2
  153. package/table/Table.js +1 -1
  154. package/table/Table.stories.jsx +80 -1
  155. package/table/Table.test.js +2 -2
  156. package/tabs/Tab.d.ts +4 -0
  157. package/tabs/Tab.js +133 -0
  158. package/tabs/Tabs.js +360 -104
  159. package/tabs/Tabs.stories.tsx +119 -5
  160. package/tabs/Tabs.test.js +217 -7
  161. package/tabs/types.d.ts +15 -5
  162. package/tag/Tag.js +1 -1
  163. package/tag/Tag.stories.tsx +14 -1
  164. package/tag/Tag.test.js +1 -1
  165. package/tag/types.d.ts +1 -1
  166. package/text-input/Icons.d.ts +8 -0
  167. package/text-input/Icons.js +60 -0
  168. package/text-input/Suggestion.js +38 -9
  169. package/text-input/Suggestions.d.ts +4 -0
  170. package/text-input/Suggestions.js +134 -0
  171. package/text-input/TextInput.js +195 -292
  172. package/text-input/TextInput.stories.tsx +280 -185
  173. package/text-input/TextInput.test.js +736 -725
  174. package/text-input/types.d.ts +22 -3
  175. package/textarea/Textarea.stories.jsx +60 -1
  176. package/textarea/Textarea.test.js +1 -1
  177. package/toggle-group/ToggleGroup.stories.tsx +42 -0
  178. package/toggle-group/ToggleGroup.test.js +1 -1
  179. package/toggle-group/types.d.ts +1 -1
  180. package/typography/Typography.d.ts +4 -0
  181. package/typography/Typography.js +131 -0
  182. package/typography/Typography.stories.tsx +198 -0
  183. package/typography/types.d.ts +18 -0
  184. package/utils/FocusLock.d.ts +13 -0
  185. package/utils/FocusLock.js +139 -0
  186. package/wizard/Wizard.js +9 -16
  187. package/wizard/Wizard.stories.tsx +40 -1
  188. package/wizard/Wizard.test.js +1 -1
  189. package/wizard/types.d.ts +5 -4
  190. package/common/RequiredComponent.js +0 -32
  191. package/inline/Inline.d.ts +0 -4
  192. package/inline/Inline.js +0 -60
  193. package/inline/Inline.stories.tsx +0 -319
  194. package/inline/types.d.ts +0 -36
  195. package/list/List.d.ts +0 -4
  196. package/list/List.js +0 -47
  197. package/list/List.stories.tsx +0 -89
  198. package/list/types.d.ts +0 -7
  199. package/row/Row.d.ts +0 -3
  200. package/row/Row.js +0 -127
  201. package/row/Row.stories.tsx +0 -237
  202. package/row/types.d.ts +0 -28
  203. package/stack/Stack.d.ts +0 -4
  204. package/stack/Stack.js +0 -56
  205. package/stack/Stack.stories.tsx +0 -263
  206. package/stack/types.d.ts +0 -32
  207. package/tabs-nav/types.js +0 -5
  208. package/text/Text.d.ts +0 -7
  209. package/text/Text.js +0 -30
  210. package/text/Text.stories.tsx +0 -19
  211. /package/{inline → bulleted-list}/types.js +0 -0
  212. /package/{list → flex}/types.js +0 -0
  213. /package/{tabs-nav → nav-tabs}/NavTabs.d.ts +0 -0
  214. /package/{tabs-nav → nav-tabs}/Tab.d.ts +0 -0
  215. /package/{row → nav-tabs}/types.js +0 -0
  216. /package/{stack → typography}/types.js +0 -0
@@ -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,28 +0,0 @@
1
- /// <reference types="react" />
2
- declare type Props = {
3
- /**
4
- * Space applied between each child.
5
- */
6
- gutter?: "none" | "xxxsmall" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge";
7
- /**
8
- * Alignment applied to children.
9
- */
10
- align?: "start" | "center" | "end" | "baseline" | "stretch";
11
- /**
12
- * Justification applied to children.
13
- */
14
- justify?: "start" | "center" | "end" | "spaceBetween" | "spaceAround" | "spaceEvenly";
15
- /**
16
- * If true, children will wrap onto multiple rows.
17
- */
18
- wrap?: boolean;
19
- /**
20
- * If true, children are shown in reverse order.
21
- */
22
- reverse?: boolean;
23
- /**
24
- * Custom content inside the row.
25
- */
26
- children: React.ReactNode;
27
- };
28
- export default Props;
package/stack/Stack.d.ts DELETED
@@ -1,4 +0,0 @@
1
- /// <reference types="react" />
2
- import StackPropsType from "./types";
3
- declare const DxcStack: ({ alignX, as, divider, gutter, reverse, wrap, children, }: StackPropsType) => JSX.Element;
4
- export default DxcStack;
package/stack/Stack.js DELETED
@@ -1,56 +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, _templateObject2;
17
-
18
- var DxcStack = function DxcStack(_ref) {
19
- var _ref$alignX = _ref.alignX,
20
- alignX = _ref$alignX === void 0 ? "stretch" : _ref$alignX,
21
- _ref$as = _ref.as,
22
- as = _ref$as === void 0 ? "div" : _ref$as,
23
- _ref$divider = _ref.divider,
24
- divider = _ref$divider === void 0 ? false : _ref$divider,
25
- _ref$gutter = _ref.gutter,
26
- gutter = _ref$gutter === void 0 ? "0rem" : _ref$gutter,
27
- _ref$reverse = _ref.reverse,
28
- reverse = _ref$reverse === void 0 ? false : _ref$reverse,
29
- _ref$wrap = _ref.wrap,
30
- wrap = _ref$wrap === void 0 ? false : _ref$wrap,
31
- children = _ref.children;
32
- return /*#__PURE__*/_react["default"].createElement(Stack, {
33
- gutter: gutter,
34
- alignX: alignX,
35
- reverse: reverse,
36
- as: as,
37
- divider: divider,
38
- wrap: wrap
39
- }, _react["default"].Children.map(children, function (child, index) {
40
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, child, divider && index !== _react["default"].Children.count(children) - 1 && /*#__PURE__*/_react["default"].createElement(Divider, null));
41
- }));
42
- };
43
-
44
- var Divider = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n width: 100%;\n height: 1px;\n background-color: #999999;\n"])));
45
-
46
- var Stack = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n ", "\n padding: 0px;\n margin: 0px;\n height: 100%;\n"])), function (_ref2) {
47
- var alignX = _ref2.alignX,
48
- gutter = _ref2.gutter,
49
- reverse = _ref2.reverse,
50
- divider = _ref2.divider,
51
- wrap = _ref2.wrap;
52
- return "\n flex-direction: ".concat(reverse ? "column-reverse" : "column", ";\n align-items: ").concat(alignX === "start" || alignX === "end" ? "flex-".concat(alignX) : alignX, ";\n gap: ").concat(divider ? "calc(".concat(gutter, "/2 - 1px)") : gutter, ";\n flex-wrap: ").concat(wrap ? "wrap" : "nowrap", ";\n ");
53
- });
54
-
55
- var _default = DxcStack;
56
- exports["default"] = _default;
@@ -1,263 +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 height="small" width="small" />
17
- <Placeholder height="medium" width="medium" />
18
- <Placeholder height="large" width="large" />
19
- <Placeholder height="small" width="large" />
20
- </DxcStack>
21
- </Container>
22
- <Title title="Default with divider" theme="light" level={4} />
23
- <Container>
24
- <DxcStack divider>
25
- <Placeholder height="medium" width="medium" />
26
- <Placeholder height="large" width="large" />
27
- <Placeholder height="small" width="large" />
28
- </DxcStack>
29
- </Container>
30
- <Title title="Alignment with divider" theme="light" level={4} />
31
- <Container>
32
- <DxcStack alignX="end" divider>
33
- <Placeholder height="small" width="small" />
34
- <Placeholder height="small" width="medium" />
35
- <Placeholder height="medium" width="small" />
36
- </DxcStack>
37
- </Container>
38
- <Title title="Default with one child" theme="light" level={4} />
39
- <Container>
40
- <DxcStack divider>
41
- <Placeholder height="large" width="xlarge" />
42
- </DxcStack>
43
- </Container>
44
- <Title title="Wrap" theme="light" level={4} />
45
- <FlexContainer customHeight>
46
- <DxcStack wrap>
47
- <Placeholder height="small" width="small" />
48
- <Placeholder height="large" width="medium" />
49
- <Placeholder height="medium" width="small" />
50
- <Placeholder height="large" width="medium" />
51
- </DxcStack>
52
- </FlexContainer>
53
- <Title title="No wrap in a flex container" theme="light" level={4} />
54
- <FlexContainer customHeight>
55
- <DxcStack>
56
- <Placeholder height="small" width="small" />
57
- <Placeholder height="medium" width="small" />
58
- <Placeholder height="small" width="medium" />
59
- </DxcStack>
60
- </FlexContainer>
61
- <Title title="No wrap (default)" theme="light" level={4} />
62
- <Container customHeight>
63
- <DxcStack>
64
- <Placeholder height="small" width="medium" />
65
- <Placeholder height="small" width="small" />
66
- </DxcStack>
67
- </Container>
68
- <Title title="AlignX = start" theme="light" level={4} />
69
- <Container>
70
- <DxcStack alignX="start">
71
- <Placeholder height="small" width="small" />
72
- <Placeholder height="large" width="medium" />
73
- <Placeholder height="medium" width="small" />
74
- <Placeholder height="large" width="medium" />
75
- </DxcStack>
76
- </Container>
77
- <Title title="AlignX = end" theme="light" level={4} />
78
- <Container>
79
- <DxcStack alignX="end">
80
- <Placeholder height="small" width="small" />
81
- <Placeholder height="large" width="medium" />
82
- <Placeholder height="medium" width="small" />
83
- </DxcStack>
84
- </Container>
85
- <Title title="AlignX = center" theme="light" level={4} />
86
- <Container>
87
- <DxcStack alignX="center">
88
- <Placeholder height="small" width="small" />
89
- <Placeholder height="large" width="medium" />
90
- <Placeholder height="medium" width="small" />
91
- <Placeholder height="large" width="medium" />
92
- </DxcStack>
93
- </Container>
94
- <Title title="AlignX = baseline" theme="light" level={4} />
95
- <Container>
96
- <DxcStack alignX="baseline">
97
- <Placeholder height="small" width="small" />
98
- <Placeholder height="large" width="medium" />
99
- <Placeholder height="medium" width="small" />
100
- </DxcStack>
101
- </Container>
102
- <Title title="AlignX with wrapped items" theme="light" level={4} />
103
- <Container customHeight>
104
- <DxcStack alignX="center" wrap>
105
- <Placeholder height="small" width="medium" />
106
- <Placeholder height="small" width="small" />
107
- </DxcStack>
108
- </Container>
109
- <Title title="Gutter = 0rem" theme="light" level={4} />
110
- <Container>
111
- <DxcStack gutter="0rem">
112
- <Placeholder height="small" width="medium" />
113
- <Placeholder height="large" width="small" />
114
- <Placeholder height="medium" width="medium" />
115
- <Placeholder height="large" width="small" />
116
- <Placeholder height="small" width="medium" />
117
- </DxcStack>
118
- </Container>
119
- <Title title="Gutter = 0.125rem" theme="light" level={4} />
120
- <Container>
121
- <DxcStack gutter="0.125rem">
122
- <Placeholder height="small" width="small" />
123
- <Placeholder height="large" width="medium" />
124
- <Placeholder height="medium" width="small" />
125
- </DxcStack>
126
- </Container>
127
- <Title title="Gutter = 0.25rem" theme="light" level={4} />
128
- <Container>
129
- <DxcStack gutter="0.25rem">
130
- <Placeholder height="small" width="medium" />
131
- <Placeholder height="large" width="small" />
132
- <Placeholder height="medium" width="medium" />
133
- <Placeholder height="large" width="small" />
134
- <Placeholder height="small" width="medium" />
135
- </DxcStack>
136
- </Container>
137
- <Title title="Gutter = 0.5rem" theme="light" level={4} />
138
- <Container>
139
- <DxcStack gutter="0.5rem">
140
- <Placeholder height="small" width="small" />
141
- <Placeholder height="large" width="medium" />
142
- <Placeholder height="medium" width="small" />
143
- </DxcStack>
144
- </Container>
145
- <Title title="Gutter = 0.75rem" theme="light" level={4} />
146
- <Container>
147
- <DxcStack gutter="0.75rem">
148
- <Placeholder height="small" width="medium" />
149
- <Placeholder height="large" width="small" />
150
- <Placeholder height="medium" width="medium" />
151
- <Placeholder height="large" width="small" />
152
- <Placeholder height="small" width="medium" />
153
- </DxcStack>
154
- </Container>
155
- <Title title="Gutter = 1rem" theme="light" level={4} />
156
- <Container>
157
- <DxcStack gutter="1rem">
158
- <Placeholder height="small" width="small" />
159
- <Placeholder height="large" width="medium" />
160
- <Placeholder height="medium" width="small" />
161
- </DxcStack>
162
- </Container>
163
- <Title title="Gutter = 1.5rem" theme="light" level={4} />
164
- <Container>
165
- <DxcStack gutter="1.5rem">
166
- <Placeholder height="small" width="medium" />
167
- <Placeholder height="large" width="small" />
168
- <Placeholder height="medium" width="medium" />
169
- <Placeholder height="large" width="small" />
170
- <Placeholder height="small" width="medium" />
171
- </DxcStack>
172
- </Container>
173
- <Title title="Gutter = 2rem & divider" theme="light" level={4} />
174
- <Container>
175
- <DxcStack gutter="2rem" divider>
176
- <Placeholder height="small" width="small" />
177
- <Placeholder height="large" width="medium" />
178
- <Placeholder height="medium" width="small" />
179
- </DxcStack>
180
- </Container>
181
- <Title title="Gutter = 3rem" theme="light" level={4} />
182
- <Container>
183
- <DxcStack gutter="3rem">
184
- <Placeholder height="small" width="small" />
185
- <Placeholder height="large" width="medium" />
186
- <Placeholder height="medium" width="small" />
187
- </DxcStack>
188
- </Container>
189
- <Title title="Gutter = 4rem" theme="light" level={4} />
190
- <Container>
191
- <DxcStack gutter="4rem">
192
- <Placeholder height="large" width="medium" />
193
- <Placeholder height="medium" width="small" />
194
- </DxcStack>
195
- </Container>
196
- <Title title="Gutter = 5rem" theme="light" level={4} />
197
- <Container>
198
- <DxcStack gutter="5rem">
199
- <Placeholder height="small" width="small" />
200
- <Placeholder height="medium" width="small" />
201
- </DxcStack>
202
- </Container>
203
- <Title title="Reverse" theme="light" level={4} />
204
- <Container>
205
- <DxcStack reverse>
206
- <Placeholder height="small" width="medium">
207
- 1
208
- </Placeholder>
209
- <Placeholder height="large" width="small">
210
- 2
211
- </Placeholder>
212
- <Placeholder height="medium" width="medium">
213
- 3
214
- </Placeholder>
215
- <Placeholder height="large" width="small">
216
- 4
217
- </Placeholder>
218
- </DxcStack>
219
- </Container>
220
- <Title title="Wrapped and reversed children" theme="light" level={4} />
221
- <FlexContainer customHeight>
222
- <DxcStack reverse wrap>
223
- <Placeholder height="small" width="medium">
224
- 1
225
- </Placeholder>
226
- <Placeholder height="large" width="small">
227
- 2
228
- </Placeholder>
229
- <Placeholder height="medium" width="medium">
230
- 3
231
- </Placeholder>
232
- <Placeholder height="large" width="small">
233
- 4
234
- </Placeholder>
235
- </DxcStack>
236
- </FlexContainer>
237
- </>
238
- );
239
-
240
- const FlexContainer = styled.div<{ customHeight?: boolean }>`
241
- display: flex;
242
- ${({ customHeight }) => customHeight && `height: 100px;`};
243
- background: #f2eafa;
244
- `;
245
-
246
- const Container = styled.div<{ customHeight?: boolean }>`
247
- background: #f2eafa;
248
- ${({ customHeight }) => customHeight && `height: 100px;`};
249
- `;
250
-
251
- type PlaceholderProps = {
252
- width?: "xlarge" | "large" | "medium" | "small" | "auto";
253
- height?: "large" | "medium" | "small" | "auto";
254
- };
255
-
256
- const Placeholder = styled.div<PlaceholderProps>`
257
- ${({ width }) =>
258
- width &&
259
- `width: ${width === "xlarge" ? "350px" : width === "large" ? "150px" : width === "medium" ? "100px" : "50px"};`};
260
- ${({ height }) => height && `height: ${height === "large" ? "100px" : height === "medium" ? "80px" : "50px"};`};
261
- border: 1px solid #a46ede;
262
- background-color: #e5d5f6;
263
- `;
package/stack/types.d.ts DELETED
@@ -1,32 +0,0 @@
1
- /// <reference types="react" />
2
- declare type Props = {
3
- /**
4
- * Alignment applied to children in the main axis.
5
- */
6
- alignX?: "start" | "end" | "center" | "baseline" | "stretch";
7
- /**
8
- * Specifies the HTML tag or component that is rendered as the wrapper element.
9
- */
10
- as?: React.ElementType;
11
- /**
12
- * If true, a divider is shown between children.
13
- */
14
- divider?: boolean;
15
- /**
16
- * Space applied between each child.
17
- */
18
- gutter?: "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "0.75rem" | "1rem" | "1.5rem" | "2rem" | "3rem" | "4rem" | "5rem";
19
- /**
20
- * Change the direction of the stack to reverse.
21
- */
22
- reverse?: boolean;
23
- /**
24
- * Sets whether the children are forced onto one column or can wrap onto multiple columns.
25
- */
26
- wrap?: boolean;
27
- /**
28
- * Custom content inside the stack.
29
- */
30
- children: React.ReactNode[] | React.ReactNode;
31
- };
32
- export default Props;
package/tabs-nav/types.js DELETED
@@ -1,5 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
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;