@dnanpm/styleguide 3.12.2 → 4.0.0

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 (155) hide show
  1. package/build/cjs/assets/fonts/fonts.css.js +3 -0
  2. package/build/cjs/components/Button/Button.d.ts +1 -7
  3. package/build/cjs/components/Button/Button.js +3 -3
  4. package/build/cjs/components/ButtonArrow/ButtonArrow.d.ts +1 -7
  5. package/build/cjs/components/ButtonArrow/ButtonArrow.js +2 -2
  6. package/build/cjs/components/ButtonCard/ButtonCard.js +3 -5
  7. package/build/cjs/components/ButtonIcon/ButtonIcon.js +3 -3
  8. package/build/cjs/components/Chip/Chip.d.ts +2 -18
  9. package/build/cjs/components/Chip/Chip.js +2 -2
  10. package/build/cjs/components/Drawer/Drawer.d.ts +0 -7
  11. package/build/cjs/components/Drawer/Drawer.js +1 -1
  12. package/build/cjs/components/Footer/Components/FooterComponents.js +0 -1
  13. package/build/cjs/components/Hero/Hero.js +3 -2
  14. package/build/cjs/components/Icon/Icon.d.ts +2 -8
  15. package/build/cjs/components/Icon/Icon.js +3 -10
  16. package/build/cjs/components/Input/Input.d.ts +1 -10
  17. package/build/cjs/components/LabelText/LabelText.d.ts +1 -6
  18. package/build/cjs/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenu.d.ts +1 -1
  19. package/build/cjs/components/MainHeaderNavigation/ChildComponents/MinicartTooltip.js +2 -2
  20. package/build/cjs/components/MainHeaderNavigation/MainHeaderNavigation.d.ts +1 -7
  21. package/build/cjs/components/MainHeaderNavigation/MainHeaderNavigation.js +1 -3
  22. package/build/cjs/components/MainHeaderNavigation/context/NavContext.d.ts +0 -1
  23. package/build/cjs/components/MainHeaderNavigation/context/NavContext.js +0 -1
  24. package/build/cjs/components/Modal/Modal.d.ts +0 -5
  25. package/build/cjs/components/ReadMore/ReadMore.d.ts +0 -20
  26. package/build/cjs/components/ReadMore/ReadMore.js +2 -8
  27. package/build/cjs/components/Tab/Tab.d.ts +2 -30
  28. package/build/cjs/components/Tab/Tab.js +2 -33
  29. package/build/cjs/components/Tabs/Tabs.d.ts +1 -9
  30. package/build/cjs/components/Tabs/Tabs.js +9 -17
  31. package/build/cjs/components/index.d.ts +0 -4
  32. package/build/cjs/hooks/useCloseOutsideOrElementClicked.js +1 -1
  33. package/build/cjs/index.js +0 -8
  34. package/build/cjs/themes/globalStyles.js +1 -1
  35. package/build/cjs/themes/themeComponents/navigation.js +0 -4
  36. package/build/es/assets/fonts/fonts.css.js +1 -0
  37. package/build/es/components/Button/Button.d.ts +1 -7
  38. package/build/es/components/Button/Button.js +3 -3
  39. package/build/es/components/ButtonArrow/ButtonArrow.d.ts +1 -7
  40. package/build/es/components/ButtonArrow/ButtonArrow.js +2 -2
  41. package/build/es/components/ButtonCard/ButtonCard.js +3 -5
  42. package/build/es/components/ButtonIcon/ButtonIcon.js +3 -3
  43. package/build/es/components/Chip/Chip.d.ts +2 -18
  44. package/build/es/components/Chip/Chip.js +2 -2
  45. package/build/es/components/Drawer/Drawer.d.ts +0 -7
  46. package/build/es/components/Drawer/Drawer.js +1 -1
  47. package/build/es/components/Footer/Components/FooterComponents.js +0 -1
  48. package/build/es/components/Hero/Hero.js +3 -2
  49. package/build/es/components/Icon/Icon.d.ts +2 -8
  50. package/build/es/components/Icon/Icon.js +3 -10
  51. package/build/es/components/Input/Input.d.ts +1 -10
  52. package/build/es/components/LabelText/LabelText.d.ts +1 -6
  53. package/build/es/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenu.d.ts +1 -1
  54. package/build/es/components/MainHeaderNavigation/ChildComponents/MinicartTooltip.js +2 -2
  55. package/build/es/components/MainHeaderNavigation/MainHeaderNavigation.d.ts +1 -7
  56. package/build/es/components/MainHeaderNavigation/MainHeaderNavigation.js +1 -3
  57. package/build/es/components/MainHeaderNavigation/context/NavContext.d.ts +0 -1
  58. package/build/es/components/MainHeaderNavigation/context/NavContext.js +0 -1
  59. package/build/es/components/Modal/Modal.d.ts +0 -5
  60. package/build/es/components/ReadMore/ReadMore.d.ts +0 -20
  61. package/build/es/components/ReadMore/ReadMore.js +2 -8
  62. package/build/es/components/Tab/Tab.d.ts +2 -30
  63. package/build/es/components/Tab/Tab.js +2 -33
  64. package/build/es/components/Tabs/Tabs.d.ts +1 -9
  65. package/build/es/components/Tabs/Tabs.js +9 -17
  66. package/build/es/components/index.d.ts +0 -4
  67. package/build/es/hooks/useCloseOutsideOrElementClicked.js +1 -1
  68. package/build/es/index.js +0 -4
  69. package/build/es/themes/globalStyles.js +1 -1
  70. package/build/es/themes/themeComponents/navigation.js +1 -3
  71. package/package.json +15 -15
  72. package/build/cjs/build/assets/fonts/fonts.css +0 -129
  73. package/build/cjs/components/ButtonRound/ButtonRound.d.ts +0 -10
  74. package/build/cjs/components/ButtonRound/ButtonRound.js +0 -37
  75. package/build/cjs/components/Icons/index.js +0 -224
  76. package/build/cjs/components/MainNavigation/ChildComponents/BusinessMenu.d.ts +0 -3
  77. package/build/cjs/components/MainNavigation/ChildComponents/BusinessMenu.js +0 -59
  78. package/build/cjs/components/MainNavigation/ChildComponents/DesktopMenu.d.ts +0 -3
  79. package/build/cjs/components/MainNavigation/ChildComponents/DesktopMenu.js +0 -259
  80. package/build/cjs/components/MainNavigation/ChildComponents/HeaderNavigationElements.d.ts +0 -10
  81. package/build/cjs/components/MainNavigation/ChildComponents/HeaderNavigationElements.js +0 -168
  82. package/build/cjs/components/MainNavigation/ChildComponents/LanguageSelector.d.ts +0 -4
  83. package/build/cjs/components/MainNavigation/ChildComponents/LanguageSelector.js +0 -38
  84. package/build/cjs/components/MainNavigation/ChildComponents/LinkModifier.d.ts +0 -9
  85. package/build/cjs/components/MainNavigation/ChildComponents/LinkModifier.js +0 -38
  86. package/build/cjs/components/MainNavigation/ChildComponents/LoginTooltip.d.ts +0 -6
  87. package/build/cjs/components/MainNavigation/ChildComponents/LoginTooltip.js +0 -23
  88. package/build/cjs/components/MainNavigation/ChildComponents/MainNavTooltipMenu.d.ts +0 -24
  89. package/build/cjs/components/MainNavigation/ChildComponents/MainNavTooltipMenu.js +0 -104
  90. package/build/cjs/components/MainNavigation/ChildComponents/MainNavTooltipMenuExportedStyles.d.ts +0 -6
  91. package/build/cjs/components/MainNavigation/ChildComponents/MainNavTooltipMenuExportedStyles.js +0 -62
  92. package/build/cjs/components/MainNavigation/ChildComponents/MinicartTooltip.d.ts +0 -7
  93. package/build/cjs/components/MainNavigation/ChildComponents/MinicartTooltip.js +0 -26
  94. package/build/cjs/components/MainNavigation/ChildComponents/MobileMenu.d.ts +0 -3
  95. package/build/cjs/components/MainNavigation/ChildComponents/MobileMenu.js +0 -193
  96. package/build/cjs/components/MainNavigation/ChildComponents/PageSearch.d.ts +0 -6
  97. package/build/cjs/components/MainNavigation/ChildComponents/PageSearch.js +0 -23
  98. package/build/cjs/components/MainNavigation/ChildComponents/Ribbon.d.ts +0 -13
  99. package/build/cjs/components/MainNavigation/ChildComponents/Ribbon.js +0 -74
  100. package/build/cjs/components/MainNavigation/MainNavigation.d.ts +0 -38
  101. package/build/cjs/components/MainNavigation/MainNavigation.js +0 -319
  102. package/build/cjs/components/MainNavigation/context/MobileMenuContext.d.ts +0 -6
  103. package/build/cjs/components/MainNavigation/context/MobileMenuContext.js +0 -11
  104. package/build/cjs/components/MainNavigation/context/NavContext.d.ts +0 -29
  105. package/build/cjs/components/MainNavigation/context/NavContext.js +0 -46
  106. package/build/cjs/components/MainNavigation/globalNavStyles.d.ts +0 -13
  107. package/build/cjs/components/MainNavigation/globalNavStyles.js +0 -94
  108. package/build/cjs/components/SecondaryNavigation/SecondaryNavigation.d.ts +0 -90
  109. package/build/cjs/components/SecondaryNavigation/SecondaryNavigation.js +0 -207
  110. package/build/cjs/components/TooltipMenu/ChildComponents/TooltipMenuExportedStyles.d.ts +0 -10
  111. package/build/cjs/components/TooltipMenu/ChildComponents/TooltipMenuExportedStyles.js +0 -34
  112. package/build/cjs/components/TooltipMenu/TooltipMenu.d.ts +0 -45
  113. package/build/cjs/components/TooltipMenu/TooltipMenu.js +0 -76
  114. package/build/es/build/assets/fonts/fonts.css +0 -129
  115. package/build/es/components/ButtonRound/ButtonRound.d.ts +0 -10
  116. package/build/es/components/ButtonRound/ButtonRound.js +0 -29
  117. package/build/es/components/Icons/index.js +0 -109
  118. package/build/es/components/MainNavigation/ChildComponents/BusinessMenu.d.ts +0 -3
  119. package/build/es/components/MainNavigation/ChildComponents/BusinessMenu.js +0 -51
  120. package/build/es/components/MainNavigation/ChildComponents/DesktopMenu.d.ts +0 -3
  121. package/build/es/components/MainNavigation/ChildComponents/DesktopMenu.js +0 -251
  122. package/build/es/components/MainNavigation/ChildComponents/HeaderNavigationElements.d.ts +0 -10
  123. package/build/es/components/MainNavigation/ChildComponents/HeaderNavigationElements.js +0 -159
  124. package/build/es/components/MainNavigation/ChildComponents/LanguageSelector.d.ts +0 -4
  125. package/build/es/components/MainNavigation/ChildComponents/LanguageSelector.js +0 -30
  126. package/build/es/components/MainNavigation/ChildComponents/LinkModifier.d.ts +0 -9
  127. package/build/es/components/MainNavigation/ChildComponents/LinkModifier.js +0 -29
  128. package/build/es/components/MainNavigation/ChildComponents/LoginTooltip.d.ts +0 -6
  129. package/build/es/components/MainNavigation/ChildComponents/LoginTooltip.js +0 -15
  130. package/build/es/components/MainNavigation/ChildComponents/MainNavTooltipMenu.d.ts +0 -24
  131. package/build/es/components/MainNavigation/ChildComponents/MainNavTooltipMenu.js +0 -96
  132. package/build/es/components/MainNavigation/ChildComponents/MainNavTooltipMenuExportedStyles.d.ts +0 -6
  133. package/build/es/components/MainNavigation/ChildComponents/MainNavTooltipMenuExportedStyles.js +0 -57
  134. package/build/es/components/MainNavigation/ChildComponents/MinicartTooltip.d.ts +0 -7
  135. package/build/es/components/MainNavigation/ChildComponents/MinicartTooltip.js +0 -18
  136. package/build/es/components/MainNavigation/ChildComponents/MobileMenu.d.ts +0 -3
  137. package/build/es/components/MainNavigation/ChildComponents/MobileMenu.js +0 -185
  138. package/build/es/components/MainNavigation/ChildComponents/PageSearch.d.ts +0 -6
  139. package/build/es/components/MainNavigation/ChildComponents/PageSearch.js +0 -15
  140. package/build/es/components/MainNavigation/ChildComponents/Ribbon.d.ts +0 -13
  141. package/build/es/components/MainNavigation/ChildComponents/Ribbon.js +0 -66
  142. package/build/es/components/MainNavigation/MainNavigation.d.ts +0 -38
  143. package/build/es/components/MainNavigation/MainNavigation.js +0 -311
  144. package/build/es/components/MainNavigation/context/MobileMenuContext.d.ts +0 -6
  145. package/build/es/components/MainNavigation/context/MobileMenuContext.js +0 -7
  146. package/build/es/components/MainNavigation/context/NavContext.d.ts +0 -29
  147. package/build/es/components/MainNavigation/context/NavContext.js +0 -42
  148. package/build/es/components/MainNavigation/globalNavStyles.d.ts +0 -13
  149. package/build/es/components/MainNavigation/globalNavStyles.js +0 -89
  150. package/build/es/components/SecondaryNavigation/SecondaryNavigation.d.ts +0 -90
  151. package/build/es/components/SecondaryNavigation/SecondaryNavigation.js +0 -199
  152. package/build/es/components/TooltipMenu/ChildComponents/TooltipMenuExportedStyles.d.ts +0 -10
  153. package/build/es/components/TooltipMenu/ChildComponents/TooltipMenuExportedStyles.js +0 -31
  154. package/build/es/components/TooltipMenu/TooltipMenu.d.ts +0 -45
  155. package/build/es/components/TooltipMenu/TooltipMenu.js +0 -68
