@dxc-technology/halstack-react 0.0.0-feed711 → 0.0.0-ff31c60

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 (314) hide show
  1. package/README.md +46 -0
  2. package/dist/index.d.mts +6648 -0
  3. package/dist/index.d.ts +6648 -0
  4. package/dist/index.js +18393 -0
  5. package/dist/index.mjs +18115 -0
  6. package/package.json +68 -69
  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/bulleted-list/BulletedList.d.ts +0 -7
  45. package/bulleted-list/BulletedList.js +0 -123
  46. package/bulleted-list/BulletedList.stories.tsx +0 -200
  47. package/bulleted-list/types.d.ts +0 -11
  48. package/bulleted-list/types.js +0 -5
  49. package/button/Button.d.ts +0 -4
  50. package/button/Button.js +0 -156
  51. package/button/Button.stories.tsx +0 -283
  52. package/button/Button.test.js +0 -35
  53. package/button/types.d.ts +0 -53
  54. package/button/types.js +0 -5
  55. package/card/Card.d.ts +0 -4
  56. package/card/Card.js +0 -161
  57. package/card/Card.stories.tsx +0 -201
  58. package/card/Card.test.js +0 -50
  59. package/card/ice-cream.jpg +0 -0
  60. package/card/types.d.ts +0 -67
  61. package/card/types.js +0 -5
  62. package/checkbox/Checkbox.d.ts +0 -4
  63. package/checkbox/Checkbox.js +0 -257
  64. package/checkbox/Checkbox.stories.tsx +0 -188
  65. package/checkbox/Checkbox.test.js +0 -78
  66. package/checkbox/types.d.ts +0 -64
  67. package/checkbox/types.js +0 -5
  68. package/chip/Chip.d.ts +0 -4
  69. package/chip/Chip.js +0 -161
  70. package/chip/Chip.stories.tsx +0 -119
  71. package/chip/Chip.test.js +0 -56
  72. package/chip/types.d.ts +0 -45
  73. package/chip/types.js +0 -5
  74. package/common/OpenSans.css +0 -81
  75. package/common/RequiredComponent.js +0 -32
  76. package/common/fonts/OpenSans-Bold.ttf +0 -0
  77. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  78. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  79. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  80. package/common/fonts/OpenSans-Italic.ttf +0 -0
  81. package/common/fonts/OpenSans-Light.ttf +0 -0
  82. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  83. package/common/fonts/OpenSans-Regular.ttf +0 -0
  84. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  85. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  86. package/common/utils.js +0 -22
  87. package/common/variables.js +0 -1504
  88. package/date-input/DateInput.d.ts +0 -4
  89. package/date-input/DateInput.js +0 -372
  90. package/date-input/DateInput.stories.tsx +0 -138
  91. package/date-input/DateInput.test.js +0 -479
  92. package/date-input/types.d.ts +0 -107
  93. package/date-input/types.js +0 -5
  94. package/dialog/Dialog.d.ts +0 -4
  95. package/dialog/Dialog.js +0 -162
  96. package/dialog/Dialog.stories.tsx +0 -211
  97. package/dialog/Dialog.test.js +0 -70
  98. package/dialog/types.d.ts +0 -43
  99. package/dialog/types.js +0 -5
  100. package/dropdown/Dropdown.d.ts +0 -4
  101. package/dropdown/Dropdown.js +0 -387
  102. package/dropdown/Dropdown.stories.tsx +0 -312
  103. package/dropdown/Dropdown.test.js +0 -591
  104. package/dropdown/DropdownMenu.d.ts +0 -4
  105. package/dropdown/DropdownMenu.js +0 -80
  106. package/dropdown/DropdownMenuItem.d.ts +0 -4
  107. package/dropdown/DropdownMenuItem.js +0 -92
  108. package/dropdown/types.d.ts +0 -100
  109. package/dropdown/types.js +0 -5
  110. package/file-input/FileInput.d.ts +0 -4
  111. package/file-input/FileInput.js +0 -593
  112. package/file-input/FileInput.stories.tsx +0 -507
  113. package/file-input/FileInput.test.js +0 -457
  114. package/file-input/FileItem.d.ts +0 -14
  115. package/file-input/FileItem.js +0 -186
  116. package/file-input/types.d.ts +0 -112
  117. package/file-input/types.js +0 -5
  118. package/flex/Flex.d.ts +0 -4
  119. package/flex/Flex.js +0 -57
  120. package/flex/Flex.stories.tsx +0 -103
  121. package/flex/types.d.ts +0 -21
  122. package/flex/types.js +0 -5
  123. package/footer/Footer.d.ts +0 -4
  124. package/footer/Footer.js +0 -185
  125. package/footer/Footer.stories.tsx +0 -130
  126. package/footer/Footer.test.js +0 -109
  127. package/footer/Icons.d.ts +0 -2
  128. package/footer/Icons.js +0 -77
  129. package/footer/types.d.ts +0 -65
  130. package/footer/types.js +0 -5
  131. package/header/Header.d.ts +0 -7
  132. package/header/Header.js +0 -305
  133. package/header/Header.stories.tsx +0 -172
  134. package/header/Header.test.js +0 -79
  135. package/header/Icons.d.ts +0 -2
  136. package/header/Icons.js +0 -34
  137. package/header/types.d.ts +0 -47
  138. package/header/types.js +0 -5
  139. package/heading/Heading.d.ts +0 -4
  140. package/heading/Heading.js +0 -159
  141. package/heading/Heading.stories.tsx +0 -54
  142. package/heading/Heading.test.js +0 -186
  143. package/heading/types.d.ts +0 -33
  144. package/heading/types.js +0 -5
  145. package/inset/Inset.d.ts +0 -3
  146. package/inset/Inset.js +0 -51
  147. package/inset/Inset.stories.tsx +0 -229
  148. package/inset/types.d.ts +0 -37
  149. package/inset/types.js +0 -5
  150. package/layout/ApplicationLayout.d.ts +0 -20
  151. package/layout/ApplicationLayout.js +0 -171
  152. package/layout/ApplicationLayout.stories.tsx +0 -161
  153. package/layout/Icons.d.ts +0 -5
  154. package/layout/Icons.js +0 -66
  155. package/layout/SidenavContext.d.ts +0 -5
  156. package/layout/SidenavContext.js +0 -19
  157. package/layout/types.d.ts +0 -42
  158. package/layout/types.js +0 -5
  159. package/link/Link.d.ts +0 -4
  160. package/link/Link.js +0 -136
  161. package/link/Link.stories.tsx +0 -193
  162. package/link/Link.test.js +0 -83
  163. package/link/types.d.ts +0 -54
  164. package/link/types.js +0 -5
  165. package/main.d.ts +0 -44
  166. package/main.js +0 -369
  167. package/number-input/NumberInput.d.ts +0 -4
  168. package/number-input/NumberInput.js +0 -76
  169. package/number-input/NumberInput.stories.tsx +0 -115
  170. package/number-input/NumberInput.test.js +0 -506
  171. package/number-input/NumberInputContext.d.ts +0 -4
  172. package/number-input/NumberInputContext.js +0 -19
  173. package/number-input/numberInputContextTypes.d.ts +0 -19
  174. package/number-input/numberInputContextTypes.js +0 -5
  175. package/number-input/types.d.ts +0 -124
  176. package/number-input/types.js +0 -5
  177. package/paginator/Icons.js +0 -66
  178. package/paginator/Paginator.d.ts +0 -4
  179. package/paginator/Paginator.js +0 -171
  180. package/paginator/Paginator.stories.tsx +0 -63
  181. package/paginator/Paginator.test.js +0 -308
  182. package/paginator/types.d.ts +0 -38
  183. package/paginator/types.js +0 -5
  184. package/paragraph/Paragraph.d.ts +0 -6
  185. package/paragraph/Paragraph.js +0 -38
  186. package/paragraph/Paragraph.stories.tsx +0 -44
  187. package/password-input/PasswordInput.d.ts +0 -4
  188. package/password-input/PasswordInput.js +0 -166
  189. package/password-input/PasswordInput.stories.tsx +0 -131
  190. package/password-input/PasswordInput.test.js +0 -180
  191. package/password-input/types.d.ts +0 -110
  192. package/password-input/types.js +0 -5
  193. package/progress-bar/ProgressBar.d.ts +0 -4
  194. package/progress-bar/ProgressBar.js +0 -176
  195. package/progress-bar/ProgressBar.stories.jsx +0 -60
  196. package/progress-bar/ProgressBar.test.js +0 -110
  197. package/progress-bar/types.d.ts +0 -36
  198. package/progress-bar/types.js +0 -5
  199. package/quick-nav/QuickNav.d.ts +0 -4
  200. package/quick-nav/QuickNav.js +0 -118
  201. package/quick-nav/QuickNav.stories.tsx +0 -264
  202. package/quick-nav/types.d.ts +0 -21
  203. package/quick-nav/types.js +0 -5
  204. package/radio-group/Radio.d.ts +0 -4
  205. package/radio-group/Radio.js +0 -141
  206. package/radio-group/RadioGroup.d.ts +0 -4
  207. package/radio-group/RadioGroup.js +0 -281
  208. package/radio-group/RadioGroup.stories.tsx +0 -100
  209. package/radio-group/RadioGroup.test.js +0 -695
  210. package/radio-group/types.d.ts +0 -114
  211. package/radio-group/types.js +0 -5
  212. package/resultsetTable/ResultsetTable.d.ts +0 -4
  213. package/resultsetTable/ResultsetTable.js +0 -254
  214. package/resultsetTable/ResultsetTable.stories.tsx +0 -275
  215. package/resultsetTable/ResultsetTable.test.js +0 -348
  216. package/resultsetTable/types.d.ts +0 -67
  217. package/resultsetTable/types.js +0 -5
  218. package/select/Icons.d.ts +0 -10
  219. package/select/Icons.js +0 -93
  220. package/select/Listbox.d.ts +0 -4
  221. package/select/Listbox.js +0 -199
  222. package/select/Option.d.ts +0 -4
  223. package/select/Option.js +0 -110
  224. package/select/Select.d.ts +0 -4
  225. package/select/Select.js +0 -643
  226. package/select/Select.stories.tsx +0 -627
  227. package/select/Select.test.js +0 -2175
  228. package/select/types.d.ts +0 -210
  229. package/select/types.js +0 -5
  230. package/sidenav/Sidenav.d.ts +0 -10
  231. package/sidenav/Sidenav.js +0 -268
  232. package/sidenav/Sidenav.stories.tsx +0 -180
  233. package/sidenav/Sidenav.test.js +0 -44
  234. package/sidenav/types.d.ts +0 -73
  235. package/sidenav/types.js +0 -5
  236. package/slider/Slider.d.ts +0 -4
  237. package/slider/Slider.js +0 -318
  238. package/slider/Slider.stories.tsx +0 -177
  239. package/slider/Slider.test.js +0 -187
  240. package/slider/types.d.ts +0 -82
  241. package/slider/types.js +0 -5
  242. package/spinner/Spinner.d.ts +0 -4
  243. package/spinner/Spinner.js +0 -250
  244. package/spinner/Spinner.stories.jsx +0 -103
  245. package/spinner/Spinner.test.js +0 -64
  246. package/spinner/types.d.ts +0 -32
  247. package/spinner/types.js +0 -5
  248. package/switch/Switch.d.ts +0 -4
  249. package/switch/Switch.js +0 -251
  250. package/switch/Switch.stories.tsx +0 -138
  251. package/switch/Switch.test.js +0 -212
  252. package/switch/types.d.ts +0 -61
  253. package/switch/types.js +0 -5
  254. package/table/Table.d.ts +0 -4
  255. package/table/Table.js +0 -118
  256. package/table/Table.stories.jsx +0 -277
  257. package/table/Table.test.js +0 -26
  258. package/table/types.d.ts +0 -21
  259. package/table/types.js +0 -5
  260. package/tabs/Tabs.d.ts +0 -4
  261. package/tabs/Tabs.js +0 -211
  262. package/tabs/Tabs.stories.tsx +0 -112
  263. package/tabs/Tabs.test.js +0 -140
  264. package/tabs/types.d.ts +0 -82
  265. package/tabs/types.js +0 -5
  266. package/tabs-nav/NavTabs.d.ts +0 -8
  267. package/tabs-nav/NavTabs.js +0 -125
  268. package/tabs-nav/NavTabs.stories.tsx +0 -170
  269. package/tabs-nav/NavTabs.test.js +0 -82
  270. package/tabs-nav/Tab.d.ts +0 -4
  271. package/tabs-nav/Tab.js +0 -130
  272. package/tabs-nav/types.d.ts +0 -53
  273. package/tabs-nav/types.js +0 -5
  274. package/tag/Tag.d.ts +0 -4
  275. package/tag/Tag.js +0 -183
  276. package/tag/Tag.stories.tsx +0 -142
  277. package/tag/Tag.test.js +0 -60
  278. package/tag/types.d.ts +0 -69
  279. package/tag/types.js +0 -5
  280. package/text-input/Suggestion.d.ts +0 -4
  281. package/text-input/Suggestion.js +0 -55
  282. package/text-input/TextInput.d.ts +0 -4
  283. package/text-input/TextInput.js +0 -761
  284. package/text-input/TextInput.stories.tsx +0 -473
  285. package/text-input/TextInput.test.js +0 -1712
  286. package/text-input/types.d.ts +0 -178
  287. package/text-input/types.js +0 -5
  288. package/textarea/Textarea.d.ts +0 -4
  289. package/textarea/Textarea.js +0 -277
  290. package/textarea/Textarea.stories.jsx +0 -157
  291. package/textarea/Textarea.test.js +0 -437
  292. package/textarea/types.d.ts +0 -137
  293. package/textarea/types.js +0 -5
  294. package/toggle-group/ToggleGroup.d.ts +0 -4
  295. package/toggle-group/ToggleGroup.js +0 -215
  296. package/toggle-group/ToggleGroup.stories.tsx +0 -173
  297. package/toggle-group/ToggleGroup.test.js +0 -156
  298. package/toggle-group/types.d.ts +0 -105
  299. package/toggle-group/types.js +0 -5
  300. package/typography/Typography.d.ts +0 -4
  301. package/typography/Typography.js +0 -131
  302. package/typography/Typography.stories.tsx +0 -198
  303. package/typography/types.d.ts +0 -18
  304. package/typography/types.js +0 -5
  305. package/useTheme.d.ts +0 -2
  306. package/useTheme.js +0 -22
  307. package/useTranslatedLabels.d.ts +0 -2
  308. package/useTranslatedLabels.js +0 -20
  309. package/wizard/Wizard.d.ts +0 -4
  310. package/wizard/Wizard.js +0 -285
  311. package/wizard/Wizard.stories.tsx +0 -233
  312. package/wizard/Wizard.test.js +0 -141
  313. package/wizard/types.d.ts +0 -65
  314. package/wizard/types.js +0 -5
