@dxc-technology/halstack-react 8.0.0 → 9.0.0

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 (88) hide show
  1. package/HalstackContext.js +94 -45
  2. package/accordion/Accordion.js +7 -13
  3. package/accordion/Accordion.stories.tsx +102 -13
  4. package/alert/Alert.stories.tsx +28 -0
  5. package/box/Box.js +1 -3
  6. package/box/Box.stories.tsx +15 -0
  7. package/button/Button.js +11 -13
  8. package/button/Button.stories.tsx +150 -8
  9. package/checkbox/Checkbox.stories.tsx +52 -0
  10. package/chip/Chip.js +16 -22
  11. package/chip/Chip.stories.tsx +96 -9
  12. package/common/variables.js +280 -288
  13. package/date-input/Calendar.d.ts +1 -1
  14. package/date-input/Calendar.js +43 -43
  15. package/date-input/DateInput.js +74 -32
  16. package/date-input/DateInput.stories.tsx +183 -30
  17. package/date-input/DateInput.test.js +120 -37
  18. package/date-input/DatePicker.js +38 -52
  19. package/date-input/Icons.d.ts +6 -0
  20. package/date-input/Icons.js +75 -0
  21. package/date-input/YearPicker.d.ts +1 -1
  22. package/date-input/YearPicker.js +23 -12
  23. package/date-input/types.d.ts +6 -8
  24. package/dialog/Dialog.js +60 -73
  25. package/dialog/Dialog.stories.tsx +211 -159
  26. package/dialog/Dialog.test.js +301 -2
  27. package/dropdown/Dropdown.js +3 -6
  28. package/dropdown/Dropdown.stories.tsx +210 -84
  29. package/dropdown/DropdownMenu.js +8 -18
  30. package/dropdown/DropdownMenuItem.js +4 -15
  31. package/file-input/FileInput.js +3 -6
  32. package/file-input/FileInput.stories.tsx +85 -2
  33. package/file-input/FileInput.test.js +0 -41
  34. package/file-input/FileItem.js +1 -0
  35. package/footer/Footer.stories.tsx +91 -0
  36. package/header/Header.js +18 -20
  37. package/header/Header.stories.tsx +149 -6
  38. package/link/Link.stories.tsx +60 -0
  39. package/main.d.ts +1 -1
  40. package/main.js +1 -1
  41. package/{tabs-nav → nav-tabs}/NavTabs.js +1 -1
  42. package/{tabs-nav → nav-tabs}/NavTabs.stories.tsx +96 -6
  43. package/{tabs-nav → nav-tabs}/Tab.js +35 -15
  44. package/package.json +1 -1
  45. package/paginator/Icons.d.ts +5 -0
  46. package/paginator/Icons.js +16 -28
  47. package/paginator/Paginator.js +5 -11
  48. package/paginator/Paginator.stories.tsx +24 -0
  49. package/paginator/Paginator.test.js +17 -10
  50. package/progress-bar/ProgressBar.js +4 -4
  51. package/progress-bar/ProgressBar.stories.jsx +35 -2
  52. package/quick-nav/QuickNav.stories.tsx +14 -0
  53. package/radio-group/RadioGroup.stories.tsx +131 -18
  54. package/resultsetTable/ResultsetTable.test.js +17 -22
  55. package/select/Listbox.d.ts +1 -1
  56. package/select/Listbox.js +5 -34
  57. package/select/Option.js +11 -24
  58. package/select/Select.js +43 -24
  59. package/select/Select.stories.tsx +492 -145
  60. package/select/Select.test.js +17 -22
  61. package/select/types.d.ts +2 -2
  62. package/sidenav/Sidenav.js +8 -10
  63. package/sidenav/Sidenav.stories.tsx +148 -46
  64. package/slider/Slider.js +4 -4
  65. package/slider/Slider.stories.tsx +57 -0
  66. package/spinner/Spinner.js +2 -2
  67. package/spinner/Spinner.stories.jsx +27 -1
  68. package/switch/Switch.js +1 -1
  69. package/switch/Switch.stories.tsx +33 -0
  70. package/table/Table.stories.jsx +80 -1
  71. package/tabs/Tab.js +3 -5
  72. package/tabs/Tabs.js +3 -3
  73. package/tabs/Tabs.stories.tsx +45 -5
  74. package/tag/Tag.stories.tsx +14 -1
  75. package/text-input/Suggestion.js +32 -5
  76. package/text-input/TextInput.js +7 -11
  77. package/text-input/TextInput.stories.tsx +92 -4
  78. package/text-input/TextInput.test.js +125 -25
  79. package/textarea/Textarea.stories.jsx +60 -1
  80. package/toggle-group/ToggleGroup.stories.tsx +42 -0
  81. package/utils/FocusLock.d.ts +13 -0
  82. package/utils/FocusLock.js +139 -0
  83. package/wizard/Wizard.stories.tsx +20 -0
  84. /package/{tabs-nav → nav-tabs}/NavTabs.d.ts +0 -0
  85. /package/{tabs-nav → nav-tabs}/NavTabs.test.js +0 -0
  86. /package/{tabs-nav → nav-tabs}/Tab.d.ts +0 -0
  87. /package/{tabs-nav → nav-tabs}/types.d.ts +0 -0
  88. /package/{tabs-nav → nav-tabs}/types.js +0 -0
