@dnanpm/styleguide 3.12.2 → 4.0.0

package/build/cjs/components/MainNavigation/MainNavigation.js

@@ -1,319 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var ramda = require('ramda');
-var React = require('react');
-var useScrollPosition = require('../../hooks/useScrollPosition.js');
-var useWindowSize = require('../../hooks/useWindowSize.js');
-var styledComponents = require('styled-components');
-var theme = require('../../themes/theme.js');
-var navigation = require('../../themes/themeComponents/navigation.js');
-var styledUtils = require('../../utils/styledUtils.js');
-var Notification = require('../Notification/Notification.js');
-var HeaderNavigationElements = require('./ChildComponents/HeaderNavigationElements.js');
-var MobileMenu = require('./ChildComponents/MobileMenu.js');
-var Ribbon = require('./ChildComponents/Ribbon.js');
-var NavContext = require('./context/NavContext.js');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-const GlobalStyle = styledComponents.createGlobalStyle `
-    body.overflow-hidden {
-        overflow: hidden;
-    }
-`;
-// detect common touch screen devices
-const isIosDevice = () => {
-    const validate = /iPad|iPhone|iPod|iPad Simulator|iPhone Simulator/i;
-    if (typeof navigator !== 'undefined' && typeof window !== 'undefined') {
-        return (validate.test(navigator.userAgent) &&
-            !window.MSStream);
-    }
-    return false;
-};
-const iosDevice = isIosDevice();
-const fadeIn = styledComponents.keyframes `
-    0% {
-        opacity: 0;
-        transform: translateY(-5px);
-    }
-    5% {
-        opacity: 0;
-        transform: translateY(-5px);
-    }
-    100% {
-        opacity: 1;
-        transform: translateY(0px);
-    }
-`;
-const preventBodyScroll = () => {
-    const { scrollY } = window;
-    document.body.style.position = 'fixed';
-    document.body.style.top = `-${scrollY}px`;
-};
-const resumeBodyScroll = () => {
-    const scrollY = document.body.style.top;
-    document.body.style.position = '';
-    document.body.style.top = '';
-    // if the call to close overlay is done multiple times, scroll only the first time
-    if (scrollY) {
-        setTimeout(() => {
-            window.scrollTo(0, parseInt(scrollY, 10) * -1);
-        });
-    }
-};
-const PageOverlay = styledComponents.styled.div `
-    position: fixed;
-    animation: ${fadeIn} 0.2s ease-in-out;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: ${theme.default.color.background.plum.default + theme.default.color.transparency.T10};
-    z-index: ${({ $navZIndex }) => $navZIndex - 1};
-`;
-const scrollThreshold = 82;
-const checkThreshold = (prevPos, currPos) => {
-    if (prevPos >= currPos) {
-        return prevPos - currPos > scrollThreshold;
-    }
-    return currPos - prevPos > scrollThreshold;
-};
-const GlobalNavigationContainer = styledComponents.styled.nav `
-    z-index: ${({ $navZIndex }) => $navZIndex};
-    position: relative;
-    position: sticky;
-    display: block;
-    top: 0;
-    left: 0;
-    width: 100%;
-    background-color: ${theme.default.color.background.white.default};
-    color: ${theme.default.color.text.black};
-    top: ${({ $menuLevel, $tooltipMenuActive }) => ($menuLevel === null || $menuLevel === void 0 ? void 0 : $menuLevel.hideOnScroll) && !($menuLevel === null || $menuLevel === void 0 ? void 0 : $menuLevel.level1) && !$tooltipMenuActive
-    ? `calc(-${navigation.desktopNavMaxHeight} - ${navigation.ribbonHeight})`
-    : '0px'} !important;
-    transition: top 0.2s ease-in-out;
-    box-sizing: border-box;
-`;
-const NavigationWrapper = styledComponents.styled.div `
-    display: flex;
-    width: 100%;
-    max-width: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 256)};
-    margin: 0 auto;
-    height: ${navigation.mobileNavMaxHeight};
-    @media (min-width: ${p => p.$collapseSize + 1}px) {
-        height: ${navigation.desktopNavMaxHeight};
-    }
-`;
-let previousValue = false;
-const isStickySupported = typeof CSS !== 'undefined' &&
-    typeof CSS.supports !== 'undefined' &&
-    (CSS.supports('position', 'sticky') || CSS.supports('position', '-webkit-sticky'));
-const initiateScrollToHeader = (componentRef) => {
-    if ((componentRef === null || componentRef === void 0 ? void 0 : componentRef.current) && isStickySupported && typeof window !== 'undefined') {
-        window.scrollTo({ top: componentRef.current.offsetTop, left: 0 });
-    }
-};
-/**
- * @visibleName Main Navigation
- * @deprecated Use `MainHeaderNavigation` component
- */
-const MainNavigation = ({ items = {}, language = 'fi', zIndex = 1030, languageSelector = false, search = true, searchText = 'Haku', searchComponent = false, minicart = true, minicartText = 'Ostoskori', minicartComponent = false, minicartAmount = 0, showMinicart = false, showLoginTooltip = false, login = true, loginText = 'Kirjaudu', loginComponent, isLoggedIn = false, collapseSize = 767, nextJSLinkComponent = false, ribbon = true, ribbonData, className, currentUrl = '', notificationText = '', }) => {
-    const { isMobile } = useWindowSize.default(collapseSize);
-    const props = {
-        items,
-        language,
-        zIndex,
-        search,
-        searchText,
-        minicart,
-        minicartText,
-        minicartComponent,
-        minicartAmount,
-        showMinicart,
-        showLoginTooltip,
-        login,
-        loginText,
-        loginComponent,
-        isLoggedIn,
-        searchComponent,
-        collapseSize,
-        languageSelector,
-        nextJSLinkComponent,
-        ribbonData,
-        notificationText,
-    };
-    const navigationEl = React.useRef(null);
-    const key = ramda.prop('id');
-    // Index & memoize menu levels
-    const level1 = React.useMemo(() => { var _a, _b; return (_b = (_a = items.mainNavigation) === null || _a === void 0 ? void 0 : _a.pages) !== null && _b !== void 0 ? _b : []; }, [items.mainNavigation]);
-    const level1Items = React.useMemo(() => ramda.indexBy(key, level1), [level1, key]);
-    const level2 = React.useMemo(() => level1.map(item => ramda.indexBy(key, item.pages)), [level1, key]);
-    const level2Items = Object.assign({}, ...level2);
-    // All states to for handling menus
-    const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
-    const [menuLevel, setMenuLevel] = React.useState({
-        level1: null,
-        animate1: true,
-        level2: null,
-        animate2: true,
-        level1Mobile: null,
-        level2Mobile: null,
-        scrollPosition: 0,
-        hideOnScroll: false,
-    });
-    const [lang] = React.useState(language);
-    // As scroll position cannot be always retained, close mobile menu when orientation changes
-    const initRotation = () => {
-        setIsMobileMenuOpen(false);
-    };
-    React.useEffect(() => {
-        if (iosDevice && isMobileMenuOpen) {
-            window.addEventListener('orientationchange', initRotation, false);
-            preventBodyScroll();
-        }
-        if (iosDevice && !isMobileMenuOpen) {
-            window.removeEventListener('orientationchange', initRotation, false);
-            resumeBodyScroll();
-        }
-        return () => {
-            window.removeEventListener('orientationchange', initRotation, false);
-            resumeBodyScroll();
-        };
-    }, [isMobileMenuOpen]);
-    const [tooltipItems, setTooltipItems] = React.useState(React.useMemo(() => ({
-        minicart: false,
-        login: false,
-        search: false,
-    }), []));
-    const tooltipMenuActive = tooltipItems.minicart || tooltipItems.login || tooltipItems.search;
-    const freezeOverflow = isMobileMenuOpen || (tooltipMenuActive && isMobile);
-    const isPageOverlay = tooltipMenuActive || menuLevel.level1 || menuLevel.level2;
-    React.useEffect(() => {
-        const bodyClasses = ['overflow-shown', 'overflow-hidden'];
-        document.body.classList.remove(...bodyClasses);
-        document.body.classList.add(bodyClasses[Number(Boolean(freezeOverflow))]);
-    }, [freezeOverflow]);
-    const navigationContext = React.useMemo(() => {
-        const handleNavMenuClick = (newValue, updatedLevel) => {
-            let clickedItself = false;
-            switch (updatedLevel) {
-                case 'level1':
-                    clickedItself = newValue === menuLevel.level1;
-                    setMenuLevel(Object.assign(Object.assign({}, menuLevel), { level1: !clickedItself ? newValue : null, animate1: !clickedItself, level2: null, animate2: true }));
-                    break;
-                case 'level2':
-                    clickedItself = newValue === menuLevel.level2;
-                    setMenuLevel(Object.assign(Object.assign({}, menuLevel), { level2: newValue !== menuLevel.level2 ? newValue : null, animate1: false, animate2: !clickedItself }));
-                    break;
-                case 'level1Mobile':
-                    setMenuLevel(Object.assign(Object.assign({}, menuLevel), { level1Mobile: newValue || menuLevel.level1Mobile, scrollPosition: newValue ? 1 : 0 }));
-                    break;
-                case 'level2Mobile':
-                    setMenuLevel(Object.assign(Object.assign({}, menuLevel), { level2Mobile: newValue || menuLevel.level2Mobile, scrollPosition: newValue ? 2 : 1 }));
-                    break;
-            }
-        };
-        const resetMenuEvents = () => {
-            setMenuLevel({
-                level2: null,
-                animate2: true,
-                level1: null,
-                animate1: true,
-                level1Mobile: null,
-                level2Mobile: null,
-                scrollPosition: 0,
-                hideOnScroll: false,
-            });
-            if (isMobileMenuOpen) {
-                setIsMobileMenuOpen(false);
-            }
-            setTooltipItems({
-                minicart: false,
-                login: false,
-                search: false,
-            });
-        };
-        const handleToggleClick = () => {
-            resetMenuEvents();
-            initiateScrollToHeader(navigationEl);
-            setIsMobileMenuOpen(!isMobileMenuOpen);
-        };
-        const getBackLink = (menuElements, i) => {
-            const idValue = menuLevel[`level${i}Mobile`];
-            return menuElements[idValue];
-        };
-        // Resets menu states when menu content alters between mobile and desktop
-        const menuChanged = previousValue !== isMobile;
-        if (menuChanged) {
-            resetMenuEvents();
-            previousValue = isMobile;
-        }
-        return {
-            lang,
-            navZIndex: zIndex,
-            menuLevel,
-            handleNavMenuClick,
-            getBackLink,
-            isMobileMenu: isMobile,
-            items,
-            level1Items,
-            level2Items,
-            resetMenuEvents,
-            handleToggleClick,
-            isMobileMenuOpen,
-            nextJSLinkComponent,
-            loginComponent,
-            isLoggedIn,
-            collapseSize,
-            tooltipItems,
-            setTooltipItems,
-            minicartComponent,
-            showMinicart,
-            showLoginTooltip,
-            searchComponent,
-            currentUrl,
-        };
-    }, [
-        isMobile,
-        lang,
-        zIndex,
-        menuLevel,
-        items,
-        level1Items,
-        level2Items,
-        isMobileMenuOpen,
-        nextJSLinkComponent,
-        loginComponent,
-        isLoggedIn,
-        collapseSize,
-        tooltipItems,
-        minicartComponent,
-        showMinicart,
-        showLoginTooltip,
-        searchComponent,
-        currentUrl,
-    ]);
-    useScrollPosition.default(({ prevPos, currPos }) => {
-        const overThreshold = checkThreshold(prevPos.y, currPos.y);
-        const isShow = currPos.y < prevPos.y;
-        if (isShow !== menuLevel.hideOnScroll && overThreshold && !menuLevel.level1) {
-            setMenuLevel(Object.assign(Object.assign({}, menuLevel), { animate1: false, animate2: false, hideOnScroll: isShow }));
-        }
-    }, undefined, false, 200);
-    return (React__default.default.createElement(React__default.default.Fragment, null,
-        isPageOverlay && React__default.default.createElement(PageOverlay, { "data-testid": "navigation-overlay", "$navZIndex": zIndex }),
-        React__default.default.createElement(GlobalNavigationContainer, { className: className, ref: navigationEl, "$collapseSize": collapseSize, "$menuLevel": menuLevel, "$navZIndex": zIndex, "$tooltipMenuActive": tooltipMenuActive, "data-testid": "main-navigation" },
-            React__default.default.createElement(NavContext.default.Provider, { value: navigationContext },
-                React__default.default.createElement(GlobalStyle, null),
-                !items.mainNavigation && notificationText && (React__default.default.createElement(Notification.default, { type: "info" }, notificationText)),
-                ribbon && ribbonData && React__default.default.createElement(Ribbon.default, { ribbonData: ribbonData, lang: language }),
-                React__default.default.createElement(NavigationWrapper, { "$collapseSize": collapseSize },
-                    React__default.default.createElement(HeaderNavigationElements.default, { navElementProps: props }),
-                    isMobile && React__default.default.createElement(MobileMenu.default, null))))));
-};
-
-exports.default = MainNavigation;

