@dxc-technology/halstack-react 0.0.0-dcd93c4 → 0.0.0-dd6acd7

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 (315) hide show
  1. package/README.md +46 -0
  2. package/dist/index.d.mts +6518 -0
  3. package/dist/index.d.ts +6518 -0
  4. package/dist/index.js +13484 -0
  5. package/dist/index.mjs +13427 -0
  6. package/package.json +69 -72
  7. package/BackgroundColorContext.d.ts +0 -10
  8. package/BackgroundColorContext.js +0 -47
  9. package/HalstackContext.d.ts +0 -12
  10. package/HalstackContext.js +0 -295
  11. package/accordion/Accordion.d.ts +0 -4
  12. package/accordion/Accordion.js +0 -226
  13. package/accordion/Accordion.stories.tsx +0 -307
  14. package/accordion/Accordion.test.js +0 -72
  15. package/accordion/types.d.ts +0 -68
  16. package/accordion/types.js +0 -5
  17. package/accordion-group/AccordionGroup.d.ts +0 -7
  18. package/accordion-group/AccordionGroup.js +0 -169
  19. package/accordion-group/AccordionGroup.stories.tsx +0 -225
  20. package/accordion-group/AccordionGroup.test.js +0 -151
  21. package/accordion-group/types.d.ts +0 -72
  22. package/accordion-group/types.js +0 -5
  23. package/alert/Alert.d.ts +0 -4
  24. package/alert/Alert.js +0 -293
  25. package/alert/Alert.stories.tsx +0 -170
  26. package/alert/Alert.test.js +0 -92
  27. package/alert/types.d.ts +0 -49
  28. package/alert/types.js +0 -5
  29. package/badge/Badge.d.ts +0 -4
  30. package/badge/Badge.js +0 -61
  31. package/badge/types.d.ts +0 -5
  32. package/badge/types.js +0 -5
  33. package/bleed/Bleed.d.ts +0 -3
  34. package/bleed/Bleed.js +0 -51
  35. package/bleed/Bleed.stories.tsx +0 -341
  36. package/bleed/types.d.ts +0 -37
  37. package/bleed/types.js +0 -5
  38. package/box/Box.d.ts +0 -4
  39. package/box/Box.js +0 -116
  40. package/box/Box.stories.tsx +0 -132
  41. package/box/Box.test.js +0 -18
  42. package/box/types.d.ts +0 -43
  43. package/box/types.js +0 -5
  44. package/button/Button.d.ts +0 -4
  45. package/button/Button.js +0 -174
  46. package/button/Button.stories.tsx +0 -274
  47. package/button/Button.test.js +0 -35
  48. package/button/types.d.ts +0 -53
  49. package/button/types.js +0 -5
  50. package/card/Card.d.ts +0 -4
  51. package/card/Card.js +0 -161
  52. package/card/Card.stories.tsx +0 -201
  53. package/card/Card.test.js +0 -50
  54. package/card/ice-cream.jpg +0 -0
  55. package/card/types.d.ts +0 -67
  56. package/card/types.js +0 -5
  57. package/checkbox/Checkbox.d.ts +0 -4
  58. package/checkbox/Checkbox.js +0 -257
  59. package/checkbox/Checkbox.stories.tsx +0 -188
  60. package/checkbox/Checkbox.test.js +0 -78
  61. package/checkbox/types.d.ts +0 -64
  62. package/checkbox/types.js +0 -5
  63. package/chip/Chip.d.ts +0 -4
  64. package/chip/Chip.js +0 -161
  65. package/chip/Chip.stories.tsx +0 -119
  66. package/chip/Chip.test.js +0 -56
  67. package/chip/types.d.ts +0 -45
  68. package/chip/types.js +0 -5
  69. package/common/OpenSans.css +0 -81
  70. package/common/RequiredComponent.js +0 -32
  71. package/common/fonts/OpenSans-Bold.ttf +0 -0
  72. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  73. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  74. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  75. package/common/fonts/OpenSans-Italic.ttf +0 -0
  76. package/common/fonts/OpenSans-Light.ttf +0 -0
  77. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  78. package/common/fonts/OpenSans-Regular.ttf +0 -0
  79. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  80. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  81. package/common/utils.js +0 -22
  82. package/common/variables.js +0 -1470
  83. package/date-input/DateInput.d.ts +0 -4
  84. package/date-input/DateInput.js +0 -372
  85. package/date-input/DateInput.stories.tsx +0 -138
  86. package/date-input/DateInput.test.js +0 -479
  87. package/date-input/types.d.ts +0 -107
  88. package/date-input/types.js +0 -5
  89. package/dialog/Dialog.d.ts +0 -4
  90. package/dialog/Dialog.js +0 -138
  91. package/dialog/Dialog.stories.tsx +0 -212
  92. package/dialog/Dialog.test.js +0 -40
  93. package/dialog/types.d.ts +0 -43
  94. package/dialog/types.js +0 -5
  95. package/dropdown/Dropdown.d.ts +0 -4
  96. package/dropdown/Dropdown.js +0 -391
  97. package/dropdown/Dropdown.stories.tsx +0 -249
  98. package/dropdown/Dropdown.test.js +0 -189
  99. package/dropdown/types.d.ts +0 -80
  100. package/dropdown/types.js +0 -5
  101. package/file-input/FileInput.d.ts +0 -4
  102. package/file-input/FileInput.js +0 -593
  103. package/file-input/FileInput.stories.tsx +0 -507
  104. package/file-input/FileInput.test.js +0 -457
  105. package/file-input/FileItem.d.ts +0 -14
  106. package/file-input/FileItem.js +0 -186
  107. package/file-input/types.d.ts +0 -112
  108. package/file-input/types.js +0 -5
  109. package/footer/Footer.d.ts +0 -4
  110. package/footer/Footer.js +0 -185
  111. package/footer/Footer.stories.tsx +0 -130
  112. package/footer/Footer.test.js +0 -109
  113. package/footer/Icons.d.ts +0 -2
  114. package/footer/Icons.js +0 -77
  115. package/footer/types.d.ts +0 -65
  116. package/footer/types.js +0 -5
  117. package/header/Header.d.ts +0 -7
  118. package/header/Header.js +0 -303
  119. package/header/Header.stories.tsx +0 -172
  120. package/header/Header.test.js +0 -79
  121. package/header/Icons.d.ts +0 -2
  122. package/header/Icons.js +0 -34
  123. package/header/types.d.ts +0 -47
  124. package/header/types.js +0 -5
  125. package/heading/Heading.d.ts +0 -4
  126. package/heading/Heading.js +0 -159
  127. package/heading/Heading.stories.tsx +0 -54
  128. package/heading/Heading.test.js +0 -186
  129. package/heading/types.d.ts +0 -33
  130. package/heading/types.js +0 -5
  131. package/inline/Inline.d.ts +0 -4
  132. package/inline/Inline.js +0 -60
  133. package/inline/Inline.stories.tsx +0 -319
  134. package/inline/types.d.ts +0 -36
  135. package/inline/types.js +0 -5
  136. package/inset/Inset.d.ts +0 -3
  137. package/inset/Inset.js +0 -51
  138. package/inset/Inset.stories.tsx +0 -229
  139. package/inset/types.d.ts +0 -37
  140. package/inset/types.js +0 -5
  141. package/layout/ApplicationLayout.d.ts +0 -11
  142. package/layout/ApplicationLayout.js +0 -199
  143. package/layout/ApplicationLayout.stories.tsx +0 -126
  144. package/layout/Icons.d.ts +0 -5
  145. package/layout/Icons.js +0 -66
  146. package/layout/SidenavContext.d.ts +0 -5
  147. package/layout/SidenavContext.js +0 -19
  148. package/layout/types.d.ts +0 -52
  149. package/layout/types.js +0 -5
  150. package/link/Link.d.ts +0 -4
  151. package/link/Link.js +0 -136
  152. package/link/Link.stories.tsx +0 -186
  153. package/link/Link.test.js +0 -83
  154. package/link/types.d.ts +0 -54
  155. package/link/types.js +0 -5
  156. package/list/List.d.ts +0 -4
  157. package/list/List.js +0 -47
  158. package/list/List.stories.tsx +0 -89
  159. package/list/types.d.ts +0 -7
  160. package/list/types.js +0 -5
  161. package/main.d.ts +0 -48
  162. package/main.js +0 -401
  163. package/number-input/NumberInput.d.ts +0 -4
  164. package/number-input/NumberInput.js +0 -76
  165. package/number-input/NumberInput.stories.tsx +0 -115
  166. package/number-input/NumberInput.test.js +0 -506
  167. package/number-input/NumberInputContext.d.ts +0 -4
  168. package/number-input/NumberInputContext.js +0 -19
  169. package/number-input/numberInputContextTypes.d.ts +0 -19
  170. package/number-input/numberInputContextTypes.js +0 -5
  171. package/number-input/types.d.ts +0 -124
  172. package/number-input/types.js +0 -5
  173. package/paginator/Icons.js +0 -66
  174. package/paginator/Paginator.d.ts +0 -4
  175. package/paginator/Paginator.js +0 -171
  176. package/paginator/Paginator.stories.tsx +0 -63
  177. package/paginator/Paginator.test.js +0 -308
  178. package/paginator/types.d.ts +0 -38
  179. package/paginator/types.js +0 -5
  180. package/password-input/PasswordInput.d.ts +0 -4
  181. package/password-input/PasswordInput.js +0 -166
  182. package/password-input/PasswordInput.stories.tsx +0 -131
  183. package/password-input/PasswordInput.test.js +0 -180
  184. package/password-input/types.d.ts +0 -110
  185. package/password-input/types.js +0 -5
  186. package/progress-bar/ProgressBar.d.ts +0 -4
  187. package/progress-bar/ProgressBar.js +0 -170
  188. package/progress-bar/ProgressBar.stories.jsx +0 -58
  189. package/progress-bar/ProgressBar.test.js +0 -65
  190. package/progress-bar/types.d.ts +0 -37
  191. package/progress-bar/types.js +0 -5
  192. package/quick-nav/QuickNav.d.ts +0 -4
  193. package/quick-nav/QuickNav.js +0 -116
  194. package/quick-nav/QuickNav.stories.tsx +0 -237
  195. package/quick-nav/types.d.ts +0 -21
  196. package/quick-nav/types.js +0 -5
  197. package/radio-group/Radio.d.ts +0 -4
  198. package/radio-group/Radio.js +0 -141
  199. package/radio-group/RadioGroup.d.ts +0 -4
  200. package/radio-group/RadioGroup.js +0 -283
  201. package/radio-group/RadioGroup.stories.tsx +0 -100
  202. package/radio-group/RadioGroup.test.js +0 -695
  203. package/radio-group/types.d.ts +0 -114
  204. package/radio-group/types.js +0 -5
  205. package/resultsetTable/ResultsetTable.d.ts +0 -4
  206. package/resultsetTable/ResultsetTable.js +0 -254
  207. package/resultsetTable/ResultsetTable.stories.tsx +0 -275
  208. package/resultsetTable/ResultsetTable.test.js +0 -348
  209. package/resultsetTable/types.d.ts +0 -67
  210. package/resultsetTable/types.js +0 -5
  211. package/row/Row.d.ts +0 -3
  212. package/row/Row.js +0 -127
  213. package/row/Row.stories.tsx +0 -237
  214. package/row/types.d.ts +0 -28
  215. package/row/types.js +0 -5
  216. package/select/Icons.d.ts +0 -10
  217. package/select/Icons.js +0 -93
  218. package/select/Listbox.d.ts +0 -4
  219. package/select/Listbox.js +0 -175
  220. package/select/Option.d.ts +0 -4
  221. package/select/Option.js +0 -110
  222. package/select/Select.d.ts +0 -4
  223. package/select/Select.js +0 -660
  224. package/select/Select.stories.tsx +0 -626
  225. package/select/Select.test.js +0 -2162
  226. package/select/types.d.ts +0 -212
  227. package/select/types.js +0 -5
  228. package/sidenav/Sidenav.d.ts +0 -9
  229. package/sidenav/Sidenav.js +0 -147
  230. package/sidenav/Sidenav.stories.tsx +0 -182
  231. package/sidenav/Sidenav.test.js +0 -56
  232. package/sidenav/types.d.ts +0 -50
  233. package/sidenav/types.js +0 -5
  234. package/slider/Slider.d.ts +0 -4
  235. package/slider/Slider.js +0 -318
  236. package/slider/Slider.stories.tsx +0 -177
  237. package/slider/Slider.test.js +0 -150
  238. package/slider/types.d.ts +0 -82
  239. package/slider/types.js +0 -5
  240. package/spinner/Spinner.d.ts +0 -4
  241. package/spinner/Spinner.js +0 -250
  242. package/spinner/Spinner.stories.jsx +0 -103
  243. package/spinner/Spinner.test.js +0 -64
  244. package/spinner/types.d.ts +0 -32
  245. package/spinner/types.js +0 -5
  246. package/stack/Stack.d.ts +0 -4
  247. package/stack/Stack.js +0 -56
  248. package/stack/Stack.stories.tsx +0 -263
  249. package/stack/types.d.ts +0 -32
  250. package/stack/types.js +0 -5
  251. package/switch/Switch.d.ts +0 -4
  252. package/switch/Switch.js +0 -195
  253. package/switch/Switch.stories.tsx +0 -160
  254. package/switch/Switch.test.js +0 -98
  255. package/switch/types.d.ts +0 -62
  256. package/switch/types.js +0 -5
  257. package/table/Table.d.ts +0 -4
  258. package/table/Table.js +0 -118
  259. package/table/Table.stories.jsx +0 -277
  260. package/table/Table.test.js +0 -26
  261. package/table/types.d.ts +0 -21
  262. package/table/types.js +0 -5
  263. package/tabs/Tabs.d.ts +0 -4
  264. package/tabs/Tabs.js +0 -211
  265. package/tabs/Tabs.stories.tsx +0 -112
  266. package/tabs/Tabs.test.js +0 -140
  267. package/tabs/types.d.ts +0 -82
  268. package/tabs/types.js +0 -5
  269. package/tabs-nav/NavTabs.d.ts +0 -8
  270. package/tabs-nav/NavTabs.js +0 -125
  271. package/tabs-nav/NavTabs.stories.tsx +0 -170
  272. package/tabs-nav/NavTabs.test.js +0 -82
  273. package/tabs-nav/Tab.d.ts +0 -4
  274. package/tabs-nav/Tab.js +0 -132
  275. package/tabs-nav/types.d.ts +0 -53
  276. package/tabs-nav/types.js +0 -5
  277. package/tag/Tag.d.ts +0 -4
  278. package/tag/Tag.js +0 -183
  279. package/tag/Tag.stories.tsx +0 -142
  280. package/tag/Tag.test.js +0 -60
  281. package/tag/types.d.ts +0 -69
  282. package/tag/types.js +0 -5
  283. package/text/Text.d.ts +0 -7
  284. package/text/Text.js +0 -30
  285. package/text/Text.stories.tsx +0 -19
  286. package/text-input/Suggestion.d.ts +0 -4
  287. package/text-input/Suggestion.js +0 -55
  288. package/text-input/TextInput.d.ts +0 -4
  289. package/text-input/TextInput.js +0 -770
  290. package/text-input/TextInput.stories.tsx +0 -474
  291. package/text-input/TextInput.test.js +0 -1712
  292. package/text-input/types.d.ts +0 -178
  293. package/text-input/types.js +0 -5
  294. package/textarea/Textarea.d.ts +0 -4
  295. package/textarea/Textarea.js +0 -277
  296. package/textarea/Textarea.stories.jsx +0 -157
  297. package/textarea/Textarea.test.js +0 -437
  298. package/textarea/types.d.ts +0 -137
  299. package/textarea/types.js +0 -5
  300. package/toggle-group/ToggleGroup.d.ts +0 -4
  301. package/toggle-group/ToggleGroup.js +0 -215
  302. package/toggle-group/ToggleGroup.stories.tsx +0 -173
  303. package/toggle-group/ToggleGroup.test.js +0 -156
  304. package/toggle-group/types.d.ts +0 -105
  305. package/toggle-group/types.js +0 -5
  306. package/useTheme.d.ts +0 -2
  307. package/useTheme.js +0 -22
  308. package/useTranslatedLabels.d.ts +0 -2
  309. package/useTranslatedLabels.js +0 -20
  310. package/wizard/Wizard.d.ts +0 -4
  311. package/wizard/Wizard.js +0 -292
  312. package/wizard/Wizard.stories.tsx +0 -214
  313. package/wizard/Wizard.test.js +0 -141
  314. package/wizard/types.d.ts +0 -64
  315. package/wizard/types.js +0 -5
