@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,207 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var tslib = require('tslib');
6
- var icons = require('@dnanpm/icons');
7
- var React = require('react');
8
- var useOutsideClick = require('../../hooks/useOutsideClick.js');
9
- var styledComponents = require('styled-components');
10
- var theme = require('../../themes/theme.js');
11
- var styledUtils = require('../../utils/styledUtils.js');
12
- var Icon = require('../Icon/Icon.js');
13
-
14
- function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
15
-
16
- var React__default = /*#__PURE__*/_interopDefaultCompat(React);
17
-
18
- const SecondaryNavigationWrapper = styledComponents.styled.nav `
19
- font-size: ${theme.default.fontSize.default};
20
- padding: 0;
21
- background-color: ${({ $whiteBg }) => $whiteBg ? theme.default.color.background.white.default : 'transparent'};
22
-
23
- ${({ $mobileOnly }) => styledUtils.media.sm `
24
- display: ${$mobileOnly ? 'none' : 'inherit'};
25
- `};
26
-
27
- @media (min-width: ${({ $collapseSize }) => $collapseSize + 1}px) {
28
- border-bottom: 1px solid ${theme.default.color.line.L03};
29
- }
30
- `;
31
- const MobileSelector = styledComponents.styled.button `
32
- display: flex;
33
- align-items: center;
34
- justify-content: space-between;
35
- line-height: ${theme.default.lineHeight.default};
36
- color: ${theme.default.color.text.pink};
37
- padding: 1rem ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
38
- background: transparent;
39
- border: 0;
40
- border-bottom: 1px solid ${theme.default.color.default.pink};
41
- width: 100%;
42
- font-size: ${theme.default.fontSize.default};
43
-
44
- &:hover {
45
- cursor: pointer;
46
- }
47
-
48
- @media (min-width: ${({ $collapseSize }) => $collapseSize + 1}px) {
49
- display: none;
50
- }
51
- `;
52
- const MobileSelectorTitleWrapper = styledComponents.styled.div `
53
- display: flex;
54
- `;
55
- const MobileSelectorArrow = styledComponents.styled.span `
56
- display: flex;
57
-
58
- .dnasg-icon svg {
59
- transition: transform 0.15s ease-in-out;
60
- transform: rotate(${({ $isOpen }) => ($isOpen ? '180deg' : '0deg')});
61
- }
62
- `;
63
- const MobileSelectorCheck = styledComponents.styled.span `
64
- margin-left: auto;
65
-
66
- .dnasg-icon {
67
- @media (min-width: ${({ $collapseSize }) => $collapseSize + 1}px) {
68
- display: none;
69
- }
70
- }
71
- `;
72
- const SecondaryNavigationList = styledComponents.styled.ul `
73
- padding: 0;
74
- list-style-type: none;
75
- margin: 0;
76
- overflow: hidden;
77
- display: flex;
78
- flex-direction: column;
79
- transition:
80
- max-height 0.2s ease-in-out,
81
- border-bottom 0.2s linear;
82
- background-color: ${({ $isOpen }) => $isOpen ? theme.default.color.background.white.default : 'transparent'};
83
- max-height: ${({ $isOpen }) => ($isOpen ? '500vh' : '0')};
84
- border-bottom: ${({ $isOpen }) => ($isOpen ? `1px solid ${theme.default.color.line.L03}` : 'none')};
85
-
86
- @media (min-width: ${({ $collapseSize }) => $collapseSize + 1}px) {
87
- padding: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
88
- max-height: none;
89
- position: static;
90
- flex-direction: row;
91
- overflow: auto;
92
- height: auto;
93
- border-bottom: none;
94
- max-width: ${({ 'max-width': maxWidth }) => (maxWidth ? `${maxWidth}px` : 'none')};
95
- }
96
- `;
97
- const SecondaryNavigationListElement = styledComponents.styled.li `
98
- margin: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
99
-
100
- a {
101
- text-decoration: none;
102
- padding: 1rem 0;
103
- justify-content: start;
104
- color: ${({ $isActive }) => ($isActive ? theme.default.color.text.pink : theme.default.color.text.black)};
105
- font-weight: ${({ $isActive }) => $isActive ? theme.default.fontWeight.bold : theme.default.fontWeight.book};
106
- display: flex;
107
- align-items: center;
108
-
109
- &:hover {
110
- color: ${theme.default.color.text.pink};
111
- text-decoration: none;
112
- cursor: ${({ $isActive }) => ($isActive ? 'auto' : 'pointer')};
113
- }
114
-
115
- @media (min-width: ${({ $collapseSize }) => $collapseSize + 1}px) {
116
- padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.5)} 0;
117
- font-weight: ${theme.default.fontWeight.book};
118
- }
119
- }
120
-
121
- @media (min-width: ${({ $collapseSize }) => $collapseSize + 1}px) {
122
- margin: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.5)};
123
- white-space: nowrap;
124
- transition: border-bottom 0.2s linear;
125
- border-bottom: ${({ $isActive }) => $isActive ? `1px solid ${theme.default.color.default.pink}` : 'none'};
126
-
127
- &:first-of-type {
128
- margin-left: 0;
129
- }
130
- }
131
- `;
132
- const IconWrapper = styledComponents.styled.span `
133
- position: relative;
134
- display: flex;
135
- margin-right: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
136
-
137
- &:after {
138
- display: ${({ $showNotification }) => ($showNotification ? 'inline' : 'none')};
139
- content: '';
140
- position: absolute;
141
- border-radius: ${theme.default.radius.circle};
142
- width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
143
- height: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)};
144
- right: -${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 0.2)};
145
- top: -${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.2)};
146
- border: 1px solid ${theme.default.color.default.white};
147
- background-color: ${theme.default.color.default.pink};
148
- }
149
-
150
- @media (min-width: ${({ $collapseSize }) => $collapseSize + 1}px) {
151
- display: none;
152
- }
153
- `;
154
- /**
155
- * @visibleName Secondary Navigation
156
- * @deprecated Use `PriorityNavigation` component
157
- */
158
- const SecondaryNavigation = (_a) => {
159
- var _b, _c, _d, _e;
160
- var { currentUrl = '', lang = 'fi', nextJSSecondaryNavLink: NextJSSecondaryNavLink, collapseSize = 767, 'max-width': maxWidth, matchFullUrl = true, highlightIds = [], className, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["currentUrl", "lang", "nextJSSecondaryNavLink", "collapseSize", 'max-width', "matchFullUrl", "highlightIds", "className", 'data-testid']);
161
- const [isSecondaryNavOpen, setIsSecondaryNavOpen] = React.useState(false);
162
- const toggleNav = () => {
163
- setIsSecondaryNavOpen(!isSecondaryNavOpen);
164
- };
165
- const closeNav = () => {
166
- if (isSecondaryNavOpen) {
167
- setIsSecondaryNavOpen(false);
168
- }
169
- };
170
- const ref = React.useRef(null);
171
- useOutsideClick.default(ref, () => {
172
- if (isSecondaryNavOpen) {
173
- setIsSecondaryNavOpen(false);
174
- }
175
- });
176
- const selectedElement = (_b = props.data.pages) === null || _b === void 0 ? void 0 : _b.find(listElement => currentUrl === listElement.urls[lang]);
177
- const shouldHighlightSelectedElement = (_c = (selectedElement && highlightIds.some(el => el === selectedElement.id))) !== null && _c !== void 0 ? _c : false;
178
- const checkIsMenuItemLinkAbsolute = (menuItemLink) => menuItemLink.includes('http');
179
- return (React__default.default.createElement(SecondaryNavigationWrapper, { ref: ref, "data-testid": dataTestId, className: className, "$collapseSize": collapseSize, "$mobileOnly": props.mobileOnly, "$whiteBg": props.whiteBg },
180
- selectedElement && (React__default.default.createElement(MobileSelector, { onClick: toggleNav, "$collapseSize": collapseSize, "data-testid": "secondary-navigation-dropdown-selector" },
181
- React__default.default.createElement(MobileSelectorTitleWrapper, null,
182
- (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.icon) && (React__default.default.createElement(IconWrapper, { "$showNotification": shouldHighlightSelectedElement, "$collapseSize": collapseSize },
183
- React__default.default.createElement(Icon.default, { name: selectedElement.icon }))),
184
- React__default.default.createElement("span", null, selectedElement.titles[lang])),
185
- React__default.default.createElement(MobileSelectorArrow, { "$isOpen": isSecondaryNavOpen },
186
- React__default.default.createElement(Icon.default, { icon: icons.ChevronDown })))),
187
- React__default.default.createElement(SecondaryNavigationList, { id: props.data.name ||
188
- `secondary-navigation-category-${(_d = props.data.categoryId) !== null && _d !== void 0 ? _d : ''}`, "$isOpen": isSecondaryNavOpen, "$collapseSize": collapseSize, "max-width": maxWidth, "data-testid": "secondary-nav-menu-ul" }, (_e = props.data.pages) === null || _e === void 0 ? void 0 : _e.map((listElement, index) => {
189
- const linkUrl = listElement.urls[lang];
190
- const linkTitle = listElement.titles[lang];
191
- const iconName = listElement.icon || '';
192
- const isActive = matchFullUrl
193
- ? currentUrl === linkUrl
194
- : currentUrl.indexOf(linkUrl) > -1;
195
- const showNotification = highlightIds.some(el => el === listElement.id);
196
- const isMenuItemLinkAbsolute = checkIsMenuItemLinkAbsolute(linkUrl);
197
- return (React__default.default.createElement(SecondaryNavigationListElement, { key: listElement.id, onClick: closeNav, "$isActive": isActive, "$collapseSize": collapseSize }, NextJSSecondaryNavLink && !isMenuItemLinkAbsolute ? (React__default.default.createElement(NextJSSecondaryNavLink, { linkUrl: linkUrl, linkTitle: linkTitle, iconName: iconName, showNotification: showNotification, collapseSize: collapseSize, "data-testid": `secondary-nav-item-link-${index + 1}` }, isActive && (React__default.default.createElement(MobileSelectorCheck, { "$collapseSize": collapseSize },
198
- React__default.default.createElement(Icon.default, { icon: icons.Check }))))) : (React__default.default.createElement("a", { href: linkUrl, "data-testid": `secondary-nav-item-link-${index + 1}` },
199
- iconName && (React__default.default.createElement(IconWrapper, { "$showNotification": showNotification, "$collapseSize": collapseSize },
200
- React__default.default.createElement(Icon.default, { name: iconName }))),
201
- React__default.default.createElement("span", null, linkTitle),
202
- isActive && (React__default.default.createElement(MobileSelectorCheck, { "$collapseSize": collapseSize },
203
- React__default.default.createElement(Icon.default, { icon: icons.Check })))))));
204
- }))));
205
- };
206
-
207
- exports.default = SecondaryNavigation;
@@ -1,10 +0,0 @@
1
- export declare const Tail: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
2
- tooltipTop: string;
3
- zIndex: string;
4
- arrowPosition: string;
5
- }>> & string;
6
- export declare const TailShadow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
7
- tooltipTop: string;
8
- zIndex: string;
9
- arrowPosition: string;
10
- }>> & string;
@@ -1,34 +0,0 @@
1
- 'use strict';
2
-
3
- var styledComponents = require('styled-components');
4
- var theme = require('../../../themes/theme.js');
5
-
6
- // Tooltip corner tail
7
- const Tail = styledComponents.styled.div `
8
- position: absolute;
9
- width: 0;
10
- height: 0;
11
- right: ${p => p.arrowPosition};
12
- margin-top: -17.5px;
13
- top: ${p => p.tooltipTop};
14
- z-index: ${p => Number(p.zIndex) + 1};
15
- border: 10px solid transparent;
16
- border-right-color: white;
17
- transform: rotate(90deg);
18
- `;
19
- // Box shadow of the tooltip tail
20
- const TailShadow = styledComponents.styled.div `
21
- position: absolute;
22
- width: 0.25rem;
23
- height: 0.25rem;
24
- margin-top: -5px;
25
- margin-right: 8.5px;
26
- top: ${p => p.tooltipTop};
27
- z-index: ${p => Number(p.zIndex) + 1};
28
- right: ${p => p.arrowPosition};
29
- background-color: transparent;
30
- box-shadow: 0 0 5px 0 ${theme.default.color.default.black};
31
- `;
32
-
33
- exports.Tail = Tail;
34
- exports.TailShadow = TailShadow;
@@ -1,45 +0,0 @@
1
- import type { ReactNode } from 'react';
2
- import React from 'react';
3
- import type { Props as IconProps } from '../Icon/Icon';
4
- export interface TooltipMenuProps {
5
- /** Text selector */
6
- selector: string;
7
- /** Allows to pass a custom className */
8
- className?: string;
9
- /** Tooltip menu content */
10
- children: ReactNode;
11
- /** Text selector color.Default: #121212 */
12
- color?: string;
13
- /** Text selector active color. Default: #121212 */
14
- activeColor?: string;
15
- /** Size of chevron icon. Default: 1.5rem */
16
- iconSize?: string;
17
- /** Overlap other elements */
18
- zIndex?: string;
19
- /** Tooltip position from top. Default: 2rem */
20
- tooltipTop?: string;
21
- /** Tooltip position from right. Default: 1.25rem */
22
- tooltipRight?: string;
23
- /**
24
- * Tooltip icon for selector. Default: ''
25
- *
26
- * @deprecated Use property `tooltipIcon`
27
- */
28
- tooltipIconName?: string;
29
- /**
30
- * Tooltip icon for selector
31
- */
32
- tooltipIcon?: IconProps['icon'];
33
- /** Tooltip icon size for selector. Default: '1.5rem' */
34
- tooltipIconSize?: string;
35
- /** Show hide animated chevron. Default: '' */
36
- tooltipChevron?: boolean;
37
- /** Arrow position if needed some adjust. Defaul: -0.25rem. */
38
- arrowPosition?: string;
39
- }
40
- /**
41
- * @visibleName Tooltip Menu
42
- * @deprecated Use `Tooltip` component
43
- */
44
- declare const TooltipMenu: ({ selector, className, color, children, iconSize, zIndex, tooltipTop, tooltipRight, activeColor, tooltipIconName, tooltipIcon, tooltipIconSize, tooltipChevron, arrowPosition, }: TooltipMenuProps) => React.JSX.Element;
45
- export default TooltipMenu;
@@ -1,76 +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 Icon = require('../Icon/Icon.js');
11
- var TooltipMenuExportedStyles = require('./ChildComponents/TooltipMenuExportedStyles.js');
12
-
13
- function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
14
-
15
- var React__default = /*#__PURE__*/_interopDefaultCompat(React);
16
-
17
- const Selector = styledComponents.styled.div `
18
- display: flex;
19
- align-items: center;
20
- justify-content: flex-end;
21
- color: ${p => p.color || theme.default.color.text.white};
22
- cursor: pointer;
23
-
24
- span + span.dnasg-icon > svg {
25
- transform: ${p => (p.showDropdown ? 'rotate(180deg)' : 'rotate(0deg)')};
26
- transition: transform 0.15s linear;
27
- }
28
- `;
29
- const Container = styledComponents.styled.div `
30
- position: relative;
31
- `;
32
- const Tooltip = styledComponents.styled.div `
33
- background-color: ${theme.default.color.background.white.default};
34
- padding: 0.5rem;
35
- min-height: 3rem;
36
- min-width: 4rem;
37
- position: absolute;
38
- right: ${p => p.tooltipRight};
39
- top: ${p => p.tooltipTop};
40
- box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.48);
41
- z-index: ${p => p.zIndex};
42
- `;
43
- const ChildrenWrapper = styledComponents.styled.span `
44
- > * {
45
- white-space: nowrap;
46
- }
47
- `;
48
- /**
49
- * @visibleName Tooltip Menu
50
- * @deprecated Use `Tooltip` component
51
- */
52
- const TooltipMenu = ({ selector, className, color = theme.default.color.text.black, children, iconSize = '1.5rem', zIndex = '1', tooltipTop = '2rem', tooltipRight = '-1.25rem', activeColor = color, tooltipIconName, tooltipIcon, tooltipIconSize = '1.5rem', tooltipChevron = true, arrowPosition = '-0.25rem', }) => {
53
- const [showDropdown, setShowDropdown] = React.useState(false);
54
- const ref = React.useRef(null);
55
- const toggleState = () => {
56
- setShowDropdown(!showDropdown);
57
- };
58
- useOutsideClick.default(ref, () => {
59
- if (showDropdown) {
60
- setShowDropdown(false);
61
- }
62
- });
63
- return (React__default.default.createElement(Container, { className: className, ref: ref },
64
- React__default.default.createElement(Selector, { color: showDropdown ? activeColor : color, onClick: toggleState, showDropdown: showDropdown },
65
- tooltipIcon && React__default.default.createElement(Icon.default, { icon: tooltipIcon, size: tooltipIconSize, position: "left" }),
66
- tooltipIconName && (React__default.default.createElement(Icon.default, { name: tooltipIconName, size: tooltipIconSize, position: "left" })),
67
- React__default.default.createElement("span", null, selector),
68
- tooltipChevron && React__default.default.createElement(Icon.default, { icon: icons.ChevronDown, size: iconSize, position: "right" })),
69
- showDropdown && (React__default.default.createElement(React__default.default.Fragment, null,
70
- React__default.default.createElement(TooltipMenuExportedStyles.TailShadow, { zIndex: zIndex, tooltipTop: tooltipTop, arrowPosition: arrowPosition }),
71
- React__default.default.createElement(TooltipMenuExportedStyles.Tail, { zIndex: zIndex, tooltipTop: tooltipTop, arrowPosition: arrowPosition }))),
72
- showDropdown && (React__default.default.createElement(Tooltip, { zIndex: zIndex, tooltipTop: tooltipTop, tooltipRight: tooltipRight },
73
- React__default.default.createElement(ChildrenWrapper, null, children)))));
74
- };
75
-
76
- exports.default = TooltipMenu;
@@ -1,129 +0,0 @@
1
- /* "DNA Text" font definition */
2
- @font-face {
3
- font-family: 'DNA Text';
4
- font-style: normal;
5
- font-weight: 400;
6
- font-display: swap;
7
- src: url('https://www.dna.fi/fonts/DNAText-Regular.woff2') format('woff2'),
8
- url('https://www.dna.fi/fonts/DNAText-Regular.woff') format('woff');
9
- }
10
-
11
- @font-face {
12
- font-family: 'DNA Text';
13
- font-style: normal;
14
- font-weight: 500;
15
- font-display: swap;
16
- src: url('https://www.dna.fi/fonts/DNAText-Medium.woff2') format('woff2'),
17
- url('https://www.dna.fi/fonts/DNAText-Medium.woff') format('woff');
18
- }
19
-
20
- @font-face {
21
- font-family: 'DNA Text';
22
- font-style: normal;
23
- font-weight: 700;
24
- font-display: swap;
25
- src: url('https://www.dna.fi/fonts/DNAText-Bold.woff2') format('woff2'),
26
- url('https://www.dna.fi/fonts/DNAText-Bold.woff') format('woff');
27
- }
28
-
29
- /* "DNA Heading" font definition */
30
- @font-face {
31
- font-family: 'DNA Heading';
32
- font-style: normal;
33
- font-weight: 600;
34
- font-display: swap;
35
- src: url('https://www.dna.fi/fonts/DNAHeading-DemiBold.woff2') format('woff2'),
36
- url('https://www.dna.fi/fonts/DNAHeading-DemiBold.woff') format('woff');
37
- }
38
-
39
- @font-face {
40
- font-family: 'DNA Heading';
41
- font-style: normal;
42
- font-weight: 700;
43
- font-display: swap;
44
- src: url('https://www.dna.fi/fonts/DNAHeading-Bold.woff2') format('woff2'),
45
- url('https://www.dna.fi/fonts/DNAHeading-Bold.woff') format('woff');
46
- }
47
-
48
- @font-face {
49
- font-family: 'DNA Heading';
50
- font-style: normal;
51
- font-weight: 900;
52
- font-display: swap;
53
- src: url('https://www.dna.fi/fonts/DNAHeading-Black.woff2') format('woff2'),
54
- url('https://www.dna.fi/fonts/DNAHeading-Black.woff') format('woff');
55
- }
56
-
57
- /* "DNA Numerals" font definition */
58
- @font-face {
59
- font-family: 'DNA Numerals';
60
- font-style: normal;
61
- font-weight: 700;
62
- font-display: swap;
63
- src: url('https://www.dna.fi/fonts/DNANumerals-Bold.woff2') format('woff2'),
64
- url('https://www.dna.fi/fonts/DNANumerals-Bold.woff') format('woff');
65
- }
66
-
67
- /* Direct definitons of DNA fonts */
68
- @font-face {
69
- font-family: 'DNA Text Regular';
70
- font-style: normal;
71
- font-weight: 400;
72
- font-display: swap;
73
- src: url('https://www.dna.fi/fonts/DNAText-Regular.woff2') format('woff2'),
74
- url('https://www.dna.fi/fonts/DNAText-Regular.woff') format('woff');
75
- }
76
-
77
- @font-face {
78
- font-family: 'DNA Text Medium';
79
- font-style: normal;
80
- font-weight: 500;
81
- font-display: swap;
82
- src: url('https://www.dna.fi/fonts/DNAText-Medium.woff2') format('woff2'),
83
- url('https://www.dna.fi/fonts/DNAText-Medium.woff') format('woff');
84
- }
85
-
86
- @font-face {
87
- font-family: 'DNA Text Bold';
88
- font-style: normal;
89
- font-weight: 700;
90
- font-display: swap;
91
- src: url('https://www.dna.fi/fonts/DNAText-Bold.woff2') format('woff2'),
92
- url('https://www.dna.fi/fonts/DNAText-Bold.woff') format('woff');
93
- }
94
-
95
- @font-face {
96
- font-family: 'DNA Heading Demi Bold';
97
- font-style: normal;
98
- font-weight: 600;
99
- font-display: swap;
100
- src: url('https://www.dna.fi/fonts/DNAHeading-DemiBold.woff2') format('woff2'),
101
- url('https://www.dna.fi/fonts/DNAHeading-DemiBold.woff') format('woff');
102
- }
103
-
104
- @font-face {
105
- font-family: 'DNA Heading Bold';
106
- font-style: normal;
107
- font-weight: 700;
108
- font-display: swap;
109
- src: url('https://www.dna.fi/fonts/DNAHeading-Bold.woff2') format('woff2'),
110
- url('https://www.dna.fi/fonts/DNAHeading-Bold.woff') format('woff');
111
- }
112
-
113
- @font-face {
114
- font-family: 'DNA Heading Black';
115
- font-style: normal;
116
- font-weight: 900;
117
- font-display: swap;
118
- src: url('https://www.dna.fi/fonts/DNAHeading-Black.woff2') format('woff2'),
119
- url('https://www.dna.fi/fonts/DNAHeading-Black.woff') format('woff');
120
- }
121
-
122
- @font-face {
123
- font-family: 'DNA Numerals Bold';
124
- font-style: normal;
125
- font-weight: 700;
126
- font-display: swap;
127
- src: url('https://www.dna.fi/fonts/DNANumerals-Bold.woff2') format('woff2'),
128
- url('https://www.dna.fi/fonts/DNANumerals-Bold.woff') format('woff');
129
- }
@@ -1,10 +0,0 @@
1
- import React from 'react';
2
- import type { Props as ButtonProps } from '../Button/Button';
3
- type Props = Omit<ButtonProps, 'small' | 'fullWidth' | 'loading'>;
4
- /**
5
- * @visibleName Button Round
6
- * @deprecated Use `ButtonArrow` component
7
- */
8
- declare const ButtonRound: ({ "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, ...props }: Props) => React.JSX.Element;
9
- /** @component */
10
- export default ButtonRound;
@@ -1,29 +0,0 @@
1
- import { __rest } from 'tslib';
2
- import React__default from 'react';
3
- import { styled } from 'styled-components';
4
- import theme from '../../themes/theme.js';
5
- import { getMultipliedSize } from '../../utils/styledUtils.js';
6
- import ButtonPrimary from '../ButtonPrimary/ButtonPrimary.js';
7
-
8
- const ButtonElement = styled(ButtonPrimary) `
9
- display: flex;
10
- min-width: initial;
11
- width: ${getMultipliedSize(theme.base.baseWidth, 3.2)};
12
- height: ${getMultipliedSize(theme.base.baseHeight, 3.2)};
13
- border-radius: ${theme.radius.circle};
14
- padding: initial;
15
- text-align: center;
16
- vertical-align: middle;
17
- justify-content: center;
18
- align-items: center;
19
- `;
20
- /**
21
- * @visibleName Button Round
22
- * @deprecated Use `ButtonArrow` component
23
- */
24
- const ButtonRound = (_a) => {
25
- var { 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = __rest(_a, ['data-testid', 'data-no-close', 'data-track-value']);
26
- return (React__default.createElement(ButtonElement, { id: props.id, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, darkBg: props.darkBg, disabled: props.disabled, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue }, props.children));
27
- };
28
-
29
- export { ButtonRound as default };
@@ -1,109 +0,0 @@
1
- export { default as hlArrowBackSmall } from './Small/hlArrowBackSmall.js';
2
- export { default as hlArrowForwardSmall } from './Small/hlArrowForwardSmall.js';
3
- export { default as hlArrowUnderSmall } from './Small/hlArrowUnderSmall.js';
4
- export { default as hlCalendarSmall } from './Small/hlCalendarSmall.js';
5
- export { default as hlChevronDownSmall } from './Small/hlChevronDownSmall.js';
6
- export { default as hlChevronLeftSmall } from './Small/hlChevronLeftSmall.js';
7
- export { default as hlChevronRightSmall } from './Small/hlChevronRightSmall.js';
8
- export { default as hlChevronUpSmall } from './Small/hlChevronUpSmall.js';
9
- export { default as hlClockSmall } from './Small/hlClockSmall.js';
10
- export { default as hlDownloadSmall } from './Small/hlDownloadSmall.js';
11
- export { default as hlExternalSmall } from './Small/hlExternalSmall.js';
12
- export { default as hlUploadSmall } from './Small/hlUploadSmall.js';
13
- export { default as facebook } from './Social/facebook.js';
14
- export { default as instagram } from './Social/instagram.js';
15
- export { default as linkedin } from './Social/linkedin.js';
16
- export { default as tiktok } from './Social/tiktok.js';
17
- export { default as twitter } from './Social/twitter.js';
18
- export { default as youtube } from './Social/youtube.js';
19
- export { default as hl404 } from './hl404.js';
20
- export { default as hl4gSim } from './hl4gSim.js';
21
- export { default as hl5gSim } from './hl5gSim.js';
22
- export { default as hlBattery } from './hlBattery.js';
23
- export { default as hlBell } from './hlBell.js';
24
- export { default as hlCableTVCard } from './hlCableTVCard.js';
25
- export { default as hlCalendar } from './hlCalendar.js';
26
- export { default as hlCall } from './hlCall.js';
27
- export { default as hlCameraBack } from './hlCameraBack.js';
28
- export { default as hlCameraFront } from './hlCameraFront.js';
29
- export { default as hlCart } from './hlCart.js';
30
- export { default as hlCartEmpty } from './hlCartEmpty.js';
31
- export { default as hlChat } from './hlChat.js';
32
- export { default as hlCheck, hlSuccess } from './hlCheck.js';
33
- export { default as hlChevronDown } from './hlChevronDown.js';
34
- export { default as hlChevronLeft } from './hlChevronLeft.js';
35
- export { default as hlChevronRight } from './hlChevronRight.js';
36
- export { default as hlChevronUp } from './hlChevronUp.js';
37
- export { default as hlCompensation } from './hlCompensation.js';
38
- export { default as hlCookie } from './hlCookie.js';
39
- export { default as hlCopy } from './hlCopy.js';
40
- export { default as hlCoupon } from './hlCoupon.js';
41
- export { default as hlDelivery } from './hlDelivery.js';
42
- export { default as hlDigiturva } from './hlDigiturva.js';
43
- export { default as hlDisplaySize } from './hlDisplaySize.js';
44
- export { default as hlDocument } from './hlDocument.js';
45
- export { default as hlDownload } from './hlDownload.js';
46
- export { default as hlEnvelope } from './hlEnvelope.js';
47
- export { default as hlError } from './hlError.js';
48
- export { default as hlEuro } from './hlEuro.js';
49
- export { default as hlExclamationMark } from './hlExclamationMark.js';
50
- export { default as hlExpand } from './hlExpand.js';
51
- export { default as hlExternal } from './hlExternal.js';
52
- export { default as hlEyeClosed } from './hlEyeClosed.js';
53
- export { default as hlEyeOpen } from './hlEyeOpen.js';
54
- export { default as hlFaceId } from './hlFaceId.js';
55
- export { default as hlFastDelivery } from './hlFastDelivery.js';
56
- export { default as hlFingerprint } from './hlFingerprint.js';
57
- export { default as hlGlobe } from './hlGlobe.js';
58
- export { default as hlHeadphones } from './hlHeadphones.js';
59
- export { default as hlHeadset } from './hlHeadset.js';
60
- export { default as hlHeart } from './hlHeart.js';
61
- export { default as hlHome } from './hlHome.js';
62
- export { default as hlHub } from './hlHub.js';
63
- export { default as hlImage } from './hlImage.js';
64
- export { default as hlInfo } from './hlInfo.js';
65
- export { default as hlInstallment } from './hlInstallment.js';
66
- export { default as hlIotSim } from './hlIotSim.js';
67
- export { default as hlLaptop } from './hlLaptop.js';
68
- export { default as hlLiveVideo } from './hlLiveVideo.js';
69
- export { default as hlLock } from './hlLock.js';
70
- export { default as hlMagnifyingGlass } from './hlMagnifyingGlass.js';
71
- export { default as hlMarker } from './hlMarker.js';
72
- export { default as hlMemory } from './hlMemory.js';
73
- export { default as hlMenu } from './hlMenu.js';
74
- export { default as hlMinimize } from './hlMinimize.js';
75
- export { default as hlMinus } from './hlMinus.js';
76
- export { default as hlMobileData } from './hlMobileData.js';
77
- export { default as hlMobilePayment } from './hlMobilePayment.js';
78
- export { default as hlModem } from './hlModem.js';
79
- export { default as hlMore } from './hlMore.js';
80
- export { default as hlOs } from './hlOs.js';
81
- export { default as hlPackage } from './hlPackage.js';
82
- export { default as hlPaperclip } from './hlPaperclip.js';
83
- export { default as hlPaytime } from './hlPaytime.js';
84
- export { default as hlPen } from './hlPen.js';
85
- export { default as hlPerson } from './hlPerson.js';
86
- export { default as hlPhone } from './hlPhone.js';
87
- export { default as hlPlaylist } from './hlPlaylist.js';
88
- export { default as hlPlus } from './hlPlus.js';
89
- export { default as hlPrepaid } from './hlPrepaid.js';
90
- export { default as hlProcessor } from './hlProcessor.js';
91
- export { default as hlServices } from './hlServices.js';
92
- export { default as hlSettings } from './hlSettings.js';
93
- export { default as hlShield } from './hlShield.js';
94
- export { default as hlSim } from './hlSim.js';
95
- export { default as hlSimSimple } from './hlSimSimple.js';
96
- export { default as hlSmile } from './hlSmile.js';
97
- export { default as hlSpeechBubble } from './hlSpeechBubble.js';
98
- export { default as hlSquaretrade } from './hlSquaretrade.js';
99
- export { default as hlStar } from './hlStar.js';
100
- export { default as hlStarFilled } from './hlStarFilled.js';
101
- export { default as hlTrash } from './hlTrash.js';
102
- export { default as hlTv } from './hlTv.js';
103
- export { default as hlUnlock } from './hlUnlock.js';
104
- export { default as hlUpload } from './hlUpload.js';
105
- export { default as hlWarning } from './hlWarning.js';
106
- export { default as hlWifi } from './hlWifi.js';
107
- export { default as hlWrench } from './hlWrench.js';
108
- export { default as hlX } from './hlX.js';
109
- export { default as hlLink } from './hlLink.js';
@@ -1,3 +0,0 @@
1
- import React from 'react';
2
- declare const BusinessMenu: () => React.JSX.Element | null;
3
- export default BusinessMenu;