@dxc-technology/halstack-react 0.0.0-6a36022 → 0.0.0-6b2dd6f
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/bleed/Bleed.d.ts +3 -0
- package/bleed/Bleed.js +84 -0
- package/bleed/Bleed.stories.tsx +342 -0
- package/bleed/types.d.ts +13 -0
- package/bleed/types.js +5 -0
- package/button/Button.d.ts +1 -1
- package/button/Button.js +7 -15
- package/button/Button.stories.tsx +6 -8
- package/button/types.d.ts +3 -7
- package/list/List.d.ts +3 -7
- package/list/types.d.ts +7 -0
- package/list/types.js +5 -0
- package/package.json +1 -1
- package/progress-bar/ProgressBar.js +2 -2
- package/radio-group/Radio.js +31 -21
- package/radio-group/RadioGroup.js +8 -3
- package/radio-group/RadioGroup.stories.tsx +1 -1
- package/radio-group/RadioGroup.test.js +248 -0
- package/radio-group/types.d.ts +1 -1
- package/resultsetTable/ResultsetTable.stories.tsx +6 -8
- package/row/Row.d.ts +3 -11
- package/row/Row.stories.tsx +5 -7
- package/row/types.d.ts +10 -0
- package/row/types.js +5 -0
- package/stack/Stack.d.ts +3 -10
- package/stack/Stack.stories.tsx +4 -6
- package/stack/types.d.ts +9 -0
- package/stack/types.js +5 -0
- package/tabs/Tabs.js +7 -7
- package/tabs/Tabs.stories.tsx +6 -8
- package/tabs/types.d.ts +23 -15
package/bleed/Bleed.d.ts
ADDED
package/bleed/Bleed.js
ADDED
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports["default"] = Bleed;
|
|
9
|
+
|
|
10
|
+
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
11
|
+
|
|
12
|
+
var _react = _interopRequireDefault(require("react"));
|
|
13
|
+
|
|
14
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
15
|
+
|
|
16
|
+
var _templateObject;
|
|
17
|
+
|
|
18
|
+
function Bleed(_ref) {
|
|
19
|
+
var space = _ref.space,
|
|
20
|
+
horizontal = _ref.horizontal,
|
|
21
|
+
vertical = _ref.vertical,
|
|
22
|
+
top = _ref.top,
|
|
23
|
+
right = _ref.right,
|
|
24
|
+
bottom = _ref.bottom,
|
|
25
|
+
left = _ref.left,
|
|
26
|
+
children = _ref.children;
|
|
27
|
+
return /*#__PURE__*/_react["default"].createElement(StyledBleed, {
|
|
28
|
+
space: space,
|
|
29
|
+
horizontal: horizontal,
|
|
30
|
+
vertical: vertical,
|
|
31
|
+
top: top,
|
|
32
|
+
right: right,
|
|
33
|
+
bottom: bottom,
|
|
34
|
+
left: left
|
|
35
|
+
}, children);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
function getSpacingValue(spacingName) {
|
|
39
|
+
switch (spacingName) {
|
|
40
|
+
case "none":
|
|
41
|
+
return "0rem";
|
|
42
|
+
|
|
43
|
+
case "xxxsmall":
|
|
44
|
+
return "0.125rem";
|
|
45
|
+
|
|
46
|
+
case "xxsmall":
|
|
47
|
+
return "0.25rem";
|
|
48
|
+
|
|
49
|
+
case "xsmall":
|
|
50
|
+
return "0.5rem";
|
|
51
|
+
|
|
52
|
+
case "small":
|
|
53
|
+
return "1rem";
|
|
54
|
+
|
|
55
|
+
case "medium":
|
|
56
|
+
return "1.5rem";
|
|
57
|
+
|
|
58
|
+
case "large":
|
|
59
|
+
return "2rem";
|
|
60
|
+
|
|
61
|
+
case "xlarge":
|
|
62
|
+
return "3rem";
|
|
63
|
+
|
|
64
|
+
case "xxlarge":
|
|
65
|
+
return "4rem";
|
|
66
|
+
|
|
67
|
+
case "xxxlarge":
|
|
68
|
+
return "5rem";
|
|
69
|
+
|
|
70
|
+
default:
|
|
71
|
+
return "0rem";
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
var StyledBleed = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n ", "\n"])), function (_ref2) {
|
|
76
|
+
var space = _ref2.space,
|
|
77
|
+
horizontal = _ref2.horizontal,
|
|
78
|
+
vertical = _ref2.vertical,
|
|
79
|
+
top = _ref2.top,
|
|
80
|
+
right = _ref2.right,
|
|
81
|
+
bottom = _ref2.bottom,
|
|
82
|
+
left = _ref2.left;
|
|
83
|
+
return "\n margin: -".concat(getSpacingValue(top || vertical || space), " -").concat(getSpacingValue(right || horizontal || space), " -").concat(getSpacingValue(bottom || vertical || space), " -").concat(getSpacingValue(left || horizontal || space), ";\n");
|
|
84
|
+
});
|
|
@@ -0,0 +1,342 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import styled from "styled-components";
|
|
3
|
+
import Title from "../../.storybook/components/Title";
|
|
4
|
+
import DxcBleed from "./Bleed";
|
|
5
|
+
import DxcStack from "../stack/Stack";
|
|
6
|
+
|
|
7
|
+
export default {
|
|
8
|
+
title: "Bleed",
|
|
9
|
+
component: DxcBleed,
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
export const Chromatic = () => (
|
|
13
|
+
<>
|
|
14
|
+
<Title title="Space = none" theme="light" level={4} />
|
|
15
|
+
<Container>
|
|
16
|
+
<DxcStack gutter="medium">
|
|
17
|
+
<Placeholder></Placeholder>
|
|
18
|
+
<DxcBleed space="none">
|
|
19
|
+
<Placeholder></Placeholder>
|
|
20
|
+
</DxcBleed>
|
|
21
|
+
<Placeholder></Placeholder>
|
|
22
|
+
</DxcStack>
|
|
23
|
+
</Container>
|
|
24
|
+
<Title title="Space = xxxsmall" theme="light" level={4} />
|
|
25
|
+
<Container>
|
|
26
|
+
<DxcStack gutter="medium">
|
|
27
|
+
<Placeholder></Placeholder>
|
|
28
|
+
<DxcBleed space="xxxsmall">
|
|
29
|
+
<Placeholder></Placeholder>
|
|
30
|
+
</DxcBleed>
|
|
31
|
+
<Placeholder></Placeholder>
|
|
32
|
+
</DxcStack>
|
|
33
|
+
</Container>
|
|
34
|
+
<Title title="Space = xxsmall" theme="light" level={4} />
|
|
35
|
+
<Container>
|
|
36
|
+
<DxcStack gutter="medium">
|
|
37
|
+
<Placeholder></Placeholder>
|
|
38
|
+
<DxcBleed space="xxsmall">
|
|
39
|
+
<Placeholder></Placeholder>
|
|
40
|
+
</DxcBleed>
|
|
41
|
+
<Placeholder></Placeholder>
|
|
42
|
+
</DxcStack>
|
|
43
|
+
</Container>
|
|
44
|
+
<Title title="Space = xsmall" theme="light" level={4} />
|
|
45
|
+
<Container>
|
|
46
|
+
<DxcStack gutter="medium">
|
|
47
|
+
<Placeholder></Placeholder>
|
|
48
|
+
<DxcBleed space="xsmall">
|
|
49
|
+
<Placeholder></Placeholder>
|
|
50
|
+
</DxcBleed>
|
|
51
|
+
<Placeholder></Placeholder>
|
|
52
|
+
</DxcStack>
|
|
53
|
+
</Container>
|
|
54
|
+
<Title title="Space = small" theme="light" level={4} />
|
|
55
|
+
<Container>
|
|
56
|
+
<DxcStack gutter="medium">
|
|
57
|
+
<Placeholder></Placeholder>
|
|
58
|
+
<DxcBleed space="small">
|
|
59
|
+
<Placeholder></Placeholder>
|
|
60
|
+
</DxcBleed>
|
|
61
|
+
<Placeholder></Placeholder>
|
|
62
|
+
</DxcStack>
|
|
63
|
+
</Container>
|
|
64
|
+
<Title title="Space = medium" theme="light" level={4} />
|
|
65
|
+
<Container>
|
|
66
|
+
<DxcStack gutter="medium">
|
|
67
|
+
<Placeholder></Placeholder>
|
|
68
|
+
<DxcBleed space="medium">
|
|
69
|
+
<Placeholder></Placeholder>
|
|
70
|
+
</DxcBleed>
|
|
71
|
+
<Placeholder></Placeholder>
|
|
72
|
+
</DxcStack>
|
|
73
|
+
</Container>
|
|
74
|
+
<Title title="Space = large" theme="light" level={4} />
|
|
75
|
+
<Container>
|
|
76
|
+
<DxcStack gutter="medium">
|
|
77
|
+
<Placeholder></Placeholder>
|
|
78
|
+
<DxcBleed space="large">
|
|
79
|
+
<Placeholder></Placeholder>
|
|
80
|
+
</DxcBleed>
|
|
81
|
+
<Placeholder></Placeholder>
|
|
82
|
+
</DxcStack>
|
|
83
|
+
</Container>
|
|
84
|
+
<Title title="Space = xlarge" theme="light" level={4} />
|
|
85
|
+
<Container>
|
|
86
|
+
<DxcStack gutter="medium">
|
|
87
|
+
<Placeholder></Placeholder>
|
|
88
|
+
<DxcBleed space="xlarge">
|
|
89
|
+
<Placeholder></Placeholder>
|
|
90
|
+
</DxcBleed>
|
|
91
|
+
<Placeholder></Placeholder>
|
|
92
|
+
</DxcStack>
|
|
93
|
+
</Container>
|
|
94
|
+
<Title title="Space = xxlarge" theme="light" level={4} />
|
|
95
|
+
<Container>
|
|
96
|
+
<DxcStack gutter="medium">
|
|
97
|
+
<Placeholder></Placeholder>
|
|
98
|
+
<DxcBleed space="xxlarge">
|
|
99
|
+
<Placeholder></Placeholder>
|
|
100
|
+
</DxcBleed>
|
|
101
|
+
<Placeholder></Placeholder>
|
|
102
|
+
</DxcStack>
|
|
103
|
+
</Container>
|
|
104
|
+
<Title title="Space = xxxlarge" theme="light" level={4} />
|
|
105
|
+
<Container>
|
|
106
|
+
<DxcStack gutter="medium">
|
|
107
|
+
<Placeholder></Placeholder>
|
|
108
|
+
<DxcBleed space="xxxlarge">
|
|
109
|
+
<Placeholder></Placeholder>
|
|
110
|
+
</DxcBleed>
|
|
111
|
+
<Placeholder></Placeholder>
|
|
112
|
+
</DxcStack>
|
|
113
|
+
</Container>
|
|
114
|
+
|
|
115
|
+
<Title title="Horizontal = none" theme="light" level={4} />
|
|
116
|
+
<Container>
|
|
117
|
+
<DxcStack gutter="medium">
|
|
118
|
+
<Placeholder></Placeholder>
|
|
119
|
+
<DxcBleed horizontal="none">
|
|
120
|
+
<Placeholder></Placeholder>
|
|
121
|
+
</DxcBleed>
|
|
122
|
+
<Placeholder></Placeholder>
|
|
123
|
+
</DxcStack>
|
|
124
|
+
</Container>
|
|
125
|
+
<Title title="Horizontal = xxxsmall" theme="light" level={4} />
|
|
126
|
+
<Container>
|
|
127
|
+
<DxcStack gutter="medium">
|
|
128
|
+
<Placeholder></Placeholder>
|
|
129
|
+
<DxcBleed horizontal="xxxsmall">
|
|
130
|
+
<Placeholder></Placeholder>
|
|
131
|
+
</DxcBleed>
|
|
132
|
+
<Placeholder></Placeholder>
|
|
133
|
+
</DxcStack>
|
|
134
|
+
</Container>
|
|
135
|
+
<Title title="Horizontal = xxsmall" theme="light" level={4} />
|
|
136
|
+
<Container>
|
|
137
|
+
<DxcStack gutter="medium">
|
|
138
|
+
<Placeholder></Placeholder>
|
|
139
|
+
<DxcBleed horizontal="xxsmall">
|
|
140
|
+
<Placeholder></Placeholder>
|
|
141
|
+
</DxcBleed>
|
|
142
|
+
<Placeholder></Placeholder>
|
|
143
|
+
</DxcStack>
|
|
144
|
+
</Container>
|
|
145
|
+
<Title title="Horizontal = xsmall" theme="light" level={4} />
|
|
146
|
+
<Container>
|
|
147
|
+
<DxcStack gutter="medium">
|
|
148
|
+
<Placeholder></Placeholder>
|
|
149
|
+
<DxcBleed horizontal="xsmall">
|
|
150
|
+
<Placeholder></Placeholder>
|
|
151
|
+
</DxcBleed>
|
|
152
|
+
<Placeholder></Placeholder>
|
|
153
|
+
</DxcStack>
|
|
154
|
+
</Container>
|
|
155
|
+
<Title title="Horizontal = small" theme="light" level={4} />
|
|
156
|
+
<Container>
|
|
157
|
+
<DxcStack gutter="medium">
|
|
158
|
+
<Placeholder></Placeholder>
|
|
159
|
+
<DxcBleed horizontal="small">
|
|
160
|
+
<Placeholder></Placeholder>
|
|
161
|
+
</DxcBleed>
|
|
162
|
+
<Placeholder></Placeholder>
|
|
163
|
+
</DxcStack>
|
|
164
|
+
</Container>
|
|
165
|
+
<Title title="Horizontal = medium" theme="light" level={4} />
|
|
166
|
+
<Container>
|
|
167
|
+
<DxcStack gutter="medium">
|
|
168
|
+
<Placeholder></Placeholder>
|
|
169
|
+
<DxcBleed horizontal="medium">
|
|
170
|
+
<Placeholder></Placeholder>
|
|
171
|
+
</DxcBleed>
|
|
172
|
+
<Placeholder></Placeholder>
|
|
173
|
+
</DxcStack>
|
|
174
|
+
</Container>
|
|
175
|
+
<Title title="Horizontal = large" theme="light" level={4} />
|
|
176
|
+
<Container>
|
|
177
|
+
<DxcStack gutter="medium">
|
|
178
|
+
<Placeholder></Placeholder>
|
|
179
|
+
<DxcBleed horizontal="large">
|
|
180
|
+
<Placeholder></Placeholder>
|
|
181
|
+
</DxcBleed>
|
|
182
|
+
<Placeholder></Placeholder>
|
|
183
|
+
</DxcStack>
|
|
184
|
+
</Container>
|
|
185
|
+
<Title title="Horizontal = xlarge" theme="light" level={4} />
|
|
186
|
+
<Container>
|
|
187
|
+
<DxcStack gutter="medium">
|
|
188
|
+
<Placeholder></Placeholder>
|
|
189
|
+
<DxcBleed horizontal="xlarge">
|
|
190
|
+
<Placeholder></Placeholder>
|
|
191
|
+
</DxcBleed>
|
|
192
|
+
<Placeholder></Placeholder>
|
|
193
|
+
</DxcStack>
|
|
194
|
+
</Container>
|
|
195
|
+
<Title title="Horizontal = xxlarge" theme="light" level={4} />
|
|
196
|
+
<Container>
|
|
197
|
+
<DxcStack gutter="medium">
|
|
198
|
+
<Placeholder></Placeholder>
|
|
199
|
+
<DxcBleed horizontal="xxlarge">
|
|
200
|
+
<Placeholder></Placeholder>
|
|
201
|
+
</DxcBleed>
|
|
202
|
+
<Placeholder></Placeholder>
|
|
203
|
+
</DxcStack>
|
|
204
|
+
</Container>
|
|
205
|
+
<Title title="Horizontal = xxxlarge" theme="light" level={4} />
|
|
206
|
+
<Container>
|
|
207
|
+
<DxcStack gutter="medium">
|
|
208
|
+
<Placeholder></Placeholder>
|
|
209
|
+
<DxcBleed horizontal="xxxlarge">
|
|
210
|
+
<Placeholder></Placeholder>
|
|
211
|
+
</DxcBleed>
|
|
212
|
+
<Placeholder></Placeholder>
|
|
213
|
+
</DxcStack>
|
|
214
|
+
</Container>
|
|
215
|
+
|
|
216
|
+
<Title title="Vertical = none" theme="light" level={4} />
|
|
217
|
+
<Container>
|
|
218
|
+
<DxcStack gutter="medium">
|
|
219
|
+
<Placeholder></Placeholder>
|
|
220
|
+
<DxcBleed vertical="none">
|
|
221
|
+
<Placeholder></Placeholder>
|
|
222
|
+
</DxcBleed>
|
|
223
|
+
<Placeholder></Placeholder>
|
|
224
|
+
</DxcStack>
|
|
225
|
+
</Container>
|
|
226
|
+
<Title title="Vertical = xxxsmall" theme="light" level={4} />
|
|
227
|
+
<Container>
|
|
228
|
+
<DxcStack gutter="medium">
|
|
229
|
+
<Placeholder></Placeholder>
|
|
230
|
+
<DxcBleed vertical="xxxsmall">
|
|
231
|
+
<Placeholder></Placeholder>
|
|
232
|
+
</DxcBleed>
|
|
233
|
+
<Placeholder></Placeholder>
|
|
234
|
+
</DxcStack>
|
|
235
|
+
</Container>
|
|
236
|
+
<Title title="Vertical = xxsmall" theme="light" level={4} />
|
|
237
|
+
<Container>
|
|
238
|
+
<DxcStack gutter="medium">
|
|
239
|
+
<Placeholder></Placeholder>
|
|
240
|
+
<DxcBleed vertical="xxsmall">
|
|
241
|
+
<Placeholder></Placeholder>
|
|
242
|
+
</DxcBleed>
|
|
243
|
+
<Placeholder></Placeholder>
|
|
244
|
+
</DxcStack>
|
|
245
|
+
</Container>
|
|
246
|
+
<Title title="Vertical = xsmall" theme="light" level={4} />
|
|
247
|
+
<Container>
|
|
248
|
+
<DxcStack gutter="medium">
|
|
249
|
+
<Placeholder></Placeholder>
|
|
250
|
+
<DxcBleed vertical="xsmall">
|
|
251
|
+
<Placeholder></Placeholder>
|
|
252
|
+
</DxcBleed>
|
|
253
|
+
<Placeholder></Placeholder>
|
|
254
|
+
</DxcStack>
|
|
255
|
+
</Container>
|
|
256
|
+
<Title title="Vertical = small" theme="light" level={4} />
|
|
257
|
+
<Container>
|
|
258
|
+
<DxcStack gutter="medium">
|
|
259
|
+
<Placeholder></Placeholder>
|
|
260
|
+
<DxcBleed vertical="small">
|
|
261
|
+
<Placeholder></Placeholder>
|
|
262
|
+
</DxcBleed>
|
|
263
|
+
<Placeholder></Placeholder>
|
|
264
|
+
</DxcStack>
|
|
265
|
+
</Container>
|
|
266
|
+
<Title title="Vertical = medium" theme="light" level={4} />
|
|
267
|
+
<Container>
|
|
268
|
+
<DxcStack gutter="medium">
|
|
269
|
+
<Placeholder></Placeholder>
|
|
270
|
+
<DxcBleed vertical="medium">
|
|
271
|
+
<Placeholder></Placeholder>
|
|
272
|
+
</DxcBleed>
|
|
273
|
+
<Placeholder></Placeholder>
|
|
274
|
+
</DxcStack>
|
|
275
|
+
</Container>
|
|
276
|
+
<Title title="Vertical = large" theme="light" level={4} />
|
|
277
|
+
<Container>
|
|
278
|
+
<DxcStack gutter="medium">
|
|
279
|
+
<Placeholder></Placeholder>
|
|
280
|
+
<DxcBleed vertical="large">
|
|
281
|
+
<Placeholder></Placeholder>
|
|
282
|
+
</DxcBleed>
|
|
283
|
+
<Placeholder></Placeholder>
|
|
284
|
+
</DxcStack>
|
|
285
|
+
</Container>
|
|
286
|
+
<Title title="Vertical = xlarge" theme="light" level={4} />
|
|
287
|
+
<Container>
|
|
288
|
+
<DxcStack gutter="medium">
|
|
289
|
+
<Placeholder></Placeholder>
|
|
290
|
+
<DxcBleed vertical="xlarge">
|
|
291
|
+
<Placeholder></Placeholder>
|
|
292
|
+
</DxcBleed>
|
|
293
|
+
<Placeholder></Placeholder>
|
|
294
|
+
</DxcStack>
|
|
295
|
+
</Container>
|
|
296
|
+
<Title title="Vertical = xxlarge" theme="light" level={4} />
|
|
297
|
+
<Container>
|
|
298
|
+
<DxcStack gutter="medium">
|
|
299
|
+
<Placeholder></Placeholder>
|
|
300
|
+
<DxcBleed vertical="xxlarge">
|
|
301
|
+
<Placeholder></Placeholder>
|
|
302
|
+
</DxcBleed>
|
|
303
|
+
<Placeholder></Placeholder>
|
|
304
|
+
</DxcStack>
|
|
305
|
+
</Container>
|
|
306
|
+
<Title title="Vertical = xxxlarge" theme="light" level={4} />
|
|
307
|
+
<Container>
|
|
308
|
+
<DxcStack gutter="medium">
|
|
309
|
+
<Placeholder></Placeholder>
|
|
310
|
+
<DxcBleed vertical="xxxlarge">
|
|
311
|
+
<Placeholder></Placeholder>
|
|
312
|
+
</DxcBleed>
|
|
313
|
+
<Placeholder></Placeholder>
|
|
314
|
+
</DxcStack>
|
|
315
|
+
</Container>
|
|
316
|
+
|
|
317
|
+
<Title title="Top = xsmall, right = small, bottom = medium and left = large" theme="light" level={4} />
|
|
318
|
+
<Container>
|
|
319
|
+
<DxcStack gutter="medium">
|
|
320
|
+
<Placeholder></Placeholder>
|
|
321
|
+
<DxcBleed top="xsmall" right="small" bottom="medium" left="large">
|
|
322
|
+
<Placeholder></Placeholder>
|
|
323
|
+
</DxcBleed>
|
|
324
|
+
<Placeholder></Placeholder>
|
|
325
|
+
</DxcStack>
|
|
326
|
+
</Container>
|
|
327
|
+
</>
|
|
328
|
+
);
|
|
329
|
+
|
|
330
|
+
const Container = styled.div`
|
|
331
|
+
background: #f2eafa;
|
|
332
|
+
padding: 5rem;
|
|
333
|
+
margin: 2.5rem;
|
|
334
|
+
`;
|
|
335
|
+
|
|
336
|
+
const Placeholder = styled.div`
|
|
337
|
+
min-height: 40px;
|
|
338
|
+
min-width: 120px;
|
|
339
|
+
border: 1px solid #a46ede;
|
|
340
|
+
background-color: #e5d5f6;
|
|
341
|
+
`;
|
|
342
|
+
|
package/bleed/types.d.ts
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
declare type Spacing = "none" | "xxxsmall" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge";
|
|
3
|
+
declare type Props = {
|
|
4
|
+
space?: Spacing;
|
|
5
|
+
horizontal?: Spacing;
|
|
6
|
+
vertical?: Spacing;
|
|
7
|
+
top?: Spacing;
|
|
8
|
+
right?: Spacing;
|
|
9
|
+
bottom?: Spacing;
|
|
10
|
+
left?: Spacing;
|
|
11
|
+
children: React.ReactNode;
|
|
12
|
+
};
|
|
13
|
+
export default Props;
|
package/bleed/types.js
ADDED
package/button/Button.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import ButtonPropsType from "./types";
|
|
3
|
-
declare const DxcButton: ({ label, mode, disabled, iconPosition, type, icon,
|
|
3
|
+
declare const DxcButton: ({ label, mode, disabled, iconPosition, type, icon, onClick, margin, size, tabIndex, }: ButtonPropsType) => JSX.Element;
|
|
4
4
|
export default DxcButton;
|
package/button/Button.js
CHANGED
|
@@ -9,10 +9,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
9
9
|
});
|
|
10
10
|
exports["default"] = void 0;
|
|
11
11
|
|
|
12
|
-
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
13
|
-
|
|
14
12
|
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
15
13
|
|
|
14
|
+
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
15
|
+
|
|
16
16
|
var _react = _interopRequireWildcard(require("react"));
|
|
17
17
|
|
|
18
18
|
var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
|
|
@@ -45,8 +45,6 @@ var DxcButton = function DxcButton(_ref) {
|
|
|
45
45
|
_ref$type = _ref.type,
|
|
46
46
|
type = _ref$type === void 0 ? "button" : _ref$type,
|
|
47
47
|
icon = _ref.icon,
|
|
48
|
-
_ref$iconSrc = _ref.iconSrc,
|
|
49
|
-
iconSrc = _ref$iconSrc === void 0 ? "" : _ref$iconSrc,
|
|
50
48
|
_onClick = _ref.onClick,
|
|
51
49
|
margin = _ref.margin,
|
|
52
50
|
_ref$size = _ref.size,
|
|
@@ -78,14 +76,12 @@ var DxcButton = function DxcButton(_ref) {
|
|
|
78
76
|
}, label && /*#__PURE__*/_react["default"].createElement(LabelContainer, {
|
|
79
77
|
icon: icon,
|
|
80
78
|
iconPosition: iconPosition
|
|
81
|
-
}, label), icon
|
|
79
|
+
}, label), icon && /*#__PURE__*/_react["default"].createElement(IconContainer, {
|
|
82
80
|
label: label,
|
|
83
81
|
iconPosition: iconPosition
|
|
84
|
-
},
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
src: iconSrc
|
|
88
|
-
}))));
|
|
82
|
+
}, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(ButtonIcon, {
|
|
83
|
+
src: icon
|
|
84
|
+
}) : icon))));
|
|
89
85
|
};
|
|
90
86
|
|
|
91
87
|
var sizes = {
|
|
@@ -120,11 +116,7 @@ var IconContainer = _styledComponents["default"].div(_templateObject2 || (_templ
|
|
|
120
116
|
return !props.label ? "0px" : props.iconPosition === "before" && props.label !== "" && "8px" || "8px";
|
|
121
117
|
});
|
|
122
118
|
|
|
123
|
-
var ButtonIcon = _styledComponents["default"].img(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["
|
|
124
|
-
return props.iconPosition === "after" && props.label !== "" && "10px" || "0px";
|
|
125
|
-
}, function (props) {
|
|
126
|
-
return props.iconPosition === "before" && props.label !== "" && "10px" || "0px";
|
|
127
|
-
});
|
|
119
|
+
var ButtonIcon = _styledComponents["default"].img(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])([""])));
|
|
128
120
|
|
|
129
121
|
var DxCButton = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n\n display: inline-block;\n width: ", ";\n cursor: ", ";\n\n .MuiButtonBase-root {\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n\n .MuiButton-label {\n display: flex;\n flex-direction: ", ";\n align-items: center;\n }\n\n box-shadow: 0 0 0 2px transparent;\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n min-width: ", ";\n width: 100%;\n height: 40px;\n transition: none !important;\n\n &:focus {\n border-color: transparent;\n box-shadow: 0 0 0 2px\n ", ";\n }\n\n ", "\n }\n"])), function (props) {
|
|
130
122
|
return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
|
|
@@ -10,14 +10,12 @@ export default {
|
|
|
10
10
|
component: DxcButton,
|
|
11
11
|
};
|
|
12
12
|
|
|
13
|
-
const iconSVG = (
|
|
14
|
-
|
|
15
|
-
<
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
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
21
|
<Title title="Primary" theme="light" level={2} />
|
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
|
|
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,13 +29,9 @@ 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;
|
|
35
|
-
/**
|
|
36
|
-
* @deprecated URL of the icon that will be placed next to the button label.
|
|
37
|
-
*/
|
|
38
|
-
iconSrc?: string;
|
|
34
|
+
icon?: string | SVG;
|
|
39
35
|
/**
|
|
40
36
|
* This function will be called when the user clicks the button.
|
|
41
37
|
*/
|
package/list/List.d.ts
CHANGED
|
@@ -1,8 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
gutter?: "none" | "xxxsmall" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge";
|
|
5
|
-
type?: "disc" | "circle" | "square" | "number";
|
|
6
|
-
};
|
|
7
|
-
declare function List({ children, type, gutter }: ListProps): JSX.Element;
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import ListPropsType from "./types";
|
|
3
|
+
declare function List({ children, type, gutter }: ListPropsType): JSX.Element;
|
|
8
4
|
export default List;
|
package/list/types.d.ts
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
declare type Props = {
|
|
3
|
+
children: React.ReactNode;
|
|
4
|
+
gutter?: "none" | "xxxsmall" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge";
|
|
5
|
+
type?: "disc" | "circle" | "square" | "number";
|
|
6
|
+
};
|
|
7
|
+
export default Props;
|
package/list/types.js
ADDED
package/package.json
CHANGED
|
@@ -59,9 +59,9 @@ var DxcProgressBar = function DxcProgressBar(_ref) {
|
|
|
59
59
|
overlay: overlay,
|
|
60
60
|
showValue: showValue,
|
|
61
61
|
backgroundType: backgroundType
|
|
62
|
-
}, value === null ? 0 : value >= 0 && value <= 100 ? value : value < 0 ? 0 : 100, " %")), /*#__PURE__*/_react["default"].createElement(_LinearProgress["default"], {
|
|
62
|
+
}, value === null || value === undefined ? 0 : value >= 0 && value <= 100 ? value : value < 0 ? 0 : 100, " %")), /*#__PURE__*/_react["default"].createElement(_LinearProgress["default"], {
|
|
63
63
|
variant: showValue ? "determinate" : "indeterminate",
|
|
64
|
-
value: value === null ? 0 : value >= 0 && value <= 100 ? value : value < 0 ? 0 : 100
|
|
64
|
+
value: value === null || value === undefined ? 0 : value >= 0 && value <= 100 ? value : value < 0 ? 0 : 100
|
|
65
65
|
}), helperText && /*#__PURE__*/_react["default"].createElement(HelperText, {
|
|
66
66
|
overlay: overlay,
|
|
67
67
|
backgroundType: backgroundType
|