@dxc-technology/halstack-react 0.0.0-aea2c74 → 0.0.0-af3aa81

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 (251) hide show
  1. package/README.md +46 -0
  2. package/dist/index.d.mts +6553 -0
  3. package/dist/index.d.ts +6553 -0
  4. package/dist/index.js +14547 -0
  5. package/dist/index.mjs +14489 -0
  6. package/package.json +69 -68
  7. package/BackgroundColorContext.d.ts +0 -10
  8. package/BackgroundColorContext.js +0 -48
  9. package/ThemeContext.d.ts +0 -15
  10. package/ThemeContext.js +0 -243
  11. package/V3Select/V3Select.js +0 -455
  12. package/V3Select/index.d.ts +0 -27
  13. package/V3Textarea/V3Textarea.js +0 -260
  14. package/V3Textarea/index.d.ts +0 -27
  15. package/accordion/Accordion.d.ts +0 -4
  16. package/accordion/Accordion.js +0 -258
  17. package/accordion/Accordion.stories.tsx +0 -300
  18. package/accordion/types.d.ts +0 -68
  19. package/accordion/types.js +0 -5
  20. package/accordion-group/AccordionGroup.d.ts +0 -7
  21. package/accordion-group/AccordionGroup.js +0 -170
  22. package/accordion-group/AccordionGroup.stories.tsx +0 -225
  23. package/accordion-group/types.d.ts +0 -72
  24. package/accordion-group/types.js +0 -5
  25. package/alert/Alert.d.ts +0 -4
  26. package/alert/Alert.js +0 -290
  27. package/alert/Alert.stories.tsx +0 -170
  28. package/alert/types.d.ts +0 -49
  29. package/alert/types.js +0 -5
  30. package/badge/Badge.js +0 -59
  31. package/box/Box.d.ts +0 -4
  32. package/box/Box.js +0 -126
  33. package/box/Box.stories.tsx +0 -132
  34. package/box/types.d.ts +0 -43
  35. package/box/types.js +0 -5
  36. package/button/Button.d.ts +0 -4
  37. package/button/Button.js +0 -179
  38. package/button/Button.stories.tsx +0 -276
  39. package/button/types.d.ts +0 -57
  40. package/button/types.js +0 -5
  41. package/card/Card.d.ts +0 -4
  42. package/card/Card.js +0 -164
  43. package/card/Card.stories.tsx +0 -201
  44. package/card/ice-cream.jpg +0 -0
  45. package/card/types.d.ts +0 -67
  46. package/card/types.js +0 -5
  47. package/checkbox/Checkbox.d.ts +0 -4
  48. package/checkbox/Checkbox.js +0 -253
  49. package/checkbox/Checkbox.stories.tsx +0 -192
  50. package/checkbox/types.d.ts +0 -60
  51. package/checkbox/types.js +0 -5
  52. package/chip/Chip.d.ts +0 -4
  53. package/chip/Chip.js +0 -199
  54. package/chip/Chip.stories.tsx +0 -121
  55. package/chip/types.d.ts +0 -53
  56. package/chip/types.js +0 -5
  57. package/common/OpenSans.css +0 -81
  58. package/common/RequiredComponent.js +0 -32
  59. package/common/fonts/OpenSans-Bold.ttf +0 -0
  60. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  61. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  62. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  63. package/common/fonts/OpenSans-Italic.ttf +0 -0
  64. package/common/fonts/OpenSans-Light.ttf +0 -0
  65. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  66. package/common/fonts/OpenSans-Regular.ttf +0 -0
  67. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  68. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  69. package/common/utils.js +0 -22
  70. package/common/variables.js +0 -1574
  71. package/date/Date.js +0 -373
  72. package/date/index.d.ts +0 -27
  73. package/date-input/DateInput.d.ts +0 -4
  74. package/date-input/DateInput.js +0 -358
  75. package/date-input/DateInput.stories.tsx +0 -138
  76. package/date-input/types.d.ts +0 -100
  77. package/date-input/types.js +0 -5
  78. package/dialog/Dialog.d.ts +0 -4
  79. package/dialog/Dialog.js +0 -165
  80. package/dialog/Dialog.stories.tsx +0 -212
  81. package/dialog/types.d.ts +0 -43
  82. package/dialog/types.js +0 -5
  83. package/dropdown/Dropdown.d.ts +0 -4
  84. package/dropdown/Dropdown.js +0 -417
  85. package/dropdown/Dropdown.stories.tsx +0 -247
  86. package/dropdown/types.d.ts +0 -89
  87. package/dropdown/types.js +0 -5
  88. package/file-input/FileInput.d.ts +0 -4
  89. package/file-input/FileInput.js +0 -590
  90. package/file-input/FileItem.d.ts +0 -14
  91. package/file-input/FileItem.js +0 -184
  92. package/file-input/types.d.ts +0 -112
  93. package/file-input/types.js +0 -5
  94. package/footer/Footer.d.ts +0 -4
  95. package/footer/Footer.js +0 -260
  96. package/footer/Footer.stories.tsx +0 -130
  97. package/footer/Icons.d.ts +0 -2
  98. package/footer/Icons.js +0 -77
  99. package/footer/types.d.ts +0 -65
  100. package/footer/types.js +0 -5
  101. package/header/Header.d.ts +0 -7
  102. package/header/Header.js +0 -324
  103. package/header/Header.stories.tsx +0 -162
  104. package/header/Icons.d.ts +0 -2
  105. package/header/Icons.js +0 -34
  106. package/header/types.d.ts +0 -47
  107. package/header/types.js +0 -5
  108. package/heading/Heading.d.ts +0 -4
  109. package/heading/Heading.js +0 -159
  110. package/heading/Heading.stories.tsx +0 -53
  111. package/heading/types.d.ts +0 -33
  112. package/heading/types.js +0 -5
  113. package/input-text/Icons.js +0 -22
  114. package/input-text/InputText.js +0 -611
  115. package/input-text/index.d.ts +0 -36
  116. package/layout/ApplicationLayout.d.ts +0 -10
  117. package/layout/ApplicationLayout.js +0 -225
  118. package/layout/ApplicationLayout.stories.tsx +0 -171
  119. package/layout/Icons.js +0 -55
  120. package/layout/types.d.ts +0 -57
  121. package/layout/types.js +0 -5
  122. package/link/Link.d.ts +0 -3
  123. package/link/Link.js +0 -161
  124. package/link/Link.stories.tsx +0 -146
  125. package/link/types.d.ts +0 -74
  126. package/link/types.js +0 -5
  127. package/list/List.d.ts +0 -8
  128. package/list/List.js +0 -47
  129. package/list/List.stories.tsx +0 -85
  130. package/main.d.ts +0 -48
  131. package/main.js +0 -395
  132. package/number-input/NumberInput.d.ts +0 -4
  133. package/number-input/NumberInput.js +0 -83
  134. package/number-input/NumberInput.stories.tsx +0 -115
  135. package/number-input/NumberInputContext.d.ts +0 -4
  136. package/number-input/NumberInputContext.js +0 -19
  137. package/number-input/numberInputContextTypes.d.ts +0 -19
  138. package/number-input/numberInputContextTypes.js +0 -5
  139. package/number-input/types.d.ts +0 -117
  140. package/number-input/types.js +0 -5
  141. package/paginator/Icons.js +0 -66
  142. package/paginator/Paginator.d.ts +0 -4
  143. package/paginator/Paginator.js +0 -192
  144. package/paginator/Paginator.stories.tsx +0 -63
  145. package/paginator/types.d.ts +0 -38
  146. package/paginator/types.js +0 -5
  147. package/password-input/PasswordInput.d.ts +0 -4
  148. package/password-input/PasswordInput.js +0 -163
  149. package/password-input/PasswordInput.stories.tsx +0 -131
  150. package/password-input/types.d.ts +0 -107
  151. package/password-input/types.js +0 -5
  152. package/progress-bar/ProgressBar.d.ts +0 -4
  153. package/progress-bar/ProgressBar.js +0 -170
  154. package/progress-bar/ProgressBar.stories.jsx +0 -58
  155. package/progress-bar/types.d.ts +0 -37
  156. package/progress-bar/types.js +0 -5
  157. package/radio/Radio.d.ts +0 -4
  158. package/radio/Radio.js +0 -174
  159. package/radio/Radio.stories.tsx +0 -192
  160. package/radio/types.d.ts +0 -54
  161. package/radio/types.js +0 -5
  162. package/resultsetTable/ResultsetTable.d.ts +0 -4
  163. package/resultsetTable/ResultsetTable.js +0 -251
  164. package/resultsetTable/ResultsetTable.stories.tsx +0 -276
  165. package/resultsetTable/types.d.ts +0 -67
  166. package/resultsetTable/types.js +0 -5
  167. package/row/Row.d.ts +0 -11
  168. package/row/Row.js +0 -124
  169. package/row/Row.stories.tsx +0 -223
  170. package/select/Select.d.ts +0 -4
  171. package/select/Select.js +0 -863
  172. package/select/Select.stories.tsx +0 -572
  173. package/select/types.d.ts +0 -170
  174. package/select/types.js +0 -5
  175. package/sidenav/Sidenav.d.ts +0 -9
  176. package/sidenav/Sidenav.js +0 -136
  177. package/sidenav/Sidenav.stories.tsx +0 -165
  178. package/sidenav/types.d.ts +0 -50
  179. package/sidenav/types.js +0 -5
  180. package/slider/Slider.d.ts +0 -4
  181. package/slider/Slider.js +0 -317
  182. package/slider/Slider.stories.tsx +0 -177
  183. package/slider/types.d.ts +0 -78
  184. package/slider/types.js +0 -5
  185. package/spinner/Spinner.d.ts +0 -4
  186. package/spinner/Spinner.js +0 -250
  187. package/spinner/Spinner.stories.jsx +0 -102
  188. package/spinner/types.d.ts +0 -32
  189. package/spinner/types.js +0 -5
  190. package/stack/Stack.d.ts +0 -10
  191. package/stack/Stack.js +0 -94
  192. package/stack/Stack.stories.tsx +0 -150
  193. package/switch/Switch.d.ts +0 -4
  194. package/switch/Switch.js +0 -179
  195. package/switch/Switch.stories.tsx +0 -160
  196. package/switch/types.d.ts +0 -58
  197. package/switch/types.js +0 -5
  198. package/table/Table.d.ts +0 -4
  199. package/table/Table.js +0 -118
  200. package/table/Table.stories.jsx +0 -276
  201. package/table/types.d.ts +0 -21
  202. package/table/types.js +0 -5
  203. package/tabs/Tabs.d.ts +0 -4
  204. package/tabs/Tabs.js +0 -213
  205. package/tabs/Tabs.stories.tsx +0 -121
  206. package/tabs/types.d.ts +0 -70
  207. package/tabs/types.js +0 -5
  208. package/tag/Tag.d.ts +0 -4
  209. package/tag/Tag.js +0 -193
  210. package/tag/Tag.stories.tsx +0 -145
  211. package/tag/types.d.ts +0 -60
  212. package/tag/types.js +0 -5
  213. package/text/Text.d.ts +0 -7
  214. package/text/Text.js +0 -30
  215. package/text/Text.stories.tsx +0 -19
  216. package/text-input/TextInput.d.ts +0 -4
  217. package/text-input/TextInput.js +0 -786
  218. package/text-input/TextInput.stories.tsx +0 -456
  219. package/text-input/types.d.ts +0 -159
  220. package/text-input/types.js +0 -5
  221. package/textarea/Textarea.d.ts +0 -4
  222. package/textarea/Textarea.js +0 -284
  223. package/textarea/Textarea.stories.jsx +0 -135
  224. package/textarea/types.d.ts +0 -130
  225. package/textarea/types.js +0 -5
  226. package/toggle/Toggle.js +0 -186
  227. package/toggle/index.d.ts +0 -21
  228. package/toggle-group/ToggleGroup.d.ts +0 -4
  229. package/toggle-group/ToggleGroup.js +0 -214
  230. package/toggle-group/ToggleGroup.stories.tsx +0 -173
  231. package/toggle-group/types.d.ts +0 -97
  232. package/toggle-group/types.js +0 -5
  233. package/upload/Upload.js +0 -201
  234. package/upload/buttons-upload/ButtonsUpload.js +0 -111
  235. package/upload/buttons-upload/Icons.js +0 -40
  236. package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
  237. package/upload/dragAndDropArea/Icons.js +0 -39
  238. package/upload/file-upload/FileToUpload.js +0 -115
  239. package/upload/file-upload/Icons.js +0 -66
  240. package/upload/files-upload/FilesToUpload.js +0 -109
  241. package/upload/index.d.ts +0 -15
  242. package/upload/transaction/Icons.js +0 -160
  243. package/upload/transaction/Transaction.js +0 -104
  244. package/upload/transactions/Transactions.js +0 -94
  245. package/useTheme.d.ts +0 -2
  246. package/useTheme.js +0 -22
  247. package/wizard/Wizard.d.ts +0 -4
  248. package/wizard/Wizard.js +0 -281
  249. package/wizard/Wizard.stories.tsx +0 -224
  250. package/wizard/types.d.ts +0 -60
  251. package/wizard/types.js +0 -5
