@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
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,
|
|
3
|
+
declare const DxcButton: ({ label, mode, disabled, iconPosition, type, icon, iconSrc, onClick, margin, size, tabIndex }: ButtonPropsType) => JSX.Element;
|
|
4
4
|
export default DxcButton;
|
package/button/Button.js
CHANGED
|
@@ -44,16 +44,15 @@ var DxcButton = function DxcButton(_ref) {
|
|
|
44
44
|
iconPosition = _ref$iconPosition === void 0 ? "before" : _ref$iconPosition,
|
|
45
45
|
_ref$type = _ref.type,
|
|
46
46
|
type = _ref$type === void 0 ? "button" : _ref$type,
|
|
47
|
+
icon = _ref.icon,
|
|
47
48
|
_ref$iconSrc = _ref.iconSrc,
|
|
48
49
|
iconSrc = _ref$iconSrc === void 0 ? "" : _ref$iconSrc,
|
|
49
|
-
|
|
50
|
-
_ref$onClick = _ref.onClick,
|
|
51
|
-
_onClick = _ref$onClick === void 0 ? "" : _ref$onClick,
|
|
50
|
+
onClick = _ref.onClick,
|
|
52
51
|
margin = _ref.margin,
|
|
53
|
-
size = _ref.size,
|
|
52
|
+
_ref$size = _ref.size,
|
|
53
|
+
size = _ref$size === void 0 ? "fitContent" : _ref$size,
|
|
54
54
|
_ref$tabIndex = _ref.tabIndex,
|
|
55
55
|
tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
|
|
56
|
-
|
|
57
56
|
var colorsTheme = (0, _useTheme["default"])();
|
|
58
57
|
var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
|
|
59
58
|
return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
@@ -68,16 +67,12 @@ var DxcButton = function DxcButton(_ref) {
|
|
|
68
67
|
backgroundType: backgroundType,
|
|
69
68
|
icon: icon
|
|
70
69
|
}, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
71
|
-
disabled: disabled,
|
|
72
70
|
type: type,
|
|
71
|
+
disabled: disabled,
|
|
73
72
|
disableRipple: true,
|
|
74
|
-
"aria-disabled": disabled
|
|
73
|
+
"aria-disabled": disabled,
|
|
75
74
|
tabIndex: disabled ? -1 : tabIndex,
|
|
76
|
-
onClick:
|
|
77
|
-
if (_onClick) {
|
|
78
|
-
_onClick();
|
|
79
|
-
}
|
|
80
|
-
}
|
|
75
|
+
onClick: onClick
|
|
81
76
|
}, label && /*#__PURE__*/_react["default"].createElement(LabelContainer, {
|
|
82
77
|
icon: icon,
|
|
83
78
|
iconPosition: iconPosition
|
package/button/types.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
2
|
declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
3
3
|
declare type Margin = {
|
|
4
4
|
top?: Space;
|
|
@@ -6,7 +6,7 @@ declare type Margin = {
|
|
|
6
6
|
left?: Space;
|
|
7
7
|
right?: Space;
|
|
8
8
|
};
|
|
9
|
-
declare type SVG =
|
|
9
|
+
declare type SVG = React.SVGProps<SVGSVGElement> | React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
|
|
10
10
|
declare type Props = {
|
|
11
11
|
/**
|
|
12
12
|
* Text to be placed next to the button.
|
|
@@ -28,29 +28,29 @@ declare type Props = {
|
|
|
28
28
|
* This prop corresponds to the 'type' prop of the button in html.
|
|
29
29
|
*/
|
|
30
30
|
type?: "button" | "reset" | "submit";
|
|
31
|
-
/**
|
|
32
|
-
* DEPRECATED. URL of the icon that will be placed next to the button label.
|
|
33
|
-
*/
|
|
34
|
-
iconSrc?: string;
|
|
35
31
|
/**
|
|
36
32
|
* Element used as the icon that will be placed next to the button label.
|
|
37
33
|
*/
|
|
38
34
|
icon?: SVG;
|
|
35
|
+
/**
|
|
36
|
+
* @deprecated URL of the icon that will be placed next to the button label.
|
|
37
|
+
*/
|
|
38
|
+
iconSrc?: string;
|
|
39
39
|
/**
|
|
40
40
|
* This function will be called when the user clicks the button. The event object will be passed as a parameter.
|
|
41
41
|
*/
|
|
42
|
-
onClick?:
|
|
42
|
+
onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
|
|
43
43
|
/**
|
|
44
44
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
45
45
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
46
46
|
*/
|
|
47
47
|
margin?: Space | Margin;
|
|
48
48
|
/**
|
|
49
|
-
* Size of the component
|
|
49
|
+
* Size of the component.
|
|
50
50
|
*/
|
|
51
|
-
size?:
|
|
51
|
+
size?: "small" | "medium" | "large" | "fillParent" | "fitContent";
|
|
52
52
|
/**
|
|
53
|
-
* Value of the tabindex.
|
|
53
|
+
* Value of the tabindex attribute.
|
|
54
54
|
*/
|
|
55
55
|
tabIndex?: number;
|
|
56
56
|
};
|
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import DxcCheckbox from "./Checkbox";
|
|
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: "Checkbox",
|
|
11
|
+
component: DxcCheckbox,
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
const Checkbox = () => (
|
|
15
|
+
<>
|
|
16
|
+
<>
|
|
17
|
+
<ExampleContainer>
|
|
18
|
+
<Title title="Default" theme="light" level={4} />
|
|
19
|
+
<DxcCheckbox label="Checkbox" />
|
|
20
|
+
</ExampleContainer>
|
|
21
|
+
<ExampleContainer>
|
|
22
|
+
<Title title="Focused" theme="light" level={4} />
|
|
23
|
+
<DxcCheckbox label="Focused" />
|
|
24
|
+
</ExampleContainer>
|
|
25
|
+
<ExampleContainer>
|
|
26
|
+
<Title title="Checked" theme="light" level={4} />
|
|
27
|
+
<DxcCheckbox label="Checkbox" checked />
|
|
28
|
+
</ExampleContainer>
|
|
29
|
+
<ExampleContainer>
|
|
30
|
+
<Title title="Required" theme="light" level={4} />
|
|
31
|
+
<DxcCheckbox label="Checkbox" required />
|
|
32
|
+
</ExampleContainer>
|
|
33
|
+
<ExampleContainer>
|
|
34
|
+
<Title title="Disabled and checked" theme="light" level={4} />
|
|
35
|
+
<DxcCheckbox label="Checkbox" disabled checked />
|
|
36
|
+
</ExampleContainer>
|
|
37
|
+
<ExampleContainer>
|
|
38
|
+
<Title title="Disabled and required" theme="light" level={4} />
|
|
39
|
+
<DxcCheckbox label="Checkbox" disabled required />
|
|
40
|
+
</ExampleContainer>
|
|
41
|
+
<ExampleContainer>
|
|
42
|
+
<Title title="Disabled, required and checked" theme="light" level={4} />
|
|
43
|
+
<DxcCheckbox label="Checkbox" disabled required checked />
|
|
44
|
+
</ExampleContainer>
|
|
45
|
+
<ExampleContainer>
|
|
46
|
+
<Title title="Label after" theme="light" level={4} />
|
|
47
|
+
<DxcCheckbox label="Checkbox" labelPosition="after" />
|
|
48
|
+
</ExampleContainer>
|
|
49
|
+
<ExampleContainer>
|
|
50
|
+
<Title title="Checked with label after" theme="light" level={4} />
|
|
51
|
+
<DxcCheckbox label="Checkbox" checked labelPosition="after" />
|
|
52
|
+
</ExampleContainer>
|
|
53
|
+
<ExampleContainer>
|
|
54
|
+
<Title title="Required with label after" theme="light" level={4} />
|
|
55
|
+
<DxcCheckbox label="Checkbox" required labelPosition="after" />
|
|
56
|
+
</ExampleContainer>
|
|
57
|
+
<ExampleContainer>
|
|
58
|
+
<Title title="Disabled and checked with label after" theme="light" level={4} />
|
|
59
|
+
<DxcCheckbox label="Checkbox" disabled checked labelPosition="after" />
|
|
60
|
+
</ExampleContainer>
|
|
61
|
+
<ExampleContainer>
|
|
62
|
+
<Title title="Disabled and required with label after" theme="light" level={4} />
|
|
63
|
+
<DxcCheckbox label="Checkbox" disabled required labelPosition="after" />
|
|
64
|
+
</ExampleContainer>
|
|
65
|
+
<ExampleContainer>
|
|
66
|
+
<Title title="Disabled, required and checked with label after" theme="light" level={4} />
|
|
67
|
+
<DxcCheckbox label="Checkbox" disabled required checked labelPosition="after" />
|
|
68
|
+
</ExampleContainer>
|
|
69
|
+
<ExampleContainer pseudoState="pseudo-hover">
|
|
70
|
+
<Title title="Hovered" theme="light" level={4} />
|
|
71
|
+
<DxcCheckbox label="Hovered" />
|
|
72
|
+
</ExampleContainer>
|
|
73
|
+
<ExampleContainer pseudoState="pseudo-hover">
|
|
74
|
+
<Title title="Hovered and checked" theme="light" level={4} />
|
|
75
|
+
<DxcCheckbox label="Hovered" checked />
|
|
76
|
+
</ExampleContainer>
|
|
77
|
+
</>
|
|
78
|
+
<BackgroundColorProvider color="#333333">
|
|
79
|
+
<DarkContainer>
|
|
80
|
+
<>
|
|
81
|
+
<ExampleContainer>
|
|
82
|
+
<Title title="Default" theme="dark" level={4} />
|
|
83
|
+
<DxcCheckbox label="Checkbox" />
|
|
84
|
+
</ExampleContainer>
|
|
85
|
+
<ExampleContainer>
|
|
86
|
+
<Title title="Checked" theme="dark" level={4} />
|
|
87
|
+
<DxcCheckbox label="Checkbox" checked />
|
|
88
|
+
</ExampleContainer>
|
|
89
|
+
<ExampleContainer>
|
|
90
|
+
<Title title="Required" theme="dark" level={4} />
|
|
91
|
+
<DxcCheckbox label="Checkbox" required />
|
|
92
|
+
</ExampleContainer>
|
|
93
|
+
<ExampleContainer>
|
|
94
|
+
<Title title="Disabled and checked" theme="dark" level={4} />
|
|
95
|
+
<DxcCheckbox label="Checkbox" disabled checked />
|
|
96
|
+
</ExampleContainer>
|
|
97
|
+
<ExampleContainer>
|
|
98
|
+
<Title title="Disabled and required" theme="dark" level={4} />
|
|
99
|
+
<DxcCheckbox label="Checkbox" disabled required />
|
|
100
|
+
</ExampleContainer>
|
|
101
|
+
<ExampleContainer>
|
|
102
|
+
<Title title="Disabled, required and checked" theme="dark" level={4} />
|
|
103
|
+
<DxcCheckbox label="Checkbox" disabled required checked />
|
|
104
|
+
</ExampleContainer>
|
|
105
|
+
<ExampleContainer>
|
|
106
|
+
<Title title="Label after" theme="dark" level={4} />
|
|
107
|
+
<DxcCheckbox label="Checkbox" labelPosition="after" />
|
|
108
|
+
</ExampleContainer>
|
|
109
|
+
<ExampleContainer>
|
|
110
|
+
<Title title="Checked with label after" theme="dark" level={4} />
|
|
111
|
+
<DxcCheckbox label="Checkbox" checked labelPosition="after" />
|
|
112
|
+
</ExampleContainer>
|
|
113
|
+
<ExampleContainer>
|
|
114
|
+
<Title title="Required with label after" theme="dark" level={4} />
|
|
115
|
+
<DxcCheckbox label="Checkbox" required labelPosition="after" />
|
|
116
|
+
</ExampleContainer>
|
|
117
|
+
<ExampleContainer>
|
|
118
|
+
<Title title="Disabled and checked with label after" theme="dark" level={4} />
|
|
119
|
+
<DxcCheckbox label="Checkbox" disabled checked labelPosition="after" />
|
|
120
|
+
</ExampleContainer>
|
|
121
|
+
<ExampleContainer>
|
|
122
|
+
<Title title="Disabled and required with label after" theme="dark" level={4} />
|
|
123
|
+
<DxcCheckbox label="Checkbox" disabled required labelPosition="after" />
|
|
124
|
+
</ExampleContainer>
|
|
125
|
+
<ExampleContainer>
|
|
126
|
+
<Title title="Disabled, required and checked with label after" theme="dark" level={4} />
|
|
127
|
+
<DxcCheckbox label="Checkbox" disabled required checked labelPosition="after" />
|
|
128
|
+
</ExampleContainer>
|
|
129
|
+
<ExampleContainer pseudoState="pseudo-hover">
|
|
130
|
+
<Title title="Hovered" theme="dark" level={4} />
|
|
131
|
+
<DxcCheckbox label="Hovered" />
|
|
132
|
+
</ExampleContainer>
|
|
133
|
+
<ExampleContainer pseudoState="pseudo-hover">
|
|
134
|
+
<Title title="Hovered and checked" theme="dark" level={4} />
|
|
135
|
+
<DxcCheckbox label="Hovered" checked />
|
|
136
|
+
</ExampleContainer>
|
|
137
|
+
</>
|
|
138
|
+
</DarkContainer>
|
|
139
|
+
</BackgroundColorProvider>
|
|
140
|
+
<Title title="Sizes" theme="light" level={2} />
|
|
141
|
+
<ExampleContainer>
|
|
142
|
+
<DxcCheckbox label="Small" size="small" />
|
|
143
|
+
</ExampleContainer>
|
|
144
|
+
<ExampleContainer>
|
|
145
|
+
<DxcCheckbox label="Medium" size="medium" />
|
|
146
|
+
</ExampleContainer>
|
|
147
|
+
<ExampleContainer>
|
|
148
|
+
<DxcCheckbox label="Large" size="large" />
|
|
149
|
+
</ExampleContainer>
|
|
150
|
+
<ExampleContainer>
|
|
151
|
+
<DxcCheckbox label="FitContent" size="fitContent" />
|
|
152
|
+
</ExampleContainer>
|
|
153
|
+
<ExampleContainer>
|
|
154
|
+
<DxcCheckbox 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
|
+
<DxcCheckbox label="Xxsmall" margin={"xxsmall"} />
|
|
160
|
+
</ExampleContainer>
|
|
161
|
+
<ExampleContainer>
|
|
162
|
+
<Title title="Xsmall" theme="light" level={4} />
|
|
163
|
+
<DxcCheckbox label="Xsmall" margin={"xsmall"} />
|
|
164
|
+
</ExampleContainer>
|
|
165
|
+
<ExampleContainer>
|
|
166
|
+
<Title title="Small" theme="light" level={4} />
|
|
167
|
+
<DxcCheckbox label="Small" margin={"small"} />
|
|
168
|
+
</ExampleContainer>
|
|
169
|
+
<ExampleContainer>
|
|
170
|
+
<Title title="Medium" theme="light" level={4} />
|
|
171
|
+
<DxcCheckbox label="Medium" margin={"medium"} />
|
|
172
|
+
</ExampleContainer>
|
|
173
|
+
<ExampleContainer>
|
|
174
|
+
<Title title="Large" theme="light" level={4} />
|
|
175
|
+
<DxcCheckbox label="Large" margin={"large"} />
|
|
176
|
+
</ExampleContainer>
|
|
177
|
+
<ExampleContainer>
|
|
178
|
+
<Title title="Xlarge" theme="light" level={4} />
|
|
179
|
+
<DxcCheckbox label="Xlarge" margin={"xlarge"} />
|
|
180
|
+
</ExampleContainer>
|
|
181
|
+
<ExampleContainer>
|
|
182
|
+
<Title title="Xxlarge" theme="light" level={4} />
|
|
183
|
+
<DxcCheckbox label="Xxlarge" margin={"xxlarge"} />
|
|
184
|
+
</ExampleContainer>
|
|
185
|
+
</>
|
|
186
|
+
);
|
|
187
|
+
|
|
188
|
+
export const Chromatic = Checkbox.bind({});
|
|
189
|
+
Chromatic.play = async () => {
|
|
190
|
+
await userEvent.tab();
|
|
191
|
+
await userEvent.tab();
|
|
192
|
+
};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import HeaderPropsType from "./types";
|
|
3
|
+
declare const DxcHeader: {
|
|
4
|
+
({ underlined, content, responsiveContent, onClick, margin, padding, tabIndex, }: HeaderPropsType): JSX.Element;
|
|
5
|
+
Dropdown: (props: any) => JSX.Element;
|
|
6
|
+
};
|
|
7
|
+
export default DxcHeader;
|
package/header/Header.js
CHANGED
|
@@ -9,8 +9,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
9
9
|
});
|
|
10
10
|
exports["default"] = void 0;
|
|
11
11
|
|
|
12
|
-
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
13
|
-
|
|
14
12
|
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
15
13
|
|
|
16
14
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
@@ -23,8 +21,6 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
|
23
21
|
|
|
24
22
|
var _AppBar = _interopRequireDefault(require("@material-ui/core/AppBar"));
|
|
25
23
|
|
|
26
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
27
|
-
|
|
28
24
|
var _Dropdown = _interopRequireDefault(require("../dropdown/Dropdown"));
|
|
29
25
|
|
|
30
26
|
var _Icons = require("./Icons");
|
|
@@ -41,6 +37,27 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
41
37
|
|
|
42
38
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
43
39
|
|
|
40
|
+
var closeIcon = /*#__PURE__*/_react["default"].createElement("svg", {
|
|
41
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
42
|
+
height: "24",
|
|
43
|
+
viewBox: "0 0 24 24",
|
|
44
|
+
width: "24"
|
|
45
|
+
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
46
|
+
d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
|
|
47
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
48
|
+
d: "M0 0h24v24H0z",
|
|
49
|
+
fill: "none"
|
|
50
|
+
}));
|
|
51
|
+
|
|
52
|
+
var hamburgerIcon = /*#__PURE__*/_react["default"].createElement("svg", {
|
|
53
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
54
|
+
viewBox: "0 0 24 24",
|
|
55
|
+
width: "24",
|
|
56
|
+
height: "24"
|
|
57
|
+
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
58
|
+
d: "M3,8H21a1,1,0,0,0,0-2H3A1,1,0,0,0,3,8Zm18,8H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Zm0-5H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Z"
|
|
59
|
+
}));
|
|
60
|
+
|
|
44
61
|
var Dropdown = function Dropdown(props) {
|
|
45
62
|
return /*#__PURE__*/_react["default"].createElement(HeaderDropdown, null, /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], props));
|
|
46
63
|
};
|
|
@@ -65,9 +82,9 @@ var getLogoElement = function getLogoElement(themeInput) {
|
|
|
65
82
|
var DxcHeader = function DxcHeader(_ref) {
|
|
66
83
|
var _ref$underlined = _ref.underlined,
|
|
67
84
|
underlined = _ref$underlined === void 0 ? false : _ref$underlined,
|
|
68
|
-
onClick = _ref.onClick,
|
|
69
85
|
content = _ref.content,
|
|
70
86
|
responsiveContent = _ref.responsiveContent,
|
|
87
|
+
onClick = _ref.onClick,
|
|
71
88
|
margin = _ref.margin,
|
|
72
89
|
padding = _ref.padding,
|
|
73
90
|
_ref$tabIndex = _ref.tabIndex,
|
|
@@ -80,7 +97,7 @@ var DxcHeader = function DxcHeader(_ref) {
|
|
|
80
97
|
refSize = _useState2[0],
|
|
81
98
|
setRefSize = _useState2[1];
|
|
82
99
|
|
|
83
|
-
var _useState3 = (0, _react.useState)(),
|
|
100
|
+
var _useState3 = (0, _react.useState)(false),
|
|
84
101
|
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
|
85
102
|
isResponsive = _useState4[0],
|
|
86
103
|
setIsResponsive = _useState4[1];
|
|
@@ -158,16 +175,16 @@ var DxcHeader = function DxcHeader(_ref) {
|
|
|
158
175
|
tabIndex: tabIndex,
|
|
159
176
|
underlined: underlined,
|
|
160
177
|
onClick: handleMenu
|
|
161
|
-
},
|
|
178
|
+
}, hamburgerIcon, /*#__PURE__*/_react["default"].createElement(HamburguerTitle, null, "Menu"))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(ResponsiveMenu, {
|
|
162
179
|
hasVisibility: isMenuVisible,
|
|
163
180
|
refSize: refSize
|
|
164
181
|
}, /*#__PURE__*/_react["default"].createElement(ResponsiveLogoContainer, null, headerResponsiveLogo), /*#__PURE__*/_react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
|
|
165
182
|
color: colorsTheme.header.menuBackgroundColor
|
|
166
|
-
}, /*#__PURE__*/_react["default"].createElement(ContentContainerComponent, null
|
|
183
|
+
}, /*#__PURE__*/_react["default"].createElement(ContentContainerComponent, null)), /*#__PURE__*/_react["default"].createElement(CloseContainer, {
|
|
167
184
|
tabIndex: tabIndex,
|
|
168
185
|
onClick: handleMenu,
|
|
169
186
|
className: "closeIcon"
|
|
170
|
-
},
|
|
187
|
+
}, closeIcon)), /*#__PURE__*/_react["default"].createElement(Overlay, {
|
|
171
188
|
onClick: handleMenu,
|
|
172
189
|
hasVisibility: isMenuVisible,
|
|
173
190
|
refSize: refSize
|
|
@@ -303,24 +320,5 @@ var Overlay = _styledComponents["default"].div(_templateObject15 || (_templateOb
|
|
|
303
320
|
return props.theme.overlayZindex;
|
|
304
321
|
});
|
|
305
322
|
|
|
306
|
-
DxcHeader.propTypes = {
|
|
307
|
-
underlined: _propTypes["default"].bool,
|
|
308
|
-
onClick: _propTypes["default"].func,
|
|
309
|
-
margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
|
|
310
|
-
top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
311
|
-
bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
312
|
-
left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
313
|
-
right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
|
|
314
|
-
}), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
|
|
315
|
-
padding: _propTypes["default"].oneOfType([_propTypes["default"].shape({
|
|
316
|
-
top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
317
|
-
bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
318
|
-
left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
319
|
-
right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
|
|
320
|
-
}), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
|
|
321
|
-
content: _propTypes["default"].object,
|
|
322
|
-
responsiveContent: _propTypes["default"].func,
|
|
323
|
-
tabIndex: _propTypes["default"].number
|
|
324
|
-
};
|
|
325
323
|
var _default = DxcHeader;
|
|
326
324
|
exports["default"] = _default;
|
package/header/Icons.js
CHANGED
|
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.
|
|
8
|
+
exports.dxcLogo = void 0;
|
|
9
9
|
|
|
10
10
|
var _react = _interopRequireDefault(require("react"));
|
|
11
11
|
|
|
@@ -31,29 +31,4 @@ var dxcLogo = /*#__PURE__*/_react["default"].createElement("svg", {
|
|
|
31
31
|
fill: "#100f0d"
|
|
32
32
|
}))));
|
|
33
33
|
|
|
34
|
-
exports.dxcLogo = dxcLogo;
|
|
35
|
-
|
|
36
|
-
var closeIcon = /*#__PURE__*/_react["default"].createElement("svg", {
|
|
37
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
38
|
-
height: "24",
|
|
39
|
-
viewBox: "0 0 24 24",
|
|
40
|
-
width: "24"
|
|
41
|
-
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
42
|
-
d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
|
|
43
|
-
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
44
|
-
d: "M0 0h24v24H0z",
|
|
45
|
-
fill: "none"
|
|
46
|
-
}));
|
|
47
|
-
|
|
48
|
-
exports.closeIcon = closeIcon;
|
|
49
|
-
|
|
50
|
-
var hamburgerIcon = /*#__PURE__*/_react["default"].createElement("svg", {
|
|
51
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
52
|
-
viewBox: "0 0 24 24",
|
|
53
|
-
width: "24",
|
|
54
|
-
height: "24"
|
|
55
|
-
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
56
|
-
d: "M3,8H21a1,1,0,0,0,0-2H3A1,1,0,0,0,3,8Zm18,8H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Zm0-5H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Z"
|
|
57
|
-
}));
|
|
58
|
-
|
|
59
|
-
exports.hamburgerIcon = hamburgerIcon;
|
|
34
|
+
exports.dxcLogo = dxcLogo;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
3
|
+
declare type Padding = {
|
|
4
|
+
top?: Space;
|
|
5
|
+
bottom?: Space;
|
|
6
|
+
left?: Space;
|
|
7
|
+
right?: Space;
|
|
8
|
+
};
|
|
9
|
+
declare type Props = {
|
|
10
|
+
/**
|
|
11
|
+
* Wether a contrast line should appear at the bottom of the header.
|
|
12
|
+
*/
|
|
13
|
+
underlined?: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* Content showed in the header. Take into account that the component applies styles
|
|
16
|
+
* for the first child in the content, so we recommend the use of React.Fragment
|
|
17
|
+
* to be applied correctly. Otherwise, the styles can be modified.
|
|
18
|
+
*/
|
|
19
|
+
content?: React.ReactNode;
|
|
20
|
+
/**
|
|
21
|
+
* Content showed in responsive version. It receives the close menu handler that can
|
|
22
|
+
* be used to add that functionality when a element is clicked.
|
|
23
|
+
*/
|
|
24
|
+
responsiveContent?: (closeHandler: () => void) => React.ReactNode;
|
|
25
|
+
/**
|
|
26
|
+
* This function will be called when the user clicks the header logo.
|
|
27
|
+
*/
|
|
28
|
+
onClick?: () => void;
|
|
29
|
+
/**
|
|
30
|
+
* Size of the bottom margin to be applied to the header.
|
|
31
|
+
*/
|
|
32
|
+
margin?: Space;
|
|
33
|
+
/**
|
|
34
|
+
* Size of the padding to be applied to the custom area of the component.
|
|
35
|
+
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in
|
|
36
|
+
* order to specify different padding sizes.
|
|
37
|
+
*/
|
|
38
|
+
padding?: Space | Padding;
|
|
39
|
+
/**
|
|
40
|
+
* Value of the tabindex for all interactuable elements, except those inside the
|
|
41
|
+
* custom area.
|
|
42
|
+
*/
|
|
43
|
+
tabIndex?: number;
|
|
44
|
+
};
|
|
45
|
+
export default Props;
|
package/header/types.js
ADDED
package/link/Link.d.ts
ADDED
package/link/Link.js
CHANGED
|
@@ -9,8 +9,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
9
9
|
});
|
|
10
10
|
exports["default"] = void 0;
|
|
11
11
|
|
|
12
|
-
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
13
|
-
|
|
14
12
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
15
13
|
|
|
16
14
|
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
@@ -19,8 +17,6 @@ var _react = _interopRequireDefault(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"));
|
|
@@ -153,7 +149,7 @@ var LinkIcon = _styledComponents["default"].img(_templateObject5 || (_templateOb
|
|
|
153
149
|
return "".concat(props.iconPosition === "before" ? "margin-right" : "margin-left", ": ").concat(props.theme.iconSpacing);
|
|
154
150
|
});
|
|
155
151
|
|
|
156
|
-
var LinkIconContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n ", ";\n overflow: hidden;\n
|
|
152
|
+
var LinkIconContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n ", ";\n overflow: hidden;\n\n img,\n svg {\n height: 100%;\n width: 100%;\n }\n"])), function (props) {
|
|
157
153
|
return props.theme.iconSize;
|
|
158
154
|
}, function (props) {
|
|
159
155
|
return props.theme.iconSize;
|
|
@@ -161,23 +157,5 @@ var LinkIconContainer = _styledComponents["default"].div(_templateObject6 || (_t
|
|
|
161
157
|
return "".concat(props.iconPosition === "before" ? "margin-right" : "margin-left", ": ").concat(props.theme.iconSpacing);
|
|
162
158
|
});
|
|
163
159
|
|
|
164
|
-
DxcLink.propTypes = {
|
|
165
|
-
inheritColor: _propTypes["default"].bool,
|
|
166
|
-
disabled: _propTypes["default"].bool,
|
|
167
|
-
icon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].func]),
|
|
168
|
-
iconSrc: _propTypes["default"].string,
|
|
169
|
-
iconPosition: _propTypes["default"].oneOf(["after", "before"]),
|
|
170
|
-
href: _propTypes["default"].string,
|
|
171
|
-
onClick: _propTypes["default"].func,
|
|
172
|
-
margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
|
|
173
|
-
top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
174
|
-
bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
175
|
-
left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
176
|
-
right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
|
|
177
|
-
}), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
|
|
178
|
-
newWindow: _propTypes["default"].bool,
|
|
179
|
-
text: _propTypes["default"].string,
|
|
180
|
-
tabIndex: _propTypes["default"].number
|
|
181
|
-
};
|
|
182
160
|
var _default = DxcLink;
|
|
183
161
|
exports["default"] = _default;
|
package/link/types.d.ts
ADDED
|
@@ -0,0 +1,74 @@
|
|
|
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 LinkCommonProps = {
|
|
10
|
+
/**
|
|
11
|
+
* If true, the color is inherited from parent.
|
|
12
|
+
*/
|
|
13
|
+
inheritColor?: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* If true, the link is disabled.
|
|
16
|
+
*/
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* @Deprecated Source of the icon.
|
|
20
|
+
*/
|
|
21
|
+
iconSrc?: string;
|
|
22
|
+
/**
|
|
23
|
+
* Indicates the position of the icon in the component.
|
|
24
|
+
*/
|
|
25
|
+
iconPosition?: "before" | "after";
|
|
26
|
+
/**
|
|
27
|
+
* Page to be opened when the user clicks on the link.
|
|
28
|
+
*/
|
|
29
|
+
href?: string;
|
|
30
|
+
/**
|
|
31
|
+
* If true, the page is opened in a new browser tab.
|
|
32
|
+
*/
|
|
33
|
+
newWindow?: boolean;
|
|
34
|
+
/**
|
|
35
|
+
* If defined, the link will be displayed as a button. This
|
|
36
|
+
* function will be called when the user clicks the link.
|
|
37
|
+
*/
|
|
38
|
+
onClick?: () => void;
|
|
39
|
+
/**
|
|
40
|
+
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
41
|
+
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
42
|
+
*/
|
|
43
|
+
margin?: Space | Margin;
|
|
44
|
+
/**
|
|
45
|
+
* Value of the tabindex.
|
|
46
|
+
*/
|
|
47
|
+
tabIndex?: number;
|
|
48
|
+
};
|
|
49
|
+
export declare type LinkTextProps = LinkCommonProps & {
|
|
50
|
+
/**
|
|
51
|
+
* Link text.
|
|
52
|
+
*/
|
|
53
|
+
text: string;
|
|
54
|
+
/**
|
|
55
|
+
* Element used as the icon that will be placed next to the link text.
|
|
56
|
+
*/
|
|
57
|
+
icon?: SVG;
|
|
58
|
+
};
|
|
59
|
+
export declare type LinkIconProps = LinkCommonProps & {
|
|
60
|
+
/**
|
|
61
|
+
* Link text.
|
|
62
|
+
*/
|
|
63
|
+
text?: string;
|
|
64
|
+
/**
|
|
65
|
+
* Element used as the icon that will be placed next to the link text.
|
|
66
|
+
*/
|
|
67
|
+
icon: SVG;
|
|
68
|
+
};
|
|
69
|
+
declare type Overload = {
|
|
70
|
+
(props: LinkTextProps): JSX.Element;
|
|
71
|
+
(props: LinkIconProps): JSX.Element;
|
|
72
|
+
};
|
|
73
|
+
declare type SVG = React.SVGProps<SVGSVGElement> | React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
|
|
74
|
+
export default Overload;
|
package/link/types.js
ADDED
package/package.json
CHANGED