package/build/cjs/components/MainNavigation/context/MobileMenuContext.d.ts

@@ -1,6 +0,0 @@
-import type { RefObject } from 'react';
-export interface MobileMenuContextProps {
-    mobileMenuRef: RefObject<HTMLElement> | null;
-}
-declare const MobileMenuContext: import("react").Context<MobileMenuContextProps>;
-export default MobileMenuContext;

package/build/cjs/components/MainNavigation/context/MobileMenuContext.js

@@ -1,11 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-
-const MobileMenuContext = React.createContext({
-    mobileMenuRef: null,
-});
-
-exports.default = MobileMenuContext;

package/build/cjs/components/MainNavigation/context/NavContext.d.ts

@@ -1,29 +0,0 @@
-import type { Dispatch, ReactNode, SetStateAction } from 'react';
-import type { GlobalNavItems, MenuLevelItem, MenuStates, MenuTooltipItems, MobileMenuLevel } from '../types/globalNavProps';
-export interface NavContextProps {
-    collapseSize: number;
-    currentUrl: string;
-    getBackLink: (menuElements: MenuLevelItem[], i: number) => MenuLevelItem;
-    handleNavMenuClick: (id: string | null, level: string) => void;
-    handleToggleClick: () => void;
-    isLoggedIn: boolean;
-    isMobileMenu: boolean;
-    isMobileMenuOpen: boolean;
-    items: GlobalNavItems;
-    level1Items: MobileMenuLevel;
-    level2Items: MobileMenuLevel;
-    lang: string;
-    loginComponent?: ReactNode | boolean | undefined;
-    menuLevel: MenuStates;
-    minicartComponent?: ReactNode | boolean | undefined;
-    navZIndex: number;
-    nextJSLinkComponent: ReactNode | boolean;
-    resetMenuEvents: () => void;
-    searchComponent?: ReactNode | boolean | undefined;
-    setTooltipItems: Dispatch<SetStateAction<MenuTooltipItems>>;
-    showLoginTooltip: boolean;
-    showMinicart: boolean;
-    tooltipItems: MenuTooltipItems;
-}
-declare const NavContext: import("react").Context<NavContextProps>;
-export default NavContext;