package/dialog/Dialog.stories.tsx CHANGED
@@ -6,19 +6,31 @@ import DxcFlex from "../flex/Flex";
6
6
  import DxcInset from "../inset/Inset";
7
7
  import Title from "../../.storybook/components/Title";
8
8
  import ExampleContainer from "../../.storybook/components/ExampleContainer";
9
+ import { HalstackProvider } from "../HalstackContext";
10
+ import DxcHeading from "../heading/Heading";
11
+ import DxcParagraph from "../paragraph/Paragraph";
12
+ import DxcAlert from "../alert/Alert";
9
13
 
10
14
  export default {
11
15
  title: "Dialog ",
12
16
  component: DxcDialog,
13
17
  };
14
18
 
19
+ const opinionatedTheme = {
20
+ dialog: {
21
+ baseColor: "#ffffff",
22
+ closeIconColor: "#000000",
23
+ overlayColor: "#000000b3",
24
+ },
25
+ };
26
+
15
27
  export const DefaultDialog = () => (
16
- <>
17
- <ExampleContainer expanded={true}>
18
- <Title title="Default dialog" theme="light" level={4} />
19
- <DxcDialog>
20
- {" "}
21
- <p>
28
+ <ExampleContainer expanded={true}>
29
+ <Title title="Default dialog" theme="light" level={4} />
30
+ <DxcDialog>
31
+ <DxcFlex direction="column" gap="1rem">
32
+ <DxcHeading level={4} text="Example title" />
33
+ <DxcParagraph>
22
34
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
23
35
  placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
24
36
  elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
@@ -28,72 +40,102 @@ export const DefaultDialog = () => (
28
40
  fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
29
41
  augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
30
42
  dignissim, pharetra neque molestie, molestie lectus.
31
- </p>{" "}
43
+ </DxcParagraph>
44
+ </DxcFlex>
45
+ </DxcDialog>
46
+ </ExampleContainer>
47
+ );
48
+
49
+ export const DefaultDialogOpinionated = () => (
50
+ <ExampleContainer expanded={true}>
51
+ <Title title="Default dialog" theme="light" level={4} />
52
+ <HalstackProvider theme={opinionatedTheme}>
53
+ <DxcDialog>
54
+ <DxcFlex direction="column" gap="1rem">
55
+ <DxcHeading level={4} text="Example title" />
56
+ <DxcParagraph>
57
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
58
+ placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
59
+ elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
60
+ tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
61
+ eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue
62
+ gravida enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare,
63
+ malesuada urna eu, fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam
64
+ sit amet maximus augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo.
65
+ Praesent quis nunc dignissim, pharetra neque molestie, molestie lectus.
66
+ </DxcParagraph>
67
+ </DxcFlex>
32
68
  </DxcDialog>
33
- </ExampleContainer>
34
- </>
69
+ </HalstackProvider>
70
+ </ExampleContainer>
35
71
  );
36
72
 
37
73
  export const DialogWithInputs = () => (
38
- <>
39
- <ExampleContainer expanded={true}>
40
- <Title title="Dialog with inputs" theme="light" level={4} />
41
- <DxcDialog>
42
- <DxcInset bottom="1rem">
43
- <DxcFlex gap="2rem" direction="column">
44
- <DxcFlex gap="1rem" direction="column">
45
- <DxcTextInput size="fillParent" label="Name"></DxcTextInput>
46
- <DxcTextInput size="fillParent" label="Surname"></DxcTextInput>
47
- </DxcFlex>
48
- <DxcFlex justifyContent="flex-end" gap="1rem">
49
- <DxcButton label="Save"></DxcButton>
50
- <DxcButton label="Cancel" mode="secondary"></DxcButton>
51
- </DxcFlex>
74
+ <ExampleContainer expanded={true}>
75
+ <Title title="Dialog with inputs" theme="light" level={4} />
76
+ <DxcDialog>
77
+ <DxcInset bottom="1rem">
78
+ <DxcFlex gap="2rem" direction="column">
79
+ <DxcHeading level={4} text="Example form" />
80
+ <DxcFlex gap="1rem" direction="column">
81
+ <DxcTextInput size="fillParent" label="Name" />
82
+ <DxcTextInput size="fillParent" label="Surname" />
52
83
  </DxcFlex>
53
- </DxcInset>
54
- </DxcDialog>
55
- </ExampleContainer>
56
- </>
84
+ <DxcAlert
85
+ type="error"
86
+ inlineText="User: arn:aws:xxx::xxxxxxxxxxxx:assumed-role/assure-sandbox-xxxx-xxxxxxxxxxxxxxxxxxxxxxxxxx/sandbox-xxxx-xxxxxxxxxxxxxxxxxx is not authorized to perform: lambda:xxxxxxxxxxxxxx on resource: arn:aws:lambda:us-east-1:xxxxxxxxxxxx:function:sandbox-xxxx-xx-xxxxxxx-xxxxxxx-lambda because no identity-based policy allows the lambda:xxxxxxxxxxxxxx action"
87
+ size="fillParent"
88
+ margin={{ bottom: "xsmall" }}
89
+ />
90
+ <DxcFlex justifyContent="flex-end" gap="0.5rem">
91
+ <DxcButton label="Cancel" mode="text" />
92
+ <DxcButton label="Save" />
93
+ </DxcFlex>
94
+ </DxcFlex>
95
+ </DxcInset>
96
+ </DxcDialog>
97
+ </ExampleContainer>
57
98
  );
58
99
 
59
100
  const RespDialog = () => (
60
- <>
61
- <ExampleContainer expanded={true}>
62
- <Title title="Responsive dialog" theme="light" level={4} />
63
- <DxcDialog>
64
- <DxcInset bottom="1rem">
65
- <DxcFlex gap="2rem" direction="column">
66
- <DxcFlex gap="1rem" direction="column">
67
- <DxcTextInput size="fillParent" label="Name"></DxcTextInput>
68
- <DxcTextInput size="fillParent" label="Surname"></DxcTextInput>
69
- </DxcFlex>
70
- <DxcFlex justifyContent="flex-end" gap="1rem">
71
- <DxcButton label="Save"></DxcButton>
72
- <DxcButton label="Cancel" mode="secondary"></DxcButton>
73
- </DxcFlex>
101
+ <ExampleContainer expanded={true}>
102
+ <Title title="Responsive dialog" theme="light" level={4} />
103
+ <DxcDialog>
104
+ <DxcInset bottom="1rem">
105
+ <DxcFlex gap="2rem" direction="column">
106
+ <DxcHeading level={4} text="Example form" />
107
+ <DxcFlex gap="1rem" direction="column">
108
+ <DxcTextInput size="fillParent" label="Name" />
109
+ <DxcTextInput size="fillParent" label="Surname" />
74
110
  </DxcFlex>
75
- </DxcInset>
76
- </DxcDialog>
77
- </ExampleContainer>
78
- </>
111
+ <DxcFlex justifyContent="flex-end" gap="0.5rem">
112
+ <DxcButton label="Cancel" mode="text" />
113
+ <DxcButton label="Save" />
114
+ </DxcFlex>
115
+ </DxcFlex>
116
+ </DxcInset>
117
+ </DxcDialog>
118
+ </ExampleContainer>
79
119
  );
80
120
 
81
121
  export const DialogWithoutOverlay = () => (
82
122
  <ExampleContainer expanded={true}>
83
123
  <Title title="Dialog Without Overlay" theme="light" level={4} />
84
124
  <DxcDialog overlay={false}>
85
- {" "}
86
- <p>
87
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
88
- placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
89
- elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
90
- tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
91
- eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
92
- enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
93
- fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
94
- augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
95
- dignissim, pharetra neque molestie, molestie lectus.
96
- </p>{" "}
125
+ <DxcFlex direction="column" gap="1rem">
126
+ <DxcHeading level={4} text="Example title" />
127
+ <DxcParagraph>
128
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
129
+ placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
130
+ elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
131
+ tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
132
+ eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
133
+ enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
134
+ fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
135
+ augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
136
+ dignissim, pharetra neque molestie, molestie lectus.
137
+ </DxcParagraph>
138
+ </DxcFlex>
97
139
  </DxcDialog>
98
140
  </ExampleContainer>
99
141
  );
@@ -102,8 +144,7 @@ export const DialogCloseVisibleFalse = () => (
102
144
  <ExampleContainer expanded={true}>
103
145
  <Title title="Dialog Close Visible" theme="dark" level={4} />
104
146
  <DxcDialog isCloseVisible={false}>
105
- {" "}
106
- <p>
147
+ <DxcParagraph>
107
148
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
108
149
  placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
109
150
  elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
@@ -113,7 +154,7 @@ export const DialogCloseVisibleFalse = () => (
113
154
  fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
114
155
  augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
115
156
  dignissim, pharetra neque molestie, molestie lectus.
116
- </p>{" "}
157
+ </DxcParagraph>
117
158
  </DxcDialog>
118
159
  </ExampleContainer>
119
160
  );
@@ -121,19 +162,21 @@ export const DialogCloseVisibleFalse = () => (
121
162
  export const DialogWithXxsmallPadding = () => (
122
163
  <ExampleContainer expanded={true}>
123
164
  <Title title="Dialog With Xxsmall Padding" theme="light" level={4} />
124
- <DxcDialog padding={"xxsmall"}>
125
- {" "}
126
- <p>
127
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
128
- placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
129
- elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
130
- tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
131
- eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
132
- enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
133
- fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
134
- augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
135
- dignissim, pharetra neque molestie, molestie lectus.
136
- </p>{" "}
165
+ <DxcDialog padding="xxsmall">
166
+ <DxcFlex direction="column" gap="0.25rem">
167
+ <DxcHeading level={4} text="Example title" />
168
+ <DxcParagraph>
169
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
170
+ placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
171
+ elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
172
+ tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
173
+ eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
174
+ enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
175
+ fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
176
+ augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
177
+ dignissim, pharetra neque molestie, molestie lectus.
178
+ </DxcParagraph>
179
+ </DxcFlex>
137
180
  </DxcDialog>
138
181
  </ExampleContainer>
139
182
  );
@@ -142,38 +185,20 @@ export const DialogWithXsmallPadding = () => (
142
185
  <ExampleContainer expanded={true}>
143
186
  <Title title="Dialog With Xsmall Padding" theme="light" level={4} />
144
187
  <DxcDialog padding={"xsmall"}>
145
- {" "}
146
- <p>
147
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
148
- placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
149
- elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
150
- tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
151
- eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
152
- enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
153
- fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
154
- augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
155
- dignissim, pharetra neque molestie, molestie lectus.
156
- </p>{" "}
157
- </DxcDialog>
158
- </ExampleContainer>
159
- );
160
-
161
- export const DialogWithSmallPadding = () => (
162
- <ExampleContainer expanded={true}>
163
- <Title title="Dialog With Small Padding" theme="light" level={4} />
164
- <DxcDialog padding={"small"}>
165
- {" "}
166
- <p>
167
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
168
- placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
169
- elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
170
- tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
171
- eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
172
- enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
173
- fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
174
- augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
175
- dignissim, pharetra neque molestie, molestie lectus.
176
- </p>{" "}
188
+ <DxcFlex direction="column" gap="1rem">
189
+ <DxcHeading level={4} text="Example title" />
190
+ <DxcParagraph>
191
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
192
+ placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
193
+ elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
194
+ tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
195
+ eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
196
+ enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
197
+ fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
198
+ augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
199
+ dignissim, pharetra neque molestie, molestie lectus.
200
+ </DxcParagraph>
201
+ </DxcFlex>
177
202
  </DxcDialog>
178
203
  </ExampleContainer>
179
204
  );
@@ -181,19 +206,21 @@ export const DialogWithSmallPadding = () => (
181
206
  export const DialogWithMediumPadding = () => (
182
207
  <ExampleContainer expanded={true}>
183
208
  <Title title="Dialog With Medium Padding" theme="light" level={4} />
184
- <DxcDialog padding={"medium"}>
185
- {" "}
186
- <p>
187
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
188
- placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
189
- elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
190
- tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
191
- eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
192
- enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
193
- fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
194
- augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
195
- dignissim, pharetra neque molestie, molestie lectus.
196
- </p>{" "}
209
+ <DxcDialog padding="medium">
210
+ <DxcFlex direction="column" gap="1rem">
211
+ <DxcHeading level={4} text="Example title" />
212
+ <DxcParagraph>
213
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
214
+ placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
215
+ elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
216
+ tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
217
+ eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
218
+ enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
219
+ fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
220
+ augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
221
+ dignissim, pharetra neque molestie, molestie lectus.
222
+ </DxcParagraph>
223
+ </DxcFlex>
197
224
  </DxcDialog>
198
225
  </ExampleContainer>
199
226
  );
@@ -201,19 +228,21 @@ export const DialogWithMediumPadding = () => (
201
228
  export const DialogWithLargePadding = () => (
202
229
  <ExampleContainer expanded={true}>
203
230
  <Title title="Dialog With Large Padding" theme="light" level={4} />
204
- <DxcDialog padding={"large"}>
205
- {" "}
206
- <p>
207
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
208
- placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
209
- elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
210
- tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
211
- eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
212
- enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
213
- fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
214
- augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
215
- dignissim, pharetra neque molestie, molestie lectus.
216
- </p>{" "}
231
+ <DxcDialog padding="large">
232
+ <DxcFlex direction="column" gap="1rem">
233
+ <DxcHeading level={4} text="Example title" />
234
+ <DxcParagraph>
235
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
236
+ placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
237
+ elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
238
+ tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
239
+ eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
240
+ enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
241
+ fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
242
+ augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
243
+ dignissim, pharetra neque molestie, molestie lectus.
244
+ </DxcParagraph>
245
+ </DxcFlex>
217
246
  </DxcDialog>
218
247
  </ExampleContainer>
219
248
  );
@@ -221,19 +250,21 @@ export const DialogWithLargePadding = () => (
221
250
  export const DialogWithXlargePadding = () => (
222
251
  <ExampleContainer expanded={true}>
223
252
  <Title title="Dialog With Xlarge Padding" theme="light" level={4} />
224
- <DxcDialog padding={"xlarge"}>
225
- {" "}
226
- <p>
227
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
228
- placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
229
- elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
230
- tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
231
- eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
232
- enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
233
- fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
234
- augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
235
- dignissim, pharetra neque molestie, molestie lectus.
236
- </p>{" "}
253
+ <DxcDialog padding="xlarge">
254
+ <DxcFlex direction="column" gap="1rem">
255
+ <DxcHeading level={4} text="Example title" />
256
+ <DxcParagraph>
257
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
258
+ placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
259
+ elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
260
+ tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
261
+ eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
262
+ enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
263
+ fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
264
+ augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
265
+ dignissim, pharetra neque molestie, molestie lectus.
266
+ </DxcParagraph>
267
+ </DxcFlex>
237
268
  </DxcDialog>
238
269
  </ExampleContainer>
239
270
  );
@@ -241,27 +272,48 @@ export const DialogWithXlargePadding = () => (
241
272
  export const DialogWithXxlargePadding = () => (
242
273
  <ExampleContainer expanded={true}>
243
274
  <Title title="Dialog With Xxlarge Padding" theme="light" level={4} />
244
- <DxcDialog padding={"xxlarge"}>
245
- {" "}
246
- <p>
247
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
248
- placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
249
- elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
250
- tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
251
- eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
252
- enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
253
- fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
254
- augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
255
- dignissim, pharetra neque molestie, molestie lectus.
256
- </p>{" "}
275
+ <DxcDialog padding="xxlarge">
276
+ <DxcFlex direction="column" gap="1rem">
277
+ <DxcHeading level={4} text="Example title" />
278
+ <DxcParagraph>
279
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
280
+ placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
281
+ elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
282
+ tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
283
+ eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
284
+ enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
285
+ fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
286
+ augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
287
+ dignissim, pharetra neque molestie, molestie lectus.
288
+ </DxcParagraph>
289
+ </DxcFlex>
257
290
  </DxcDialog>
258
291
  </ExampleContainer>
259
292
  );
260
293
 
261
- export const ResponsiveDialog = RespDialog.bind({});
294
+ const customViewports = {
295
+ resizedScreen: {
296
+ name: 'Custom viewport',
297
+ styles: {
298
+ width: '720px',
299
+ height: '900px',
300
+ },
301
+ },
302
+ };
303
+
304
+ export const ResponsiveDialog = DefaultDialog.bind({});
262
305
  ResponsiveDialog.parameters = {
306
+ viewport: {
307
+ viewports: customViewports,
308
+ defaultViewport: "resizedScreen",
309
+ },
310
+ chromatic: { viewports: [720] },
311
+ };
312
+
313
+ export const MobileResponsiveDialog = RespDialog.bind({});
314
+ MobileResponsiveDialog.parameters = {
263
315
  viewport: {
264
316
  defaultViewport: "iphonex",
265
317
  },
266
318
  chromatic: { viewports: [375] },
267
- };
319
+ };