@dnanpm/styleguide 1.7.0 → 1.9.0

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

@@ -6,6 +6,7 @@ import colors from '../../../themes/themeComponents/colors.js';
 import { mobileNavMaxHeight, ribbonHeight, desktopNavMaxHeight } from '../../../themes/themeComponents/navigation.js';
 import { media } from '../../../utils/styledUtils.js';
 import NavContext from '../context/NavContext.js';
+import { useDocHeight } from '../../../hooks/useDocHeight.js';
 
 const Selector = styled.div `
     color: ${p => (p.showDropdown ? p.activeColor : p.color)};
@@ -19,7 +20,7 @@ const Tooltip = styled.div `
     background-color: ${p => p.theme.color.white};
     min-height: 3rem;
     overflow-y: ${({ overflowY }) => (overflowY ? 'auto' : 'none')};
-    max-height: calc(100vh - ${mobileNavMaxHeight});
+    max-height: calc(var(--vh100, 100vh) - ${mobileNavMaxHeight});
     width: 100%;
     position: absolute;
     right: 0;
@@ -34,11 +35,11 @@ const Tooltip = styled.div `
         right: ${p => (p.fullWidthDesktop ? 0 : p.tooltipRight)};
     }
     ${media.md `
-        max-height: calc(100vh - (${mobileNavMaxHeight} + ${ribbonHeight}));
+        max-height: calc(var(--vh100, 100vh) - (${mobileNavMaxHeight} + ${ribbonHeight}));
         top: calc(${mobileNavMaxHeight} + ${ribbonHeight});
     `};
     @media (min-width: ${p => p.collapseSize + 1}px) {
-        max-height: calc(100vh - (${desktopNavMaxHeight} + ${ribbonHeight}));
+        max-height: calc(var(--vh100, 100vh) - (${desktopNavMaxHeight} + ${ribbonHeight}));
         top: calc(${desktopNavMaxHeight} + ${ribbonHeight});
     }
 `;
