@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.
- package/build/cjs/assets/fonts/fonts.css.js +3 -0
- package/build/cjs/components/Button/Button.d.ts +1 -7
- package/build/cjs/components/Button/Button.js +3 -3
- package/build/cjs/components/ButtonArrow/ButtonArrow.d.ts +1 -7
- package/build/cjs/components/ButtonArrow/ButtonArrow.js +2 -2
- package/build/cjs/components/ButtonCard/ButtonCard.js +3 -5
- package/build/cjs/components/ButtonIcon/ButtonIcon.js +3 -3
- package/build/cjs/components/Chip/Chip.d.ts +2 -18
- package/build/cjs/components/Chip/Chip.js +2 -2
- package/build/cjs/components/Drawer/Drawer.d.ts +0 -7
- package/build/cjs/components/Drawer/Drawer.js +1 -1
- package/build/cjs/components/Footer/Components/FooterComponents.js +0 -1
- package/build/cjs/components/Hero/Hero.js +3 -2
- package/build/cjs/components/Icon/Icon.d.ts +2 -8
- package/build/cjs/components/Icon/Icon.js +3 -10
- package/build/cjs/components/Input/Input.d.ts +1 -10
- package/build/cjs/components/LabelText/LabelText.d.ts +1 -6
- package/build/cjs/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenu.d.ts +1 -1
- package/build/cjs/components/MainHeaderNavigation/ChildComponents/MinicartTooltip.js +2 -2
- package/build/cjs/components/MainHeaderNavigation/MainHeaderNavigation.d.ts +1 -7
- package/build/cjs/components/MainHeaderNavigation/MainHeaderNavigation.js +1 -3
- package/build/cjs/components/MainHeaderNavigation/context/NavContext.d.ts +0 -1
- package/build/cjs/components/MainHeaderNavigation/context/NavContext.js +0 -1
- package/build/cjs/components/Modal/Modal.d.ts +0 -5
- package/build/cjs/components/ReadMore/ReadMore.d.ts +0 -20
- package/build/cjs/components/ReadMore/ReadMore.js +2 -8
- package/build/cjs/components/Tab/Tab.d.ts +2 -30
- package/build/cjs/components/Tab/Tab.js +2 -33
- package/build/cjs/components/Tabs/Tabs.d.ts +1 -9
- package/build/cjs/components/Tabs/Tabs.js +9 -17
- package/build/cjs/components/index.d.ts +0 -4
- package/build/cjs/hooks/useCloseOutsideOrElementClicked.js +1 -1
- package/build/cjs/index.js +0 -8
- package/build/cjs/themes/globalStyles.js +1 -1
- package/build/cjs/themes/themeComponents/navigation.js +0 -4
- package/build/es/assets/fonts/fonts.css.js +1 -0
- package/build/es/components/Button/Button.d.ts +1 -7
- package/build/es/components/Button/Button.js +3 -3
- package/build/es/components/ButtonArrow/ButtonArrow.d.ts +1 -7
- package/build/es/components/ButtonArrow/ButtonArrow.js +2 -2
- package/build/es/components/ButtonCard/ButtonCard.js +3 -5
- package/build/es/components/ButtonIcon/ButtonIcon.js +3 -3
- package/build/es/components/Chip/Chip.d.ts +2 -18
- package/build/es/components/Chip/Chip.js +2 -2
- package/build/es/components/Drawer/Drawer.d.ts +0 -7
- package/build/es/components/Drawer/Drawer.js +1 -1
- package/build/es/components/Footer/Components/FooterComponents.js +0 -1
- package/build/es/components/Hero/Hero.js +3 -2
- package/build/es/components/Icon/Icon.d.ts +2 -8
- package/build/es/components/Icon/Icon.js +3 -10
- package/build/es/components/Input/Input.d.ts +1 -10
- package/build/es/components/LabelText/LabelText.d.ts +1 -6
- package/build/es/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenu.d.ts +1 -1
- package/build/es/components/MainHeaderNavigation/ChildComponents/MinicartTooltip.js +2 -2
- package/build/es/components/MainHeaderNavigation/MainHeaderNavigation.d.ts +1 -7
- package/build/es/components/MainHeaderNavigation/MainHeaderNavigation.js +1 -3
- package/build/es/components/MainHeaderNavigation/context/NavContext.d.ts +0 -1
- package/build/es/components/MainHeaderNavigation/context/NavContext.js +0 -1
- package/build/es/components/Modal/Modal.d.ts +0 -5
- package/build/es/components/ReadMore/ReadMore.d.ts +0 -20
- package/build/es/components/ReadMore/ReadMore.js +2 -8
- package/build/es/components/Tab/Tab.d.ts +2 -30
- package/build/es/components/Tab/Tab.js +2 -33
- package/build/es/components/Tabs/Tabs.d.ts +1 -9
- package/build/es/components/Tabs/Tabs.js +9 -17
- package/build/es/components/index.d.ts +0 -4
- package/build/es/hooks/useCloseOutsideOrElementClicked.js +1 -1
- package/build/es/index.js +0 -4
- package/build/es/themes/globalStyles.js +1 -1
- package/build/es/themes/themeComponents/navigation.js +1 -3
- package/package.json +15 -15
- package/build/cjs/build/assets/fonts/fonts.css +0 -129
- package/build/cjs/components/ButtonRound/ButtonRound.d.ts +0 -10
- package/build/cjs/components/ButtonRound/ButtonRound.js +0 -37
- package/build/cjs/components/Icons/index.js +0 -224
- package/build/cjs/components/MainNavigation/ChildComponents/BusinessMenu.d.ts +0 -3
- package/build/cjs/components/MainNavigation/ChildComponents/BusinessMenu.js +0 -59
- package/build/cjs/components/MainNavigation/ChildComponents/DesktopMenu.d.ts +0 -3
- package/build/cjs/components/MainNavigation/ChildComponents/DesktopMenu.js +0 -259
- package/build/cjs/components/MainNavigation/ChildComponents/HeaderNavigationElements.d.ts +0 -10
- package/build/cjs/components/MainNavigation/ChildComponents/HeaderNavigationElements.js +0 -168
- package/build/cjs/components/MainNavigation/ChildComponents/LanguageSelector.d.ts +0 -4
- package/build/cjs/components/MainNavigation/ChildComponents/LanguageSelector.js +0 -38
- package/build/cjs/components/MainNavigation/ChildComponents/LinkModifier.d.ts +0 -9
- package/build/cjs/components/MainNavigation/ChildComponents/LinkModifier.js +0 -38
- package/build/cjs/components/MainNavigation/ChildComponents/LoginTooltip.d.ts +0 -6
- package/build/cjs/components/MainNavigation/ChildComponents/LoginTooltip.js +0 -23
- package/build/cjs/components/MainNavigation/ChildComponents/MainNavTooltipMenu.d.ts +0 -24
- package/build/cjs/components/MainNavigation/ChildComponents/MainNavTooltipMenu.js +0 -104
- package/build/cjs/components/MainNavigation/ChildComponents/MainNavTooltipMenuExportedStyles.d.ts +0 -6
- package/build/cjs/components/MainNavigation/ChildComponents/MainNavTooltipMenuExportedStyles.js +0 -62
- package/build/cjs/components/MainNavigation/ChildComponents/MinicartTooltip.d.ts +0 -7
- package/build/cjs/components/MainNavigation/ChildComponents/MinicartTooltip.js +0 -26
- package/build/cjs/components/MainNavigation/ChildComponents/MobileMenu.d.ts +0 -3
- package/build/cjs/components/MainNavigation/ChildComponents/MobileMenu.js +0 -193
- package/build/cjs/components/MainNavigation/ChildComponents/PageSearch.d.ts +0 -6
- package/build/cjs/components/MainNavigation/ChildComponents/PageSearch.js +0 -23
- package/build/cjs/components/MainNavigation/ChildComponents/Ribbon.d.ts +0 -13
- package/build/cjs/components/MainNavigation/ChildComponents/Ribbon.js +0 -74
- package/build/cjs/components/MainNavigation/MainNavigation.d.ts +0 -38
- package/build/cjs/components/MainNavigation/MainNavigation.js +0 -319
- package/build/cjs/components/MainNavigation/context/MobileMenuContext.d.ts +0 -6
- package/build/cjs/components/MainNavigation/context/MobileMenuContext.js +0 -11
- package/build/cjs/components/MainNavigation/context/NavContext.d.ts +0 -29
- package/build/cjs/components/MainNavigation/context/NavContext.js +0 -46
- package/build/cjs/components/MainNavigation/globalNavStyles.d.ts +0 -13
- package/build/cjs/components/MainNavigation/globalNavStyles.js +0 -94
- package/build/cjs/components/SecondaryNavigation/SecondaryNavigation.d.ts +0 -90
- package/build/cjs/components/SecondaryNavigation/SecondaryNavigation.js +0 -207
- package/build/cjs/components/TooltipMenu/ChildComponents/TooltipMenuExportedStyles.d.ts +0 -10
- package/build/cjs/components/TooltipMenu/ChildComponents/TooltipMenuExportedStyles.js +0 -34
- package/build/cjs/components/TooltipMenu/TooltipMenu.d.ts +0 -45
- package/build/cjs/components/TooltipMenu/TooltipMenu.js +0 -76
- package/build/es/build/assets/fonts/fonts.css +0 -129
- package/build/es/components/ButtonRound/ButtonRound.d.ts +0 -10
- package/build/es/components/ButtonRound/ButtonRound.js +0 -29
- package/build/es/components/Icons/index.js +0 -109
- package/build/es/components/MainNavigation/ChildComponents/BusinessMenu.d.ts +0 -3
- package/build/es/components/MainNavigation/ChildComponents/BusinessMenu.js +0 -51
- package/build/es/components/MainNavigation/ChildComponents/DesktopMenu.d.ts +0 -3
- package/build/es/components/MainNavigation/ChildComponents/DesktopMenu.js +0 -251
- package/build/es/components/MainNavigation/ChildComponents/HeaderNavigationElements.d.ts +0 -10
- package/build/es/components/MainNavigation/ChildComponents/HeaderNavigationElements.js +0 -159
- package/build/es/components/MainNavigation/ChildComponents/LanguageSelector.d.ts +0 -4
- package/build/es/components/MainNavigation/ChildComponents/LanguageSelector.js +0 -30
- package/build/es/components/MainNavigation/ChildComponents/LinkModifier.d.ts +0 -9
- package/build/es/components/MainNavigation/ChildComponents/LinkModifier.js +0 -29
- package/build/es/components/MainNavigation/ChildComponents/LoginTooltip.d.ts +0 -6
- package/build/es/components/MainNavigation/ChildComponents/LoginTooltip.js +0 -15
- package/build/es/components/MainNavigation/ChildComponents/MainNavTooltipMenu.d.ts +0 -24
- package/build/es/components/MainNavigation/ChildComponents/MainNavTooltipMenu.js +0 -96
- package/build/es/components/MainNavigation/ChildComponents/MainNavTooltipMenuExportedStyles.d.ts +0 -6
- package/build/es/components/MainNavigation/ChildComponents/MainNavTooltipMenuExportedStyles.js +0 -57
- package/build/es/components/MainNavigation/ChildComponents/MinicartTooltip.d.ts +0 -7
- package/build/es/components/MainNavigation/ChildComponents/MinicartTooltip.js +0 -18
- package/build/es/components/MainNavigation/ChildComponents/MobileMenu.d.ts +0 -3
- package/build/es/components/MainNavigation/ChildComponents/MobileMenu.js +0 -185
- package/build/es/components/MainNavigation/ChildComponents/PageSearch.d.ts +0 -6
- package/build/es/components/MainNavigation/ChildComponents/PageSearch.js +0 -15
- package/build/es/components/MainNavigation/ChildComponents/Ribbon.d.ts +0 -13
- package/build/es/components/MainNavigation/ChildComponents/Ribbon.js +0 -66
- package/build/es/components/MainNavigation/MainNavigation.d.ts +0 -38
- package/build/es/components/MainNavigation/MainNavigation.js +0 -311
- package/build/es/components/MainNavigation/context/MobileMenuContext.d.ts +0 -6
- package/build/es/components/MainNavigation/context/MobileMenuContext.js +0 -7
- package/build/es/components/MainNavigation/context/NavContext.d.ts +0 -29
- package/build/es/components/MainNavigation/context/NavContext.js +0 -42
- package/build/es/components/MainNavigation/globalNavStyles.d.ts +0 -13
- package/build/es/components/MainNavigation/globalNavStyles.js +0 -89
- package/build/es/components/SecondaryNavigation/SecondaryNavigation.d.ts +0 -90
- package/build/es/components/SecondaryNavigation/SecondaryNavigation.js +0 -199
- package/build/es/components/TooltipMenu/ChildComponents/TooltipMenuExportedStyles.d.ts +0 -10
- package/build/es/components/TooltipMenu/ChildComponents/TooltipMenuExportedStyles.js +0 -31
- package/build/es/components/TooltipMenu/TooltipMenu.d.ts +0 -45
- 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,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,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,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;
|