@dxc-technology/halstack-react 0.0.0-0bd2807 → 0.0.0-0d50ab3

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 (233) 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.test.js +92 -0
  16. package/alert/types.d.ts +1 -1
  17. package/badge/Badge.d.ts +4 -0
  18. package/badge/Badge.js +1 -1
  19. package/badge/types.d.ts +4 -0
  20. package/badge/types.js +5 -0
  21. package/bleed/Bleed.d.ts +3 -0
  22. package/bleed/Bleed.js +84 -0
  23. package/bleed/Bleed.stories.tsx +342 -0
  24. package/bleed/types.d.ts +13 -0
  25. package/bleed/types.js +5 -0
  26. package/box/Box.js +2 -2
  27. package/box/Box.test.js +18 -0
  28. package/button/Button.d.ts +1 -1
  29. package/button/Button.js +13 -19
  30. package/button/Button.stories.tsx +6 -8
  31. package/button/Button.test.js +35 -0
  32. package/button/types.d.ts +5 -9
  33. package/card/Card.js +5 -6
  34. package/card/Card.stories.tsx +201 -0
  35. package/card/Card.test.js +50 -0
  36. package/card/ice-cream.jpg +0 -0
  37. package/card/types.d.ts +4 -6
  38. package/checkbox/Checkbox.js +2 -2
  39. package/checkbox/Checkbox.test.js +65 -0
  40. package/checkbox/types.d.ts +2 -2
  41. package/chip/Chip.d.ts +4 -0
  42. package/chip/Chip.js +16 -76
  43. package/chip/Chip.stories.tsx +6 -8
  44. package/chip/Chip.test.js +56 -0
  45. package/chip/types.d.ts +45 -0
  46. package/chip/types.js +5 -0
  47. package/common/variables.js +56 -260
  48. package/date-input/DateInput.js +10 -13
  49. package/date-input/DateInput.test.js +469 -0
  50. package/dialog/Dialog.js +4 -3
  51. package/dialog/Dialog.test.js +40 -0
  52. package/dropdown/Dropdown.d.ts +1 -1
  53. package/dropdown/Dropdown.js +13 -35
  54. package/dropdown/Dropdown.stories.tsx +249 -0
  55. package/dropdown/Dropdown.test.js +189 -0
  56. package/dropdown/types.d.ts +6 -15
  57. package/file-input/FileInput.d.ts +4 -0
  58. package/file-input/FileInput.js +167 -109
  59. package/file-input/FileInput.stories.tsx +507 -0
  60. package/file-input/FileInput.test.js +457 -0
  61. package/file-input/FileItem.d.ts +14 -0
  62. package/file-input/FileItem.js +12 -21
  63. package/file-input/types.d.ts +112 -0
  64. package/file-input/types.js +5 -0
  65. package/footer/Footer.d.ts +1 -1
  66. package/footer/Footer.js +28 -36
  67. package/footer/{Footer.stories.jsx → Footer.stories.tsx} +1 -22
  68. package/footer/Footer.test.js +109 -0
  69. package/footer/Icons.d.ts +2 -0
  70. package/footer/Icons.js +3 -3
  71. package/footer/types.d.ts +21 -17
  72. package/header/Header.js +2 -2
  73. package/header/Header.stories.tsx +162 -0
  74. package/header/Header.test.js +63 -0
  75. package/header/Icons.d.ts +2 -0
  76. package/header/types.d.ts +4 -2
  77. package/heading/Heading.js +1 -1
  78. package/heading/Heading.stories.tsx +54 -0
  79. package/heading/Heading.test.js +186 -0
  80. package/inset/Inset.d.ts +3 -0
  81. package/inset/Inset.js +84 -0
  82. package/inset/Inset.stories.tsx +229 -0
  83. package/inset/types.d.ts +13 -0
  84. package/inset/types.js +5 -0
  85. package/layout/ApplicationLayout.d.ts +10 -0
  86. package/layout/ApplicationLayout.js +17 -21
  87. package/layout/ApplicationLayout.stories.tsx +171 -0
  88. package/layout/types.d.ts +57 -0
  89. package/layout/types.js +5 -0
  90. package/link/Link.js +10 -18
  91. package/link/Link.stories.tsx +82 -1
  92. package/link/Link.test.js +91 -0
  93. package/link/types.d.ts +5 -9
  94. package/list/List.d.ts +4 -0
  95. package/list/List.js +47 -0
  96. package/list/List.stories.tsx +95 -0
  97. package/list/types.d.ts +7 -0
  98. package/list/types.js +5 -0
  99. package/main.d.ts +10 -8
  100. package/main.js +54 -38
  101. package/number-input/NumberInput.js +3 -6
  102. package/number-input/NumberInput.test.js +508 -0
  103. package/number-input/NumberInputContext.d.ts +4 -0
  104. package/number-input/NumberInputContext.js +5 -2
  105. package/number-input/numberInputContextTypes.d.ts +19 -0
  106. package/number-input/numberInputContextTypes.js +5 -0
  107. package/package.json +4 -2
  108. package/paginator/Paginator.js +2 -8
  109. package/paginator/Paginator.test.js +266 -0
  110. package/password-input/PasswordInput.js +19 -18
  111. package/password-input/PasswordInput.stories.tsx +3 -3
  112. package/password-input/PasswordInput.test.js +183 -0
  113. package/password-input/types.d.ts +17 -10
  114. package/progress-bar/ProgressBar.js +4 -4
  115. package/progress-bar/ProgressBar.test.js +65 -0
  116. package/radio/Radio.js +2 -2
  117. package/radio/Radio.test.js +71 -0
  118. package/radio/types.d.ts +2 -2
  119. package/radio-group/Radio.d.ts +4 -0
  120. package/radio-group/Radio.js +141 -0
  121. package/radio-group/RadioGroup.d.ts +4 -0
  122. package/radio-group/RadioGroup.js +280 -0
  123. package/radio-group/RadioGroup.stories.tsx +100 -0
  124. package/radio-group/RadioGroup.test.js +695 -0
  125. package/radio-group/types.d.ts +114 -0
  126. package/radio-group/types.js +5 -0
  127. package/resultsetTable/ResultsetTable.d.ts +4 -0
  128. package/resultsetTable/ResultsetTable.js +9 -29
  129. package/resultsetTable/ResultsetTable.stories.tsx +275 -0
  130. package/resultsetTable/ResultsetTable.test.js +306 -0
  131. package/resultsetTable/types.d.ts +67 -0
  132. package/resultsetTable/types.js +5 -0
  133. package/row/Row.d.ts +3 -0
  134. package/row/Row.js +127 -0
  135. package/row/Row.stories.tsx +237 -0
  136. package/row/types.d.ts +10 -0
  137. package/row/types.js +5 -0
  138. package/select/Icons.d.ts +10 -0
  139. package/select/Icons.js +93 -0
  140. package/select/Option.d.ts +4 -0
  141. package/select/Option.js +110 -0
  142. package/select/Select.d.ts +4 -0
  143. package/select/Select.js +69 -194
  144. package/select/Select.stories.tsx +72 -62
  145. package/select/Select.test.js +1900 -0
  146. package/select/types.d.ts +183 -0
  147. package/select/types.js +5 -0
  148. package/sidenav/Sidenav.js +2 -2
  149. package/sidenav/Sidenav.stories.tsx +182 -0
  150. package/sidenav/Sidenav.test.js +56 -0
  151. package/slider/Slider.js +4 -4
  152. package/slider/Slider.test.js +129 -0
  153. package/spinner/Spinner.js +2 -2
  154. package/spinner/Spinner.stories.jsx +1 -0
  155. package/spinner/Spinner.test.js +64 -0
  156. package/stack/Stack.d.ts +3 -0
  157. package/stack/Stack.js +97 -0
  158. package/stack/Stack.stories.tsx +164 -0
  159. package/stack/types.d.ts +9 -0
  160. package/stack/types.js +5 -0
  161. package/switch/Switch.js +2 -2
  162. package/switch/Switch.stories.tsx +1 -1
  163. package/switch/Switch.test.js +73 -0
  164. package/table/Table.js +3 -3
  165. package/table/Table.stories.jsx +2 -1
  166. package/table/Table.test.js +26 -0
  167. package/tabs/Tabs.js +11 -9
  168. package/tabs/Tabs.stories.tsx +120 -0
  169. package/tabs/Tabs.test.js +123 -0
  170. package/tabs/types.d.ts +25 -18
  171. package/tag/Tag.d.ts +1 -1
  172. package/tag/Tag.js +7 -12
  173. package/tag/Tag.stories.tsx +15 -22
  174. package/tag/Tag.test.js +60 -0
  175. package/tag/types.d.ts +23 -14
  176. package/text/Text.d.ts +7 -0
  177. package/text/Text.js +30 -0
  178. package/text/Text.stories.tsx +19 -0
  179. package/text-input/TextInput.d.ts +4 -0
  180. package/text-input/TextInput.js +62 -89
  181. package/text-input/TextInput.stories.tsx +474 -0
  182. package/text-input/TextInput.test.js +1725 -0
  183. package/text-input/types.d.ts +163 -0
  184. package/text-input/types.js +5 -0
  185. package/textarea/Textarea.d.ts +4 -0
  186. package/textarea/Textarea.js +32 -63
  187. package/textarea/Textarea.stories.jsx +34 -12
  188. package/textarea/Textarea.test.js +436 -0
  189. package/textarea/types.d.ts +130 -0
  190. package/textarea/types.js +5 -0
  191. package/toggle-group/ToggleGroup.d.ts +4 -0
  192. package/toggle-group/ToggleGroup.js +16 -45
  193. package/toggle-group/ToggleGroup.stories.tsx +23 -28
  194. package/toggle-group/ToggleGroup.test.js +125 -0
  195. package/toggle-group/types.d.ts +97 -0
  196. package/toggle-group/types.js +5 -0
  197. package/useTheme.d.ts +2 -0
  198. package/useTheme.js +1 -1
  199. package/wizard/Wizard.js +59 -9
  200. package/wizard/{Wizard.stories.jsx → Wizard.stories.tsx} +0 -0
  201. package/wizard/Wizard.test.js +128 -0
  202. package/wizard/types.d.ts +3 -7
  203. package/V3Select/V3Select.js +0 -455
  204. package/V3Select/index.d.ts +0 -27
  205. package/V3Textarea/V3Textarea.js +0 -260
  206. package/V3Textarea/index.d.ts +0 -27
  207. package/chip/index.d.ts +0 -22
  208. package/date/Date.js +0 -373
  209. package/date/index.d.ts +0 -27
  210. package/file-input/index.d.ts +0 -81
  211. package/input-text/Icons.js +0 -22
  212. package/input-text/InputText.js +0 -611
  213. package/input-text/index.d.ts +0 -36
  214. package/resultsetTable/index.d.ts +0 -19
  215. package/select/index.d.ts +0 -131
  216. package/text-input/index.d.ts +0 -135
  217. package/textarea/index.d.ts +0 -117
  218. package/toggle/Toggle.js +0 -186
  219. package/toggle/index.d.ts +0 -21
  220. package/toggle-group/index.d.ts +0 -21
  221. package/upload/Upload.js +0 -201
  222. package/upload/buttons-upload/ButtonsUpload.js +0 -111
  223. package/upload/buttons-upload/Icons.js +0 -40
  224. package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
  225. package/upload/dragAndDropArea/Icons.js +0 -39
  226. package/upload/file-upload/FileToUpload.js +0 -115
  227. package/upload/file-upload/Icons.js +0 -66
  228. package/upload/files-upload/FilesToUpload.js +0 -109
  229. package/upload/index.d.ts +0 -15
  230. package/upload/transaction/Icons.js +0 -160
  231. package/upload/transaction/Transaction.js +0 -104
  232. package/upload/transactions/Transactions.js +0 -94
  233. package/wizard/Icons.js +0 -65
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
+ );