@@ -59,7 +60,7 @@ const TailShadowNav = styled.div `
         top: calc(${mobileNavMaxHeight} + ${ribbonHeight});
     `};
     @media (min-width: ${p => p.collapseSize + 1}px) {
-        max-height: calc(100vh - ${desktopNavMaxHeight});
+        max-height: calc(var(--vh100, 100vh) - ${desktopNavMaxHeight});
         top: calc(${desktopNavMaxHeight} + ${ribbonHeight});
     }
 `;
@@ -80,13 +81,14 @@ const TailNav = styled.div `
         top: calc(${mobileNavMaxHeight} + ${ribbonHeight});
     `};
     @media (min-width: ${p => p.collapseSize + 1}px) {
-        max-height: calc(100vh - ${desktopNavMaxHeight});
+        max-height: calc(var(--vh100, 100vh) - ${desktopNavMaxHeight});
         top: calc(${desktopNavMaxHeight} + ${ribbonHeight});
     }
 `;
 const MainNavTooltipMenu = ({ className, activeColor = colors.hotPink, color = colors.text, children, zIndex = '1', tooltipRight = '-1rem', contentWidth = '20rem', contentComponent: ContentComponent, closeWhenTagClicked = [], overflowY = true, globalStateString, fullWidthDesktop = false, fullWidthBreakpoint = breakpoints.xs, }) => {
     const { isMobileMenu, tooltipItems, setTooltipItems, collapseSize, resetMenuEvents, showMinicart, showLoginTooltip, } = React.useContext(NavContext);
     const ref = useRef(null);
+    useDocHeight();
     React.useEffect(() => {
         setTooltipItems({
             minicart: showMinicart,

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

@@ -1,12 +1,12 @@
 import React from 'react';
-import NavContext from '../context/NavContext.js';
-import MainNavTooltipMenu from './MainNavTooltipMenu.js';
-import { TooltipWrapper } from './MainNavTooltipMenuExportedStyles.js';
-import { NotificationBadge } from '../../NotificationBadge/index.js';
 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 breakpoints from '../../../themes/themeComponents/breakpoints.js';
+import { NotificationBadge } from '../../NotificationBadge/NotificationBadge.js';
+import NavContext from '../context/NavContext.js';
+import MainNavTooltipMenu from './MainNavTooltipMenu.js';
+import { TooltipWrapper } from './MainNavTooltipMenuExportedStyles.js';
 
 const MinicartAmount = styled(NotificationBadge) `
     right: auto;

package/build/es/components/MainNavigation/{index.d.ts → MainNavigation.d.ts}

@@ -1,7 +1,6 @@
 import React from 'react';
 import { RibbonDataProps } from './ChildComponents/Ribbon';
 import { GlobalNavItems } from './types/globalNavProps';
-/** @visibleName Main navigation */
 export interface MainNavigationProps {
     /** Allows to pass a custom className */
     className?: string;

package/build/es/components/MainNavigation/{index.js → MainNavigation.js}

@@ -113,6 +113,7 @@ const initiateScrollToHeader = (componentRef) => {
         window.scrollTo({ top: componentRef.current.offsetTop, left: 0 });
     }
 };
+/** @visibleName Main Navigation */
 const MainNavigation = ({ 
 // TODO: Define types for MainNavigation component (https://jira.dna.fi/browse/STYLE-233)
 items = {}, language = 'fi', zIndex = 1030, languageSelector = false, isMobileMenu = false, search = true, searchText = 'Haku', searchComponent = false, minicart = true, minicartText = 'Ostoskori', minicartComponent = false, minicartAmount = 0, showMinicart = false, showLoginTooltip = false, login = true, loginText = 'Kirjaudu', loginComponent = false, isLoggedIn = false, collapseSize = 767, nextJSLinkComponent = false, ribbon = true, ribbonData, className, currentUrl = false, notificationText = '', }) => {
@@ -326,6 +327,6 @@ items = {}, language = 'fi', zIndex = 1030, languageSelector = false, isMobileMe
 /** @component */
 // TODO: Remove ts-ignore after https://jira.dna.fi/browse/STYLE-232 is done
 // @ts-ignore
-var index = withSizes(mapSizesToProps)(MainNavigation);
+var MainNavigation$1 = withSizes(mapSizesToProps)(MainNavigation);
 
-export default index;
+export default MainNavigation$1;

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

@@ -1,38 +1,61 @@
 import React from 'react';
-export interface NotificationProps {
-    /** Allows to pass a custom className */
-    className?: string;
-    /** Dictates what the norification will say  */
+declare type NotificationType = 'info' | 'success' | 'warning' | 'error';
+interface Props {
+    /**
+     * Depending on the passed type, the background color is determined
+     *
+     * @default 'info'
+     * @param {NotificationType} info Uses #007d91 color code as background color
+     * @param {NotificationType} success Uses #e80c0c color code as background color
+     * @param {NotificationType} warning Uses #00b201 color code as background color
+     * @param {NotificationType} error Uses #ff7800 color code as background color
+     */
+    type?: NotificationType;
+    /**
+     * @deprecated Use `type` property instead
+     */
+    color?: NotificationType | 'pinkday';
+    /**
+     * Content of the ribbon
+     */
     children?: React.ReactNode;
     /**
+     * Allows to show or hide appropriate notification icon
+     *
      * @default false
      */
-    /** Show icon */
-    showIcon: boolean;
+    showIcon?: boolean;
     /**
+     * Allows to show and hide close button
+     *
      * @default false
      */
-    /** Show close button */
-    closeButton: boolean;
-    /** onClick handler for close button */
-    onClickCloseButton?: (event: React.MouseEvent<HTMLElement>) => void;
-    /** Is the notification dismissed */
+    closeButton?: boolean;
     /**
+     * On close button click callback
+     */
+    onClickCloseButton?: (e: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * Allows to dismiss the ribbon programmatically
+     *
      * @default false
      */
     dismissed?: boolean;
-    /** Dictates what is the type and color of the notification */
     /**
-     * @default 'info'
-     */
-    color: 'info' | 'success' | 'warning' | 'error' | 'pinkday';
-    /** Align text center
+     * Allows to center text of the ribbon
      *
      * @default false
      */
     centered?: boolean;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
     'data-testid'?: string;
 }
-declare const Notification: (props: NotificationProps) => JSX.Element | null;
+declare const Notification: ({ type, color, "data-testid": dataTestId, ...props }: Props) => JSX.Element;
 /** @component */
 export default Notification;

package/build/es/components/Notification/Notification.js

@@ -1,67 +1,47 @@
 import React from 'react';
-import { media, getMultipliedSize, getDividedSize } from '../../utils/styledUtils.js';
 import styled__default from 'styled-components';
+import theme from '../../themes/theme.js';
+import { getMultipliedSize, media } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
+import Ribbon from '../Ribbon/Ribbon.js';
 
-const iconAreaWidth = 4;
-const smallPadding = '0.55rem';
-const basePadding = '0.75rem';
-const NotificationStyle = styled__default.div `
-    color: ${({ color, theme }) => (color === 'pinkday' ? theme.color.text : theme.color.white)};
-    background: ${props => props.theme.color[props.color]};
+const StyledRibbon = styled__default(Ribbon) `
+    ${({ showIcon, closeButton }) => showIcon &&
+    closeButton &&
+    `
+        a:last-of-type {
+            ${getMultipliedSize(theme.base.baseWidth, 1.2)}
+        }
+    `}
+`;
+const NotificationWrapper = styled__default.div `
     display: flex;
     align-items: center;
-    overflow: hidden;
-    padding: ${basePadding} 0.9375rem;
-    position: relative;
-    opacity: 0.95;
-    transition: all 0.3s;
-    ${({ centered }) => (centered ? 'text-align:center;' : '')}
-    a {
-        color: ${({ color, theme }) => color === 'pinkday' ? theme.color.text : theme.color.white};
-        text-decoration: underline;
-    }
 `;
-const IconArea = styled__default.div `
+const IconWrapper = styled__default.div `
     display: none;
     align-items: center;
-    width: ${iconAreaWidth}rem;
+    width: ${getMultipliedSize(theme.base.baseWidth, 6.4)};
     overflow: hidden;
+
     ${() => media.xs `
         display: flex;
     `}
 `;
-const TextArea = styled__default.div `
+const ContentWrapper = styled__default.div `
     flex: 1;
-    font-weight: ${props => props.theme.fontWeight.book};
-    overflow: hidden;
-    font-size: ${props => props.theme.fontSize.defaultFontSize};
-    line-height: 1.5;
-    position: relative;
-    word-wrap: break-word;
-    margin-right: ${props => props && props.closeButton ? getMultipliedSize(props.theme.base.baseWidth, 3) : 0};
-`;
-const CloseButton = styled__default.a `
-    position: absolute;
-    top: ${props => (props && props.showIcon ? basePadding : smallPadding)};
-    ${() => media.xs `
-        top: ${basePadding};
-    `}
-    right: ${basePadding};
-    margin: ${props => getDividedSize(props.theme.base.baseWidth, 2)};
-    cursor: pointer;
 `;
-const Notification = (props) => {
-    const { children, showIcon, color, dismissed, onClickCloseButton, closeButton, centered, className, 'data-testid': dataTestId, } = props;
-    if (dismissed) {
-        return null;
-    }
-    return (React.createElement(NotificationStyle, { className: className, color: color, showIcon: showIcon, onClick: onClickCloseButton, closeButton: closeButton, "data-testid": dataTestId, centered: centered },
-        showIcon ? (React.createElement(IconArea, null,
-            React.createElement(Icon, { name: color === 'success' ? 'hlCheck' : color, size: "2rem", color: "currentColor" }))) : null,
-        React.createElement(TextArea, { closeButton: closeButton }, children),
-        closeButton ? (React.createElement(CloseButton, { showIcon: showIcon, onClick: onClickCloseButton },
-            React.createElement(Icon, { name: "x", size: "0.75rem", color: "currentColor" }))) : null));
+const Notification = ({ type = 'info', color, 'data-testid': dataTestId, ...props }) => {
+    // Property color is deprecated
+    // TODO: Remove this line after https://jira.dna.fi/browse/STYLE-292 is done
+    type = (color || type);
+    return (React.createElement(StyledRibbon, { color: type, closeButton: props.closeButton, onClick: props.onClickCloseButton, dismissed: props.dismissed, centered: props.centered, className: props.className, "data-testid": dataTestId },
+        React.createElement(NotificationWrapper, null,
+            props.showIcon && (React.createElement(IconWrapper, null,
+                React.createElement(Icon, { name: type === 'success'
+                        ? 'hlCheck'
+                        : `hl${type.charAt(0).toUpperCase() + type.slice(1)}`, size: "2rem", color: "currentColor" }))),
+            React.createElement(ContentWrapper, null, props.children))));
 };
 
 export default Notification;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import LoaderProps from './types/LoaderProps';
-/** @visibleName Pixel loader */
+/** @visibleName Pixel Loader */
 export declare const PixelLoader: ({ className, color, "data-testid": dataTestId }: LoaderProps) => JSX.Element;
 /** @component */
 export default PixelLoader;

package/build/es/components/PixelLoader/PixelLoader.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { LoaderWrapper, Pixel } from './PixelLoaderStyles.js';
 
-/** @visibleName Pixel loader */
+/** @visibleName Pixel Loader */
 const PixelLoader = ({ className, color, 'data-testid': dataTestId }) => (React.createElement(LoaderWrapper, { className: className, "data-testid": dataTestId },
     React.createElement(Pixel, { color: color, delay: "-0.27" }),
     React.createElement(Pixel, { color: color, delay: "-0.18" }),

package/build/es/components/ProgressIndicator/{index.d.ts → ProgressIndicator.d.ts}

@@ -19,6 +19,6 @@ export interface StepperProps {
     /** Dictates current status of the flow */
     currentStatus?: string;
 }
-/** @visibleName Progress indicator */
-declare const ProgressIndicator: React.SFC<StepperProps>;
+/** @visibleName Progress Indicator */
+declare const ProgressIndicator: React.FunctionComponent<StepperProps>;
 export default ProgressIndicator;

package/build/es/components/ProgressIndicator/{index.js → ProgressIndicator.js}

@@ -157,7 +157,7 @@ const ProgressItem = styled.li `
         color: ${({ theme, isActive, isCompleted }) => isActive || isCompleted ? theme.color.text : theme.color.gray40};
     }
 `;
-/** @visibleName Progress indicator */
+/** @visibleName Progress Indicator */
 const ProgressIndicator = props => {
     const { steps, small = false, onStepChange, activeSlideIndex = 0, currentStatus, className, } = props;
     return (createElement(Progress, { className: className, activeSlideIndex: activeSlideIndex, currentStatus: currentStatus, small: small, steps: steps }, steps.map(({ title, cursorType }, index) => {

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

@@ -27,7 +27,7 @@ export interface RadioProps {
     value?: string | number;
     'data-testid'?: string;
 }
-/** @visibleName Radio button */
+/** @visibleName Radio Button */
 declare const RadioButton: React.FunctionComponent<RadioProps>;
 /** @component */
 export default RadioButton;

package/build/es/components/RadioButton/RadioButton.js

@@ -60,7 +60,7 @@ const Label = styled('label') `
         content: '●';
     }
 `;
-/** @visibleName Radio button */
+/** @visibleName Radio Button */
 const RadioButton = ({ id, name, checked, onChange, label, disabled, className, value, 'data-testid': dataTestId, }) => {
     return (React.createElement(Wrapper, { className: className, "data-testid": dataTestId },
         React.createElement(Input, { id: id, type: "radio", name: name, checked: checked, "aria-checked": checked, value: value, disabled: disabled, onChange: onChange, tabIndex: -1, "data-testid": dataTestId && `${dataTestId}-input` }),

package/build/{cjs/components/ReadMore/index.d.ts → es/components/ReadMore/ReadMore.d.ts}

@@ -13,6 +13,6 @@ interface ReadMoreProps {
     /** Init in expanded state and immediately close on client for better SEO */
     seoInitExpanded?: boolean;
 }
-/** @visibleName Read more */
+/** @visibleName Read More */
 declare const ReadMore: React.FunctionComponent<ReadMoreProps>;
 export default ReadMore;

package/build/es/components/ReadMore/{index.js → ReadMore.js}

@@ -41,7 +41,7 @@ const Toggle = styled.div `
         }
     }
 `;
-/** @visibleName Read more */
+/** @visibleName Read More */
 const ReadMore = ({ children, showMoreText, showLessText, className, onClick = () => ({}), seoInitExpanded, }) => {
     const [expanded, setExpanded] = useState(seoInitExpanded === true || false);
     useEffect(() => {

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import theme from '../../themes/theme';
+declare type TextColor = 'text' | 'white' | 'black';
+interface Props {
+    /**
+     * Depending on the passed value, background color and text color are determined
+     *
+     * @default 'info'
+     */
+    color?: keyof typeof theme.color;
+    /**
+     * When defined, the text colors in color map are ignored and passed value is used instead
+     *
+     * @default 'white'
+     * @param {TextColor} text Uses #121212 color code as text color
+     * @param {TextColor} white Uses #ffffff color code as text color
+     * @param {TextColor} black Uses #000000 color code as text color
+     */
+    textColor?: TextColor;
+    /**
+     * Content of the ribbon
+     */
+    children?: React.ReactNode;
+    /**
+     * Allows to show and hide close button
+     *
+     * @default false
+     */
+    closeButton?: boolean;
+    /**
+     * On close button click callback
+     */
+    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * Allows to dismiss the ribbon programmatically
+     *
+     * @default false
+     */
+    dismissed?: boolean;
+    /**
+     * Allows to center text of the ribbon
+     *
+     * @default false
+     */
+    centered?: boolean;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+declare const Ribbon: ({ color, "data-testid": dataTestId, ...props }: Props) => JSX.Element | null;
+/** @component */
+export default Ribbon;

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

@@ -0,0 +1,71 @@
+import React from 'react';
+import styled__default from 'styled-components';
+import theme from '../../themes/theme.js';
+import { getMultipliedSize, getDividedSize, media } from '../../utils/styledUtils.js';
+import Icon from '../Icon/Icon.js';
+
+const getColorScheme = ({ color, textColor }) => {
+    const map = {
+        text: ['pinkday', 'white', 'pink2', 'grayBg', 'gray15', 'gray10', 'gray5'],
+        black: ['grayWhite'],
+    };
+    textColor =
+        textColor ||
+            Object.keys(map).find(key => map[key].includes(color)) ||
+            'white';
+    return `
+        color: ${theme.color[textColor]};
+        background: ${theme.color[color]};
+
+        a {
+            color: ${theme.color[textColor]};
+        };
+    }`;
+};
+const RibbonWrapper = styled__default.div `
+    ${({ color, textColor }) => getColorScheme({ color, textColor })}
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    padding: ${getMultipliedSize(theme.base.baseWidth, 1.2)}
+        ${getMultipliedSize(theme.base.baseWidth, 1.5)};
+    position: relative;
+    opacity: 0.95;
+    transition: all 0.3s;
+    text-align: ${({ centered }) => (centered ? 'center' : 'left')};
+    a {
+        text-decoration: underline;
+    }
+`;
+const ContentWrapper = styled__default.div `
+    flex: 1;
+    font-weight: ${theme.fontWeight.book};
+    overflow: hidden;
+    font-size: ${theme.fontSize.defaultFontSize};
+    line-height: 1.5;
+    position: relative;
+    word-wrap: break-word;
+    margin-right: ${({ closeButton }) => closeButton ? getMultipliedSize(theme.base.baseWidth, 3) : 0};
+`;
+const CloseButton = styled__default.a `
+    position: absolute;
+    top: ${getMultipliedSize(theme.base.baseWidth, 0.88)};
+    right: ${getMultipliedSize(theme.base.baseWidth, 1.2)};
+    margin: ${getDividedSize(theme.base.baseWidth, 2)};
+    cursor: pointer;
+
+    ${() => media.xs `
+        top: ${getMultipliedSize(theme.base.baseWidth, 1.2)};
+    `}
+`;
+const Ribbon = ({ color = 'info', 'data-testid': dataTestId, ...props }) => {
+    if (props.dismissed) {
+        return null;
+    }
+    return (React.createElement(RibbonWrapper, { className: props.className, color: color, textColor: props.textColor, "data-testid": dataTestId, centered: props.centered },
+        React.createElement(ContentWrapper, { closeButton: props.closeButton }, props.children),
+        props.closeButton ? (React.createElement(CloseButton, { onClick: props.onClick },
+            React.createElement(Icon, { name: "x", size: "0.75rem", color: "currentColor" }))) : null));
+};
+
+export default Ribbon;

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

@@ -1,15 +1,54 @@
 import React from 'react';
 export interface SearchProps {
-    /** Allows to pass a custom className */
-    className?: string;
+    /**
+     * The input element's name
+     * Submitted with the form as part of a name/value pair
+     */
     name: string;
-    onChange?: (...args: any[]) => any;
-    onClick?: (...args: any[]) => any;
+    /**
+     * The input element unique identifier
+     * Must be unique in the whole document
+     */
     id?: string;
+    /**
+     * The input element's value
+     * When specified, it represents the initial value
+     */
     value?: string;
+    /**
+     * Provides a brief information as to what kind of value is expected in the field
+     */
     placeholder?: string;
-    iconSize?: 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
+     */
+    autoFocus?: boolean;
+    /**
+     * Icon from Icons component shown next to input element
+     *
+     * @default 'hlMagnifyingGlass'
+     */
     iconName?: string;
+    /**
+     * Size of the icon shown next to input element
+     *
+     * @default '1.6em'
+     */
+    iconSize?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * On input element change callback
+     */
+    onChange?: (...args: any[]) => any;
+    /**
+     * On icon element click callback
+     */
+    onClick?: (...args: any[]) => any;
 }
 declare const Search: React.FunctionComponent<SearchProps>;
 /** @component */

package/build/es/components/Search/Search.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import styled from '../../themes/styled.js';
-import Icon from '../Icon/Icon.js';
 import colors from '../../themes/themeComponents/colors.js';
+import Icon from '../Icon/Icon.js';
 
 const Container = styled.div `
     display: flex;
@@ -35,7 +35,7 @@ const Input = styled.input `
         display: none;
     }
 `;
-const Search = ({ id, className, name, onChange, onClick, value = '', placeholder, iconSize = '1.6em', iconName = 'hlMagnifyingGlass', ...props }) => {
+const Search = ({ value = '', iconName = 'hlMagnifyingGlass', iconSize = '1.6em', className, onChange, onClick, ...props }) => {
     const [text, setText] = useState(value);
     const handleChange = (e) => {
         setText(e.target.value);
@@ -50,7 +50,7 @@ const Search = ({ id, className, name, onChange, onClick, value = '', placeholde
         }
     };
     return (React.createElement(Container, { className: className },
-        React.createElement(Input, Object.assign({ type: "search", name: name, value: text, placeholder: placeholder, onChange: handleChange }, props)),
+        React.createElement(Input, Object.assign({ type: "search", value: text, onChange: handleChange }, props)),
         React.createElement(Icon, { name: text.length ? 'hlX' : iconName, size: iconSize, color: colors.hotPink, onClick: onIconClick })));
 };
 

package/build/es/components/SecondaryNavigation/{index.d.ts → SecondaryNavigation.d.ts}

@@ -23,6 +23,7 @@ interface SecondaryNavigationProps {
     /** Highlighted ids */
     highlightIds?: string[];
 }
+/** @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;
 /** @component */
 export default SecondaryNavigation;

package/build/es/components/SecondaryNavigation/{index.js → SecondaryNavigation.js}

@@ -1,9 +1,9 @@
 import React, { useState, useRef } from 'react';
+import useOutsideClick from '../../hooks/useOutsideClick.js';
 import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
-import Icon from '../Icon/Icon.js';
-import useOutsideClick from '../../hooks/useOutsideClick.js';
 import { media } from '../../utils/styledUtils.js';
+import Icon from '../Icon/Icon.js';
 
 const SecondaryNavigationWrapper = styled.nav `
     line-height: 1.2rem;
@@ -149,6 +149,7 @@ const IconWrapper = styled.span `
     }
 `;
 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 [isSecondaryNavOpen, setIsSecondaryNavOpen] = useState(false);
     const toggleNav = () => {

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

@@ -9,22 +9,26 @@ interface DropDownIndicator {
     iconSize?: string;
 }
 interface Props {
+    options: ReactSelectProps['options'];
+    onChange: (selectedItem: SelectboxItem) => void;
     /** Allows to pass a custom className */
     className?: string;
+    'data-testid'?: string;
     label?: string;
+    inputId?: ReactSelectProps['inputId'];
     placeholder?: ReactSelectProps['placeholder'];
-    onChange: (selectedItem: SelectboxItem) => void;
-    options: ReactSelectProps['options'];
+    onInputChange?: ReactSelectProps['onInputChange'];
     value?: ReactSelectProps['value'];
-    'data-testid'?: string;
     dropDownIndicator?: DropDownIndicator;
     noOptionsText?: string;
     isSearchable?: boolean;
+    isClearable?: boolean;
+    isMulti?: boolean;
     isLoading?: boolean;
     isDisabled?: boolean;
     isRequired?: boolean;
     error?: boolean;
     errorMessage?: string;
 }
-declare const SelectBox: ({ className, label, onChange, options, value, dropDownIndicator, placeholder, "data-testid": dataTestId, isSearchable, noOptionsText, isLoading, isDisabled, isRequired, error, errorMessage, }: Props) => JSX.Element;
+declare const SelectBox: ({ dropDownIndicator, "data-testid": dataTestId, isSearchable, isClearable, isMulti, noOptionsText, isLoading, isDisabled, isRequired, error, ...props }: Props) => JSX.Element;
 export default SelectBox;