@dxc-technology/halstack-react 0.0.0-8f8dc10 → 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/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/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/package.json +1 -1
- package/password-input/PasswordInput.stories.jsx +1 -1
- package/radio/Radio.stories.tsx +192 -0
- package/spinner/Spinner.d.ts +4 -0
- package/spinner/Spinner.js +0 -17
- 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/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/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
|
@@ -7,7 +7,7 @@ import ExampleContainer from "../../.storybook/components/ExampleContainer";
|
|
|
7
7
|
import DarkContainer from "../../.storybook/components/DarkSection";
|
|
8
8
|
|
|
9
9
|
export default {
|
|
10
|
-
title: "Password input
|
|
10
|
+
title: "Password input",
|
|
11
11
|
component: DxcPasswordInput,
|
|
12
12
|
};
|
|
13
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/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) {
|
|
@@ -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
package/table/types.d.ts
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
3
|
+
declare type Margin = {
|
|
4
|
+
top?: Space;
|
|
5
|
+
bottom?: Space;
|
|
6
|
+
left?: Space;
|
|
7
|
+
right?: Space;
|
|
8
|
+
};
|
|
9
|
+
declare type Props = {
|
|
10
|
+
/**
|
|
11
|
+
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
12
|
+
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
13
|
+
*/
|
|
14
|
+
margin?: Space | Margin;
|
|
15
|
+
/**
|
|
16
|
+
* The center section of the table. Can be used to render custom
|
|
17
|
+
* content in this area.
|
|
18
|
+
*/
|
|
19
|
+
children: React.ReactNode;
|
|
20
|
+
};
|
|
21
|
+
export default Props;
|
package/table/types.js
ADDED
package/tag/Tag.js
CHANGED
|
@@ -27,6 +27,8 @@ var _variables = require("../common/variables.js");
|
|
|
27
27
|
|
|
28
28
|
var _useTheme = _interopRequireDefault(require("../useTheme.js"));
|
|
29
29
|
|
|
30
|
+
var _utils = require("../common/utils.js");
|
|
31
|
+
|
|
30
32
|
var _Box = _interopRequireDefault(require("../box/Box"));
|
|
31
33
|
|
|
32
34
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
|
@@ -67,8 +69,7 @@ var DxcTag = function DxcTag(_ref) {
|
|
|
67
69
|
size: size,
|
|
68
70
|
shadowDepth: isHovered && (onClick || linkHref) && 2 || 1
|
|
69
71
|
}, /*#__PURE__*/_react["default"].createElement(TagContent, {
|
|
70
|
-
labelPosition: labelPosition
|
|
71
|
-
size: size
|
|
72
|
+
labelPosition: labelPosition
|
|
72
73
|
}, /*#__PURE__*/_react["default"].createElement(IconContainer, {
|
|
73
74
|
iconBgColor: iconBgColor
|
|
74
75
|
}, icon ? /*#__PURE__*/_react["default"].createElement(TagIconContainer, null, (0, _typeof2["default"])(icon) === "object" ? icon : /*#__PURE__*/_react["default"].createElement(icon)) : /*#__PURE__*/_react["default"].createElement(TagIcon, {
|
|
@@ -79,6 +80,7 @@ var DxcTag = function DxcTag(_ref) {
|
|
|
79
80
|
theme: colorsTheme.tag
|
|
80
81
|
}, /*#__PURE__*/_react["default"].createElement(StyledDxcTag, {
|
|
81
82
|
margin: margin,
|
|
83
|
+
size: size,
|
|
82
84
|
onMouseEnter: function onMouseEnter() {
|
|
83
85
|
return changeIsHovered(true);
|
|
84
86
|
},
|
|
@@ -104,11 +106,11 @@ var sizes = {
|
|
|
104
106
|
fitContent: "unset"
|
|
105
107
|
};
|
|
106
108
|
|
|
107
|
-
var calculateWidth = function calculateWidth(size) {
|
|
108
|
-
return sizes[size];
|
|
109
|
+
var calculateWidth = function calculateWidth(margin, size) {
|
|
110
|
+
return size === "fillParent" ? "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")") : sizes[size];
|
|
109
111
|
};
|
|
110
112
|
|
|
111
|
-
var StyledDxcTag = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n cursor: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"])), function (_ref2) {
|
|
113
|
+
var StyledDxcTag = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n cursor: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n width: ", ";\n height: ", ";\n"])), function (_ref2) {
|
|
112
114
|
var hasAction = _ref2.hasAction;
|
|
113
115
|
return hasAction && "pointer" || "unset";
|
|
114
116
|
}, function (_ref3) {
|
|
@@ -126,22 +128,24 @@ var StyledDxcTag = _styledComponents["default"].div(_templateObject || (_templat
|
|
|
126
128
|
}, function (_ref7) {
|
|
127
129
|
var margin = _ref7.margin;
|
|
128
130
|
return margin && margin.left ? _variables.spaces[margin.left] : "";
|
|
131
|
+
}, function (props) {
|
|
132
|
+
return calculateWidth(props.margin, props.size);
|
|
133
|
+
}, function (props) {
|
|
134
|
+
return props.theme.height;
|
|
129
135
|
});
|
|
130
136
|
|
|
131
|
-
var TagContent = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n align-items: center;\n flex-direction: ", ";\n width:
|
|
137
|
+
var TagContent = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n align-items: center;\n flex-direction: ", ";\n width: 100%;\n height: ", ";\n"])), function (_ref8) {
|
|
132
138
|
var labelPosition = _ref8.labelPosition;
|
|
133
139
|
return labelPosition === "before" && "row-reverse" || "row";
|
|
134
|
-
}, function (props) {
|
|
135
|
-
return calculateWidth(props.size);
|
|
136
140
|
}, function (props) {
|
|
137
141
|
return props.theme.height;
|
|
138
142
|
});
|
|
139
143
|
|
|
140
|
-
var StyledLink = _styledComponents["default"].a(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n text-decoration: none;\n border-radius: 4px;\n
|
|
144
|
+
var StyledLink = _styledComponents["default"].a(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n text-decoration: none;\n border-radius: 4px;\n width: 100%;\n :focus {\n outline: 2px solid ", ";\n outline-offset: 0px;\n }\n"])), function (props) {
|
|
141
145
|
return props.theme.focusColor;
|
|
142
146
|
});
|
|
143
147
|
|
|
144
|
-
var StyledButton = _styledComponents["default"].button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n background: none;\n border-radius: 4px;\n border: none;\n padding: 0;\n cursor: pointer;\n font-family: inherit;\n
|
|
148
|
+
var StyledButton = _styledComponents["default"].button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n background: none;\n border-radius: 4px;\n border: none;\n padding: 0;\n cursor: pointer;\n font-family: inherit;\n width: 100%;\n :focus {\n outline: 2px solid ", ";\n }\n"])), function (props) {
|
|
145
149
|
return props.theme.focusColor;
|
|
146
150
|
});
|
|
147
151
|
|
|
@@ -157,13 +161,15 @@ var TagIconContainer = _styledComponents["default"].div(_templateObject6 || (_te
|
|
|
157
161
|
return props.theme.iconHeight;
|
|
158
162
|
});
|
|
159
163
|
|
|
160
|
-
var IconContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n background: ", ";\n width: ", ";\n height: 100%;\n justify-content: center;\n align-items: center;\n color: ", ";\n"])), function (_ref9) {
|
|
164
|
+
var IconContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n background: ", ";\n width: ", ";\n height: 100%;\n justify-content: center;\n align-items: center;\n color: ", ";\n min-width: ", ";\n"])), function (_ref9) {
|
|
161
165
|
var iconBgColor = _ref9.iconBgColor;
|
|
162
166
|
return iconBgColor;
|
|
163
167
|
}, function (props) {
|
|
164
168
|
return props.theme.iconSectionWidth;
|
|
165
169
|
}, function (props) {
|
|
166
170
|
return props.theme.iconColor;
|
|
171
|
+
}, function (props) {
|
|
172
|
+
return props.theme.iconSectionWidth;
|
|
167
173
|
});
|
|
168
174
|
|
|
169
175
|
var TagLabel = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n flex-grow: 1;\n text-align: center;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n"])), function (props) {
|
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { userEvent, within } from "@storybook/testing-library";
|
|
3
|
+
import Title from "../../.storybook/components/Title";
|
|
4
|
+
import ExampleContainer from "../../.storybook/components/ExampleContainer";
|
|
5
|
+
import DxcTag from "./Tag";
|
|
6
|
+
|
|
7
|
+
export default {
|
|
8
|
+
title: "Tag",
|
|
9
|
+
component: DxcTag,
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
const icon = () => {
|
|
13
|
+
return (
|
|
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
|
+
);
|
|
19
|
+
};
|
|
20
|
+
const largeIcon = () => {
|
|
21
|
+
return (
|
|
22
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 0 24 24" width="48px" fill="currentColor">
|
|
23
|
+
<path d="M0 0h24v24H0V0z" fill="none" />
|
|
24
|
+
<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z" />
|
|
25
|
+
</svg>
|
|
26
|
+
);
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
export const Chromatic = () => (
|
|
30
|
+
<>
|
|
31
|
+
<ExampleContainer>
|
|
32
|
+
<Title title="Without label" theme="light" level={4} />
|
|
33
|
+
<DxcTag />
|
|
34
|
+
</ExampleContainer>
|
|
35
|
+
<ExampleContainer>
|
|
36
|
+
<Title title="With icon" theme="light" level={4} />
|
|
37
|
+
<DxcTag icon={icon} />
|
|
38
|
+
</ExampleContainer>
|
|
39
|
+
<ExampleContainer>
|
|
40
|
+
<Title title="With large icon" theme="light" level={4} />
|
|
41
|
+
<DxcTag icon={largeIcon} />
|
|
42
|
+
</ExampleContainer>
|
|
43
|
+
<ExampleContainer>
|
|
44
|
+
<Title title="With label" theme="light" level={4} />
|
|
45
|
+
<DxcTag label="Tag" />
|
|
46
|
+
</ExampleContainer>
|
|
47
|
+
<ExampleContainer>
|
|
48
|
+
<Title title="With label and icon" theme="light" level={4} />
|
|
49
|
+
<DxcTag label="Tag" icon={icon} />
|
|
50
|
+
</ExampleContainer>
|
|
51
|
+
<ExampleContainer>
|
|
52
|
+
<Title title="With right icon" theme="light" level={4} />
|
|
53
|
+
<DxcTag label="Tag" icon={icon} labelPosition="before" />
|
|
54
|
+
</ExampleContainer>
|
|
55
|
+
<ExampleContainer>
|
|
56
|
+
<Title title="Icon background color" theme="light" level={4} />
|
|
57
|
+
<DxcTag label="Tag" icon={icon} iconBgColor="#fabada" />
|
|
58
|
+
</ExampleContainer>
|
|
59
|
+
<ExampleContainer pseudoState="pseudo-focus">
|
|
60
|
+
<Title title="With link focused" theme="light" level={4} />
|
|
61
|
+
<DxcTag icon={icon} label="Tag" linkHref="https://www.dxc.com" />
|
|
62
|
+
</ExampleContainer>
|
|
63
|
+
<ExampleContainer pseudoState="pseudo-focus">
|
|
64
|
+
<Title title="With action focused" theme="light" level={4} />
|
|
65
|
+
<DxcTag
|
|
66
|
+
icon={icon}
|
|
67
|
+
label="Tag"
|
|
68
|
+
onClick={() => {
|
|
69
|
+
console.log("click");
|
|
70
|
+
}}
|
|
71
|
+
/>
|
|
72
|
+
</ExampleContainer>
|
|
73
|
+
<Title title="Margins" theme="light" level={2} />
|
|
74
|
+
<ExampleContainer>
|
|
75
|
+
<Title title="Xxsmall margin" theme="light" level={4} />
|
|
76
|
+
<DxcTag label="Xxsmall" margin="xxsmall" />
|
|
77
|
+
</ExampleContainer>
|
|
78
|
+
<ExampleContainer>
|
|
79
|
+
<Title title="Xsmall margin" theme="light" level={4} />
|
|
80
|
+
<DxcTag label="Xsmall" margin="xsmall" />
|
|
81
|
+
</ExampleContainer>
|
|
82
|
+
<ExampleContainer>
|
|
83
|
+
<Title title="Small margin" theme="light" level={4} />
|
|
84
|
+
<DxcTag label="Small" margin="small" />
|
|
85
|
+
</ExampleContainer>
|
|
86
|
+
<ExampleContainer>
|
|
87
|
+
<Title title="Medium margin" theme="light" level={4} />
|
|
88
|
+
<DxcTag label="Medium" margin="medium" />
|
|
89
|
+
</ExampleContainer>
|
|
90
|
+
<ExampleContainer>
|
|
91
|
+
<Title title="Large margin" theme="light" level={4} />
|
|
92
|
+
<DxcTag label="Large" margin="large" />
|
|
93
|
+
</ExampleContainer>
|
|
94
|
+
<ExampleContainer>
|
|
95
|
+
<Title title="Xlarge margin" theme="light" level={4} />
|
|
96
|
+
<DxcTag label="Xlarge" margin="xlarge" />
|
|
97
|
+
</ExampleContainer>
|
|
98
|
+
<ExampleContainer>
|
|
99
|
+
<Title title="Xxlarge margin" theme="light" level={4} />
|
|
100
|
+
<DxcTag label="Xxlarge" margin="xxlarge" />
|
|
101
|
+
</ExampleContainer>
|
|
102
|
+
<Title title="Sizes" theme="light" level={2} />
|
|
103
|
+
<ExampleContainer>
|
|
104
|
+
<Title title="Small size" theme="light" level={4} />
|
|
105
|
+
<DxcTag label="Small" size="small" />
|
|
106
|
+
</ExampleContainer>
|
|
107
|
+
<ExampleContainer>
|
|
108
|
+
<Title title="Medium size" theme="light" level={4} />
|
|
109
|
+
<DxcTag label="Medium size medium s" size="medium" />
|
|
110
|
+
</ExampleContainer>
|
|
111
|
+
<ExampleContainer>
|
|
112
|
+
<Title title="Medium size with ellipsis" theme="light" level={4} />
|
|
113
|
+
<DxcTag label="Medium size medium si medium" size="medium" />
|
|
114
|
+
</ExampleContainer>
|
|
115
|
+
<ExampleContainer>
|
|
116
|
+
<Title title="Large size" theme="light" level={4} />
|
|
117
|
+
<DxcTag label="Large size large size large size large size large size" size="large" />
|
|
118
|
+
</ExampleContainer>
|
|
119
|
+
<ExampleContainer>
|
|
120
|
+
<Title title="Large size with ellipsis" theme="light" level={4} />
|
|
121
|
+
<DxcTag label="Large size large size large size large size large size large size" size="large" />
|
|
122
|
+
</ExampleContainer>
|
|
123
|
+
<ExampleContainer>
|
|
124
|
+
<Title title="FillParent size" theme="light" level={4} />
|
|
125
|
+
<DxcTag label="FillParent" size="fillParent" />
|
|
126
|
+
</ExampleContainer>
|
|
127
|
+
<ExampleContainer>
|
|
128
|
+
<Title title="FitContent size" theme="light" level={4} />
|
|
129
|
+
<DxcTag label="FitContent" size="fitContent" />
|
|
130
|
+
</ExampleContainer>
|
|
131
|
+
</>
|
|
132
|
+
);
|
|
133
|
+
|
|
134
|
+
const LinkTag = () => (
|
|
135
|
+
<ExampleContainer>
|
|
136
|
+
<Title title="Hover link tag" theme="light" level={4} />
|
|
137
|
+
<DxcTag label="Tag" icon={icon} linkHref="https://www.dxc.com" />
|
|
138
|
+
</ExampleContainer>
|
|
139
|
+
);
|
|
140
|
+
|
|
141
|
+
export const HoverLinkTag = LinkTag.bind({});
|
|
142
|
+
HoverLinkTag.play = async ({ canvasElement }) => {
|
|
143
|
+
const canvas = within(canvasElement);
|
|
144
|
+
await userEvent.hover(canvas.getByText("Tag"));
|
|
145
|
+
};
|