@dxc-technology/halstack-react 0.0.0-e081e21 → 0.0.0-e1a279c

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 (137) hide show
  1. package/accordion/Accordion.d.ts +4 -0
  2. package/accordion/Accordion.js +12 -43
  3. package/accordion/types.d.ts +68 -0
  4. package/accordion/types.js +5 -0
  5. package/accordion-group/AccordionGroup.d.ts +7 -0
  6. package/accordion-group/AccordionGroup.js +58 -72
  7. package/accordion-group/types.d.ts +72 -0
  8. package/accordion-group/types.js +5 -0
  9. package/alert/Alert.stories.tsx +170 -0
  10. package/box/Box.d.ts +4 -0
  11. package/box/Box.js +9 -32
  12. package/box/Box.stories.tsx +132 -0
  13. package/box/types.d.ts +47 -0
  14. package/box/types.js +5 -0
  15. package/button/Button.d.ts +1 -1
  16. package/button/Button.js +7 -12
  17. package/button/Button.stories.tsx +244 -274
  18. package/button/types.d.ts +10 -10
  19. package/card/Card.d.ts +4 -0
  20. package/card/Card.js +13 -48
  21. package/card/types.d.ts +69 -0
  22. package/card/types.js +5 -0
  23. package/checkbox/Checkbox.stories.tsx +192 -0
  24. package/checkbox/types.d.ts +2 -3
  25. package/chip/Chip.stories.tsx +121 -0
  26. package/common/variables.js +30 -22
  27. package/date-input/DateInput.d.ts +4 -0
  28. package/date-input/DateInput.js +3 -38
  29. package/date-input/DateInput.stories.tsx +138 -0
  30. package/date-input/types.d.ts +100 -0
  31. package/date-input/types.js +5 -0
  32. package/dialog/Dialog.d.ts +4 -0
  33. package/dialog/Dialog.js +4 -23
  34. package/dialog/Dialog.stories.tsx +212 -0
  35. package/dialog/types.d.ts +43 -0
  36. package/dialog/types.js +5 -0
  37. package/dropdown/Dropdown.d.ts +4 -0
  38. package/dropdown/Dropdown.js +7 -40
  39. package/dropdown/types.d.ts +89 -0
  40. package/dropdown/types.js +5 -0
  41. package/footer/Footer.d.ts +4 -0
  42. package/footer/Footer.js +4 -35
  43. package/footer/Footer.stories.jsx +151 -0
  44. package/footer/types.d.ts +61 -0
  45. package/footer/types.js +5 -0
  46. package/header/Header.d.ts +7 -0
  47. package/header/Header.js +26 -28
  48. package/header/Icons.js +2 -27
  49. package/header/types.d.ts +45 -0
  50. package/header/types.js +5 -0
  51. package/link/Link.d.ts +3 -0
  52. package/link/Link.js +1 -23
  53. package/link/Link.stories.tsx +70 -0
  54. package/link/types.d.ts +74 -0
  55. package/link/types.js +5 -0
  56. package/number-input/NumberInput.d.ts +4 -0
  57. package/number-input/NumberInput.js +2 -44
  58. package/number-input/NumberInput.stories.tsx +115 -0
  59. package/number-input/types.d.ts +117 -0
  60. package/number-input/types.js +5 -0
  61. package/package.json +3 -3
  62. package/paginator/Paginator.stories.tsx +63 -0
  63. package/password-input/PasswordInput.d.ts +4 -0
  64. package/password-input/PasswordInput.js +2 -39
  65. package/password-input/PasswordInput.stories.tsx +131 -0
  66. package/password-input/types.d.ts +100 -0
  67. package/password-input/types.js +5 -0
  68. package/progress-bar/ProgressBar.d.ts +4 -0
  69. package/progress-bar/ProgressBar.js +3 -21
  70. package/progress-bar/ProgressBar.stories.jsx +58 -0
  71. package/progress-bar/types.d.ts +37 -0
  72. package/progress-bar/types.js +5 -0
  73. package/radio/Radio.d.ts +4 -0
  74. package/radio/Radio.js +3 -24
  75. package/radio/Radio.stories.tsx +192 -0
  76. package/radio/types.d.ts +54 -0
  77. package/radio/types.js +5 -0
  78. package/select/Select.stories.tsx +572 -0
  79. package/select/index.d.ts +4 -4
  80. package/sidenav/Sidenav.d.ts +9 -0
  81. package/sidenav/Sidenav.js +4 -13
  82. package/sidenav/types.d.ts +50 -0
  83. package/sidenav/types.js +5 -0
  84. package/slider/Slider.d.ts +4 -0
  85. package/slider/Slider.js +59 -82
  86. package/slider/Slider.stories.tsx +177 -0
  87. package/slider/types.d.ts +78 -0
  88. package/slider/types.js +5 -0
  89. package/spinner/Spinner.d.ts +4 -0
  90. package/spinner/Spinner.js +6 -23
  91. package/spinner/Spinner.stories.jsx +102 -0
  92. package/spinner/types.d.ts +32 -0
  93. package/spinner/types.js +5 -0
  94. package/switch/Switch.js +2 -2
  95. package/switch/Switch.stories.tsx +160 -0
  96. package/table/Table.d.ts +4 -0
  97. package/table/Table.stories.jsx +276 -0
  98. package/table/types.d.ts +21 -0
  99. package/table/types.js +5 -0
  100. package/tabs/Tabs.d.ts +4 -0
  101. package/tabs/Tabs.js +5 -53
  102. package/tabs/types.d.ts +71 -0
  103. package/tabs/types.js +5 -0
  104. package/tag/Tag.d.ts +4 -0
  105. package/tag/Tag.js +20 -35
  106. package/tag/Tag.stories.tsx +145 -0
  107. package/tag/types.d.ts +60 -0
  108. package/tag/types.js +5 -0
  109. package/text-input/index.d.ts +2 -2
  110. package/textarea/Textarea.stories.jsx +135 -0
  111. package/toggle-group/ToggleGroup.stories.tsx +178 -0
  112. package/wizard/Wizard.d.ts +4 -0
  113. package/wizard/Wizard.js +11 -51
  114. package/wizard/Wizard.stories.jsx +224 -0
  115. package/wizard/types.d.ts +64 -0
  116. package/wizard/types.js +5 -0
  117. package/accordion/index.d.ts +0 -28
  118. package/accordion-group/index.d.ts +0 -16
  119. package/box/index.d.ts +0 -25
  120. package/card/index.d.ts +0 -22
  121. package/date-input/index.d.ts +0 -95
  122. package/dialog/index.d.ts +0 -18
  123. package/dropdown/index.d.ts +0 -26
  124. package/footer/index.d.ts +0 -25
  125. package/header/index.d.ts +0 -25
  126. package/link/index.d.ts +0 -23
  127. package/number-input/index.d.ts +0 -113
  128. package/password-input/index.d.ts +0 -94
  129. package/progress-bar/index.d.ts +0 -18
  130. package/radio/index.d.ts +0 -23
  131. package/sidenav/index.d.ts +0 -13
  132. package/slider/index.d.ts +0 -29
  133. package/spinner/index.d.ts +0 -17
  134. package/table/index.d.ts +0 -13
  135. package/tabs/index.d.ts +0 -19
  136. package/tag/index.d.ts +0 -24
  137. package/wizard/index.d.ts +0 -18
