@dxc-technology/halstack-react 0.0.0-0271b6e → 0.0.0-0276e5a

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 (276) 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 +108 -134
  7. package/accordion/Accordion.stories.tsx +108 -118
  8. package/accordion/Accordion.test.js +10 -11
  9. package/accordion/types.d.ts +1 -12
  10. package/accordion-group/AccordionGroup.d.ts +5 -4
  11. package/accordion-group/AccordionGroup.js +34 -76
  12. package/accordion-group/AccordionGroup.stories.tsx +94 -67
  13. package/accordion-group/AccordionGroup.test.js +33 -50
  14. package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
  15. package/accordion-group/AccordionGroupAccordion.js +43 -0
  16. package/accordion-group/types.d.ts +11 -12
  17. package/alert/Alert.js +9 -10
  18. package/alert/Alert.stories.tsx +28 -0
  19. package/alert/Alert.test.js +1 -1
  20. package/badge/Badge.d.ts +1 -1
  21. package/badge/Badge.js +5 -3
  22. package/badge/types.d.ts +1 -0
  23. package/bleed/Bleed.js +1 -34
  24. package/bleed/Bleed.stories.tsx +95 -95
  25. package/bleed/types.d.ts +1 -1
  26. package/box/Box.d.ts +1 -1
  27. package/box/Box.js +19 -48
  28. package/box/Box.stories.tsx +38 -51
  29. package/box/Box.test.js +1 -1
  30. package/box/types.d.ts +0 -11
  31. package/bulleted-list/BulletedList.d.ts +7 -0
  32. package/bulleted-list/BulletedList.js +125 -0
  33. package/bulleted-list/BulletedList.stories.tsx +206 -0
  34. package/bulleted-list/types.d.ts +38 -0
  35. package/button/Button.js +52 -70
  36. package/button/Button.stories.tsx +159 -8
  37. package/button/Button.test.js +1 -1
  38. package/button/types.d.ts +5 -5
  39. package/card/Card.d.ts +1 -1
  40. package/card/Card.js +37 -58
  41. package/card/Card.stories.tsx +12 -42
  42. package/card/Card.test.js +1 -1
  43. package/card/types.d.ts +1 -6
  44. package/checkbox/Checkbox.d.ts +2 -2
  45. package/checkbox/Checkbox.js +104 -101
  46. package/checkbox/Checkbox.stories.tsx +198 -130
  47. package/checkbox/Checkbox.test.js +94 -17
  48. package/checkbox/types.d.ts +7 -3
  49. package/chip/Chip.js +28 -49
  50. package/chip/Chip.stories.tsx +121 -26
  51. package/chip/Chip.test.js +3 -5
  52. package/chip/types.d.ts +1 -1
  53. package/common/OpenSans.css +68 -80
  54. package/common/coreTokens.d.ts +146 -0
  55. package/common/coreTokens.js +167 -0
  56. package/common/utils.d.ts +1 -0
  57. package/common/utils.js +4 -4
  58. package/common/variables.d.ts +1482 -0
  59. package/common/variables.js +1100 -1112
  60. package/date-input/Calendar.d.ts +4 -0
  61. package/date-input/Calendar.js +258 -0
  62. package/date-input/DateInput.js +155 -240
  63. package/date-input/DateInput.stories.tsx +199 -33
  64. package/date-input/DateInput.test.js +502 -159
  65. package/date-input/DatePicker.d.ts +4 -0
  66. package/date-input/DatePicker.js +146 -0
  67. package/date-input/Icons.d.ts +6 -0
  68. package/date-input/Icons.js +75 -0
  69. package/date-input/YearPicker.d.ts +4 -0
  70. package/date-input/YearPicker.js +126 -0
  71. package/date-input/types.d.ts +63 -9
  72. package/dialog/Dialog.d.ts +1 -1
  73. package/dialog/Dialog.js +68 -103
  74. package/dialog/Dialog.stories.tsx +154 -171
  75. package/dialog/Dialog.test.js +334 -5
  76. package/dialog/types.d.ts +0 -12
  77. package/dropdown/Dropdown.d.ts +1 -1
  78. package/dropdown/Dropdown.js +246 -253
  79. package/dropdown/Dropdown.stories.tsx +245 -56
  80. package/dropdown/Dropdown.test.js +507 -110
  81. package/dropdown/DropdownMenu.d.ts +4 -0
  82. package/dropdown/DropdownMenu.js +74 -0
  83. package/dropdown/DropdownMenuItem.d.ts +4 -0
  84. package/dropdown/DropdownMenuItem.js +79 -0
  85. package/dropdown/types.d.ts +23 -3
  86. package/file-input/FileInput.d.ts +2 -2
  87. package/file-input/FileInput.js +180 -223
  88. package/file-input/FileInput.stories.tsx +122 -11
  89. package/file-input/FileInput.test.js +14 -14
  90. package/file-input/FileItem.d.ts +4 -14
  91. package/file-input/FileItem.js +44 -66
  92. package/file-input/types.d.ts +18 -1
  93. package/flex/Flex.d.ts +4 -0
  94. package/flex/Flex.js +71 -0
  95. package/flex/Flex.stories.tsx +112 -0
  96. package/flex/types.d.ts +97 -0
  97. package/footer/Footer.d.ts +1 -1
  98. package/footer/Footer.js +49 -142
  99. package/footer/Footer.stories.tsx +37 -16
  100. package/footer/Footer.test.js +16 -26
  101. package/footer/Icons.js +1 -1
  102. package/footer/types.d.ts +11 -12
  103. package/grid/Grid.d.ts +7 -0
  104. package/grid/Grid.js +91 -0
  105. package/grid/Grid.stories.tsx +219 -0
  106. package/grid/types.d.ts +115 -0
  107. package/header/Header.d.ts +4 -3
  108. package/header/Header.js +102 -150
  109. package/header/Header.stories.tsx +152 -63
  110. package/header/Header.test.js +20 -4
  111. package/header/Icons.js +2 -2
  112. package/header/types.d.ts +0 -13
  113. package/heading/Heading.js +1 -1
  114. package/heading/Heading.test.js +1 -1
  115. package/inset/Inset.js +1 -34
  116. package/inset/Inset.stories.tsx +37 -36
  117. package/inset/types.d.ts +25 -1
  118. package/layout/ApplicationLayout.d.ts +16 -6
  119. package/layout/ApplicationLayout.js +78 -135
  120. package/layout/ApplicationLayout.stories.tsx +84 -93
  121. package/layout/Icons.d.ts +5 -0
  122. package/layout/Icons.js +13 -2
  123. package/layout/SidenavContext.d.ts +5 -0
  124. package/layout/SidenavContext.js +19 -0
  125. package/layout/types.d.ts +19 -35
  126. package/link/Link.d.ts +3 -2
  127. package/link/Link.js +60 -77
  128. package/link/Link.stories.tsx +155 -53
  129. package/link/Link.test.js +9 -19
  130. package/link/types.d.ts +5 -21
  131. package/main.d.ts +8 -10
  132. package/main.js +47 -57
  133. package/nav-tabs/NavTabs.d.ts +8 -0
  134. package/nav-tabs/NavTabs.js +122 -0
  135. package/nav-tabs/NavTabs.stories.tsx +274 -0
  136. package/nav-tabs/NavTabs.test.js +82 -0
  137. package/nav-tabs/Tab.d.ts +4 -0
  138. package/nav-tabs/Tab.js +146 -0
  139. package/nav-tabs/types.d.ts +52 -0
  140. package/number-input/NumberInput.test.js +46 -12
  141. package/number-input/types.d.ts +13 -10
  142. package/package.json +19 -23
  143. package/paginator/Icons.d.ts +5 -0
  144. package/paginator/Icons.js +16 -28
  145. package/paginator/Paginator.js +20 -49
  146. package/paginator/Paginator.stories.tsx +24 -0
  147. package/paginator/Paginator.test.js +91 -39
  148. package/paragraph/Paragraph.d.ts +5 -0
  149. package/paragraph/Paragraph.js +38 -0
  150. package/paragraph/Paragraph.stories.tsx +44 -0
  151. package/password-input/PasswordInput.js +7 -4
  152. package/password-input/PasswordInput.test.js +17 -19
  153. package/password-input/types.d.ts +14 -11
  154. package/progress-bar/ProgressBar.js +61 -55
  155. package/progress-bar/ProgressBar.stories.jsx +47 -12
  156. package/progress-bar/ProgressBar.test.js +68 -23
  157. package/quick-nav/QuickNav.js +77 -26
  158. package/quick-nav/QuickNav.stories.tsx +145 -26
  159. package/quick-nav/types.d.ts +4 -4
  160. package/radio-group/Radio.d.ts +1 -1
  161. package/radio-group/Radio.js +46 -31
  162. package/radio-group/RadioGroup.js +37 -36
  163. package/radio-group/RadioGroup.stories.tsx +132 -18
  164. package/radio-group/RadioGroup.test.js +124 -97
  165. package/radio-group/types.d.ts +2 -2
  166. package/resultsetTable/Icons.d.ts +7 -0
  167. package/resultsetTable/Icons.js +51 -0
  168. package/resultsetTable/ResultsetTable.js +49 -108
  169. package/resultsetTable/ResultsetTable.stories.tsx +50 -25
  170. package/resultsetTable/ResultsetTable.test.js +61 -42
  171. package/resultsetTable/types.d.ts +1 -1
  172. package/select/Listbox.d.ts +4 -0
  173. package/select/Listbox.js +169 -0
  174. package/select/Option.js +11 -24
  175. package/select/Select.js +150 -224
  176. package/select/Select.stories.tsx +522 -133
  177. package/select/Select.test.js +551 -339
  178. package/select/types.d.ts +32 -13
  179. package/sidenav/Icons.d.ts +7 -0
  180. package/sidenav/Icons.js +51 -0
  181. package/sidenav/Sidenav.d.ts +6 -5
  182. package/sidenav/Sidenav.js +146 -44
  183. package/sidenav/Sidenav.stories.tsx +251 -151
  184. package/sidenav/Sidenav.test.js +25 -37
  185. package/sidenav/types.d.ts +52 -26
  186. package/slider/Slider.d.ts +2 -2
  187. package/slider/Slider.js +121 -97
  188. package/slider/Slider.stories.tsx +64 -1
  189. package/slider/Slider.test.js +122 -22
  190. package/slider/types.d.ts +4 -0
  191. package/spinner/Spinner.js +18 -24
  192. package/spinner/Spinner.stories.jsx +53 -27
  193. package/spinner/Spinner.test.js +1 -1
  194. package/switch/Switch.d.ts +2 -2
  195. package/switch/Switch.js +138 -68
  196. package/switch/Switch.stories.tsx +49 -38
  197. package/switch/Switch.test.js +145 -18
  198. package/switch/types.d.ts +6 -2
  199. package/table/Table.js +3 -3
  200. package/table/Table.stories.jsx +80 -1
  201. package/table/Table.test.js +2 -2
  202. package/tabs/Tab.d.ts +4 -0
  203. package/tabs/Tab.js +132 -0
  204. package/tabs/Tabs.d.ts +1 -1
  205. package/tabs/Tabs.js +360 -112
  206. package/tabs/Tabs.stories.tsx +119 -13
  207. package/tabs/Tabs.test.js +244 -17
  208. package/tabs/types.d.ts +17 -3
  209. package/tag/Tag.js +12 -17
  210. package/tag/Tag.stories.tsx +14 -1
  211. package/tag/Tag.test.js +1 -1
  212. package/tag/types.d.ts +1 -1
  213. package/text-input/Icons.d.ts +8 -0
  214. package/text-input/Icons.js +60 -0
  215. package/text-input/Suggestion.d.ts +4 -0
  216. package/text-input/Suggestion.js +84 -0
  217. package/text-input/Suggestions.d.ts +4 -0
  218. package/text-input/Suggestions.js +134 -0
  219. package/text-input/TextInput.js +221 -346
  220. package/text-input/TextInput.stories.tsx +280 -185
  221. package/text-input/TextInput.test.js +756 -758
  222. package/text-input/types.d.ts +46 -12
  223. package/textarea/Textarea.js +13 -23
  224. package/textarea/Textarea.stories.jsx +60 -1
  225. package/textarea/Textarea.test.js +2 -4
  226. package/textarea/types.d.ts +10 -7
  227. package/toggle-group/ToggleGroup.d.ts +2 -2
  228. package/toggle-group/ToggleGroup.js +12 -8
  229. package/toggle-group/ToggleGroup.stories.tsx +46 -4
  230. package/toggle-group/ToggleGroup.test.js +36 -5
  231. package/toggle-group/types.d.ts +10 -2
  232. package/typography/Typography.d.ts +4 -0
  233. package/typography/Typography.js +32 -0
  234. package/typography/Typography.stories.tsx +198 -0
  235. package/typography/types.d.ts +18 -0
  236. package/typography/types.js +5 -0
  237. package/useTheme.d.ts +1234 -1
  238. package/useTheme.js +3 -3
  239. package/useTranslatedLabels.d.ts +85 -0
  240. package/useTranslatedLabels.js +20 -0
  241. package/utils/BaseTypography.d.ts +21 -0
  242. package/utils/BaseTypography.js +108 -0
  243. package/utils/FocusLock.d.ts +13 -0
  244. package/utils/FocusLock.js +138 -0
  245. package/wizard/Wizard.js +44 -45
  246. package/wizard/Wizard.stories.tsx +40 -1
  247. package/wizard/Wizard.test.js +1 -1
  248. package/wizard/types.d.ts +3 -3
  249. package/ThemeContext.d.ts +0 -10
  250. package/ThemeContext.js +0 -243
  251. package/card/ice-cream.jpg +0 -0
  252. package/common/RequiredComponent.js +0 -32
  253. package/list/List.d.ts +0 -4
  254. package/list/List.js +0 -47
  255. package/list/List.stories.tsx +0 -95
  256. package/list/types.d.ts +0 -7
  257. package/radio/Radio.d.ts +0 -4
  258. package/radio/Radio.js +0 -174
  259. package/radio/Radio.stories.tsx +0 -192
  260. package/radio/Radio.test.js +0 -71
  261. package/radio/types.d.ts +0 -54
  262. package/row/Row.d.ts +0 -3
  263. package/row/Row.js +0 -127
  264. package/row/Row.stories.tsx +0 -237
  265. package/row/types.d.ts +0 -28
  266. package/stack/Stack.d.ts +0 -3
  267. package/stack/Stack.js +0 -97
  268. package/stack/Stack.stories.tsx +0 -164
  269. package/stack/types.d.ts +0 -24
  270. package/text/Text.d.ts +0 -7
  271. package/text/Text.js +0 -30
  272. package/text/Text.stories.tsx +0 -19
  273. /package/{list → bulleted-list}/types.js +0 -0
  274. /package/{radio → flex}/types.js +0 -0
  275. /package/{row → grid}/types.js +0 -0
  276. /package/{stack → nav-tabs}/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,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,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,24 +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
- * If true, a divider is shown between children.
9
- */
10
- divider?: boolean;
11
- /**
12
- * Alignment applied to children.
13
- */
14
- align?: "start" | "center" | "end" | "baseline" | "stretch";
15
- /**
16
- * Specifies the HTML tag or component that is rendered as the wrapper element.
17
- */
18
- as?: React.ElementType;
19
- /**
20
- * Custom content inside the stack.
21
- */
22
- children: React.ReactNode;
23
- };
24
- 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 → grid}/types.js RENAMED
File without changes
/package/{stack → nav-tabs}/types.js RENAMED
File without changes