@dxc-technology/halstack-react 0.0.0-eb9d984 → 0.0.0-ebe476f

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 (320) hide show
  1. package/README.md +46 -0
  2. package/dist/index.d.mts +6683 -0
  3. package/dist/index.d.ts +6683 -0
  4. package/dist/index.js +1 -0
  5. package/dist/index.mjs +1 -0
  6. package/package.json +69 -70
  7. package/BackgroundColorContext.d.ts +0 -10
  8. package/BackgroundColorContext.js +0 -47
  9. package/HalstackContext.d.ts +0 -12
  10. package/HalstackContext.js +0 -295
  11. package/accordion/Accordion.d.ts +0 -4
  12. package/accordion/Accordion.js +0 -226
  13. package/accordion/Accordion.stories.tsx +0 -307
  14. package/accordion/Accordion.test.js +0 -72
  15. package/accordion/types.d.ts +0 -68
  16. package/accordion/types.js +0 -5
  17. package/accordion-group/AccordionGroup.d.ts +0 -7
  18. package/accordion-group/AccordionGroup.js +0 -169
  19. package/accordion-group/AccordionGroup.stories.tsx +0 -225
  20. package/accordion-group/AccordionGroup.test.js +0 -151
  21. package/accordion-group/types.d.ts +0 -72
  22. package/accordion-group/types.js +0 -5
  23. package/alert/Alert.d.ts +0 -4
  24. package/alert/Alert.js +0 -293
  25. package/alert/Alert.stories.tsx +0 -170
  26. package/alert/Alert.test.js +0 -92
  27. package/alert/types.d.ts +0 -49
  28. package/alert/types.js +0 -5
  29. package/badge/Badge.d.ts +0 -4
  30. package/badge/Badge.js +0 -61
  31. package/badge/types.d.ts +0 -5
  32. package/badge/types.js +0 -5
  33. package/bleed/Bleed.d.ts +0 -3
  34. package/bleed/Bleed.js +0 -51
  35. package/bleed/Bleed.stories.tsx +0 -341
  36. package/bleed/types.d.ts +0 -37
  37. package/bleed/types.js +0 -5
  38. package/box/Box.d.ts +0 -4
  39. package/box/Box.js +0 -116
  40. package/box/Box.stories.tsx +0 -132
  41. package/box/Box.test.js +0 -18
  42. package/box/types.d.ts +0 -43
  43. package/box/types.js +0 -5
  44. package/bulleted-list/BulletedList.d.ts +0 -7
  45. package/bulleted-list/BulletedList.js +0 -123
  46. package/bulleted-list/BulletedList.stories.tsx +0 -200
  47. package/bulleted-list/types.d.ts +0 -11
  48. package/bulleted-list/types.js +0 -5
  49. package/button/Button.d.ts +0 -4
  50. package/button/Button.js +0 -174
  51. package/button/Button.stories.tsx +0 -274
  52. package/button/Button.test.js +0 -35
  53. package/button/types.d.ts +0 -53
  54. package/button/types.js +0 -5
  55. package/card/Card.d.ts +0 -4
  56. package/card/Card.js +0 -161
  57. package/card/Card.stories.tsx +0 -201
  58. package/card/Card.test.js +0 -50
  59. package/card/ice-cream.jpg +0 -0
  60. package/card/types.d.ts +0 -67
  61. package/card/types.js +0 -5
  62. package/checkbox/Checkbox.d.ts +0 -4
  63. package/checkbox/Checkbox.js +0 -257
  64. package/checkbox/Checkbox.stories.tsx +0 -188
  65. package/checkbox/Checkbox.test.js +0 -78
  66. package/checkbox/types.d.ts +0 -64
  67. package/checkbox/types.js +0 -5
  68. package/chip/Chip.d.ts +0 -4
  69. package/chip/Chip.js +0 -161
  70. package/chip/Chip.stories.tsx +0 -119
  71. package/chip/Chip.test.js +0 -56
  72. package/chip/types.d.ts +0 -45
  73. package/chip/types.js +0 -5
  74. package/common/OpenSans.css +0 -81
  75. package/common/RequiredComponent.js +0 -32
  76. package/common/fonts/OpenSans-Bold.ttf +0 -0
  77. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  78. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  79. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  80. package/common/fonts/OpenSans-Italic.ttf +0 -0
  81. package/common/fonts/OpenSans-Light.ttf +0 -0
  82. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  83. package/common/fonts/OpenSans-Regular.ttf +0 -0
  84. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  85. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  86. package/common/utils.js +0 -22
  87. package/common/variables.js +0 -1495
  88. package/date-input/DateInput.d.ts +0 -4
  89. package/date-input/DateInput.js +0 -372
  90. package/date-input/DateInput.stories.tsx +0 -138
  91. package/date-input/DateInput.test.js +0 -479
  92. package/date-input/types.d.ts +0 -107
  93. package/date-input/types.js +0 -5
  94. package/dialog/Dialog.d.ts +0 -4
  95. package/dialog/Dialog.js +0 -138
  96. package/dialog/Dialog.stories.tsx +0 -212
  97. package/dialog/Dialog.test.js +0 -40
  98. package/dialog/types.d.ts +0 -43
  99. package/dialog/types.js +0 -5
  100. package/dropdown/Dropdown.d.ts +0 -4
  101. package/dropdown/Dropdown.js +0 -391
  102. package/dropdown/Dropdown.stories.tsx +0 -249
  103. package/dropdown/Dropdown.test.js +0 -189
  104. package/dropdown/types.d.ts +0 -80
  105. package/dropdown/types.js +0 -5
  106. package/file-input/FileInput.d.ts +0 -4
  107. package/file-input/FileInput.js +0 -593
  108. package/file-input/FileInput.stories.tsx +0 -507
  109. package/file-input/FileInput.test.js +0 -457
  110. package/file-input/FileItem.d.ts +0 -14
  111. package/file-input/FileItem.js +0 -186
  112. package/file-input/types.d.ts +0 -112
  113. package/file-input/types.js +0 -5
  114. package/flex/Flex.d.ts +0 -3
  115. package/flex/Flex.js +0 -74
  116. package/flex/Flex.stories.tsx +0 -103
  117. package/flex/types.d.ts +0 -21
  118. package/flex/types.js +0 -5
  119. package/footer/Footer.d.ts +0 -4
  120. package/footer/Footer.js +0 -185
  121. package/footer/Footer.stories.tsx +0 -130
  122. package/footer/Footer.test.js +0 -109
  123. package/footer/Icons.d.ts +0 -2
  124. package/footer/Icons.js +0 -77
  125. package/footer/types.d.ts +0 -65
  126. package/footer/types.js +0 -5
  127. package/header/Header.d.ts +0 -7
  128. package/header/Header.js +0 -303
  129. package/header/Header.stories.tsx +0 -172
  130. package/header/Header.test.js +0 -79
  131. package/header/Icons.d.ts +0 -2
  132. package/header/Icons.js +0 -34
  133. package/header/types.d.ts +0 -47
  134. package/header/types.js +0 -5
  135. package/heading/Heading.d.ts +0 -4
  136. package/heading/Heading.js +0 -159
  137. package/heading/Heading.stories.tsx +0 -54
  138. package/heading/Heading.test.js +0 -186
  139. package/heading/types.d.ts +0 -33
  140. package/heading/types.js +0 -5
  141. package/inset/Inset.d.ts +0 -3
  142. package/inset/Inset.js +0 -51
  143. package/inset/Inset.stories.tsx +0 -229
  144. package/inset/types.d.ts +0 -37
  145. package/inset/types.js +0 -5
  146. package/layout/ApplicationLayout.d.ts +0 -11
  147. package/layout/ApplicationLayout.js +0 -186
  148. package/layout/ApplicationLayout.stories.tsx +0 -130
  149. package/layout/Icons.d.ts +0 -5
  150. package/layout/Icons.js +0 -66
  151. package/layout/SidenavContext.d.ts +0 -5
  152. package/layout/SidenavContext.js +0 -19
  153. package/layout/types.d.ts +0 -44
  154. package/layout/types.js +0 -5
  155. package/link/Link.d.ts +0 -4
  156. package/link/Link.js +0 -136
  157. package/link/Link.stories.tsx +0 -186
  158. package/link/Link.test.js +0 -83
  159. package/link/types.d.ts +0 -54
  160. package/link/types.js +0 -5
  161. package/main.d.ts +0 -49
  162. package/main.js +0 -409
  163. package/number-input/NumberInput.d.ts +0 -4
  164. package/number-input/NumberInput.js +0 -76
  165. package/number-input/NumberInput.stories.tsx +0 -115
  166. package/number-input/NumberInput.test.js +0 -506
  167. package/number-input/NumberInputContext.d.ts +0 -4
  168. package/number-input/NumberInputContext.js +0 -19
  169. package/number-input/numberInputContextTypes.d.ts +0 -19
  170. package/number-input/numberInputContextTypes.js +0 -5
  171. package/number-input/types.d.ts +0 -124
  172. package/number-input/types.js +0 -5
  173. package/paginator/Icons.js +0 -66
  174. package/paginator/Paginator.d.ts +0 -4
  175. package/paginator/Paginator.js +0 -171
  176. package/paginator/Paginator.stories.tsx +0 -63
  177. package/paginator/Paginator.test.js +0 -308
  178. package/paginator/types.d.ts +0 -38
  179. package/paginator/types.js +0 -5
  180. package/paragraph/Paragraph.d.ts +0 -6
  181. package/paragraph/Paragraph.js +0 -38
  182. package/paragraph/Paragraph.stories.tsx +0 -44
  183. package/password-input/PasswordInput.d.ts +0 -4
  184. package/password-input/PasswordInput.js +0 -166
  185. package/password-input/PasswordInput.stories.tsx +0 -131
  186. package/password-input/PasswordInput.test.js +0 -180
  187. package/password-input/types.d.ts +0 -110
  188. package/password-input/types.js +0 -5
  189. package/progress-bar/ProgressBar.d.ts +0 -4
  190. package/progress-bar/ProgressBar.js +0 -170
  191. package/progress-bar/ProgressBar.stories.jsx +0 -58
  192. package/progress-bar/ProgressBar.test.js +0 -65
  193. package/progress-bar/types.d.ts +0 -37
  194. package/progress-bar/types.js +0 -5
  195. package/quick-nav/QuickNav.d.ts +0 -4
  196. package/quick-nav/QuickNav.js +0 -118
  197. package/quick-nav/QuickNav.stories.tsx +0 -264
  198. package/quick-nav/types.d.ts +0 -21
  199. package/quick-nav/types.js +0 -5
  200. package/radio-group/Radio.d.ts +0 -4
  201. package/radio-group/Radio.js +0 -141
  202. package/radio-group/RadioGroup.d.ts +0 -4
  203. package/radio-group/RadioGroup.js +0 -283
  204. package/radio-group/RadioGroup.stories.tsx +0 -100
  205. package/radio-group/RadioGroup.test.js +0 -695
  206. package/radio-group/types.d.ts +0 -114
  207. package/radio-group/types.js +0 -5
  208. package/resultsetTable/ResultsetTable.d.ts +0 -4
  209. package/resultsetTable/ResultsetTable.js +0 -254
  210. package/resultsetTable/ResultsetTable.stories.tsx +0 -275
  211. package/resultsetTable/ResultsetTable.test.js +0 -348
  212. package/resultsetTable/types.d.ts +0 -67
  213. package/resultsetTable/types.js +0 -5
  214. package/row/Row.d.ts +0 -3
  215. package/row/Row.js +0 -127
  216. package/row/Row.stories.tsx +0 -237
  217. package/row/types.d.ts +0 -28
  218. package/row/types.js +0 -5
  219. package/select/Icons.d.ts +0 -10
  220. package/select/Icons.js +0 -93
  221. package/select/Listbox.d.ts +0 -4
  222. package/select/Listbox.js +0 -175
  223. package/select/Option.d.ts +0 -4
  224. package/select/Option.js +0 -110
  225. package/select/Select.d.ts +0 -4
  226. package/select/Select.js +0 -660
  227. package/select/Select.stories.tsx +0 -626
  228. package/select/Select.test.js +0 -2162
  229. package/select/types.d.ts +0 -212
  230. package/select/types.js +0 -5
  231. package/sidenav/Sidenav.d.ts +0 -10
  232. package/sidenav/Sidenav.js +0 -256
  233. package/sidenav/Sidenav.stories.tsx +0 -180
  234. package/sidenav/Sidenav.test.js +0 -44
  235. package/sidenav/types.d.ts +0 -73
  236. package/sidenav/types.js +0 -5
  237. package/slider/Slider.d.ts +0 -4
  238. package/slider/Slider.js +0 -318
  239. package/slider/Slider.stories.tsx +0 -177
  240. package/slider/Slider.test.js +0 -150
  241. package/slider/types.d.ts +0 -82
  242. package/slider/types.js +0 -5
  243. package/spinner/Spinner.d.ts +0 -4
  244. package/spinner/Spinner.js +0 -250
  245. package/spinner/Spinner.stories.jsx +0 -103
  246. package/spinner/Spinner.test.js +0 -64
  247. package/spinner/types.d.ts +0 -32
  248. package/spinner/types.js +0 -5
  249. package/stack/Stack.d.ts +0 -4
  250. package/stack/Stack.js +0 -56
  251. package/stack/Stack.stories.tsx +0 -263
  252. package/stack/types.d.ts +0 -32
  253. package/stack/types.js +0 -5
  254. package/switch/Switch.d.ts +0 -4
  255. package/switch/Switch.js +0 -195
  256. package/switch/Switch.stories.tsx +0 -160
  257. package/switch/Switch.test.js +0 -98
  258. package/switch/types.d.ts +0 -62
  259. package/switch/types.js +0 -5
  260. package/table/Table.d.ts +0 -4
  261. package/table/Table.js +0 -118
  262. package/table/Table.stories.jsx +0 -277
  263. package/table/Table.test.js +0 -26
  264. package/table/types.d.ts +0 -21
  265. package/table/types.js +0 -5
  266. package/tabs/Tabs.d.ts +0 -4
  267. package/tabs/Tabs.js +0 -211
  268. package/tabs/Tabs.stories.tsx +0 -112
  269. package/tabs/Tabs.test.js +0 -140
  270. package/tabs/types.d.ts +0 -82
  271. package/tabs/types.js +0 -5
  272. package/tabs-nav/NavTabs.d.ts +0 -8
  273. package/tabs-nav/NavTabs.js +0 -125
  274. package/tabs-nav/NavTabs.stories.tsx +0 -170
  275. package/tabs-nav/NavTabs.test.js +0 -82
  276. package/tabs-nav/Tab.d.ts +0 -4
  277. package/tabs-nav/Tab.js +0 -132
  278. package/tabs-nav/types.d.ts +0 -53
  279. package/tabs-nav/types.js +0 -5
  280. package/tag/Tag.d.ts +0 -4
  281. package/tag/Tag.js +0 -183
  282. package/tag/Tag.stories.tsx +0 -142
  283. package/tag/Tag.test.js +0 -60
  284. package/tag/types.d.ts +0 -69
  285. package/tag/types.js +0 -5
  286. package/text-input/Suggestion.d.ts +0 -4
  287. package/text-input/Suggestion.js +0 -55
  288. package/text-input/TextInput.d.ts +0 -4
  289. package/text-input/TextInput.js +0 -770
  290. package/text-input/TextInput.stories.tsx +0 -474
  291. package/text-input/TextInput.test.js +0 -1712
  292. package/text-input/types.d.ts +0 -178
  293. package/text-input/types.js +0 -5
  294. package/textarea/Textarea.d.ts +0 -4
  295. package/textarea/Textarea.js +0 -277
  296. package/textarea/Textarea.stories.jsx +0 -157
  297. package/textarea/Textarea.test.js +0 -437
  298. package/textarea/types.d.ts +0 -137
  299. package/textarea/types.js +0 -5
  300. package/toggle-group/ToggleGroup.d.ts +0 -4
  301. package/toggle-group/ToggleGroup.js +0 -215
  302. package/toggle-group/ToggleGroup.stories.tsx +0 -173
  303. package/toggle-group/ToggleGroup.test.js +0 -156
  304. package/toggle-group/types.d.ts +0 -105
  305. package/toggle-group/types.js +0 -5
  306. package/typography/Typography.d.ts +0 -4
  307. package/typography/Typography.js +0 -131
  308. package/typography/Typography.stories.tsx +0 -198
  309. package/typography/types.d.ts +0 -18
  310. package/typography/types.js +0 -5
  311. package/useTheme.d.ts +0 -2
  312. package/useTheme.js +0 -22
  313. package/useTranslatedLabels.d.ts +0 -2
  314. package/useTranslatedLabels.js +0 -20
  315. package/wizard/Wizard.d.ts +0 -4
  316. package/wizard/Wizard.js +0 -285
  317. package/wizard/Wizard.stories.tsx +0 -233
  318. package/wizard/Wizard.test.js +0 -141
  319. package/wizard/types.d.ts +0 -65
  320. package/wizard/types.js +0 -5