package/button/Button.stories.tsx CHANGED
@@ -1,10 +1,12 @@
1
1
  import React from "react";
2
- import styled from "styled-components";
3
2
  import DxcButton from "./Button";
4
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";
5
7
 
6
8
  export default {
7
- title: "Button ",
9
+ title: "Button",
8
10
  component: DxcButton,
9
11
  };
10
12
 
@@ -18,289 +20,257 @@ const iconSVG = () => {
18
20
  };
19
21
  export const Chromatic = () => (
20
22
  <>
21
- <>
22
- <MainTitle>Primary</MainTitle>
23
- <Container>
24
- <ContainerTitle>Enabled</ContainerTitle>
25
- <DxcButton label="Primary enabled" />
26
- </Container>
27
- <Container className="pseudo-hover">
28
- <ContainerTitle>Hovered</ContainerTitle>
29
- <DxcButton label="Primary hovered" />
30
- </Container>
31
- <Container className="pseudo-focus">
32
- <ContainerTitle>Focused</ContainerTitle>
33
- <DxcButton label="Primary focused" />
34
- </Container>
35
- <Container className="pseudo-active">
36
- <ContainerTitle>Actived</ContainerTitle>
37
- <DxcButton label="Primary actived" />
38
- </Container>
39
- <Container>
40
- <ContainerTitle>Disabled</ContainerTitle>
41
- <DxcButton label="Primary disabled" disabled />
42
- </Container>
43
- <Container>
44
- <ContainerTitle>With left icon</ContainerTitle>
45
- <DxcButton label="Primary" icon={iconSVG} />
46
- </Container>
47
- <Container>
48
- <ContainerTitle>With right icon</ContainerTitle>
49
- <DxcButton label="Primary" icon={iconSVG} iconPosition="after" />
50
- </Container>
51
- <Container>
52
- <ContainerTitle>Only icon</ContainerTitle>
53
- <DxcButton icon={iconSVG} />
54
- </Container>
55
- </>
56
- <>
57
- <>
58
- <MainTitle>Secondary</MainTitle>
59
- <Container>
60
- <ContainerTitle>Enabled</ContainerTitle>
23
+ <Title title="Primary" theme="light" level={2} />
24
+ <ExampleContainer>
25
+ <Title title="Enabled" theme="light" level={4} />
26
+ <DxcButton label="Primary enabled" />
27
+ </ExampleContainer>
28
+ <ExampleContainer pseudoState="pseudo-hover">
29
+ <Title title="Hovered" theme="light" level={4} />
30
+ <DxcButton label="Primary hovered" />
31
+ </ExampleContainer>
32
+ <ExampleContainer pseudoState="pseudo-focus">
33
+ <Title title="Focused" theme="light" level={4} />
34
+ <DxcButton label="Primary focused" />
35
+ </ExampleContainer>
36
+ <ExampleContainer pseudoState="pseudo-active">
37
+ <Title title="Actived" theme="light" level={4} />
38
+ <DxcButton label="Primary actived" />
39
+ </ExampleContainer>
40
+ <ExampleContainer>
41
+ <Title title="Disabled" theme="light" level={4} />
42
+ <DxcButton label="Primary disabled" disabled />
43
+ </ExampleContainer>
44
+ <ExampleContainer>
45
+ <Title title="With left icon" theme="light" level={4} />
46
+ <DxcButton label="Primary" icon={iconSVG} />
47
+ </ExampleContainer>
48
+ <ExampleContainer>
49
+ <Title title="With right icon" theme="light" level={4} />
50
+ <DxcButton label="Primary" icon={iconSVG} iconPosition="after" />
51
+ </ExampleContainer>
52
+ <ExampleContainer>
53
+ <Title title="Only icon" theme="light" level={4} />
54
+ <DxcButton icon={iconSVG} />
55
+ </ExampleContainer>
56
+ <Title title="Secondary" theme="light" level={2} />
57
+ <ExampleContainer>
58
+ <Title title="Enabled" theme="light" level={4} />
59
+ <DxcButton mode="secondary" label="Secondary enabled" />
60
+ </ExampleContainer>
61
+ <ExampleContainer pseudoState="pseudo-hover">
62
+ <Title title="Hovered" theme="light" level={4} />
63
+ <DxcButton mode="secondary" label="Secondary hovered" />
64
+ </ExampleContainer>
65
+ <ExampleContainer pseudoState="pseudo-focus">
66
+ <Title title="Focused" theme="light" level={4} />
67
+ <DxcButton mode="secondary" label="Secondary focused" />
68
+ </ExampleContainer>
69
+ <ExampleContainer pseudoState="pseudo-active">
70
+ <Title title="Actived" theme="light" level={4} />
71
+ <DxcButton mode="secondary" label="Secondary actived" />
72
+ </ExampleContainer>
73
+ <ExampleContainer>
74
+ <Title title="Disabled" theme="light" level={4} />
75
+ <DxcButton mode="secondary" disabled label="Secondary disabled" />
76
+ </ExampleContainer>
77
+ <ExampleContainer>
78
+ <Title title="With icon" theme="light" level={4} />
79
+ <DxcButton mode="secondary" label="Secondary" icon={iconSVG} />
80
+ </ExampleContainer>
81
+ <Title title="Text" theme="light" level={2} />
82
+ <ExampleContainer>
83
+ <Title title="Enabled" theme="light" level={4} />
84
+ <DxcButton mode="text" label="Text enabled" />
85
+ </ExampleContainer>
86
+ <ExampleContainer pseudoState="pseudo-hover">
87
+ <Title title="Hovered" theme="light" level={4} />
88
+ <DxcButton mode="text" label="Text hovered" />
89
+ </ExampleContainer>
90
+ <ExampleContainer pseudoState="pseudo-focus">
91
+ <Title title="Focused" theme="light" level={4} />
92
+ <DxcButton mode="text" label="Text focused" />
93
+ </ExampleContainer>
94
+ <ExampleContainer pseudoState="pseudo-active">
95
+ <Title title="Actived" theme="light" level={4} />
96
+ <DxcButton mode="text" label="Text actived" />
97
+ </ExampleContainer>
98
+ <ExampleContainer>
99
+ <Title title="Disabled" theme="light" level={4} />
100
+ <DxcButton mode="text" label="Text disabled" disabled />
101
+ </ExampleContainer>
102
+ <ExampleContainer>
103
+ <Title title="With icon" theme="light" level={4} />
104
+ <DxcButton label="Text" mode="text" icon={iconSVG} />
105
+ </ExampleContainer>
106
+ <BackgroundColorProvider color="#333333">
107
+ <DarkContainer>
108
+ <Title title="Primary" theme="dark" level={2} />
109
+ <ExampleContainer>
110
+ <Title title="Enabled" theme="dark" level={4} />
111
+ <DxcButton label="Primary enabled" />
112
+ </ExampleContainer>
113
+ <ExampleContainer pseudoState="pseudo-hover">
114
+ <Title title="Hovered" theme="dark" level={4} />
115
+ <DxcButton label="Primary hovered" />
116
+ </ExampleContainer>
117
+ <ExampleContainer pseudoState="pseudo-focus">
118
+ <Title title="Focused" theme="dark" level={4} />
119
+ <DxcButton label="Primary focused" />
120
+ </ExampleContainer>
121
+ <ExampleContainer pseudoState="pseudo-active">
122
+ <Title title="Actived" theme="dark" level={4} />
123
+ <DxcButton label="Primary actived" />
124
+ </ExampleContainer>
125
+ <ExampleContainer>
126
+ <Title title="Disabled" theme="dark" level={4} />
127
+ <DxcButton label="Primary disabled" disabled />
128
+ </ExampleContainer>
129
+ <ExampleContainer>
130
+ <Title title="With icon" theme="dark" level={4} />
131
+ <DxcButton label="Primary" icon={iconSVG} />
132
+ </ExampleContainer>
133
+ <Title title="Secondary" theme="dark" level={2} />
134
+ <ExampleContainer>
135
+ <Title title="Enabled" theme="dark" level={4} />
61
136
  <DxcButton mode="secondary" label="Secondary enabled" />
62
- </Container>
63
- <Container className="pseudo-hover">
64
- <ContainerTitle>Hovered</ContainerTitle>
137
+ </ExampleContainer>
138
+ <ExampleContainer pseudoState="pseudo-hover">
139
+ <Title title="Hovered" theme="dark" level={4} />
65
140
  <DxcButton mode="secondary" label="Secondary hovered" />
66
- </Container>
67
- <Container className="pseudo-focus">
68
- <ContainerTitle>Focused</ContainerTitle>
141
+ </ExampleContainer>
142
+ <ExampleContainer pseudoState="pseudo-focus">
143
+ <Title title="Focused" theme="dark" level={4} />
69
144
  <DxcButton mode="secondary" label="Secondary focused" />
70
- </Container>
71
- <Container className="pseudo-active">
72
- <ContainerTitle>Actived</ContainerTitle>
145
+ </ExampleContainer>
146
+ <ExampleContainer pseudoState="pseudo-active">
147
+ <Title title="Actived" theme="dark" level={4} />
73
148
  <DxcButton mode="secondary" label="Secondary actived" />
74
- </Container>
75
- <Container>
76
- <ContainerTitle>Disabled</ContainerTitle>
149
+ </ExampleContainer>
150
+ <ExampleContainer>
151
+ <Title title="Disabled" theme="dark" level={4} />
77
152
  <DxcButton mode="secondary" disabled label="Secondary disabled" />
78
- </Container>
79
- <Container>
80
- <ContainerTitle>With icon</ContainerTitle>
81
- <DxcButton mode="secondary" label="Secondary" icon={iconSVG} />
82
- </Container>
83
- </>
84
- <>
85
- <MainTitle>Text</MainTitle>
86
- <Container>
87
- <ContainerTitle>Enabled</ContainerTitle>
153
+ </ExampleContainer>
154
+ <ExampleContainer>
155
+ <Title title="With icon" theme="dark" level={4} />
156
+ <DxcButton mode="secondary" label="Primary" icon={iconSVG} />
157
+ </ExampleContainer>
158
+ <Title title="Text" theme="dark" level={2} />
159
+ <ExampleContainer>
160
+ <Title title="Enabled" theme="dark" level={4} />
88
161
  <DxcButton mode="text" label="Text enabled" />
89
- </Container>
90
- <Container className="pseudo-hover">
91
- <ContainerTitle>Hovered</ContainerTitle>
162
+ </ExampleContainer>
163
+ <ExampleContainer pseudoState="pseudo-hover">
164
+ <Title title="Hovered" theme="dark" level={4} />
92
165
  <DxcButton mode="text" label="Text hovered" />
93
- </Container>
94
- <Container className="pseudo-focus">
95
- <ContainerTitle>Focused</ContainerTitle>
166
+ </ExampleContainer>
167
+ <ExampleContainer pseudoState="pseudo-focus">
168
+ <Title title="Focused" theme="dark" level={4} />
96
169
  <DxcButton mode="text" label="Text focused" />
97
- </Container>
98
- <Container className="pseudo-active">
99
- <ContainerTitle>Actived</ContainerTitle>
170
+ </ExampleContainer>
171
+ <ExampleContainer pseudoState="pseudo-active">
172
+ <Title title="Actived" theme="dark" level={4} />
100
173
  <DxcButton mode="text" label="Text actived" />
101
- </Container>
102
- <Container>
103
- <ContainerTitle>Disabled</ContainerTitle>
174
+ </ExampleContainer>
175
+ <ExampleContainer>
176
+ <Title title="Disabled" theme="dark" level={4} />
104
177
  <DxcButton mode="text" label="Text disabled" disabled />
105
- </Container>
106
- <Container>
107
- <ContainerTitle>With icon</ContainerTitle>
108
- <DxcButton label="Text" mode="text" icon={iconSVG} />
109
- </Container>
110
- </>
111
- </>
112
- <BackgroundColorProvider color="#333333">
113
- <DarkContainer>
114
- <>
115
- <MainTitle style={{ color: "white" }}>Primary</MainTitle>
116
- <Container>
117
- <ContainerTitle style={{ color: "white" }}>Enabled</ContainerTitle>
118
- <DxcButton label="Primary enabled" />
119
- </Container>
120
- <Container className="pseudo-hover">
121
- <ContainerTitle style={{ color: "white" }}>Hovered</ContainerTitle>
122
- <DxcButton label="Primary hovered" />
123
- </Container>
124
- <Container className="pseudo-focus">
125
- <ContainerTitle style={{ color: "white" }}>Focused</ContainerTitle>
126
- <DxcButton label="Primary focused" />
127
- </Container>
128
- <Container className="pseudo-active">
129
- <ContainerTitle style={{ color: "white" }}>Actived</ContainerTitle>
130
- <DxcButton label="Primary actived" />
131
- </Container>
132
- <Container>
133
- <ContainerTitle style={{ color: "white" }}>Disabled</ContainerTitle>
134
- <DxcButton label="Primary disabled" disabled />
135
- </Container>
136
- <Container style={{ color: "white" }}>
137
- <ContainerTitle>With icon</ContainerTitle>
138
- <DxcButton label="Primary" icon={iconSVG} />
139
- </Container>
140
- </>
141
- <>
142
- <MainTitle style={{ color: "white" }}>Secondary</MainTitle>
143
- <Container>
144
- <ContainerTitle style={{ color: "white" }}>Enabled</ContainerTitle>
145
- <DxcButton mode="secondary" label="Secondary enabled" />
146
- </Container>
147
- <Container className="pseudo-hover">
148
- <ContainerTitle style={{ color: "white" }}>Hovered</ContainerTitle>
149
- <DxcButton mode="secondary" label="Secondary hovered" />
150
- </Container>
151
- <Container className="pseudo-focus">
152
- <ContainerTitle style={{ color: "white" }}>Focused</ContainerTitle>
153
- <DxcButton mode="secondary" label="Secondary focused" />
154
- </Container>
155
- <Container className="pseudo-active">
156
- <ContainerTitle style={{ color: "white" }}>Actived</ContainerTitle>
157
- <DxcButton mode="secondary" label="Secondary actived" />
158
- </Container>
159
- <Container>
160
- <ContainerTitle style={{ color: "white" }}>Disabled</ContainerTitle>
161
- <DxcButton mode="secondary" disabled label="Secondary disabled" />
162
- </Container>
163
- <Container style={{ color: "white" }}>
164
- <ContainerTitle>With icon</ContainerTitle>
165
- <DxcButton mode="secondary" label="Primary" icon={iconSVG} />
166
- </Container>
167
- </>
168
- <>
169
- <MainTitle style={{ color: "white" }}>Text</MainTitle>
170
- <Container>
171
- <ContainerTitle style={{ color: "white" }}>Enabled</ContainerTitle>
172
- <DxcButton mode="text" label="Text enabled" />
173
- </Container>
174
- <Container className="pseudo-hover">
175
- <ContainerTitle style={{ color: "white" }}>Hovered</ContainerTitle>
176
- <DxcButton mode="text" label="Text hovered" />
177
- </Container>
178
- <Container className="pseudo-focus">
179
- <ContainerTitle style={{ color: "white" }}>Focused</ContainerTitle>
180
- <DxcButton mode="text" label="Text focused" />
181
- </Container>
182
- <Container className="pseudo-active">
183
- <ContainerTitle style={{ color: "white" }}>Actived</ContainerTitle>
184
- <DxcButton mode="text" label="Text actived" />
185
- </Container>
186
- <Container>
187
- <ContainerTitle style={{ color: "white" }}>Disabled</ContainerTitle>
188
- <DxcButton mode="text" label="Text disabled" disabled />
189
- </Container>
190
- <Container style={{ color: "white" }}>
191
- <ContainerTitle>With icon</ContainerTitle>
192
- <DxcButton mode="text" label="Primary" icon={iconSVG} />
193
- </Container>
194
- </>
178
+ </ExampleContainer>
179
+ <ExampleContainer>
180
+ <Title title="With icon" theme="dark" level={4} />
181
+ <DxcButton mode="text" label="Primary" icon={iconSVG} />
182
+ </ExampleContainer>
195
183
  </DarkContainer>
196
184
  </BackgroundColorProvider>
197
- <>
198
- <MainTitle>Sizes</MainTitle>
199
- <Container>
200
- <ContainerTitle>Small size</ContainerTitle>
201
- <DxcButton label="Small" size="small" />
202
- </Container>
203
- <Container>
204
- <ContainerTitle>Medium size</ContainerTitle>
205
- <DxcButton label="MediumSiz" size="medium" />
206
- </Container>
207
- <Container>
208
- <ContainerTitle>Medium size with ellipsis</ContainerTitle>
209
- <DxcButton label="MediumSize" size="medium" />
210
- </Container>
211
- <Container>
212
- <ContainerTitle>Medium size icon after</ContainerTitle>
213
- <DxcButton label="Mediu" iconPosition="after" icon={iconSVG} size="medium" />
214
- </Container>
215
- <Container>
216
- <ContainerTitle>Medium size icon before</ContainerTitle>
217
- <DxcButton label="Mediu" iconPosition="before" icon={iconSVG} size="medium" />
218
- </Container>
219
- <Container>
220
- <ContainerTitle>Medium size icon after with ellipsis</ContainerTitle>
221
- <DxcButton label="Medium" iconPosition="after" icon={iconSVG} size="medium" />
222
- </Container>
223
- <Container>
224
- <ContainerTitle>Medium size icon before with ellipsis</ContainerTitle>
225
- <DxcButton label="Medium" iconPosition="before" icon={iconSVG} size="medium" />
226
- </Container>
227
- <Container>
228
- <ContainerTitle>Large size</ContainerTitle>
229
- <DxcButton label="LargeSizePrimaryButtonEx" size="large" />
230
- </Container>
231
- <Container>
232
- <ContainerTitle>Large size with ellipsis</ContainerTitle>
233
- <DxcButton label="LargeSizePrimaryButtonExa" size="large" />
234
- </Container>
235
- <Container>
236
- <ContainerTitle>Large size icon after</ContainerTitle>
237
- <DxcButton label="LargeSizePrimaryButto" iconPosition="after" icon={iconSVG} size="large" />
238
- </Container>
239
- <Container>
240
- <ContainerTitle>Large size icon before</ContainerTitle>
241
- <DxcButton label="LargeSizePrimaryButto" iconPosition="before" icon={iconSVG} size="large" />
242
- </Container>
243
- <Container>
244
- <ContainerTitle>Large size icon after with ellipsis</ContainerTitle>
245
- <DxcButton label="LargeSizePrimaryButton" iconPosition="after" icon={iconSVG} size="large" />
246
- </Container>
247
- <Container>
248
- <ContainerTitle>Large size icon before with ellipsis</ContainerTitle>
249
- <DxcButton label="LargeSizePrimaryButton" iconPosition="before" icon={iconSVG} size="large" />
250
- </Container>
251
- <Container>
252
- <ContainerTitle>Fill parent size</ContainerTitle>
253
- <DxcButton label="FillParent" size="fillParent" />
254
- </Container>
255
- <Container>
256
- <ContainerTitle>Fit content size</ContainerTitle>
257
- <DxcButton label="FitContent" size="fitContent" />
258
- </Container>
259
- <MainTitle>Margins</MainTitle>
260
- <Container>
261
- <ContainerTitle>Xxsmall margin</ContainerTitle>
262
- <DxcButton label="Xxsmall margin" margin="xxsmall" />
263
- </Container>
264
- <Container>
265
- <ContainerTitle>Xsmall margin</ContainerTitle>
266
- <DxcButton label="Xsmall margin" margin="xsmall" />
267
- </Container>
268
- <Container>
269
- <ContainerTitle>Small margin</ContainerTitle>
270
- <DxcButton label="Small margin" margin="small" />
271
- </Container>
272
- <Container>
273
- <ContainerTitle>Medium margin</ContainerTitle>
274
- <DxcButton label="Medium margin" margin="medium" />
275
- </Container>
276
- <Container>
277
- <ContainerTitle>Large margin</ContainerTitle>
278
- <DxcButton label="Large margin" margin="large" />
279
- </Container>
280
- <Container>
281
- <ContainerTitle>Xlarge margin</ContainerTitle>
282
- <DxcButton label="Xlarge margin" margin="xlarge" />
283
- </Container>
284
- <Container>
285
- <ContainerTitle>Xxlarge margin</ContainerTitle>
286
- <DxcButton label="Xxlarge margin" margin="xxlarge" />
287
- </Container>
288
- </>
185
+ <Title title="Sizes" theme="light" level={2} />
186
+ <ExampleContainer>
187
+ <Title title="Small size" theme="light" level={4} />
188
+ <DxcButton label="Small" size="small" />
189
+ </ExampleContainer>
190
+ <ExampleContainer>
191
+ <Title title="Medium size" theme="light" level={4} />
192
+ <DxcButton label="MediumSiz" size="medium" />
193
+ </ExampleContainer>
194
+ <ExampleContainer>
195
+ <Title title="Medium size with ellipsis" theme="light" level={4} />
196
+ <DxcButton label="MediumSize" size="medium" />
197
+ </ExampleContainer>
198
+ <ExampleContainer>
199
+ <Title title="Medium size icon after" theme="light" level={4} />
200
+ <DxcButton label="Mediu" iconPosition="after" icon={iconSVG} size="medium" />
201
+ </ExampleContainer>
202
+ <ExampleContainer>
203
+ <Title title="Medium size icon before" theme="light" level={4} />
204
+ <DxcButton label="Mediu" iconPosition="before" icon={iconSVG} size="medium" />
205
+ </ExampleContainer>
206
+ <ExampleContainer>
207
+ <Title title="Medium size icon after with ellipsis" theme="light" level={4} />
208
+ <DxcButton label="Medium" iconPosition="after" icon={iconSVG} size="medium" />
209
+ </ExampleContainer>
210
+ <ExampleContainer>
211
+ <Title title="Medium size icon before with ellipsis" theme="light" level={4} />
212
+ <DxcButton label="Medium" iconPosition="before" icon={iconSVG} size="medium" />
213
+ </ExampleContainer>
214
+ <ExampleContainer>
215
+ <Title title="Large size" theme="light" level={4} />
216
+ <DxcButton label="LargeSizePrimaryButtonEx" size="large" />
217
+ </ExampleContainer>
218
+ <ExampleContainer>
219
+ <Title title="Large size with ellipsis" theme="light" level={4} />
220
+ <DxcButton label="LargeSizePrimaryButtonExa" size="large" />
221
+ </ExampleContainer>
222
+ <ExampleContainer>
223
+ <Title title="Large size icon after" theme="light" level={4} />
224
+ <DxcButton label="LargeSizePrimaryButto" iconPosition="after" icon={iconSVG} size="large" />
225
+ </ExampleContainer>
226
+ <ExampleContainer>
227
+ <Title title="Large size icon before" theme="light" level={4} />
228
+ <DxcButton label="LargeSizePrimaryButto" iconPosition="before" icon={iconSVG} size="large" />
229
+ </ExampleContainer>
230
+ <ExampleContainer>
231
+ <Title title="Large size icon after with ellipsis" theme="light" level={4} />
232
+ <DxcButton label="LargeSizePrimaryButton" iconPosition="after" icon={iconSVG} size="large" />
233
+ </ExampleContainer>
234
+ <ExampleContainer>
235
+ <Title title="Large size icon before with ellipsis" theme="light" level={4} />
236
+ <DxcButton label="LargeSizePrimaryButton" iconPosition="before" icon={iconSVG} size="large" />
237
+ </ExampleContainer>
238
+ <ExampleContainer>
239
+ <Title title="FillParent size" theme="light" level={4} />
240
+ <DxcButton label="FillParent" size="fillParent" />
241
+ </ExampleContainer>
242
+ <ExampleContainer>
243
+ <Title title="FitContent size" theme="light" level={4} />
244
+ <DxcButton label="FitContent" size="fitContent" />
245
+ </ExampleContainer>
246
+ <Title title="Margins" theme="light" level={2} />
247
+ <ExampleContainer>
248
+ <Title title="Xxsmall margin" theme="light" level={4} />
249
+ <DxcButton label="Xxsmall margin" margin="xxsmall" />
250
+ </ExampleContainer>
251
+ <ExampleContainer>
252
+ <Title title="Xsmall margin" theme="light" level={4} />
253
+ <DxcButton label="Xsmall margin" margin="xsmall" />
254
+ </ExampleContainer>
255
+ <ExampleContainer>
256
+ <Title title="Small margin" theme="light" level={4} />
257
+ <DxcButton label="Small margin" margin="small" />
258
+ </ExampleContainer>
259
+ <ExampleContainer>
260
+ <Title title="Medium margin" theme="light" level={4} />
261
+ <DxcButton label="Medium margin" margin="medium" />
262
+ </ExampleContainer>
263
+ <ExampleContainer>
264
+ <Title title="Large margin" theme="light" level={4} />
265
+ <DxcButton label="Large margin" margin="large" />
266
+ </ExampleContainer>
267
+ <ExampleContainer>
268
+ <Title title="Xlarge margin" theme="light" level={4} />
269
+ <DxcButton label="Xlarge margin" margin="xlarge" />
270
+ </ExampleContainer>
271
+ <ExampleContainer>
272
+ <Title title="Xxlarge margin" theme="light" level={4} />
273
+ <DxcButton label="Xxlarge margin" margin="xxlarge" />
274
+ </ExampleContainer>
289
275
  </>
290
276
  );
