@dxc-technology/halstack-react 0.0.0-adde6ce → 0.0.0-adfc848

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 (259) hide show
  1. package/README.md +46 -0
  2. package/dist/index.d.mts +4011 -0
  3. package/dist/index.d.ts +4011 -0
  4. package/dist/index.js +14933 -0
  5. package/dist/index.mjs +14844 -0
  6. package/package.json +86 -71
  7. package/BackgroundColorContext.d.ts +0 -10
  8. package/BackgroundColorContext.js +0 -47
  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 -307
  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 -1612
  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 -166
  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/FileInput.stories.tsx +0 -507
  91. package/file-input/FileItem.d.ts +0 -14
  92. package/file-input/FileItem.js +0 -184
  93. package/file-input/types.d.ts +0 -112
  94. package/file-input/types.js +0 -5
  95. package/footer/Footer.d.ts +0 -4
  96. package/footer/Footer.js +0 -260
  97. package/footer/Footer.stories.tsx +0 -130
  98. package/footer/Icons.d.ts +0 -2
  99. package/footer/Icons.js +0 -77
  100. package/footer/types.d.ts +0 -65
  101. package/footer/types.js +0 -5
  102. package/header/Header.d.ts +0 -7
  103. package/header/Header.js +0 -324
  104. package/header/Header.stories.tsx +0 -162
  105. package/header/Icons.d.ts +0 -2
  106. package/header/Icons.js +0 -34
  107. package/header/types.d.ts +0 -47
  108. package/header/types.js +0 -5
  109. package/heading/Heading.d.ts +0 -4
  110. package/heading/Heading.js +0 -159
  111. package/heading/Heading.stories.tsx +0 -54
  112. package/heading/types.d.ts +0 -33
  113. package/heading/types.js +0 -5
  114. package/input-text/Icons.js +0 -22
  115. package/input-text/InputText.js +0 -611
  116. package/input-text/index.d.ts +0 -36
  117. package/layout/ApplicationLayout.d.ts +0 -10
  118. package/layout/ApplicationLayout.js +0 -225
  119. package/layout/ApplicationLayout.stories.tsx +0 -171
  120. package/layout/Icons.js +0 -55
  121. package/layout/types.d.ts +0 -57
  122. package/layout/types.js +0 -5
  123. package/link/Link.d.ts +0 -3
  124. package/link/Link.js +0 -161
  125. package/link/Link.stories.tsx +0 -146
  126. package/link/types.d.ts +0 -74
  127. package/link/types.js +0 -5
  128. package/list/List.d.ts +0 -8
  129. package/list/List.js +0 -47
  130. package/list/List.stories.tsx +0 -95
  131. package/main.d.ts +0 -48
  132. package/main.js +0 -395
  133. package/number-input/NumberInput.d.ts +0 -4
  134. package/number-input/NumberInput.js +0 -83
  135. package/number-input/NumberInput.stories.tsx +0 -115
  136. package/number-input/NumberInputContext.d.ts +0 -4
  137. package/number-input/NumberInputContext.js +0 -19
  138. package/number-input/numberInputContextTypes.d.ts +0 -19
  139. package/number-input/numberInputContextTypes.js +0 -5
  140. package/number-input/types.d.ts +0 -117
  141. package/number-input/types.js +0 -5
  142. package/paginator/Icons.js +0 -66
  143. package/paginator/Paginator.d.ts +0 -4
  144. package/paginator/Paginator.js +0 -192
  145. package/paginator/Paginator.stories.tsx +0 -63
  146. package/paginator/types.d.ts +0 -38
  147. package/paginator/types.js +0 -5
  148. package/password-input/PasswordInput.d.ts +0 -4
  149. package/password-input/PasswordInput.js +0 -163
  150. package/password-input/PasswordInput.stories.tsx +0 -131
  151. package/password-input/types.d.ts +0 -107
  152. package/password-input/types.js +0 -5
  153. package/progress-bar/ProgressBar.d.ts +0 -4
  154. package/progress-bar/ProgressBar.js +0 -170
  155. package/progress-bar/ProgressBar.stories.jsx +0 -58
  156. package/progress-bar/types.d.ts +0 -37
  157. package/progress-bar/types.js +0 -5
  158. package/radio/Radio.d.ts +0 -4
  159. package/radio/Radio.js +0 -174
  160. package/radio/Radio.stories.tsx +0 -192
  161. package/radio/types.d.ts +0 -54
  162. package/radio/types.js +0 -5
  163. package/radio-group/Radio.d.ts +0 -4
  164. package/radio-group/Radio.js +0 -130
  165. package/radio-group/RadioGroup.d.ts +0 -4
  166. package/radio-group/RadioGroup.js +0 -268
  167. package/radio-group/RadioGroup.stories.tsx +0 -79
  168. package/radio-group/types.d.ts +0 -36
  169. package/radio-group/types.js +0 -5
  170. package/resultsetTable/ResultsetTable.d.ts +0 -4
  171. package/resultsetTable/ResultsetTable.js +0 -251
  172. package/resultsetTable/ResultsetTable.stories.tsx +0 -277
  173. package/resultsetTable/types.d.ts +0 -67
  174. package/resultsetTable/types.js +0 -5
  175. package/row/Row.d.ts +0 -11
  176. package/row/Row.js +0 -127
  177. package/row/Row.stories.tsx +0 -239
  178. package/select/Select.d.ts +0 -4
  179. package/select/Select.js +0 -863
  180. package/select/Select.stories.tsx +0 -572
  181. package/select/types.d.ts +0 -170
  182. package/select/types.js +0 -5
  183. package/sidenav/Sidenav.d.ts +0 -9
  184. package/sidenav/Sidenav.js +0 -136
  185. package/sidenav/Sidenav.stories.tsx +0 -182
  186. package/sidenav/types.d.ts +0 -50
  187. package/sidenav/types.js +0 -5
  188. package/slider/Slider.d.ts +0 -4
  189. package/slider/Slider.js +0 -317
  190. package/slider/Slider.stories.tsx +0 -177
  191. package/slider/types.d.ts +0 -78
  192. package/slider/types.js +0 -5
  193. package/spinner/Spinner.d.ts +0 -4
  194. package/spinner/Spinner.js +0 -250
  195. package/spinner/Spinner.stories.jsx +0 -103
  196. package/spinner/types.d.ts +0 -32
  197. package/spinner/types.js +0 -5
  198. package/stack/Stack.d.ts +0 -10
  199. package/stack/Stack.js +0 -97
  200. package/stack/Stack.stories.tsx +0 -166
  201. package/switch/Switch.d.ts +0 -4
  202. package/switch/Switch.js +0 -179
  203. package/switch/Switch.stories.tsx +0 -160
  204. package/switch/types.d.ts +0 -58
  205. package/switch/types.js +0 -5
  206. package/table/Table.d.ts +0 -4
  207. package/table/Table.js +0 -118
  208. package/table/Table.stories.jsx +0 -277
  209. package/table/types.d.ts +0 -21
  210. package/table/types.js +0 -5
  211. package/tabs/Tabs.d.ts +0 -4
  212. package/tabs/Tabs.js +0 -213
  213. package/tabs/Tabs.stories.tsx +0 -122
  214. package/tabs/types.d.ts +0 -70
  215. package/tabs/types.js +0 -5
  216. package/tag/Tag.d.ts +0 -4
  217. package/tag/Tag.js +0 -193
  218. package/tag/Tag.stories.tsx +0 -145
  219. package/tag/types.d.ts +0 -60
  220. package/tag/types.js +0 -5
  221. package/text/Text.d.ts +0 -7
  222. package/text/Text.js +0 -30
  223. package/text/Text.stories.tsx +0 -19
  224. package/text-input/TextInput.d.ts +0 -4
  225. package/text-input/TextInput.js +0 -786
  226. package/text-input/TextInput.stories.tsx +0 -456
  227. package/text-input/types.d.ts +0 -159
  228. package/text-input/types.js +0 -5
  229. package/textarea/Textarea.d.ts +0 -4
  230. package/textarea/Textarea.js +0 -284
  231. package/textarea/Textarea.stories.jsx +0 -136
  232. package/textarea/types.d.ts +0 -130
  233. package/textarea/types.js +0 -5
  234. package/toggle/Toggle.js +0 -186
  235. package/toggle/index.d.ts +0 -21
  236. package/toggle-group/ToggleGroup.d.ts +0 -4
  237. package/toggle-group/ToggleGroup.js +0 -214
  238. package/toggle-group/ToggleGroup.stories.tsx +0 -173
  239. package/toggle-group/types.d.ts +0 -97
  240. package/toggle-group/types.js +0 -5
  241. package/upload/Upload.js +0 -201
  242. package/upload/buttons-upload/ButtonsUpload.js +0 -111
  243. package/upload/buttons-upload/Icons.js +0 -40
  244. package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
  245. package/upload/dragAndDropArea/Icons.js +0 -39
  246. package/upload/file-upload/FileToUpload.js +0 -115
  247. package/upload/file-upload/Icons.js +0 -66
  248. package/upload/files-upload/FilesToUpload.js +0 -109
  249. package/upload/index.d.ts +0 -15
  250. package/upload/transaction/Icons.js +0 -160
  251. package/upload/transaction/Transaction.js +0 -104
  252. package/upload/transactions/Transactions.js +0 -94
  253. package/useTheme.d.ts +0 -2
  254. package/useTheme.js +0 -22
  255. package/wizard/Wizard.d.ts +0 -4
  256. package/wizard/Wizard.js +0 -281
  257. package/wizard/Wizard.stories.tsx +0 -224
  258. package/wizard/types.d.ts +0 -60
  259. 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 :focus {\n outline: #0095ff auto 1px;\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;