@dxc-technology/halstack-react 0.0.0-8d998c7 → 0.0.0-90ad27e
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/accordion/types.d.ts +1 -1
- package/accordion-group/types.d.ts +1 -1
- package/button/Button.d.ts +1 -1
- package/button/Button.js +7 -12
- package/button/Button.stories.tsx +1 -1
- package/button/types.d.ts +10 -10
- package/checkbox/Checkbox.stories.tsx +192 -0
- package/dialog/Dialog.d.ts +4 -0
- package/dialog/Dialog.js +4 -23
- package/dialog/types.d.ts +43 -0
- package/dialog/types.js +5 -0
- package/footer/Footer.stories.jsx +151 -0
- package/header/Header.d.ts +7 -0
- package/header/Header.js +26 -28
- package/header/Icons.js +2 -27
- package/header/types.d.ts +45 -0
- package/header/types.js +5 -0
- package/link/Link.d.ts +3 -0
- package/link/Link.js +1 -23
- package/link/types.d.ts +74 -0
- package/link/types.js +5 -0
- package/number-input/NumberInput.stories.jsx +115 -0
- package/package.json +1 -1
- package/paginator/Paginator.stories.tsx +63 -0
- package/password-input/PasswordInput.stories.jsx +1 -1
- package/progress-bar/ProgressBar.js +1 -1
- package/radio/Radio.stories.tsx +192 -0
- package/select/index.d.ts +2 -2
- package/spinner/Spinner.d.ts +4 -0
- package/spinner/Spinner.js +6 -23
- package/spinner/Spinner.stories.jsx +102 -0
- package/spinner/types.d.ts +32 -0
- package/spinner/types.js +5 -0
- package/table/Table.d.ts +4 -0
- package/table/Table.stories.jsx +276 -0
- package/table/types.d.ts +21 -0
- package/table/types.js +5 -0
- package/tag/Tag.js +17 -11
- package/tag/Tag.stories.jsx +145 -0
- package/text-input/index.d.ts +2 -2
- package/dialog/index.d.ts +0 -18
- package/header/index.d.ts +0 -25
- package/link/index.d.ts +0 -23
- package/spinner/index.d.ts +0 -17
- package/table/index.d.ts +0 -13
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import DxcRadio from "./Radio";
|
|
3
|
+
import { BackgroundColorProvider } from "../BackgroundColorContext";
|
|
4
|
+
import Title from "../../.storybook/components/Title";
|
|
5
|
+
import ExampleContainer from "../../.storybook/components/ExampleContainer";
|
|
6
|
+
import DarkContainer from "../../.storybook/components/DarkSection";
|
|
7
|
+
import { userEvent, within } from "@storybook/testing-library";
|
|
8
|
+
|
|
9
|
+
export default {
|
|
10
|
+
title: "Radio",
|
|
11
|
+
component: DxcRadio,
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
const Radio = () => (
|
|
15
|
+
<>
|
|
16
|
+
<>
|
|
17
|
+
<ExampleContainer>
|
|
18
|
+
<Title title="Default" theme="light" level={4} />
|
|
19
|
+
<DxcRadio label="Radio" />
|
|
20
|
+
</ExampleContainer>
|
|
21
|
+
<ExampleContainer>
|
|
22
|
+
<Title title="Focused" theme="light" level={4} />
|
|
23
|
+
<DxcRadio label="Focused" />
|
|
24
|
+
</ExampleContainer>
|
|
25
|
+
<ExampleContainer>
|
|
26
|
+
<Title title="Checked" theme="light" level={4} />
|
|
27
|
+
<DxcRadio label="Radio" checked />
|
|
28
|
+
</ExampleContainer>
|
|
29
|
+
<ExampleContainer>
|
|
30
|
+
<Title title="Required" theme="light" level={4} />
|
|
31
|
+
<DxcRadio label="Radio" required />
|
|
32
|
+
</ExampleContainer>
|
|
33
|
+
<ExampleContainer>
|
|
34
|
+
<Title title="Disabled and checked" theme="light" level={4} />
|
|
35
|
+
<DxcRadio label="Radio" disabled checked />
|
|
36
|
+
</ExampleContainer>
|
|
37
|
+
<ExampleContainer>
|
|
38
|
+
<Title title="Disabled and required" theme="light" level={4} />
|
|
39
|
+
<DxcRadio label="Radio" disabled required />
|
|
40
|
+
</ExampleContainer>
|
|
41
|
+
<ExampleContainer>
|
|
42
|
+
<Title title="Disabled, required and checked" theme="light" level={4} />
|
|
43
|
+
<DxcRadio label="Radio" disabled required checked />
|
|
44
|
+
</ExampleContainer>
|
|
45
|
+
<ExampleContainer>
|
|
46
|
+
<Title title="Label after" theme="light" level={4} />
|
|
47
|
+
<DxcRadio label="Radio" labelPosition="after" />
|
|
48
|
+
</ExampleContainer>
|
|
49
|
+
<ExampleContainer>
|
|
50
|
+
<Title title="Checked with label after" theme="light" level={4} />
|
|
51
|
+
<DxcRadio label="Radio" checked labelPosition="after" />
|
|
52
|
+
</ExampleContainer>
|
|
53
|
+
<ExampleContainer>
|
|
54
|
+
<Title title="Required with label after" theme="light" level={4} />
|
|
55
|
+
<DxcRadio label="Radio" required labelPosition="after" />
|
|
56
|
+
</ExampleContainer>
|
|
57
|
+
<ExampleContainer>
|
|
58
|
+
<Title title="Disabled and checked with label after" theme="light" level={4} />
|
|
59
|
+
<DxcRadio label="Radio" disabled checked labelPosition="after" />
|
|
60
|
+
</ExampleContainer>
|
|
61
|
+
<ExampleContainer>
|
|
62
|
+
<Title title="Disabled and required with label after" theme="light" level={4} />
|
|
63
|
+
<DxcRadio label="Radio" disabled required labelPosition="after" />
|
|
64
|
+
</ExampleContainer>
|
|
65
|
+
<ExampleContainer>
|
|
66
|
+
<Title title="Disabled, required and checked with label after" theme="light" level={4} />
|
|
67
|
+
<DxcRadio label="Radio" disabled required checked labelPosition="after" />
|
|
68
|
+
</ExampleContainer>
|
|
69
|
+
<ExampleContainer pseudoState="pseudo-hover">
|
|
70
|
+
<Title title="Hovered" theme="light" level={4} />
|
|
71
|
+
<DxcRadio label="Hovered" />
|
|
72
|
+
</ExampleContainer>
|
|
73
|
+
<ExampleContainer pseudoState="pseudo-hover">
|
|
74
|
+
<Title title="Hovered and checked" theme="light" level={4} />
|
|
75
|
+
<DxcRadio label="Hovered" checked />
|
|
76
|
+
</ExampleContainer>
|
|
77
|
+
</>
|
|
78
|
+
<BackgroundColorProvider color="#333333">
|
|
79
|
+
<DarkContainer>
|
|
80
|
+
<>
|
|
81
|
+
<ExampleContainer>
|
|
82
|
+
<Title title="Default" theme="dark" level={4} />
|
|
83
|
+
<DxcRadio label="Radio" />
|
|
84
|
+
</ExampleContainer>
|
|
85
|
+
<ExampleContainer>
|
|
86
|
+
<Title title="Checked" theme="dark" level={4} />
|
|
87
|
+
<DxcRadio label="Radio" checked />
|
|
88
|
+
</ExampleContainer>
|
|
89
|
+
<ExampleContainer>
|
|
90
|
+
<Title title="Required" theme="dark" level={4} />
|
|
91
|
+
<DxcRadio label="Radio" required />
|
|
92
|
+
</ExampleContainer>
|
|
93
|
+
<ExampleContainer>
|
|
94
|
+
<Title title="Disabled and checked" theme="dark" level={4} />
|
|
95
|
+
<DxcRadio label="Radio" disabled checked />
|
|
96
|
+
</ExampleContainer>
|
|
97
|
+
<ExampleContainer>
|
|
98
|
+
<Title title="Disabled and required" theme="dark" level={4} />
|
|
99
|
+
<DxcRadio label="Radio" disabled required />
|
|
100
|
+
</ExampleContainer>
|
|
101
|
+
<ExampleContainer>
|
|
102
|
+
<Title title="Disabled, required and checked" theme="dark" level={4} />
|
|
103
|
+
<DxcRadio label="Radio" disabled required checked />
|
|
104
|
+
</ExampleContainer>
|
|
105
|
+
<ExampleContainer>
|
|
106
|
+
<Title title="Label after" theme="dark" level={4} />
|
|
107
|
+
<DxcRadio label="Radio" labelPosition="after" />
|
|
108
|
+
</ExampleContainer>
|
|
109
|
+
<ExampleContainer>
|
|
110
|
+
<Title title="Checked with label after" theme="dark" level={4} />
|
|
111
|
+
<DxcRadio label="Radio" checked labelPosition="after" />
|
|
112
|
+
</ExampleContainer>
|
|
113
|
+
<ExampleContainer>
|
|
114
|
+
<Title title="Required with label after" theme="dark" level={4} />
|
|
115
|
+
<DxcRadio label="Radio" required labelPosition="after" />
|
|
116
|
+
</ExampleContainer>
|
|
117
|
+
<ExampleContainer>
|
|
118
|
+
<Title title="Disabled and checked with label after" theme="dark" level={4} />
|
|
119
|
+
<DxcRadio label="Radio" disabled checked labelPosition="after" />
|
|
120
|
+
</ExampleContainer>
|
|
121
|
+
<ExampleContainer>
|
|
122
|
+
<Title title="Disabled and required with label after" theme="dark" level={4} />
|
|
123
|
+
<DxcRadio label="Radio" disabled required labelPosition="after" />
|
|
124
|
+
</ExampleContainer>
|
|
125
|
+
<ExampleContainer>
|
|
126
|
+
<Title title="Disabled, required and checked with label after" theme="dark" level={4} />
|
|
127
|
+
<DxcRadio label="Radio" disabled required checked labelPosition="after" />
|
|
128
|
+
</ExampleContainer>
|
|
129
|
+
<ExampleContainer pseudoState="pseudo-hover">
|
|
130
|
+
<Title title="Hovered" theme="dark" level={4} />
|
|
131
|
+
<DxcRadio label="Hovered" />
|
|
132
|
+
</ExampleContainer>
|
|
133
|
+
<ExampleContainer pseudoState="pseudo-hover">
|
|
134
|
+
<Title title="Hovered and checked" theme="dark" level={4} />
|
|
135
|
+
<DxcRadio label="Hovered" checked />
|
|
136
|
+
</ExampleContainer>
|
|
137
|
+
</>
|
|
138
|
+
</DarkContainer>
|
|
139
|
+
</BackgroundColorProvider>
|
|
140
|
+
<Title title="Sizes" theme="light" level={2} />
|
|
141
|
+
<ExampleContainer>
|
|
142
|
+
<DxcRadio label="Small" size="small" />
|
|
143
|
+
</ExampleContainer>
|
|
144
|
+
<ExampleContainer>
|
|
145
|
+
<DxcRadio label="Medium" size="medium" />
|
|
146
|
+
</ExampleContainer>
|
|
147
|
+
<ExampleContainer>
|
|
148
|
+
<DxcRadio label="Large" size="large" />
|
|
149
|
+
</ExampleContainer>
|
|
150
|
+
<ExampleContainer>
|
|
151
|
+
<DxcRadio label="FitContent" size="fitContent" />
|
|
152
|
+
</ExampleContainer>
|
|
153
|
+
<ExampleContainer>
|
|
154
|
+
<DxcRadio label="FillParent" size="fillParent" />
|
|
155
|
+
</ExampleContainer>
|
|
156
|
+
<Title title="Margins" theme="light" level={2} />
|
|
157
|
+
<ExampleContainer>
|
|
158
|
+
<Title title="Xxsmall" theme="light" level={4} />
|
|
159
|
+
<DxcRadio label="Xxsmall" margin={"xxsmall"} />
|
|
160
|
+
</ExampleContainer>
|
|
161
|
+
<ExampleContainer>
|
|
162
|
+
<Title title="Xsmall" theme="light" level={4} />
|
|
163
|
+
<DxcRadio label="Xsmall" margin={"xsmall"} />
|
|
164
|
+
</ExampleContainer>
|
|
165
|
+
<ExampleContainer>
|
|
166
|
+
<Title title="Small" theme="light" level={4} />
|
|
167
|
+
<DxcRadio label="Small" margin={"small"} />
|
|
168
|
+
</ExampleContainer>
|
|
169
|
+
<ExampleContainer>
|
|
170
|
+
<Title title="Medium" theme="light" level={4} />
|
|
171
|
+
<DxcRadio label="Medium" margin={"medium"} />
|
|
172
|
+
</ExampleContainer>
|
|
173
|
+
<ExampleContainer>
|
|
174
|
+
<Title title="Large" theme="light" level={4} />
|
|
175
|
+
<DxcRadio label="Large" margin={"large"} />
|
|
176
|
+
</ExampleContainer>
|
|
177
|
+
<ExampleContainer>
|
|
178
|
+
<Title title="Xlarge" theme="light" level={4} />
|
|
179
|
+
<DxcRadio label="Xlarge" margin={"xlarge"} />
|
|
180
|
+
</ExampleContainer>
|
|
181
|
+
<ExampleContainer>
|
|
182
|
+
<Title title="Xxlarge" theme="light" level={4} />
|
|
183
|
+
<DxcRadio label="Xxlarge" margin={"xxlarge"} />
|
|
184
|
+
</ExampleContainer>
|
|
185
|
+
</>
|
|
186
|
+
);
|
|
187
|
+
|
|
188
|
+
export const Chromatic = Radio.bind({});
|
|
189
|
+
Chromatic.play = async () => {
|
|
190
|
+
await userEvent.tab();
|
|
191
|
+
await userEvent.tab();
|
|
192
|
+
};
|
package/select/index.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
type SVG = string | (HTMLElement & SVGElement);
|
|
2
1
|
type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
3
2
|
type Margin = {
|
|
4
3
|
top?: Space;
|
|
@@ -6,6 +5,7 @@ type Margin = {
|
|
|
6
5
|
left?: Space;
|
|
7
6
|
right?: Space;
|
|
8
7
|
};
|
|
8
|
+
type SVG = React.SVGProps<SVGSVGElement> | React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
|
|
9
9
|
|
|
10
10
|
type OptionGroup = {
|
|
11
11
|
/**
|
|
@@ -24,7 +24,7 @@ type Option = {
|
|
|
24
24
|
* is the chosen one, take into account that the component's
|
|
25
25
|
* color styling tokens will not be applied to the image.
|
|
26
26
|
*/
|
|
27
|
-
icon?: SVG;
|
|
27
|
+
icon?: string | SVG;
|
|
28
28
|
/**
|
|
29
29
|
* Label of the option to be shown in the select's listbox.
|
|
30
30
|
*/
|
package/spinner/Spinner.js
CHANGED
|
@@ -13,14 +13,10 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
|
13
13
|
|
|
14
14
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
15
15
|
|
|
16
|
-
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
17
|
-
|
|
18
16
|
var _react = _interopRequireWildcard(require("react"));
|
|
19
17
|
|
|
20
18
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
21
19
|
|
|
22
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
23
|
-
|
|
24
20
|
var _variables = require("../common/variables.js");
|
|
25
21
|
|
|
26
22
|
var _useTheme = _interopRequireDefault(require("../useTheme.js"));
|
|
@@ -140,19 +136,6 @@ var determinatedValue = function determinatedValue(props, strokeDashArray) {
|
|
|
140
136
|
return val;
|
|
141
137
|
};
|
|
142
138
|
|
|
143
|
-
DxcSpinner.propTypes = {
|
|
144
|
-
label: _propTypes["default"].string,
|
|
145
|
-
value: _propTypes["default"].number,
|
|
146
|
-
showValue: _propTypes["default"].bool,
|
|
147
|
-
mode: _propTypes["default"].oneOf(["large", "small", "overlay"]),
|
|
148
|
-
margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
|
|
149
|
-
top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
150
|
-
bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
151
|
-
left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
152
|
-
right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
|
|
153
|
-
}), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])
|
|
154
|
-
};
|
|
155
|
-
|
|
156
139
|
var DXCSpinner = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n height: ", ";\n width: ", ";\n display: ", ";\n position: ", ";\n top: ", ";\n left: ", ";\n justify-content: ", ";\n align-items: ", ";\n z-index: ", ";\n\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"])), function (props) {
|
|
157
140
|
return props.mode === "overlay" ? "100vh" : "";
|
|
158
141
|
}, function (props) {
|
|
@@ -172,15 +155,15 @@ var DXCSpinner = _styledComponents["default"].div(_templateObject || (_templateO
|
|
|
172
155
|
}, function (props) {
|
|
173
156
|
return props.mode === "overlay" ? 1300 : "";
|
|
174
157
|
}, function (props) {
|
|
175
|
-
return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
|
|
158
|
+
return props.mode != "overlay" ? props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px" : "";
|
|
176
159
|
}, function (props) {
|
|
177
|
-
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
|
|
160
|
+
return props.mode != "overlay" ? props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "" : "";
|
|
178
161
|
}, function (props) {
|
|
179
|
-
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
|
|
162
|
+
return props.mode != "overlay" ? props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "" : "";
|
|
180
163
|
}, function (props) {
|
|
181
|
-
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
|
|
164
|
+
return props.mode != "overlay" ? props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "" : "";
|
|
182
165
|
}, function (props) {
|
|
183
|
-
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
|
|
166
|
+
return props.mode != "overlay" ? props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "" : "";
|
|
184
167
|
});
|
|
185
168
|
|
|
186
169
|
var SpinnerContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n align-items: center;\n display: flex;\n height: ", ";\n width: ", ";\n justify-content: center;\n position: relative;\n background-color: transparent;\n\n @keyframes spinner-svg {\n 0% {\n transform: rotateZ(0deg);\n }\n 100% {\n transform: rotateZ(360deg);\n }\n }\n @keyframes svg-circle-large {\n 0% {\n stroke-dashoffset: 400;\n transform: rotate(0);\n }\n\n 50% {\n stroke-dashoffset: 75;\n transform: rotate(45deg);\n }\n\n 100% {\n stroke-dashoffset: 400;\n transform: rotate(360deg);\n }\n }\n @keyframes svg-circle-small {\n 0% {\n stroke-dashoffset: 35;\n transform: rotate(0);\n }\n\n 50% {\n stroke-dashoffset: 8;\n transform: rotate(45deg);\n }\n\n 100% {\n stroke-dashoffset: 35;\n transform: rotate(360deg);\n }\n }\n"])), function (props) {
|
|
@@ -245,7 +228,7 @@ var SpinnerLabel = _styledComponents["default"].p(_templateObject11 || (_templat
|
|
|
245
228
|
return props.mode === "overlay" ? props.theme.overlayLabelLetterSpacing : props.theme.labelLetterSpacing;
|
|
246
229
|
});
|
|
247
230
|
|
|
248
|
-
var SpinnerProgress = _styledComponents["default"].p(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n margin: 0;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: ", ";\n font-family: ", ";\n font-weight: ", ";\n font-size: ", ";\n font-style: ", ";\n
|
|
231
|
+
var SpinnerProgress = _styledComponents["default"].p(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n margin: 0;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: ", ";\n font-family: ", ";\n font-weight: ", ";\n font-size: ", ";\n font-style: ", ";\n color: ", ";\n text-align: ", ";\n letter-spacing: ", ";\n"])), function (props) {
|
|
249
232
|
return props.value !== "" && props.showValue === true && "block" || "none";
|
|
250
233
|
}, function (props) {
|
|
251
234
|
return props.mode === "overlay" ? props.theme.overlayProgressValueFontFamily : props.theme.progressValueFontFamily;
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import DxcSpinner from "./Spinner";
|
|
3
|
+
import Title from "../../.storybook/components/Title";
|
|
4
|
+
import ExampleContainer from "../../.storybook/components/ExampleContainer";
|
|
5
|
+
|
|
6
|
+
export default {
|
|
7
|
+
title: "Spinner",
|
|
8
|
+
component: DxcSpinner,
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
export const Chromatic = () => (
|
|
12
|
+
<>
|
|
13
|
+
<ExampleContainer>
|
|
14
|
+
<Title title="With label" theme="light" level={4} />
|
|
15
|
+
<DxcSpinner label="Label" value="50"></DxcSpinner>
|
|
16
|
+
<Title title="With value label" theme="light" level={4} />
|
|
17
|
+
<DxcSpinner value="50" showValue></DxcSpinner>
|
|
18
|
+
<Title title="With label and value label" theme="light" level={4} />
|
|
19
|
+
<DxcSpinner label="Label" value="50" showValue></DxcSpinner>
|
|
20
|
+
<Title title="With 100%" theme="light" level={4} />
|
|
21
|
+
<DxcSpinner label="Label" value="100" showValue></DxcSpinner>
|
|
22
|
+
</ExampleContainer>
|
|
23
|
+
<Title title="Modes" theme="light" level={2} />
|
|
24
|
+
<ExampleContainer>
|
|
25
|
+
<Title title="Mode large" theme="light" level={4} />
|
|
26
|
+
<DxcSpinner mode="large" value="50"></DxcSpinner>
|
|
27
|
+
<Title title="Mode small" theme="light" level={4} />
|
|
28
|
+
<DxcSpinner mode="small" value="50"></DxcSpinner>
|
|
29
|
+
<Title title="Mode small with 100%" theme="light" level={4} />
|
|
30
|
+
<DxcSpinner mode="small" value="100" showValue></DxcSpinner>
|
|
31
|
+
</ExampleContainer>
|
|
32
|
+
<Title title="Margins with large mode" theme="light" level={2} />
|
|
33
|
+
<ExampleContainer>
|
|
34
|
+
<Title title="Xxsmall margin" theme="light" level={4} />
|
|
35
|
+
<DxcSpinner margin="xxsmall" value="75"></DxcSpinner>
|
|
36
|
+
<Title title="Xsmall margin" theme="light" level={4} />
|
|
37
|
+
<DxcSpinner margin="xsmall" value="75"></DxcSpinner>
|
|
38
|
+
<Title title="Small margin" theme="light" level={4} />
|
|
39
|
+
<DxcSpinner margin="small" value="75"></DxcSpinner>
|
|
40
|
+
<Title title="Medium margin" theme="light" level={4} />
|
|
41
|
+
<DxcSpinner margin="medium" value="75"></DxcSpinner>
|
|
42
|
+
<Title title="Large margin" theme="light" level={4} />
|
|
43
|
+
<DxcSpinner margin="large" value="75"></DxcSpinner>
|
|
44
|
+
<Title title="Xlarge margin" theme="light" level={4} />
|
|
45
|
+
<DxcSpinner margin="xlarge" value="75"></DxcSpinner>
|
|
46
|
+
<Title title="Xxlarge margin" theme="light" level={4} />
|
|
47
|
+
<DxcSpinner margin="xxlarge" value="75"></DxcSpinner>
|
|
48
|
+
</ExampleContainer>
|
|
49
|
+
<Title title="Margins with small mode" theme="light" level={2} />
|
|
50
|
+
<ExampleContainer>
|
|
51
|
+
<Title title="Xxsmall margin" theme="light" level={4} />
|
|
52
|
+
<DxcSpinner margin="xxsmall" mode="small" value="75"></DxcSpinner>
|
|
53
|
+
<Title title="Xsmall margin" theme="light" level={4} />
|
|
54
|
+
<DxcSpinner margin="xsmall" mode="small" value="75"></DxcSpinner>
|
|
55
|
+
<Title title="Small margin" theme="light" level={4} />
|
|
56
|
+
<DxcSpinner margin="small" mode="small" value="75"></DxcSpinner>
|
|
57
|
+
<Title title="Medium margin" theme="light" level={4} />
|
|
58
|
+
<DxcSpinner margin="medium" mode="small" value="75"></DxcSpinner>
|
|
59
|
+
<Title title="Large margin" theme="light" level={4} />
|
|
60
|
+
<DxcSpinner margin="large" mode="small" value="75"></DxcSpinner>
|
|
61
|
+
<Title title="Xlarge margin" theme="light" level={4} />
|
|
62
|
+
<DxcSpinner margin="xlarge" mode="small" value="75"></DxcSpinner>
|
|
63
|
+
<Title title="Xxlarge margin" theme="light" level={4} />
|
|
64
|
+
<DxcSpinner margin="xxlarge" mode="small" value="75"></DxcSpinner>
|
|
65
|
+
</ExampleContainer>
|
|
66
|
+
</>
|
|
67
|
+
);
|
|
68
|
+
|
|
69
|
+
export const SpinnerOverlay = () => (
|
|
70
|
+
<ExampleContainer>
|
|
71
|
+
<Title title="Mode overlay" theme="light" level={4} />
|
|
72
|
+
<DxcSpinner mode="overlay" value="25"></DxcSpinner>
|
|
73
|
+
</ExampleContainer>
|
|
74
|
+
);
|
|
75
|
+
|
|
76
|
+
export const SpinnerOverlayWith100 = () => (
|
|
77
|
+
<ExampleContainer>
|
|
78
|
+
<Title title="Mode overlay" theme="light" level={4} />
|
|
79
|
+
<DxcSpinner mode="overlay" value="100"></DxcSpinner>
|
|
80
|
+
</ExampleContainer>
|
|
81
|
+
);
|
|
82
|
+
|
|
83
|
+
export const SpinnerOverlayWithLabel = () => (
|
|
84
|
+
<ExampleContainer>
|
|
85
|
+
<Title title="Mode overlay" theme="light" level={4} />
|
|
86
|
+
<DxcSpinner mode="overlay" value="50" label="Label"></DxcSpinner>
|
|
87
|
+
</ExampleContainer>
|
|
88
|
+
);
|
|
89
|
+
|
|
90
|
+
export const SpinnerOverlayWithValue = () => (
|
|
91
|
+
<ExampleContainer>
|
|
92
|
+
<Title title="Mode overlay" theme="light" level={4} />
|
|
93
|
+
<DxcSpinner mode="overlay" value="50" showValue></DxcSpinner>
|
|
94
|
+
</ExampleContainer>
|
|
95
|
+
);
|
|
96
|
+
|
|
97
|
+
export const SpinnerOverlayWithValueAndLabel = () => (
|
|
98
|
+
<ExampleContainer>
|
|
99
|
+
<Title title="Mode overlay" theme="light" level={4} />
|
|
100
|
+
<DxcSpinner mode="overlay" label="Label" value="50" showValue></DxcSpinner>
|
|
101
|
+
</ExampleContainer>
|
|
102
|
+
);
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
2
|
+
declare type Margin = {
|
|
3
|
+
top?: Space;
|
|
4
|
+
bottom?: Space;
|
|
5
|
+
left?: Space;
|
|
6
|
+
right?: Space;
|
|
7
|
+
};
|
|
8
|
+
declare type Props = {
|
|
9
|
+
/**
|
|
10
|
+
* Text to be placed inside the spinner.
|
|
11
|
+
*/
|
|
12
|
+
label?: string;
|
|
13
|
+
/**
|
|
14
|
+
* The value of the progress indicator. If it's received the
|
|
15
|
+
* component is determinate, otherwise is indeterminate.
|
|
16
|
+
*/
|
|
17
|
+
value?: number;
|
|
18
|
+
/**
|
|
19
|
+
* If true, the value is displayed inside the spinner..
|
|
20
|
+
*/
|
|
21
|
+
showValue?: boolean;
|
|
22
|
+
/**
|
|
23
|
+
* Available modes of the spinner.
|
|
24
|
+
*/
|
|
25
|
+
mode?: "large" | "small" | "overlay";
|
|
26
|
+
/**
|
|
27
|
+
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
28
|
+
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
29
|
+
*/
|
|
30
|
+
margin?: Space | Margin;
|
|
31
|
+
};
|
|
32
|
+
export default Props;
|
package/spinner/types.js
ADDED
package/table/Table.d.ts
ADDED