@@ -1,225 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports["default"] = void 0;
11
-
12
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
-
14
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
-
16
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
17
-
18
- var _react = _interopRequireWildcard(require("react"));
19
-
20
- var _main = require("../main");
21
-
22
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
23
-
24
- var _variables = require("../common/variables.js");
25
-
26
- var _Icons = require("./Icons");
27
-
28
- var _useTheme = _interopRequireDefault(require("../useTheme"));
29
-
30
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
31
-
32
- var _excluded = ["displayArrow", "mode"];
33
-
34
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
35
-
36
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
37
-
38
- var year = new Date().getFullYear();
39
-
40
- var Header = function Header(_ref) {
41
- var children = _ref.children;
42
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children);
43
- };
44
-
45
- var Main = function Main(_ref2) {
46
- var children = _ref2.children;
47
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children);
48
- };
49
-
50
- var Footer = function Footer(_ref3) {
51
- var children = _ref3.children;
52
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children);
53
- };
54
-
55
- var SideNav = function SideNav(props) {
56
- var _props$displayArrow = props.displayArrow,
57
- displayArrow = _props$displayArrow === void 0 ? true : _props$displayArrow,
58
- _props$mode = props.mode,
59
- mode = _props$mode === void 0 ? "overlay" : _props$mode,
60
- childProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
61
- return /*#__PURE__*/_react["default"].createElement(_main.DxcSidenav, childProps, childProps.children);
62
- };
63
-
64
- var defaultFooter = function defaultFooter() {
65
- return /*#__PURE__*/_react["default"].createElement(_main.DxcFooter, {
66
- copyright: "\xA9 DXC Technology ".concat(year, "\u200B\u200B\u200B\u200B. All rights reserved."),
67
- bottomLinks: [{
68
- href: "https://www.linkedin.com/company/dxctechnology",
69
- text: "Linkedin"
70
- }, {
71
- href: "https://twitter.com/dxctechnology",
72
- text: "Twitter"
73
- }, {
74
- href: "https://www.facebook.com/DXCTechnology/",
75
- text: "Facebook"
76
- }],
77
- socialLinks: [{
78
- href: "https://www.linkedin.com/company/dxctechnology",
79
- logo: _Icons.linkedinLogo
80
- }, {
81
- href: "https://twitter.com/dxctechnology",
82
- logo: _Icons.twitterLogo
83
- }, {
84
- href: "https://www.facebook.com/DXCTechnology/",
85
- logo: _Icons.facebookLogo
86
- }]
87
- });
88
- };
89
-
90
- var defaultHeader = function defaultHeader() {
91
- return /*#__PURE__*/_react["default"].createElement(_main.DxcHeader, {
92
- underlined: true
93
- });
94
- };
95
-
96
- var childTypeExists = function childTypeExists(children, childType) {
97
- return children.find(function (child) {
98
- return child && child.type && child.type === childType;
99
- });
100
- };
101
-
102
- var DxcApplicationLayout = function DxcApplicationLayout(_ref4) {
103
- var children = _ref4.children;
104
- var ref = (0, _react.useRef)(null);
105
- var colorsTheme = (0, _useTheme["default"])();
106
-
107
- var _useState = (0, _react.useState)(true),
108
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
109
- isSideNavVisible = _useState2[0],
110
- setIsSideNavVisible = _useState2[1];
111
-
112
- var _useState3 = (0, _react.useState)(false),
113
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
114
- isResponsive = _useState4[0],
115
- setIsResponsive = _useState4[1];
116
-
117
- var childrenArray = _react["default"].Children.toArray(children);
118
-
119
- var header = childTypeExists(childrenArray, _main.DxcHeader) || childTypeExists(childrenArray, Header) || defaultHeader();
120
- var footer = childTypeExists(childrenArray, _main.DxcFooter) || childTypeExists(childrenArray, Footer) || defaultFooter();
121
- var sideNav = childTypeExists(childrenArray, SideNav);
122
- var main = childTypeExists(childrenArray, Main);
123
- var displayArrow = sideNav && sideNav.props && sideNav.props.displayArrow;
124
- var sideNavMode = sideNav && sideNav.props && sideNav.props.mode;
125
-
126
- var ArrowIcon = function ArrowIcon() {
127
- return /*#__PURE__*/_react["default"].createElement("svg", {
128
- xmlns: "http://www.w3.org/2000/svg",
129
- width: "15.995",
130
- height: "10.01",
131
- viewBox: "0 0 15.995 10.01"
132
- }, /*#__PURE__*/_react["default"].createElement("path", {
133
- "data-testid": "arrow-to-right",
134
- d: "M17.71,11.29l-4-4a1,1,0,0,0-1.42,1.42L14.59,11H3a1,1,0,0,0,0,2H14.59l-2.3,2.29a1,1,0,1,0,1.42,1.42l4-4a1.034,1.034,0,0,0,0-1.42Z",
135
- transform: "translate(-2 -6.996)"
136
- }));
137
- };
138
-
139
- var handleResize = function handleResize(width) {
140
- if (width) {
141
- setIsResponsive(width <= _variables.responsiveSizes.tablet);
142
- setIsSideNavVisible(true);
143
- }
144
- };
145
-
146
- var handleEventListener = function handleEventListener() {
147
- handleResize(ref.current.offsetWidth);
148
- };
149
-
150
- (0, _react.useEffect)(function () {
151
- if (ref.current) {
152
- window.addEventListener("resize", handleEventListener);
153
- handleResize(ref.current.offsetWidth);
154
- }
155
-
156
- return function () {
157
- window.removeEventListener("resize", handleEventListener);
158
- };
159
- }, []);
160
-
161
- var handleSidenav = function handleSidenav() {
162
- setIsSideNavVisible(!isSideNavVisible);
163
- };
164
-
165
- return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
166
- theme: colorsTheme.sidenav
167
- }, /*#__PURE__*/_react["default"].createElement(ApplicationLayoutContainer, {
168
- ref: ref
169
- }, /*#__PURE__*/_react["default"].createElement(HeaderContainer, null, header), /*#__PURE__*/_react["default"].createElement(BodyContainer, null, /*#__PURE__*/_react["default"].createElement(ContentContainer, null, /*#__PURE__*/_react["default"].createElement(SideNavArrowContainer, {
170
- isSideNavVisible: isSideNavVisible
171
- }, sideNav, /*#__PURE__*/_react["default"].createElement(ArrowContainer, null, sideNav && (displayArrow || isResponsive) && /*#__PURE__*/_react["default"].createElement(ArrowTrigger, {
172
- role: "button",
173
- tabIndex: 0,
174
- onClick: handleSidenav,
175
- isSideNavVisible: isSideNavVisible
176
- }, /*#__PURE__*/_react["default"].createElement(ArrowIcon, null)))), /*#__PURE__*/_react["default"].createElement(MainBodyContainer, null, /*#__PURE__*/_react["default"].createElement(MainContent, {
177
- sideNav: sideNav,
178
- mode: isResponsive ? "overlay" : sideNavMode,
179
- isSideNavVisible: isSideNavVisible
180
- }, main), /*#__PURE__*/_react["default"].createElement(FooterContainer, {
181
- sideNav: sideNav,
182
- mode: isResponsive ? "overlay" : sideNavMode,
183
- isSideNavVisible: isSideNavVisible
184
- }, footer))))));
185
- };
186
-
187
- DxcApplicationLayout.Header = Header;
188
- DxcApplicationLayout.Main = Main;
189
- DxcApplicationLayout.Footer = Footer;
190
- DxcApplicationLayout.SideNav = SideNav;
191
-
192
- var ApplicationLayoutContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n position: absolute;\n top: 64px;\n bottom: 0;\n left: 0;\n right: 0;\n"])));
193
-
194
- var HeaderContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n z-index: 1250;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n"])));
195
-
196
- var BodyContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n flex: 1;\n display: flex;\n flex-direction: column;\n"])));
197
-
198
- var ContentContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex: 1 1 auto;\n align-items: flex-start;\n"])));
199
-
200
- var MainBodyContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n width: 100%;\n min-width: 0;\n display: flex;\n flex-direction: column;\n"])));
201
-
202
- var FooterContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n margin-left: ", ";\n transition: margin 0.4s ease-in-out;\n"])), function (props) {
203
- return props.sideNav ? props.mode === "push" && !props.isSideNavVisible || props.mode === "overlay" ? "-300px" : "" : "";
204
- });
205
-
206
- var MainContent = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n flex-grow: 1;\n position: relative;\n min-height: calc(100vh - 184px);\n margin-left: ", ";\n transition: margin 0.4s ease-in-out;\n"])), function (props) {
207
- return props.sideNav ? props.mode === "push" && props.isSideNavVisible ? "" : "-297px" : "";
208
- });
209
-
210
- var SideNavArrowContainer = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: row;\n z-index: 1200;\n transform: ", ";\n transition: transform 0.4s ease-in-out;\n height: calc(100vh - 64px);\n position: sticky;\n top: 64px;\n"])), function (props) {
211
- return props.isSideNavVisible ? "translateX(0)" : !props.isSideNavVisible ? "translateX(-100%)" : "";
212
- });
213
-
214
- var ArrowContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n height: calc(100vh - 64px);\n left: 279px;\n"])));
215
-
216
- var ArrowTrigger = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n justify-content: center;\n position: sticky;\n top: 45vh;\n width: 42px;\n min-height: 42px;\n background-color: ", ";\n border-radius: 50%;\n transform: ", ";\n transition: transform 0.4s ease-in-out;\n z-index: 1250;\n cursor: pointer;\n & > svg {\n fill: ", ";\n }\n"])), function (props) {
217
- return "".concat(props.theme.arrowContainerColor);
218
- }, function (props) {
219
- return props.isSideNavVisible ? "rotate(-180deg)" : "rotate(0deg)";
220
- }, function (props) {
221
- return props.theme.arrowColor;
222
- });
223
-
224
- var _default = DxcApplicationLayout;
225
- exports["default"] = _default;
@@ -1,171 +0,0 @@
1
- import React from "react";
2
- import DxcApplicationLayout from "./ApplicationLayout";
3
- import DxcSidenav from "../sidenav/Sidenav";
4
- import Title from "../../.storybook/components/Title";
5
- import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
6
- import { userEvent, within, waitFor } from "@storybook/testing-library";
7
-
8
- export default {
9
- title: "Application Layout ",
10
- component: DxcApplicationLayout,
11
- parameters: {
12
- viewport: {
13
- viewports: INITIAL_VIEWPORTS,
14
- }
15
- }
16
- };
17
-
18
- export const DefaultApplicationLayout = () => (
19
- <>
20
- <DxcApplicationLayout>
21
- <DxcApplicationLayout.Main>
22
- <Title title="Default application layout" theme="light" level={4} />
23
- <p>Main Content</p>
24
- <p>Main Content</p>
25
- <p>Main Content</p>
26
- <p>Main Content</p>
27
- </DxcApplicationLayout.Main>
28
- </DxcApplicationLayout>
29
- </>
30
- );
31
-
32
- export const ApplicationLayoutWithDefaultSidenav = () => (
33
- <>
34
- <DxcApplicationLayout>
35
- <DxcApplicationLayout.SideNav>
36
- <DxcSidenav.Title>Application layout with sidenav</DxcSidenav.Title>
37
- <p>SideNav Content</p>
38
- <p>SideNav Content</p>
39
- <p>SideNav Content</p>
40
- <p>SideNav Content</p>
41
- <p>SideNav Content</p>
42
- </DxcApplicationLayout.SideNav>
43
- <DxcApplicationLayout.Main>
44
- <p>Main Content</p>
45
- <p>Main Content</p>
46
- <p>Main Content</p>
47
- <p>Main Content</p>
48
- </DxcApplicationLayout.Main>
49
- </DxcApplicationLayout>
50
- </>
51
- );
52
-
53
- export const ApplicationLayoutWithPushSidenav = () => (
54
- <>
55
- <DxcApplicationLayout>
56
- <DxcApplicationLayout.SideNav mode="push">
57
- <DxcSidenav.Title>Application layout with push sidenav</DxcSidenav.Title>
58
- <p>SideNav Content</p>
59
- <p>SideNav Content</p>
60
- <p>SideNav Content</p>
61
- <p>SideNav Content</p>
62
- <p>SideNav Content</p>
63
- </DxcApplicationLayout.SideNav>
64
- <DxcApplicationLayout.Main>
65
- <p>Main Content</p>
66
- <p>Main Content</p>
67
- <p>Main Content</p>
68
- <p>Main Content</p>
69
- </DxcApplicationLayout.Main>
70
- </DxcApplicationLayout>
71
- </>
72
- );
73
-
74
- export const ApplicationLayoutWithArrowSidenav = () => (
75
- <>
76
- <DxcApplicationLayout>
77
- <DxcApplicationLayout.SideNav mode="overlay" displayArrow>
78
- <DxcSidenav.Title>Application layout with push sidenav</DxcSidenav.Title>
79
- <p>SideNav Content</p>
80
- <p>SideNav Content</p>
81
- <p>SideNav Content</p>
82
- <p>SideNav Content</p>
83
- <p>SideNav Content</p>
84
- </DxcApplicationLayout.SideNav>
85
- <DxcApplicationLayout.Main>
86
- <p>Main Content</p>
87
- <p>Main Content</p>
88
- <p>Main Content</p>
89
- <p>Main Content</p>
90
- </DxcApplicationLayout.Main>
91
- </DxcApplicationLayout>
92
- </>
93
- );
94
-
95
- export const ApplicationLayoutWithResponsiveSidenav = () => (
96
- <>
97
- <DxcApplicationLayout>
98
- <DxcApplicationLayout.SideNav>
99
- <DxcSidenav.Title>Application layout with push sidenav</DxcSidenav.Title>
100
- <p>SideNav Content</p>
101
- <p>SideNav Content</p>
102
- <p>SideNav Content</p>
103
- <p>SideNav Content</p>
104
- <p>SideNav Content</p>
105
- </DxcApplicationLayout.SideNav>
106
- <DxcApplicationLayout.Main>
107
- <p>Main Content</p>
108
- <p>Main Content</p>
109
- <p>Main Content</p>
110
- <p>Main Content</p>
111
- </DxcApplicationLayout.Main>
112
- </DxcApplicationLayout>
113
- </>
114
- );
115
-
116
- ApplicationLayoutWithResponsiveSidenav.parameters = {
117
- viewport: {
118
- defaultViewport: 'pixel',
119
- },
120
- };
121
-
122
- export const ApplicationLayoutWithCustomHeader = () => (
123
- <>
124
- <DxcApplicationLayout>
125
- <DxcApplicationLayout.Header> <p>Custom Header</p> </DxcApplicationLayout.Header>
126
- <DxcApplicationLayout.SideNav>
127
- <DxcSidenav.Title>Application layout with push sidenav</DxcSidenav.Title>
128
- <p>SideNav Content</p>
129
- <p>SideNav Content</p>
130
- <p>SideNav Content</p>
131
- <p>SideNav Content</p>
132
- <p>SideNav Content</p>
133
- </DxcApplicationLayout.SideNav>
134
- <DxcApplicationLayout.Main>
135
- <p>Main Content</p>
136
- <p>Main Content</p>
137
- <p>Main Content</p>
138
- <p>Main Content</p>
139
- </DxcApplicationLayout.Main>
140
- </DxcApplicationLayout>
141
- </>
142
- );
143
-
144
- export const ApplicationLayoutWithCustomFooter = () => (
145
- <>
146
- <DxcApplicationLayout>
147
- <DxcApplicationLayout.SideNav>
148
- <DxcSidenav.Title>Application layout with push sidenav</DxcSidenav.Title>
149
- <p>SideNav Content</p>
150
- <p>SideNav Content</p>
151
- <p>SideNav Content</p>
152
- <p>SideNav Content</p>
153
- <p>SideNav Content</p>
154
- </DxcApplicationLayout.SideNav>
155
- <DxcApplicationLayout.Main>
156
- <p>Main Content</p>
157
- <p>Main Content</p>
158
- <p>Main Content</p>
159
- <p>Main Content</p>
160
- </DxcApplicationLayout.Main>
161
- <DxcApplicationLayout.Footer> <p>Custom Footer</p> </DxcApplicationLayout.Footer>
162
- </DxcApplicationLayout>
163
- </>
164
- );
165
-
166
- export const ApplicationLayoutWithClosingSidenav = ApplicationLayoutWithArrowSidenav.bind({});
167
- ApplicationLayoutWithClosingSidenav.play = async ({ canvasElement }) => {
168
- const canvas = within(canvasElement);
169
- const arrow = canvas.getByRole("button");
170
- await userEvent.click(arrow);
171
- };
package/layout/Icons.js DELETED
@@ -1,55 +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.twitterLogo = exports.linkedinLogo = exports.facebookLogo = void 0;
9
-
10
- var _react = _interopRequireDefault(require("react"));
11
-
12
- var facebookLogo = /*#__PURE__*/_react["default"].createElement("svg", {
13
- version: "1.1",
14
- id: "Capa_1",
15
- x: "0px",
16
- y: "0px",
17
- width: "438.536px",
18
- height: "438.536px",
19
- viewBox: "0 0 438.536 438.536",
20
- fill: "#FFFFFF"
21
- }, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("path", {
22
- d: "M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123 C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126 h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225 C438.532,59.576,430.49,40.204,414.41,24.123z M373.155,225.548h-49.963V406.84h-74.802V225.548H210.99V163.02h37.401v-37.402 c0-26.838,6.283-47.107,18.843-60.813c12.559-13.706,33.304-20.555,62.242-20.555h49.963v62.526h-31.401 c-10.663,0-17.467,1.853-20.417,5.568c-2.949,3.711-4.428,10.23-4.428,19.558v31.119h56.534L373.155,225.548z"
23
- })));
24
-
25
- exports.facebookLogo = facebookLogo;
26
-
27
- var twitterLogo = /*#__PURE__*/_react["default"].createElement("svg", {
28
- version: "1.1",
29
- id: "Capa_1",
30
- x: "0px",
31
- y: "0px",
32
- width: "438.536px",
33
- height: "438.536px",
34
- viewBox: "0 0 438.536 438.536",
35
- fill: "#FFFFFF"
36
- }, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("path", {
37
- d: "M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123 C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126 h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225 C438.532,59.576,430.49,40.204,414.41,24.123z M335.471,168.735c0.191,1.713,0.288,4.278,0.288,7.71 c0,15.989-2.334,32.025-6.995,48.104c-4.661,16.087-11.8,31.504-21.416,46.254c-9.606,14.749-21.074,27.791-34.396,39.115 c-13.325,11.32-29.311,20.365-47.968,27.117c-18.648,6.762-38.637,10.143-59.953,10.143c-33.116,0-63.76-8.952-91.931-26.836 c4.568,0.568,9.329,0.855,14.275,0.855c27.6,0,52.439-8.565,74.519-25.7c-12.941-0.185-24.506-4.179-34.688-11.991 c-10.185-7.803-17.273-17.699-21.271-29.691c4.947,0.76,8.658,1.137,11.132,1.137c4.187,0,9.042-0.76,14.56-2.279 c-13.894-2.669-25.598-9.562-35.115-20.697c-9.519-11.136-14.277-23.84-14.277-38.114v-0.571 c10.085,4.755,19.602,7.229,28.549,7.422c-17.321-11.613-25.981-28.265-25.981-49.963c0-10.66,2.758-20.747,8.278-30.264 c15.035,18.464,33.311,33.213,54.816,44.252c21.507,11.038,44.54,17.227,69.092,18.558c-0.95-3.616-1.427-8.186-1.427-13.704 c0-16.562,5.853-30.692,17.56-42.399c11.703-11.706,25.837-17.561,42.394-17.561c17.515,0,32.079,6.283,43.688,18.846 c13.134-2.474,25.892-7.33,38.26-14.56c-4.757,14.652-13.613,25.788-26.55,33.402c12.368-1.716,23.88-4.95,34.537-9.708 C357.458,149.793,347.462,160.166,335.471,168.735z"
38
- })));
39
-
40
- exports.twitterLogo = twitterLogo;
41
-
42
- var linkedinLogo = /*#__PURE__*/_react["default"].createElement("svg", {
43
- version: "1.1",
44
- id: "Capa_1",
45
- x: "0px",
46
- y: "0px",
47
- width: "438.536px",
48
- height: "438.536px",
49
- viewBox: "0 0 438.536 438.536",
50
- fill: "#FFFFFF"
51
- }, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("path", {
52
- d: "M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123 C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126 h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225 C438.532,59.576,430.49,40.204,414.41,24.123z M133.618,367.157H67.666V169.016h65.952V367.157z M127.626,132.332 c-6.851,6.567-15.893,9.851-27.124,9.851h-0.288c-10.848,0-19.648-3.284-26.407-9.851c-6.76-6.567-10.138-14.703-10.138-24.41 c0-9.897,3.476-18.083,10.421-24.556c6.95-6.471,15.942-9.708,26.98-9.708c11.039,0,19.89,3.237,26.553,9.708 c6.661,6.473,10.088,14.659,10.277,24.556C137.899,117.625,134.477,125.761,127.626,132.332z M370.873,367.157h-65.952v-105.92 c0-29.879-11.036-44.823-33.116-44.823c-8.374,0-15.42,2.331-21.128,6.995c-5.715,4.661-9.996,10.324-12.847,16.991 c-1.335,3.422-1.999,8.75-1.999,15.981v110.775h-65.952c0.571-119.529,0.571-185.579,0-198.142h65.952v27.974 c13.867-21.681,33.558-32.544,59.101-32.544c22.84,0,41.21,7.52,55.104,22.554c13.895,15.037,20.841,37.214,20.841,66.519v113.64 H370.873z"
53
- })));
54
-
55
- exports.linkedinLogo = linkedinLogo;
package/layout/types.d.ts DELETED
@@ -1,57 +0,0 @@
1
- /// <reference types="react" />
2
- declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
- declare type Padding = {
4
- top?: Space;
5
- bottom?: Space;
6
- left?: Space;
7
- right?: Space;
8
- };
9
- declare type ChildrenType = AppLayoutHeaderPropsType | AppLayoutMainPropsType | AppLayoutFooterPropsType | AppLayoutSidenavPropsType;
10
- export declare type AppLayoutHeaderPropsType = {
11
- /**
12
- * Everything between this tags will be displayed as a header, at the top of the screen.
13
- * This is optional and if it is not specified, the DxcHeader will be shown by default.
14
- */
15
- children?: React.ReactNode;
16
- };
17
- export declare type AppLayoutMainPropsType = {
18
- /**
19
- * Everything between the tags will be displayed as the content of the main part of the application.
20
- */
21
- children: React.ReactNode;
22
- };
23
- export declare type AppLayoutFooterPropsType = {
24
- /**
25
- * Everything between the tags will be displayed as a footer, at the bottom of the screen.
26
- * This is optional and if it is not specified, the DxcFooter will be shown by default.
27
- */
28
- children?: React.ReactNode;
29
- };
30
- export declare type AppLayoutSidenavPropsType = {
31
- /**
32
- * Size of the padding to be applied to the custom area ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
33
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different padding sizes.
34
- */
35
- padding?: Space | Padding;
36
- /**
37
- * The area inside the sidenav. This area can be used to render custom content.
38
- */
39
- children: React.ReactNode;
40
- /**
41
- * If false, the arrow button is hidden.
42
- * In lower resolutions the arrow will be always displayed.
43
- */
44
- displayArrow?: boolean;
45
- /**
46
- * Default action over the content of the page, overlay the content or push to the right ('push' | 'overlay').
47
- * In lower resolutions the mode will always be overlay.
48
- */
49
- mode: "push" | "overlay";
50
- };
51
- declare type AppLayoutPropsType = {
52
- /**
53
- * The area inside the sidenav. This area can be used to render custom content.
54
- */
55
- children: React.ReactElement<ChildrenType> | React.ReactElement<ChildrenType>[];
56
- };
57
- export default AppLayoutPropsType;
package/layout/types.js DELETED
@@ -1,5 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
package/link/Link.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import Overload from "./types";
2
- declare const DxcLink: Overload;
3
- export default DxcLink;