package/build/cjs/components/MainNavigation/context/NavContext.js

@@ -1,46 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-
-const NavContext = React.createContext({
-    collapseSize: 767,
-    currentUrl: '',
-    getBackLink: () => ({ id: '', pages: [], titles: {}, urls: {} }),
-    handleNavMenuClick: () => { },
-    handleToggleClick: () => { },
-    isLoggedIn: false,
-    isMobileMenu: false,
-    isMobileMenuOpen: false,
-    items: {},
-    lang: 'fi',
-    level1Items: { level1: { id: '', pages: [], titles: {}, urls: {} } },
-    level2Items: { level2: { id: '', pages: [], titles: {}, urls: {} } },
-    loginComponent: false,
-    menuLevel: {
-        level1: null,
-        animate1: true,
-        level2: null,
-        animate2: true,
-        level1Mobile: null,
-        level2Mobile: null,
-        scrollPosition: 0,
-        hideOnScroll: false,
-    },
-    minicartComponent: undefined,
-    navZIndex: 1030,
-    nextJSLinkComponent: false,
-    resetMenuEvents: () => { },
-    searchComponent: false,
-    setTooltipItems: () => { },
-    showLoginTooltip: false,
-    showMinicart: true,
-    tooltipItems: {
-        minicart: false,
-        login: false,
-        search: false,
-    },
-});
-
-exports.default = NavContext;

