@dxc-technology/halstack-react 0.0.0-9bd9511 → 0.0.0-9c20370

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