@dxc-technology/halstack-react 0.0.0-d3554d7 → 0.0.0-d3ac293

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