package/build/cjs/components/MainNavigation/globalNavStyles.d.ts

@@ -1,13 +0,0 @@
-export declare const MenuItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {
-    isActive?: boolean;
-}>> & string;
-export declare const MenuLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {
-    isActive?: boolean;
-}>> & string;
-export declare const MenuLinkWithChildren: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
-    isActive?: boolean;
-    isHighlighted?: boolean;
-}>> & string;
-export declare const MenuList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {
-    isInView?: boolean;
-}>> & string;

package/build/cjs/components/MainNavigation/globalNavStyles.js

@@ -1,94 +0,0 @@
-'use strict';
-
-var styledComponents = require('styled-components');
-var theme = require('../../themes/theme.js');
-
-const MenuItem = styledComponents.styled.li `
-    position: relative;
-    padding: 0;
-    margin: 0;
-    height: 100%;
-    color: ${theme.default.color.text.black};
-    & > a {
-        color: ${p => (p.isActive ? theme.default.color.text.pink : theme.default.color.text.black)};
-    }
-`;
-const MenuLink = styledComponents.styled.a `
-    border: none;
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    overflow: visible;
-    background: transparent;
-    color: inherit;
-    font: inherit;
-    line-height: normal;
-    -webkit-font-smoothing: inherit;
-    -moz-osx-font-smoothing: inherit;
-    -webkit-appearance: none;
-    line-height: 1rem;
-    display: block;
-    text-decoration: none;
-    text-align: left;
-    color: ${p => (p.isActive ? theme.default.color.text.pink : theme.default.color.text.black)};
-    padding: 0.5em 1em;
-    white-space: normal;
-    &:hover,
-    &:focus {
-        text-decoration: none;
-        color: ${theme.default.color.text.pink};
-        cursor: pointer;
-        outline: none;
-        border-bottom: none;
-    }
-`;
-const MenuLinkWithChildren = styledComponents.styled.button `
-    line-height: 1rem;
-    text-align: left;
-    display: block;
-    text-decoration: none;
-    border: none;
-    background: none;
-    outline: none;
-    font-size: inherit;
-    font-family: inherit;
-    white-space: normal;
-    color: ${p => p && (p.isActive || p.isHighlighted) ? theme.default.color.text.pink : theme.default.color.default.black};
-    padding: 0.5em 1em;
-    span {
-        position: relative;
-        &:first-child:after {
-            position: absolute;
-            content: '';
-            width: 100%;
-            bottom: -6px;
-            left: 0;
-            border-bottom: 1px solid
-                ${p => (p.isHighlighted ? theme.default.color.default.pink : 'transparent')};
-        }
-    }
-    &:hover,
-    &:focus {
-        text-decoration: none;
-        color: ${theme.default.color.text.pink};
-        cursor: pointer;
-        outline: none;
-    }
-`;
-const MenuList = styledComponents.styled.ul `
-    display: inline-flex;
-    max-height: ${p => (typeof p.isInView !== 'boolean' || p.isInView ? 'auto' : '5px')};
-    overflow: ${p => (typeof p.isInView === 'boolean' ? 'hidden' : 'unset')};
-    align-items: center;
-    position: relative;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    background-color: ${theme.default.color.default.white};
-    transition: all 300ms ease-in-out;
-`;
-
-exports.MenuItem = MenuItem;
-exports.MenuLink = MenuLink;
-exports.MenuLinkWithChildren = MenuLinkWithChildren;
-exports.MenuList = MenuList;

