@dxc-technology/halstack-react 0.0.0-d0735cc → 0.0.0-d0f27f4

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 (310) hide show
  1. package/README.md +46 -0
  2. package/dist/index.d.mts +6581 -0
  3. package/dist/index.d.ts +6581 -0
  4. package/dist/index.js +13837 -0
  5. package/dist/index.mjs +13779 -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/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 -1497
  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 -138
  96. package/dialog/Dialog.stories.tsx +0 -212
  97. package/dialog/Dialog.test.js +0 -40
  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 -391
  102. package/dropdown/Dropdown.stories.tsx +0 -249
  103. package/dropdown/Dropdown.test.js +0 -189
  104. package/dropdown/types.d.ts +0 -80
  105. package/dropdown/types.js +0 -5
  106. package/file-input/FileInput.d.ts +0 -4
  107. package/file-input/FileInput.js +0 -593
  108. package/file-input/FileInput.stories.tsx +0 -507
  109. package/file-input/FileInput.test.js +0 -457
  110. package/file-input/FileItem.d.ts +0 -14
  111. package/file-input/FileItem.js +0 -186
  112. package/file-input/types.d.ts +0 -112
  113. package/file-input/types.js +0 -5
  114. package/flex/Flex.d.ts +0 -4
  115. package/flex/Flex.js +0 -57
  116. package/flex/Flex.stories.tsx +0 -103
  117. package/flex/types.d.ts +0 -21
  118. package/flex/types.js +0 -5
  119. package/footer/Footer.d.ts +0 -4
  120. package/footer/Footer.js +0 -185
  121. package/footer/Footer.stories.tsx +0 -130
  122. package/footer/Footer.test.js +0 -109
  123. package/footer/Icons.d.ts +0 -2
  124. package/footer/Icons.js +0 -77
  125. package/footer/types.d.ts +0 -65
  126. package/footer/types.js +0 -5
  127. package/header/Header.d.ts +0 -7
  128. package/header/Header.js +0 -303
  129. package/header/Header.stories.tsx +0 -172
  130. package/header/Header.test.js +0 -79
  131. package/header/Icons.d.ts +0 -2
  132. package/header/Icons.js +0 -34
  133. package/header/types.d.ts +0 -47
  134. package/header/types.js +0 -5
  135. package/heading/Heading.d.ts +0 -4
  136. package/heading/Heading.js +0 -159
  137. package/heading/Heading.stories.tsx +0 -54
  138. package/heading/Heading.test.js +0 -186
  139. package/heading/types.d.ts +0 -33
  140. package/heading/types.js +0 -5
  141. package/inset/Inset.d.ts +0 -3
  142. package/inset/Inset.js +0 -51
  143. package/inset/Inset.stories.tsx +0 -229
  144. package/inset/types.d.ts +0 -37
  145. package/inset/types.js +0 -5
  146. package/layout/ApplicationLayout.d.ts +0 -20
  147. package/layout/ApplicationLayout.js +0 -171
  148. package/layout/ApplicationLayout.stories.tsx +0 -161
  149. package/layout/Icons.d.ts +0 -5
  150. package/layout/Icons.js +0 -66
  151. package/layout/SidenavContext.d.ts +0 -5
  152. package/layout/SidenavContext.js +0 -19
  153. package/layout/types.d.ts +0 -42
  154. package/layout/types.js +0 -5
  155. package/link/Link.d.ts +0 -4
  156. package/link/Link.js +0 -136
  157. package/link/Link.stories.tsx +0 -193
  158. package/link/Link.test.js +0 -83
  159. package/link/types.d.ts +0 -54
  160. package/link/types.js +0 -5
  161. package/main.d.ts +0 -44
  162. package/main.js +0 -369
  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/paragraph/Paragraph.d.ts +0 -6
  181. package/paragraph/Paragraph.js +0 -38
  182. package/paragraph/Paragraph.stories.tsx +0 -44
  183. package/password-input/PasswordInput.d.ts +0 -4
  184. package/password-input/PasswordInput.js +0 -166
  185. package/password-input/PasswordInput.stories.tsx +0 -131
  186. package/password-input/PasswordInput.test.js +0 -180
  187. package/password-input/types.d.ts +0 -110
  188. package/password-input/types.js +0 -5
  189. package/progress-bar/ProgressBar.d.ts +0 -4
  190. package/progress-bar/ProgressBar.js +0 -170
  191. package/progress-bar/ProgressBar.stories.jsx +0 -58
  192. package/progress-bar/ProgressBar.test.js +0 -65
  193. package/progress-bar/types.d.ts +0 -37
  194. package/progress-bar/types.js +0 -5
  195. package/quick-nav/QuickNav.d.ts +0 -4
  196. package/quick-nav/QuickNav.js +0 -118
  197. package/quick-nav/QuickNav.stories.tsx +0 -264
  198. package/quick-nav/types.d.ts +0 -21
  199. package/quick-nav/types.js +0 -5
  200. package/radio-group/Radio.d.ts +0 -4
  201. package/radio-group/Radio.js +0 -141
  202. package/radio-group/RadioGroup.d.ts +0 -4
  203. package/radio-group/RadioGroup.js +0 -283
  204. package/radio-group/RadioGroup.stories.tsx +0 -100
  205. package/radio-group/RadioGroup.test.js +0 -695
  206. package/radio-group/types.d.ts +0 -114
  207. package/radio-group/types.js +0 -5
  208. package/resultsetTable/ResultsetTable.d.ts +0 -4
  209. package/resultsetTable/ResultsetTable.js +0 -254
  210. package/resultsetTable/ResultsetTable.stories.tsx +0 -275
  211. package/resultsetTable/ResultsetTable.test.js +0 -348
  212. package/resultsetTable/types.d.ts +0 -67
  213. package/resultsetTable/types.js +0 -5
  214. package/select/Icons.d.ts +0 -10
  215. package/select/Icons.js +0 -93
  216. package/select/Listbox.d.ts +0 -4
  217. package/select/Listbox.js +0 -199
  218. package/select/Option.d.ts +0 -4
  219. package/select/Option.js +0 -110
  220. package/select/Select.d.ts +0 -4
  221. package/select/Select.js +0 -643
  222. package/select/Select.stories.tsx +0 -627
  223. package/select/Select.test.js +0 -2175
  224. package/select/types.d.ts +0 -210
  225. package/select/types.js +0 -5
  226. package/sidenav/Sidenav.d.ts +0 -10
  227. package/sidenav/Sidenav.js +0 -268
  228. package/sidenav/Sidenav.stories.tsx +0 -180
  229. package/sidenav/Sidenav.test.js +0 -44
  230. package/sidenav/types.d.ts +0 -73
  231. package/sidenav/types.js +0 -5
  232. package/slider/Slider.d.ts +0 -4
  233. package/slider/Slider.js +0 -318
  234. package/slider/Slider.stories.tsx +0 -177
  235. package/slider/Slider.test.js +0 -150
  236. package/slider/types.d.ts +0 -82
  237. package/slider/types.js +0 -5
  238. package/spinner/Spinner.d.ts +0 -4
  239. package/spinner/Spinner.js +0 -250
  240. package/spinner/Spinner.stories.jsx +0 -103
  241. package/spinner/Spinner.test.js +0 -64
  242. package/spinner/types.d.ts +0 -32
  243. package/spinner/types.js +0 -5
  244. package/switch/Switch.d.ts +0 -4
  245. package/switch/Switch.js +0 -195
  246. package/switch/Switch.stories.tsx +0 -160
  247. package/switch/Switch.test.js +0 -98
  248. package/switch/types.d.ts +0 -62
  249. package/switch/types.js +0 -5
  250. package/table/Table.d.ts +0 -4
  251. package/table/Table.js +0 -118
  252. package/table/Table.stories.jsx +0 -277
  253. package/table/Table.test.js +0 -26
  254. package/table/types.d.ts +0 -21
  255. package/table/types.js +0 -5
  256. package/tabs/Tabs.d.ts +0 -4
  257. package/tabs/Tabs.js +0 -211
  258. package/tabs/Tabs.stories.tsx +0 -112
  259. package/tabs/Tabs.test.js +0 -140
  260. package/tabs/types.d.ts +0 -82
  261. package/tabs/types.js +0 -5
  262. package/tabs-nav/NavTabs.d.ts +0 -8
  263. package/tabs-nav/NavTabs.js +0 -125
  264. package/tabs-nav/NavTabs.stories.tsx +0 -170
  265. package/tabs-nav/NavTabs.test.js +0 -82
  266. package/tabs-nav/Tab.d.ts +0 -4
  267. package/tabs-nav/Tab.js +0 -132
  268. package/tabs-nav/types.d.ts +0 -53
  269. package/tabs-nav/types.js +0 -5
  270. package/tag/Tag.d.ts +0 -4
  271. package/tag/Tag.js +0 -183
  272. package/tag/Tag.stories.tsx +0 -142
  273. package/tag/Tag.test.js +0 -60
  274. package/tag/types.d.ts +0 -69
  275. package/tag/types.js +0 -5
  276. package/text-input/Suggestion.d.ts +0 -4
  277. package/text-input/Suggestion.js +0 -55
  278. package/text-input/TextInput.d.ts +0 -4
  279. package/text-input/TextInput.js +0 -770
  280. package/text-input/TextInput.stories.tsx +0 -474
  281. package/text-input/TextInput.test.js +0 -1712
  282. package/text-input/types.d.ts +0 -178
  283. package/text-input/types.js +0 -5
  284. package/textarea/Textarea.d.ts +0 -4
  285. package/textarea/Textarea.js +0 -277
  286. package/textarea/Textarea.stories.jsx +0 -157
  287. package/textarea/Textarea.test.js +0 -437
  288. package/textarea/types.d.ts +0 -137
  289. package/textarea/types.js +0 -5
  290. package/toggle-group/ToggleGroup.d.ts +0 -4
  291. package/toggle-group/ToggleGroup.js +0 -215
  292. package/toggle-group/ToggleGroup.stories.tsx +0 -173
  293. package/toggle-group/ToggleGroup.test.js +0 -156
  294. package/toggle-group/types.d.ts +0 -105
  295. package/toggle-group/types.js +0 -5
  296. package/typography/Typography.d.ts +0 -4
  297. package/typography/Typography.js +0 -131
  298. package/typography/Typography.stories.tsx +0 -198
  299. package/typography/types.d.ts +0 -18
  300. package/typography/types.js +0 -5
  301. package/useTheme.d.ts +0 -2
  302. package/useTheme.js +0 -22
  303. package/useTranslatedLabels.d.ts +0 -2
  304. package/useTranslatedLabels.js +0 -20
  305. package/wizard/Wizard.d.ts +0 -4
  306. package/wizard/Wizard.js +0 -285
  307. package/wizard/Wizard.stories.tsx +0 -233
  308. package/wizard/Wizard.test.js +0 -141
  309. package/wizard/types.d.ts +0 -65
  310. 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;