@dxc-technology/halstack-react 0.0.0-f9a5f2c → 0.0.0-f9b872d

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 (82) hide show
  1. package/accordion/types.d.ts +1 -1
  2. package/accordion-group/types.d.ts +1 -1
  3. package/bulleted-list/BulletedList.d.ts +7 -0
  4. package/bulleted-list/BulletedList.js +123 -0
  5. package/bulleted-list/BulletedList.stories.tsx +200 -0
  6. package/bulleted-list/types.d.ts +11 -0
  7. package/{list → bulleted-list}/types.js +0 -0
  8. package/button/Button.js +43 -61
  9. package/button/Button.stories.tsx +9 -0
  10. package/button/types.d.ts +7 -7
  11. package/chip/types.d.ts +1 -1
  12. package/common/variables.js +41 -11
  13. package/dialog/Dialog.js +52 -28
  14. package/dialog/Dialog.stories.tsx +1 -2
  15. package/dialog/Dialog.test.js +34 -4
  16. package/dialog/types.d.ts +2 -2
  17. package/dropdown/types.d.ts +1 -1
  18. package/flex/Flex.d.ts +2 -1
  19. package/flex/Flex.js +38 -55
  20. package/flex/types.d.ts +2 -2
  21. package/footer/types.d.ts +1 -1
  22. package/layout/ApplicationLayout.d.ts +15 -6
  23. package/layout/ApplicationLayout.js +36 -64
  24. package/layout/ApplicationLayout.stories.tsx +79 -44
  25. package/layout/types.d.ts +17 -27
  26. package/link/Link.js +1 -1
  27. package/link/Link.stories.tsx +12 -5
  28. package/link/types.d.ts +1 -1
  29. package/main.d.ts +4 -8
  30. package/main.js +24 -56
  31. package/package.json +7 -7
  32. package/paragraph/Paragraph.d.ts +6 -0
  33. package/paragraph/Paragraph.js +38 -0
  34. package/paragraph/Paragraph.stories.tsx +44 -0
  35. package/progress-bar/ProgressBar.d.ts +2 -2
  36. package/progress-bar/ProgressBar.js +56 -50
  37. package/progress-bar/ProgressBar.stories.jsx +3 -1
  38. package/progress-bar/ProgressBar.test.js +67 -22
  39. package/progress-bar/types.d.ts +3 -4
  40. package/quick-nav/QuickNav.js +5 -5
  41. package/quick-nav/QuickNav.stories.tsx +13 -13
  42. package/select/Listbox.d.ts +1 -1
  43. package/select/Listbox.js +25 -1
  44. package/select/Select.js +14 -31
  45. package/select/Select.stories.tsx +6 -5
  46. package/select/Select.test.js +63 -50
  47. package/select/types.d.ts +2 -4
  48. package/sidenav/Sidenav.d.ts +6 -5
  49. package/sidenav/Sidenav.js +176 -55
  50. package/sidenav/Sidenav.stories.tsx +154 -156
  51. package/sidenav/Sidenav.test.js +25 -37
  52. package/sidenav/types.d.ts +50 -27
  53. package/tabs/types.d.ts +1 -1
  54. package/tabs-nav/types.d.ts +1 -1
  55. package/tag/types.d.ts +1 -1
  56. package/text-input/TextInput.stories.tsx +1 -2
  57. package/text-input/types.d.ts +1 -1
  58. package/toggle-group/types.d.ts +1 -1
  59. package/typography/Typography.d.ts +4 -0
  60. package/typography/Typography.js +131 -0
  61. package/typography/Typography.stories.tsx +198 -0
  62. package/typography/types.d.ts +18 -0
  63. package/{row → typography}/types.js +0 -0
  64. package/wizard/Wizard.js +9 -16
  65. package/wizard/Wizard.stories.tsx +20 -1
  66. package/wizard/types.d.ts +5 -4
  67. package/list/List.d.ts +0 -4
  68. package/list/List.js +0 -48
  69. package/list/List.stories.tsx +0 -89
  70. package/list/types.d.ts +0 -7
  71. package/row/Row.d.ts +0 -3
  72. package/row/Row.js +0 -127
  73. package/row/Row.stories.tsx +0 -237
  74. package/row/types.d.ts +0 -28
  75. package/stack/Stack.d.ts +0 -4
  76. package/stack/Stack.js +0 -56
  77. package/stack/Stack.stories.tsx +0 -263
  78. package/stack/types.d.ts +0 -32
  79. package/stack/types.js +0 -5
  80. package/text/Text.d.ts +0 -7
  81. package/text/Text.js +0 -30
  82. package/text/Text.stories.tsx +0 -19
