@dxc-technology/halstack-react 0.0.0-e201636 → 0.0.0-e26622f

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 (152) hide show
  1. package/accordion/Accordion.js +122 -103
  2. package/accordion/Accordion.stories.tsx +2 -3
  3. package/accordion/Accordion.test.js +9 -10
  4. package/accordion/types.d.ts +5 -4
  5. package/accordion-group/AccordionGroup.js +2 -21
  6. package/accordion-group/AccordionGroup.stories.tsx +27 -1
  7. package/accordion-group/AccordionGroup.test.js +20 -45
  8. package/accordion-group/types.d.ts +10 -3
  9. package/alert/Alert.js +1 -1
  10. package/bleed/Bleed.js +1 -34
  11. package/bleed/Bleed.stories.tsx +94 -95
  12. package/bleed/types.d.ts +1 -1
  13. package/box/Box.js +1 -1
  14. package/box/types.d.ts +1 -0
  15. package/bulleted-list/BulletedList.d.ts +7 -0
  16. package/bulleted-list/BulletedList.js +123 -0
  17. package/bulleted-list/BulletedList.stories.tsx +200 -0
  18. package/bulleted-list/types.d.ts +11 -0
  19. package/{list → bulleted-list}/types.js +0 -0
  20. package/button/Button.js +43 -61
  21. package/button/Button.stories.tsx +9 -0
  22. package/button/types.d.ts +7 -7
  23. package/card/Card.js +34 -36
  24. package/card/types.d.ts +1 -0
  25. package/checkbox/Checkbox.js +87 -95
  26. package/checkbox/Checkbox.test.js +93 -16
  27. package/checkbox/types.d.ts +2 -2
  28. package/chip/types.d.ts +1 -1
  29. package/common/variables.js +56 -18
  30. package/date-input/DateInput.js +3 -3
  31. package/dialog/Dialog.js +52 -28
  32. package/dialog/Dialog.stories.tsx +57 -2
  33. package/dialog/Dialog.test.js +34 -4
  34. package/dialog/types.d.ts +3 -2
  35. package/dropdown/Dropdown.d.ts +1 -1
  36. package/dropdown/Dropdown.js +244 -247
  37. package/dropdown/Dropdown.stories.tsx +126 -63
  38. package/dropdown/Dropdown.test.js +509 -108
  39. package/dropdown/DropdownMenu.d.ts +4 -0
  40. package/dropdown/DropdownMenu.js +80 -0
  41. package/dropdown/DropdownMenuItem.d.ts +4 -0
  42. package/dropdown/DropdownMenuItem.js +92 -0
  43. package/dropdown/types.d.ts +25 -5
  44. package/flex/Flex.d.ts +4 -0
  45. package/flex/Flex.js +69 -0
  46. package/flex/Flex.stories.tsx +103 -0
  47. package/flex/types.d.ts +32 -0
  48. package/{row → flex}/types.js +0 -0
  49. package/footer/Footer.stories.tsx +8 -1
  50. package/footer/Icons.js +1 -1
  51. package/footer/types.d.ts +2 -1
  52. package/header/Header.js +74 -72
  53. package/header/Header.stories.tsx +4 -4
  54. package/header/Icons.js +2 -2
  55. package/header/types.d.ts +3 -2
  56. package/inset/Inset.js +1 -34
  57. package/inset/Inset.stories.tsx +36 -36
  58. package/inset/types.d.ts +1 -1
  59. package/layout/ApplicationLayout.d.ts +15 -6
  60. package/layout/ApplicationLayout.js +37 -65
  61. package/layout/ApplicationLayout.stories.tsx +80 -44
  62. package/layout/types.d.ts +17 -27
  63. package/link/Link.js +1 -1
  64. package/link/Link.stories.tsx +13 -6
  65. package/link/types.d.ts +1 -1
  66. package/main.d.ts +5 -8
  67. package/main.js +28 -52
  68. package/number-input/NumberInput.test.js +1 -1
  69. package/package.json +10 -9
  70. package/paginator/Paginator.test.js +42 -0
  71. package/paragraph/Paragraph.d.ts +6 -0
  72. package/paragraph/Paragraph.js +38 -0
  73. package/paragraph/Paragraph.stories.tsx +44 -0
  74. package/password-input/PasswordInput.test.js +13 -12
  75. package/progress-bar/ProgressBar.d.ts +2 -2
  76. package/progress-bar/ProgressBar.js +56 -50
  77. package/progress-bar/ProgressBar.stories.jsx +3 -1
  78. package/progress-bar/ProgressBar.test.js +67 -22
  79. package/progress-bar/types.d.ts +3 -4
  80. package/quick-nav/QuickNav.js +25 -20
  81. package/quick-nav/QuickNav.stories.tsx +131 -26
  82. package/radio-group/Radio.d.ts +1 -1
  83. package/radio-group/Radio.js +43 -28
  84. package/radio-group/RadioGroup.js +26 -29
  85. package/radio-group/RadioGroup.stories.tsx +1 -0
  86. package/radio-group/RadioGroup.test.js +28 -58
  87. package/radio-group/types.d.ts +2 -2
  88. package/resultsetTable/ResultsetTable.test.js +42 -0
  89. package/select/Listbox.d.ts +1 -1
  90. package/select/Listbox.js +53 -7
  91. package/select/Select.js +42 -43
  92. package/select/Select.stories.tsx +131 -98
  93. package/select/Select.test.js +105 -50
  94. package/select/types.d.ts +2 -5
  95. package/sidenav/Sidenav.d.ts +6 -5
  96. package/sidenav/Sidenav.js +176 -55
  97. package/sidenav/Sidenav.stories.tsx +154 -156
  98. package/sidenav/Sidenav.test.js +25 -37
  99. package/sidenav/types.d.ts +50 -27
  100. package/slider/Slider.js +116 -92
  101. package/slider/Slider.stories.tsx +7 -1
  102. package/slider/Slider.test.js +121 -21
  103. package/slider/types.d.ts +2 -2
  104. package/switch/Switch.d.ts +1 -1
  105. package/switch/Switch.js +132 -66
  106. package/switch/Switch.stories.tsx +8 -30
  107. package/switch/Switch.test.js +144 -17
  108. package/switch/types.d.ts +3 -4
  109. package/tabs/Tab.d.ts +4 -0
  110. package/tabs/Tab.js +135 -0
  111. package/tabs/Tabs.js +360 -104
  112. package/tabs/Tabs.stories.tsx +74 -0
  113. package/tabs/Tabs.test.js +217 -6
  114. package/tabs/types.d.ts +15 -5
  115. package/tabs-nav/NavTabs.js +5 -5
  116. package/tabs-nav/Tab.js +3 -5
  117. package/tabs-nav/types.d.ts +1 -1
  118. package/tag/Tag.js +1 -1
  119. package/tag/types.d.ts +1 -1
  120. package/text-input/Icons.d.ts +8 -0
  121. package/text-input/Icons.js +60 -0
  122. package/text-input/Suggestion.js +7 -5
  123. package/text-input/Suggestions.d.ts +4 -0
  124. package/text-input/Suggestions.js +134 -0
  125. package/text-input/TextInput.js +181 -278
  126. package/text-input/TextInput.stories.tsx +189 -182
  127. package/text-input/TextInput.test.js +165 -163
  128. package/text-input/types.d.ts +22 -3
  129. package/toggle-group/types.d.ts +1 -1
  130. package/typography/Typography.d.ts +4 -0
  131. package/typography/Typography.js +131 -0
  132. package/typography/Typography.stories.tsx +198 -0
  133. package/typography/types.d.ts +18 -0
  134. package/{stack → typography}/types.js +0 -0
  135. package/wizard/Wizard.js +9 -16
  136. package/wizard/Wizard.stories.tsx +20 -1
  137. package/wizard/types.d.ts +5 -4
  138. package/list/List.d.ts +0 -4
  139. package/list/List.js +0 -47
  140. package/list/List.stories.tsx +0 -95
  141. package/list/types.d.ts +0 -7
  142. package/row/Row.d.ts +0 -3
  143. package/row/Row.js +0 -127
  144. package/row/Row.stories.tsx +0 -237
  145. package/row/types.d.ts +0 -28
  146. package/stack/Stack.d.ts +0 -3
  147. package/stack/Stack.js +0 -97
  148. package/stack/Stack.stories.tsx +0 -164
  149. package/stack/types.d.ts +0 -24
  150. package/text/Text.d.ts +0 -7
  151. package/text/Text.js +0 -30
  152. package/text/Text.stories.tsx +0 -19
