@dnanpm/styleguide 1.9.0 → 2.1.0

package/build/es/components/MainNavigation/ChildComponents/HeaderNavigationElements.js

@@ -4,6 +4,8 @@ import { IconContainerWidth, navIconSizeMobile, navIconSize, wideMenuBreakpoint,
 import { getMultipliedSize } from '../../../utils/styledUtils.js';
 import DnaLogo from '../../DnaLogo/DnaLogo.js';
 import Icon from '../../Icon/Icon.js';
+import hlMenu from '../../Icons/hlMenu.js';
+import hlX from '../../Icons/hlX.js';
 import NavContext from '../context/NavContext.js';
 import BusinessMenu from './BusinessMenu.js';
 import DesktopMenu from './DesktopMenu.js';
@@ -29,22 +31,22 @@ const IconContainer = styled.div `
     width: ${IconContainerWidth};
     transition: color 0.2s ease-in-out;
 
-    > svg {
+    > span.dnasg-icon > svg {
         display: block;
         height: ${navIconSizeMobile};
         width: ${navIconSizeMobile};
     }
-    > svg,
-    > span {
+    > span.dnasg-icon > svg,
+    > span.dnasg-icon + span {
         color: ${p => (p.isActive ? p.theme.color.hotPink : 'inherit')};
     }
 
     @media (min-width: ${p => p.collapseSize + 1}px) {
-        > svg {
+        > span.dnasg-icon > svg {
             height: ${navIconSize};
             width: ${navIconSize};
         }
-        > span {
+        > span.dnasg-icon + span {
             display: block;
         }
     }
@@ -83,9 +85,10 @@ const MobileMenuButton = styled.button `
     @media (min-width: ${p => p.collapseSize + 1}px) {
         display: none;
     }
-    div > svg {
+    div > span.dnasg-icon > svg {
         height: ${navIconSizeMobile};
         width: ${navIconSizeMobile};
+        margin: 0 auto;
     }
     &:focus,
     &:active {
@@ -139,7 +142,7 @@ const MenuFunctionality = ({ menuProps }) => {
                 React.createElement(LoginTooltip, { loginLabel: loginLabel }))),
             React.createElement(MobileMenuButton, { onClick: handleToggleClick, "aria-label": "menu toggle", role: "button", "aria-expanded": isMobileMenuOpen, collapseSize: collapseSize, "data-testid": "header-mobile-menu-toggle" },
                 React.createElement(IconContainer, { isActive: isMobileMenuOpen, collapseSize: collapseSize },
-                    React.createElement(Icon, { name: isMobileMenuOpen ? 'hlX' : 'hlMenu', size: "100%" }))))));
+                    React.createElement(Icon, { icon: isMobileMenuOpen ? hlX : hlMenu, size: "2rem" }))))));
 };
 // TODO: Define types for MainNavigation component (https://jira.dna.fi/browse/STYLE-233)
 // { navElementProps: MainNavigationProps }

package/build/es/components/MainNavigation/ChildComponents/LanguageSelector.js

@@ -8,14 +8,14 @@ import { MenuLink } from '../globalNavStyles.js';
 
 const TooltipWrapper = styled.div `
     font-weight: ${p => p.theme.fontWeight.bold};
-    font-size: ${p => p.theme.fontSize.h4FontSize};
+    font-size: ${p => p.theme.fontSize.l};
     margin: 0 ${p => getMultipliedSize(p.theme.base.baseHeight, 1)};
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     position: relative;
-    svg {
+    span.dnasg-icon > svg {
         width: 1.6em;
         height: 1.6em;
         @media (min-width: ${p => p.collapseSize + 1}px) {
@@ -27,7 +27,7 @@ const TooltipWrapper = styled.div `
     &:hover span {
         color: ${colors.hotPink};
     }
