@dxc-technology/halstack-react 0.0.0-84c9364 → 0.0.0-850ec24

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.
Files changed (35) hide show
  1. package/alert/types.d.ts +1 -1
  2. package/box/Box.d.ts +1 -1
  3. package/box/Box.js +2 -5
  4. package/box/types.d.ts +0 -4
  5. package/card/Card.js +4 -5
  6. package/card/Card.stories.tsx +201 -0
  7. package/card/ice-cream.jpg +0 -0
  8. package/card/types.d.ts +4 -6
  9. package/checkbox/types.d.ts +1 -1
  10. package/chip/Chip.stories.tsx +121 -0
  11. package/dialog/Dialog.stories.tsx +212 -0
  12. package/file-input/FileInput.d.ts +4 -0
  13. package/file-input/FileInput.js +7 -28
  14. package/file-input/FileItem.d.ts +14 -0
  15. package/file-input/FileItem.js +4 -15
  16. package/file-input/types.d.ts +87 -0
  17. package/file-input/types.js +5 -0
  18. package/footer/types.d.ts +1 -1
  19. package/header/Header.stories.tsx +162 -0
  20. package/header/types.d.ts +4 -2
  21. package/heading/Heading.d.ts +4 -0
  22. package/heading/Heading.js +6 -23
  23. package/heading/Heading.stories.tsx +53 -0
  24. package/heading/types.d.ts +33 -0
  25. package/heading/types.js +5 -0
  26. package/link/Link.js +2 -2
  27. package/link/Link.stories.tsx +76 -0
  28. package/package.json +1 -1
  29. package/radio/types.d.ts +2 -2
  30. package/slider/Slider.js +4 -4
  31. package/slider/Slider.stories.tsx +6 -1
  32. package/tabs/types.d.ts +2 -3
  33. package/wizard/Wizard.stories.jsx +224 -0
  34. package/file-input/index.d.ts +0 -81
  35. package/heading/index.d.ts +0 -17
package/alert/types.d.ts CHANGED
@@ -38,7 +38,7 @@ declare type Props = {
38
38
  */
39
39
  margin?: Space | Margin;
40
40
  /**
41
- * Size of the component ('small' | 'medium' | 'large' | 'fillParent' | 'fitContent').
41
+ * Size of the component.
42
42
  */
43
43
  size?: "small" | "medium" | "large" | "fillParent" | "fitContent";
44
44
  /**
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, tabIndex, }: BoxPropsType) => JSX.Element;
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
@@ -39,9 +39,5 @@ declare type Props = {
39
39
  * Size of the component.
40
40
  */
41
41
  size?: "small" | "medium" | "large" | "fillParent" | "fitContent";
42
- /**
43
- * Value of the tabindex attribute.
44
- */
45
- tabIndex?: number;
46
42
  };
47
43
  export default Props;
