@dnanpm/styleguide 3.12.3 → 4.0.0

package/build/es/components/SecondaryNavigation/SecondaryNavigation.js

@@ -1,199 +0,0 @@
-import { __rest } from 'tslib';
-import { ChevronDown, Check } from '@dnanpm/icons';
-import React__default, { useState, useRef } from 'react';
-import useOutsideClick from '../../hooks/useOutsideClick.js';
-import { styled } from 'styled-components';
-import theme from '../../themes/theme.js';
-import { media, getMultipliedSize } from '../../utils/styledUtils.js';
-import Icon from '../Icon/Icon.js';
-
-const SecondaryNavigationWrapper = styled.nav `
-    font-size: ${theme.fontSize.default};
-    padding: 0;
-    background-color: ${({ $whiteBg }) => $whiteBg ? theme.color.background.white.default : 'transparent'};
-
-    ${({ $mobileOnly }) => media.sm `
-        display: ${$mobileOnly ? 'none' : 'inherit'};
-    `};
-
-    @media (min-width: ${({ $collapseSize }) => $collapseSize + 1}px) {
-        border-bottom: 1px solid ${theme.color.line.L03};
-    }
-`;
-const MobileSelector = styled.button `
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    line-height: ${theme.lineHeight.default};
-    color: ${theme.color.text.pink};
-    padding: 1rem ${getMultipliedSize(theme.base.baseWidth, 2)};
-    background: transparent;
-    border: 0;
-    border-bottom: 1px solid ${theme.color.default.pink};
-    width: 100%;
-    font-size: ${theme.fontSize.default};
-
-    &:hover {
-        cursor: pointer;
-    }
-
-    @media (min-width: ${({ $collapseSize }) => $collapseSize + 1}px) {
-        display: none;
-    }
-`;
-const MobileSelectorTitleWrapper = styled.div `
-    display: flex;
-`;
-const MobileSelectorArrow = styled.span `
-    display: flex;
-
-    .dnasg-icon svg {
-        transition: transform 0.15s ease-in-out;
-        transform: rotate(${({ $isOpen }) => ($isOpen ? '180deg' : '0deg')});
-    }
-`;
-const MobileSelectorCheck = styled.span `
-    margin-left: auto;
-
-    .dnasg-icon {
-        @media (min-width: ${({ $collapseSize }) => $collapseSize + 1}px) {
-            display: none;
-        }
-    }
-`;
-const SecondaryNavigationList = styled.ul `
-    padding: 0;
-    list-style-type: none;
-    margin: 0;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    transition:
-        max-height 0.2s ease-in-out,
-        border-bottom 0.2s linear;
-    background-color: ${({ $isOpen }) => $isOpen ? theme.color.background.white.default : 'transparent'};
-    max-height: ${({ $isOpen }) => ($isOpen ? '500vh' : '0')};
-    border-bottom: ${({ $isOpen }) => ($isOpen ? `1px solid ${theme.color.line.L03}` : 'none')};
-
-    @media (min-width: ${({ $collapseSize }) => $collapseSize + 1}px) {
-        padding: 0 ${getMultipliedSize(theme.base.baseWidth, 2)};
-        max-height: none;
-        position: static;
-        flex-direction: row;
-        overflow: auto;
-        height: auto;
-        border-bottom: none;
-        max-width: ${({ 'max-width': maxWidth }) => (maxWidth ? `${maxWidth}px` : 'none')};
-    }
-`;
-const SecondaryNavigationListElement = styled.li `
-    margin: 0 ${getMultipliedSize(theme.base.baseWidth, 2)};
-
-    a {
-        text-decoration: none;
-        padding: 1rem 0;
-        justify-content: start;
-        color: ${({ $isActive }) => ($isActive ? theme.color.text.pink : theme.color.text.black)};
-        font-weight: ${({ $isActive }) => $isActive ? theme.fontWeight.bold : theme.fontWeight.book};
-        display: flex;
-        align-items: center;
-
-        &:hover {
-            color: ${theme.color.text.pink};
-            text-decoration: none;
-            cursor: ${({ $isActive }) => ($isActive ? 'auto' : 'pointer')};
-        }
-
-        @media (min-width: ${({ $collapseSize }) => $collapseSize + 1}px) {
-            padding: ${getMultipliedSize(theme.base.baseHeight, 1.5)} 0;
-            font-weight: ${theme.fontWeight.book};
-        }
-    }
-
-    @media (min-width: ${({ $collapseSize }) => $collapseSize + 1}px) {
-        margin: 0 ${getMultipliedSize(theme.base.baseWidth, 1.5)};
-        white-space: nowrap;
-        transition: border-bottom 0.2s linear;
-        border-bottom: ${({ $isActive }) => $isActive ? `1px solid ${theme.color.default.pink}` : 'none'};
-
-        &:first-of-type {
-            margin-left: 0;
-        }
-    }
-`;
-const IconWrapper = styled.span `
-    position: relative;
-    display: flex;
-    margin-right: ${getMultipliedSize(theme.base.baseWidth, 1)};
-
-    &:after {
-        display: ${({ $showNotification }) => ($showNotification ? 'inline' : 'none')};
-        content: '';
-        position: absolute;
-        border-radius: ${theme.radius.circle};
-        width: ${getMultipliedSize(theme.base.baseWidth, 1)};
-        height: ${getMultipliedSize(theme.base.baseHeight, 1)};
-        right: -${getMultipliedSize(theme.base.baseWidth, 0.2)};
-        top: -${getMultipliedSize(theme.base.baseHeight, 0.2)};
-        border: 1px solid ${theme.color.default.white};
-        background-color: ${theme.color.default.pink};
-    }
-
-    @media (min-width: ${({ $collapseSize }) => $collapseSize + 1}px) {
-        display: none;
-    }
-`;
-/**
- * @visibleName Secondary Navigation
- * @deprecated Use `PriorityNavigation` component
- */
-const SecondaryNavigation = (_a) => {
-    var _b, _c, _d, _e;
-    var { currentUrl = '', lang = 'fi', nextJSSecondaryNavLink: NextJSSecondaryNavLink, collapseSize = 767, 'max-width': maxWidth, matchFullUrl = true, highlightIds = [], className, 'data-testid': dataTestId } = _a, props = __rest(_a, ["currentUrl", "lang", "nextJSSecondaryNavLink", "collapseSize", 'max-width', "matchFullUrl", "highlightIds", "className", 'data-testid']);
-    const [isSecondaryNavOpen, setIsSecondaryNavOpen] = useState(false);
-    const toggleNav = () => {
-        setIsSecondaryNavOpen(!isSecondaryNavOpen);
-    };
-    const closeNav = () => {
-        if (isSecondaryNavOpen) {
-            setIsSecondaryNavOpen(false);
-        }
-    };
-    const ref = useRef(null);
-    useOutsideClick(ref, () => {
-        if (isSecondaryNavOpen) {
-            setIsSecondaryNavOpen(false);
-        }
-    });
-    const selectedElement = (_b = props.data.pages) === null || _b === void 0 ? void 0 : _b.find(listElement => currentUrl === listElement.urls[lang]);
-    const shouldHighlightSelectedElement = (_c = (selectedElement && highlightIds.some(el => el === selectedElement.id))) !== null && _c !== void 0 ? _c : false;
-    const checkIsMenuItemLinkAbsolute = (menuItemLink) => menuItemLink.includes('http');
-    return (React__default.createElement(SecondaryNavigationWrapper, { ref: ref, "data-testid": dataTestId, className: className, "$collapseSize": collapseSize, "$mobileOnly": props.mobileOnly, "$whiteBg": props.whiteBg },
-        selectedElement && (React__default.createElement(MobileSelector, { onClick: toggleNav, "$collapseSize": collapseSize, "data-testid": "secondary-navigation-dropdown-selector" },
-            React__default.createElement(MobileSelectorTitleWrapper, null,
-                (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.icon) && (React__default.createElement(IconWrapper, { "$showNotification": shouldHighlightSelectedElement, "$collapseSize": collapseSize },
-                    React__default.createElement(Icon, { name: selectedElement.icon }))),
-                React__default.createElement("span", null, selectedElement.titles[lang])),
-            React__default.createElement(MobileSelectorArrow, { "$isOpen": isSecondaryNavOpen },
-                React__default.createElement(Icon, { icon: ChevronDown })))),
-        React__default.createElement(SecondaryNavigationList, { id: props.data.name ||
-                `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) => {
-            const linkUrl = listElement.urls[lang];
-            const linkTitle = listElement.titles[lang];
-            const iconName = listElement.icon || '';
-            const isActive = matchFullUrl
-                ? currentUrl === linkUrl
-                : currentUrl.indexOf(linkUrl) > -1;
-            const showNotification = highlightIds.some(el => el === listElement.id);
-            const isMenuItemLinkAbsolute = checkIsMenuItemLinkAbsolute(linkUrl);
-            return (React__default.createElement(SecondaryNavigationListElement, { key: listElement.id, onClick: closeNav, "$isActive": isActive, "$collapseSize": collapseSize }, NextJSSecondaryNavLink && !isMenuItemLinkAbsolute ? (React__default.createElement(NextJSSecondaryNavLink, { linkUrl: linkUrl, linkTitle: linkTitle, iconName: iconName, showNotification: showNotification, collapseSize: collapseSize, "data-testid": `secondary-nav-item-link-${index + 1}` }, isActive && (React__default.createElement(MobileSelectorCheck, { "$collapseSize": collapseSize },
-                React__default.createElement(Icon, { icon: Check }))))) : (React__default.createElement("a", { href: linkUrl, "data-testid": `secondary-nav-item-link-${index + 1}` },
-                iconName && (React__default.createElement(IconWrapper, { "$showNotification": showNotification, "$collapseSize": collapseSize },
-                    React__default.createElement(Icon, { name: iconName }))),
-                React__default.createElement("span", null, linkTitle),
-                isActive && (React__default.createElement(MobileSelectorCheck, { "$collapseSize": collapseSize },
-                    React__default.createElement(Icon, { icon: Check })))))));
-        }))));
-};
-
-export { SecondaryNavigation as default };

package/build/es/components/TooltipMenu/ChildComponents/TooltipMenuExportedStyles.d.ts

@@ -1,10 +0,0 @@
-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>, {
-    tooltipTop: string;
-    zIndex: string;
-    arrowPosition: string;
-}>> & string;
-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>, {
-    tooltipTop: string;
-    zIndex: string;
-    arrowPosition: string;
-}>> & string;

package/build/es/components/TooltipMenu/ChildComponents/TooltipMenuExportedStyles.js

@@ -1,31 +0,0 @@
-import { styled } from 'styled-components';
-import theme from '../../../themes/theme.js';
-
-// Tooltip corner tail
-const Tail = styled.div `
-    position: absolute;
-    width: 0;
-    height: 0;
-    right: ${p => p.arrowPosition};
-    margin-top: -17.5px;
-    top: ${p => p.tooltipTop};
-    z-index: ${p => Number(p.zIndex) + 1};
-    border: 10px solid transparent;
-    border-right-color: white;
-    transform: rotate(90deg);
-`;
-// Box shadow of the tooltip tail
-const TailShadow = styled.div `
-    position: absolute;
-    width: 0.25rem;
-    height: 0.25rem;
-    margin-top: -5px;
-    margin-right: 8.5px;
-    top: ${p => p.tooltipTop};
-    z-index: ${p => Number(p.zIndex) + 1};
-    right: ${p => p.arrowPosition};
-    background-color: transparent;
-    box-shadow: 0 0 5px 0 ${theme.color.default.black};
-`;
-
-export { Tail, TailShadow };

package/build/es/components/TooltipMenu/TooltipMenu.d.ts

@@ -1,45 +0,0 @@
-import type { ReactNode } from 'react';
-import React from 'react';
-import type { Props as IconProps } from '../Icon/Icon';
-export interface TooltipMenuProps {
-    /** Text selector */
-    selector: string;
-    /** Allows to pass a custom className */
-    className?: string;
-    /** Tooltip menu content */
-    children: ReactNode;
-    /** Text selector color.Default: #121212 */
-    color?: string;
-    /** Text selector active color. Default: #121212 */
-    activeColor?: string;
-    /** Size of chevron icon. Default: 1.5rem  */
-    iconSize?: string;
-    /** Overlap other elements */
-    zIndex?: string;
-    /** Tooltip position from top. Default: 2rem */
-    tooltipTop?: string;
-    /** Tooltip position from right. Default: 1.25rem */
-    tooltipRight?: string;
-    /**
-     * Tooltip icon for selector. Default: ''
-     *
-     * @deprecated Use property `tooltipIcon`
-     */
-    tooltipIconName?: string;
-    /**
-     * Tooltip icon for selector
-     */
-    tooltipIcon?: IconProps['icon'];
-    /** Tooltip icon size for selector. Default: '1.5rem' */
-    tooltipIconSize?: string;
-    /** Show hide animated chevron. Default: '' */
-    tooltipChevron?: boolean;
-    /** Arrow position if needed some adjust. Defaul: -0.25rem. */
-    arrowPosition?: string;
-}
-/**
- * @visibleName Tooltip Menu
- * @deprecated Use `Tooltip` component
- */
-declare const TooltipMenu: ({ selector, className, color, children, iconSize, zIndex, tooltipTop, tooltipRight, activeColor, tooltipIconName, tooltipIcon, tooltipIconSize, tooltipChevron, arrowPosition, }: TooltipMenuProps) => React.JSX.Element;
-export default TooltipMenu;

package/build/es/components/TooltipMenu/TooltipMenu.js

@@ -1,68 +0,0 @@
-import { ChevronDown } from '@dnanpm/icons';
-import React__default, { useState, useRef } from 'react';
-import useOutsideClick from '../../hooks/useOutsideClick.js';
-import { styled } from 'styled-components';
-import theme from '../../themes/theme.js';
-import Icon from '../Icon/Icon.js';
-import { TailShadow, Tail } from './ChildComponents/TooltipMenuExportedStyles.js';
-
-const Selector = styled.div `
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    color: ${p => p.color || theme.color.text.white};
-    cursor: pointer;
-
-    span + span.dnasg-icon > svg {
-        transform: ${p => (p.showDropdown ? 'rotate(180deg)' : 'rotate(0deg)')};
-        transition: transform 0.15s linear;
-    }
-`;
-const Container = styled.div `
-    position: relative;
-`;
-const Tooltip = styled.div `
-    background-color: ${theme.color.background.white.default};
-    padding: 0.5rem;
-    min-height: 3rem;
-    min-width: 4rem;
-    position: absolute;
-    right: ${p => p.tooltipRight};
-    top: ${p => p.tooltipTop};
-    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.48);
-    z-index: ${p => p.zIndex};
-`;
-const ChildrenWrapper = styled.span `
-    > * {
-        white-space: nowrap;
-    }
-`;
-/**
- * @visibleName Tooltip Menu
- * @deprecated Use `Tooltip` component
- */
-const TooltipMenu = ({ selector, className, color = theme.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', }) => {
-    const [showDropdown, setShowDropdown] = useState(false);
-    const ref = useRef(null);
-    const toggleState = () => {
-        setShowDropdown(!showDropdown);
-    };
-    useOutsideClick(ref, () => {
-        if (showDropdown) {
-            setShowDropdown(false);
-        }
-    });
-    return (React__default.createElement(Container, { className: className, ref: ref },
-        React__default.createElement(Selector, { color: showDropdown ? activeColor : color, onClick: toggleState, showDropdown: showDropdown },
-            tooltipIcon && React__default.createElement(Icon, { icon: tooltipIcon, size: tooltipIconSize, position: "left" }),
-            tooltipIconName && (React__default.createElement(Icon, { name: tooltipIconName, size: tooltipIconSize, position: "left" })),
-            React__default.createElement("span", null, selector),
-            tooltipChevron && React__default.createElement(Icon, { icon: ChevronDown, size: iconSize, position: "right" })),
-        showDropdown && (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(TailShadow, { zIndex: zIndex, tooltipTop: tooltipTop, arrowPosition: arrowPosition }),
-            React__default.createElement(Tail, { zIndex: zIndex, tooltipTop: tooltipTop, arrowPosition: arrowPosition }))),
-        showDropdown && (React__default.createElement(Tooltip, { zIndex: zIndex, tooltipTop: tooltipTop, tooltipRight: tooltipRight },
-            React__default.createElement(ChildrenWrapper, null, children)))));
-};
-
-export { TooltipMenu as default };