package/inset/types.d.ts DELETED
@@ -1,37 +0,0 @@
1
- /// <reference types="react" />
2
- declare type Spacing = "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "1rem" | "1.5rem" | "2rem" | "3rem" | "4rem" | "5rem";
3
- declare type Props = {
4
- /**
5
- * Applies the spacing scale to all sides.
6
- */
7
- space?: Spacing;
8
- /**
9
- * Applies the spacing scale to the left and right sides.
10
- */
11
- horizontal?: Spacing;
12
- /**
13
- * Applies the spacing scale to the top and bottom sides.
14
- */
15
- vertical?: Spacing;
16
- /**
17
- * Applies the spacing scale to the top side.
18
- */
19
- top?: Spacing;
20
- /**
21
- * Applies the spacing scale to the right side.
22
- */
23
- right?: Spacing;
24
- /**
25
- * Applies the spacing scale to the bottom side.
26
- */
27
- bottom?: Spacing;
28
- /**
29
- * Applies the spacing scale to the left side.
30
- */
31
- left?: Spacing;
32
- /**
33
- * Custom content inside the inset.
34
- */
35
- children: React.ReactNode;
36
- };
37
- export default Props;
package/inset/types.js DELETED
@@ -1,5 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
@@ -1,11 +0,0 @@
1
- /// <reference types="react" />
2
- import AppLayoutPropsType, { AppLayoutSidenavPropsType, AppLayoutFooterPropsType, AppLayoutMainPropsType, AppLayoutHeaderPropsType } from "./types";
3
- declare const DxcApplicationLayout: {
4
- ({ visibilityToggleLabel, children }: AppLayoutPropsType): JSX.Element;
5
- Header: ({ children }: AppLayoutHeaderPropsType) => JSX.Element;
6
- Main: ({ children }: AppLayoutMainPropsType) => JSX.Element;
7
- Footer: ({ children }: AppLayoutFooterPropsType) => JSX.Element;
8
- SideNav: ({ ...childProps }: AppLayoutSidenavPropsType) => JSX.Element;
9
- useResponsiveSidenavVisibility: () => (isSidenavVisible: boolean) => void;
10
- };
11
- export default DxcApplicationLayout;
@@ -1,199 +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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
17
-
18
- var _react = _interopRequireWildcard(require("react"));
19
-
20
- var _Header = _interopRequireDefault(require("../header/Header"));
21
-
22
- var _Footer = _interopRequireDefault(require("../footer/Footer"));
23
-
24
- var _Sidenav = _interopRequireDefault(require("../sidenav/Sidenav"));
25
-
26
- var _styledComponents = _interopRequireDefault(require("styled-components"));
27
-
28
- var _variables = require("../common/variables.js");
29
-
30
- var _Icons = require("./Icons");
31
-
32
- var _uuid = require("uuid");
33
-
34
- var _SidenavContext = require("./SidenavContext");
35
-
36
- var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
37
-
38
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
39
-
40
- 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); }
41
-
42
- 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; }
43
-
44
- var year = new Date().getFullYear();
45
-
46
- var Header = function Header(_ref) {
47
- var children = _ref.children;
48
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children);
49
- };
50
-
51
- var Main = function Main(_ref2) {
52
- var children = _ref2.children;
53
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children);
54
- };
55
-
56
- var Footer = function Footer(_ref3) {
57
- var children = _ref3.children;
58
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children);
59
- };
60
-
61
- var Sidenav = function Sidenav(_ref4) {
62
- var childProps = (0, _extends2["default"])({}, _ref4);
63
- return /*#__PURE__*/_react["default"].createElement(_Sidenav["default"], childProps, childProps.children);
64
- };
65
-
66
- var defaultFooter = function defaultFooter() {
67
- return /*#__PURE__*/_react["default"].createElement(_Footer["default"], {
68
- copyright: "\xA9 DXC Technology ".concat(year, "\u200B\u200B\u200B\u200B. All rights reserved."),
69
- bottomLinks: [{
70
- href: "https://www.linkedin.com/company/dxctechnology",
71
- text: "Linkedin"
72
- }, {
73
- href: "https://twitter.com/dxctechnology",
74
- text: "Twitter"
75
- }, {
76
- href: "https://www.facebook.com/DXCTechnology/",
77
- text: "Facebook"
78
- }],
79
- socialLinks: [{
80
- href: "https://www.linkedin.com/company/dxctechnology",
81
- logo: _Icons.linkedinLogo
82
- }, {
83
- href: "https://twitter.com/dxctechnology",
84
- logo: _Icons.twitterLogo
85
- }, {
86
- href: "https://www.facebook.com/DXCTechnology/",
87
- logo: _Icons.facebookLogo
88
- }]
89
- });
90
- };
91
-
92
- var defaultHeader = function defaultHeader() {
93
- return /*#__PURE__*/_react["default"].createElement(_Header["default"], {
94
- underlined: true
95
- });
96
- };
97
-
98
- var childTypeExists = function childTypeExists(children, childType) {
99
- return children.find(function (child) {
100
- return (child === null || child === void 0 ? void 0 : child.type) === childType;
101
- });
102
- };
103
-
104
- var DxcApplicationLayout = function DxcApplicationLayout(_ref5) {
105
- var _ref5$visibilityToggl = _ref5.visibilityToggleLabel,
106
- visibilityToggleLabel = _ref5$visibilityToggl === void 0 ? "" : _ref5$visibilityToggl,
107
- children = _ref5.children;
108
-
109
- var _useState = (0, _react.useState)("appLayout-".concat((0, _uuid.v4)())),
110
- _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
111
- appLayoutId = _useState2[0];
112
-
113
- var visibilityToggleLabelId = "label-".concat(appLayoutId);
114
-
115
- var _useState3 = (0, _react.useState)(false),
116
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
117
- isSidenavVisibleResponsive = _useState4[0],
118
- setIsSidenavVisibleResponsive = _useState4[1];
119
-
120
- var _useState5 = (0, _react.useState)(false),
121
- _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
122
- isResponsive = _useState6[0],
123
- setIsResponsive = _useState6[1];
124
-
125
- var ref = (0, _react.useRef)(null);
126
- var translatedLabels = (0, _useTranslatedLabels["default"])();
127
-
128
- var childrenArray = _react["default"].Children.toArray(children);
129
-
130
- var header = childTypeExists(childrenArray, _Header["default"]) || childTypeExists(childrenArray, Header) || defaultHeader();
131
- var footer = childTypeExists(childrenArray, _Footer["default"]) || childTypeExists(childrenArray, Footer) || defaultFooter();
132
- var sidenav = childTypeExists(childrenArray, Sidenav);
133
- var main = childTypeExists(childrenArray, Main);
134
-
135
- var handleResize = function handleResize() {
136
- setIsResponsive(window.matchMedia("(max-width: ".concat(_variables.responsiveSizes.medium, "rem)")).matches);
137
- };
138
-
139
- var handleSidenavVisibility = function handleSidenavVisibility() {
140
- setIsSidenavVisibleResponsive(function (isSidenavVisibleResponsive) {
141
- return !isSidenavVisibleResponsive;
142
- });
143
- };
144
-
145
- (0, _react.useEffect)(function () {
146
- handleResize();
147
- window.addEventListener("resize", handleResize);
148
- return function () {
149
- window.removeEventListener("resize", handleResize);
150
- };
151
- }, [setIsResponsive]);
152
- (0, _react.useEffect)(function () {
153
- !isResponsive && setIsSidenavVisibleResponsive(false);
154
- }, [isResponsive, setIsSidenavVisibleResponsive]);
155
- return /*#__PURE__*/_react["default"].createElement(ApplicationLayoutContainer, {
156
- hasSidenav: sidenav ? true : false,
157
- isSidenavVisible: isSidenavVisibleResponsive,
158
- ref: ref
159
- }, /*#__PURE__*/_react["default"].createElement(HeaderContainer, null, header), sidenav && isResponsive && /*#__PURE__*/_react["default"].createElement(VisibilityToggle, null, /*#__PURE__*/_react["default"].createElement(HamburgerTrigger, {
160
- onClick: handleSidenavVisibility,
161
- "aria-labelledby": visibilityToggleLabel ? visibilityToggleLabelId : undefined,
162
- "aria-label": visibilityToggleLabel ? undefined : translatedLabels.applicationLayout.visibilityToggleTitle,
163
- title: translatedLabels.applicationLayout.visibilityToggleTitle
164
- }, _Icons.hamburgerIcon, visibilityToggleLabel && /*#__PURE__*/_react["default"].createElement(VisibilityToggleLabel, {
165
- id: visibilityToggleLabelId
166
- }, visibilityToggleLabel))), /*#__PURE__*/_react["default"].createElement(BodyContainer, null, /*#__PURE__*/_react["default"].createElement(_SidenavContext.SidenavContextProvider, {
167
- value: setIsSidenavVisibleResponsive
168
- }, sidenav && (isResponsive ? isSidenavVisibleResponsive : true) && /*#__PURE__*/_react["default"].createElement(SidenavContainer, null, sidenav)), /*#__PURE__*/_react["default"].createElement(MainContainer, null, /*#__PURE__*/_react["default"].createElement(MainContentContainer, null, main), footer)));
169
- };
170
-
171
- var ApplicationLayoutContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n top: 64px;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n flex-direction: column;\n\n @media (max-width: ", "rem) {\n ", ";\n ", "\n }\n"])), _variables.responsiveSizes.medium, function (props) {
172
- return props.hasSidenav && "top: 112px";
173
- }, function (props) {
174
- return props.isSidenavVisible && "overflow: hidden;";
175
- });
176
-
177
- var HeaderContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 3;\n"])));
178
-
179
- var VisibilityToggle = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n position: fixed;\n top: 64px;\n left: 0;\n right: 0;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n padding: 4px 16px;\n width: 100%;\n background-color: #f2f2f2;\n user-select: none;\n z-index: 2;\n"])));
180
-
181
- var HamburgerTrigger = _styledComponents["default"].button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n align-content: center;\n border: 0px solid transparent;\n border-radius: 2px;\n padding: 15px 3px;\n background-color: transparent;\n box-shadow: 0 0 0 2px transparent;\n cursor: pointer;\n :active {\n background-color: #cccccc;\n }\n :focus,\n :focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px #0095ff;\n }\n & > svg {\n height: 20px;\n width: 20px;\n }\n"])));
182
-
183
- var VisibilityToggleLabel = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: Open Sans, sans-serif;\n font-weight: 600;\n font-size: 14px;\n"])));
184
-
185
- var BodyContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: row;\n flex: 1;\n"])));
186
-
187
- var SidenavContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n position: sticky;\n top: 64px;\n display: flex;\n height: calc(100vh - 64px);\n z-index: 1;\n\n @media (max-width: ", "rem) {\n position: fixed;\n top: 112px;\n }\n"])), _variables.responsiveSizes.medium);
188
-
189
- var MainContainer = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n width: 100%;\n"])));
190
-
191
- var MainContentContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n flex: 1;\n"])));
192
-
193
- DxcApplicationLayout.Header = Header;
194
- DxcApplicationLayout.Main = Main;
195
- DxcApplicationLayout.Footer = Footer;
196
- DxcApplicationLayout.SideNav = Sidenav;
197
- DxcApplicationLayout.useResponsiveSidenavVisibility = _SidenavContext.useResponsiveSidenavVisibility;
198
- var _default = DxcApplicationLayout;
199
- exports["default"] = _default;
@@ -1,126 +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
-
7
- export default {
8
- title: "Application Layout ",
9
- component: DxcApplicationLayout,
10
- parameters: {
11
- viewport: {
12
- viewports: INITIAL_VIEWPORTS,
13
- },
14
- },
15
- };
16
-
17
- export const DefaultApplicationLayout = () => (
18
- <>
19
- <DxcApplicationLayout>
20
- <DxcApplicationLayout.Main>
21
- <Title title="Default application layout" theme="light" level={4} />
22
- <p>Main Content</p>
23
- <p>Main Content</p>
24
- <p>Main Content</p>
25
- <p>Main Content</p>
26
- </DxcApplicationLayout.Main>
27
- </DxcApplicationLayout>
28
- </>
29
- );
30
-
31
- export const ApplicationLayoutWithDefaultSidenav = () => (
32
- <>
33
- <DxcApplicationLayout>
34
- <DxcApplicationLayout.SideNav>
35
- <DxcSidenav.Title>Application layout with sidenav</DxcSidenav.Title>
36
- <p>SideNav Content</p>
37
- <p>SideNav Content</p>
38
- <p>SideNav Content</p>
39
- <p>SideNav Content</p>
40
- <p>SideNav Content</p>
41
- </DxcApplicationLayout.SideNav>
42
- <DxcApplicationLayout.Main>
43
- <p>Main Content</p>
44
- <p>Main Content</p>
45
- <p>Main Content</p>
46
- <p>Main Content</p>
47
- </DxcApplicationLayout.Main>
48
- </DxcApplicationLayout>
49
- </>
50
- );
51
-
52
- export const ApplicationLayoutWithResponsiveSidenav = () => (
53
- <>
54
- <DxcApplicationLayout visibilityToggleLabel="Example">
55
- <DxcApplicationLayout.SideNav>
56
- <DxcSidenav.Title>Application layout with push sidenav</DxcSidenav.Title>
57
- <p>SideNav Content</p>
58
- <p>SideNav Content</p>
59
- <p>SideNav Content</p>
60
- <p>SideNav Content</p>
61
- <p>SideNav Content</p>
62
- </DxcApplicationLayout.SideNav>
63
- <DxcApplicationLayout.Main>
64
- <p>Main Content</p>
65
- <p>Main Content</p>
66
- <p>Main Content</p>
67
- <p>Main Content</p>
68
- </DxcApplicationLayout.Main>
69
- </DxcApplicationLayout>
70
- </>
71
- );
72
-
73
- ApplicationLayoutWithResponsiveSidenav.parameters = {
74
- viewport: {
75
- defaultViewport: "pixel",
76
- },
77
- };
78
-
79
- export const ApplicationLayoutWithCustomHeader = () => (
80
- <>
81
- <DxcApplicationLayout>
82
- <DxcApplicationLayout.Header>
83
- {" "}
84
- <p>Custom Header</p>{" "}
85
- </DxcApplicationLayout.Header>
86
- <DxcApplicationLayout.SideNav>
87
- <DxcSidenav.Title>Application layout with custom header</DxcSidenav.Title>
88
- <p>SideNav Content</p>
89
- <p>SideNav Content</p>
90
- <p>SideNav Content</p>
91
- <p>SideNav Content</p>
92
- <p>SideNav Content</p>
93
- </DxcApplicationLayout.SideNav>
94
- <DxcApplicationLayout.Main>
95
- <p>Main Content</p>
96
- <p>Main Content</p>
97
- <p>Main Content</p>
98
- <p>Main Content</p>
99
- </DxcApplicationLayout.Main>
100
- </DxcApplicationLayout>
101
- </>
102
- );
103
-
104
- export const ApplicationLayoutWithCustomFooter = () => (
105
- <>
106
- <DxcApplicationLayout>
107
- <DxcApplicationLayout.SideNav>
108
- <DxcSidenav.Title>Application layout with custom footer</DxcSidenav.Title>
109
- <p>SideNav Content</p>
110
- <p>SideNav Content</p>
111
- <p>SideNav Content</p>
112
- <p>SideNav Content</p>
113
- <p>SideNav Content</p>
114
- </DxcApplicationLayout.SideNav>
115
- <DxcApplicationLayout.Main>
116
- <p>Main Content</p>
117
- <p>Main Content</p>
118
- <p>Main Content</p>
119
- <p>Main Content</p>
120
- </DxcApplicationLayout.Main>
121
- <DxcApplicationLayout.Footer>
122
- <p>Custom Footer</p>
123
- </DxcApplicationLayout.Footer>
124
- </DxcApplicationLayout>
125
- </>
126
- );
package/layout/Icons.d.ts DELETED
@@ -1,5 +0,0 @@
1
- /// <reference types="react" />
2
- export declare const facebookLogo: JSX.Element;
3
- export declare const twitterLogo: JSX.Element;
4
- export declare const linkedinLogo: JSX.Element;
5
- export declare const hamburgerIcon: JSX.Element;
package/layout/Icons.js DELETED
@@ -1,66 +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.hamburgerIcon = 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;
56
-
57
- var hamburgerIcon = /*#__PURE__*/_react["default"].createElement("svg", {
58
- xmlns: "http://www.w3.org/2000/svg",
59
- height: "24",
60
- width: "24",
61
- viewBox: "0 0 24 24"
62
- }, /*#__PURE__*/_react["default"].createElement("path", {
63
- d: "M3 18V16H21V18ZM3 13V11H21V13ZM3 8V6H21V8Z"
64
- }));
65
-
66
- exports.hamburgerIcon = hamburgerIcon;
@@ -1,5 +0,0 @@
1
- /// <reference types="react" />
2
- declare type SidenavContextType = (isSidenavVisible: boolean) => void;
3
- export declare const SidenavContextProvider: import("react").Provider<SidenavContextType>;
4
- export declare const useResponsiveSidenavVisibility: () => SidenavContextType;
5
- export {};
@@ -1,19 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.useResponsiveSidenavVisibility = exports.SidenavContextProvider = void 0;
7
-
8
- var _react = require("react");
9
-
10
- var SidenavContext = /*#__PURE__*/(0, _react.createContext)(null);
11
- var SidenavContextProvider = SidenavContext.Provider;
12
- exports.SidenavContextProvider = SidenavContextProvider;
13
-
14
- var useResponsiveSidenavVisibility = function useResponsiveSidenavVisibility() {
15
- var changeResponsiveSidenavVisibility = (0, _react.useContext)(SidenavContext);
16
- return changeResponsiveSidenavVisibility;
17
- };
18
-
19
- exports.useResponsiveSidenavVisibility = useResponsiveSidenavVisibility;
package/layout/types.d.ts DELETED
@@ -1,52 +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
- declare type AppLayoutPropsType = {
42
- /**
43
- * Text to be placed next to the hamburger button that toggles the
44
- * visibility of the sidenav.
45
- */
46
- visibilityToggleLabel?: string;
47
- /**
48
- * The area inside the sidenav. This area can be used to render custom content.
49
- */
50
- children: React.ReactElement<ChildrenType> | React.ReactElement<ChildrenType>[];
51
- };
52
- 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,4 +0,0 @@
1
- import React from "react";
2
- import { LinkProps } from "./types";
3
- declare const DxcLink: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
4
- export default DxcLink;