package/card/Card.js CHANGED
@@ -47,7 +47,7 @@ var DxcCard = function DxcCard(_ref) {
47
47
  _ref$tabIndex = _ref.tabIndex,
48
48
  tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
49
49
  _ref$outlined = _ref.outlined,
50
- outlined = _ref$outlined === void 0 ? false : _ref$outlined,
50
+ outlined = _ref$outlined === void 0 ? true : _ref$outlined,
51
51
  children = _ref.children;
52
52
  var colorsTheme = (0, _useTheme["default"])();
53
53
 
@@ -57,12 +57,11 @@ var DxcCard = function DxcCard(_ref) {
57
57
  changeIsHovered = _useState2[1];
58
58
 
59
59
  var tagContent = /*#__PURE__*/_react["default"].createElement(_Box["default"], {
60
- shadowDepth: outlined ? 0 : isHovered && (onClick || linkHref) ? 2 : 1
60
+ shadowDepth: !outlined ? 0 : isHovered && (onClick || linkHref) ? 2 : 1
61
61
  }, /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
62
62
  theme: colorsTheme.card
63
63
  }, /*#__PURE__*/_react["default"].createElement(CardContainer, {
64
64
  hasAction: onClick || linkHref,
65
- outlined: outlined,
66
65
  imagePosition: imagePosition
67
66
  }, imageSrc && /*#__PURE__*/_react["default"].createElement(ImageContainer, {
68
67
  imageBgColor: imageBgColor
@@ -91,7 +90,7 @@ var DxcCard = function DxcCard(_ref) {
91
90
  }, tagContent) || tagContent);
92
91
  };
93
92
 
94
- var StyledDxcCard = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n cursor: ", ";\n outline: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"])), function (_ref2) {
93
+ var StyledDxcCard = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n cursor: ", ";\n outline: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n\n :focus {\n outline: #0095ff auto 1px;\n }\n"])), function (_ref2) {
95
94
  var hasAction = _ref2.hasAction;
96
95
  return hasAction && "pointer" || "unset";
97
96
  }, function (_ref3) {
@@ -126,7 +125,7 @@ var CardContainer = _styledComponents["default"].div(_templateObject2 || (_templ
126
125
  return hasAction ? "" : "unset";
127
126
  });
128
127
 
129
- var StyledLink = _styledComponents["default"].a(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n cursor: pointer;\n text-decoration: none;\n"])));
128
+ var StyledLink = _styledComponents["default"].a(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n cursor: pointer;\n text-decoration: none;\n\n :focus {\n outline-color: #0095ff;\n }\n"])));
130
129
 
131
130
  var TagImage = _styledComponents["default"].img(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n height: ", ";\n width: ", ";\n object-fit: ", ";\n"])), function (_ref11) {
132
131
  var imagePadding = _ref11.imagePadding;
package/card/Card.stories.tsx ADDED
@@ -0,0 +1,201 @@
1
+ import React from "react";
2
+ import Title from "../../.storybook/components/Title";
3
+ import ExampleContainer from "../../.storybook/components/ExampleContainer";
4
+ import DxcCard from "./Card";
5
+ import imagePath from "./ice-cream.jpg";
6
+ import { userEvent, within } from "@storybook/testing-library";
7
+
8
+ export default {
9
+ title: "Card",
10
+ component: DxcCard,
11
+ };
12
+
13
+ const Card = () => (
14
+ <>
15
+ <Title title="Default" theme="light" level={4} />
16
+ <ExampleContainer>
17
+ <DxcCard>Default</DxcCard>
18
+ </ExampleContainer>
19
+ <Title title="Not outlined" theme="light" level={4} />
20
+ <ExampleContainer>
21
+ <DxcCard outlined={false}>Not outlined</DxcCard>
22
+ </ExampleContainer>
23
+ <Title title="Default with link" theme="light" level={4} />
24
+ <ExampleContainer>
25
+ <DxcCard linkHref="https://www.dxc.com">Default with link</DxcCard>
26
+ </ExampleContainer>
27
+ <Title title="Focused default with link" theme="light" level={4} />
28
+ <ExampleContainer>
29
+ <DxcCard linkHref="https://www.dxc.com">Focused default with link</DxcCard>
30
+ </ExampleContainer>
31
+ <Title title="Hovered default with link" theme="light" level={4} />
32
+ <ExampleContainer>
33
+ <DxcCard linkHref="https://www.dxc.com">Hovered default with link</DxcCard>
34
+ </ExampleContainer>
35
+ <Title title="Default with action" theme="light" level={4} />
36
+ <ExampleContainer>
37
+ <DxcCard onClick={() => {}}>Default with action</DxcCard>
38
+ </ExampleContainer>
39
+ <Title title="Default with image" theme="light" level={4} />
40
+ <ExampleContainer>
41
+ <DxcCard imageSrc={imagePath}>Default</DxcCard>
42
+ </ExampleContainer>
43
+ <Title title="Default image with background color" theme="light" level={4} />
44
+ <ExampleContainer>
45
+ <DxcCard imageSrc={imagePath} imageBgColor="yellow">
46
+ Background color
47
+ </DxcCard>
48
+ </ExampleContainer>
49
+ <Title title="Default image with position after" theme="light" level={4} />
50
+ <ExampleContainer>
51
+ <DxcCard imageSrc={imagePath} imagePosition="after">
52
+ Position after
53
+ </DxcCard>
54
+ </ExampleContainer>
55
+ <Title title="Image cover" theme="light" level={4} />
56
+ <ExampleContainer>
57
+ <DxcCard imageSrc={imagePath} imageCover>
58
+ Image cover
59
+ </DxcCard>
60
+ </ExampleContainer>
61
+ <Title title="Image cover with position after" theme="light" level={4} />
62
+ <ExampleContainer>
63
+ <DxcCard imageSrc={imagePath} imageCover imagePosition="after">
64
+ Image cover with position after
65
+ </DxcCard>
66
+ </ExampleContainer>
67
+ <Title title="Image padding" theme="light" level={2} />
68
+ <ExampleContainer>
69
+ <Title title="Xxsmall" theme="light" level={4} />
70
+ <DxcCard imageSrc={imagePath} imagePadding="xxsmall" imageCover>
71
+ Xxsmall
72
+ </DxcCard>
73
+ </ExampleContainer>
74
+ <ExampleContainer>
75
+ <Title title="Xsmall" theme="light" level={4} />
76
+ <DxcCard imageSrc={imagePath} imagePadding="xsmall" imageCover>
77
+ Xsmall
78
+ </DxcCard>
79
+ </ExampleContainer>
80
+ <ExampleContainer>
81
+ <Title title="Small" theme="light" level={4} />
82
+ <DxcCard imageSrc={imagePath} imagePadding="small" imageCover>
83
+ Small
84
+ </DxcCard>
85
+ </ExampleContainer>
86
+ <ExampleContainer>
87
+ <Title title="Medium" theme="light" level={4} />
88
+ <DxcCard imageSrc={imagePath} imagePadding="medium" imageCover>
89
+ Medium
90
+ </DxcCard>
91
+ </ExampleContainer>
92
+ <ExampleContainer>
93
+ <Title title="Large" theme="light" level={4} />
94
+ <DxcCard imageSrc={imagePath} imagePadding="large" imageCover>
95
+ Large
96
+ </DxcCard>
97
+ </ExampleContainer>
98
+ <ExampleContainer>
99
+ <Title title="Xlarge" theme="light" level={4} />
100
+ <DxcCard imageSrc={imagePath} imagePadding="xlarge" imageCover>
101
+ Xlarge
102
+ </DxcCard>
103
+ </ExampleContainer>
104
+ <ExampleContainer>
105
+ <Title title="Xxlarge" theme="light" level={4} />
106
+ <DxcCard imageSrc={imagePath} imagePadding="xxlarge" imageCover>
107
+ Xxlarge
108
+ </DxcCard>
109
+ </ExampleContainer>
110
+ <Title title="Content padding" theme="light" level={2} />
111
+ <ExampleContainer>
112
+ <Title title="Xxsmall" theme="light" level={4} />
113
+ <DxcCard contentPadding="xxsmall">Xxsmall</DxcCard>
114
+ </ExampleContainer>
115
+ <ExampleContainer>
116
+ <Title title="Xsmall" theme="light" level={4} />
117
+ <DxcCard contentPadding="xsmall">Xsmall</DxcCard>
118
+ </ExampleContainer>
119
+ <ExampleContainer>
120
+ <Title title="Small" theme="light" level={4} />
121
+ <DxcCard contentPadding="small">Small</DxcCard>
122
+ </ExampleContainer>
123
+ <ExampleContainer>
124
+ <Title title="Medium" theme="light" level={4} />
125
+ <DxcCard contentPadding="medium">Medium</DxcCard>
126
+ </ExampleContainer>
127
+ <ExampleContainer>
128
+ <Title title="Large" theme="light" level={4} />
129
+ <DxcCard contentPadding="large">Large</DxcCard>
130
+ </ExampleContainer>
131
+ <ExampleContainer>
132
+ <Title title="Xlarge" theme="light" level={4} />
133
+ <DxcCard contentPadding="xlarge">Xlarge</DxcCard>
134
+ </ExampleContainer>
135
+ <ExampleContainer>
136
+ <Title title="Xxlarge" theme="light" level={4} />
137
+ <DxcCard contentPadding="xxlarge">Xxlarge</DxcCard>
138
+ </ExampleContainer>
139
+ <Title title="Margin" theme="light" level={2} />
140
+ <ExampleContainer>
141
+ <Title title="Xxsmall" theme="light" level={4} />
142
+ <DxcCard margin="xxsmall">Xxsmall</DxcCard>
143
+ </ExampleContainer>
144
+ <ExampleContainer>
145
+ <Title title="Xsmall" theme="light" level={4} />
146
+ <DxcCard margin="xsmall">Xsmall</DxcCard>
147
+ </ExampleContainer>
148
+ <ExampleContainer>
149
+ <Title title="Small" theme="light" level={4} />
150
+ <DxcCard margin="small">Small</DxcCard>
151
+ </ExampleContainer>
152
+ <ExampleContainer>
153
+ <Title title="Medium" theme="light" level={4} />
154
+ <DxcCard margin="medium">Medium</DxcCard>
155
+ </ExampleContainer>
156
+ <ExampleContainer>
157
+ <Title title="Large" theme="light" level={4} />
158
+ <DxcCard margin="large">Large</DxcCard>
159
+ </ExampleContainer>
160
+ <ExampleContainer>
161
+ <Title title="Xlarge" theme="light" level={4} />
162
+ <DxcCard margin="xlarge">Xlarge</DxcCard>
163
+ </ExampleContainer>
164
+ <ExampleContainer>
165
+ <Title title="Xxlarge" theme="light" level={4} />
166
+ <DxcCard margin="xxlarge">Xxlarge</DxcCard>
167
+ </ExampleContainer>
168
+ </>
169
+ );
170
+
171
+ const actionCard = () => (
172
+ <>
173
+ <ExampleContainer>
174
+ <Title title="Focused default with action" theme="light" level={4} />
175
+ <DxcCard onClick={() => {}}>Focused default with action</DxcCard>
176
+ </ExampleContainer>
177
+ <ExampleContainer>
178
+ <Title title="Hovered default with action" theme="light" level={4} />
179
+ <DxcCard onClick={() => {}}>Hovered default with action</DxcCard>
180
+ </ExampleContainer>
181
+ </>
182
+ );
183
+
184
+ const linkStates = async (focusCard, hoverCard) => {
185
+ await focusCard.focus();
186
+ await userEvent.hover(hoverCard);
187
+ };
188
+
189
+ export const ActionCardStates = actionCard.bind({});
190
+ ActionCardStates.play = async ({ canvasElement }) => {
191
+ const canvas = within(canvasElement);
192
+ await userEvent.tab();
193
+ await userEvent.hover(canvas.getAllByText("Hovered default with action")[1]);
194
+ };
195
+
196
+ export const Chromatic = Card.bind({});
197
+ Chromatic.play = async ({ canvasElement }) => {
198
+ const canvas = within(canvasElement);
199
+ const linkCards = canvas.getAllByRole("link");
200
+ await linkStates(linkCards[1], linkCards[2]);
201
+ };
package/card/ice-cream.jpg ADDED
Binary file
package/card/types.d.ts CHANGED
@@ -42,15 +42,13 @@ declare type Props = {
42
42
  */
43
43
  imageCover?: boolean;
44
44
  /**
45
- * Size of the margin to be applied to the component. You can pass
46
- * an object with 'top', 'bottom', 'left' and 'right' properties
47
- * in order to specify different margin sizes.
45
+ * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
46
+ * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
48
47
  */
49
48
  margin?: Space | Size;
50
49
  /**
51
- * Size of the padding to be applied to the content area. You can pass
52
- * an object with 'top', 'bottom', 'left' and 'right' properties in
53
- * order to specify different padding sizes.
50
+ * Size of the padding to be applied to the content area ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
51
+ * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different padding sizes.
54
52
  */
55
53
  contentPadding?: Space | Size;
56
54
  /**
package/checkbox/types.d.ts CHANGED
@@ -49,7 +49,7 @@ declare type Props = {
49
49
  */
50
50
  margin?: Space | Margin;
51
51
  /**
52
- * Size of the component ('small' | 'medium' | 'large' | 'fillParent' | 'fitContent').
52
+ * Size of the component.
53
53
  */
54
54
  size?: "small" | "medium" | "large" | "fillParent" | "fitContent";
55
55
  /**
package/chip/Chip.stories.tsx ADDED
@@ -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
+ };
package/dialog/Dialog.stories.tsx ADDED
@@ -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
+ );