-    svg + span {
+    span.dnasg-icon + span {
         display: none;
         margin-top: 4px;
         font-size: 0.8125rem;
@@ -39,7 +39,7 @@ const TooltipWrapper = styled.div `
     }
     ${MenuLink} {
         font-weight: ${p => p.theme.fontWeight.bold};
-        font-size: ${p => p.theme.fontSize.defaultFontSize};
+        font-size: ${p => p.theme.fontSize.default};
         margin: 0rem 1.5rem;
         padding: 0.5rem 0;
         width: 1.5rem;

package/build/es/components/MainNavigation/ChildComponents/LoginTooltip.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import colors from '../../../themes/themeComponents/colors.js';
 import Icon from '../../Icon/Icon.js';
+import hlPerson from '../../Icons/hlPerson.js';
 import NavContext from '../context/NavContext.js';
 import MainNavTooltipMenu from './MainNavTooltipMenu.js';
 import { TooltipWrapper } from './MainNavTooltipMenuExportedStyles.js';
@@ -9,7 +10,7 @@ const LoginTooltip = ({ loginLabel }) => {
     const { navZIndex, isMobileMenu, loginComponent: LoginComponent, collapseSize, isLoggedIn, } = React.useContext(NavContext);
     return (React.createElement(MainNavTooltipMenu, { zIndex: (navZIndex + 1).toString(), color: isLoggedIn ? colors.hotPink : colors.text, activeColor: colors.hotPink, tooltipRight: isMobileMenu ? '3rem' : '1rem', contentComponent: LoginComponent, globalStateString: "login", closeWhenTagClicked: ['a', 'button'] },
         React.createElement(TooltipWrapper, { collapseSize: collapseSize, isComponent: Boolean(LoginComponent) },
-            React.createElement(Icon, { name: "hlPerson", size: "100%" }),
+            React.createElement(Icon, { icon: hlPerson, size: "2rem" }),
             React.createElement("span", { "data-testid": "header-login-label" }, loginLabel))));
 };
 

package/build/es/components/MainNavigation/ChildComponents/MainNavTooltipMenuExportedStyles.d.ts

@@ -11,12 +11,7 @@ export declare const TooltipWrapper: import("styled-components").StyledComponent
     };
     breakpoints: import("../../../themes/themeComponents/breakpoints").ViewBreakpoints;
     button: {
-        buttonBorderWidth: string;
-        buttonPadding: string;
-        smallButtonPadding: string;
-        buttonLineHeight: string;
-        buttonWidth: string;
-        buttonSmallWidth: string;
+        border: string;
     };
     color: {
         black: string;
@@ -47,22 +42,27 @@ export declare const TooltipWrapper: import("styled-components").StyledComponent
         gray5: string;
     };
     fontFamily: {
-        baseFontFamily: string;
+        default: string;
+        heading: string;
+        numerals: string;
     };
     fontSize: {
-        defaultFontSize: string;
-        smallFontSize: string;
-        extraSmallFontSize: string;
-        xsFontSize: string;
-        xxsFontSize: string;
-        h1FontSize: string;
-        h2FontSize: string;
-        h2MobileFontSize: string;
-        h3FontSize: string;
-        h4FontSize: string;
-        h5FontSize: string;
-        heroBannerTitleFontSize: string;
-        heroBannerTitleMobileFontSize: string;
+        default: string;
+        xl: string;
+        l: string;
+        s: string;
+        xs: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
     };
     fontWeight: {
         book: number;
@@ -78,16 +78,23 @@ export declare const TooltipWrapper: import("styled-components").StyledComponent
         gutter: string;
     };
     lineHeight: {
-        defaultLineHeight: string;
-        paragraphLineHeight: string;
-        heroBannerLineHeight: string;
-        heroBannerMobileLineHeight: string;
-        h1LineHeight: string;
-        h2LineHeight: string;
-        h2MobileLineHeight: string;
-        h3LineHeight: string;
-        h4LineHeight: string;
-        h5LineHeight: string;
+        default: string;
+        xl: string;
+        s: string;
+        xs: string;
+        xxs: string;
+        auto: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
     };
     media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
 }, {

package/build/es/components/MainNavigation/ChildComponents/MainNavTooltipMenuExportedStyles.js

@@ -1,5 +1,5 @@
 import styled from '../../../themes/styled.js';
-import { IconContainerWidth, wideMenuBreakpoint } from '../../../themes/themeComponents/navigation.js';
+import { IconContainerWidth } from '../../../themes/themeComponents/navigation.js';
 
 const TooltipWrapper = styled.button `
     border: none;
@@ -17,19 +17,19 @@ const TooltipWrapper = styled.button `
     width: 100%;
     cursor: ${p => (p.isComponent ? 'pointer' : 'default')};
     &:hover {
-        > svg,
+        span.dnasg-icon > svg,
         > span {
             color: ${p => p.theme.color.text};
         }
     }
     &:active,
     &:focus {
-        > svg,
+        span.dnasg-icon > svg,
         > span {
             color: ${p => (p.isComponent ? p.theme.color.hotPink : p.theme.color.gray40)};
         }
     }
-    > svg {
+    span.dnasg-icon > svg {
         align-content: center;
         display: flex;
         height: 2em;
@@ -39,23 +39,20 @@ const TooltipWrapper = styled.button `
             width: 1.625em;
         }
         margin: 0 auto;
-        + span {
-            width: 100%;
-            display: none;
-            @media (min-width: ${p => p.collapseSize + 1}px) {
-                display: block;
-                margin-top: 5px;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-                overflow: hidden;
-                max-width: ${IconContainerWidth};
-            }
-            font-size: ${p => p.theme.fontSize.xxsFontSize};
-            font-weight: ${p => p.theme.fontWeight.book};
-            @media (min-width: ${wideMenuBreakpoint}px) {
-                font-size: ${p => p.theme.fontSize.xsFontSize};
-            }
+    }
+    span.dnasg-icon + span {
+        width: 100%;
+        display: none;
+        @media (min-width: ${p => p.collapseSize + 1}px) {
+            display: block;
+            margin-top: 5px;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+            max-width: ${IconContainerWidth};
         }
+        font-size: ${p => p.theme.fontSize.xs};
+        font-weight: ${p => p.theme.fontWeight.book};
     }
 `;
 

package/build/es/components/MainNavigation/ChildComponents/MinicartTooltip.js

@@ -3,6 +3,7 @@ import styled from '../../../themes/styled.js';
 import breakpoints from '../../../themes/themeComponents/breakpoints.js';
 import colors from '../../../themes/themeComponents/colors.js';
 import Icon from '../../Icon/Icon.js';
+import hlCart from '../../Icons/hlCart.js';
 import { NotificationBadge } from '../../NotificationBadge/NotificationBadge.js';
 import NavContext from '../context/NavContext.js';
 import MainNavTooltipMenu from './MainNavTooltipMenu.js';
@@ -21,7 +22,7 @@ const MinicartTooltip = ({ minicartAmount, minicartLabel }) => {
     const { navZIndex, minicartComponent: MinicartComponent, collapseSize } = React.useContext(NavContext);
     return (React.createElement(MainNavTooltipMenu, { zIndex: (navZIndex + 1).toString(), activeColor: colors.hotPink, contentWidth: "35rem", tooltipRight: "5rem", overflowY: false, contentComponent: MinicartComponent, globalStateString: "minicart", fullWidthBreakpoint: breakpoints.md, closeWhenTagClicked: ['a', 'button'] },
         React.createElement(TooltipWrapper, { collapseSize: collapseSize, isComponent: Boolean(MinicartComponent) },
-            React.createElement(Icon, { name: "hlCart", size: "100%" }),
+            React.createElement(Icon, { icon: hlCart, size: "2rem" }),
             React.createElement("span", null, minicartLabel),
             minicartAmount > 0 && (React.createElement(MinicartAmount, { collapseSize: collapseSize, "data-testid": "header-minicart-amount" }, minicartAmount)))));
 };

package/build/es/components/MainNavigation/ChildComponents/MobileMenu.js

@@ -2,8 +2,10 @@ import React, { useContext } from 'react';
 import { useSpring, animated } from 'react-spring';
 import styled from '../../../themes/styled.js';
 import { menuLevelsAmount, mobileNavMaxHeight, ribbonHeight } from '../../../themes/themeComponents/navigation.js';
-import { media, getMultipliedSize } from '../../../utils/styledUtils.js';
+import { media } from '../../../utils/styledUtils.js';
 import Icon from '../../Icon/Icon.js';
+import hlChevronLeft from '../../Icons/hlChevronLeft.js';
+import hlChevronRight from '../../Icons/hlChevronRight.js';
 import MobileMenuContext from '../context/MobileMenuContext.js';
 import NavContext from '../context/NavContext.js';
 import { MenuLink, MenuList, MenuItem, MenuLinkWithChildren } from '../globalNavStyles.js';
@@ -69,7 +71,7 @@ const MobileMenu = styled.div `
     ${MenuLink}, ${MenuLinkWithChildren} {
         line-height: 1.4rem;
         padding: 1.25rem 1rem 1.25rem 1.25rem;
-        font-size: ${p => p.theme.fontSize.h4FontSize};
+        font-size: ${p => p.theme.fontSize.l};
         display: flex;
         flex-grow: 1;
         align-items: center;
@@ -80,9 +82,8 @@ const MobileMenu = styled.div `
         background: ${p => p.theme.color.white};
         color: ${p => p.theme.color.hotPink};
         justify-content: flex-start;
-        ${Icon} {
-            margin-left: -${p => getMultipliedSize(p.theme.base.baseHeight, 0.5)};
-            margin-right: ${p => getMultipliedSize(p.theme.base.baseHeight, 1)};
+        span.dnasg-icon {
+            margin-left: -0.5rem;
         }
     }
     ${MenuLink}:hover {
@@ -105,7 +106,7 @@ const MenuItemBackLink = ({ currentLevel }) => {
     const backLink = getBackLink(menuElements, currentLevel - 1);
     return (React.createElement(MenuItem, { key: `back-${backLink.id}`, "data-testid": `mobile-nav-menu-backlink-level-${currentLevel}` },
         React.createElement(MenuLinkBackLink, { role: "menu-item", as: "button", onClick: mobileMenuBackClick, tabIndex: tabNavigationDisabled ? -1 : undefined },
-            React.createElement(Icon, { name: "chevronLeft", size: "0.625em" }),
+            React.createElement(Icon, { icon: hlChevronLeft, position: "left" }),
             backLink.titles[language])));
 };
 const CreateSubMenuItem = ({ menuItem, currentLevel, itemIndex }) => {
@@ -130,7 +131,7 @@ const CreateSubMenuItem = ({ menuItem, currentLevel, itemIndex }) => {
         return (React.createElement(MenuItem, { key: menuItem.id, "aria-haspopup": "true", "data-testid": `mobile-menu-level-${currentLevel}-link-${itemIndex + 1}`, isActive: isSelected(currentUrl, menuUrl) },
             React.createElement(MenuLink, { as: "button", onClick: mobileMenuClick(menuItem), role: "menuitem", tabIndex: tabNavigationDisabled() ? -1 : undefined },
                 menuItem.titles[language],
-                React.createElement(Icon, { name: "chevronRight", size: "0.75em" }))));
+                React.createElement(Icon, { icon: hlChevronRight }))));
     }
     return (React.createElement(MenuItem, { key: menuItem.id, role: "menuitem", "data-testid": `mobile-menu-level-${currentLevel}-link-${itemIndex + 1}`, isActive: isSelected(currentUrl, menuUrl, true) },
         React.createElement(LinkModifier, { menuItem: menuItem, tabIndex: tabNavigationDisabled() })));

package/build/es/components/MainNavigation/ChildComponents/PageSearch.js

@@ -1,15 +1,16 @@
 import React from 'react';
+import colors from '../../../themes/themeComponents/colors.js';
+import Icon from '../../Icon/Icon.js';
+import hlMagnifyingGlass from '../../Icons/hlMagnifyingGlass.js';
 import NavContext from '../context/NavContext.js';
 import MainNavTooltipMenu from './MainNavTooltipMenu.js';
 import { TooltipWrapper } from './MainNavTooltipMenuExportedStyles.js';
-import colors from '../../../themes/themeComponents/colors.js';
-import Icon from '../../Icon/Icon.js';
 
 const PageSearch = ({ searchLabel }) => {
     const { navZIndex, isMobileMenu, searchComponent: SearchComponent, collapseSize, } = React.useContext(NavContext);
     return (React.createElement(MainNavTooltipMenu, { zIndex: (navZIndex + 1).toString(), activeColor: colors.hotPink, tooltipRight: "0", contentComponent: SearchComponent, contentWidth: "100%", overflowY: isMobileMenu, globalStateString: "search", fullWidthDesktop: true, closeWhenTagClicked: ['a'] },
         React.createElement(TooltipWrapper, { collapseSize: collapseSize, isComponent: Boolean(SearchComponent) },
-            React.createElement(Icon, { name: "hlMagnifyingGlass", size: "100%" }),
+            React.createElement(Icon, { icon: hlMagnifyingGlass, size: "2rem" }),
             React.createElement("span", null, searchLabel))));
 };
 

package/build/es/components/MainNavigation/ChildComponents/Ribbon.js

@@ -27,17 +27,16 @@ const RibbonColumn = styled.div `
     flex: 1 1 auto;
     display: flex;
     justify-content: center;
+    align-items: center;
     margin: 0.125rem 0;
     padding: 0.125rem 0;
     color: ${p => p.theme.color.gray55};
-    font-size: ${p => p.theme.fontSize.xsFontSize};
+    font-size: ${p => p.theme.fontSize.xs};
     border-right: 2px solid white;
     &:last-of-type {
         border: none;
     }
-    span {
-        margin-left: 0.25rem;
-    }
+
     a {
         display: flex;
         align-items: center;
@@ -60,10 +59,10 @@ const Ribbon = ({ ribbonData, lang = 'fi', navZIndex }) => {
         React.createElement(RibbonItems, null, ribbonData.map(ribbon => {
             return (React.createElement(RibbonColumn, { key: `ribbon-${ribbon.ribbonIcon}` },
                 ribbon.ribbonLink[lang] && (React.createElement("a", { href: ribbon.ribbonLink[lang] },
-                    React.createElement(Icon, { name: ribbon.ribbonIcon, size: "1.2em" }),
+                    React.createElement(Icon, { name: ribbon.ribbonIcon, size: "1rem", position: "left" }),
                     React.createElement("span", null, ribbon.ribbonTexts[lang]))),
                 !ribbon.ribbonLink[lang] && (React.createElement(React.Fragment, null,
-                    React.createElement(Icon, { name: ribbon.ribbonIcon, size: "1.2em" }),
+                    React.createElement(Icon, { name: ribbon.ribbonIcon, size: "1rem", position: "left" }),
                     React.createElement("span", null, ribbon.ribbonTexts[lang])))));
         }))));
 };

package/build/es/components/MainNavigation/MainNavigation.js

@@ -1,11 +1,11 @@
 import { prop, indexBy } from 'ramda';
-import React, { useRef, useMemo, useState, useEffect } from 'react';
+import React, { useRef, useMemo, useState } from 'react';
 import withSizes from 'react-sizes';
-import stickybits from 'stickybits';
 import useBodyClass from '../../hooks/modifyBodyClass.js';
 import useScrollPosition from '../../hooks/useScrollPosition.js';
 import styled, { createGlobalStyle, keyframes } from '../../themes/styled.js';
 import { desktopNavMaxHeight, ribbonHeight, mobileNavMaxHeight } from '../../themes/themeComponents/navigation.js';
+import { getMultipliedSize } from '../../utils/styledUtils.js';
 import Notification from '../Notification/Notification.js';
 import HeaderNavigationElements from './ChildComponents/HeaderNavigationElements.js';
 import RenderMobileMenu from './ChildComponents/MobileMenu.js';
@@ -96,6 +96,8 @@ const GlobalNavigationContainer = styled.nav `
 const NavigationWrapper = styled.div `
     display: flex;
     width: 100%;
+    max-width: ${props => getMultipliedSize(props.theme.base.baseHeight, 256)};
+    margin: 0 auto;
     height: ${mobileNavMaxHeight};
     @media (min-width: ${p => p.collapseSize + 1}px) {
         height: ${desktopNavMaxHeight};
@@ -165,20 +167,6 @@ items = {}, language = 'fi', zIndex = 1030, languageSelector = false, isMobileMe
         hideOnScroll: false,
     });
     const [lang] = useState(language);
