@dxc-technology/halstack-react 0.0.0-c908d78 → 0.0.0-cae3419

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 (257) hide show
  1. package/BackgroundColorContext.d.ts +10 -0
  2. package/BackgroundColorContext.js +1 -4
  3. package/ThemeContext.d.ts +10 -0
  4. package/ThemeContext.js +26 -29
  5. package/accordion/Accordion.d.ts +1 -1
  6. package/accordion/Accordion.js +11 -22
  7. package/accordion/Accordion.stories.tsx +307 -0
  8. package/accordion/Accordion.test.js +57 -0
  9. package/accordion/types.d.ts +4 -8
  10. package/accordion-group/AccordionGroup.js +2 -2
  11. package/accordion-group/AccordionGroup.stories.tsx +225 -0
  12. package/accordion-group/AccordionGroup.test.js +133 -0
  13. package/accordion-group/types.d.ts +4 -8
  14. package/alert/Alert.js +2 -2
  15. package/alert/Alert.stories.tsx +170 -0
  16. package/alert/Alert.test.js +92 -0
  17. package/alert/types.d.ts +1 -1
  18. package/badge/Badge.d.ts +4 -0
  19. package/badge/Badge.js +1 -1
  20. package/badge/types.d.ts +4 -0
  21. package/badge/types.js +5 -0
  22. package/bleed/Bleed.d.ts +3 -0
  23. package/bleed/Bleed.js +84 -0
  24. package/bleed/Bleed.stories.tsx +342 -0
  25. package/bleed/types.d.ts +13 -0
  26. package/bleed/types.js +5 -0
  27. package/box/Box.d.ts +1 -1
  28. package/box/Box.js +4 -7
  29. package/box/Box.test.js +18 -0
  30. package/box/types.d.ts +0 -4
  31. package/button/Button.d.ts +1 -1
  32. package/button/Button.js +13 -19
  33. package/button/Button.stories.tsx +222 -241
  34. package/button/Button.test.js +35 -0
  35. package/button/types.d.ts +5 -9
  36. package/card/Card.js +5 -6
  37. package/card/Card.stories.tsx +201 -0
  38. package/card/Card.test.js +50 -0
  39. package/card/ice-cream.jpg +0 -0
  40. package/card/types.d.ts +4 -6
  41. package/checkbox/Checkbox.js +2 -2
  42. package/checkbox/Checkbox.test.js +65 -0
  43. package/checkbox/types.d.ts +2 -2
  44. package/chip/Chip.d.ts +4 -0
  45. package/chip/Chip.js +16 -76
  46. package/chip/Chip.stories.tsx +119 -0
  47. package/chip/Chip.test.js +56 -0
  48. package/chip/types.d.ts +45 -0
  49. package/chip/types.js +5 -0
  50. package/common/variables.js +69 -265
  51. package/date-input/DateInput.js +10 -13
  52. package/date-input/DateInput.stories.tsx +138 -0
  53. package/date-input/DateInput.test.js +469 -0
  54. package/dialog/Dialog.js +4 -3
  55. package/dialog/Dialog.stories.tsx +212 -0
  56. package/dialog/Dialog.test.js +40 -0
  57. package/dropdown/Dropdown.d.ts +1 -1
  58. package/dropdown/Dropdown.js +13 -35
  59. package/dropdown/Dropdown.stories.tsx +249 -0
  60. package/dropdown/Dropdown.test.js +189 -0
  61. package/dropdown/types.d.ts +6 -15
  62. package/file-input/FileInput.d.ts +4 -0
  63. package/file-input/FileInput.js +167 -109
  64. package/file-input/FileInput.stories.tsx +507 -0
  65. package/file-input/FileInput.test.js +457 -0
  66. package/file-input/FileItem.d.ts +14 -0
  67. package/file-input/FileItem.js +12 -21
  68. package/file-input/types.d.ts +112 -0
  69. package/file-input/types.js +5 -0
  70. package/footer/Footer.d.ts +1 -1
  71. package/footer/Footer.js +28 -36
  72. package/footer/{Footer.stories.jsx → Footer.stories.tsx} +1 -22
  73. package/footer/Footer.test.js +109 -0
  74. package/footer/Icons.d.ts +2 -0
  75. package/footer/Icons.js +3 -3
  76. package/footer/types.d.ts +22 -18
  77. package/header/Header.js +2 -2
  78. package/header/Header.stories.tsx +162 -0
  79. package/header/Header.test.js +63 -0
  80. package/header/Icons.d.ts +2 -0
  81. package/header/types.d.ts +4 -2
  82. package/heading/Heading.d.ts +4 -0
  83. package/heading/Heading.js +7 -24
  84. package/heading/Heading.stories.tsx +54 -0
  85. package/heading/Heading.test.js +186 -0
  86. package/heading/types.d.ts +33 -0
  87. package/heading/types.js +5 -0
  88. package/inset/Inset.d.ts +3 -0
  89. package/inset/Inset.js +84 -0
  90. package/inset/Inset.stories.tsx +229 -0
  91. package/inset/types.d.ts +13 -0
  92. package/inset/types.js +5 -0
  93. package/layout/ApplicationLayout.d.ts +10 -0
  94. package/layout/ApplicationLayout.js +17 -21
  95. package/layout/ApplicationLayout.stories.tsx +171 -0
  96. package/layout/types.d.ts +57 -0
  97. package/layout/types.js +5 -0
  98. package/link/Link.js +10 -18
  99. package/link/Link.stories.tsx +151 -0
  100. package/link/Link.test.js +91 -0
  101. package/link/types.d.ts +5 -9
  102. package/list/List.d.ts +4 -0
  103. package/list/List.js +47 -0
  104. package/list/List.stories.tsx +95 -0
  105. package/list/types.d.ts +7 -0
  106. package/list/types.js +5 -0
  107. package/main.d.ts +10 -8
  108. package/main.js +54 -38
  109. package/number-input/NumberInput.d.ts +4 -0
  110. package/number-input/NumberInput.js +5 -50
  111. package/number-input/{NumberInput.stories.jsx → NumberInput.stories.tsx} +0 -0
  112. package/number-input/NumberInput.test.js +508 -0
  113. package/number-input/NumberInputContext.d.ts +4 -0
  114. package/number-input/NumberInputContext.js +5 -2
  115. package/number-input/numberInputContextTypes.d.ts +19 -0
  116. package/number-input/numberInputContextTypes.js +5 -0
  117. package/number-input/types.d.ts +117 -0
  118. package/number-input/types.js +5 -0
  119. package/package.json +4 -2
  120. package/paginator/Paginator.js +2 -8
  121. package/paginator/Paginator.test.js +266 -0
  122. package/password-input/PasswordInput.js +19 -18
  123. package/password-input/PasswordInput.stories.tsx +3 -3
  124. package/password-input/PasswordInput.test.js +183 -0
  125. package/password-input/types.d.ts +17 -10
  126. package/progress-bar/ProgressBar.js +4 -4
  127. package/progress-bar/ProgressBar.test.js +65 -0
  128. package/radio/Radio.js +2 -2
  129. package/radio/Radio.test.js +71 -0
  130. package/radio/types.d.ts +2 -2
  131. package/radio-group/Radio.d.ts +4 -0
  132. package/radio-group/Radio.js +141 -0
  133. package/radio-group/RadioGroup.d.ts +4 -0
  134. package/radio-group/RadioGroup.js +280 -0
  135. package/radio-group/RadioGroup.stories.tsx +100 -0
  136. package/radio-group/RadioGroup.test.js +695 -0
  137. package/radio-group/types.d.ts +114 -0
  138. package/radio-group/types.js +5 -0
  139. package/resultsetTable/ResultsetTable.d.ts +4 -0
  140. package/resultsetTable/ResultsetTable.js +9 -29
  141. package/resultsetTable/ResultsetTable.stories.tsx +275 -0
  142. package/resultsetTable/ResultsetTable.test.js +306 -0
  143. package/resultsetTable/types.d.ts +67 -0
  144. package/resultsetTable/types.js +5 -0
  145. package/row/Row.d.ts +3 -0
  146. package/row/Row.js +127 -0
  147. package/row/Row.stories.tsx +237 -0
  148. package/row/types.d.ts +10 -0
  149. package/row/types.js +5 -0
  150. package/select/Icons.d.ts +10 -0
  151. package/select/Icons.js +93 -0
  152. package/select/Option.d.ts +4 -0
  153. package/select/Option.js +110 -0
  154. package/select/Select.d.ts +4 -0
  155. package/select/Select.js +101 -226
  156. package/select/Select.stories.tsx +582 -0
  157. package/select/Select.test.js +2016 -0
  158. package/select/types.d.ts +191 -0
  159. package/select/types.js +5 -0
  160. package/sidenav/Sidenav.d.ts +9 -0
  161. package/sidenav/Sidenav.js +6 -15
  162. package/sidenav/Sidenav.stories.tsx +182 -0
  163. package/sidenav/Sidenav.test.js +56 -0
  164. package/sidenav/types.d.ts +50 -0
  165. package/sidenav/types.js +5 -0
  166. package/slider/Slider.d.ts +1 -1
  167. package/slider/Slider.js +43 -32
  168. package/slider/Slider.stories.tsx +177 -0
  169. package/slider/Slider.test.js +129 -0
  170. package/slider/types.d.ts +2 -7
  171. package/spinner/Spinner.js +2 -2
  172. package/spinner/Spinner.stories.jsx +1 -0
  173. package/spinner/Spinner.test.js +64 -0
  174. package/stack/Stack.d.ts +3 -0
  175. package/stack/Stack.js +97 -0
  176. package/stack/Stack.stories.tsx +164 -0
  177. package/stack/types.d.ts +24 -0
  178. package/stack/types.js +5 -0
  179. package/switch/Switch.js +2 -2
  180. package/switch/Switch.stories.tsx +1 -1
  181. package/switch/Switch.test.js +73 -0
  182. package/table/Table.js +3 -3
  183. package/table/Table.stories.jsx +2 -1
  184. package/table/Table.test.js +26 -0
  185. package/tabs/Tabs.js +11 -9
  186. package/tabs/Tabs.stories.tsx +120 -0
  187. package/tabs/Tabs.test.js +123 -0
  188. package/tabs/types.d.ts +25 -18
  189. package/tag/Tag.d.ts +1 -1
  190. package/tag/Tag.js +16 -23
  191. package/tag/Tag.stories.tsx +26 -29
  192. package/tag/Tag.test.js +60 -0
  193. package/tag/types.d.ts +23 -14
  194. package/text/Text.d.ts +7 -0
  195. package/text/Text.js +30 -0
  196. package/text/Text.stories.tsx +19 -0
  197. package/text-input/TextInput.d.ts +4 -0
  198. package/text-input/TextInput.js +62 -89
  199. package/text-input/TextInput.stories.tsx +474 -0
  200. package/text-input/TextInput.test.js +1725 -0
  201. package/text-input/types.d.ts +163 -0
  202. package/text-input/types.js +5 -0
  203. package/textarea/Textarea.d.ts +4 -0
  204. package/textarea/Textarea.js +35 -64
  205. package/textarea/Textarea.stories.jsx +37 -15
  206. package/textarea/Textarea.test.js +447 -0
  207. package/textarea/types.d.ts +134 -0
  208. package/textarea/types.js +5 -0
  209. package/toggle-group/ToggleGroup.d.ts +4 -0
  210. package/toggle-group/ToggleGroup.js +16 -45
  211. package/toggle-group/ToggleGroup.stories.tsx +173 -0
  212. package/toggle-group/ToggleGroup.test.js +125 -0
  213. package/toggle-group/types.d.ts +97 -0
  214. package/toggle-group/types.js +5 -0
  215. package/useTheme.d.ts +2 -0
  216. package/useTheme.js +1 -1
  217. package/wizard/Wizard.d.ts +4 -0
  218. package/wizard/Wizard.js +69 -59
  219. package/wizard/Wizard.stories.tsx +224 -0
  220. package/wizard/Wizard.test.js +128 -0
  221. package/wizard/types.d.ts +60 -0
  222. package/wizard/types.js +5 -0
  223. package/V3Select/V3Select.js +0 -455
  224. package/V3Select/index.d.ts +0 -27
  225. package/V3Textarea/V3Textarea.js +0 -260
  226. package/V3Textarea/index.d.ts +0 -27
  227. package/chip/index.d.ts +0 -22
  228. package/date/Date.js +0 -373
  229. package/date/index.d.ts +0 -27
  230. package/file-input/index.d.ts +0 -81
  231. package/heading/index.d.ts +0 -17
  232. package/input-text/Icons.js +0 -22
  233. package/input-text/InputText.js +0 -611
  234. package/input-text/index.d.ts +0 -36
  235. package/number-input/index.d.ts +0 -113
  236. package/resultsetTable/index.d.ts +0 -19
  237. package/select/index.d.ts +0 -131
  238. package/sidenav/index.d.ts +0 -13
  239. package/text-input/index.d.ts +0 -135
  240. package/textarea/index.d.ts +0 -117
  241. package/toggle/Toggle.js +0 -186
  242. package/toggle/index.d.ts +0 -21
  243. package/toggle-group/index.d.ts +0 -21
  244. package/upload/Upload.js +0 -201
  245. package/upload/buttons-upload/ButtonsUpload.js +0 -111
  246. package/upload/buttons-upload/Icons.js +0 -40
  247. package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
  248. package/upload/dragAndDropArea/Icons.js +0 -39
  249. package/upload/file-upload/FileToUpload.js +0 -115
  250. package/upload/file-upload/Icons.js +0 -66
  251. package/upload/files-upload/FilesToUpload.js +0 -109
  252. package/upload/index.d.ts +0 -15
  253. package/upload/transaction/Icons.js +0 -160
  254. package/upload/transaction/Transaction.js +0 -104
  255. package/upload/transactions/Transactions.js +0 -94
  256. package/wizard/Icons.js +0 -65
  257. package/wizard/index.d.ts +0 -18