package/accordion-group/types.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
- declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
- declare type Margin = {
2
+ export declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
+ export declare type Margin = {
4
4
  top?: Space;
5
5
  bottom?: Space;
6
6
  left?: Space;
@@ -12,7 +12,7 @@ declare type Padding = {
12
12
  left?: Space;
13
13
  right?: Space;
14
14
  };
15
- declare type SVG = React.SVGProps<SVGSVGElement>;
15
+ declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
16
16
  export declare type AccordionPropsType = {
17
17
  /**
18
18
  * The panel label.
@@ -31,6 +31,7 @@ export declare type AccordionPropsType = {
31
31
  */
32
32
  disabled?: boolean;
33
33
  /**
34
+ * @deprecated This prop will be removed shortly, consider using the Inset component for this purpose.
34
35
  * Size of the padding to be applied to the custom area ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
35
36
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different padding sizes.
36
37
  */
@@ -69,4 +70,10 @@ declare type Props = {
69
70
  */
70
71
  children: React.ReactElement<AccordionPropsType>[] | React.ReactElement<AccordionPropsType>;
71
72
  };
73
+ export declare type AccordionGroupAccordionContextProps = {
74
+ activeIndex: number;
75
+ handlerActiveChange: (index: number) => void;
76
+ disabled: boolean;
77
+ index: number;
78
+ };
72
79
  export default Props;
package/alert/Alert.js CHANGED
@@ -146,7 +146,7 @@ var sizes = {
146
146
  medium: "480px",
147
147
  large: "820px",
148
148
  fillParent: "100%",
149
- fitContent: "auto"
149
+ fitContent: "fit-content"
150
150
  };
151
151
 
152
152
  var calculateWidth = function calculateWidth(margin, size) {
package/bleed/Bleed.js CHANGED
@@ -36,40 +36,7 @@ function Bleed(_ref) {
36
36
  }
37
37
 
38
38
  function getSpacingValue(spacingName) {
39
- switch (spacingName) {
40
- case "none":
41
- return "0rem";
42
-
43
- case "xxxsmall":
44
- return "0.125rem";
45
-
46
- case "xxsmall":
47
- return "0.25rem";
48
-
49
- case "xsmall":
50
- return "0.5rem";
51
-
52
- case "small":
53
- return "1rem";
54
-
55
- case "medium":
56
- return "1.5rem";
57
-
58
- case "large":
59
- return "2rem";
60
-
61
- case "xlarge":
62
- return "3rem";
63
-
64
- case "xxlarge":
65
- return "4rem";
66
-
67
- case "xxxlarge":
68
- return "5rem";
69
-
70
- default:
71
- return "0rem";
72
- }
39
+ return spacingName ? spacingName : "0rem";
73
40
  }
74
41
 
75
42
  var StyledBleed = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n ", "\n"])), function (_ref2) {
package/bleed/Bleed.stories.tsx CHANGED
@@ -2,7 +2,7 @@ import React from "react";
2
2
  import styled from "styled-components";
3
3
  import Title from "../../.storybook/components/Title";
4
4
  import DxcBleed from "./Bleed";
5
- import DxcStack from "../stack/Stack";
5
+ import DxcFlex from "../flex/Flex";
6
6
 
7
7
  export default {
8
8
  title: "Bleed",
@@ -13,316 +13,316 @@ export const Chromatic = () => (
13
13
  <>
14
14
  <Title title="Space = none" theme="light" level={4} />
15
15
  <Container>
16
- <DxcStack gutter="medium">
16
+ <DxcFlex direction="column" gap="1.5rem">
17
17
  <Placeholder></Placeholder>
18
- <DxcBleed space="none">
18
+ <DxcBleed space="0rem">
19
19
  <Placeholder></Placeholder>
20
20
  </DxcBleed>
21
21
  <Placeholder></Placeholder>
22
- </DxcStack>
22
+ </DxcFlex>
23
23
  </Container>
24
24
  <Title title="Space = xxxsmall" theme="light" level={4} />
25
25
  <Container>
26
- <DxcStack gutter="medium">
26
+ <DxcFlex direction="column" gap="1.5rem">
27
27
  <Placeholder></Placeholder>
28
- <DxcBleed space="xxxsmall">
28
+ <DxcBleed space="0.125rem">
29
29
  <Placeholder></Placeholder>
30
30
  </DxcBleed>
31
31
  <Placeholder></Placeholder>
32
- </DxcStack>
32
+ </DxcFlex>
33
33
  </Container>
34
34
  <Title title="Space = xxsmall" theme="light" level={4} />
35
35
  <Container>
36
- <DxcStack gutter="medium">
36
+ <DxcFlex direction="column" gap="1.5rem">
37
37
  <Placeholder></Placeholder>
38
- <DxcBleed space="xxsmall">
38
+ <DxcBleed space="0.25rem">
39
39
  <Placeholder></Placeholder>
40
40
  </DxcBleed>
41
41
  <Placeholder></Placeholder>
42
- </DxcStack>
42
+ </DxcFlex>
43
43
  </Container>
44
44
  <Title title="Space = xsmall" theme="light" level={4} />
45
45
  <Container>
46
- <DxcStack gutter="medium">
46
+ <DxcFlex direction="column" gap="1.5rem">
47
47
  <Placeholder></Placeholder>
48
- <DxcBleed space="xsmall">
48
+ <DxcBleed space="0.5rem">
49
49
  <Placeholder></Placeholder>
50
50
  </DxcBleed>
51
51
  <Placeholder></Placeholder>
52
- </DxcStack>
52
+ </DxcFlex>
53
53
  </Container>
54
54
  <Title title="Space = small" theme="light" level={4} />
55
55
  <Container>
56
- <DxcStack gutter="medium">
56
+ <DxcFlex direction="column" gap="1.5rem">
57
57
  <Placeholder></Placeholder>
58
- <DxcBleed space="small">
58
+ <DxcBleed space="1rem">
59
59
  <Placeholder></Placeholder>
60
60
  </DxcBleed>
61
61
  <Placeholder></Placeholder>
62
- </DxcStack>
62
+ </DxcFlex>
63
63
  </Container>
64
64
  <Title title="Space = medium" theme="light" level={4} />
65
65
  <Container>
66
- <DxcStack gutter="medium">
66
+ <DxcFlex direction="column" gap="1.5rem">
67
67
  <Placeholder></Placeholder>
68
- <DxcBleed space="medium">
68
+ <DxcBleed space="1.5rem">
69
69
  <Placeholder></Placeholder>
70
70
  </DxcBleed>
71
71
  <Placeholder></Placeholder>
72
- </DxcStack>
72
+ </DxcFlex>
73
73
  </Container>
74
74
  <Title title="Space = large" theme="light" level={4} />
75
75
  <Container>
76
- <DxcStack gutter="medium">
76
+ <DxcFlex direction="column" gap="1.5rem">
77
77
  <Placeholder></Placeholder>
78
- <DxcBleed space="large">
78
+ <DxcBleed space="2rem">
79
79
  <Placeholder></Placeholder>
80
80
  </DxcBleed>
81
81
  <Placeholder></Placeholder>
82
- </DxcStack>
82
+ </DxcFlex>
83
83
  </Container>
84
84
  <Title title="Space = xlarge" theme="light" level={4} />
85
85
  <Container>
86
- <DxcStack gutter="medium">
86
+ <DxcFlex direction="column" gap="1.5rem">
87
87
  <Placeholder></Placeholder>
88
- <DxcBleed space="xlarge">
88
+ <DxcBleed space="3rem">
89
89
  <Placeholder></Placeholder>
90
90
  </DxcBleed>
91
91
  <Placeholder></Placeholder>
92
- </DxcStack>
92
+ </DxcFlex>
93
93
  </Container>
94
94
  <Title title="Space = xxlarge" theme="light" level={4} />
95
95
  <Container>
96
- <DxcStack gutter="medium">
96
+ <DxcFlex direction="column" gap="1.5rem">
97
97
  <Placeholder></Placeholder>
98
- <DxcBleed space="xxlarge">
98
+ <DxcBleed space="4rem">
99
99
  <Placeholder></Placeholder>
100
100
  </DxcBleed>
101
101
  <Placeholder></Placeholder>
102
- </DxcStack>
102
+ </DxcFlex>
103
103
  </Container>
104
104
  <Title title="Space = xxxlarge" theme="light" level={4} />
105
105
  <Container>
106
- <DxcStack gutter="medium">
106
+ <DxcFlex direction="column" gap="1.5rem">
107
107
  <Placeholder></Placeholder>
108
- <DxcBleed space="xxxlarge">
108
+ <DxcBleed space="5rem">
109
109
  <Placeholder></Placeholder>
110
110
  </DxcBleed>
111
111
  <Placeholder></Placeholder>
112
- </DxcStack>
112
+ </DxcFlex>
113
113
  </Container>
114
114
 
115
115
  <Title title="Horizontal = none" theme="light" level={4} />
116
116
  <Container>
117
- <DxcStack gutter="medium">
117
+ <DxcFlex direction="column" gap="1.5rem">
118
118
  <Placeholder></Placeholder>
119
- <DxcBleed horizontal="none">
119
+ <DxcBleed horizontal="0rem">
120
120
  <Placeholder></Placeholder>
121
121
  </DxcBleed>
122
122
  <Placeholder></Placeholder>
123
- </DxcStack>
123
+ </DxcFlex>
124
124
  </Container>
125
125
  <Title title="Horizontal = xxxsmall" theme="light" level={4} />
126
126
  <Container>
127
- <DxcStack gutter="medium">
127
+ <DxcFlex direction="column" gap="1.5rem">
128
128
  <Placeholder></Placeholder>
129
- <DxcBleed horizontal="xxxsmall">
129
+ <DxcBleed horizontal="0.125rem">
130
130
  <Placeholder></Placeholder>
131
131
  </DxcBleed>
132
132
  <Placeholder></Placeholder>
133
- </DxcStack>
133
+ </DxcFlex>
134
134
  </Container>
135
135
  <Title title="Horizontal = xxsmall" theme="light" level={4} />
136
136
  <Container>
137
- <DxcStack gutter="medium">
137
+ <DxcFlex direction="column" gap="1.5rem">
138
138
  <Placeholder></Placeholder>
139
- <DxcBleed horizontal="xxsmall">
139
+ <DxcBleed horizontal="0.25rem">
140
140
  <Placeholder></Placeholder>
141
141
  </DxcBleed>
142
142
  <Placeholder></Placeholder>
143
- </DxcStack>
143
+ </DxcFlex>
144
144
  </Container>
145
145
  <Title title="Horizontal = xsmall" theme="light" level={4} />
146
146
  <Container>
147
- <DxcStack gutter="medium">
147
+ <DxcFlex direction="column" gap="1.5rem">
148
148
  <Placeholder></Placeholder>
149
- <DxcBleed horizontal="xsmall">
149
+ <DxcBleed horizontal="0.5rem">
150
150
  <Placeholder></Placeholder>
151
151
  </DxcBleed>
152
152
  <Placeholder></Placeholder>
153
- </DxcStack>
153
+ </DxcFlex>
154
154
  </Container>
155
155
  <Title title="Horizontal = small" theme="light" level={4} />
156
156
  <Container>
157
- <DxcStack gutter="medium">
157
+ <DxcFlex direction="column" gap="1.5rem">
158
158
  <Placeholder></Placeholder>
159
- <DxcBleed horizontal="small">
159
+ <DxcBleed horizontal="1rem">
160
160
  <Placeholder></Placeholder>
161
161
  </DxcBleed>
162
162
  <Placeholder></Placeholder>
163
- </DxcStack>
163
+ </DxcFlex>
164
164
  </Container>
165
165
  <Title title="Horizontal = medium" theme="light" level={4} />
166
166
  <Container>
167
- <DxcStack gutter="medium">
167
+ <DxcFlex direction="column" gap="1.5rem">
168
168
  <Placeholder></Placeholder>
169
- <DxcBleed horizontal="medium">
169
+ <DxcBleed horizontal="1.5rem">
170
170
  <Placeholder></Placeholder>
171
171
  </DxcBleed>
172
172
  <Placeholder></Placeholder>
173
- </DxcStack>
173
+ </DxcFlex>
174
174
  </Container>
175
175
  <Title title="Horizontal = large" theme="light" level={4} />
176
176
  <Container>
177
- <DxcStack gutter="medium">
177
+ <DxcFlex direction="column" gap="1.5rem">
178
178
  <Placeholder></Placeholder>
179
- <DxcBleed horizontal="large">
179
+ <DxcBleed horizontal="2rem">
180
180
  <Placeholder></Placeholder>
181
181
  </DxcBleed>
182
182
  <Placeholder></Placeholder>
183
- </DxcStack>
183
+ </DxcFlex>
184
184
  </Container>
185
185
  <Title title="Horizontal = xlarge" theme="light" level={4} />
186
186
  <Container>
187
- <DxcStack gutter="medium">
187
+ <DxcFlex direction="column" gap="1.5rem">
188
188
  <Placeholder></Placeholder>
189
- <DxcBleed horizontal="xlarge">
189
+ <DxcBleed horizontal="3rem">
190
190
  <Placeholder></Placeholder>
191
191
  </DxcBleed>
192
192
  <Placeholder></Placeholder>
193
- </DxcStack>
193
+ </DxcFlex>
194
194
  </Container>
195
195
  <Title title="Horizontal = xxlarge" theme="light" level={4} />
196
196
  <Container>
197
- <DxcStack gutter="medium">
197
+ <DxcFlex direction="column" gap="1.5rem">
198
198
  <Placeholder></Placeholder>
199
- <DxcBleed horizontal="xxlarge">
199
+ <DxcBleed horizontal="4rem">
200
200
  <Placeholder></Placeholder>
201
201
  </DxcBleed>
202
202
  <Placeholder></Placeholder>
203
- </DxcStack>
203
+ </DxcFlex>
204
204
  </Container>
205
205
  <Title title="Horizontal = xxxlarge" theme="light" level={4} />
206
206
  <Container>
207
- <DxcStack gutter="medium">
207
+ <DxcFlex direction="column" gap="1.5rem">
208
208
  <Placeholder></Placeholder>
209
- <DxcBleed horizontal="xxxlarge">
209
+ <DxcBleed horizontal="5rem">
210
210
  <Placeholder></Placeholder>
211
211
  </DxcBleed>
212
212
  <Placeholder></Placeholder>
213
- </DxcStack>
213
+ </DxcFlex>
214
214
  </Container>
215
215
 
216
216
  <Title title="Vertical = none" theme="light" level={4} />
217
217
  <Container>
218
- <DxcStack gutter="medium">
218
+ <DxcFlex direction="column" gap="1.5rem">
219
219
  <Placeholder></Placeholder>
220
- <DxcBleed vertical="none">
220
+ <DxcBleed vertical="0rem">
221
221
  <Placeholder></Placeholder>
222
222
  </DxcBleed>
223
223
  <Placeholder></Placeholder>
224
- </DxcStack>
224
+ </DxcFlex>
225
225
  </Container>
226
226
  <Title title="Vertical = xxxsmall" theme="light" level={4} />
227
227
  <Container>
228
- <DxcStack gutter="medium">
228
+ <DxcFlex direction="column" gap="1.5rem">
229
229
  <Placeholder></Placeholder>
230
- <DxcBleed vertical="xxxsmall">
230
+ <DxcBleed vertical="0.125rem">
231
231
  <Placeholder></Placeholder>
232
232
  </DxcBleed>
233
233
  <Placeholder></Placeholder>
234
- </DxcStack>
234
+ </DxcFlex>
235
235
  </Container>
236
236
  <Title title="Vertical = xxsmall" theme="light" level={4} />
237
237
  <Container>
238
- <DxcStack gutter="medium">
238
+ <DxcFlex direction="column" gap="1.5rem">
239
239
  <Placeholder></Placeholder>
240
- <DxcBleed vertical="xxsmall">
240
+ <DxcBleed vertical="0.25rem">
241
241
  <Placeholder></Placeholder>
242
242
  </DxcBleed>
243
243
  <Placeholder></Placeholder>
244
- </DxcStack>
244
+ </DxcFlex>
245
245
  </Container>
246
246
  <Title title="Vertical = xsmall" theme="light" level={4} />
247
247
  <Container>
248
- <DxcStack gutter="medium">
248
+ <DxcFlex direction="column" gap="1.5rem">
249
249
  <Placeholder></Placeholder>
250
- <DxcBleed vertical="xsmall">
250
+ <DxcBleed vertical="0.5rem">
251
251
  <Placeholder></Placeholder>
252
252
  </DxcBleed>
253
253
  <Placeholder></Placeholder>
254
- </DxcStack>
254
+ </DxcFlex>
255
255
  </Container>
256
256
  <Title title="Vertical = small" theme="light" level={4} />
257
257
  <Container>
258
- <DxcStack gutter="medium">
258
+ <DxcFlex direction="column" gap="1.5rem">
259
259
  <Placeholder></Placeholder>
260
- <DxcBleed vertical="small">
260
+ <DxcBleed vertical="1rem">
261
261
  <Placeholder></Placeholder>
262
262
  </DxcBleed>
263
263
  <Placeholder></Placeholder>
264
- </DxcStack>
264
+ </DxcFlex>
265
265
  </Container>
266
266
  <Title title="Vertical = medium" theme="light" level={4} />
267
267
  <Container>
268
- <DxcStack gutter="medium">
268
+ <DxcFlex direction="column" gap="1.5rem">
269
269
  <Placeholder></Placeholder>
270
- <DxcBleed vertical="medium">
270
+ <DxcBleed vertical="1.5rem">
271
271
  <Placeholder></Placeholder>
272
272
  </DxcBleed>
273
273
  <Placeholder></Placeholder>
274
- </DxcStack>
274
+ </DxcFlex>
275
275
  </Container>
276
276
  <Title title="Vertical = large" theme="light" level={4} />
277
277
  <Container>
278
- <DxcStack gutter="medium">
278
+ <DxcFlex direction="column" gap="1.5rem">
279
279
  <Placeholder></Placeholder>
280
- <DxcBleed vertical="large">
280
+ <DxcBleed vertical="2rem">
281
281
  <Placeholder></Placeholder>
282
282
  </DxcBleed>
283
283
  <Placeholder></Placeholder>
284
- </DxcStack>
284
+ </DxcFlex>
285
285
  </Container>
286
286
  <Title title="Vertical = xlarge" theme="light" level={4} />
287
287
  <Container>
288
- <DxcStack gutter="medium">
288
+ <DxcFlex direction="column" gap="1.5rem">
289
289
  <Placeholder></Placeholder>
290
- <DxcBleed vertical="xlarge">
290
+ <DxcBleed vertical="3rem">
291
291
  <Placeholder></Placeholder>
292
292
  </DxcBleed>
293
293
  <Placeholder></Placeholder>
294
- </DxcStack>
294
+ </DxcFlex>
295
295
  </Container>
296
296
  <Title title="Vertical = xxlarge" theme="light" level={4} />
297
297
  <Container>
298
- <DxcStack gutter="medium">
298
+ <DxcFlex direction="column" gap="1.5rem">
299
299
  <Placeholder></Placeholder>
300
- <DxcBleed vertical="xxlarge">
300
+ <DxcBleed vertical="4rem">
301
301
  <Placeholder></Placeholder>
302
302
  </DxcBleed>
303
303
  <Placeholder></Placeholder>
304
- </DxcStack>
304
+ </DxcFlex>
305
305
  </Container>
306
306
  <Title title="Vertical = xxxlarge" theme="light" level={4} />
307
307
  <Container>
308
- <DxcStack gutter="medium">
308
+ <DxcFlex direction="column" gap="1.5rem">
309
309
  <Placeholder></Placeholder>
310
- <DxcBleed vertical="xxxlarge">
310
+ <DxcBleed vertical="5rem">
311
311
  <Placeholder></Placeholder>
312
312
  </DxcBleed>
313
313
  <Placeholder></Placeholder>
314
- </DxcStack>
314
+ </DxcFlex>
315
315
  </Container>
316
316
 
317
317
  <Title title="Top = xsmall, right = small, bottom = medium and left = large" theme="light" level={4} />
318
318
  <Container>
319
- <DxcStack gutter="medium">
319
+ <DxcFlex direction="column" gap="1.5rem">
320
320
  <Placeholder></Placeholder>
321
- <DxcBleed top="xsmall" right="small" bottom="medium" left="large">
321
+ <DxcBleed top="0.5rem" right="1rem" bottom="1.5rem" left="2rem">
322
322
  <Placeholder></Placeholder>
323
323
  </DxcBleed>
324
324
  <Placeholder></Placeholder>
325
- </DxcStack>
325
+ </DxcFlex>
326
326
  </Container>
327
327
  </>
328
328
  );
@@ -339,4 +339,3 @@ const Placeholder = styled.div`
339
339
  border: 1px solid #a46ede;
340
340
  background-color: #e5d5f6;
341
341
  `;
342
-
package/bleed/types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- declare type Spacing = "none" | "xxxsmall" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge";
2
+ declare type Spacing = "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "1rem" | "1.5rem" | "2rem" | "3rem" | "4rem" | "5rem";
3
3
  declare type Props = {
4
4
  /**
5
5
  * Applies the spacing scale to all sides.
package/box/Box.js CHANGED
@@ -60,7 +60,7 @@ var sizes = {
60
60
  medium: "240px",
61
61
  large: "480px",
62
62
  fillParent: "100%",
63
- fitContent: "unset"
63
+ fitContent: "fit-content"
64
64
  };
65
65
 
66
66
  var calculateWidth = function calculateWidth(margin, size, padding) {
package/box/types.d.ts CHANGED
@@ -31,6 +31,7 @@ declare type Props = {
31
31
  */
32
32
  margin?: Space | Margin;
33
33
  /**
34
+ * @deprecated This prop will be removed shortly, consider using the Inset component for this purpose.
34
35
  * Size of the padding to be applied to the custom area ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
35
36
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different padding sizes.
36
37
  */
package/bulleted-list/BulletedList.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ /// <reference types="react" />
2
+ import BulletedListPropsType, { BulletedListItemPropsType } from "./types";
3
+ declare const DxcBulletedList: {
4
+ ({ children, type, icon }: BulletedListPropsType): JSX.Element;
5
+ Item: ({ children }: BulletedListItemPropsType) => JSX.Element;
6
+ };
7
+ export default DxcBulletedList;