@dxc-technology/halstack-react 0.0.0-8f8dc10 → 0.0.0-9005464

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 (75) hide show
  1. package/alert/Alert.stories.tsx +170 -0
  2. package/box/Box.d.ts +4 -0
  3. package/box/Box.js +9 -32
  4. package/box/{Box.stories.jsx → Box.stories.tsx} +0 -0
  5. package/box/types.d.ts +47 -0
  6. package/box/types.js +5 -0
  7. package/button/Button.d.ts +1 -1
  8. package/button/Button.js +7 -12
  9. package/button/Button.stories.tsx +217 -234
  10. package/button/types.d.ts +10 -10
  11. package/checkbox/Checkbox.stories.tsx +192 -0
  12. package/common/variables.js +29 -21
  13. package/date-input/DateInput.stories.tsx +138 -0
  14. package/header/Header.d.ts +7 -0
  15. package/header/Header.js +26 -28
  16. package/header/Icons.js +2 -27
  17. package/header/types.d.ts +45 -0
  18. package/header/types.js +5 -0
  19. package/link/Link.d.ts +3 -0
  20. package/link/Link.js +1 -23
  21. package/link/Link.stories.tsx +70 -0
  22. package/link/types.d.ts +74 -0
  23. package/link/types.js +5 -0
  24. package/number-input/NumberInput.d.ts +4 -0
  25. package/number-input/NumberInput.js +2 -44
  26. package/number-input/{NumberInput.stories.jsx → NumberInput.stories.tsx} +0 -0
  27. package/number-input/types.d.ts +117 -0
  28. package/number-input/types.js +5 -0
  29. package/package.json +1 -1
  30. package/password-input/PasswordInput.d.ts +4 -0
  31. package/password-input/PasswordInput.js +0 -37
  32. package/password-input/{PasswordInput.stories.jsx → PasswordInput.stories.tsx} +1 -1
  33. package/password-input/types.d.ts +100 -0
  34. package/password-input/types.js +5 -0
  35. package/progress-bar/ProgressBar.stories.jsx +58 -0
  36. package/radio/Radio.stories.tsx +192 -0
  37. package/select/Select.stories.tsx +572 -0
  38. package/sidenav/Sidenav.d.ts +9 -0
  39. package/sidenav/Sidenav.js +4 -13
  40. package/sidenav/types.d.ts +50 -0
  41. package/sidenav/types.js +5 -0
  42. package/slider/Slider.d.ts +1 -1
  43. package/slider/Slider.js +39 -28
  44. package/slider/Slider.stories.tsx +172 -0
  45. package/slider/types.d.ts +2 -7
  46. package/spinner/Spinner.d.ts +4 -0
  47. package/spinner/Spinner.js +0 -17
  48. package/spinner/Spinner.stories.jsx +102 -0
  49. package/spinner/types.d.ts +32 -0
  50. package/spinner/types.js +5 -0
  51. package/switch/Switch.js +2 -2
  52. package/switch/Switch.stories.tsx +160 -0
  53. package/table/Table.d.ts +4 -0
  54. package/table/types.d.ts +21 -0
  55. package/table/types.js +5 -0
  56. package/tag/Tag.d.ts +4 -0
  57. package/tag/Tag.js +20 -35
  58. package/tag/Tag.stories.tsx +145 -0
  59. package/tag/types.d.ts +60 -0
  60. package/tag/types.js +5 -0
  61. package/toggle-group/ToggleGroup.stories.tsx +178 -0
  62. package/wizard/Wizard.d.ts +4 -0
  63. package/wizard/Wizard.js +11 -51
  64. package/wizard/types.d.ts +64 -0
  65. package/wizard/types.js +5 -0
  66. package/box/index.d.ts +0 -25
  67. package/header/index.d.ts +0 -25
  68. package/link/index.d.ts +0 -23
  69. package/number-input/index.d.ts +0 -113
  70. package/password-input/index.d.ts +0 -94
  71. package/sidenav/index.d.ts +0 -13
  72. package/spinner/index.d.ts +0 -17
  73. package/table/index.d.ts +0 -13
  74. package/tag/index.d.ts +0 -24
  75. package/wizard/index.d.ts +0 -18