-    // polyfill for browser (e.g. IE11 and older Safari) that don't support CSS position: sticky
-    useEffect(() => {
-        if (!isStickySupported && typeof window !== 'undefined') {
-            const stickyElement = navigationEl.current;
-            if (stickyElement) {
-                const stickyBitsElement = stickybits(stickyElement);
-                return function cleanUp() {
-                    if (stickyElement) {
-                        stickyBitsElement.cleanup();
-                    }
-                };
-            }
-        }
-    }, []);
     const handleNavMenuClick = (newValue, updatedLevel) => {
         let clickedItself = false;
         switch (updatedLevel) {
@@ -318,7 +306,7 @@ items = {}, language = 'fi', zIndex = 1030, languageSelector = false, isMobileMe
         React.createElement(GlobalNavigationContainer, { className: className, ref: navigationEl, collapseSize: collapseSize, menuLevel: menuLevel, "data-testid": "main-navigation", navZIndex: zIndex, tooltipMenuActive: tooltipMenuActive },
             React.createElement(NavContext.Provider, { value: navigationContext },
                 React.createElement(GlobalStyle, null),
-                !items.mainNavigation && notificationText && (React.createElement(Notification, { color: "info", showIcon: true, closeButton: false }, notificationText)),
+                !items.mainNavigation && notificationText && (React.createElement(Notification, { type: "info", showIcon: true, closeButton: false }, notificationText)),
                 ribbon && ribbonData && (React.createElement(Ribbon, { ribbonData: ribbonData, lang: language, navZIndex: zIndex })),
                 React.createElement(NavigationWrapper, { collapseSize: collapseSize },
                     React.createElement(HeaderNavigationElements, { navElementProps: props }),