@dxc-technology/halstack-react 0.0.0-ee92231 → 0.0.0-eefd559

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 (205) hide show
  1. package/BackgroundColorContext.d.ts +10 -0
  2. package/BackgroundColorContext.js +1 -4
  3. package/ThemeContext.d.ts +15 -0
  4. package/ThemeContext.js +5 -8
  5. package/V3Select/V3Select.js +2 -2
  6. package/V3Textarea/V3Textarea.js +2 -2
  7. package/accordion/Accordion.d.ts +1 -1
  8. package/accordion/Accordion.js +11 -22
  9. package/accordion/Accordion.stories.tsx +307 -0
  10. package/accordion/types.d.ts +4 -8
  11. package/accordion-group/AccordionGroup.js +2 -2
  12. package/accordion-group/AccordionGroup.stories.tsx +225 -0
  13. package/accordion-group/types.d.ts +4 -8
  14. package/alert/Alert.js +2 -2
  15. package/alert/Alert.stories.tsx +170 -0
  16. package/alert/types.d.ts +1 -1
  17. package/badge/Badge.js +1 -1
  18. package/bleed/Bleed.d.ts +3 -0
  19. package/bleed/Bleed.js +84 -0
  20. package/bleed/Bleed.stories.tsx +342 -0
  21. package/bleed/types.d.ts +13 -0
  22. package/bleed/types.js +5 -0
  23. package/box/Box.d.ts +1 -1
  24. package/box/Box.js +4 -7
  25. package/box/types.d.ts +0 -4
  26. package/button/Button.d.ts +1 -1
  27. package/button/Button.js +13 -19
  28. package/button/Button.stories.tsx +222 -241
  29. package/button/types.d.ts +5 -9
  30. package/card/Card.js +5 -6
  31. package/card/Card.stories.tsx +201 -0
  32. package/card/ice-cream.jpg +0 -0
  33. package/card/types.d.ts +4 -6
  34. package/checkbox/Checkbox.js +2 -2
  35. package/checkbox/types.d.ts +2 -2
  36. package/chip/Chip.d.ts +4 -0
  37. package/chip/Chip.js +16 -76
  38. package/chip/Chip.stories.tsx +119 -0
  39. package/chip/types.d.ts +45 -0
  40. package/chip/types.js +5 -0
  41. package/common/variables.js +70 -28
  42. package/date/Date.js +1 -1
  43. package/date-input/DateInput.js +10 -13
  44. package/date-input/DateInput.stories.tsx +138 -0
  45. package/dialog/Dialog.js +4 -3
  46. package/dialog/Dialog.stories.tsx +212 -0
  47. package/dropdown/Dropdown.d.ts +1 -1
  48. package/dropdown/Dropdown.js +13 -35
  49. package/dropdown/Dropdown.stories.tsx +249 -0
  50. package/dropdown/types.d.ts +6 -15
  51. package/file-input/FileInput.d.ts +4 -0
  52. package/file-input/FileInput.js +167 -109
  53. package/file-input/FileInput.stories.tsx +507 -0
  54. package/file-input/FileItem.d.ts +14 -0
  55. package/file-input/FileItem.js +12 -21
  56. package/file-input/types.d.ts +112 -0
  57. package/file-input/types.js +5 -0
  58. package/footer/Footer.d.ts +1 -1
  59. package/footer/Footer.js +28 -36
  60. package/footer/{Footer.stories.jsx → Footer.stories.tsx} +1 -22
  61. package/footer/Icons.d.ts +2 -0
  62. package/footer/Icons.js +3 -3
  63. package/footer/types.d.ts +22 -18
  64. package/header/Header.js +2 -2
  65. package/header/Header.stories.tsx +162 -0
  66. package/header/Icons.d.ts +2 -0
  67. package/header/types.d.ts +4 -2
  68. package/heading/Heading.d.ts +4 -0
  69. package/heading/Heading.js +7 -24
  70. package/heading/Heading.stories.tsx +54 -0
  71. package/heading/types.d.ts +33 -0
  72. package/heading/types.js +5 -0
  73. package/input-text/InputText.js +2 -2
  74. package/inset/Inset.d.ts +3 -0
  75. package/inset/Inset.js +84 -0
  76. package/inset/Inset.stories.tsx +229 -0
  77. package/inset/types.d.ts +13 -0
  78. package/inset/types.js +5 -0
  79. package/layout/ApplicationLayout.d.ts +10 -0
  80. package/layout/ApplicationLayout.js +9 -19
  81. package/layout/ApplicationLayout.stories.tsx +171 -0
  82. package/layout/types.d.ts +57 -0
  83. package/layout/types.js +5 -0
  84. package/link/Link.js +3 -3
  85. package/link/Link.stories.tsx +146 -0
  86. package/list/List.d.ts +4 -0
  87. package/list/List.js +47 -0
  88. package/list/List.stories.tsx +95 -0
  89. package/list/types.d.ts +7 -0
  90. package/list/types.js +5 -0
  91. package/main.d.ts +7 -3
  92. package/main.js +34 -2
  93. package/number-input/NumberInput.d.ts +4 -0
  94. package/number-input/NumberInput.js +5 -50
  95. package/number-input/{NumberInput.stories.jsx → NumberInput.stories.tsx} +0 -0
  96. package/number-input/NumberInputContext.d.ts +4 -0
  97. package/number-input/NumberInputContext.js +5 -2
  98. package/number-input/numberInputContextTypes.d.ts +19 -0
  99. package/number-input/numberInputContextTypes.js +5 -0
  100. package/number-input/types.d.ts +117 -0
  101. package/number-input/types.js +5 -0
  102. package/package.json +4 -2
  103. package/paginator/Paginator.js +2 -8
  104. package/password-input/PasswordInput.js +19 -18
  105. package/password-input/PasswordInput.stories.tsx +3 -3
  106. package/password-input/types.d.ts +17 -10
  107. package/progress-bar/ProgressBar.js +4 -4
  108. package/radio/Radio.js +2 -2
  109. package/radio/types.d.ts +2 -2
  110. package/radio-group/Radio.d.ts +4 -0
  111. package/radio-group/Radio.js +140 -0
  112. package/radio-group/RadioGroup.d.ts +4 -0
  113. package/radio-group/RadioGroup.js +273 -0
  114. package/radio-group/RadioGroup.stories.tsx +79 -0
  115. package/radio-group/RadioGroup.test.js +248 -0
  116. package/radio-group/types.d.ts +36 -0
  117. package/radio-group/types.js +5 -0
  118. package/resultsetTable/ResultsetTable.d.ts +4 -0
  119. package/resultsetTable/ResultsetTable.js +5 -28
  120. package/resultsetTable/ResultsetTable.stories.tsx +275 -0
  121. package/resultsetTable/types.d.ts +67 -0
  122. package/resultsetTable/types.js +5 -0
  123. package/row/Row.d.ts +3 -0
  124. package/row/Row.js +127 -0
  125. package/row/Row.stories.tsx +237 -0
  126. package/row/types.d.ts +10 -0
  127. package/row/types.js +5 -0
  128. package/select/Select.d.ts +4 -0
  129. package/select/Select.js +20 -22
  130. package/select/Select.stories.tsx +572 -0
  131. package/select/types.d.ts +170 -0
  132. package/select/types.js +5 -0
  133. package/sidenav/Sidenav.d.ts +9 -0
  134. package/sidenav/Sidenav.js +6 -15
  135. package/sidenav/Sidenav.stories.tsx +182 -0
  136. package/sidenav/types.d.ts +50 -0
  137. package/sidenav/types.js +5 -0
  138. package/slider/Slider.d.ts +1 -1
  139. package/slider/Slider.js +43 -32
  140. package/slider/Slider.stories.tsx +177 -0
  141. package/slider/types.d.ts +2 -7
  142. package/spinner/Spinner.js +2 -2
  143. package/spinner/Spinner.stories.jsx +1 -0
  144. package/stack/Stack.d.ts +3 -0
  145. package/stack/Stack.js +97 -0
  146. package/stack/Stack.stories.tsx +164 -0
  147. package/stack/types.d.ts +9 -0
  148. package/stack/types.js +5 -0
  149. package/switch/Switch.js +2 -2
  150. package/switch/Switch.stories.tsx +1 -1
  151. package/table/Table.js +3 -3
  152. package/table/Table.stories.jsx +2 -1
  153. package/tabs/Tabs.js +11 -9
  154. package/tabs/Tabs.stories.tsx +120 -0
  155. package/tabs/types.d.ts +25 -18
  156. package/tag/Tag.d.ts +4 -0
  157. package/tag/Tag.js +9 -35
  158. package/tag/{Tag.stories.jsx → Tag.stories.tsx} +15 -22
  159. package/tag/types.d.ts +69 -0
  160. package/tag/types.js +5 -0
  161. package/text/Text.d.ts +7 -0
  162. package/text/Text.js +30 -0
  163. package/text/Text.stories.tsx +19 -0
  164. package/text-input/TextInput.d.ts +4 -0
  165. package/text-input/TextInput.js +54 -85
  166. package/text-input/TextInput.stories.tsx +456 -0
  167. package/text-input/types.d.ts +159 -0
  168. package/text-input/types.js +5 -0
  169. package/textarea/Textarea.d.ts +4 -0
  170. package/textarea/Textarea.js +27 -60
  171. package/textarea/Textarea.stories.jsx +4 -3
  172. package/textarea/types.d.ts +130 -0
  173. package/textarea/types.js +5 -0
  174. package/toggle/Toggle.js +1 -1
  175. package/toggle-group/ToggleGroup.d.ts +4 -0
  176. package/toggle-group/ToggleGroup.js +16 -45
  177. package/toggle-group/ToggleGroup.stories.tsx +173 -0
  178. package/toggle-group/types.d.ts +97 -0
  179. package/toggle-group/types.js +5 -0
  180. package/upload/buttons-upload/ButtonsUpload.js +2 -2
  181. package/upload/dragAndDropArea/DragAndDropArea.js +2 -2
  182. package/upload/file-upload/FileToUpload.js +1 -1
  183. package/upload/files-upload/FilesToUpload.js +1 -1
  184. package/upload/transaction/Transaction.js +2 -2
  185. package/upload/transactions/Transactions.js +1 -1
  186. package/useTheme.d.ts +2 -0
  187. package/useTheme.js +1 -1
  188. package/wizard/Wizard.d.ts +4 -0
  189. package/wizard/Wizard.js +69 -59
  190. package/wizard/Wizard.stories.tsx +224 -0
  191. package/wizard/types.d.ts +60 -0
  192. package/wizard/types.js +5 -0
  193. package/chip/index.d.ts +0 -22
  194. package/file-input/index.d.ts +0 -81
  195. package/heading/index.d.ts +0 -17
  196. package/number-input/index.d.ts +0 -113
  197. package/resultsetTable/index.d.ts +0 -19
  198. package/select/index.d.ts +0 -131
  199. package/sidenav/index.d.ts +0 -13
  200. package/tag/index.d.ts +0 -24
  201. package/text-input/index.d.ts +0 -135
  202. package/textarea/index.d.ts +0 -117
  203. package/toggle-group/index.d.ts +0 -21
  204. package/wizard/Icons.js +0 -65
  205. package/wizard/index.d.ts +0 -18
