@dnanpm/styleguide 2.2.3 → 3.0.0

package/build/cjs/components/ReadMore/ReadMore.js

@@ -14,14 +14,14 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const TruncateContainer = styled['default'].div `
+const TruncateContainer = styled["default"].div `
     position: relative;
     padding-bottom: ${p => styledUtils.getMultipliedSize(p.theme.base.baseHeight, 4)};
     overflow: hidden;
     transition: ${props => (props.expanded ? 1.5 : 0.3)}s;
     max-height: ${props => (props.expanded ? 'auto' : '10rem')};
 `;
-const Toggle = styled['default'].div `
+const Toggle = styled["default"].div `
     position: absolute;
     bottom: 0;
     left: 0;
@@ -38,7 +38,7 @@ const Toggle = styled['default'].div `
         cursor: pointer;
         background-color: transparent;
         border: 0;
-        color: ${p => p.theme.color.hotPink};
+        color: ${p => p.theme.color.text.pink};
         :focus {
             outline: none;
             text-decoration: underline;
@@ -57,14 +57,14 @@ const ReadMore = ({ children, showMoreText, showLessText, className, onClick = (
         setExpanded(!expanded);
         onClick(event);
     };
-    const icon = expanded ? hlChevronUp['default'] : hlChevronDown['default'];
+    const icon = expanded ? hlChevronUp["default"] : hlChevronDown["default"];
     const buttonText = expanded ? showLessText : showMoreText;
-    return (React__default['default'].createElement(TruncateContainer, { expanded: expanded, className: className },
+    return (React__default["default"].createElement(TruncateContainer, { expanded: expanded, className: className },
         children,
-        React__default['default'].createElement(Toggle, { expanded: expanded },
-            React__default['default'].createElement("button", { className: "dnasg-label", onClick: toggleTruncate, type: "button" },
-                React__default['default'].createElement(Icon['default'], { icon: icon, size: "1rem", position: "left" }),
+        React__default["default"].createElement(Toggle, { expanded: expanded },
+            React__default["default"].createElement("button", { className: "dnasg-label", onClick: toggleTruncate, type: "button" },
+                React__default["default"].createElement(Icon["default"], { icon: icon, size: "1rem", position: "left" }),
                 buttonText))));
 };
 
-exports.default = ReadMore;
+exports["default"] = ReadMore;

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

@@ -1,74 +1,58 @@
 import React from 'react';
-import type { Props as IconProps } from '../Icon/Icon';
-export interface SearchProps {
+export interface Props {
     /**
-     * The input element's name
-     * Submitted with the form as part of a name/value pair
+     * Unique ID for the search input element
      */
-    name: string;
+    id?: string;
     /**
-     * The input element unique identifier
-     * Must be unique in the whole document
+     *  Name of the search input element
      */
-    id?: string;
+    name: string;
     /**
-     * The input element's value
-     * When specified, it represents the initial value unless `isReactive` property is defined. See `isReactive` property for more info
-     *
-     * @deprecated State management of input value is deprecated and will be removed. Use `isReactive={true}` during transition period
+     * Default value of search input element
      */
     value?: string;
     /**
-     * Provides a brief information as to what kind of value is expected in the field
+     * Text of placeholder for the search input value
      */
     placeholder?: string;
     /**
-     * If defined, input element will automatically have focus when the page has finished loading
-     * In cases when more than one element in the document has the autofocus attribute defined,
-     * only first one receives focus
+     * On search input change callback
      */
-    autoFocus?: boolean;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     /**
-     * Icon from Icons component shown next to input element
-     *
-     * @default 'hlMagnifyingGlass'
-     * @deprecated Use property `icon`
+     * On search input blur callback
      */
-    iconName?: string;
+    onBlur?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     /**
-     * Icon from Icons component shown next to input element
-     *
-     * @default hlMagnifyingGlass
+     * On search input focus callback
      */
-    icon?: IconProps['icon'];
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
     /**
-     * Size of the icon shown next to input element
-     *
-     * @default '1.5rem'
+     * On search input key press callback
      */
-    iconSize?: string;
+    onKeyPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     /**
-     * Allows to pass a custom className
+     * On search input key down callback
      */
-    className?: string;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     /**
-     * On input element change callback
+     * On icon click callback
      */
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onIconClick?: (e: React.MouseEvent<Element, MouseEvent>) => void;
     /**
-     * On icon element click callback
+     * Allow to set search input element focus on page load
      */
-    onClick?: (e: React.MouseEvent<Element, MouseEvent>) => void;
+    autoFocus?: boolean;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
     /**
-     * If true, internal input value state management is ignored, thus making the component "stateless".
-     * Input value can then be controlled from outside by using the handler functions.
-     *
-     * This is a temporary flag that will be removed in the future versions
-     *
-     * @default false
+     * Allows to pass testid string for testing purposes
      */
-    isReactive?: boolean;
+    'data-testid'?: string;
 }
-declare const Search: React.FunctionComponent<SearchProps>;
+declare const Search: ({ "data-testid": dataTestId, ...props }: Props) => JSX.Element;
 /** @component */
 export default Search;

package/build/cjs/components/Search/Search.js

@@ -5,8 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var styled = require('../../themes/styled.js');
-var colors = require('../../themes/themeComponents/colors.js');
-var Icon = require('../Icon/Icon.js');
+var theme = require('../../themes/theme.js');
+var styledUtils = require('../../utils/styledUtils.js');
+var ButtonIcon = require('../Button/ButtonIcon.js');
 var hlMagnifyingGlass = require('../Icons/hlMagnifyingGlass.js');
 var hlX = require('../Icons/hlX.js');
 
@@ -14,32 +15,45 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const Container = styled['default'].div `
+const Container = styled["default"].div `
     display: flex;
     align-items: center;
-    border-bottom: 2px solid ${props => props.theme.color.hotPink};
-    padding: 0.3125rem 0.3125rem 0.6875rem;
+    border-bottom: 2px solid ${theme["default"].color.default.pink};
 
-    span.dnasg-icon > svg {
+    span.dnasg-icon {
         cursor: pointer;
     }
 `;
-const Input = styled['default'].input `
-    flex: 1 0 auto;
+const Input = styled["default"].input `
+    display: inline-block;
+    appearance: none;
     border: 0;
-    font-size: ${props => props.theme.fontSize.default};
-    line-height: ${props => props.theme.lineHeight.default};
-    color: ${props => props.theme.color.text};
-    -webkit-appearance: none;
-    &:placeholder {
-        color: ${props => props.theme.color.gray25};
-    }
+    vertical-align: middle;
+    font-family: ${theme["default"].fontFamily.default};
+    font-size: ${theme["default"].fontSize.default};
+    line-height: ${theme["default"].lineHeight.default};
+    color: ${theme["default"].color.text.black};
+    background-color: transparent;
+    padding: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
+    width: 100%;
+    height: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 4)};
+
     &:focus {
         outline: 0;
     }
+
+    &:invalid {
+        box-shadow: none;
+    }
+
+    &::placeholder {
+        color: ${theme["default"].color.text.black}${theme["default"].color.transparency.T40};
+    }
+
     &::-ms-clear {
         display: none;
     }
+
     &::-webkit-search-decoration,
     &::-webkit-search-cancel-button,
     &::-webkit-search-results-button,
@@ -47,40 +61,24 @@ const Input = styled['default'].input `
         display: none;
     }
 `;
+const Button = styled["default"](ButtonIcon["default"]) `
+    margin: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
+`;
 const Search = (_a) => {
-    var { value = '', iconName, icon = hlMagnifyingGlass['default'], iconSize = '1.5rem', className, onChange, onClick, isReactive = false } = _a, props = tslib.__rest(_a, ["value", "iconName", "icon", "iconSize", "className", "onChange", "onClick", "isReactive"]);
-    const [text, setText] = React.useState(value);
-    const inputRef = React__default['default'].useRef(null);
-    const handleChange = (e) => {
-        if (!isReactive) {
-            setText(e.target.value);
-        }
-        if (onChange) {
-            onChange(e);
-        }
-    };
-    const onIconClick = (e) => {
-        if (!isReactive) {
-            setText('');
-        }
+    var _b;
+    var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
+    const inputRef = React__default["default"].useRef(null);
+    const handleIconClick = (e) => {
         if (inputRef && inputRef.current) {
             inputRef.current.focus();
         }
-        if (onClick) {
-            onClick(e);
-        }
-    };
-    // TODO: Remove once https://jira.dna.fi/browse/STYLE-334 is done
-    const renderIcon = () => {
-        const inputValue = isReactive ? value : text;
-        if (iconName) {
-            return (React__default['default'].createElement(Icon['default'], { name: inputValue.length ? 'hlX' : iconName, size: iconSize, color: colors['default'].hotPink, onClick: onIconClick }));
+        if (props.onIconClick) {
+            props.onIconClick(e);
         }
-        return (React__default['default'].createElement(Icon['default'], { icon: inputValue.length ? hlX['default'] : icon, size: iconSize, color: colors['default'].hotPink, onClick: onIconClick }));
     };
-    return (React__default['default'].createElement(Container, { className: className },
-        React__default['default'].createElement(Input, { id: props.id, name: props.name, type: "search", value: isReactive ? value : text, onChange: handleChange, ref: inputRef, placeholder: props.placeholder, autoFocus: props.autoFocus }),
-        renderIcon()));
+    return (React__default["default"].createElement(Container, { className: props.className, "data-testid": dataTestId },
+        React__default["default"].createElement(Input, { id: props.id, name: props.name, type: "search", ref: inputRef, value: props.value, onChange: props.onChange, onBlur: props.onBlur, onFocus: props.onFocus, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, placeholder: props.placeholder, autoFocus: props.autoFocus }),
+        React__default["default"].createElement(Button, { icon: ((_b = props.value) === null || _b === void 0 ? void 0 : _b.length) ? hlX["default"] : hlMagnifyingGlass["default"], name: `${props.name}-button`, onClick: handleIconClick })));
 };
 
-exports.default = Search;
+exports["default"] = Search;

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

@@ -1,29 +1,69 @@
 /// <reference types="react" />
-export interface SNDataProps {
+interface SNDataProps {
     name?: string;
     categoryId?: string;
     pages?: object[] | null;
 }
-interface SecondaryNavigationProps {
+interface Props {
+    /**
+     * Url is given to component as a prop to highlight active secondary nav link
+     */
     currentUrl: string;
+    /**
+     * data in JSON format matching the structure of 3rd level main navigation
+     */
     data: SNDataProps;
+    /** Add lang string if secondary nav is in multiple languages.
+     *
+     * @default 'fi'
+     */
     lang: string;
+    /**
+     * pass nextJS component for enabling nextJS routing
+     */
     nextJSSecondaryNavLink?: any;
+    /**
+     * width in pixels where navigation collapses to a dropdown
+     *
+     * @default 767
+     */
     collapseSize?: number;
-    /** Allows to pass a custom className */
+    /**
+     * Allows to pass a custom className
+     */
     className?: string;
-    /** data-testid added for container if given. default undefined. */
+    /**
+     * data-testid added for container if given. default undefined.
+     */
     'data-testid'?: string;
-    /** Allows to set max width in rems. Default none. */
+    /**
+     * Allows to set max width in rems. Default none.
+     */
     'max-width'?: number;
-    /** Allows to set links active with partial or full match. Default true. */
+    /**
+     * Allows to set links active with partial or full match.
+     *
+     * @default 'true'
+     */
     matchFullUrl?: boolean;
-    /** Show only on mobile (<767px) default: false */
+    /**
+     * Show only on mobile (<767px)
+     *
+     * @default 'false'
+     */
     mobileOnly?: boolean;
-    /** Highlighted ids */
+    /**
+     * Highlighted ids
+     */
     highlightIds?: string[];
+    /**
+     * Allows to set Secondary navigation background to white.
+     *
+     * @default 'false'
+     */
+    whiteBg?: boolean;
 }
 /** @visibleName Secondary Navigation */
-declare const SecondaryNavigation: ({ currentUrl, data, lang, nextJSSecondaryNavLink: NextJSSecondaryNavLink, collapseSize, "data-testid": dataTestId, "max-width": componentMaxWidth, className, matchFullUrl, mobileOnly, highlightIds, }: SecondaryNavigationProps) => JSX.Element;
+declare const SecondaryNavigation: ({ currentUrl, data, lang, nextJSSecondaryNavLink: NextJSSecondaryNavLink, collapseSize, "data-testid": dataTestId, "max-width": componentMaxWidth, className, matchFullUrl, mobileOnly, highlightIds, whiteBg, }: Props) => JSX.Element;
 /** @component */
 export default SecondaryNavigation;

package/build/cjs/components/SecondaryNavigation/SecondaryNavigation.js

@@ -16,30 +16,29 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const SecondaryNavigationWrapper = styled['default'].nav `
-    font-size: ${theme['default'].fontSize.s};
+const SecondaryNavigationWrapper = styled["default"].nav `
+    font-size: ${theme["default"].fontSize.default};
     padding: 0;
-    background: ${theme['default'].color.white};
-    position: relative;
-    z-index: 1000;
+    background-color: ${p => (p.whiteBg ? theme["default"].color.background.white.default : 'transparent')};
     ${p => styledUtils.media.md `
         display: ${p.mobileOnly ? 'none' : 'inherit'};
     `};
     @media (min-width: ${p => p.collapseSize + 1}px) {
-        border-bottom: 2px solid ${theme['default'].color.gray15};
+        border-bottom: 1px solid ${theme["default"].color.line.L03};
     }
 `;
-const MobileSelector = styled['default'].div `
+const MobileSelector = styled["default"].button `
     display: flex;
     align-items: center;
     justify-content: space-between;
-    font-size: ${theme['default'].fontSize.default};
-    line-height: ${theme['default'].lineHeight.default};
-    color: ${theme['default'].color.hotPink};
-    padding: 1rem 1.25rem;
-    position: relative;
-    border-bottom: 1px solid ${theme['default'].color.hotPink};
+    line-height: ${theme["default"].lineHeight.default};
+    color: ${theme["default"].color.text.pink};
+    padding: 1rem ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2)};
+    background: transparent;
+    border: 0;
+    border-bottom: 1px solid ${theme["default"].color.default.pink};
     width: 100%;
+    font-size: ${theme["default"].fontSize.default};
     &:hover {
         cursor: pointer;
     }
@@ -47,10 +46,10 @@ const MobileSelector = styled['default'].div `
         display: none;
     }
 `;
-const MobileSelectorTitleWrapper = styled['default'].div `
+const MobileSelectorTitleWrapper = styled["default"].div `
     display: flex;
 `;
-const MobileSelectorArrow = styled['default'].span `
+const MobileSelectorArrow = styled["default"].span `
     display: flex;
 
     .dnasg-icon svg {
@@ -58,18 +57,16 @@ const MobileSelectorArrow = styled['default'].span `
         transform: rotate(${p => (p.isOpen ? '180deg' : '0deg')});
     }
 `;
-const MobileSelectorCheck = styled['default'].span `
-    .dnasg-icon {
-        position: absolute;
-        right: 0;
-        bottom: 1rem;
-    }
+const MobileSelectorCheck = styled["default"].span `
+    margin-left: auto;
 
-    @media (min-width: ${p => p.collapseSize + 1}px) {
-        display: none;
+    .dnasg-icon {
+        @media (min-width: ${p => p.collapseSize + 1}px) {
+            display: none;
+        }
     }
 `;
-const SecondaryNavigationList = styled['default'].ul `
+const SecondaryNavigationList = styled["default"].ul `
     padding: 0;
     list-style-type: none;
     margin: 0;
@@ -77,13 +74,11 @@ const SecondaryNavigationList = styled['default'].ul `
     display: flex;
     flex-direction: column;
     transition: max-height 0.2s ease-in-out, border-bottom 0.2s linear;
-    background: ${theme['default'].color.white};
-    position: absolute;
-    width: 100%;
+    background-color: ${p => (p.isOpen ? theme["default"].color.background.white.default : 'transparent')};
     max-height: ${p => (p.isOpen ? '500vh' : '0')};
-    border-bottom: ${p => p.isOpen ? `2px solid ${theme['default'].color.gray10}` : `0px solid ${theme['default'].color.white}`};
+    border-bottom: ${p => (p.isOpen ? `1px solid ${theme["default"].color.line.L03}` : 'none')};
     @media (min-width: ${p => p.collapseSize + 1}px) {
-        padding: 0 1rem;
+        padding: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2)};
         max-height: none;
         position: static;
         flex-direction: row;
@@ -91,54 +86,44 @@ const SecondaryNavigationList = styled['default'].ul `
         height: auto;
         border-bottom: none;
         max-width: ${p => (p.componentMaxWidth ? `${p.componentMaxWidth}px` : 'none')};
-        margin: 0 auto;
     }
 `;
-const SecondaryNavigationListElement = styled['default'].li `
-    margin: 0 1.25rem;
+const SecondaryNavigationListElement = styled["default"].li `
+    margin: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2)};
     @media (min-width: ${p => p.collapseSize + 1}px) {
-        margin: 0 0.625rem;
+        margin: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1.5)};
         &:first-of-type {
             margin-left: 0;
         }
         white-space: nowrap;
         transition: border-bottom 0.2s linear;
-        border-bottom: ${p => p.isActive ? `2px solid ${theme['default'].color.hotPink}` : `0px solid ${theme['default'].color.white}`};
+        border-bottom: ${p => (p.isActive ? `1px solid ${theme["default"].color.default.pink}` : 'none')};
     }
-    ${p => styledUtils.media.xl `
-        font-size: ${p.theme.fontSize.default};
-        margin: 0 1rem;
-        &:first-of-type {
-            margin-left: 0;
-        }
-    `};
 
     a {
         padding: 1rem 0;
         justify-content: start;
-        color: ${p => (p.isActive ? theme['default'].color.hotPink : theme['default'].color.black)};
+        color: ${p => (p.isActive ? theme["default"].color.text.pink : theme["default"].color.text.black)};
+        font-weight: ${p => (p.isActive ? theme["default"].fontWeight.bold : theme["default"].fontWeight.book)};
         display: flex;
-        position: relative;
         align-items: center;
-        svg + span {
-            margin-left: 1rem;
-        }
+
         &:hover {
             cursor: ${p => (p.isActive ? 'auto' : 'pointer')};
             text-decoration: none;
-            color: ${theme['default'].color.hotPink};
+            color: ${theme["default"].color.text.pink};
         }
+
         @media (min-width: ${p => p.collapseSize + 1}px) {
-            svg + span {
-                margin-left: 0;
-            }
+            padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.5)} 0;
+            font-weight: ${theme["default"].fontWeight.book};
         }
     }
 `;
-const IconWrapper = styled['default'].span `
+const IconWrapper = styled["default"].span `
     position: relative;
     display: flex;
-    margin-right: 0.75rem;
+    margin-right: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
     @media (min-width: ${p => p.collapseSize + 1}px) {
         display: none;
     }
@@ -146,18 +131,19 @@ const IconWrapper = styled['default'].span `
         display: ${p => (p.showNotification ? 'inline' : 'none')};
         content: '';
         position: absolute;
-        border-radius: 0.75rem;
-        width: 0.625rem;
-        height: 0.625rem;
-        right: -0.125rem;
-        top: -0.125rem;
-        border: 2px solid ${p => p.theme.color.white};
-        background: ${p => p.theme.color.hotPink};
+        border-radius: ${theme["default"].radius.circle};
+        width: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
+        height: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1)};
+        right: -${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 0.2)};
+        top: -${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.2)};
+        border: 1px solid ${theme["default"].color.default.white};
+        background-color: ${theme["default"].color.default.pink};
     }
 `;
 const isMenuItemLinkAbsolute = (menuItemLink) => menuItemLink.includes('http');
 /** @visibleName Secondary Navigation */
-const SecondaryNavigation = ({ currentUrl = '', data, lang = 'fi', nextJSSecondaryNavLink: NextJSSecondaryNavLink = false, collapseSize = 767, 'data-testid': dataTestId, 'max-width': componentMaxWidth, className, matchFullUrl = true, mobileOnly = false, highlightIds = [], }) => {
+const SecondaryNavigation = ({ currentUrl = '', data, lang = 'fi', nextJSSecondaryNavLink: NextJSSecondaryNavLink = false, collapseSize = 767, 'data-testid': dataTestId, 'max-width': componentMaxWidth, className, matchFullUrl = true, mobileOnly = false, highlightIds = [], whiteBg = false, }) => {
+    var _a;
     const [isSecondaryNavOpen, setIsSecondaryNavOpen] = React.useState(false);
     const toggleNav = () => {
         setIsSecondaryNavOpen(!isSecondaryNavOpen);
@@ -168,7 +154,7 @@ const SecondaryNavigation = ({ currentUrl = '', data, lang = 'fi', nextJSSeconda
         }
     };
     const ref = React.useRef(null);
-    useOutsideClick['default'](ref, () => {
+    useOutsideClick["default"](ref, () => {
         if (isSecondaryNavOpen) {
             setIsSecondaryNavOpen(false);
         }
@@ -177,15 +163,15 @@ const SecondaryNavigation = ({ currentUrl = '', data, lang = 'fi', nextJSSeconda
         ? data.pages.find((listElement) => currentUrl === listElement.urls[lang])
         : undefined;
     const shouldHighlightSelectedElement = selectedElement && highlightIds.some((el) => el === selectedElement.id);
-    return (React__default['default'].createElement(SecondaryNavigationWrapper, { ref: ref, collapseSize: collapseSize, "data-testid": dataTestId, className: className, mobileOnly: mobileOnly },
-        selectedElement && (React__default['default'].createElement(MobileSelector, { onClick: toggleNav, collapseSize: collapseSize, "data-testid": "secondary-navigation-dropdown-selector" },
-            React__default['default'].createElement(MobileSelectorTitleWrapper, null,
-                selectedElement.icon && selectedElement.icon.length > 0 && (React__default['default'].createElement(IconWrapper, { showNotification: shouldHighlightSelectedElement, collapseSize: collapseSize },
-                    React__default['default'].createElement(Icon['default'], { name: selectedElement.icon }))),
-                React__default['default'].createElement("span", null, selectedElement.titles[lang])),
-            React__default['default'].createElement(MobileSelectorArrow, { isOpen: isSecondaryNavOpen },
-                React__default['default'].createElement(Icon['default'], { icon: hlChevronDown['default'] })))),
-        React__default['default'].createElement(SecondaryNavigationList, { id: data.name || `secondary-navigation-category-${data.categoryId}`, isOpen: isSecondaryNavOpen, collapseSize: collapseSize, componentMaxWidth: componentMaxWidth, "data-testid": "secondary-nav-menu-ul" }, data.pages
+    return (React__default["default"].createElement(SecondaryNavigationWrapper, { ref: ref, collapseSize: collapseSize, "data-testid": dataTestId, className: className, mobileOnly: mobileOnly, whiteBg: whiteBg },
+        selectedElement && (React__default["default"].createElement(MobileSelector, { onClick: toggleNav, collapseSize: collapseSize, "data-testid": "secondary-navigation-dropdown-selector" },
+            React__default["default"].createElement(MobileSelectorTitleWrapper, null,
+                ((_a = selectedElement.icon) === null || _a === void 0 ? void 0 : _a.length) > 0 && (React__default["default"].createElement(IconWrapper, { showNotification: shouldHighlightSelectedElement, collapseSize: collapseSize },
+                    React__default["default"].createElement(Icon["default"], { name: selectedElement.icon }))),
+                React__default["default"].createElement("span", null, selectedElement.titles[lang])),
+            React__default["default"].createElement(MobileSelectorArrow, { isOpen: isSecondaryNavOpen },
+                React__default["default"].createElement(Icon["default"], { icon: hlChevronDown["default"] })))),
+        React__default["default"].createElement(SecondaryNavigationList, { id: data.name || `secondary-navigation-category-${data.categoryId}`, isOpen: isSecondaryNavOpen, collapseSize: collapseSize, componentMaxWidth: componentMaxWidth, "data-testid": "secondary-nav-menu-ul" }, data.pages
             ? data.pages.map((listElement, index) => {
                 const linkUrl = listElement.urls[lang];
                 const linkTitle = listElement.titles[lang];
@@ -195,17 +181,17 @@ const SecondaryNavigation = ({ currentUrl = '', data, lang = 'fi', nextJSSeconda
                     : currentUrl.indexOf(linkUrl) > -1;
                 const showNotification = highlightIds.some((el) => el === listElement.id);
                 const isNextJsLink = NextJSSecondaryNavLink && !isMenuItemLinkAbsolute(linkUrl);
-                return (React__default['default'].createElement(SecondaryNavigationListElement, { key: listElement.id, isActive: isActive, onClick: closeNav, collapseSize: collapseSize },
-                    isNextJsLink && (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 },
-                        React__default['default'].createElement(Icon['default'], { icon: hlCheck['default'] }))))),
-                    !isNextJsLink && (React__default['default'].createElement("a", { href: linkUrl, "data-testid": `secondary-nav-item-link-${index + 1}` },
-                        iconName.length > 0 && (React__default['default'].createElement(IconWrapper, { showNotification: showNotification, collapseSize: collapseSize },
-                            React__default['default'].createElement(Icon['default'], { name: iconName }))),
-                        React__default['default'].createElement("span", null, linkTitle),
-                        isActive && (React__default['default'].createElement(MobileSelectorCheck, { collapseSize: collapseSize },
-                            React__default['default'].createElement(Icon['default'], { icon: hlCheck['default'] })))))));
+                return (React__default["default"].createElement(SecondaryNavigationListElement, { key: listElement.id, isActive: isActive, onClick: closeNav, collapseSize: collapseSize },
+                    isNextJsLink && (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 },
+                        React__default["default"].createElement(Icon["default"], { icon: hlCheck["default"] }))))),
+                    !isNextJsLink && (React__default["default"].createElement("a", { href: linkUrl, "data-testid": `secondary-nav-item-link-${index + 1}` },
+                        iconName.length > 0 && (React__default["default"].createElement(IconWrapper, { showNotification: showNotification, collapseSize: collapseSize },
+                            React__default["default"].createElement(Icon["default"], { name: iconName }))),
+                        React__default["default"].createElement("span", null, linkTitle),
+                        isActive && (React__default["default"].createElement(MobileSelectorCheck, { collapseSize: collapseSize },
+                            React__default["default"].createElement(Icon["default"], { icon: hlCheck["default"] })))))));
             })
             : null)));
 };
 
-exports.default = SecondaryNavigation;
+exports["default"] = SecondaryNavigation;