@@ -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/row/types.js DELETED
@@ -1,5 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
package/select/Icons.d.ts DELETED
@@ -1,10 +0,0 @@
1
- /// <reference types="react" />
2
- declare const selectIcons: {
3
- error: JSX.Element;
4
- arrowUp: JSX.Element;
5
- arrowDown: JSX.Element;
6
- clear: JSX.Element;
7
- selected: JSX.Element;
8
- searchOff: JSX.Element;
9
- };
10
- export default selectIcons;
package/select/Icons.js DELETED
@@ -1,93 +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 _react = _interopRequireDefault(require("react"));
11
-
12
- var selectIcons = {
13
- error: /*#__PURE__*/_react["default"].createElement("svg", {
14
- role: "img",
15
- xmlns: "http://www.w3.org/2000/svg",
16
- height: "24px",
17
- viewBox: "0 0 24 24",
18
- width: "24px",
19
- fill: "currentColor"
20
- }, /*#__PURE__*/_react["default"].createElement("path", {
21
- d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
22
- })),
23
- arrowUp: /*#__PURE__*/_react["default"].createElement("svg", {
24
- role: "img",
25
- xmlns: "http://www.w3.org/2000/svg",
26
- height: "24px",
27
- viewBox: "0 0 24 24",
28
- width: "24px",
29
- fill: "currentColor"
30
- }, /*#__PURE__*/_react["default"].createElement("path", {
31
- d: "M0 0h24v24H0V0z",
32
- fill: "none"
33
- }), /*#__PURE__*/_react["default"].createElement("path", {
34
- d: "M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"
35
- })),
36
- arrowDown: /*#__PURE__*/_react["default"].createElement("svg", {
37
- role: "img",
38
- xmlns: "http://www.w3.org/2000/svg",
39
- height: "24px",
40
- viewBox: "0 0 24 24",
41
- width: "24px",
42
- fill: "currentColor"
43
- }, /*#__PURE__*/_react["default"].createElement("path", {
44
- d: "M0 0h24v24H0V0z",
45
- fill: "none"
46
- }), /*#__PURE__*/_react["default"].createElement("path", {
47
- d: "M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"
48
- })),
49
- clear: /*#__PURE__*/_react["default"].createElement("svg", {
50
- role: "img",
51
- xmlns: "http://www.w3.org/2000/svg",
52
- width: "24",
53
- height: "24",
54
- viewBox: "0 0 24 24",
55
- fill: "currentColor"
56
- }, /*#__PURE__*/_react["default"].createElement("path", {
57
- d: "M0 0h24v24H0V0z",
58
- fill: "none"
59
- }), /*#__PURE__*/_react["default"].createElement("path", {
60
- d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
61
- })),
62
- selected: /*#__PURE__*/_react["default"].createElement("svg", {
63
- role: "img",
64
- xmlns: "http://www.w3.org/2000/svg",
65
- height: "24px",
66
- viewBox: "0 0 24 24",
67
- width: "24px",
68
- fill: "currentColor"
69
- }, /*#__PURE__*/_react["default"].createElement("path", {
70
- d: "M0 0h24v24H0z",
71
- fill: "none"
72
- }), /*#__PURE__*/_react["default"].createElement("path", {
73
- d: "M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"
74
- })),
75
- searchOff: /*#__PURE__*/_react["default"].createElement("svg", {
76
- role: "img",
77
- xmlns: "http://www.w3.org/2000/svg",
78
- height: "24px",
79
- viewBox: "0 0 24 24",
80
- width: "24px",
81
- fill: "currentColor"
82
- }, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("rect", {
83
- fill: "none",
84
- height: "24",
85
- width: "24"
86
- })), /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("path", {
87
- d: "M15.5,14h-0.79l-0.28-0.27C15.41,12.59,16,11.11,16,9.5C16,5.91,13.09,3,9.5,3C6.08,3,3.28,5.64,3.03,9h2.02 C5.3,6.75,7.18,5,9.5,5C11.99,5,14,7.01,14,9.5S11.99,14,9.5,14c-0.17,0-0.33-0.03-0.5-0.05v2.02C9.17,15.99,9.33,16,9.5,16 c1.61,0,3.09-0.59,4.23-1.57L14,14.71v0.79l5,4.99L20.49,19L15.5,14z"
88
- }), /*#__PURE__*/_react["default"].createElement("polygon", {
89
- points: "6.47,10.82 4,13.29 1.53,10.82 0.82,11.53 3.29,14 0.82,16.47 1.53,17.18 4,14.71 6.47,17.18 7.18,16.47 4.71,14 7.18,11.53"
90
- }))))
91
- };
92
- var _default = selectIcons;
93
- exports["default"] = _default;
@@ -1,4 +0,0 @@
1
- import React from "react";
2
- import { ListboxProps } from "./types";
3
- declare const _default: React.MemoExoticComponent<({ id, currentValue, options, visualFocusIndex, lastOptionIndex, multiple, optional, optionalItem, searchable, handleOptionOnClick, styles, }: ListboxProps) => JSX.Element>;
4
- export default _default;
package/select/Listbox.js DELETED
@@ -1,175 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports["default"] = void 0;
11
-
12
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
-
14
- var _react = _interopRequireWildcard(require("react"));
15
-
16
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
17
-
18
- var _useTheme = _interopRequireDefault(require("../useTheme"));
19
-
20
- var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
21
-
22
- var _Option = _interopRequireDefault(require("./Option"));
23
-
24
- var _Icons = _interopRequireDefault(require("./Icons"));
25
-
26
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
27
-
28
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
29
-
30
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
31
-
32
- var groupsHaveOptions = function groupsHaveOptions(options) {
33
- return options !== null && options !== void 0 && options[0].options ? options.some(function (groupOption) {
34
- var _groupOption$options;
35
-
36
- return ((_groupOption$options = groupOption.options) === null || _groupOption$options === void 0 ? void 0 : _groupOption$options.length) > 0;
37
- }) : true;
38
- };
39
-
40
- var Listbox = function Listbox(_ref) {
41
- var id = _ref.id,
42
- currentValue = _ref.currentValue,
43
- options = _ref.options,
44
- visualFocusIndex = _ref.visualFocusIndex,
45
- lastOptionIndex = _ref.lastOptionIndex,
46
- multiple = _ref.multiple,
47
- optional = _ref.optional,
48
- optionalItem = _ref.optionalItem,
49
- searchable = _ref.searchable,
50
- handleOptionOnClick = _ref.handleOptionOnClick,
51
- styles = _ref.styles;
52
- var colorsTheme = (0, _useTheme["default"])();
53
- var translatedLabels = (0, _useTranslatedLabels["default"])();
54
- var listboxRef = (0, _react.useRef)(null);
55
- var globalIndex = optional && !multiple ? 0 : -1; // index for options, starting from 0 to options.length -1
56
-
57
- var mapOptionFunc = function mapOptionFunc(option, mapIndex) {
58
- if (option.options) {
59
- var groupId = "group-".concat(mapIndex);
60
- return option.options.length > 0 && /*#__PURE__*/_react["default"].createElement("li", {
61
- key: "group-".concat(mapIndex)
62
- }, /*#__PURE__*/_react["default"].createElement(GroupList, {
63
- role: "group",
64
- "aria-labelledby": groupId
65
- }, /*#__PURE__*/_react["default"].createElement(GroupLabel, {
66
- role: "presentation",
67
- id: groupId
68
- }, option.label), option.options.map(function (singleOption) {
69
- globalIndex++;
70
- return /*#__PURE__*/_react["default"].createElement(_Option["default"], {
71
- key: "option-".concat(singleOption.value),
72
- id: "option-".concat(globalIndex),
73
- option: singleOption,
74
- onClick: handleOptionOnClick,
75
- multiple: multiple,
76
- visualFocused: visualFocusIndex === globalIndex,
77
- isGroupedOption: true,
78
- isLastOption: lastOptionIndex === globalIndex,
79
- isSelected: multiple ? currentValue.includes(singleOption.value) : currentValue === singleOption.value
80
- });
81
- })));
82
- } else {
83
- globalIndex++;
84
- return /*#__PURE__*/_react["default"].createElement(_Option["default"], {
85
- key: "option-".concat(option.value),
86
- id: "option-".concat(globalIndex),
87
- option: option,
88
- onClick: handleOptionOnClick,
89
- multiple: multiple,
90
- visualFocused: visualFocusIndex === globalIndex,
91
- isLastOption: lastOptionIndex === globalIndex,
92
- isSelected: multiple ? currentValue.includes(option.value) : currentValue === option.value
93
- });
94
- }
95
- };
96
-
97
- (0, _react.useLayoutEffect)(function () {
98
- if (currentValue && !multiple) {
99
- var _listEl$scrollTo;
100
-
101
- var listEl = listboxRef === null || listboxRef === void 0 ? void 0 : listboxRef.current;
102
- var selectedListOptionEl = listEl === null || listEl === void 0 ? void 0 : listEl.querySelector("[aria-selected='true']");
103
- listEl === null || listEl === void 0 ? void 0 : (_listEl$scrollTo = listEl.scrollTo) === null || _listEl$scrollTo === void 0 ? void 0 : _listEl$scrollTo.call(listEl, {
104
- top: (selectedListOptionEl === null || selectedListOptionEl === void 0 ? void 0 : selectedListOptionEl.offsetTop) - (listEl === null || listEl === void 0 ? void 0 : listEl.clientHeight) / 2
105
- });
106
- }
107
- }, [currentValue, multiple]);
108
- (0, _react.useLayoutEffect)(function () {
109
- var _listboxRef$current, _visualFocusedOptionE;
110
-
111
- var visualFocusedOptionEl = listboxRef === null || listboxRef === void 0 ? void 0 : (_listboxRef$current = listboxRef.current) === null || _listboxRef$current === void 0 ? void 0 : _listboxRef$current.querySelectorAll("[role='option']")[visualFocusIndex];
112
- visualFocusedOptionEl === null || visualFocusedOptionEl === void 0 ? void 0 : (_visualFocusedOptionE = visualFocusedOptionEl.scrollIntoView) === null || _visualFocusedOptionE === void 0 ? void 0 : _visualFocusedOptionE.call(visualFocusedOptionEl, {
113
- block: "nearest",
114
- inline: "start"
115
- });
116
- }, [visualFocusIndex]);
117
- return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
118
- theme: colorsTheme.select
119
- }, /*#__PURE__*/_react["default"].createElement(ListboxContainer, {
120
- id: id,
121
- onClick: function onClick(event) {
122
- event.stopPropagation();
123
- },
124
- onMouseDown: function onMouseDown(event) {
125
- event.preventDefault();
126
- },
127
- ref: listboxRef,
128
- role: "listbox",
129
- "aria-multiselectable": multiple,
130
- "aria-orientation": "vertical",
131
- style: styles
132
- }, searchable && (options.length === 0 || !groupsHaveOptions(options)) ? /*#__PURE__*/_react["default"].createElement(OptionsSystemMessage, null, /*#__PURE__*/_react["default"].createElement(NoMatchesFoundIcon, null, _Icons["default"].searchOff), translatedLabels.select.noMatchesErrorMessage) : optional && !multiple && /*#__PURE__*/_react["default"].createElement(_Option["default"], {
133
- key: "option-".concat(optionalItem.value),
134
- id: "option-".concat(0),
135
- option: optionalItem,
136
- onClick: handleOptionOnClick,
137
- multiple: multiple,
138
- visualFocused: visualFocusIndex === 0,
139
- isGroupedOption: false,
140
- isLastOption: lastOptionIndex === 0,
141
- isSelected: multiple ? currentValue.includes(optionalItem.value) : currentValue === optionalItem.value
142
- }), options.map(mapOptionFunc)));
143
- };
144
-
145
- var ListboxContainer = _styledComponents["default"].ul(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n box-sizing: border-box;\n max-height: 304px;\n overflow-y: auto;\n margin: 0;\n padding: 0.25rem 0;\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 0.25rem;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n cursor: default;\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n"])), function (props) {
146
- return props.theme.listDialogBackgroundColor;
147
- }, function (props) {
148
- return props.theme.listDialogBorderColor;
149
- }, function (props) {
150
- return props.theme.listOptionFontColor;
151
- }, function (props) {
152
- return props.theme.fontFamily;
153
- }, function (props) {
154
- return props.theme.listOptionFontSize;
155
- }, function (props) {
156
- return props.theme.listOptionFontStyle;
157
- }, function (props) {
158
- return props.theme.listOptionFontWeight;
159
- });
160
-
161
- var OptionsSystemMessage = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n padding: 4px 16px;\n color: ", ";\n font-size: 0.875rem;\n line-height: 1.715em;\n"])), function (props) {
162
- return props.theme.systemMessageFontColor;
163
- });
164
-
165
- var NoMatchesFoundIcon = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-wrap: wrap;\n align-content: center;\n height: 16px;\n width: 16px;\n padding: 4px;\n margin-right: 0.25rem;\n"])));
166
-
167
- var GroupList = _styledComponents["default"].ul(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n padding: 0;\n"])));
168
-
169
- var GroupLabel = _styledComponents["default"].li(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n padding: 4px 16px;\n font-weight: ", ";\n line-height: 1.715em;\n"])), function (props) {
170
- return props.theme.listGroupLabelFontWeight;
171
- });
172
-
173
- var _default = /*#__PURE__*/_react["default"].memo(Listbox);
174
-
175
- exports["default"] = _default;
@@ -1,4 +0,0 @@
1
- import React from "react";
2
- import { OptionProps } from "../select/types";
3
- declare const _default: React.MemoExoticComponent<({ id, option, onClick, multiple, visualFocused, isGroupedOption, isLastOption, isSelected, }: OptionProps) => JSX.Element>;
4
- export default _default;