package/button/Button.stories.tsx CHANGED
@@ -10,284 +10,265 @@ export default {
10
10
  component: DxcButton,
11
11
  };
12
12
 
13
- const iconSVG = () => {
14
- return (
15
- <svg viewBox="0 0 24 24" fill="currentColor">
16
- <path d="M0 0h24v24H0z" fill="none" />
17
- <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
18
- </svg>
19
- );
20
- };
13
+ const iconSVG = (
14
+ <svg viewBox="0 0 24 24" fill="currentColor">
15
+ <path d="M0 0h24v24H0z" fill="none" />
16
+ <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
17
+ </svg>
18
+ );
21
19
  export const Chromatic = () => (
22
20
  <>
23
- <>
24
- <Title title="Primary" theme="light" level={2}/>
25
- <ExampleContainer>
26
- <Title title="Enabled" theme="light" level={4}/>
27
- <DxcButton label="Primary enabled" />
28
- </ExampleContainer>
29
- <ExampleContainer pseudoState="pseudo-hover">
30
- <Title title="Hovered" theme="light" level={4}/>
31
- <DxcButton label="Primary hovered" />
32
- </ExampleContainer>
33
- <ExampleContainer pseudoState="pseudo-focus">
34
- <Title title="Focused" theme="light" level={4}/>
35
- <DxcButton label="Primary focused" />
36
- </ExampleContainer>
37
- <ExampleContainer pseudoState="pseudo-active">
38
- <Title title="Actived" theme="light" level={4}/>
39
- <DxcButton label="Primary actived" />
40
- </ExampleContainer>
41
- <ExampleContainer>
42
- <Title title="Disabled" theme="light" level={4}/>
43
- <DxcButton label="Primary disabled" disabled />
44
- </ExampleContainer>
45
- <ExampleContainer>
46
- <Title title="With left icon" theme="light" level={4}/>
47
- <DxcButton label="Primary" icon={iconSVG} />
48
- </ExampleContainer>
49
- <ExampleContainer>
50
- <Title title="With right icon" theme="light" level={4}/>
51
- <DxcButton label="Primary" icon={iconSVG} iconPosition="after" />
52
- </ExampleContainer>
53
- <ExampleContainer>
54
- <Title title="Only icon" theme="light" level={4}/>
55
- <DxcButton icon={iconSVG} />
56
- </ExampleContainer>
57
- </>
58
- <>
59
- <>
60
- <Title title="Secondary" theme="light" level={2}/>
21
+ <Title title="Primary" theme="light" level={2} />
22
+ <ExampleContainer>
23
+ <Title title="Enabled" theme="light" level={4} />
24
+ <DxcButton label="Primary enabled" />
25
+ </ExampleContainer>
26
+ <ExampleContainer pseudoState="pseudo-hover">
27
+ <Title title="Hovered" theme="light" level={4} />
28
+ <DxcButton label="Primary hovered" />
29
+ </ExampleContainer>
30
+ <ExampleContainer pseudoState="pseudo-focus">
31
+ <Title title="Focused" theme="light" level={4} />
32
+ <DxcButton label="Primary focused" />
33
+ </ExampleContainer>
34
+ <ExampleContainer pseudoState="pseudo-active">
35
+ <Title title="Actived" theme="light" level={4} />
36
+ <DxcButton label="Primary actived" />
37
+ </ExampleContainer>
38
+ <ExampleContainer>
39
+ <Title title="Disabled" theme="light" level={4} />
40
+ <DxcButton label="Primary disabled" disabled />
41
+ </ExampleContainer>
42
+ <ExampleContainer>
43
+ <Title title="With left icon" theme="light" level={4} />
44
+ <DxcButton label="Primary" icon={iconSVG} />
45
+ </ExampleContainer>
46
+ <ExampleContainer>
47
+ <Title title="With right icon" theme="light" level={4} />
48
+ <DxcButton label="Primary" icon={iconSVG} iconPosition="after" />
49
+ </ExampleContainer>
50
+ <ExampleContainer>
51
+ <Title title="Only icon" theme="light" level={4} />
52
+ <DxcButton icon={iconSVG} />
53
+ </ExampleContainer>
54
+ <Title title="Secondary" theme="light" level={2} />
55
+ <ExampleContainer>
56
+ <Title title="Enabled" theme="light" level={4} />
57
+ <DxcButton mode="secondary" label="Secondary enabled" />
58
+ </ExampleContainer>
59
+ <ExampleContainer pseudoState="pseudo-hover">
60
+ <Title title="Hovered" theme="light" level={4} />
61
+ <DxcButton mode="secondary" label="Secondary hovered" />
62
+ </ExampleContainer>
63
+ <ExampleContainer pseudoState="pseudo-focus">
64
+ <Title title="Focused" theme="light" level={4} />
65
+ <DxcButton mode="secondary" label="Secondary focused" />
66
+ </ExampleContainer>
67
+ <ExampleContainer pseudoState="pseudo-active">
68
+ <Title title="Actived" theme="light" level={4} />
69
+ <DxcButton mode="secondary" label="Secondary actived" />
70
+ </ExampleContainer>
71
+ <ExampleContainer>
72
+ <Title title="Disabled" theme="light" level={4} />
73
+ <DxcButton mode="secondary" disabled label="Secondary disabled" />
74
+ </ExampleContainer>
75
+ <ExampleContainer>
76
+ <Title title="With icon" theme="light" level={4} />
77
+ <DxcButton mode="secondary" label="Secondary" icon={iconSVG} />
78
+ </ExampleContainer>
79
+ <Title title="Text" theme="light" level={2} />
80
+ <ExampleContainer>
81
+ <Title title="Enabled" theme="light" level={4} />
82
+ <DxcButton mode="text" label="Text enabled" />
83
+ </ExampleContainer>
84
+ <ExampleContainer pseudoState="pseudo-hover">
85
+ <Title title="Hovered" theme="light" level={4} />
86
+ <DxcButton mode="text" label="Text hovered" />
87
+ </ExampleContainer>
88
+ <ExampleContainer pseudoState="pseudo-focus">
89
+ <Title title="Focused" theme="light" level={4} />
90
+ <DxcButton mode="text" label="Text focused" />
91
+ </ExampleContainer>
92
+ <ExampleContainer pseudoState="pseudo-active">
93
+ <Title title="Actived" theme="light" level={4} />
94
+ <DxcButton mode="text" label="Text actived" />
95
+ </ExampleContainer>
96
+ <ExampleContainer>
97
+ <Title title="Disabled" theme="light" level={4} />
98
+ <DxcButton mode="text" label="Text disabled" disabled />
99
+ </ExampleContainer>
100
+ <ExampleContainer>
101
+ <Title title="With icon" theme="light" level={4} />
102
+ <DxcButton label="Text" mode="text" icon={iconSVG} />
103
+ </ExampleContainer>
104
+ <BackgroundColorProvider color="#333333">
105
+ <DarkContainer>
106
+ <Title title="Primary" theme="dark" level={2} />
61
107
  <ExampleContainer>
62
- <Title title="Enabled" theme="light" level={4}/>
108
+ <Title title="Enabled" theme="dark" level={4} />
109
+ <DxcButton label="Primary enabled" />
110
+ </ExampleContainer>
111
+ <ExampleContainer pseudoState="pseudo-hover">
112
+ <Title title="Hovered" theme="dark" level={4} />
113
+ <DxcButton label="Primary hovered" />
114
+ </ExampleContainer>
115
+ <ExampleContainer pseudoState="pseudo-focus">
116
+ <Title title="Focused" theme="dark" level={4} />
117
+ <DxcButton label="Primary focused" />
118
+ </ExampleContainer>
119
+ <ExampleContainer pseudoState="pseudo-active">
120
+ <Title title="Actived" theme="dark" level={4} />
121
+ <DxcButton label="Primary actived" />
122
+ </ExampleContainer>
123
+ <ExampleContainer>
124
+ <Title title="Disabled" theme="dark" level={4} />
125
+ <DxcButton label="Primary disabled" disabled />
126
+ </ExampleContainer>
127
+ <ExampleContainer>
128
+ <Title title="With icon" theme="dark" level={4} />
129
+ <DxcButton label="Primary" icon={iconSVG} />
130
+ </ExampleContainer>
131
+ <Title title="Secondary" theme="dark" level={2} />
132
+ <ExampleContainer>
133
+ <Title title="Enabled" theme="dark" level={4} />
63
134
  <DxcButton mode="secondary" label="Secondary enabled" />
64
135
  </ExampleContainer>
65
136
  <ExampleContainer pseudoState="pseudo-hover">
66
- <Title title="Hovered" theme="light" level={4}/>
137
+ <Title title="Hovered" theme="dark" level={4} />
67
138
  <DxcButton mode="secondary" label="Secondary hovered" />
68
139
  </ExampleContainer>
69
140
  <ExampleContainer pseudoState="pseudo-focus">
70
- <Title title="Focused" theme="light" level={4}/>
141
+ <Title title="Focused" theme="dark" level={4} />
71
142
  <DxcButton mode="secondary" label="Secondary focused" />
72
143
  </ExampleContainer>
73
144
  <ExampleContainer pseudoState="pseudo-active">
74
- <Title title="Actived" theme="light" level={4}/>
145
+ <Title title="Actived" theme="dark" level={4} />
75
146
  <DxcButton mode="secondary" label="Secondary actived" />
76
147
  </ExampleContainer>
77
148
  <ExampleContainer>
78
- <Title title="Disabled" theme="light" level={4}/>
149
+ <Title title="Disabled" theme="dark" level={4} />
79
150
  <DxcButton mode="secondary" disabled label="Secondary disabled" />
80
151
  </ExampleContainer>
81
152
  <ExampleContainer>
82
- <Title title="With icon" theme="light" level={4}/>
83
- <DxcButton mode="secondary" label="Secondary" icon={iconSVG} />
153
+ <Title title="With icon" theme="dark" level={4} />
154
+ <DxcButton mode="secondary" label="Primary" icon={iconSVG} />
84
155
  </ExampleContainer>
85
- </>
86
- <>
87
- <Title title="Text" theme="light" level={2}/>
156
+ <Title title="Text" theme="dark" level={2} />
88
157
  <ExampleContainer>
89
- <Title title="Enabled" theme="light" level={4}/>
158
+ <Title title="Enabled" theme="dark" level={4} />
90
159
  <DxcButton mode="text" label="Text enabled" />
91
160
  </ExampleContainer>
92
161
  <ExampleContainer pseudoState="pseudo-hover">
93
- <Title title="Hovered" theme="light" level={4}/>
162
+ <Title title="Hovered" theme="dark" level={4} />
94
163
  <DxcButton mode="text" label="Text hovered" />
95
164
  </ExampleContainer>
96
165
  <ExampleContainer pseudoState="pseudo-focus">
97
- <Title title="Focused" theme="light" level={4}/>
166
+ <Title title="Focused" theme="dark" level={4} />
98
167
  <DxcButton mode="text" label="Text focused" />
99
168
  </ExampleContainer>
100
169
  <ExampleContainer pseudoState="pseudo-active">
101
- <Title title="Actived" theme="light" level={4}/>
170
+ <Title title="Actived" theme="dark" level={4} />
102
171
  <DxcButton mode="text" label="Text actived" />
103
172
  </ExampleContainer>
104
173
  <ExampleContainer>
105
- <Title title="Disabled" theme="light" level={4}/>
174
+ <Title title="Disabled" theme="dark" level={4} />
106
175
  <DxcButton mode="text" label="Text disabled" disabled />
107
176
  </ExampleContainer>
108
177
  <ExampleContainer>
109
- <Title title="With icon" theme="light" level={4}/>
110
- <DxcButton label="Text" mode="text" icon={iconSVG} />
178
+ <Title title="With icon" theme="dark" level={4} />
179
+ <DxcButton mode="text" label="Primary" icon={iconSVG} />
111
180
  </ExampleContainer>
112
- </>
113
- </>
114
- <BackgroundColorProvider color="#333333">
115
- <DarkContainer>
116
- <>
117
- <Title title="Primary" theme="dark" level={2}/>
118
- <ExampleContainer>
119
- <Title title="Enabled" theme="dark" level={4}/>
120
- <DxcButton label="Primary enabled" />
121
- </ExampleContainer>
122
- <ExampleContainer pseudoState="pseudo-hover">
123
- <Title title="Hovered" theme="dark" level={4}/>
124
- <DxcButton label="Primary hovered" />
125
- </ExampleContainer>
126
- <ExampleContainer pseudoState="pseudo-focus">
127
- <Title title="Focused" theme="dark" level={4}/>
128
- <DxcButton label="Primary focused" />
129
- </ExampleContainer>
130
- <ExampleContainer pseudoState="pseudo-active">
131
- <Title title="Actived" theme="dark" level={4}/>
132
- <DxcButton label="Primary actived" />
133
- </ExampleContainer>
134
- <ExampleContainer>
135
- <Title title="Disabled" theme="dark" level={4}/>
136
- <DxcButton label="Primary disabled" disabled />
137
- </ExampleContainer>
138
- <ExampleContainer>
139
- <Title title="With icon" theme="dark" level={4}/>
140
- <DxcButton label="Primary" icon={iconSVG} />
141
- </ExampleContainer>
142
- </>
143
- <>
144
- <Title title="Secondary" theme="dark" level={2}/>
145
- <ExampleContainer>
146
- <Title title="Enabled" theme="dark" level={4}/>
147
- <DxcButton mode="secondary" label="Secondary enabled" />
148
- </ExampleContainer>
149
- <ExampleContainer pseudoState="pseudo-hover">
150
- <Title title="Hovered" theme="dark" level={4}/>
151
- <DxcButton mode="secondary" label="Secondary hovered" />
152
- </ExampleContainer>
153
- <ExampleContainer pseudoState="pseudo-focus">
154
- <Title title="Focused" theme="dark" level={4}/>
155
- <DxcButton mode="secondary" label="Secondary focused" />
156
- </ExampleContainer>
157
- <ExampleContainer pseudoState="pseudo-active">
158
- <Title title="Actived" theme="dark" level={4}/>
159
- <DxcButton mode="secondary" label="Secondary actived" />
160
- </ExampleContainer>
161
- <ExampleContainer>
162
- <Title title="Disabled" theme="dark" level={4}/>
163
- <DxcButton mode="secondary" disabled label="Secondary disabled" />
164
- </ExampleContainer>
165
- <ExampleContainer>
166
- <Title title="With icon" theme="dark" level={4}/>
167
- <DxcButton mode="secondary" label="Primary" icon={iconSVG} />
168
- </ExampleContainer>
169
- </>
170
- <>
171
- <Title title="Text" theme="dark" level={2}/>
172
- <ExampleContainer>
173
- <Title title="Enabled" theme="dark" level={4}/>
174
- <DxcButton mode="text" label="Text enabled" />
175
- </ExampleContainer>
176
- <ExampleContainer pseudoState="pseudo-hover">
177
- <Title title="Hovered" theme="dark" level={4}/>
178
- <DxcButton mode="text" label="Text hovered" />
179
- </ExampleContainer>
180
- <ExampleContainer pseudoState="pseudo-focus">
181
- <Title title="Focused" theme="dark" level={4}/>
182
- <DxcButton mode="text" label="Text focused" />
183
- </ExampleContainer>
184
- <ExampleContainer pseudoState="pseudo-active">
185
- <Title title="Actived" theme="dark" level={4}/>
186
- <DxcButton mode="text" label="Text actived" />
187
- </ExampleContainer>
188
- <ExampleContainer>
189
- <Title title="Disabled" theme="dark" level={4}/>
190
- <DxcButton mode="text" label="Text disabled" disabled />
191
- </ExampleContainer>
192
- <ExampleContainer>
193
- <Title title="With icon" theme="dark" level={4}/>
194
- <DxcButton mode="text" label="Primary" icon={iconSVG} />
195
- </ExampleContainer>
196
- </>
197
181
  </DarkContainer>
198
182
  </BackgroundColorProvider>
199
- <>
200
- <Title title="Sizes" theme="light" level={2}/>
201
- <ExampleContainer>
202
- <Title title="Small size" theme="light" level={4}/>
203
- <DxcButton label="Small" size="small" />
204
- </ExampleContainer>
205
- <ExampleContainer>
206
- <Title title="Medium size" theme="light" level={4}/>
207
- <DxcButton label="MediumSiz" size="medium" />
208
- </ExampleContainer>
209
- <ExampleContainer>
210
- <Title title="Medium size with ellipsis" theme="light" level={4}/>
211
- <DxcButton label="MediumSize" size="medium" />
212
- </ExampleContainer>
213
- <ExampleContainer>
214
- <Title title="Medium size icon after" theme="light" level={4}/>
215
- <DxcButton label="Mediu" iconPosition="after" icon={iconSVG} size="medium" />
216
- </ExampleContainer>
217
- <ExampleContainer>
218
- <Title title="Medium size icon before" theme="light" level={4}/>
219
- <DxcButton label="Mediu" iconPosition="before" icon={iconSVG} size="medium" />
220
- </ExampleContainer>
221
- <ExampleContainer>
222
- <Title title="Medium size icon after with ellipsis" theme="light" level={4}/>
223
- <DxcButton label="Medium" iconPosition="after" icon={iconSVG} size="medium" />
224
- </ExampleContainer>
225
- <ExampleContainer>
226
- <Title title="Medium size icon before with ellipsis" theme="light" level={4}/>
227
- <DxcButton label="Medium" iconPosition="before" icon={iconSVG} size="medium" />
228
- </ExampleContainer>
229
- <ExampleContainer>
230
- <Title title="Large size" theme="light" level={4}/>
231
- <DxcButton label="LargeSizePrimaryButtonEx" size="large" />
232
- </ExampleContainer>
233
- <ExampleContainer>
234
- <Title title="Large size with ellipsis" theme="light" level={4}/>
235
- <DxcButton label="LargeSizePrimaryButtonExa" size="large" />
236
- </ExampleContainer>
237
- <ExampleContainer>
238
- <Title title="Large size icon after" theme="light" level={4}/>
239
- <DxcButton label="LargeSizePrimaryButto" iconPosition="after" icon={iconSVG} size="large" />
240
- </ExampleContainer>
241
- <ExampleContainer>
242
- <Title title="Large size icon before" theme="light" level={4}/>
243
- <DxcButton label="LargeSizePrimaryButto" iconPosition="before" icon={iconSVG} size="large" />
244
- </ExampleContainer>
245
- <ExampleContainer>
246
- <Title title="Large size icon after with ellipsis" theme="light" level={4}/>
247
- <DxcButton label="LargeSizePrimaryButton" iconPosition="after" icon={iconSVG} size="large" />
248
- </ExampleContainer>
249
- <ExampleContainer>
250
- <Title title="Large size icon before with ellipsis" theme="light" level={4}/>
251
- <DxcButton label="LargeSizePrimaryButton" iconPosition="before" icon={iconSVG} size="large" />
252
- </ExampleContainer>
253
- <ExampleContainer>
254
- <Title title="Fit content size" theme="light" level={4}/>
255
- <DxcButton label="FillParent" size="fillParent" />
256
- </ExampleContainer>
257
- <ExampleContainer>
258
- <Title title="Medium size" theme="light" level={4}/>
259
- <DxcButton label="FitContent" size="fitContent" />
260
- </ExampleContainer>
261
- <Title title="Margins" theme="light" level={2}/>
262
- <ExampleContainer>
263
- <Title title="Xxsmall margin" theme="light" level={4}/>
264
- <DxcButton label="Xxsmall margin" margin="xxsmall" />
265
- </ExampleContainer>
266
- <ExampleContainer>
267
- <Title title="Xsmall margin" theme="light" level={4}/>
268
- <DxcButton label="Xsmall margin" margin="xsmall" />
269
- </ExampleContainer>
270
- <ExampleContainer>
271
- <Title title="Small margin" theme="light" level={4}/>
272
- <DxcButton label="Small margin" margin="small" />
273
- </ExampleContainer>
274
- <ExampleContainer>
275
- <Title title="Medium margin" theme="light" level={4}/>
276
- <DxcButton label="Medium margin" margin="medium" />
277
- </ExampleContainer>
278
- <ExampleContainer>
279
- <Title title="Large margin" theme="light" level={4}/>
280
- <DxcButton label="Large margin" margin="large" />
281
- </ExampleContainer>
282
- <ExampleContainer>
283
- <Title title="Xlarge margin" theme="light" level={4}/>
284
- <DxcButton label="Xlarge margin" margin="xlarge" />
285
- </ExampleContainer>
286
- <ExampleContainer>
287
- <Title title="Xxlarge margin" theme="light" level={4}/>
288
- <DxcButton label="Xxlarge margin" margin="xxlarge" />
289
- </ExampleContainer>
290
- </>
183
+ <Title title="Sizes" theme="light" level={2} />
184
+ <ExampleContainer>
185
+ <Title title="Small size" theme="light" level={4} />
186
+ <DxcButton label="Small" size="small" />
187
+ </ExampleContainer>
188
+ <ExampleContainer>
189
+ <Title title="Medium size" theme="light" level={4} />
190
+ <DxcButton label="MediumSiz" size="medium" />
191
+ </ExampleContainer>
192
+ <ExampleContainer>
193
+ <Title title="Medium size with ellipsis" theme="light" level={4} />
194
+ <DxcButton label="MediumSize" size="medium" />
195
+ </ExampleContainer>
196
+ <ExampleContainer>
197
+ <Title title="Medium size icon after" theme="light" level={4} />
198
+ <DxcButton label="Mediu" iconPosition="after" icon={iconSVG} size="medium" />
199
+ </ExampleContainer>
200
+ <ExampleContainer>
201
+ <Title title="Medium size icon before" theme="light" level={4} />
202
+ <DxcButton label="Mediu" iconPosition="before" icon={iconSVG} size="medium" />
203
+ </ExampleContainer>
204
+ <ExampleContainer>
205
+ <Title title="Medium size icon after with ellipsis" theme="light" level={4} />
206
+ <DxcButton label="Medium" iconPosition="after" icon={iconSVG} size="medium" />
207
+ </ExampleContainer>
208
+ <ExampleContainer>
209
+ <Title title="Medium size icon before with ellipsis" theme="light" level={4} />
210
+ <DxcButton label="Medium" iconPosition="before" icon={iconSVG} size="medium" />
211
+ </ExampleContainer>
212
+ <ExampleContainer>
213
+ <Title title="Large size" theme="light" level={4} />
214
+ <DxcButton label="LargeSizePrimaryButtonEx" size="large" />
215
+ </ExampleContainer>
216
+ <ExampleContainer>
217
+ <Title title="Large size with ellipsis" theme="light" level={4} />
218
+ <DxcButton label="LargeSizePrimaryButtonExa" size="large" />
219
+ </ExampleContainer>
220
+ <ExampleContainer>
221
+ <Title title="Large size icon after" theme="light" level={4} />
222
+ <DxcButton label="LargeSizePrimaryButto" iconPosition="after" icon={iconSVG} size="large" />
223
+ </ExampleContainer>
224
+ <ExampleContainer>
225
+ <Title title="Large size icon before" theme="light" level={4} />
226
+ <DxcButton label="LargeSizePrimaryButto" iconPosition="before" icon={iconSVG} size="large" />
227
+ </ExampleContainer>
228
+ <ExampleContainer>
229
+ <Title title="Large size icon after with ellipsis" theme="light" level={4} />
230
+ <DxcButton label="LargeSizePrimaryButton" iconPosition="after" icon={iconSVG} size="large" />
231
+ </ExampleContainer>
232
+ <ExampleContainer>
233
+ <Title title="Large size icon before with ellipsis" theme="light" level={4} />
234
+ <DxcButton label="LargeSizePrimaryButton" iconPosition="before" icon={iconSVG} size="large" />
235
+ </ExampleContainer>
236
+ <ExampleContainer>
237
+ <Title title="FillParent size" theme="light" level={4} />
238
+ <DxcButton label="FillParent" size="fillParent" />
239
+ </ExampleContainer>
240
+ <ExampleContainer>
241
+ <Title title="FitContent size" theme="light" level={4} />
242
+ <DxcButton label="FitContent" size="fitContent" />
243
+ </ExampleContainer>
244
+ <Title title="Margins" theme="light" level={2} />
245
+ <ExampleContainer>
246
+ <Title title="Xxsmall margin" theme="light" level={4} />
247
+ <DxcButton label="Xxsmall margin" margin="xxsmall" />
248
+ </ExampleContainer>
249
+ <ExampleContainer>
250
+ <Title title="Xsmall margin" theme="light" level={4} />
251
+ <DxcButton label="Xsmall margin" margin="xsmall" />
252
+ </ExampleContainer>
253
+ <ExampleContainer>
254
+ <Title title="Small margin" theme="light" level={4} />
255
+ <DxcButton label="Small margin" margin="small" />
256
+ </ExampleContainer>
257
+ <ExampleContainer>
258
+ <Title title="Medium margin" theme="light" level={4} />
259
+ <DxcButton label="Medium margin" margin="medium" />
260
+ </ExampleContainer>
261
+ <ExampleContainer>
262
+ <Title title="Large margin" theme="light" level={4} />
263
+ <DxcButton label="Large margin" margin="large" />
264
+ </ExampleContainer>
265
+ <ExampleContainer>
266
+ <Title title="Xlarge margin" theme="light" level={4} />
267
+ <DxcButton label="Xlarge margin" margin="xlarge" />
268
+ </ExampleContainer>
269
+ <ExampleContainer>
270
+ <Title title="Xxlarge margin" theme="light" level={4} />
271
+ <DxcButton label="Xxlarge margin" margin="xxlarge" />
272
+ </ExampleContainer>
291
273
  </>
292
274
  );