package/build/cjs/components/SecondaryNavigation/SecondaryNavigation.d.ts

@@ -1,90 +0,0 @@
-import type { ComponentType, ReactNode } from 'react';
-import React from 'react';
-import type { LangProps } from '../../types/language';
-interface MenuItem {
-    id: string;
-    titles: LangProps;
-    urls: LangProps;
-    icon?: string;
-    target?: string;
-}
-interface SecondaryNavigationData {
-    name?: string;
-    categoryId?: string;
-    pages?: MenuItem[] | null;
-}
-interface NextJSLink {
-    linkUrl: string;
-    linkTitle: string;
-    iconName: string;
-    showNotification: boolean;
-    collapseSize: number;
-    children?: ReactNode;
-}
-interface Props {
-    /**
-     * Component data in JSON format
-     */
-    data: SecondaryNavigationData;
-    /**
-     * Highlight active item
-     */
-    currentUrl: string;
-    /**
-     * Allows to use nextJS component instead of HTML Anchor
-     */
-    nextJSSecondaryNavLink?: ComponentType<NextJSLink>;
-    /**
-     * Allows to change language of component
-     *
-     * @default 'fi'
-     */
-    lang?: string;
-    /**
-     * Allows to set threshold in px, when desktop style changes to mobile style
-     *
-     * @default 767
-     */
-    collapseSize?: number;
-    /**
-     * Allows to set maximum width of component
-     */
-    'max-width'?: number;
-    /**
-     * Defines how active item is determined relative to `currentUrl` property
-     *
-     * @default true
-     */
-    matchFullUrl?: boolean;
-    /**
-     * Allows to hide component in desktop mode
-     *
-     * @default false
-     */
-    mobileOnly?: boolean;
-    /**
-     * Allows to highlight component items
-     */
-    highlightIds?: string[];
-    /**
-     * Allows to set Secondary navigation background to white
-     *
-     * @default false
-     */
-    whiteBg?: boolean;
-    /**
-     * Allows to pass a custom className
-     */
-    className?: string;
-    /**
-     * Allows to pass testid string for testing purposes
-     */
-    'data-testid'?: string;
-}
-/**
- * @visibleName Secondary Navigation
- * @deprecated Use `PriorityNavigation` component
- */
-declare const SecondaryNavigation: ({ currentUrl, lang, nextJSSecondaryNavLink: NextJSSecondaryNavLink, collapseSize, "max-width": maxWidth, matchFullUrl, highlightIds, className, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
-/** @component */
-export default SecondaryNavigation;