@dxc-technology/halstack-react 0.0.0-84c9364 → 0.0.0-8710cb0
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/box/Box.d.ts +1 -1
- package/box/Box.js +2 -5
- package/box/types.d.ts +0 -4
- package/chip/Chip.stories.tsx +121 -0
- package/dialog/Dialog.stories.tsx +212 -0
- package/footer/types.d.ts +1 -1
- package/header/Header.stories.tsx +162 -0
- package/heading/Heading.d.ts +4 -0
- package/heading/Heading.js +6 -23
- package/heading/types.d.ts +33 -0
- package/heading/types.js +5 -0
- package/package.json +1 -1
- package/slider/Slider.js +4 -4
- package/slider/Slider.stories.tsx +6 -1
- package/wizard/Wizard.stories.jsx +224 -0
- package/heading/index.d.ts +0 -17
package/box/Box.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import BoxPropsType from "./types";
|
|
3
|
-
declare const DxcBox: ({ shadowDepth, display, children, margin, padding, size,
|
|
3
|
+
declare const DxcBox: ({ shadowDepth, display, children, margin, padding, size, }: BoxPropsType) => JSX.Element;
|
|
4
4
|
export default DxcBox;
|
package/box/Box.js
CHANGED
|
@@ -40,9 +40,7 @@ var DxcBox = function DxcBox(_ref) {
|
|
|
40
40
|
margin = _ref.margin,
|
|
41
41
|
padding = _ref.padding,
|
|
42
42
|
_ref$size = _ref.size,
|
|
43
|
-
size = _ref$size === void 0 ? "fitContent" : _ref$size
|
|
44
|
-
_ref$tabIndex = _ref.tabIndex,
|
|
45
|
-
tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
|
|
43
|
+
size = _ref$size === void 0 ? "fitContent" : _ref$size;
|
|
46
44
|
var colorsTheme = (0, _useTheme["default"])();
|
|
47
45
|
return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
48
46
|
theme: colorsTheme.box
|
|
@@ -51,8 +49,7 @@ var DxcBox = function DxcBox(_ref) {
|
|
|
51
49
|
display: display,
|
|
52
50
|
margin: margin,
|
|
53
51
|
padding: padding,
|
|
54
|
-
size: size
|
|
55
|
-
tabIndex: tabIndex
|
|
52
|
+
size: size
|
|
56
53
|
}, /*#__PURE__*/_react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
|
|
57
54
|
color: colorsTheme.box.backgroundColor
|
|
58
55
|
}, children)));
|
package/box/types.d.ts
CHANGED
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { userEvent, within } from "@storybook/testing-library";
|
|
3
|
+
import DxcChip from "./Chip";
|
|
4
|
+
import Title from "../../.storybook/components/Title";
|
|
5
|
+
import ExampleContainer from "../../.storybook/components/ExampleContainer";
|
|
6
|
+
|
|
7
|
+
export default {
|
|
8
|
+
title: "Chip",
|
|
9
|
+
component: DxcChip,
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
const iconSVG = () => {
|
|
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
|
+
|
|
21
|
+
export const Chromatic = () => (
|
|
22
|
+
<>
|
|
23
|
+
<ExampleContainer>
|
|
24
|
+
<Title title="Basic chip" theme="light" level={4} />
|
|
25
|
+
<DxcChip label="Default Chip" />
|
|
26
|
+
</ExampleContainer>
|
|
27
|
+
<ExampleContainer>
|
|
28
|
+
<Title title="Chip with prefix" theme="light" level={4} />
|
|
29
|
+
<DxcChip label="Chip with prefix" prefixIcon={iconSVG} />
|
|
30
|
+
</ExampleContainer>
|
|
31
|
+
<ExampleContainer>
|
|
32
|
+
<Title title="Chip with suffix" theme="light" level={4} />
|
|
33
|
+
<DxcChip label="Chip with suffix" suffixIcon={iconSVG} />
|
|
34
|
+
</ExampleContainer>
|
|
35
|
+
<ExampleContainer>
|
|
36
|
+
<Title title="Chip with prefix and suffix" theme="light" level={4} />
|
|
37
|
+
<DxcChip label="Chip with prefix and suffix" prefixIcon={iconSVG} suffixIcon={iconSVG} />
|
|
38
|
+
</ExampleContainer>
|
|
39
|
+
<ExampleContainer>
|
|
40
|
+
<Title title="Disabled chip" theme="light" level={4} />
|
|
41
|
+
<DxcChip label="Disabled" disabled prefixIcon={iconSVG} suffixIcon={iconSVG} />
|
|
42
|
+
</ExampleContainer>
|
|
43
|
+
<ExampleContainer>
|
|
44
|
+
<Title title="Chip with ellipsis" theme="light" level={4} />
|
|
45
|
+
<DxcChip label="With ellipsis asdfasdf asdf asdfasdf asdf asdfasdf asdfasdf asdf asdf adfasrfasf afsdg afgasfg asdf asdf asdf asdf asdf asdf asdf afdg asfg asdfg asdf asdf asdf asdfasdf asd fas df asd asdf asdf asdfasd fg ssssssssssss ssss" />
|
|
46
|
+
</ExampleContainer>
|
|
47
|
+
<ExampleContainer>
|
|
48
|
+
<Title title="Chip with ellipsis and suffix" theme="light" level={4} />
|
|
49
|
+
<DxcChip
|
|
50
|
+
suffixIcon={iconSVG}
|
|
51
|
+
label="With ellipsis asdfasdf asdf asdfasdf asdf asdfasdf asdfasdf asdf asdf adfasrfasf afsdg afgasfg asdf asdf asdf asdf asdf asdf asdf afdg asfg asdfg asdf asdf asdf asdfasdf asd fas df asd asdf asdf asdfasd fgsss"
|
|
52
|
+
/>
|
|
53
|
+
</ExampleContainer>
|
|
54
|
+
<ExampleContainer>
|
|
55
|
+
<Title title="Chip with ellipsis and prefix" theme="light" level={4} />
|
|
56
|
+
<DxcChip
|
|
57
|
+
prefixIcon={iconSVG}
|
|
58
|
+
label="With ellipsis asdfasdf asdf asdfasdf asdf asdfasdf asdfasdf asdf asdf adfasrfasf afsdg afgasfg asdf asdf asdf asdf asdf asdf asdf afdg asfg asdfg asdf asdf asdf asdfasdf asd fas df asd asdf asdf asdfasd fgsss"
|
|
59
|
+
/>
|
|
60
|
+
</ExampleContainer>
|
|
61
|
+
<ExampleContainer>
|
|
62
|
+
<Title title="Chip with ellipsis, suffix and prefix" theme="light" level={4} />
|
|
63
|
+
<DxcChip
|
|
64
|
+
prefixIcon={iconSVG}
|
|
65
|
+
suffixIcon={iconSVG}
|
|
66
|
+
label="With ellipsis asdfasdf asdf asdfasdf asdf asdfasdf asdfasdf asdf asdf adfasrfasf afsdg afgasfg asdf asdf asdf asdf asdf asdf asdf afdg asfg asdfg asdf asdf asdf asdfasdf asd fas df asd asdf asdf asdfasdf"
|
|
67
|
+
/>
|
|
68
|
+
</ExampleContainer>
|
|
69
|
+
<Title title="Margins" theme="light" level={2} />
|
|
70
|
+
<ExampleContainer>
|
|
71
|
+
<Title title="Xxsmall margin" theme="light" level={4} />
|
|
72
|
+
<DxcChip label="xxsmall" margin="xxsmall" />
|
|
73
|
+
</ExampleContainer>
|
|
74
|
+
<ExampleContainer>
|
|
75
|
+
<Title title="Xsmall margin" theme="light" level={4} />
|
|
76
|
+
<DxcChip label="xsmall" margin="xsmall" />
|
|
77
|
+
</ExampleContainer>
|
|
78
|
+
<ExampleContainer>
|
|
79
|
+
<Title title="Small margin" theme="light" level={4} />
|
|
80
|
+
<DxcChip label="small" margin="small" />
|
|
81
|
+
</ExampleContainer>
|
|
82
|
+
<ExampleContainer>
|
|
83
|
+
<Title title="Medium margin" theme="light" level={4} />
|
|
84
|
+
<DxcChip label="medium" margin="medium" />
|
|
85
|
+
</ExampleContainer>
|
|
86
|
+
<ExampleContainer>
|
|
87
|
+
<Title title="Large margin" theme="light" level={4} />
|
|
88
|
+
<DxcChip label="large" margin="large" />
|
|
89
|
+
</ExampleContainer>
|
|
90
|
+
<ExampleContainer>
|
|
91
|
+
<Title title="Xlarge margin" theme="light" level={4} />
|
|
92
|
+
<DxcChip label="xlarge" margin="xlarge" />
|
|
93
|
+
</ExampleContainer>
|
|
94
|
+
<ExampleContainer>
|
|
95
|
+
<Title title="Xxlarge margin" theme="light" level={4} />
|
|
96
|
+
<DxcChip label="xxlarge" margin="xxlarge" />
|
|
97
|
+
</ExampleContainer>
|
|
98
|
+
</>
|
|
99
|
+
);
|
|
100
|
+
const ChipPrefixFocused = () => (
|
|
101
|
+
<ExampleContainer>
|
|
102
|
+
<Title title="Chip with prefix" theme="light" level={4} />
|
|
103
|
+
<DxcChip label="Chip with prefix" prefixIcon={iconSVG} onClickPrefix={() => {}} />
|
|
104
|
+
</ExampleContainer>
|
|
105
|
+
);
|
|
106
|
+
const ChipSuffixFocused = () => (
|
|
107
|
+
<ExampleContainer>
|
|
108
|
+
<Title title="Chip with suffix" theme="light" level={4} />
|
|
109
|
+
<DxcChip label="Chip with suffix" suffixIcon={iconSVG} onClickSuffix={() => {}} />
|
|
110
|
+
</ExampleContainer>
|
|
111
|
+
);
|
|
112
|
+
|
|
113
|
+
export const PrefixFocused = ChipPrefixFocused.bind({});
|
|
114
|
+
PrefixFocused.play = async ({ canvasElement }) => {
|
|
115
|
+
await userEvent.tab();
|
|
116
|
+
};
|
|
117
|
+
|
|
118
|
+
export const SuffixFocused = ChipSuffixFocused.bind({});
|
|
119
|
+
SuffixFocused.play = async ({ canvasElement }) => {
|
|
120
|
+
await userEvent.tab();
|
|
121
|
+
};
|
|
@@ -0,0 +1,212 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { userEvent, within } from "@storybook/testing-library";
|
|
3
|
+
import DxcDialog from "./Dialog";
|
|
4
|
+
import Title from "../../.storybook/components/Title";
|
|
5
|
+
import ExampleContainer from "../../.storybook/components/ExampleContainer";
|
|
6
|
+
|
|
7
|
+
export default {
|
|
8
|
+
title: "Dialog ",
|
|
9
|
+
component: DxcDialog,
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
export const DefaultDialog = () => (
|
|
13
|
+
<>
|
|
14
|
+
<ExampleContainer expanded={true}>
|
|
15
|
+
<Title title="Default dialog" theme="light" level={4} />
|
|
16
|
+
<DxcDialog>
|
|
17
|
+
{" "}
|
|
18
|
+
<p>
|
|
19
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
|
|
20
|
+
placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
|
|
21
|
+
elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
|
|
22
|
+
tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
|
|
23
|
+
eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
|
|
24
|
+
enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
|
|
25
|
+
fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
|
|
26
|
+
augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
|
|
27
|
+
dignissim, pharetra neque molestie, molestie lectus.
|
|
28
|
+
</p>{" "}
|
|
29
|
+
</DxcDialog>
|
|
30
|
+
</ExampleContainer>
|
|
31
|
+
</>
|
|
32
|
+
);
|
|
33
|
+
|
|
34
|
+
export const DialogWithoutOverlay = () => (
|
|
35
|
+
<ExampleContainer expanded={true}>
|
|
36
|
+
<Title title="Dialog Without Overlay" theme="light" level={4} />
|
|
37
|
+
<DxcDialog overlay={false}>
|
|
38
|
+
{" "}
|
|
39
|
+
<p>
|
|
40
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
|
|
41
|
+
placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
|
|
42
|
+
elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
|
|
43
|
+
tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
|
|
44
|
+
eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
|
|
45
|
+
enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
|
|
46
|
+
fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
|
|
47
|
+
augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
|
|
48
|
+
dignissim, pharetra neque molestie, molestie lectus.
|
|
49
|
+
</p>{" "}
|
|
50
|
+
</DxcDialog>
|
|
51
|
+
</ExampleContainer>
|
|
52
|
+
);
|
|
53
|
+
|
|
54
|
+
export const DialogCloseVisibleFalse = () => (
|
|
55
|
+
<ExampleContainer expanded={true}>
|
|
56
|
+
<Title title="Dialog Close Visible" theme="dark" level={4} />
|
|
57
|
+
<DxcDialog isCloseVisible={false}>
|
|
58
|
+
{" "}
|
|
59
|
+
<p>
|
|
60
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
|
|
61
|
+
placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
|
|
62
|
+
elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
|
|
63
|
+
tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
|
|
64
|
+
eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
|
|
65
|
+
enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
|
|
66
|
+
fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
|
|
67
|
+
augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
|
|
68
|
+
dignissim, pharetra neque molestie, molestie lectus.
|
|
69
|
+
</p>{" "}
|
|
70
|
+
</DxcDialog>
|
|
71
|
+
</ExampleContainer>
|
|
72
|
+
);
|
|
73
|
+
|
|
74
|
+
export const DialogWithXxsmallPadding = () => (
|
|
75
|
+
<ExampleContainer expanded={true}>
|
|
76
|
+
<Title title="Dialog With Xxsmall Padding" theme="light" level={4} />
|
|
77
|
+
<DxcDialog padding={"xxsmall"}>
|
|
78
|
+
{" "}
|
|
79
|
+
<p>
|
|
80
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
|
|
81
|
+
placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
|
|
82
|
+
elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
|
|
83
|
+
tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
|
|
84
|
+
eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
|
|
85
|
+
enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
|
|
86
|
+
fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
|
|
87
|
+
augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
|
|
88
|
+
dignissim, pharetra neque molestie, molestie lectus.
|
|
89
|
+
</p>{" "}
|
|
90
|
+
</DxcDialog>
|
|
91
|
+
</ExampleContainer>
|
|
92
|
+
);
|
|
93
|
+
|
|
94
|
+
export const DialogWithXsmallPadding = () => (
|
|
95
|
+
<ExampleContainer expanded={true}>
|
|
96
|
+
<Title title="Dialog With Xsmall Padding" theme="light" level={4} />
|
|
97
|
+
<DxcDialog padding={"xsmall"}>
|
|
98
|
+
{" "}
|
|
99
|
+
<p>
|
|
100
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
|
|
101
|
+
placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
|
|
102
|
+
elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
|
|
103
|
+
tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
|
|
104
|
+
eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
|
|
105
|
+
enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
|
|
106
|
+
fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
|
|
107
|
+
augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
|
|
108
|
+
dignissim, pharetra neque molestie, molestie lectus.
|
|
109
|
+
</p>{" "}
|
|
110
|
+
</DxcDialog>
|
|
111
|
+
</ExampleContainer>
|
|
112
|
+
);
|
|
113
|
+
|
|
114
|
+
export const DialogWithSmallPadding = () => (
|
|
115
|
+
<ExampleContainer expanded={true}>
|
|
116
|
+
<Title title="Dialog With Small Padding" theme="light" level={4} />
|
|
117
|
+
<DxcDialog padding={"small"}>
|
|
118
|
+
{" "}
|
|
119
|
+
<p>
|
|
120
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
|
|
121
|
+
placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
|
|
122
|
+
elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
|
|
123
|
+
tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
|
|
124
|
+
eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
|
|
125
|
+
enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
|
|
126
|
+
fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
|
|
127
|
+
augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
|
|
128
|
+
dignissim, pharetra neque molestie, molestie lectus.
|
|
129
|
+
</p>{" "}
|
|
130
|
+
</DxcDialog>
|
|
131
|
+
</ExampleContainer>
|
|
132
|
+
);
|
|
133
|
+
|
|
134
|
+
export const DialogWithMediumPadding = () => (
|
|
135
|
+
<ExampleContainer expanded={true}>
|
|
136
|
+
<Title title="Dialog With Medium Padding" theme="light" level={4} />
|
|
137
|
+
<DxcDialog padding={"medium"}>
|
|
138
|
+
{" "}
|
|
139
|
+
<p>
|
|
140
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
|
|
141
|
+
placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
|
|
142
|
+
elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
|
|
143
|
+
tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
|
|
144
|
+
eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
|
|
145
|
+
enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
|
|
146
|
+
fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
|
|
147
|
+
augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
|
|
148
|
+
dignissim, pharetra neque molestie, molestie lectus.
|
|
149
|
+
</p>{" "}
|
|
150
|
+
</DxcDialog>
|
|
151
|
+
</ExampleContainer>
|
|
152
|
+
);
|
|
153
|
+
|
|
154
|
+
export const DialogWithLargePadding = () => (
|
|
155
|
+
<ExampleContainer expanded={true}>
|
|
156
|
+
<Title title="Dialog With Large Padding" theme="light" level={4} />
|
|
157
|
+
<DxcDialog padding={"large"}>
|
|
158
|
+
{" "}
|
|
159
|
+
<p>
|
|
160
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
|
|
161
|
+
placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
|
|
162
|
+
elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
|
|
163
|
+
tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
|
|
164
|
+
eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
|
|
165
|
+
enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
|
|
166
|
+
fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
|
|
167
|
+
augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
|
|
168
|
+
dignissim, pharetra neque molestie, molestie lectus.
|
|
169
|
+
</p>{" "}
|
|
170
|
+
</DxcDialog>
|
|
171
|
+
</ExampleContainer>
|
|
172
|
+
);
|
|
173
|
+
|
|
174
|
+
export const DialogWithXlargePadding = () => (
|
|
175
|
+
<ExampleContainer expanded={true}>
|
|
176
|
+
<Title title="Dialog With Xlarge Padding" theme="light" level={4} />
|
|
177
|
+
<DxcDialog padding={"xlarge"}>
|
|
178
|
+
{" "}
|
|
179
|
+
<p>
|
|
180
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
|
|
181
|
+
placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
|
|
182
|
+
elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
|
|
183
|
+
tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
|
|
184
|
+
eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
|
|
185
|
+
enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
|
|
186
|
+
fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
|
|
187
|
+
augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
|
|
188
|
+
dignissim, pharetra neque molestie, molestie lectus.
|
|
189
|
+
</p>{" "}
|
|
190
|
+
</DxcDialog>
|
|
191
|
+
</ExampleContainer>
|
|
192
|
+
);
|
|
193
|
+
|
|
194
|
+
export const DialogWithXxlargePadding = () => (
|
|
195
|
+
<ExampleContainer expanded={true}>
|
|
196
|
+
<Title title="Dialog With Xxlarge Padding" theme="light" level={4} />
|
|
197
|
+
<DxcDialog padding={"xxlarge"}>
|
|
198
|
+
{" "}
|
|
199
|
+
<p>
|
|
200
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
|
|
201
|
+
placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
|
|
202
|
+
elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
|
|
203
|
+
tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
|
|
204
|
+
eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
|
|
205
|
+
enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
|
|
206
|
+
fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
|
|
207
|
+
augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
|
|
208
|
+
dignissim, pharetra neque molestie, molestie lectus.
|
|
209
|
+
</p>{" "}
|
|
210
|
+
</DxcDialog>
|
|
211
|
+
</ExampleContainer>
|
|
212
|
+
);
|
package/footer/types.d.ts
CHANGED
|
@@ -38,7 +38,7 @@ declare type FooterPropsType = {
|
|
|
38
38
|
* The center section of the footer. Can be used to render custom
|
|
39
39
|
* content in this area.
|
|
40
40
|
*/
|
|
41
|
-
children
|
|
41
|
+
children?: React.ReactNode;
|
|
42
42
|
/**
|
|
43
43
|
* The text that will be displayed as copyright disclaimer.
|
|
44
44
|
*/
|
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import DxcHeader from "./Header";
|
|
3
|
+
import Title from "../../.storybook/components/Title";
|
|
4
|
+
import ExampleContainer from "../../.storybook/components/ExampleContainer";
|
|
5
|
+
import { userEvent, waitFor, within } from "@storybook/testing-library";
|
|
6
|
+
|
|
7
|
+
export default {
|
|
8
|
+
title: "Header",
|
|
9
|
+
component: DxcHeader,
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
const options: any = [
|
|
13
|
+
{
|
|
14
|
+
value: 1,
|
|
15
|
+
label: "Amazon",
|
|
16
|
+
},
|
|
17
|
+
];
|
|
18
|
+
|
|
19
|
+
export const Chromatic = () => (
|
|
20
|
+
<>
|
|
21
|
+
<ExampleContainer>
|
|
22
|
+
<Title title="Default with dropdown" theme="light" level={4} />
|
|
23
|
+
<DxcHeader content={<DxcHeader.Dropdown options={options} label="Default Dropdown" />} />
|
|
24
|
+
</ExampleContainer>
|
|
25
|
+
<ExampleContainer>
|
|
26
|
+
<Title title="Underlined with text" theme="light" level={4} />
|
|
27
|
+
<DxcHeader underlined content={<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>} />
|
|
28
|
+
</ExampleContainer>
|
|
29
|
+
<ExampleContainer>
|
|
30
|
+
<Title title="Responsive" theme="light" level={4} />
|
|
31
|
+
<div style={{ width: "400px" }}>
|
|
32
|
+
<DxcHeader
|
|
33
|
+
responsiveContent={(closeHandler) => <DxcHeader.Dropdown options={options} label="Default Dropdown" />}
|
|
34
|
+
underlined
|
|
35
|
+
/>
|
|
36
|
+
</div>
|
|
37
|
+
</ExampleContainer>
|
|
38
|
+
<Title title="Margins" theme="light" level={2} />
|
|
39
|
+
<ExampleContainer>
|
|
40
|
+
<Title title="Xxsmall margin" theme="light" level={4} />
|
|
41
|
+
<DxcHeader underlined margin="xxsmall" />
|
|
42
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>
|
|
43
|
+
</ExampleContainer>
|
|
44
|
+
<ExampleContainer>
|
|
45
|
+
<Title title="Xsmall margin" theme="light" level={4} />
|
|
46
|
+
<DxcHeader underlined margin="xsmall" />
|
|
47
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>
|
|
48
|
+
</ExampleContainer>
|
|
49
|
+
<ExampleContainer>
|
|
50
|
+
<Title title="Small margin" theme="light" level={4} />
|
|
51
|
+
<DxcHeader underlined margin="small" />
|
|
52
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>
|
|
53
|
+
</ExampleContainer>
|
|
54
|
+
<ExampleContainer>
|
|
55
|
+
<Title title="Medium margin" theme="light" level={4} />
|
|
56
|
+
<DxcHeader underlined margin="medium" />
|
|
57
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>
|
|
58
|
+
</ExampleContainer>
|
|
59
|
+
<ExampleContainer>
|
|
60
|
+
<Title title="Large margin" theme="light" level={4} />
|
|
61
|
+
<DxcHeader underlined margin="large" />
|
|
62
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>
|
|
63
|
+
</ExampleContainer>
|
|
64
|
+
<ExampleContainer>
|
|
65
|
+
<Title title="Xlarge margin" theme="light" level={4} />
|
|
66
|
+
<DxcHeader underlined margin="xlarge" />
|
|
67
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>
|
|
68
|
+
</ExampleContainer>
|
|
69
|
+
<ExampleContainer>
|
|
70
|
+
<Title title="Xxlarge margin" theme="light" level={4} />
|
|
71
|
+
<DxcHeader underlined margin="xxlarge" />
|
|
72
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>
|
|
73
|
+
</ExampleContainer>
|
|
74
|
+
|
|
75
|
+
<Title title="Paddings" theme="light" level={2} />
|
|
76
|
+
<ExampleContainer>
|
|
77
|
+
<Title title="Xxsmall padding" theme="light" level={4} />
|
|
78
|
+
<DxcHeader underlined padding="xxsmall" />
|
|
79
|
+
</ExampleContainer>
|
|
80
|
+
<ExampleContainer>
|
|
81
|
+
<Title title="Xsmall padding" theme="light" level={4} />
|
|
82
|
+
<DxcHeader underlined padding="xsmall" />
|
|
83
|
+
</ExampleContainer>
|
|
84
|
+
<ExampleContainer>
|
|
85
|
+
<Title title="Small padding" theme="light" level={4} />
|
|
86
|
+
<DxcHeader underlined padding="small" />
|
|
87
|
+
</ExampleContainer>
|
|
88
|
+
<ExampleContainer>
|
|
89
|
+
<Title title="Medium padding" theme="light" level={4} />
|
|
90
|
+
<DxcHeader underlined padding="medium" />
|
|
91
|
+
</ExampleContainer>
|
|
92
|
+
<ExampleContainer>
|
|
93
|
+
<Title title="Large padding" theme="light" level={4} />
|
|
94
|
+
<DxcHeader underlined padding="large" />
|
|
95
|
+
</ExampleContainer>
|
|
96
|
+
<ExampleContainer>
|
|
97
|
+
<Title title="Xlarge padding" theme="light" level={4} />
|
|
98
|
+
<DxcHeader underlined padding="xlarge" />
|
|
99
|
+
</ExampleContainer>
|
|
100
|
+
<ExampleContainer>
|
|
101
|
+
<Title title="Xxlarge padding" theme="light" level={4} />
|
|
102
|
+
<DxcHeader underlined padding="xxlarge" />
|
|
103
|
+
</ExampleContainer>
|
|
104
|
+
</>
|
|
105
|
+
);
|
|
106
|
+
|
|
107
|
+
const RespHeader = () => (
|
|
108
|
+
<ExampleContainer>
|
|
109
|
+
<Title title="Responsive" theme="light" level={4} />
|
|
110
|
+
<div style={{ maxWidth: "400px" }}>
|
|
111
|
+
<DxcHeader
|
|
112
|
+
responsiveContent={(closeHandler) => <DxcHeader.Dropdown options={options} label="Default Dropdown" />}
|
|
113
|
+
underlined
|
|
114
|
+
/>
|
|
115
|
+
</div>
|
|
116
|
+
</ExampleContainer>
|
|
117
|
+
);
|
|
118
|
+
|
|
119
|
+
const RespHeaderFocus = () => (
|
|
120
|
+
<ExampleContainer pseudoState="pseudo-focus">
|
|
121
|
+
<Title title="Responsive" theme="light" level={4} />
|
|
122
|
+
<div style={{ maxWidth: "400px" }}>
|
|
123
|
+
<DxcHeader
|
|
124
|
+
responsiveContent={(closeHandler) => <p>Lorem ipsum dolor sit amet.</p>}
|
|
125
|
+
underlined
|
|
126
|
+
/>
|
|
127
|
+
</div>
|
|
128
|
+
</ExampleContainer>
|
|
129
|
+
);
|
|
130
|
+
|
|
131
|
+
const RespHeaderHover = () => (
|
|
132
|
+
<ExampleContainer pseudoState="pseudo-hover">
|
|
133
|
+
<Title title="Responsive" theme="light" level={4} />
|
|
134
|
+
<div style={{ maxWidth: "400px" }}>
|
|
135
|
+
<DxcHeader
|
|
136
|
+
responsiveContent={(closeHandler) => <p>Lorem ipsum dolor sit amet.</p>}
|
|
137
|
+
underlined
|
|
138
|
+
/>
|
|
139
|
+
</div>
|
|
140
|
+
</ExampleContainer>
|
|
141
|
+
);
|
|
142
|
+
|
|
143
|
+
export const ResponsiveHeader = RespHeader.bind({});
|
|
144
|
+
ResponsiveHeader.play = async ({ canvasElement }) => {
|
|
145
|
+
const canvas = within(canvasElement);
|
|
146
|
+
await waitFor(() => canvas.findByText("Menu"));
|
|
147
|
+
await userEvent.click(canvas.getByText("Menu"));
|
|
148
|
+
};
|
|
149
|
+
|
|
150
|
+
export const ResponsiveHeaderFocus = RespHeaderFocus.bind({});
|
|
151
|
+
ResponsiveHeaderFocus.play = async ({ canvasElement }) => {
|
|
152
|
+
const canvas = within(canvasElement);
|
|
153
|
+
await waitFor(() => canvas.findByText("Menu"));
|
|
154
|
+
await userEvent.click(canvas.getByText("Menu"));
|
|
155
|
+
};
|
|
156
|
+
|
|
157
|
+
export const ResponsiveHeaderHover = RespHeaderHover.bind({});
|
|
158
|
+
ResponsiveHeaderHover.play = async ({ canvasElement }) => {
|
|
159
|
+
const canvas = within(canvasElement);
|
|
160
|
+
await waitFor(() => canvas.findByText("Menu"));
|
|
161
|
+
await userEvent.click(canvas.getByText("Menu"));
|
|
162
|
+
};
|
package/heading/Heading.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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
@@ -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"));
|
|
@@ -37,8 +33,7 @@ var DxcHeading = function DxcHeading(_ref) {
|
|
|
37
33
|
_ref$text = _ref.text,
|
|
38
34
|
text = _ref$text === void 0 ? "" : _ref$text,
|
|
39
35
|
as = _ref.as,
|
|
40
|
-
|
|
41
|
-
weight = _ref$weight === void 0 ? "" : _ref$weight,
|
|
36
|
+
weight = _ref.weight,
|
|
42
37
|
margin = _ref.margin;
|
|
43
38
|
var colorsTheme = (0, _useTheme["default"])();
|
|
44
39
|
|
|
@@ -51,19 +46,19 @@ var DxcHeading = function DxcHeading(_ref) {
|
|
|
51
46
|
}, /*#__PURE__*/_react["default"].createElement(HeadingContainer, {
|
|
52
47
|
margin: margin
|
|
53
48
|
}, level === 1 ? /*#__PURE__*/_react["default"].createElement(HeadingLevel1, {
|
|
54
|
-
as: checkValidAs(
|
|
49
|
+
as: checkValidAs(),
|
|
55
50
|
weight: weight
|
|
56
51
|
}, text) : level === 2 ? /*#__PURE__*/_react["default"].createElement(HeadingLevel2, {
|
|
57
|
-
as: checkValidAs(
|
|
52
|
+
as: checkValidAs(),
|
|
58
53
|
weight: weight
|
|
59
54
|
}, text) : level === 3 ? /*#__PURE__*/_react["default"].createElement(HeadingLevel3, {
|
|
60
|
-
as: checkValidAs(
|
|
55
|
+
as: checkValidAs(),
|
|
61
56
|
weight: weight
|
|
62
57
|
}, text) : level === 4 ? /*#__PURE__*/_react["default"].createElement(HeadingLevel4, {
|
|
63
|
-
as: checkValidAs(
|
|
58
|
+
as: checkValidAs(),
|
|
64
59
|
weight: weight
|
|
65
60
|
}, text) : /*#__PURE__*/_react["default"].createElement(HeadingLevel5, {
|
|
66
|
-
as: checkValidAs(
|
|
61
|
+
as: checkValidAs(),
|
|
67
62
|
weight: weight
|
|
68
63
|
}, text)));
|
|
69
64
|
};
|
|
@@ -160,17 +155,5 @@ var HeadingLevel5 = _styledComponents["default"].h5(_templateObject6 || (_templa
|
|
|
160
155
|
return props.theme.level5FontColor;
|
|
161
156
|
});
|
|
162
157
|
|
|
163
|
-
DxcHeading.propTypes = {
|
|
164
|
-
level: _propTypes["default"].number,
|
|
165
|
-
text: _propTypes["default"].string,
|
|
166
|
-
as: _propTypes["default"].oneOf(["h1", "h2", "h3", "h4", "h5"]),
|
|
167
|
-
weight: _propTypes["default"].oneOf(["light", "normal", "bold", ""]),
|
|
168
|
-
margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
|
|
169
|
-
top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
170
|
-
bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
171
|
-
left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
172
|
-
right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
|
|
173
|
-
}), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])
|
|
174
|
-
};
|
|
175
158
|
var _default = DxcHeading;
|
|
176
159
|
exports["default"] = _default;
|
|
@@ -0,0 +1,33 @@
|
|
|
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
|
+
* Defines the heading level from 1 to 5. The styles of the heading are applied according to the level.
|
|
11
|
+
* The html tag of the heading will be the one specified in the 'as' prop.
|
|
12
|
+
* If 'as' is not specified, the html tag of the heading is the one specified in the 'level' prop.
|
|
13
|
+
*/
|
|
14
|
+
level?: 1 | 2 | 3 | 4 | 5;
|
|
15
|
+
/**
|
|
16
|
+
* Heading text.
|
|
17
|
+
*/
|
|
18
|
+
text: string;
|
|
19
|
+
/**
|
|
20
|
+
* Specifies the html tag of the heading.
|
|
21
|
+
*/
|
|
22
|
+
as?: "h1" | "h2" | "h3" | "h4" | "h5";
|
|
23
|
+
/**
|
|
24
|
+
* Modifies the default weight of the heading.
|
|
25
|
+
*/
|
|
26
|
+
weight?: "light" | "normal" | "bold";
|
|
27
|
+
/**
|
|
28
|
+
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
29
|
+
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
30
|
+
*/
|
|
31
|
+
margin?: Space | Margin;
|
|
32
|
+
};
|
|
33
|
+
export default Props;
|
package/heading/types.js
ADDED
package/package.json
CHANGED
package/slider/Slider.js
CHANGED
|
@@ -150,7 +150,7 @@ var DxcSlider = function DxcSlider(_ref) {
|
|
|
150
150
|
};
|
|
151
151
|
|
|
152
152
|
var sizes = {
|
|
153
|
-
medium: "
|
|
153
|
+
medium: "360px",
|
|
154
154
|
large: "480px",
|
|
155
155
|
fillParent: "100%"
|
|
156
156
|
};
|
|
@@ -201,7 +201,7 @@ var HelperText = _styledComponents["default"].span(_templateObject3 || (_templat
|
|
|
201
201
|
return props.theme.helperTextLineHeight;
|
|
202
202
|
});
|
|
203
203
|
|
|
204
|
-
var SliderContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n height: 48px;\n align-items: center;\n\n .
|
|
204
|
+
var SliderContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n height: 48px;\n align-items: center;\n\n .MuiSlider-root {\n min-width: 15rem;\n }\n .MuiSlider-container {\n padding: 30px 24px;\n }\n .MuiSlider-root.Mui-disabled {\n color: ", ";\n cursor: not-allowed;\n }\n .Mui-disabled {\n & .MuiSlider-thumb {\n height: ", ";\n width: ", ";\n background-color: ", ";\n top: ", ";\n }\n & .MuiSlider-track {\n background-color: ", ";\n }\n & .MuiSlider-rail {\n background-color: ", ";\n }\n & > .MuiSlider-mark.MuiSlider-markActive {\n background-color: ", " !important;\n }\n & > .MuiSlider-mark {\n background-color: ", ";\n height: ", ";\n width: ", ";\n border-radius: 18px;\n top: ", ";\n }\n }\n .MuiSlider-thumb {\n height: ", ";\n width: ", ";\n background-color: ", ";\n top: ", ";\n border-radius: 9999px;\n\n :hover,\n &.Mui-focusVisible {\n box-shadow: none;\n }\n &.MuiSlider-active {\n box-shadow: none;\n }\n :focus {\n outline: ", "\n auto 1px;\n outline-offset: 2px;\n background-color: ", ";\n }\n :hover {\n background-color: ", ";\n transform: scale(", ");\n transform-origin: center;\n height: ", ";\n width: ", ";\n top: ", ";\n }\n :active {\n background-color: ", ";\n transform: scale(", ");\n transform-origin: center;\n }\n }\n .MuiSlider-track {\n background-color: ", ";\n height: ", ";\n top: ", ";\n border-radius: 9999px;\n }\n .MuiSlider-track.MuiSlider-trackAfter {\n background-color: ", ";\n }\n .MuiSlider-rail {\n background-color: ", ";\n height: ", ";\n top: ", ";\n }\n .MuiSlider-mark.MuiSlider-markActive {\n background-color: ", ";\n }\n .MuiSlider-mark {\n background-color: ", ";\n height: ", ";\n width: ", ";\n border-radius: 18px;\n top: ", ";\n }\n"])), function (props) {
|
|
205
205
|
return props.backgroundType === "dark" ? props.theme.disabledThumbBackgroundColorOnDark : props.theme.disabledThumbBackgroundColor;
|
|
206
206
|
}, function (props) {
|
|
207
207
|
return props.theme.thumbHeight;
|
|
@@ -277,7 +277,7 @@ var SliderContainer = _styledComponents["default"].div(_templateObject4 || (_tem
|
|
|
277
277
|
return props.theme.tickVerticalPosition;
|
|
278
278
|
});
|
|
279
279
|
|
|
280
|
-
var MinLabelContainer = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n margin-right: ", ";\n"])), function (props) {
|
|
280
|
+
var MinLabelContainer = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n white-space: nowrap;\n margin-right: ", ";\n"])), function (props) {
|
|
281
281
|
return props.disabled ? props.theme.disabledLimitValuesFontColor : props.backgroundType === "dark" ? props.theme.limitValuesFontColorOnDark : props.theme.limitValuesFontColor;
|
|
282
282
|
}, function (props) {
|
|
283
283
|
return props.theme.fontFamily;
|
|
@@ -293,7 +293,7 @@ var MinLabelContainer = _styledComponents["default"].span(_templateObject5 || (_
|
|
|
293
293
|
return props.theme.floorLabelMarginRight;
|
|
294
294
|
});
|
|
295
295
|
|
|
296
|
-
var MaxLabelContainer = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n margin-left: ", ";\n"])), function (props) {
|
|
296
|
+
var MaxLabelContainer = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n white-space: nowrap;\n margin-left: ", ";\n"])), function (props) {
|
|
297
297
|
return props.disabled ? props.theme.disabledLimitValuesFontColor : props.backgroundType === "dark" ? props.theme.limitValuesFontColorOnDark : props.theme.limitValuesFontColor;
|
|
298
298
|
}, function (props) {
|
|
299
299
|
return props.theme.fontFamily;
|
|
@@ -4,13 +4,14 @@ import { BackgroundColorProvider } from "../BackgroundColorContext";
|
|
|
4
4
|
import Title from "../../.storybook/components/Title";
|
|
5
5
|
import ExampleContainer from "../../.storybook/components/ExampleContainer";
|
|
6
6
|
import DarkContainer from "../../.storybook/components/DarkSection";
|
|
7
|
-
import { userEvent, within } from "@storybook/testing-library";
|
|
8
7
|
|
|
9
8
|
export default {
|
|
10
9
|
title: "Slider",
|
|
11
10
|
component: DxcSlider,
|
|
12
11
|
};
|
|
13
12
|
|
|
13
|
+
const labelFormat = (value) => `${value}E100000000000000000000000`;
|
|
14
|
+
|
|
14
15
|
export const Chromatic = () => (
|
|
15
16
|
<>
|
|
16
17
|
<Title title="States" theme="light" level={2} />
|
|
@@ -168,5 +169,9 @@ export const Chromatic = () => (
|
|
|
168
169
|
<Title title="FillParent" theme="light" level={4} />
|
|
169
170
|
<DxcSlider label="FillParent" size="fillParent" />
|
|
170
171
|
</ExampleContainer>
|
|
172
|
+
<ExampleContainer>
|
|
173
|
+
<Title title="Large limit values labels" theme="light" level={4} />
|
|
174
|
+
<DxcSlider label="Slider" helperText="Help message" showLimitsValues labelFormatCallback={labelFormat} size="large" />
|
|
175
|
+
</ExampleContainer>
|
|
171
176
|
</>
|
|
172
177
|
);
|
|
@@ -0,0 +1,224 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import DxcWizard from "./Wizard";
|
|
3
|
+
import Title from "../../.storybook/components/Title";
|
|
4
|
+
import ExampleContainer from "../../.storybook/components/ExampleContainer";
|
|
5
|
+
import { userEvent, within } from "@storybook/testing-library";
|
|
6
|
+
|
|
7
|
+
export default {
|
|
8
|
+
title: "Wizard",
|
|
9
|
+
component: DxcWizard,
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
const favoriteSVG = () => {
|
|
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
|
+
|
|
21
|
+
const largeIcon = () => {
|
|
22
|
+
return (
|
|
23
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 0 24 24" width="48px" fill="currentColor">
|
|
24
|
+
<path d="M0 0h24v24H0z" fill="none" />
|
|
25
|
+
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
|
|
26
|
+
</svg>
|
|
27
|
+
);
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
const stepWithLabel = [
|
|
31
|
+
{
|
|
32
|
+
label: "First step",
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
label: "Second step",
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
label: "Third step",
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
label: "Forth step",
|
|
42
|
+
},
|
|
43
|
+
];
|
|
44
|
+
|
|
45
|
+
const stepWithLabelDescription = [
|
|
46
|
+
{
|
|
47
|
+
label: "First step",
|
|
48
|
+
description: "Description",
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
label: "Second step",
|
|
52
|
+
description: "Description",
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
label: "Third step",
|
|
56
|
+
description: "Description",
|
|
57
|
+
valid: true,
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
label: "Forth step",
|
|
61
|
+
description: "Description",
|
|
62
|
+
valid: false,
|
|
63
|
+
},
|
|
64
|
+
];
|
|
65
|
+
|
|
66
|
+
const stepWithLongDescription = [
|
|
67
|
+
{
|
|
68
|
+
label: "First step",
|
|
69
|
+
description:
|
|
70
|
+
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
label: "Second step",
|
|
74
|
+
description:
|
|
75
|
+
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
label: "Third step",
|
|
79
|
+
description:
|
|
80
|
+
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",
|
|
81
|
+
},
|
|
82
|
+
];
|
|
83
|
+
|
|
84
|
+
const stepDisabled = [
|
|
85
|
+
{
|
|
86
|
+
label: "First step",
|
|
87
|
+
description: "Description",
|
|
88
|
+
disabled: true,
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
label: "Second step",
|
|
92
|
+
description: "Description",
|
|
93
|
+
icon: favoriteSVG,
|
|
94
|
+
disabled: true,
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
label: "Third step",
|
|
98
|
+
description: "Description",
|
|
99
|
+
disabled: true,
|
|
100
|
+
valid: true,
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
label: "Forth step",
|
|
104
|
+
description: "Description",
|
|
105
|
+
valid: false,
|
|
106
|
+
disabled: true,
|
|
107
|
+
},
|
|
108
|
+
];
|
|
109
|
+
|
|
110
|
+
const stepIcons = [
|
|
111
|
+
{
|
|
112
|
+
label: "First step",
|
|
113
|
+
icon: favoriteSVG,
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
label: "Second step",
|
|
117
|
+
icon: favoriteSVG,
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
label: "Third step",
|
|
121
|
+
icon: favoriteSVG,
|
|
122
|
+
},
|
|
123
|
+
];
|
|
124
|
+
|
|
125
|
+
const stepLargeIcons = [
|
|
126
|
+
{
|
|
127
|
+
label: "First step",
|
|
128
|
+
icon: largeIcon,
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
label: "Second step",
|
|
132
|
+
icon: largeIcon,
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
label: "Third step",
|
|
136
|
+
icon: largeIcon,
|
|
137
|
+
},
|
|
138
|
+
];
|
|
139
|
+
|
|
140
|
+
export const Chromatic = () => (
|
|
141
|
+
<>
|
|
142
|
+
<ExampleContainer>
|
|
143
|
+
<Title title="Current step in the third step, labels and description" theme="light" level={4} />
|
|
144
|
+
<DxcWizard currentStep={2} steps={stepWithLabelDescription}></DxcWizard>
|
|
145
|
+
<Title title="With long description in horizontal" theme="light" level={4} />
|
|
146
|
+
<DxcWizard steps={stepWithLongDescription}></DxcWizard>
|
|
147
|
+
<Title title="With long description in vertical" theme="light" level={4} />
|
|
148
|
+
<DxcWizard mode="vertical" steps={stepWithLongDescription}></DxcWizard>
|
|
149
|
+
<Title title="Disabled steps" theme="light" level={4} />
|
|
150
|
+
<DxcWizard steps={stepDisabled}></DxcWizard>
|
|
151
|
+
<Title title="With icons" theme="light" level={4} />
|
|
152
|
+
<DxcWizard steps={stepIcons}></DxcWizard>
|
|
153
|
+
<Title title="With large icons" theme="light" level={4} />
|
|
154
|
+
<DxcWizard steps={stepLargeIcons}></DxcWizard>
|
|
155
|
+
</ExampleContainer>
|
|
156
|
+
<Title title="Margins horizontal" theme="light" level={2} />
|
|
157
|
+
<ExampleContainer>
|
|
158
|
+
<Title title="Xxsmall margin" theme="light" level={4} />
|
|
159
|
+
<DxcWizard margin="xxsmall" steps={stepWithLabel}></DxcWizard>
|
|
160
|
+
</ExampleContainer>
|
|
161
|
+
<ExampleContainer>
|
|
162
|
+
<Title title="Xsmall margin" theme="light" level={4} />
|
|
163
|
+
<DxcWizard margin="xsmall" steps={stepWithLabel}></DxcWizard>
|
|
164
|
+
</ExampleContainer>
|
|
165
|
+
<ExampleContainer>
|
|
166
|
+
<Title title="Small margin" theme="light" level={4} />
|
|
167
|
+
<DxcWizard margin="small" steps={stepWithLabel}></DxcWizard>
|
|
168
|
+
</ExampleContainer>
|
|
169
|
+
<ExampleContainer>
|
|
170
|
+
<Title title="Medium margin" theme="light" level={4} />
|
|
171
|
+
<DxcWizard margin="medium" steps={stepWithLabel}></DxcWizard>
|
|
172
|
+
</ExampleContainer>
|
|
173
|
+
<ExampleContainer>
|
|
174
|
+
<Title title="Large margin" theme="light" level={4} />
|
|
175
|
+
<DxcWizard margin="large" steps={stepWithLabel}></DxcWizard>
|
|
176
|
+
</ExampleContainer>
|
|
177
|
+
<ExampleContainer>
|
|
178
|
+
<Title title="Xlarge margin" theme="light" level={4} />
|
|
179
|
+
<DxcWizard margin="xlarge" steps={stepWithLabel}></DxcWizard>
|
|
180
|
+
</ExampleContainer>
|
|
181
|
+
<ExampleContainer>
|
|
182
|
+
<Title title="Xxlarge margin" theme="light" level={4} />
|
|
183
|
+
<DxcWizard margin="xxlarge" steps={stepWithLabel}></DxcWizard>
|
|
184
|
+
</ExampleContainer>
|
|
185
|
+
<Title title="Margins vertical" theme="light" level={2} />
|
|
186
|
+
<ExampleContainer>
|
|
187
|
+
<Title title="Xxsmall margin" theme="light" level={4} />
|
|
188
|
+
<DxcWizard mode="vertical" margin="xxsmall" steps={stepWithLabelDescription}></DxcWizard>
|
|
189
|
+
</ExampleContainer>
|
|
190
|
+
<ExampleContainer>
|
|
191
|
+
<Title title="Xsmall margin" theme="light" level={4} />
|
|
192
|
+
<DxcWizard mode="vertical" margin="xsmall" steps={stepWithLabel}></DxcWizard>
|
|
193
|
+
</ExampleContainer>
|
|
194
|
+
<ExampleContainer>
|
|
195
|
+
<Title title="Small margin" theme="light" level={4} />
|
|
196
|
+
<DxcWizard mode="vertical" margin="small" steps={stepWithLabel}></DxcWizard>
|
|
197
|
+
</ExampleContainer>
|
|
198
|
+
<ExampleContainer>
|
|
199
|
+
<Title title="Medium margin" theme="light" level={4} />
|
|
200
|
+
<DxcWizard mode="vertical" margin="medium" steps={stepWithLabel}></DxcWizard>
|
|
201
|
+
</ExampleContainer>
|
|
202
|
+
<ExampleContainer>
|
|
203
|
+
<Title title="Large margin" theme="light" level={4} />
|
|
204
|
+
<DxcWizard mode="vertical" margin="large" steps={stepWithLabel}></DxcWizard>
|
|
205
|
+
</ExampleContainer>
|
|
206
|
+
<ExampleContainer>
|
|
207
|
+
<Title title="Xlarge margin" theme="light" level={4} />
|
|
208
|
+
<DxcWizard mode="vertical" margin="xlarge" steps={stepWithLabel}></DxcWizard>
|
|
209
|
+
</ExampleContainer>
|
|
210
|
+
<ExampleContainer>
|
|
211
|
+
<Title title="Xxlarge margin" theme="light" level={4} />
|
|
212
|
+
<DxcWizard mode="vertical" margin="xxlarge" steps={stepWithLabel}></DxcWizard>
|
|
213
|
+
</ExampleContainer>
|
|
214
|
+
</>
|
|
215
|
+
);
|
|
216
|
+
|
|
217
|
+
const WizardSelected = () => <DxcWizard steps={stepWithLabel}></DxcWizard>;
|
|
218
|
+
|
|
219
|
+
export const WizardStepActived = WizardSelected.bind({});
|
|
220
|
+
WizardStepActived.play = async ({ canvasElement }) => {
|
|
221
|
+
const canvas = within(canvasElement);
|
|
222
|
+
const option = canvas.getByText("Third step");
|
|
223
|
+
await userEvent.click(option);
|
|
224
|
+
};
|
package/heading/index.d.ts
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
2
|
-
type Margin = {
|
|
3
|
-
top?: Space;
|
|
4
|
-
bottom?: Space;
|
|
5
|
-
left?: Space;
|
|
6
|
-
right?: Space;
|
|
7
|
-
};
|
|
8
|
-
|
|
9
|
-
type Props = {
|
|
10
|
-
level?: 1 | 2 | 3 | 4 | 5;
|
|
11
|
-
text?: string;
|
|
12
|
-
as?: "h1" | "h2" | "h3" | "h4" | "h5";
|
|
13
|
-
weight?: "light" | "normal" | "bold";
|
|
14
|
-
margin?: Space | Margin;
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
export default function DxcHeading(props: Props): JSX.Element;
|