293
-
package/button/types.d.ts CHANGED
@@ -6,7 +6,7 @@ declare type Margin = {
6
6
  left?: Space;
7
7
  right?: Space;
8
8
  };
9
- declare type SVG = React.SVGProps<SVGSVGElement> | React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
9
+ declare type SVG = React.SVGProps<SVGSVGElement>;
10
10
  declare type Props = {
11
11
  /**
12
12
  * Text to be placed next to the button.
@@ -29,17 +29,13 @@ declare type Props = {
29
29
  */
30
30
  type?: "button" | "reset" | "submit";
31
31
  /**
32
- * Element used as the icon that will be placed next to the button label.
32
+ * Element or path used as the icon that will be placed next to the button label.
33
33
  */
34
- icon?: SVG;
34
+ icon?: string | SVG;
35
35
  /**
36
- * @deprecated URL of the icon that will be placed next to the button label.
36
+ * This function will be called when the user clicks the button.
37
37
  */
38
- iconSrc?: string;
39
- /**
40
- * This function will be called when the user clicks the button. The event object will be passed as a parameter.
41
- */
42
- onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
38
+ onClick?: () => void;
43
39
  /**
44
40
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
45
41
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
package/card/Card.js CHANGED
@@ -21,7 +21,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
21
21
 
22
22
  var _variables = require("../common/variables.js");
23
23
 
24
- var _useTheme = _interopRequireDefault(require("../useTheme.js"));
24
+ var _useTheme = _interopRequireDefault(require("../useTheme"));
25
25
 
26
26
  var _Box = _interopRequireDefault(require("../box/Box"));
27
27
 
@@ -47,7 +47,7 @@ var DxcCard = function DxcCard(_ref) {
47
47
  _ref$tabIndex = _ref.tabIndex,
48
48
  tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
49
49
  _ref$outlined = _ref.outlined,
50
- outlined = _ref$outlined === void 0 ? false : _ref$outlined,
50
+ outlined = _ref$outlined === void 0 ? true : _ref$outlined,
51
51
  children = _ref.children;
52
52
  var colorsTheme = (0, _useTheme["default"])();
53
53
 
@@ -57,12 +57,11 @@ var DxcCard = function DxcCard(_ref) {
57
57
  changeIsHovered = _useState2[1];
58
58
 
59
59
  var tagContent = /*#__PURE__*/_react["default"].createElement(_Box["default"], {
60
- shadowDepth: outlined ? 0 : isHovered && (onClick || linkHref) ? 2 : 1
60
+ shadowDepth: !outlined ? 0 : isHovered && (onClick || linkHref) ? 2 : 1
61
61
  }, /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
62
62
  theme: colorsTheme.card
63
63
  }, /*#__PURE__*/_react["default"].createElement(CardContainer, {
64
64
  hasAction: onClick || linkHref,
65
- outlined: outlined,
66
65
  imagePosition: imagePosition
67
66
  }, imageSrc && /*#__PURE__*/_react["default"].createElement(ImageContainer, {
68
67
  imageBgColor: imageBgColor
@@ -91,7 +90,7 @@ var DxcCard = function DxcCard(_ref) {
91
90
  }, tagContent) || tagContent);
92
91
  };
93
92
 
94
- var StyledDxcCard = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n cursor: ", ";\n outline: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"])), function (_ref2) {
93
+ var StyledDxcCard = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n cursor: ", ";\n outline: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n\n :focus {\n outline: #0095ff auto 1px;\n }\n"])), function (_ref2) {
95
94
  var hasAction = _ref2.hasAction;
96
95
  return hasAction && "pointer" || "unset";
97
96
  }, function (_ref3) {
@@ -126,7 +125,7 @@ var CardContainer = _styledComponents["default"].div(_templateObject2 || (_templ
126
125
  return hasAction ? "" : "unset";
127
126
  });
128
127
 
129
- var StyledLink = _styledComponents["default"].a(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n cursor: pointer;\n text-decoration: none;\n"])));
128
+ var StyledLink = _styledComponents["default"].a(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n cursor: pointer;\n text-decoration: none;\n\n :focus {\n outline-color: #0095ff;\n }\n"])));
130
129
 
131
130
  var TagImage = _styledComponents["default"].img(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n height: ", ";\n width: ", ";\n object-fit: ", ";\n"])), function (_ref11) {
132
131
  var imagePadding = _ref11.imagePadding;