291
-
292
- const MainTitle = styled.h2`
293
- font-family: Open Sans, sans-serif;
294
- `;
295
-
296
- const ContainerTitle = styled.h4`
297
- font-family: Open Sans, sans-serif;
298
- `;
299
-
300
- const Container = styled.div`
301
- margin: 15px;
302
- `;
303
-
304
- const DarkContainer = styled.div`
305
- background-color: #333333;
306
- `;
package/button/types.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- declare type Size = "small" | "medium" | "large" | "fillParent" | "fitContent";
1
+ /// <reference types="react" />
2
2
  declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
3
  declare type Margin = {
4
4
  top?: Space;
@@ -6,7 +6,7 @@ declare type Margin = {
6
6
  left?: Space;
7
7
  right?: Space;
8
8
  };
9
- declare type SVG = string | (HTMLElement & SVGElement);
9
+ declare type SVG = React.SVGProps<SVGSVGElement> | React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
10
10
  declare type Props = {
11
11
  /**
12
12
  * Text to be placed next to the button.
@@ -28,29 +28,29 @@ declare type Props = {
28
28
  * This prop corresponds to the 'type' prop of the button in html.
29
29
  */
30
30
  type?: "button" | "reset" | "submit";
31
- /**
32
- * DEPRECATED. URL of the icon that will be placed next to the button label.
33
- */
34
- iconSrc?: string;
35
31
  /**
36
32
  * Element used as the icon that will be placed next to the button label.
37
33
  */
38
34
  icon?: SVG;
35
+ /**
36
+ * @deprecated URL of the icon that will be placed next to the button label.
37
+ */
38
+ iconSrc?: string;
39
39
  /**
40
40
  * This function will be called when the user clicks the button. The event object will be passed as a parameter.
41
41
  */
42
- onClick?: any;
42
+ onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
43
43
  /**
44
44
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
45
45
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
46
46
  */
47
47
  margin?: Space | Margin;
48
48
  /**
49
- * Size of the component ('small' | 'medium' | 'large' | 'fillParent' | 'fitContent').
49
+ * Size of the component.
50
50
  */
51
- size?: Size;
51
+ size?: "small" | "medium" | "large" | "fillParent" | "fitContent";
52
52
  /**
53
- * Value of the tabindex.
53
+ * Value of the tabindex attribute.
54
54
  */
55
55
  tabIndex?: number;
56
56
  };
package/card/Card.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import CardPropsType from "./types";
3
+ declare const DxcCard: ({ imageSrc, imageBgColor, imagePadding, imagePosition, linkHref, onClick, imageCover, margin, contentPadding, tabIndex, outlined, children, }: CardPropsType) => JSX.Element;
4
+ export default DxcCard;