@@ -1,51 +0,0 @@
1
- import React__default, { useContext, useRef } from 'react';
2
- import { styled } from 'styled-components';
3
- import theme from '../../../themes/theme.js';
4
- import { getMultipliedSize } from '../../../utils/styledUtils.js';
5
- import NavContext from '../context/NavContext.js';
6
-
7
- const BusinessMenuLink = styled.a `
8
- color: ${p => (p.$isActive ? theme.color.text.pink : theme.color.text.black)};
9
- display: block;
10
- text-decoration: none;
11
- margin: ${p => !p.$isMobileMenu
12
- ? `0 ${getMultipliedSize(theme.base.baseWidth, 1)}`
13
- : `${getMultipliedSize(theme.base.baseWidth, 1.25)} ${getMultipliedSize(theme.base.baseWidth, 2)} `};
14
- &:hover,
15
- &:focus {
16
- text-decoration: none;
17
- color: ${theme.color.text.pink};
18
- outline: none;
19
- }
20
- `;
21
- const BusinessMenuItem = styled.li `
22
- display: flex;
23
- overflow: hidden;
24
- `;
25
- const BusinessMenuList = styled.ul `
26
- display: ${({ $isMobileMenu }) => (!$isMobileMenu ? 'inline-flex' : 'block')};
27
- align-items: center;
28
- position: relative;
29
- list-style: none;
30
- margin: ${({ $isMobileMenu }) => $isMobileMenu ? '1rem 0' : `0 ${getMultipliedSize(theme.base.baseWidth, 0.5)}`};
31
- padding: 0;
32
- background-color: ${theme.color.background.white.default};
33
- font-size: ${({ $isMobileMenu }) => $isMobileMenu ? theme.fontSize.default : theme.fontSize.s};
34
- height: 100%;
35
- `;
36
- const BusinessMenu = () => {
37
- var _a;
38
- const { items, lang, isMobileMenu, resetMenuEvents } = useContext(NavContext);
39
- const ref = useRef(null);
40
- const currentBusinessId = items.businessId;
41
- const businessMenuItems = (_a = items.businessSelector) === null || _a === void 0 ? void 0 : _a.items;
42
- if (!(businessMenuItems === null || businessMenuItems === void 0 ? void 0 : businessMenuItems.length) ||
43
- !currentBusinessId ||
44
- (!items.businessSelector && (businessMenuItems === null || businessMenuItems === void 0 ? void 0 : businessMenuItems.length) > 0)) {
45
- return null;
46
- }
47
- return (React__default.createElement(BusinessMenuList, { "$isMobileMenu": isMobileMenu, ref: ref, role: "menubar", "aria-hidden": "false", "data-testid": "business-menu-ul" }, businessMenuItems.map((item, index) => (React__default.createElement(BusinessMenuItem, { className: "menu-item", key: item.businessId, "data-testid": `business-menu-selection-item-${index + 1}`, role: "none" },
48
- React__default.createElement(BusinessMenuLink, { className: "menu-link", href: item.urls[lang], onClick: resetMenuEvents, "$isActive": item.businessId === currentBusinessId, "$isMobileMenu": isMobileMenu, role: "menuitem" }, item.titles[lang]))))));
49
- };
50
-
51
- export { BusinessMenu as default };
@@ -1,3 +0,0 @@
1
- import type { FunctionComponent } from 'react';
2
- declare const DesktopMenu: FunctionComponent;
3
- export default DesktopMenu;
@@ -1,251 +0,0 @@
1
- import { ChevronRight } from '@dnanpm/icons';
2
- import React__default, { useContext, useRef, useEffect } from 'react';
3
- import useOutsideClick from '../../../hooks/useOutsideClick.js';
4
- import { keyframes, css, styled } from 'styled-components';
5
- import theme from '../../../themes/theme.js';
6
- import { subMenuWidth, subMenuWidthXl, menuItemMargin } from '../../../themes/themeComponents/navigation.js';
7
- import { getMultipliedSize, media } from '../../../utils/styledUtils.js';
8
- import Box from '../../Box/Box.js';
9
- import Icon from '../../Icon/Icon.js';
10
- import NavContext from '../context/NavContext.js';
11
- import { MenuList, MenuItem, MenuLinkWithChildren } from '../globalNavStyles.js';
12
- import LinkModifier, { isSelected } from './LinkModifier.js';
13
-
14
- const fadeIn = keyframes `
15
- 0% {
16
- opacity: 0;
17
- transform: translateY(-5px);
18
- }
19
- 100% {
20
- opacity: 1;
21
- transform: translateY(0px);
22
- }
23
- `;
24
- const fadeRight = keyframes `
25
- 0% {
26
- opacity: 0;
27
- transform: translateX(-5px);
28
- }
29
- 100% {
30
- opacity: 1;
31
- transform: translate(0px);
32
- }
33
- `;
34
- const fadeInAnimation = css `
35
- animation: ${fadeIn} 0.3s ease-in-out;
36
- `;
37
- const fadeRightAnimation = css `
38
- animation: ${fadeRight} 0.3s ease-in-out;
39
- `;
40
- const noAnimation = css `
41
- animation: none;
42
- `;
43
- const SubMenuListRight = styled.div `
44
- display: ${({ $menuStates, $navItemId }) => $menuStates.level1 && $menuStates.level2 && $menuStates.level2 === $navItemId
45
- ? 'block'
46
- : 'none'};
47
- ${({ $menuStates }) => $menuStates.level2 && $menuStates.animate2 ? fadeRightAnimation : noAnimation};
48
- top: -${getMultipliedSize(theme.base.baseHeight, 2)};
49
- padding: ${getMultipliedSize(theme.base.baseHeight, 1)};
50
- position: absolute;
51
- width: ${subMenuWidth};
52
- left: 100%;
53
- transform: translateY(var(--nav-item-overflow-fix));
54
-
55
- ${media.xl `
56
- width: ${subMenuWidthXl};
57
- `};
58
- `;
59
- const SubMenuItem = styled.li `
60
- display: block;
61
- position: relative;
62
- > a {
63
- color: ${p => (p.isHighlighted ? theme.color.text.pink : theme.color.text.black)};
64
- span {
65
- position: relative;
66
- &:after {
67
- position: absolute;
68
- content: '';
69
- width: 100%;
70
- bottom: -6px;
71
- left: 0;
72
- border-bottom: 1px solid
73
- ${p => (p.isHighlighted ? theme.color.default.pink : 'transparent')};
74
- }
75
- }
76
- }
77
- `;
78
- const DesktopMenuList = styled(MenuList) `
79
- ul {
80
- padding-left: 0;
81
-
82
- li {
83
- a,
84
- button {
85
- line-height: ${theme.lineHeight.s};
86
- display: flex;
87
- width: 100%;
88
- align-items: center;
89
- padding: ${getMultipliedSize(theme.base.baseHeight, 1)};
90
- justify-content: space-between;
91
- }
92
- }
93
- }
94
- > li {
95
- > a,
96
- > button {
97
- white-space: nowrap;
98
- }
99
- }
100
- a,
101
- button {
102
- font-size: ${theme.fontSize.s};
103
- ${media.xl `
104
- font-size: ${theme.fontSize.default};
105
- `};
106
- }
107
- margin-top: -2px;
108
- `;
109
- const DesktopMenuItem = styled(MenuItem) `
110
- &:first-child > ${MenuLinkWithChildren} {
111
- margin: 0 ${menuItemMargin};
112
- }
113
- > a,
114
- > button {
115
- width: auto;
116
- display: flex;
117
- padding: 0.75rem 0;
118
- margin: 0 ${getMultipliedSize(theme.base.baseHeight, 1.3)};
119
- ${media.xl `
120
- margin: 0 ${menuItemMargin};
121
- `};
122
- border-bottom: 3px solid ${theme.color.default.white};
123
- position: relative;
124
- color: ${p => (p.isActive ? theme.color.text.pink : theme.color.text.black)};
125
- &:after {
126
- position: absolute;
127
- content: '';
128
- width: 100%;
129
- bottom: -4px;
130
- border-bottom: 1px solid ${p => (p.isActive ? theme.color.default.pink : 'transparent')};
131
- }
132
- &:hover,
133
- &:focus {
134
- border-bottom: 3px solid ${theme.color.default.white};
135
- }
136
- }
137
- &:hover,
138
- &:focus {
139
- > a,
140
- > button {
141
- cursor: pointer;
142
- color: ${theme.color.text.pink};
143
- }
144
- }
145
- `;
146
- const SubMenuList = styled.div `
147
- position: absolute;
148
- left: -${getMultipliedSize(theme.base.baseHeight, 0.5)};
149
- display: ${({ $menuStates, $navItemId }) => ($menuStates === null || $menuStates === void 0 ? void 0 : $menuStates.level1) === $navItemId ? 'block' : 'none'};
150
- z-index: ${({ $navZIndex }) => $navZIndex + 1};
151
- margin-top: 1px;
152
- ${({ $menuStates }) => $menuStates.level1 && $menuStates.animate2 && !$menuStates.level2
153
- ? fadeInAnimation
154
- : noAnimation};
155
-
156
- width: ${subMenuWidth};
157
- ${media.xl `
158
- width: ${subMenuWidthXl};
159
- `};
160
- > div {
161
- border-top-left-radius: 0;
162
- border-top-right-radius: 0;
163
- }
164
- `;
165
- const SubMenuLevel2 = ({ menuItem }) => {
166
- const { lang, menuLevel, currentUrl } = useContext(NavContext);
167
- // Handle the case where the submenu is not visible
168
- const measureRef = useRef(null);
169
- useEffect(() => {
170
- const subNavArea = measureRef.current;
171
- const handleOffSet = () => {
172
- if (menuLevel.level2 === menuItem.id && measureRef.current) {
173
- const offsetFix = window.innerHeight - subNavArea.getBoundingClientRect().bottom;
174
- if (offsetFix < 0) {
175
- subNavArea.style.setProperty('--nav-item-overflow-fix', `${offsetFix}px`);
176
- }
177
- }
178
- };
179
- handleOffSet();
180
- }, [menuLevel.level2, menuItem.id]);
181
- return (React__default.createElement(SubMenuListRight, { role: "menu", "$menuStates": menuLevel, "$navItemId": menuItem.id, "data-testid": "desktop-nav-menu-ul-level-3", ref: measureRef },
182
- React__default.createElement(Box, { elevation: "high", padding: getMultipliedSize(theme.base.baseHeight, 1) },
183
- React__default.createElement("ul", null, menuItem.pages.map((item, index) => {
184
- const menuUrl = item.urls[lang];
185
- return (React__default.createElement(SubMenuItem, { key: item.id, isHighlighted: isSelected(currentUrl, menuUrl, true), role: "none", "data-testid": `desktop-nav-item-level-3-link-${index + 1}` },
186
- React__default.createElement(LinkModifier, { menuItem: item, tabIndex: false })));
187
- })))));
188
- };
189
- const SubMenuLevel1 = ({ menuItem }) => {
190
- const { lang, navZIndex, menuLevel, handleNavMenuClick, currentUrl } = useContext(NavContext);
191
- const level1HasElements = Boolean(menuItem.pages.length);
192
- const menuClick = (element) => (e) => {
193
- e.preventDefault();
194
- handleNavMenuClick(element.id, 'level2');
195
- };
196
- if (!level1HasElements) {
197
- return null;
198
- }
199
- return (React__default.createElement(SubMenuList, { "aria-hidden": false, "$menuStates": menuLevel, "$navItemId": menuItem.id, "$navZIndex": navZIndex, "data-testid": "desktop-nav-menu-ul-level-2" },
200
- React__default.createElement(Box, { elevation: "high", padding: getMultipliedSize(theme.base.baseHeight, 1) },
201
- React__default.createElement("ul", null, menuItem.pages.map((element, index) => {
202
- const menuUrl = element.urls[lang];
203
- if (element.pages.length) {
204
- return (React__default.createElement(SubMenuItem, { key: element.id, role: "none", "data-testid": `desktop-nav-item-level-2-link-${index + 1}` },
205
- React__default.createElement(MenuLinkWithChildren, { isActive: menuLevel.level2 === element.id, isHighlighted: isSelected(currentUrl, menuUrl), onClick: menuClick(element), role: "menuitem", "aria-haspopup": "true", "data-testid": "menu-button-with-children" },
206
- React__default.createElement("span", null, element.titles[lang]),
207
- React__default.createElement(Icon, { icon: ChevronRight, size: "1rem" })),
208
- React__default.createElement(SubMenuLevel2, { menuItem: element })));
209
- }
210
- return (React__default.createElement(SubMenuItem, { key: element.id, isHighlighted: isSelected(currentUrl, menuUrl, true), role: "none", "data-testid": `desktop-nav-item-level-2-link-${index + 1}` },
211
- React__default.createElement(LinkModifier, { menuItem: element, tabIndex: false })));
212
- })))));
213
- };
214
- const MenuItemWithChildren = ({ menuItem, currentLevel }) => {
215
- const { lang, menuLevel, handleNavMenuClick, currentUrl } = useContext(NavContext);
216
- const menuClickMain = (element) => (e) => {
217
- e.preventDefault();
218
- handleNavMenuClick(element.id, 'level1');
219
- };
220
- const menuUrl = menuItem.urls[lang];
221
- return (React__default.createElement(DesktopMenuItem, { isActive: menuLevel.level1 === menuItem.id || isSelected(currentUrl, menuUrl), role: "none", "data-testid": `desktop-nav-item-level-1-link-${currentLevel + 1}` },
222
- React__default.createElement(MenuLinkWithChildren, { onClick: menuClickMain(menuItem), role: "menuitem", "aria-haspopup": "true", "data-testid": "menu-button-with-children" },
223
- React__default.createElement("span", null, menuItem.titles[lang])),
224
- React__default.createElement(SubMenuLevel1, { menuItem: menuItem })));
225
- };
226
- const DesktopMenu = () => {
227
- var _a;
228
- const { items, lang, resetMenuEvents, menuLevel, currentUrl } = useContext(NavContext);
229
- const mainNavigation = ((_a = items === null || items === void 0 ? void 0 : items.mainNavigation) === null || _a === void 0 ? void 0 : _a.pages) || [];
230
- const ref = useRef(null);
231
- useOutsideClick(ref, () => {
232
- if (menuLevel.level1 || menuLevel.level2) {
233
- resetMenuEvents();
234
- }
235
- });
236
- if (!mainNavigation.length) {
237
- return null;
238
- }
239
- return (React__default.createElement(DesktopMenuList, { role: "menubar", "aria-hidden": false, ref: ref, "data-testid": "desktop-nav-menu-ul" }, mainNavigation.map((navElement, index) => {
240
- var _a;
241
- const menuHasChildren = !!((_a = navElement.pages) === null || _a === void 0 ? void 0 : _a.length);
242
- if (menuHasChildren) {
243
- return (React__default.createElement(MenuItemWithChildren, { menuItem: navElement, key: navElement.id, currentLevel: index }));
244
- }
245
- return (React__default.createElement(DesktopMenuItem, { key: navElement.id, role: "none", "data-testid": `desktop-nav-item-level-1-link-${index + 1}`, isActive: menuLevel.level1 === navElement.id ||
246
- isSelected(currentUrl, navElement.urls[lang]) },
247
- React__default.createElement(LinkModifier, { menuItem: navElement, tabIndex: false })));
248
- })));
249
- };
250
-
251
- export { DesktopMenu as default };
@@ -1,10 +0,0 @@
1
- import React from 'react';
2
- import type { MainNavigationProps } from '../MainNavigation';
3
- export declare const IconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
4
- isActive?: boolean;
5
- collapseSize: number;
6
- }>> & string;
7
- declare const HeaderNavigationElements: ({ navElementProps, }: {
8
- navElementProps: MainNavigationProps;
9
- }) => React.JSX.Element;
10
- export default HeaderNavigationElements;
@@ -1,159 +0,0 @@
1
- import { Close, Menu } from '@dnanpm/icons';
2
- import React__default, { useContext } from 'react';
3
- import { styled } from 'styled-components';
4
- import theme from '../../../themes/theme.js';
5
- import breakpoints from '../../../themes/themeComponents/breakpoints.js';
6
- import { IconContainerWidth, navIconSizeMobile, navIconSize, wideMenuBreakpoint, mobileLogoSize, desktopLogoSize } from '../../../themes/themeComponents/navigation.js';
7
- import { getMultipliedSize } from '../../../utils/styledUtils.js';
8
- import DnaLogo from '../../DnaLogo/DnaLogo.js';
9
- import Icon from '../../Icon/Icon.js';
10
- import NavContext from '../context/NavContext.js';
11
- import BusinessMenu from './BusinessMenu.js';
12
- import DesktopMenu from './DesktopMenu.js';
13
- import LanguageSelector from './LanguageSelector.js';
14
- import LoginTooltip from './LoginTooltip.js';
15
- import MinicartTooltip from './MinicartTooltip.js';
16
- import PageSearch from './PageSearch.js';
17
-
18
- const DesktopMenuContainer = styled.div `
19
- height: 100%;
20
- display: none;
21
- border-bottom: 1px solid ${theme.color.line.L03};
22
- @media (min-width: ${p => p.collapseSize + 1}px) {
23
- display: block;
24
- padding-left: ${getMultipliedSize(theme.base.baseWidth, 0.5)};
25
- }
26
- `;
27
- const IconContainer = styled.div `
28
- margin: 0;
29
- display: flex;
30
- flex-direction: column;
31
- justify-content: center;
32
- align-items: center;
33
- width: ${IconContainerWidth};
34
- transition: color 0.2s ease-in-out;
35
-
36
- > span.dnasg-icon > svg {
37
- display: block;
38
- height: ${navIconSizeMobile};
39
- width: ${navIconSizeMobile};
40
- }
41
- > span.dnasg-icon > svg,
42
- > span.dnasg-icon + span {
43
- color: ${p => (p.isActive ? theme.color.text.pink : 'inherit')};
44
- }
45
-
46
- @media (min-width: ${p => p.collapseSize + 1}px) {
47
- > span.dnasg-icon > svg {
48
- height: ${navIconSize};
49
- width: ${navIconSize};
50
- }
51
- > span.dnasg-icon + span {
52
- display: block;
53
- }
54
- }
55
- @media (min-width: ${wideMenuBreakpoint}px) {
56
- margin: 0 ${getMultipliedSize(theme.base.baseHeight, 0.4)} 0
57
- ${getMultipliedSize(theme.base.baseHeight, 2)};
58
- }
59
- `;
60
- const HeaderIconContainer = styled.div `
61
- display: flex;
62
- justify-content: flex-end;
63
- border-bottom: 1px solid ${theme.color.line.L03};
64
- padding-right: 0;
65
- flex: 1 1 100%;
66
- @media (min-width: ${p => p.collapseSize + 1}px) {
67
- padding-right: 1rem;
68
- }
69
- button {
70
- &:focus {
71
- outline: none;
72
- }
73
- }
74
- `;
75
- const HeaderIconWrapper = styled.div `
76
- display: flex;
77
- flex: 1 1 100%;
78
- justify-content: space-between;
79
- max-width: 18.75rem;
80
- @media (min-width: ${p => p.collapseSize + 1}px) {
81
- justify-content: flex-end;
82
- flex: 0 0 100%;
83
- }
84
- `;
85
- const MobileMenuButton = styled.button `
86
- display: block;
87
- @media (min-width: ${p => p.collapseSize + 1}px) {
88
- display: none;
89
- }
90
- div > span.dnasg-icon > svg {
91
- height: ${navIconSizeMobile};
92
- width: ${navIconSizeMobile};
93
- margin: 0 auto;
94
- }
95
- &:focus,
96
- &:active {
97
- color: ${theme.color.text.pink};
98
- }
99
- font-size: 100%;
100
- font-family: inherit;
101
- border: 0;
102
- padding: 0;
103
- background: transparent;
104
- `;
105
- const MenuWrapper = styled.div `
106
- height: 50%;
107
- white-space: nowrap;
108
- align-self: flex-end;
109
- `;
110
- const LogoContainer = styled.div `
111
- margin: 0;
112
- width: ${mobileLogoSize};
113
- height: ${mobileLogoSize};
114
- @media (min-width: ${p => p.collapseSize + 1}px) {
115
- width: ${desktopLogoSize};
116
- height: ${desktopLogoSize};
117
- }
118
- `;
119
- const HeaderIconWrapperNoMargin = styled.div `
120
- margin: 0;
121
- `;
122
- const RenderDesktopMenu = ({ collapseSize }) => (React__default.createElement(DesktopMenuContainer, { collapseSize: collapseSize },
123
- React__default.createElement(MenuWrapper, null,
124
- React__default.createElement(BusinessMenu, null)),
125
- React__default.createElement(MenuWrapper, null,
126
- React__default.createElement(DesktopMenu, null))));
127
- const MenuFunctionality = ({ menuProps }) => {
128
- var _a;
129
- const { collapseSize = breakpoints.md, search: isSearch, searchText: searchLabel, minicart: isMinicart, minicartText: minicartLabel, minicartAmount = 0, login: isLogin, loginText: loginLabel, language = 'fi', languageSelector: languageSelectorActive, items, } = menuProps;
130
- const languagesObject = (_a = items === null || items === void 0 ? void 0 : items.languageSelector) === null || _a === void 0 ? void 0 : _a.urls;
131
- const { handleToggleClick, isMobileMenuOpen } = useContext(NavContext);
132
- return (React__default.createElement(HeaderIconContainer, { collapseSize: collapseSize },
133
- React__default.createElement(HeaderIconWrapper, { collapseSize: collapseSize },
134
- languagesObject && languageSelectorActive && (React__default.createElement(IconContainer, { "data-testid": "language-selector-container", collapseSize: collapseSize },
135
- React__default.createElement(LanguageSelector, { currentLanguage: language, languagesObject: languagesObject }))),
136
- isSearch && (React__default.createElement(IconContainer, { "data-testid": "header-search-container", collapseSize: collapseSize },
137
- React__default.createElement(PageSearch, { searchLabel: searchLabel }))),
138
- isMinicart && (React__default.createElement(IconContainer, { "data-testid": "header-minicart-container", collapseSize: collapseSize },
139
- React__default.createElement(MinicartTooltip, { minicartAmount: minicartAmount, minicartLabel: minicartLabel }))),
140
- isLogin && (React__default.createElement(IconContainer, { "data-testid": "header-login-container", collapseSize: collapseSize },
141
- React__default.createElement(LoginTooltip, { loginLabel: loginLabel }))),
142
- React__default.createElement(MobileMenuButton, { onClick: handleToggleClick, "aria-label": "menu toggle", role: "button", "aria-expanded": isMobileMenuOpen, collapseSize: collapseSize, "data-testid": "header-mobile-menu-toggle" },
143
- React__default.createElement(IconContainer, { isActive: isMobileMenuOpen, collapseSize: collapseSize },
144
- React__default.createElement(Icon, { icon: isMobileMenuOpen ? Close : Menu, size: "2rem" }))))));
145
- };
146
- const HeaderNavigationElements = ({ navElementProps, }) => {
147
- var _a;
148
- const { collapseSize = breakpoints.md, items, language = 'fi' } = navElementProps;
149
- const currentBusinessSite = (_a = items === null || items === void 0 ? void 0 : items.businessSelector) === null || _a === void 0 ? void 0 : _a.items.find(item => item.businessId === items.businessId);
150
- return (React__default.createElement(React__default.Fragment, null,
151
- React__default.createElement(HeaderIconWrapperNoMargin, null,
152
- React__default.createElement("a", { href: currentBusinessSite === null || currentBusinessSite === void 0 ? void 0 : currentBusinessSite.urls[language], title: "DNA", "aria-label": "DNA", "data-testid": "dna-logo-link" },
153
- React__default.createElement(LogoContainer, { collapseSize: collapseSize },
154
- React__default.createElement(DnaLogo, { size: "100%" })))),
155
- React__default.createElement(RenderDesktopMenu, { collapseSize: collapseSize }),
156
- React__default.createElement(MenuFunctionality, { menuProps: navElementProps })));
157
- };
158
-
159
- export { IconContainer, HeaderNavigationElements as default };
@@ -1,4 +0,0 @@
1
- import React from 'react';
2
- import type { LanguageSelectorProps } from '../types/globalNavProps';
3
- declare const LanguageSelector: ({ currentLanguage, languagesObject }: LanguageSelectorProps) => React.JSX.Element | null;
4
- export default LanguageSelector;
@@ -1,30 +0,0 @@
1
- import { Globe } from '@dnanpm/icons';
2
- import React__default, { useContext, useCallback } from 'react';
3
- import { styled } from 'styled-components';
4
- import theme from '../../../themes/theme.js';
5
- import { getMultipliedSize } from '../../../utils/styledUtils.js';
6
- import Icon from '../../Icon/Icon.js';
7
- import NavContext from '../context/NavContext.js';
8
- import { MenuLink } from '../globalNavStyles.js';
9
- import MainNavTooltipMenu from './MainNavTooltipMenu.js';
10
-
11
- const MenuItem = styled(MenuLink) `
12
- font-weight: ${theme.fontWeight.medium};
13
- margin: ${getMultipliedSize(theme.base.baseHeight, 1)} auto;
14
- text-align: center;
15
- `;
16
- const LangComponent = ({ currentLanguage, languagesObject }) => (React__default.createElement(React__default.Fragment, null, Object.entries(languagesObject)
17
- .filter(([key]) => key.toLowerCase() !== currentLanguage.toLowerCase())
18
- .map(([key, value]) => (React__default.createElement(MenuItem, { key: `language-${key}`, href: value }, key.toUpperCase())))));
19
- const LanguageSelector = ({ currentLanguage, languagesObject }) => {
20
- const { isMobileMenu, navZIndex } = useContext(NavContext);
21
- const LngComponent = useCallback(() => React__default.createElement(LangComponent, { currentLanguage: currentLanguage, languagesObject: languagesObject }), [currentLanguage, languagesObject]);
22
- if (Object.keys(languagesObject).length < 2) {
23
- return null;
24
- }
25
- return (React__default.createElement(MainNavTooltipMenu, { zIndex: navZIndex + 1, tooltipRight: isMobileMenu ? '13.8rem' : '11.8rem', contentComponent: LngComponent, contentWidth: "5rem", globalStateString: "lang", closeWhenTagClicked: ['a'] },
26
- React__default.createElement(Icon, { icon: Globe, size: "2rem" }),
27
- React__default.createElement("span", { "data-testid": "header-lang-label" }, currentLanguage.toUpperCase())));
28
- };
29
-
30
- export { LanguageSelector as default };
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- import type { MenuLevelItem } from '../types/globalNavProps';
3
- interface LinkModifierProps {
4
- menuItem: MenuLevelItem;
5
- tabIndex: boolean;
6
- }
7
- export declare const isSelected: (currentUrl: string, linkUrl: string, exactMatch?: boolean) => boolean;
8
- declare const LinkModifier: ({ menuItem, tabIndex }: LinkModifierProps) => React.JSX.Element;
9
- export default LinkModifier;
@@ -1,29 +0,0 @@
1
- import React__default, { useContext } from 'react';
2
- import NavContext from '../context/NavContext.js';
3
- import { MenuLink } from '../globalNavStyles.js';
4
-
5
- const isSelected = (currentUrl, linkUrl, exactMatch = false) => {
6
- if (currentUrl && linkUrl) {
7
- let url = linkUrl;
8
- if (url.includes('http')) {
9
- url = url.replace(/^.*\/\/[^/]+/, '');
10
- }
11
- return exactMatch ? url === currentUrl : currentUrl.includes(url);
12
- }
13
- return false;
14
- };
15
- const isMenuItemLinkAbsolute = (menuItemLink) => menuItemLink.includes('http');
16
- const LinkModifier = ({ menuItem, tabIndex }) => {
17
- const { lang, nextJSLinkComponent, resetMenuEvents } = useContext(NavContext);
18
- const menuItemLink = menuItem.urls[lang] || '';
19
- if (nextJSLinkComponent && !isMenuItemLinkAbsolute(menuItemLink)) {
20
- const NextJSLinkComponent = nextJSLinkComponent;
21
- return (React__default.createElement(NextJSLinkComponent, { linkUrl: menuItem.urls[lang] },
22
- React__default.createElement(MenuLink, { href: menuItemLink, id: menuItem.id, onClick: resetMenuEvents, role: "menuitem", tabIndex: tabIndex ? -1 : undefined },
23
- React__default.createElement("span", null, menuItem.titles[lang]))));
24
- }
25
- return (React__default.createElement(MenuLink, { href: menuItem.urls[lang], onClick: resetMenuEvents, tabIndex: tabIndex ? -1 : undefined, id: menuItem.id, role: "menuitem" },
26
- React__default.createElement("span", null, menuItem.titles[lang])));
27
- };
28
-
29
- export { LinkModifier as default, isSelected };
@@ -1,6 +0,0 @@
1
- import React from 'react';
2
- interface LoginTooltipProp {
3
- loginLabel?: string;
4
- }
5
- declare const LoginTooltip: ({ loginLabel }: LoginTooltipProp) => React.JSX.Element;
6
- export default LoginTooltip;
@@ -1,15 +0,0 @@
1
- import { User } from '@dnanpm/icons';
2
- import React__default, { useContext } from 'react';
3
- import Icon from '../../Icon/Icon.js';
4
- import NavContext from '../context/NavContext.js';
5
- import MainNavTooltipMenu from './MainNavTooltipMenu.js';
6
-
7
- const LoginTooltip = ({ loginLabel }) => {
8
- const globalStateString = 'login';
9
- const { navZIndex, isMobileMenu, loginComponent: LoginComponent } = useContext(NavContext);
10
- return (React__default.createElement(MainNavTooltipMenu, { zIndex: navZIndex + 1, tooltipRight: isMobileMenu ? '3rem' : '1rem', contentComponent: LoginComponent, globalStateString: globalStateString, closeWhenTagClicked: ['a', 'button'] },
11
- React__default.createElement(Icon, { icon: User, size: "2rem" }),
12
- React__default.createElement("span", { "data-testid": "header-login-label" }, loginLabel)));
13
- };
14
-
15
- export { LoginTooltip as default };
@@ -1,24 +0,0 @@
1
- import type { ReactNode } from 'react';
2
- import React from 'react';
3
- export interface MainNavTooltipMenuProps {
4
- /** Tooltip menu content */
5
- children?: ReactNode;
6
- /** Overlap other elements */
7
- zIndex?: number;
8
- /** Tooltip position from right. Default: 1.25rem */
9
- tooltipRight?: string;
10
- /** Component provided for tooltip content */
11
- contentComponent?: ReactNode | boolean | undefined;
12
- /** Array of tags (lowercase) that will close menu if they are inside the dropdown tooltip menu. default []. THIS CAN BE OVERRIDEN WITH data-no-close="true" in element */
13
- closeWhenTagClicked?: string[];
14
- /** Width of the opened menu content. default 20rem. */
15
- contentWidth?: string;
16
- /** This will define the global state object string. mandatory */
17
- globalStateString: string;
18
- /** Adjust menu margin so that it will not overflow if fullWidth. optional. default false. */
19
- fullWidthDesktop?: boolean;
20
- /** Adjust menu to be full width after this number. default xs (480). */
21
- fullWidthBreakpoint?: number;
22
- }
23
- declare const MainNavTooltipMenu: ({ children, zIndex, tooltipRight, contentWidth, contentComponent, closeWhenTagClicked, globalStateString, fullWidthDesktop, fullWidthBreakpoint, }: MainNavTooltipMenuProps) => React.JSX.Element;
24
- export default MainNavTooltipMenu;