package/row/Row.js DELETED
@@ -1,127 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = Row;
9
-
10
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
-
12
- var _react = _interopRequireDefault(require("react"));
13
-
14
- var _styledComponents = _interopRequireDefault(require("styled-components"));
15
-
16
- var _templateObject;
17
-
18
- function Row(_ref) {
19
- var _ref$gutter = _ref.gutter,
20
- gutter = _ref$gutter === void 0 ? "none" : _ref$gutter,
21
- align = _ref.align,
22
- justify = _ref.justify,
23
- _ref$wrap = _ref.wrap,
24
- wrap = _ref$wrap === void 0 ? true : _ref$wrap,
25
- _ref$reverse = _ref.reverse,
26
- reverse = _ref$reverse === void 0 ? false : _ref$reverse,
27
- children = _ref.children;
28
- return /*#__PURE__*/_react["default"].createElement(StyledRow, {
29
- gutter: gutter,
30
- align: align,
31
- justify: justify,
32
- wrap: wrap,
33
- reverse: reverse
34
- }, children);
35
- }
36
-
37
- var StyledRow = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: ", ";\n flex-wrap: ", ";\n align-items: ", ";\n justify-content: ", ";\n gap: ", ";\n"])), function (_ref2) {
38
- var reverse = _ref2.reverse;
39
- return reverse ? "row-reverse" : "row";
40
- }, function (_ref3) {
41
- var wrap = _ref3.wrap;
42
- return wrap ? "wrap" : "nowrap";
43
- }, function (_ref4) {
44
- var align = _ref4.align;
45
-
46
- switch (align) {
47
- case "start":
48
- return "flex-start";
49
-
50
- case "center":
51
- return "center";
52
-
53
- case "end":
54
- return "flex-end";
55
-
56
- case "baseline":
57
- return "baseline";
58
-
59
- case "stretch":
60
- return "stretch";
61
-
62
- default:
63
- return "initial";
64
- }
65
- }, function (_ref5) {
66
- var justify = _ref5.justify;
67
-
68
- switch (justify) {
69
- case "spaceBetween":
70
- return "space-between";
71
-
72
- case "spaceAround":
73
- return "space-around";
74
-
75
- case "spaceEvenly":
76
- return "space-evenly";
77
-
78
- case "start":
79
- return "flex-start";
80
-
81
- case "center":
82
- return "center";
83
-
84
- case "end":
85
- return "flex-end";
86
-
87
- default:
88
- return "initial";
89
- }
90
- }, function (_ref6) {
91
- var gutter = _ref6.gutter;
92
-
93
- switch (gutter) {
94
- case "none":
95
- return "0";
96
-
97
- case "xxxsmall":
98
- return "0.125rem";
99
-
100
- case "xxsmall":
101
- return "0.25rem";
102
-
103
- case "xsmall":
104
- return "0.5rem";
105
-
106
- case "small":
107
- return "1rem";
108
-
109
- case "medium":
110
- return "1.5rem";
111
-
112
- case "large":
113
- return "2rem";
114
-
115
- case "xlarge":
116
- return "3rem";
117
-
118
- case "xxlarge":
119
- return "4rem";
120
-
121
- case "xxxlarge":
122
- return "5rem";
123
-
124
- default:
125
- return "0";
126
- }
127
- });
package/row/Row.stories.tsx DELETED
@@ -1,237 +0,0 @@
1
- import React from "react";
2
- import Title from "../../.storybook/components/Title";
3
- import styled from "styled-components";
4
- import DxcRow from "./Row";
5
-
6
- export default {
7
- title: "Row",
8
- component: DxcRow,
9
- };
10
-
11
- export const Chromatic = () => (
12
- <>
13
- <Title title="Default" theme="light" level={4} />
14
- <Container>
15
- <DxcRow>
16
- <Placeholder></Placeholder>
17
- <Placeholder></Placeholder>
18
- <Placeholder></Placeholder>
19
- </DxcRow>
20
- </Container>
21
- <Title title="Justify = center" theme="light" level={4} />
22
- <Container>
23
- <DxcRow justify="center">
24
- <Placeholder></Placeholder>
25
- <Placeholder></Placeholder>
26
- <Placeholder></Placeholder>
27
- </DxcRow>
28
- </Container>
29
- <Title title="Justify = end" theme="light" level={4} />
30
- <Container>
31
- <DxcRow justify="end">
32
- <Placeholder></Placeholder>
33
- <Placeholder></Placeholder>
34
- <Placeholder></Placeholder>
35
- </DxcRow>
36
- </Container>
37
- <Title title="Justify = spaceAround" theme="light" level={4} />
38
- <Container>
39
- <DxcRow justify="spaceAround">
40
- <Placeholder></Placeholder>
41
- <Placeholder></Placeholder>
42
- <Placeholder></Placeholder>
43
- </DxcRow>
44
- </Container>
45
- <Title title="Justify = spaceBetween" theme="light" level={4} />
46
- <Container>
47
- <DxcRow justify="spaceBetween">
48
- <Placeholder></Placeholder>
49
- <Placeholder></Placeholder>
50
- <Placeholder></Placeholder>
51
- </DxcRow>
52
- </Container>
53
- <Title title="Justify = spaceEvenly" theme="light" level={4} />
54
- <Container>
55
- <DxcRow justify="spaceEvenly">
56
- <Placeholder></Placeholder>
57
- <Placeholder></Placeholder>
58
- <Placeholder></Placeholder>
59
- </DxcRow>
60
- </Container>
61
- <Title title="Justify = start" theme="light" level={4} />
62
- <Container>
63
- <DxcRow justify="start">
64
- <Placeholder></Placeholder>
65
- <Placeholder></Placeholder>
66
- <Placeholder></Placeholder>
67
- </DxcRow>
68
- </Container>
69
- <Title title="Align = baseline" theme="light" level={4} />
70
- <Container>
71
- <DxcRow align="baseline">
72
- <Placeholder paddingTop={20}>test</Placeholder>
73
- <Placeholder>test</Placeholder>
74
- <Placeholder paddingBottom={60}>test</Placeholder>
75
- </DxcRow>
76
- </Container>
77
- <Title title="Align = center" theme="light" level={4} />
78
- <Container>
79
- <DxcRow align="center">
80
- <Placeholder paddingTop={20}></Placeholder>
81
- <Placeholder></Placeholder>
82
- <Placeholder paddingTop={60}></Placeholder>
83
- </DxcRow>
84
- </Container>
85
- <Title title="Align = end" theme="light" level={4} />
86
- <Container>
87
- <DxcRow align="end">
88
- <Placeholder paddingTop={20}></Placeholder>
89
- <Placeholder></Placeholder>
90
- <Placeholder paddingTop={60}></Placeholder>
91
- </DxcRow>
92
- </Container>
93
- <Title title="Align = start" theme="light" level={4} />
94
- <Container>
95
- <DxcRow align="start">
96
- <Placeholder paddingTop={20}></Placeholder>
97
- <Placeholder></Placeholder>
98
- <Placeholder paddingTop={60}></Placeholder>
99
- </DxcRow>
100
- </Container>
101
- <Title title="Align = stretch" theme="light" level={4} />
102
- <Container>
103
- <DxcRow align="stretch">
104
- <Placeholder paddingTop={20}></Placeholder>
105
- <Placeholder></Placeholder>
106
- <Placeholder paddingTop={60}></Placeholder>
107
- </DxcRow>
108
- </Container>
109
- <Title title="gutter = xxxsmall" theme="light" level={4} />
110
- <Container>
111
- <DxcRow gutter="xxxsmall">
112
- <Placeholder></Placeholder>
113
- <Placeholder></Placeholder>
114
- <Placeholder></Placeholder>
115
- </DxcRow>
116
- </Container>
117
- <Title title="gutter = xxsmall" theme="light" level={4} />
118
- <Container>
119
- <DxcRow gutter="xxsmall">
120
- <Placeholder></Placeholder>
121
- <Placeholder></Placeholder>
122
- <Placeholder></Placeholder>
123
- </DxcRow>
124
- </Container>
125
- <Title title="gutter = xsmall" theme="light" level={4} />
126
- <Container>
127
- <DxcRow gutter="xsmall">
128
- <Placeholder></Placeholder>
129
- <Placeholder></Placeholder>
130
- <Placeholder></Placeholder>
131
- </DxcRow>
132
- </Container>
133
- <Title title="gutter = small" theme="light" level={4} />
134
- <Container>
135
- <DxcRow gutter="small">
136
- <Placeholder></Placeholder>
137
- <Placeholder></Placeholder>
138
- <Placeholder></Placeholder>
139
- </DxcRow>
140
- </Container>
141
- <Title title="gutter = medium" theme="light" level={4} />
142
- <Container>
143
- <DxcRow gutter="medium">
144
- <Placeholder></Placeholder>
145
- <Placeholder></Placeholder>
146
- <Placeholder></Placeholder>
147
- </DxcRow>
148
- </Container>
149
- <Title title="gutter = large" theme="light" level={4} />
150
- <Container>
151
- <DxcRow gutter="large">
152
- <Placeholder></Placeholder>
153
- <Placeholder></Placeholder>
154
- <Placeholder></Placeholder>
155
- </DxcRow>
156
- </Container>
157
- <Title title="gutter = xlarge" theme="light" level={4} />
158
- <Container>
159
- <DxcRow gutter="xlarge">
160
- <Placeholder></Placeholder>
161
- <Placeholder></Placeholder>
162
- <Placeholder></Placeholder>
163
- </DxcRow>
164
- </Container>
165
- <Title title="gutter = xxlarge" theme="light" level={4} />
166
- <Container>
167
- <DxcRow gutter="xxlarge">
168
- <Placeholder></Placeholder>
169
- <Placeholder></Placeholder>
170
- <Placeholder></Placeholder>
171
- </DxcRow>
172
- </Container>
173
- <Title title="gutter = xxxlarge" theme="light" level={4} />
174
- <Container>
175
- <DxcRow gutter="xxxlarge">
176
- <Placeholder></Placeholder>
177
- <Placeholder></Placeholder>
178
- <Placeholder></Placeholder>
179
- </DxcRow>
180
- </Container>
181
- <Title title="gutter = none" theme="light" level={4} />
182
- <Container>
183
- <DxcRow gutter="none">
184
- <Placeholder></Placeholder>
185
- <Placeholder></Placeholder>
186
- <Placeholder></Placeholder>
187
- </DxcRow>
188
- </Container>
189
- <Title title="reverse = false" theme="light" level={4} />
190
- <Container>
191
- <DxcRow reverse={false}>
192
- <Placeholder>1</Placeholder>
193
- <Placeholder>2</Placeholder>
194
- <Placeholder>3</Placeholder>
195
- </DxcRow>
196
- </Container>
197
- <Title title="reverse = true" theme="light" level={4} />
198
- <Container>
199
- <DxcRow reverse={true}>
200
- <Placeholder>1</Placeholder>
201
- <Placeholder>2</Placeholder>
202
- <Placeholder>3</Placeholder>
203
- </DxcRow>
204
- </Container>
205
- <Title title="wrap = true" theme="light" level={4} />
206
- <Container width={300}>
207
- <DxcRow wrap={true}>
208
- <Placeholder>1</Placeholder>
209
- <Placeholder>2</Placeholder>
210
- <Placeholder>3</Placeholder>
211
- </DxcRow>
212
- </Container>
213
- <Title title="wrap = false" theme="light" level={4} />
214
- <Container width={300}>
215
- <DxcRow wrap={false}>
216
- <Placeholder>1</Placeholder>
217
- <Placeholder>2</Placeholder>
218
- <Placeholder>3</Placeholder>
219
- </DxcRow>
220
- </Container>
221
- </>
222
- );
223
-
224
- const Container = styled.div`
225
- background: #f2eafa;
226
- padding: 10px;
227
- width: ${({ width }) => (width ? `${width}px` : "unset")};
228
- `;
229
-
230
- const Placeholder = styled.div`
231
- min-height: 40px;
232
- min-width: 120px;
233
- border: 1px solid #a46ede;
234
- background-color: #e5d5f6;
235
- padding-top: ${({ paddingTop }) => `${paddingTop ?? 0}px`};
236
- padding-bottom: ${({ paddingBottom }) => `${paddingBottom ?? 0}px`};
237
- `;
package/row/types.d.ts DELETED
@@ -1,28 +0,0 @@
1
- /// <reference types="react" />
2
- declare type Props = {
3
- /**
4
- * Space applied between each child.
5
- */
6
- gutter?: "none" | "xxxsmall" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge";
7
- /**
8
- * Alignment applied to children.
9
- */
10
- align?: "start" | "center" | "end" | "baseline" | "stretch";
11
- /**
12
- * Justification applied to children.
13
- */
14
- justify?: "start" | "center" | "end" | "spaceBetween" | "spaceAround" | "spaceEvenly";
15
- /**
16
- * If true, children will wrap onto multiple rows.
17
- */
18
- wrap?: boolean;
19
- /**
20
- * If true, children are shown in reverse order.
21
- */
22
- reverse?: boolean;
23
- /**
24
- * Custom content inside the row.
25
- */
26
- children: React.ReactNode;
27
- };
28
- export default Props;
package/stack/Stack.d.ts DELETED
@@ -1,4 +0,0 @@
1
- /// <reference types="react" />
2
- import StackPropsType from "./types";
3
- declare const DxcStack: ({ alignX, as, divider, gutter, reverse, wrap, children, }: StackPropsType) => JSX.Element;
4
- export default DxcStack;
package/stack/Stack.js DELETED
@@ -1,56 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = void 0;
9
-
10
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
-
12
- var _react = _interopRequireDefault(require("react"));
13
-
14
- var _styledComponents = _interopRequireDefault(require("styled-components"));
15
-
16
- var _templateObject, _templateObject2;
17
-
18
- var DxcStack = function DxcStack(_ref) {
19
- var _ref$alignX = _ref.alignX,
20
- alignX = _ref$alignX === void 0 ? "stretch" : _ref$alignX,
21
- _ref$as = _ref.as,
22
- as = _ref$as === void 0 ? "div" : _ref$as,
23
- _ref$divider = _ref.divider,
24
- divider = _ref$divider === void 0 ? false : _ref$divider,
25
- _ref$gutter = _ref.gutter,
26
- gutter = _ref$gutter === void 0 ? "0rem" : _ref$gutter,
27
- _ref$reverse = _ref.reverse,
28
- reverse = _ref$reverse === void 0 ? false : _ref$reverse,
29
- _ref$wrap = _ref.wrap,
30
- wrap = _ref$wrap === void 0 ? false : _ref$wrap,
31
- children = _ref.children;
32
- return /*#__PURE__*/_react["default"].createElement(Stack, {
33
- gutter: gutter,
34
- alignX: alignX,
35
- reverse: reverse,
36
- as: as,
37
- divider: divider,
38
- wrap: wrap
39
- }, _react["default"].Children.map(children, function (child, index) {
40
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, child, divider && index !== _react["default"].Children.count(children) - 1 && /*#__PURE__*/_react["default"].createElement(Divider, null));
41
- }));
42
- };
43
-
44
- var Divider = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n width: 100%;\n height: 1px;\n background-color: #999999;\n"])));
45
-
46
- var Stack = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n ", "\n padding: 0px;\n margin: 0px;\n height: 100%;\n"])), function (_ref2) {
47
- var alignX = _ref2.alignX,
48
- gutter = _ref2.gutter,
49
- reverse = _ref2.reverse,
50
- divider = _ref2.divider,
51
- wrap = _ref2.wrap;
52
- return "\n flex-direction: ".concat(reverse ? "column-reverse" : "column", ";\n align-items: ").concat(alignX === "start" || alignX === "end" ? "flex-".concat(alignX) : alignX, ";\n gap: ").concat(divider ? "calc(".concat(gutter, "/2 - 1px)") : gutter, ";\n flex-wrap: ").concat(wrap ? "wrap" : "nowrap", ";\n ");
53
- });
54
-
55
- var _default = DxcStack;
56
- exports["default"] = _default;