@dxc-technology/halstack-react 0.0.0-1c45756 → 0.0.0-1c4cbc0

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