@@ -1,171 +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 _react = _interopRequireWildcard(require("react"));
17
-
18
- var _Header = _interopRequireDefault(require("../header/Header"));
19
-
20
- var _Footer = _interopRequireDefault(require("../footer/Footer"));
21
-
22
- var _Sidenav = _interopRequireDefault(require("../sidenav/Sidenav"));
23
-
24
- var _styledComponents = _interopRequireDefault(require("styled-components"));
25
-
26
- var _variables = require("../common/variables.js");
27
-
28
- var _Icons = require("./Icons");
29
-
30
- var _SidenavContext = require("./SidenavContext");
31
-
32
- var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
33
-
34
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
35
-
36
- 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); }
37
-
38
- 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; }
39
-
40
- var year = new Date().getFullYear();
41
-
42
- var Main = function Main(_ref) {
43
- var children = _ref.children;
44
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children);
45
- };
46
-
47
- var defaultHeader = function defaultHeader() {
48
- return /*#__PURE__*/_react["default"].createElement(_Header["default"], {
49
- underlined: true
50
- });
51
- };
52
-
53
- var defaultFooter = function defaultFooter() {
54
- return /*#__PURE__*/_react["default"].createElement(_Footer["default"], {
55
- copyright: "\xA9 DXC Technology ".concat(year, "\u200B\u200B\u200B\u200B. All rights reserved."),
56
- bottomLinks: [{
57
- href: "https://www.linkedin.com/company/dxctechnology",
58
- text: "Linkedin"
59
- }, {
60
- href: "https://twitter.com/dxctechnology",
61
- text: "Twitter"
62
- }, {
63
- href: "https://www.facebook.com/DXCTechnology/",
64
- text: "Facebook"
65
- }],
66
- socialLinks: [{
67
- href: "https://www.linkedin.com/company/dxctechnology",
68
- logo: _Icons.linkedinLogo
69
- }, {
70
- href: "https://twitter.com/dxctechnology",
71
- logo: _Icons.twitterLogo
72
- }, {
73
- href: "https://www.facebook.com/DXCTechnology/",
74
- logo: _Icons.facebookLogo
75
- }]
76
- });
77
- };
78
-
79
- var childTypeExists = function childTypeExists(children, childType) {
80
- return children.find(function (child) {
81
- return (child === null || child === void 0 ? void 0 : child.type) === childType;
82
- });
83
- };
84
-
85
- var DxcApplicationLayout = function DxcApplicationLayout(_ref2) {
86
- var _ref2$visibilityToggl = _ref2.visibilityToggleLabel,
87
- visibilityToggleLabel = _ref2$visibilityToggl === void 0 ? "" : _ref2$visibilityToggl,
88
- header = _ref2.header,
89
- sidenav = _ref2.sidenav,
90
- footer = _ref2.footer,
91
- children = _ref2.children;
92
-
93
- var _useState = (0, _react.useState)(false),
94
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
95
- isSidenavVisibleResponsive = _useState2[0],
96
- setIsSidenavVisibleResponsive = _useState2[1];
97
-
98
- var _useState3 = (0, _react.useState)(false),
99
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
100
- isResponsive = _useState4[0],
101
- setIsResponsive = _useState4[1];
102
-
103
- var ref = (0, _react.useRef)(null);
104
- var translatedLabels = (0, _useTranslatedLabels["default"])();
105
-
106
- var childrenArray = _react["default"].Children.toArray(children);
107
-
108
- var headerContent = header || defaultHeader();
109
- var footerContent = footer || defaultFooter();
110
- var main = childTypeExists(childrenArray, Main);
111
-
112
- var handleResize = function handleResize() {
113
- setIsResponsive(window.matchMedia("(max-width: ".concat(_variables.responsiveSizes.medium, "rem)")).matches);
114
- };
115
-
116
- var handleSidenavVisibility = function handleSidenavVisibility() {
117
- setIsSidenavVisibleResponsive(function (isSidenavVisibleResponsive) {
118
- return !isSidenavVisibleResponsive;
119
- });
120
- };
121
-
122
- (0, _react.useLayoutEffect)(function () {
123
- handleResize();
124
- window.addEventListener("resize", handleResize);
125
- return function () {
126
- window.removeEventListener("resize", handleResize);
127
- };
128
- }, []);
129
- (0, _react.useEffect)(function () {
130
- !isResponsive && setIsSidenavVisibleResponsive(false);
131
- }, [isResponsive]);
132
- return /*#__PURE__*/_react["default"].createElement(ApplicationLayoutContainer, {
133
- hasSidenav: sidenav ? true : false,
134
- isSidenavVisible: isSidenavVisibleResponsive,
135
- ref: ref
136
- }, /*#__PURE__*/_react["default"].createElement(HeaderContainer, null, headerContent), sidenav && isResponsive && /*#__PURE__*/_react["default"].createElement(VisibilityToggle, null, /*#__PURE__*/_react["default"].createElement(HamburgerTrigger, {
137
- onClick: handleSidenavVisibility,
138
- "aria-label": visibilityToggleLabel ? undefined : translatedLabels.applicationLayout.visibilityToggleTitle,
139
- title: translatedLabels.applicationLayout.visibilityToggleTitle
140
- }, _Icons.hamburgerIcon, visibilityToggleLabel)), /*#__PURE__*/_react["default"].createElement(BodyContainer, null, /*#__PURE__*/_react["default"].createElement(_SidenavContext.SidenavContextProvider, {
141
- value: setIsSidenavVisibleResponsive
142
- }, sidenav && (isResponsive ? isSidenavVisibleResponsive : true) && /*#__PURE__*/_react["default"].createElement(SidenavContainer, null, sidenav)), /*#__PURE__*/_react["default"].createElement(MainContainer, null, /*#__PURE__*/_react["default"].createElement(MainContentContainer, null, main), footerContent)));
143
- };
144
-
145
- 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) {
146
- return props.hasSidenav && "top: 116px";
147
- }, function (props) {
148
- return props.isSidenavVisible && "overflow: hidden;";
149
- });
150
-
151
- 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"])));
152
-
153
- 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"])));
154
-
155
- var HamburgerTrigger = _styledComponents["default"].button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n border: 0px solid transparent;\n border-radius: 2px;\n padding: 12px 4px;\n background-color: transparent;\n box-shadow: 0 0 0 2px transparent;\n font-family: Open Sans, sans-serif;\n font-weight: 600;\n font-size: 14px;\n color: #000;\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"])));
156
-
157
- var BodyContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: row;\n flex: 1;\n"])));
158
-
159
- var SidenavContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (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: absolute;\n top: 0px;\n height: 100%;\n }\n"])), _variables.responsiveSizes.medium);
160
-
161
- var MainContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n width: 100%;\n"])));
162
-
163
- var MainContentContainer = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n flex: 1;\n"])));
164
-
165
- DxcApplicationLayout.Header = _Header["default"];
166
- DxcApplicationLayout.Main = Main;
167
- DxcApplicationLayout.Footer = _Footer["default"];
168
- DxcApplicationLayout.SideNav = _Sidenav["default"];
169
- DxcApplicationLayout.useResponsiveSidenavVisibility = _SidenavContext.useResponsiveSidenavVisibility;
170
- var _default = DxcApplicationLayout;
171
- exports["default"] = _default;
@@ -1,161 +0,0 @@
1
- import React from "react";
2
- import DxcApplicationLayout from "./ApplicationLayout";
3
- import Title from "../../.storybook/components/Title";
4
- import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
5
-
6
- export default {
7
- title: "Application Layout ",
8
- component: DxcApplicationLayout,
9
- parameters: {
10
- viewport: {
11
- viewports: INITIAL_VIEWPORTS,
12
- },
13
- },
14
- };
15
-
16
- export const DefaultApplicationLayout = () => (
17
- <>
18
- <DxcApplicationLayout>
19
- <DxcApplicationLayout.Main>
20
- <Title title="Default application layout" theme="light" level={4} />
21
- <p>Main Content</p>
22
- <p>Main Content</p>
23
- <p>Main Content</p>
24
- <p>Main Content</p>
25
- </DxcApplicationLayout.Main>
26
- </DxcApplicationLayout>
27
- </>
28
- );
29
-
30
- export const ApplicationLayoutWithDefaultSidenav = () => (
31
- <>
32
- <DxcApplicationLayout
33
- sidenav={
34
- <DxcApplicationLayout.SideNav
35
- title={
36
- <DxcApplicationLayout.SideNav.Title>
37
- Application layout with push sidenav
38
- </DxcApplicationLayout.SideNav.Title>
39
- }
40
- >
41
- <DxcApplicationLayout.SideNav.Section>
42
- <p>SideNav Content</p>
43
- <p>SideNav Content</p>
44
- <p>SideNav Content</p>
45
- <p>SideNav Content</p>
46
- <p>SideNav Content</p>
47
- </DxcApplicationLayout.SideNav.Section>
48
- </DxcApplicationLayout.SideNav>
49
- }
50
- >
51
- <DxcApplicationLayout.Main>
52
- <p>Main Content</p>
53
- <p>Main Content</p>
54
- <p>Main Content</p>
55
- <p>Main Content</p>
56
- </DxcApplicationLayout.Main>
57
- </DxcApplicationLayout>
58
- </>
59
- );
60
-
61
- export const ApplicationLayoutWithResponsiveSidenav = () => (
62
- <>
63
- <DxcApplicationLayout
64
- visibilityToggleLabel="Example"
65
- sidenav={
66
- <DxcApplicationLayout.SideNav
67
- title={
68
- <DxcApplicationLayout.SideNav.Title>
69
- Application layout with push sidenav
70
- </DxcApplicationLayout.SideNav.Title>
71
- }
72
- >
73
- <DxcApplicationLayout.SideNav.Section>
74
- <p>SideNav Content</p>
75
- <p>SideNav Content</p>
76
- <p>SideNav Content</p>
77
- <p>SideNav Content</p>
78
- <p>SideNav Content</p>
79
- </DxcApplicationLayout.SideNav.Section>
80
- </DxcApplicationLayout.SideNav>
81
- }
82
- >
83
- <DxcApplicationLayout.Main>
84
- <p>Main Content</p>
85
- <p>Main Content</p>
86
- <p>Main Content</p>
87
- <p>Main Content</p>
88
- </DxcApplicationLayout.Main>
89
- </DxcApplicationLayout>
90
- </>
91
- );
92
-
93
- ApplicationLayoutWithResponsiveSidenav.parameters = {
94
- viewport: {
95
- defaultViewport: "pixel",
96
- },
97
- };
98
-
99
- export const ApplicationLayoutWithCustomHeader = () => (
100
- <>
101
- <DxcApplicationLayout
102
- header={<p>Custom Header</p>}
103
- sidenav={
104
- <DxcApplicationLayout.SideNav
105
- title={
106
- <DxcApplicationLayout.SideNav.Title>
107
- Application layout with push sidenav
108
- </DxcApplicationLayout.SideNav.Title>
109
- }
110
- >
111
- <DxcApplicationLayout.SideNav.Section>
112
- <p>SideNav Content</p>
113
- <p>SideNav Content</p>
114
- <p>SideNav Content</p>
115
- <p>SideNav Content</p>
116
- <p>SideNav Content</p>
117
- </DxcApplicationLayout.SideNav.Section>
118
- </DxcApplicationLayout.SideNav>
119
- }
120
- >
121
- <DxcApplicationLayout.Main>
122
- <p>Main Content</p>
123
- <p>Main Content</p>
124
- <p>Main Content</p>
125
- <p>Main Content</p>
126
- </DxcApplicationLayout.Main>
127
- </DxcApplicationLayout>
128
- </>
129
- );
130
-
131
- export const ApplicationLayoutWithCustomFooter = () => (
132
- <>
133
- <DxcApplicationLayout
134
- footer={<p>Custom Footer</p>}
135
- sidenav={
136
- <DxcApplicationLayout.SideNav
137
- title={
138
- <DxcApplicationLayout.SideNav.Title>
139
- Application layout with push sidenav
140
- </DxcApplicationLayout.SideNav.Title>
141
- }
142
- >
143
- <DxcApplicationLayout.SideNav.Section>
144
- <p>SideNav Content</p>
145
- <p>SideNav Content</p>
146
- <p>SideNav Content</p>
147
- <p>SideNav Content</p>
148
- <p>SideNav Content</p>
149
- </DxcApplicationLayout.SideNav.Section>
150
- </DxcApplicationLayout.SideNav>
151
- }
152
- >
153
- <DxcApplicationLayout.Main>
154
- <p>Main Content</p>
155
- <p>Main Content</p>
156
- <p>Main Content</p>
157
- <p>Main Content</p>
158
- </DxcApplicationLayout.Main>
159
- </DxcApplicationLayout>
160
- </>
161
- );
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,42 +0,0 @@
1
- /// <reference types="react" />
2
- declare type ChildrenType = AppLayoutMainPropsType | AppLayoutSidenavPropsType;
3
- export declare type AppLayoutMainPropsType = {
4
- /**
5
- * Everything between the tags will be displayed as the content of the main part of the application.
6
- */
7
- children: React.ReactNode;
8
- };
9
- export declare type AppLayoutSidenavPropsType = {
10
- /**
11
- * The area inside the sidenav. This area can be used to render the content inside the sidenav.
12
- */
13
- children: React.ReactNode;
14
- /**
15
- * The area assigned to render the sidenav title. It is highly recommended to use the sidenav title.
16
- */
17
- title?: React.ReactNode;
18
- };
19
- declare type AppLayoutPropsType = {
20
- /**
21
- * Text to be placed next to the hamburger button that toggles the
22
- * visibility of the sidenav.
23
- */
24
- visibilityToggleLabel?: string;
25
- /**
26
- * Header content.
27
- */
28
- header?: React.ReactNode;
29
- /**
30
- * Sidenav content
31
- */
32
- sidenav?: React.ReactNode;
33
- /**
34
- * Footer content
35
- */
36
- footer?: React.ReactNode;
37
- /**
38
- * The area inside the sidenav. This area can be used to render custom content.
39
- */
40
- children: React.ReactElement<ChildrenType> | React.ReactElement<ChildrenType>[];
41
- };
42
- 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;
package/link/Link.js DELETED
@@ -1,136 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _typeof3 = require("@babel/runtime/helpers/typeof");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports["default"] = void 0;
11
-
12
- var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
13
-
14
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
15
-
16
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
17
-
18
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
19
-
20
- var _react = _interopRequireWildcard(require("react"));
21
-
22
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
23
-
24
- var _variables = require("../common/variables.js");
25
-
26
- var _useTheme = _interopRequireDefault(require("../useTheme"));
27
-
28
- var _templateObject, _templateObject2, _templateObject3;
29
-
30
- var _excluded = ["inheritColor", "disabled", "icon", "iconPosition", "href", "newWindow", "onClick", "margin", "tabIndex", "children"];
31
-
32
- 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); }
33
-
34
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(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; }
35
-
36
- var LinkContent = /*#__PURE__*/_react["default"].memo(function (_ref) {
37
- var iconPosition = _ref.iconPosition,
38
- icon = _ref.icon,
39
- children = _ref.children;
40
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, iconPosition === "after" && children, icon && /*#__PURE__*/_react["default"].createElement(LinkIconContainer, {
41
- iconPosition: iconPosition
42
- }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(LinkIcon, {
43
- src: icon
44
- }) : icon), iconPosition === "before" && children);
45
- });
46
-
47
- var DxcLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
48
- var _ref2$inheritColor = _ref2.inheritColor,
49
- inheritColor = _ref2$inheritColor === void 0 ? false : _ref2$inheritColor,
50
- _ref2$disabled = _ref2.disabled,
51
- disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
52
- icon = _ref2.icon,
53
- _ref2$iconPosition = _ref2.iconPosition,
54
- iconPosition = _ref2$iconPosition === void 0 ? "before" : _ref2$iconPosition,
55
- _ref2$href = _ref2.href,
56
- href = _ref2$href === void 0 ? "" : _ref2$href,
57
- _ref2$newWindow = _ref2.newWindow,
58
- newWindow = _ref2$newWindow === void 0 ? false : _ref2$newWindow,
59
- onClick = _ref2.onClick,
60
- margin = _ref2.margin,
61
- _ref2$tabIndex = _ref2.tabIndex,
62
- tabIndex = _ref2$tabIndex === void 0 ? 0 : _ref2$tabIndex,
63
- children = _ref2.children,
64
- otherProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
65
- var colorsTheme = (0, _useTheme["default"])();
66
- return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
67
- theme: colorsTheme.link
68
- }, /*#__PURE__*/_react["default"].createElement(StyledLink, (0, _extends2["default"])({
69
- as: href ? "a" : "button",
70
- tabIndex: tabIndex,
71
- onClick: !disabled && onClick,
72
- href: !disabled && href ? href : undefined,
73
- target: href ? newWindow ? "_blank" : "_self" : undefined,
74
- disabled: disabled,
75
- inheritColor: inheritColor,
76
- margin: margin,
77
- ref: ref
78
- }, otherProps), /*#__PURE__*/_react["default"].createElement(LinkContent, {
79
- iconPosition: iconPosition,
80
- icon: icon,
81
- children: children
82
- })));
83
- });
84
-
85
- var StyledLink = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n align-items: baseline;\n\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n font-size: ", ";\n font-weight: ", ";\n font-style: ", ";\n font-family: ", ";\n text-decoration-color: transparent;\n width: fit-content;\n\n ", "\n ", "\n color: ", ";\n ", "\n\n &:visited {\n color: ", ";\n &:hover {\n ", "\n }\n }\n &:hover {\n ", "\n }\n &:focus {\n border-radius: 2px;\n outline: 2px solid ", ";\n ", "\n }\n &:active {\n ", "\n }\n"])), function (props) {
86
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
87
- }, function (props) {
88
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
89
- }, function (props) {
90
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
91
- }, function (props) {
92
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
93
- }, function (props) {
94
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
95
- }, function (props) {
96
- return props.theme.fontSize;
97
- }, function (props) {
98
- return props.theme.fontWeight;
99
- }, function (props) {
100
- return props.theme.fontStyle;
101
- }, function (props) {
102
- return props.theme.fontFamily;
103
- }, function (props) {
104
- return "padding-bottom: ".concat(props.theme.underlineSpacing, ";\n border-bottom: ").concat(props.theme.underlineThickness, " ").concat(props.theme.underlineStyle, " transparent;");
105
- }, function (props) {
106
- return props.disabled && "cursor: default;";
107
- }, function (props) {
108
- return props.inheritColor ? "inherit" : !props.disabled ? props.theme.fontColor : props.theme.disabledColor;
109
- }, function (props) {
110
- return props.disabled ? "pointer-events: none;" : "";
111
- }, function (props) {
112
- return !props.inheritColor && !props.disabled ? props.theme.visitedFontColor : "";
113
- }, function (props) {
114
- return "color: ".concat(props.theme.visitedFontColor, ";\n border-bottom-color: ").concat(props.theme.visitedUnderlineColor, ";");
115
- }, function (props) {
116
- return "color: ".concat(props.theme.hoverFontColor, ";\n border-bottom-color: ").concat(props.theme.hoverUnderlineColor, ";\n cursor: pointer;");
117
- }, function (props) {
118
- return props.theme.focusColor;
119
- }, function (props) {
120
- return props.disabled && "outline: none";
121
- }, function (props) {
122
- return "color: ".concat(props.theme.activeFontColor, " !important;\n border-bottom-color: ").concat(props.theme.activeUnderlineColor, " !important;");
123
- });
124
-
125
- var LinkIcon = _styledComponents["default"].img(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])([""])));
126
-
127
- var LinkIconContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n ", ";\n overflow: hidden;\n align-self: center;\n\n img,\n svg {\n height: 100%;\n width: 100%;\n }\n"])), function (props) {
128
- return props.theme.iconSize;
129
- }, function (props) {
130
- return props.theme.iconSize;
131
- }, function (props) {
132
- return "".concat(props.iconPosition === "before" ? "margin-right" : "margin-left", ": ").concat(props.theme.iconSpacing);
133
- });
134
-
135
- var _default = DxcLink;
136
- exports["default"] = _default;