package/radio-group/RadioGroup.stories.tsx ADDED
@@ -0,0 +1,100 @@
1
+ import ExampleContainer from "../../.storybook/components/ExampleContainer";
2
+ import Title from "../../.storybook/components/Title";
3
+ import DxcRadioGroup from "./RadioGroup";
4
+
5
+ export default {
6
+ title: "Radio Group",
7
+ component: DxcRadioGroup,
8
+ };
9
+
10
+ const single_option = [{ label: "Option A", value: "A" }];
11
+
12
+ const options = [
13
+ { label: "Option 1", value: "1" },
14
+ { label: "Option 2", value: "2" },
15
+ { label: "Option 3", value: "3" },
16
+ { label: "Option 4", value: "4" },
17
+ ];
18
+
19
+ const single_disabled_options = [{ label: "Option A", value: "A", disabled: true }];
20
+
21
+ export const Chromatic = () => (
22
+ <>
23
+ <Title title="Radio input states" theme="light" level={2} />
24
+ <ExampleContainer>
25
+ <Title title="Enabled" theme="light" level={4} />
26
+ <DxcRadioGroup label="Example" defaultValue="A" options={single_option} />
27
+ </ExampleContainer>
28
+ <ExampleContainer pseudoState="pseudo-hover">
29
+ <Title title="Hovered" theme="light" level={4} />
30
+ <DxcRadioGroup label="Example" defaultValue="A" options={single_option} />
31
+ </ExampleContainer>
32
+ <ExampleContainer pseudoState="pseudo-active">
33
+ <Title title="Active" theme="light" level={4} />
34
+ <DxcRadioGroup label="Example" defaultValue="A" options={single_option} />
35
+ </ExampleContainer>
36
+ <ExampleContainer pseudoState="pseudo-focus">
37
+ <Title title="Focused" theme="light" level={4} />
38
+ <DxcRadioGroup label="Example" defaultValue="A" options={single_option} />
39
+ </ExampleContainer>
40
+ <ExampleContainer>
41
+ <Title title="Disabled" theme="light" level={4} />
42
+ <DxcRadioGroup label="Example" options={single_disabled_options} defaultValue="A" />
43
+ </ExampleContainer>
44
+ <Title title="Readonly radio input sub-states" theme="light" level={3} />
45
+ <ExampleContainer>
46
+ <Title title="Enabled" theme="light" level={4} />
47
+ <DxcRadioGroup label="Example" options={single_option} defaultValue="A" readonly />
48
+ </ExampleContainer>
49
+ <ExampleContainer pseudoState="pseudo-hover">
50
+ <Title title="Hovered" theme="light" level={4} />
51
+ <DxcRadioGroup label="Example" options={single_option} defaultValue="A" readonly />
52
+ </ExampleContainer>
53
+ <ExampleContainer pseudoState="pseudo-active">
54
+ <Title title="Active" theme="light" level={4} />
55
+ <DxcRadioGroup label="Example" options={single_option} defaultValue="A" readonly />
56
+ </ExampleContainer>
57
+ <Title title="Error radio input sub-states" theme="light" level={3} />
58
+ <ExampleContainer>
59
+ <Title title="Enabled" theme="light" level={4} />
60
+ <DxcRadioGroup label="Example" options={single_option} defaultValue="A" error="Error message" />
61
+ </ExampleContainer>
62
+ <ExampleContainer pseudoState="pseudo-hover">
63
+ <Title title="Hovered" theme="light" level={4} />
64
+ <DxcRadioGroup label="Example" options={single_option} defaultValue="A" readonly error="Error message" />
65
+ </ExampleContainer>
66
+ <ExampleContainer pseudoState="pseudo-active">
67
+ <Title title="Active" theme="light" level={4} />
68
+ <DxcRadioGroup label="Example" options={single_option} defaultValue="A" readonly error="Error message" />
69
+ </ExampleContainer>
70
+ <Title title="Variants" theme="light" level={2} />
71
+ <ExampleContainer>
72
+ <Title title="Column" theme="light" level={4} />
73
+ <DxcRadioGroup label="Example" helperText="Helper text" options={options} />
74
+ </ExampleContainer>
75
+ <ExampleContainer>
76
+ <Title title="Row" theme="light" level={4} />
77
+ <DxcRadioGroup label="Example" helperText="Helper text" options={options} stacking="row" />
78
+ </ExampleContainer>
79
+ <ExampleContainer>
80
+ <Title title="Optional" theme="light" level={4} />
81
+ <DxcRadioGroup label="Example" optional helperText="Helper text" options={options} stacking="row" />
82
+ </ExampleContainer>
83
+ <ExampleContainer>
84
+ <Title title="Disabled" theme="light" level={4} />
85
+ <DxcRadioGroup label="Example" helperText="Helper text" options={options} disabled />
86
+ </ExampleContainer>
87
+ <ExampleContainer>
88
+ <Title title="Readonly" theme="light" level={4} />
89
+ <DxcRadioGroup label="Example" readonly helperText="Helper text" options={options} />
90
+ </ExampleContainer>
91
+ <ExampleContainer>
92
+ <Title title="Error space reserved" theme="light" level={4} />
93
+ <DxcRadioGroup label="Example" error="" helperText="Helper text" options={options} />
94
+ </ExampleContainer>
95
+ <ExampleContainer>
96
+ <Title title="Error" theme="light" level={4} />
97
+ <DxcRadioGroup label="Example" error="Error message" helperText="Helper text" options={options} />
98
+ </ExampleContainer>
99
+ </>
100
+ );