package/radio/Radio.stories.tsx ADDED
@@ -0,0 +1,192 @@
1
+ import React from "react";
2
+ import DxcRadio from "./Radio";
3
+ import { BackgroundColorProvider } from "../BackgroundColorContext";
4
+ import Title from "../../.storybook/components/Title";
5
+ import ExampleContainer from "../../.storybook/components/ExampleContainer";
6
+ import DarkContainer from "../../.storybook/components/DarkSection";
7
+ import { userEvent, within } from "@storybook/testing-library";
8
+
9
+ export default {
10
+ title: "Radio",
11
+ component: DxcRadio,
12
+ };
13
+
14
+ const Radio = () => (
15
+ <>
16
+ <>
17
+ <ExampleContainer>
18
+ <Title title="Default" theme="light" level={4} />
19
+ <DxcRadio label="Radio" />
20
+ </ExampleContainer>
21
+ <ExampleContainer>
22
+ <Title title="Focused" theme="light" level={4} />
23
+ <DxcRadio label="Focused" />
24
+ </ExampleContainer>
25
+ <ExampleContainer>
26
+ <Title title="Checked" theme="light" level={4} />
27
+ <DxcRadio label="Radio" checked />
28
+ </ExampleContainer>
29
+ <ExampleContainer>
30
+ <Title title="Required" theme="light" level={4} />
31
+ <DxcRadio label="Radio" required />
32
+ </ExampleContainer>
33
+ <ExampleContainer>
34
+ <Title title="Disabled and checked" theme="light" level={4} />
35
+ <DxcRadio label="Radio" disabled checked />
36
+ </ExampleContainer>
37
+ <ExampleContainer>
38
+ <Title title="Disabled and required" theme="light" level={4} />
39
+ <DxcRadio label="Radio" disabled required />
40
+ </ExampleContainer>
41
+ <ExampleContainer>
42
+ <Title title="Disabled, required and checked" theme="light" level={4} />
43
+ <DxcRadio label="Radio" disabled required checked />
44
+ </ExampleContainer>
45
+ <ExampleContainer>
46
+ <Title title="Label after" theme="light" level={4} />
47
+ <DxcRadio label="Radio" labelPosition="after" />
48
+ </ExampleContainer>
49
+ <ExampleContainer>
50
+ <Title title="Checked with label after" theme="light" level={4} />
51
+ <DxcRadio label="Radio" checked labelPosition="after" />
52
+ </ExampleContainer>
53
+ <ExampleContainer>
54
+ <Title title="Required with label after" theme="light" level={4} />
55
+ <DxcRadio label="Radio" required labelPosition="after" />
56
+ </ExampleContainer>
57
+ <ExampleContainer>
58
+ <Title title="Disabled and checked with label after" theme="light" level={4} />
59
+ <DxcRadio label="Radio" disabled checked labelPosition="after" />
60
+ </ExampleContainer>
61
+ <ExampleContainer>
62
+ <Title title="Disabled and required with label after" theme="light" level={4} />
63
+ <DxcRadio label="Radio" disabled required labelPosition="after" />
64
+ </ExampleContainer>
65
+ <ExampleContainer>
66
+ <Title title="Disabled, required and checked with label after" theme="light" level={4} />
67
+ <DxcRadio label="Radio" disabled required checked labelPosition="after" />
68
+ </ExampleContainer>
69
+ <ExampleContainer pseudoState="pseudo-hover">
70
+ <Title title="Hovered" theme="light" level={4} />
71
+ <DxcRadio label="Hovered" />
72
+ </ExampleContainer>
73
+ <ExampleContainer pseudoState="pseudo-hover">
74
+ <Title title="Hovered and checked" theme="light" level={4} />
75
+ <DxcRadio label="Hovered" checked />
76
+ </ExampleContainer>
77
+ </>
78
+ <BackgroundColorProvider color="#333333">
79
+ <DarkContainer>
80
+ <>
81
+ <ExampleContainer>
82
+ <Title title="Default" theme="dark" level={4} />
83
+ <DxcRadio label="Radio" />
84
+ </ExampleContainer>
85
+ <ExampleContainer>
86
+ <Title title="Checked" theme="dark" level={4} />
87
+ <DxcRadio label="Radio" checked />
88
+ </ExampleContainer>
89
+ <ExampleContainer>
90
+ <Title title="Required" theme="dark" level={4} />
91
+ <DxcRadio label="Radio" required />
92
+ </ExampleContainer>
93
+ <ExampleContainer>
94
+ <Title title="Disabled and checked" theme="dark" level={4} />
95
+ <DxcRadio label="Radio" disabled checked />
96
+ </ExampleContainer>
97
+ <ExampleContainer>
98
+ <Title title="Disabled and required" theme="dark" level={4} />
99
+ <DxcRadio label="Radio" disabled required />
100
+ </ExampleContainer>
101
+ <ExampleContainer>
102
+ <Title title="Disabled, required and checked" theme="dark" level={4} />
103
+ <DxcRadio label="Radio" disabled required checked />
104
+ </ExampleContainer>
105
+ <ExampleContainer>
106
+ <Title title="Label after" theme="dark" level={4} />
107
+ <DxcRadio label="Radio" labelPosition="after" />
108
+ </ExampleContainer>
109
+ <ExampleContainer>
110
+ <Title title="Checked with label after" theme="dark" level={4} />
111
+ <DxcRadio label="Radio" checked labelPosition="after" />
112
+ </ExampleContainer>
113
+ <ExampleContainer>
114
+ <Title title="Required with label after" theme="dark" level={4} />
115
+ <DxcRadio label="Radio" required labelPosition="after" />
116
+ </ExampleContainer>
117
+ <ExampleContainer>
118
+ <Title title="Disabled and checked with label after" theme="dark" level={4} />
119
+ <DxcRadio label="Radio" disabled checked labelPosition="after" />
120
+ </ExampleContainer>
121
+ <ExampleContainer>
122
+ <Title title="Disabled and required with label after" theme="dark" level={4} />
123
+ <DxcRadio label="Radio" disabled required labelPosition="after" />
124
+ </ExampleContainer>
125
+ <ExampleContainer>
126
+ <Title title="Disabled, required and checked with label after" theme="dark" level={4} />
127
+ <DxcRadio label="Radio" disabled required checked labelPosition="after" />
128
+ </ExampleContainer>
129
+ <ExampleContainer pseudoState="pseudo-hover">
130
+ <Title title="Hovered" theme="dark" level={4} />
131
+ <DxcRadio label="Hovered" />
132
+ </ExampleContainer>
133
+ <ExampleContainer pseudoState="pseudo-hover">
134
+ <Title title="Hovered and checked" theme="dark" level={4} />
135
+ <DxcRadio label="Hovered" checked />
136
+ </ExampleContainer>
137
+ </>
138
+ </DarkContainer>
139
+ </BackgroundColorProvider>
140
+ <Title title="Sizes" theme="light" level={2} />
141
+ <ExampleContainer>
142
+ <DxcRadio label="Small" size="small" />
143
+ </ExampleContainer>
144
+ <ExampleContainer>
145
+ <DxcRadio label="Medium" size="medium" />
146
+ </ExampleContainer>
147
+ <ExampleContainer>
148
+ <DxcRadio label="Large" size="large" />
149
+ </ExampleContainer>
150
+ <ExampleContainer>
151
+ <DxcRadio label="FitContent" size="fitContent" />
152
+ </ExampleContainer>
153
+ <ExampleContainer>
154
+ <DxcRadio label="FillParent" size="fillParent" />
155
+ </ExampleContainer>
156
+ <Title title="Margins" theme="light" level={2} />
157
+ <ExampleContainer>
158
+ <Title title="Xxsmall" theme="light" level={4} />
159
+ <DxcRadio label="Xxsmall" margin={"xxsmall"} />
160
+ </ExampleContainer>
161
+ <ExampleContainer>
162
+ <Title title="Xsmall" theme="light" level={4} />
163
+ <DxcRadio label="Xsmall" margin={"xsmall"} />
164
+ </ExampleContainer>
165
+ <ExampleContainer>
166
+ <Title title="Small" theme="light" level={4} />
167
+ <DxcRadio label="Small" margin={"small"} />
168
+ </ExampleContainer>
169
+ <ExampleContainer>
170
+ <Title title="Medium" theme="light" level={4} />
171
+ <DxcRadio label="Medium" margin={"medium"} />
172
+ </ExampleContainer>
173
+ <ExampleContainer>
174
+ <Title title="Large" theme="light" level={4} />
175
+ <DxcRadio label="Large" margin={"large"} />
176
+ </ExampleContainer>
177
+ <ExampleContainer>
178
+ <Title title="Xlarge" theme="light" level={4} />
179
+ <DxcRadio label="Xlarge" margin={"xlarge"} />
180
+ </ExampleContainer>
181
+ <ExampleContainer>
182
+ <Title title="Xxlarge" theme="light" level={4} />
183
+ <DxcRadio label="Xxlarge" margin={"xxlarge"} />
184
+ </ExampleContainer>
185
+ </>
186
+ );
187
+
188
+ export const Chromatic = Radio.bind({});
189
+ Chromatic.play = async () => {
190
+ await userEvent.tab();
191
+ await userEvent.tab();
192
+ };