@dxc-technology/halstack-react 0.0.0-83f5e92 → 0.0.0-84c9364
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.
- package/alert/Alert.stories.tsx +170 -0
- package/button/Button.stories.tsx +216 -233
- package/date-input/DateInput.stories.tsx +138 -0
- package/link/Link.stories.tsx +70 -0
- package/number-input/NumberInput.d.ts +4 -0
- package/number-input/NumberInput.js +2 -44
- package/number-input/{NumberInput.stories.jsx → NumberInput.stories.tsx} +0 -0
- package/number-input/types.d.ts +117 -0
- package/number-input/types.js +5 -0
- package/package.json +1 -1
- package/select/Select.stories.tsx +572 -0
- package/sidenav/Sidenav.d.ts +9 -0
- package/sidenav/Sidenav.js +4 -13
- package/sidenav/types.d.ts +50 -0
- package/sidenav/types.js +5 -0
- package/toggle-group/ToggleGroup.stories.tsx +178 -0
- package/wizard/Wizard.d.ts +4 -0
- package/wizard/Wizard.js +11 -51
- package/wizard/types.d.ts +64 -0
- package/wizard/types.js +5 -0
- package/number-input/index.d.ts +0 -113
- package/sidenav/index.d.ts +0 -13
- package/wizard/index.d.ts +0 -18
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import DxcAlert from "./Alert";
|
|
3
|
+
import Title from "../../.storybook/components/Title";
|
|
4
|
+
import ExampleContainer from "../../.storybook/components/ExampleContainer";
|
|
5
|
+
|
|
6
|
+
export default {
|
|
7
|
+
title: "Alert",
|
|
8
|
+
component: DxcAlert,
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
export const Chromatic = () => (
|
|
12
|
+
<>
|
|
13
|
+
<ExampleContainer>
|
|
14
|
+
<Title title="Info" theme="light" level={4} />
|
|
15
|
+
<DxcAlert inlineText="Info type alert with inline text." />
|
|
16
|
+
</ExampleContainer>
|
|
17
|
+
<ExampleContainer>
|
|
18
|
+
<Title title="Confirm" theme="light" level={4} />
|
|
19
|
+
<DxcAlert type="confirm" inlineText="Confirm type alert with inline text." />
|
|
20
|
+
</ExampleContainer>
|
|
21
|
+
<ExampleContainer>
|
|
22
|
+
<Title title="Warning" theme="light" level={4} />
|
|
23
|
+
<DxcAlert type="warning" inlineText="Warning type alert with inline text." />
|
|
24
|
+
</ExampleContainer>
|
|
25
|
+
<ExampleContainer>
|
|
26
|
+
<Title title="Error" theme="light" level={4} />
|
|
27
|
+
<DxcAlert type="error" inlineText="Error type alert with inline text." />
|
|
28
|
+
</ExampleContainer>
|
|
29
|
+
<ExampleContainer>
|
|
30
|
+
<Title title="With close button" theme="light" level={4} />
|
|
31
|
+
<DxcAlert inlineText="Info type alert with inline text and close button." onClose={() => {}} />
|
|
32
|
+
</ExampleContainer>
|
|
33
|
+
<ExampleContainer pseudoState="pseudo-hover">
|
|
34
|
+
<Title title="With hovered close button" theme="light" level={4} />
|
|
35
|
+
<DxcAlert inlineText="Info type alert with inline text and close button." onClose={() => {}} />
|
|
36
|
+
</ExampleContainer>
|
|
37
|
+
<ExampleContainer pseudoState="pseudo-focus">
|
|
38
|
+
<Title title="With focused close button" theme="light" level={4} />
|
|
39
|
+
<DxcAlert inlineText="Info type alert with inline text and close button." onClose={() => {}} />
|
|
40
|
+
</ExampleContainer>
|
|
41
|
+
<ExampleContainer pseudoState="pseudo-active">
|
|
42
|
+
<Title title="With actived close button" theme="light" level={4} />
|
|
43
|
+
<DxcAlert inlineText="Info type alert with inline text and close button." onClose={() => {}} />
|
|
44
|
+
</ExampleContainer>
|
|
45
|
+
<ExampleContainer>
|
|
46
|
+
<Title title="With children" theme="light" level={4} />
|
|
47
|
+
<DxcAlert>
|
|
48
|
+
<div>
|
|
49
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
|
|
50
|
+
lobortis eget.
|
|
51
|
+
</div>
|
|
52
|
+
</DxcAlert>
|
|
53
|
+
</ExampleContainer>
|
|
54
|
+
<ExampleContainer>
|
|
55
|
+
<Title title="With inline text and children" theme="light" level={4} />
|
|
56
|
+
<DxcAlert inlineText="Info type alert with inline text.">
|
|
57
|
+
<div>
|
|
58
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
|
|
59
|
+
lobortis eget.
|
|
60
|
+
</div>
|
|
61
|
+
</DxcAlert>
|
|
62
|
+
</ExampleContainer>
|
|
63
|
+
<Title title="Margins" theme="light" level={2} />
|
|
64
|
+
<ExampleContainer>
|
|
65
|
+
<Title title="Xxsmall" theme="light" level={4} />
|
|
66
|
+
<DxcAlert margin="xxsmall" inlineText="Info type alert with inline text and xxsmall margin." />
|
|
67
|
+
</ExampleContainer>
|
|
68
|
+
<ExampleContainer>
|
|
69
|
+
<Title title="Xsmall" theme="light" level={4} />
|
|
70
|
+
<DxcAlert margin="xsmall" inlineText="Info type alert with inline text and xsmall margin." />
|
|
71
|
+
</ExampleContainer>
|
|
72
|
+
<ExampleContainer>
|
|
73
|
+
<Title title="Small" theme="light" level={4} />
|
|
74
|
+
<DxcAlert margin="small" inlineText="Info type alert with inline text and small margin." />
|
|
75
|
+
</ExampleContainer>
|
|
76
|
+
<ExampleContainer>
|
|
77
|
+
<Title title="Medium" theme="light" level={4} />
|
|
78
|
+
<DxcAlert margin="medium" inlineText="Info type alert with inline text and medium margin." />
|
|
79
|
+
</ExampleContainer>
|
|
80
|
+
<ExampleContainer>
|
|
81
|
+
<Title title="Large" theme="light" level={4} />
|
|
82
|
+
<DxcAlert margin="large" inlineText="Info type alert with inline text and large margin." />
|
|
83
|
+
</ExampleContainer>
|
|
84
|
+
<ExampleContainer>
|
|
85
|
+
<Title title="Xlarge" theme="light" level={4} />
|
|
86
|
+
<DxcAlert margin="xlarge" inlineText="Info type alert with inline text and xlarge margin." />
|
|
87
|
+
</ExampleContainer>
|
|
88
|
+
<ExampleContainer>
|
|
89
|
+
<Title title="Xxlarge" theme="light" level={4} />
|
|
90
|
+
<DxcAlert margin="xxlarge" inlineText="Info type alert with inline text and xxlarge margin." />
|
|
91
|
+
</ExampleContainer>
|
|
92
|
+
<Title title="Sizes" theme="light" level={2} />
|
|
93
|
+
<ExampleContainer>
|
|
94
|
+
<Title title="FitContent" theme="light" level={4} />
|
|
95
|
+
<DxcAlert
|
|
96
|
+
size="fitContent"
|
|
97
|
+
inlineText="Info type alert with inline text, children, close button and fitContent size."
|
|
98
|
+
onClose={() => {}}
|
|
99
|
+
>
|
|
100
|
+
<div>
|
|
101
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
|
|
102
|
+
lobortis eget.
|
|
103
|
+
</div>
|
|
104
|
+
</DxcAlert>
|
|
105
|
+
</ExampleContainer>
|
|
106
|
+
<ExampleContainer>
|
|
107
|
+
<Title title="Small" theme="light" level={4} />
|
|
108
|
+
<DxcAlert
|
|
109
|
+
size="small"
|
|
110
|
+
inlineText="Info type alert with inline text, children, close button and small size."
|
|
111
|
+
onClose={() => {}}
|
|
112
|
+
>
|
|
113
|
+
<div>
|
|
114
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
|
|
115
|
+
lobortis eget.
|
|
116
|
+
</div>
|
|
117
|
+
</DxcAlert>
|
|
118
|
+
</ExampleContainer>
|
|
119
|
+
<ExampleContainer>
|
|
120
|
+
<Title title="Medium" theme="light" level={4} />
|
|
121
|
+
<DxcAlert
|
|
122
|
+
size="medium"
|
|
123
|
+
inlineText="Info type alert with inline text, children, close button and medium size."
|
|
124
|
+
onClose={() => {}}
|
|
125
|
+
>
|
|
126
|
+
<div>
|
|
127
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
|
|
128
|
+
lobortis eget.
|
|
129
|
+
</div>
|
|
130
|
+
</DxcAlert>
|
|
131
|
+
</ExampleContainer>
|
|
132
|
+
<ExampleContainer>
|
|
133
|
+
<Title title="Large" theme="light" level={4} />
|
|
134
|
+
<DxcAlert
|
|
135
|
+
size="large"
|
|
136
|
+
inlineText="Info type alert with inline text, children, close button and large size."
|
|
137
|
+
onClose={() => {}}
|
|
138
|
+
>
|
|
139
|
+
<div>
|
|
140
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
|
|
141
|
+
lobortis eget.
|
|
142
|
+
</div>
|
|
143
|
+
</DxcAlert>
|
|
144
|
+
</ExampleContainer>
|
|
145
|
+
<ExampleContainer>
|
|
146
|
+
<Title title="FillParent" theme="light" level={4} />
|
|
147
|
+
<DxcAlert
|
|
148
|
+
size="fillParent"
|
|
149
|
+
inlineText="Info type alert with inline text, children, close button and fillParent size."
|
|
150
|
+
onClose={() => {}}
|
|
151
|
+
>
|
|
152
|
+
<div>
|
|
153
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
|
|
154
|
+
lobortis eget.
|
|
155
|
+
</div>
|
|
156
|
+
</DxcAlert>
|
|
157
|
+
</ExampleContainer>
|
|
158
|
+
</>
|
|
159
|
+
);
|
|
160
|
+
|
|
161
|
+
export const ModalAlert = () => (
|
|
162
|
+
<ExampleContainer>
|
|
163
|
+
<DxcAlert inlineText="Modal alert." mode="modal" onClose={() => {}}>
|
|
164
|
+
<div>
|
|
165
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
|
|
166
|
+
lobortis eget.
|
|
167
|
+
</div>
|
|
168
|
+
</DxcAlert>
|
|
169
|
+
</ExampleContainer>
|
|
170
|
+
);
|