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