@dnanpm/styleguide 2.0.1 → 2.1.0

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

@@ -35,6 +35,7 @@ const RibbonColumn = styled['default'].div `
     flex: 1 1 auto;
     display: flex;
     justify-content: center;
+    align-items: center;
     margin: 0.125rem 0;
     padding: 0.125rem 0;
     color: ${p => p.theme.color.gray55};
@@ -43,9 +44,7 @@ const RibbonColumn = styled['default'].div `
     &:last-of-type {
         border: none;
     }
-    span {
-        margin-left: 0.25rem;
-    }
+
     a {
         display: flex;
         align-items: center;
@@ -68,10 +67,10 @@ const Ribbon = ({ ribbonData, lang = 'fi', navZIndex }) => {
         React__default['default'].createElement(RibbonItems, null, ribbonData.map(ribbon => {
             return (React__default['default'].createElement(RibbonColumn, { key: `ribbon-${ribbon.ribbonIcon}` },
                 ribbon.ribbonLink[lang] && (React__default['default'].createElement("a", { href: ribbon.ribbonLink[lang] },
-                    React__default['default'].createElement(Icon['default'], { name: ribbon.ribbonIcon, size: "1.2em" }),
+                    React__default['default'].createElement(Icon['default'], { name: ribbon.ribbonIcon, size: "1rem", position: "left" }),
                     React__default['default'].createElement("span", null, ribbon.ribbonTexts[lang]))),
                 !ribbon.ribbonLink[lang] && (React__default['default'].createElement(React__default['default'].Fragment, null,
-                    React__default['default'].createElement(Icon['default'], { name: ribbon.ribbonIcon, size: "1.2em" }),
+                    React__default['default'].createElement(Icon['default'], { name: ribbon.ribbonIcon, size: "1rem", position: "left" }),
                     React__default['default'].createElement("span", null, ribbon.ribbonTexts[lang])))));
         }))));
 };

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

@@ -9,6 +9,7 @@ var modifyBodyClass = require('../../hooks/modifyBodyClass.js');
 var useScrollPosition = require('../../hooks/useScrollPosition.js');
 var styled = require('../../themes/styled.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');
@@ -104,6 +105,8 @@ const GlobalNavigationContainer = styled['default'].nav `
 const NavigationWrapper = styled['default'].div `
     display: flex;
     width: 100%;
+    max-width: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 256)};
+    margin: 0 auto;
     height: ${navigation.mobileNavMaxHeight};
     @media (min-width: ${p => p.collapseSize + 1}px) {
         height: ${navigation.desktopNavMaxHeight};

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

@@ -58,7 +58,7 @@ const MenuLinkWithChildren = styled['default'].button `
     padding: 0.5em 1em;
     span {
         position: relative;
-        &:after {
+        &:first-child:after {
             position: absolute;
             content: '';
             width: 100%;

package/build/cjs/components/Modal/Modal.js

@@ -7,6 +7,7 @@ var ReactModal = require('react-modal');
 var styled = require('../../themes/styled.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var Icon = require('../Icon/Icon.js');
+var hlX = require('../Icons/hlX.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -118,7 +119,7 @@ class Modal extends React__default['default'].PureComponent {
         return (React__default['default'].createElement(React__default['default'].Fragment, null,
             React__default['default'].createElement(StyledModal, Object.assign({ className: className, overflowContentVisible: overflowContentVisible, maxWidth: maxWidth, onRequestClose: onRequestClose }, props),
                 closeIcon && (React__default['default'].createElement(CloseButton, { onClick: onRequestClose, "aria-label": closeLabel, "data-testid": closeLabel },
-                    React__default['default'].createElement(Icon['default'], { name: "x", size: "1.25rem" }))),
+                    React__default['default'].createElement(Icon['default'], { icon: hlX['default'] }))),
                 title && React__default['default'].createElement(Title, null, title),
                 children),
             React__default['default'].createElement(GlobalStyle, null)));

package/build/cjs/components/Notification/Notification.js

@@ -7,6 +7,10 @@ var styled = require('styled-components');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var Icon = require('../Icon/Icon.js');
+var hlCheck = require('../Icons/hlCheck.js');
+var hlError = require('../Icons/hlError.js');
+var hlInfo = require('../Icons/hlInfo.js');
+var hlWarning = require('../Icons/hlWarning.js');
 var Ribbon = require('../Ribbon/Ribbon.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -14,6 +18,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
+const iconsMap = {
+    info: hlInfo['default'],
+    success: hlCheck['default'],
+    warning: hlWarning['default'],
+    error: hlError['default'],
+};
 const StyledRibbon = styled__default['default'](Ribbon['default']) `
     ${({ showIcon, closeButton }) => showIcon &&
     closeButton &&
@@ -44,9 +54,7 @@ const Notification = ({ type = 'info', 'data-testid': dataTestId, ...props }) =>
     return (React__default['default'].createElement(StyledRibbon, { color: type, closeButton: props.closeButton, onClick: props.onClickCloseButton, dismissed: props.dismissed, centered: props.centered, className: props.className, "data-testid": dataTestId },
         React__default['default'].createElement(NotificationWrapper, null,
             props.showIcon && (React__default['default'].createElement(IconWrapper, null,
-                React__default['default'].createElement(Icon['default'], { name: type === 'success'
-                        ? 'hlCheck'
-                        : `hl${type.charAt(0).toUpperCase() + type.slice(1)}`, size: "2rem", color: "currentColor" }))),
+                React__default['default'].createElement(Icon['default'], { icon: iconsMap[type], size: "2rem", color: "currentColor" }))),
             React__default['default'].createElement(ContentWrapper, null, props.children))));
 };
 

package/build/cjs/components/ProgressIndicator/ProgressIndicator.js

@@ -6,13 +6,15 @@ var React = require('react');
 var styled = require('../../themes/styled.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var Icon = require('../Icon/Icon.js');
+var hlCheck = require('../Icons/hlCheck.js');
+var hlExclamationMark = require('../Icons/hlExclamationMark.js');
 
 const progressBallWidthLarge = 2.5; // 40px
 const progressBallWidthSmall = 1.875; // 30px
 const progressLineTopMarginLarge = 18;
 const progressLineTopMarginSmall = 13;
-const iconSizeLarge = 1;
-const iconSizeSmall = 0.7;
+const iconSizeLarge = 1.25;
+const iconSizeSmall = 1.0;
 const progressBallBorderWidth = 4;
 const progressBallBorderHeight = 4;
 const ProgressBall = styled['default'].span `
@@ -31,7 +33,8 @@ const ProgressBall = styled['default'].span `
         font-size: ${theme.fontSize.l};
     `};
 
-    svg {
+    span.dnasg-icon,
+    span.dnasg-icon > svg {
         margin: 0 auto;
         height: ${iconSizeSmall}rem;
         width: ${iconSizeSmall}rem;
@@ -80,7 +83,8 @@ const Progress = styled['default'].ul `
         height: ${p => (p && p.small ? progressBallWidthSmall : progressBallWidthLarge)}rem;
         font-size: ${p => (p && p.small ? p.theme.fontSize.s : p.theme.fontSize.l)};
 
-        svg {
+        span.dnasg-icon,
+        span.dnasg-icon > svg {
             height: ${p => (p && p.small ? iconSizeSmall : iconSizeLarge)}rem;
             width: ${p => (p && p.small ? iconSizeSmall : iconSizeLarge)}rem;
         }
@@ -169,15 +173,15 @@ const ProgressIndicator = props => {
         const isActive = index === activeSlideIndex;
         const isCompleted = index < activeSlideIndex;
         const isError = isActive && currentStatus === 'error';
-        const iconName = isError ? 'exclamationMark' : 'check';
+        const icon = isError ? hlExclamationMark['default'] : hlCheck['default'];
         const handleClick = () => {
             if (onStepChange) {
                 onStepChange(index);
             }
         };
-        return (React.createElement(ProgressItem, { key: index, onClick: handleClick, isActive: isActive, isCompleted: isCompleted, isError: isError, isSmall: small, cursorType: cursorType },
+        return (React.createElement(ProgressItem, { "aria-current": isActive ? 'step' : undefined, cursorType: cursorType, isActive: isActive, isCompleted: isCompleted, isError: isError, isSmall: small, key: index, onClick: handleClick },
             React.createElement(ProgressLine, null),
-            React.createElement(ProgressBall, null, isCompleted || isError ? React.createElement(Icon['default'], { name: iconName }) : stepNumber),
+            React.createElement(ProgressBall, null, isCompleted || isError ? React.createElement(Icon['default'], { icon: icon }) : stepNumber),
             title && React.createElement(ProgressText, { isSmall: small }, title)));
     })));
 };

package/build/cjs/components/RadioButton/RadioButton.js

@@ -12,6 +12,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const Container = styled['default'].div `
+    display: flex;
     margin-bottom: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 0.5)};
 `;
 const Input = styled['default'](globalStyles.CheckboxInput_RadioInput) `
@@ -26,8 +27,8 @@ const Input = styled['default'](globalStyles.CheckboxInput_RadioInput) `
 /** @visibleName Radio Button */
 const RadioButton = ({ 'data-testid': dataTestId, ...props }) => {
     return (React__default['default'].createElement(Container, { className: props.className, "data-testid": dataTestId },
-        React__default['default'].createElement(Input, { id: props.id, type: "radio", name: props.name, checked: props.checked, "aria-checked": props.checked, value: props.value, disabled: props.disabled, onChange: props.onChange, tabIndex: -1, "data-testid": dataTestId && `${dataTestId}-input` }),
-        React__default['default'].createElement("label", { htmlFor: props.id, "aria-checked": props.checked, role: "radio", tabIndex: 0, "data-testid": dataTestId && `${dataTestId}-label` }, props.label)));
+        React__default['default'].createElement(Input, { id: props.id, type: "radio", name: props.name, checked: props.checked, "aria-checked": props.checked, value: props.value, disabled: props.disabled, onChange: props.onChange, "data-testid": dataTestId && `${dataTestId}-input` }),
+        props.label && (React__default['default'].createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` }, props.label))));
 };
 
 exports.default = RadioButton;

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

@@ -6,6 +6,8 @@ var React = require('react');
 var styled = require('../../themes/styled.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var Icon = require('../Icon/Icon.js');
+var hlChevronDown = require('../Icons/hlChevronDown.js');
+var hlChevronUp = require('../Icons/hlChevronUp.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -29,11 +31,9 @@ const Toggle = styled['default'].div `
     ? styledUtils.getMultipliedSize(p.theme.base.baseHeight, 2)
     : styledUtils.getMultipliedSize(p.theme.base.baseHeight, 10)};
 
-    svg {
-        margin-right: ${p => styledUtils.getMultipliedSize(p.theme.base.baseWidth, 1)};
-    }
     button {
-        // text-transform: uppercase;
+        display: flex;
+        align-items: center;
         cursor: pointer;
         background-color: transparent;
         border: 0;
@@ -56,13 +56,13 @@ const ReadMore = ({ children, showMoreText, showLessText, className, onClick = (
         setExpanded(!expanded);
         onClick(event);
     };
-    const iconName = expanded ? 'chevronUp' : 'chevronDown';
+    const icon = expanded ? hlChevronUp['default'] : hlChevronDown['default'];
     const buttonText = expanded ? showLessText : showMoreText;
     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'], { name: iconName, size: "0.65em" }),
+                React__default['default'].createElement(Icon['default'], { icon: icon, size: "1rem", position: "left" }),
                 buttonText))));
 };
 

package/build/cjs/components/Ribbon/Ribbon.js

@@ -7,6 +7,7 @@ var styled = require('styled-components');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var Icon = require('../Icon/Icon.js');
+var hlX = require('../Icons/hlX.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -74,7 +75,7 @@ const Ribbon = ({ color = 'info', 'data-testid': dataTestId, ...props }) => {
     return (React__default['default'].createElement(RibbonWrapper, { className: props.className, color: color, textColor: props.textColor, "data-testid": dataTestId, centered: props.centered },
         React__default['default'].createElement(ContentWrapper, { closeButton: props.closeButton }, props.children),
         props.closeButton ? (React__default['default'].createElement(CloseButton, { onClick: props.onClick },
-            React__default['default'].createElement(Icon['default'], { name: "x", size: "0.75rem", color: "currentColor" }))) : null));
+            React__default['default'].createElement(Icon['default'], { icon: hlX['default'], color: "currentColor" }))) : null));
 };
 
 exports.default = Ribbon;

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Props as IconProps } from '../Icon/Icon';
 export interface SearchProps {
     /**
      * The input element's name
@@ -12,7 +13,9 @@ export interface SearchProps {
     id?: string;
     /**
      * The input element's value
-     * When specified, it represents the initial 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
      */
     value?: string;
     /**
@@ -29,12 +32,19 @@ export interface SearchProps {
      * Icon from Icons component shown next to input element
      *
      * @default 'hlMagnifyingGlass'
+     * @deprecated Use property `icon`
      */
     iconName?: string;
+    /**
+     * Icon from Icons component shown next to input element
+     *
+     * @default hlMagnifyingGlass
+     */
+    icon?: IconProps['icon'];
     /**
      * Size of the icon shown next to input element
      *
-     * @default '1.6em'
+     * @default '1.5rem'
      */
     iconSize?: string;
     /**
@@ -49,6 +59,15 @@ export interface SearchProps {
      * On icon element click callback
      */
     onClick?: (...args: any[]) => any;
+    /**
+     * 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
+     */
+    isReactive?: boolean;
 }
 declare const Search: React.FunctionComponent<SearchProps>;
 /** @component */

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

@@ -6,6 +6,8 @@ var React = require('react');
 var styled = require('../../themes/styled.js');
 var colors = require('../../themes/themeComponents/colors.js');
 var Icon = require('../Icon/Icon.js');
+var hlMagnifyingGlass = require('../Icons/hlMagnifyingGlass.js');
+var hlX = require('../Icons/hlX.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -17,7 +19,7 @@ const Container = styled['default'].div `
     border-bottom: 2px solid ${props => props.theme.color.hotPink};
     padding: 0.3125rem 0.3125rem 0.6875rem;
 
-    ${Icon['default']} {
+    span.dnasg-icon > svg {
         cursor: pointer;
     }
 `;
@@ -44,23 +46,39 @@ const Input = styled['default'].input `
         display: none;
     }
 `;
-const Search = ({ value = '', iconName = 'hlMagnifyingGlass', iconSize = '1.6em', className, onChange, onClick, ...props }) => {
+const Search = ({ value = '', iconName, icon = hlMagnifyingGlass['default'], iconSize = '1.5rem', className, onChange, onClick, isReactive = false, ...props }) => {
     const [text, setText] = React.useState(value);
+    const inputRef = React__default['default'].useRef(null);
     const handleChange = (e) => {
-        setText(e.target.value);
+        if (!isReactive) {
+            setText(e.target.value);
+        }
         if (onChange) {
             onChange(e);
         }
     };
     const onIconClick = (e) => {
-        setText('');
+        if (!isReactive) {
+            setText('');
+        }
+        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 }));
+        }
+        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, Object.assign({ type: "search", value: text, onChange: handleChange }, props)),
-        React__default['default'].createElement(Icon['default'], { name: text.length ? 'hlX' : iconName, size: iconSize, color: colors['default'].hotPink, onClick: onIconClick })));
+        React__default['default'].createElement(Input, Object.assign({ type: "search", value: isReactive ? value : text, onChange: handleChange, ref: inputRef }, props)),
+        renderIcon()));
 };
 
 exports.default = Search;

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

@@ -8,15 +8,16 @@ var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var Icon = require('../Icon/Icon.js');
+var hlCheck = require('../Icons/hlCheck.js');
+var hlChevronDown = require('../Icons/hlChevronDown.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const SecondaryNavigationWrapper = styled['default'].nav `
-    line-height: 1.2rem;
-    padding: 0;
     font-size: ${theme['default'].fontSize.s};
+    padding: 0;
     background: ${theme['default'].color.white};
     position: relative;
     z-index: 1000;
@@ -28,40 +29,41 @@ const SecondaryNavigationWrapper = styled['default'].nav `
     }
 `;
 const MobileSelector = styled['default'].div `
+    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;
-    align-items: center;
-    display: flex;
-    line-height: 1.2rem;
     position: relative;
     border-bottom: 1px solid ${theme['default'].color.hotPink};
     width: 100%;
-    height: 3.25rem;
     &:hover {
         cursor: pointer;
     }
-    svg + span {
-        margin-left: 1rem;
-    }
     @media (min-width: ${p => p.collapseSize + 1}px) {
         display: none;
     }
 `;
+const MobileSelectorTitleWrapper = styled['default'].div `
+    display: flex;
+`;
 const MobileSelectorArrow = styled['default'].span `
-    svg {
-        position: absolute;
-        right: 0.75rem;
-        bottom: 0.75rem;
+    display: flex;
+
+    .dnasg-icon svg {
         transition: transform 0.15s ease-in-out;
         transform: rotate(${p => (p.isOpen ? '180deg' : '0deg')});
     }
 `;
 const MobileSelectorCheck = styled['default'].span `
-    svg {
+    .dnasg-icon {
         position: absolute;
         right: 0;
         bottom: 1rem;
     }
+
     @media (min-width: ${p => p.collapseSize + 1}px) {
         display: none;
     }
@@ -78,12 +80,8 @@ const SecondaryNavigationList = styled['default'].ul `
     position: absolute;
     width: 100%;
     max-height: ${p => (p.isOpen ? '500vh' : '0')};
-    top: 3.25rem;
     border-bottom: ${p => p.isOpen ? `2px solid ${theme['default'].color.gray10}` : `0px solid ${theme['default'].color.white}`};
     @media (min-width: ${p => p.collapseSize + 1}px) {
-        svg {
-            display: none;
-        }
         padding: 0 1rem;
         max-height: none;
         position: static;
@@ -180,11 +178,12 @@ const SecondaryNavigation = ({ currentUrl = '', data, lang = 'fi', nextJSSeconda
     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" },
-            selectedElement.icon && selectedElement.icon.length > 0 && (React__default['default'].createElement(IconWrapper, { showNotification: shouldHighlightSelectedElement, collapseSize: collapseSize },
-                React__default['default'].createElement(Icon['default'], { name: selectedElement.icon, size: "1.5em" }))),
-            React__default['default'].createElement("span", null, selectedElement.titles[lang]),
+            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'], { name: "hlChevronDown", size: "1.5em" })))),
+                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];
@@ -197,13 +196,13 @@ const SecondaryNavigation = ({ currentUrl = '', data, lang = 'fi', nextJSSeconda
                 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'], { name: "hlCheck", size: "1.2em" }))))),
+                        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, size: "1.5em" }))),
+                            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'], { name: "hlCheck", size: "1.2em" })))))));
+                            React__default['default'].createElement(Icon['default'], { icon: hlCheck['default'] })))))));
             })
             : null)));
 };

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

@@ -57,6 +57,8 @@ interface Props {
     /**
      * Allows to define icon color and icon size of dropdown indicator
      *
+     * @deprecated Icon color and size should use values only according to Selectbox design prototypes
+     *
      * @default color '#000000'
      * @default iconSize '1rem'
      */

package/build/cjs/components/Selectbox/Selectbox.js

@@ -8,6 +8,9 @@ var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var Icon = require('../Icon/Icon.js');
+var hlChevronDown = require('../Icons/hlChevronDown.js');
+var hlChevronUp = require('../Icons/hlChevronUp.js');
+var hlMagnifyingGlass = require('../Icons/hlMagnifyingGlass.js');
 var LabelText = require('../LabelText/LabelText.js');
 var PixelLoader = require('../PixelLoader/PixelLoader.js');
 
@@ -16,11 +19,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
 
-const borderStyles = {
-    border: `1px solid ${theme['default'].color.gray25}`,
-    borderRadius: 0,
-    boxShadow: 'none',
-};
 const FieldContainer = styled['default'].div `
     color: ${props => (props.isDisabled ? props.theme.color.gray40 : props.theme.color.text)};
     margin-bottom: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 1)};
@@ -41,23 +39,35 @@ const ErrorMessage = styled['default'].div `
 const Mandatory = styled['default'].span `
     color: ${props => props.theme.color.hotPink};
 `;
+const customTheme = {
+    ...Select.defaultTheme,
+    borderRadius: 0,
+    colors: {
+        ...Select.defaultTheme.colors,
+        primary50: theme['default'].color.gray10,
+        primary25: theme['default'].color.grayBg,
+        primary: theme['default'].color.gray5,
+    },
+};
 const selectBoxStyles = {
     control: (styles, state) => ({
         ...styles,
-        ...borderStyles,
+        boxShadow: 'none',
         height: styledUtils.getMultipliedSize(theme['default'].base.baseHeight, 4),
-        borderBottomColor: state.menuIsOpen ? theme['default'].color.white : theme['default'].color.gray25,
+        borderColor: state.isFocused && !state.menuIsOpen ? theme['default'].color.gray40 : theme['default'].color.gray25,
         ':hover': {
             borderColor: theme['default'].color.gray25,
         },
     }),
     menu: styles => ({
         ...styles,
-        ...borderStyles,
+        border: `1px solid ${theme['default'].color.gray25}`,
+        boxShadow: 'none',
         marginTop: '-2px',
-        borderTop: 'none',
     }),
-    indicatorSeparator: () => ({
+    indicatorSeparator: styles => ({
+        ...styles,
+        backgroundColor: 'transparent',
         border: 'none',
     }),
     option: (styles, { isDisabled, isSelected }) => ({
@@ -65,44 +75,47 @@ const selectBoxStyles = {
         display: 'flex',
         justifyContent: 'space-between',
         color: isDisabled ? theme['default'].color.gray40 : theme['default'].color.text,
-        backgroundColor: isDisabled || isSelected ? theme['default'].color.gray5 : theme['default'].color.white,
-        fontWeight: theme['default'].fontWeight.book,
+        fontWeight: isSelected ? theme['default'].fontWeight.medium : theme['default'].fontWeight.book,
         fontSize: theme['default'].fontSize.default,
         textOverflow: 'ellipsis',
         whiteSpace: 'pre-wrap',
         overflow: 'hidden',
         cursor: isDisabled ? 'not-allowed' : 'default',
-        ':active': {
-            backgroundColor: theme['default'].color.gray10,
-        },
-        ':hover': {
-            backgroundColor: isDisabled ? theme['default'].color.gray5 : theme['default'].color.grayBg,
-        },
     }),
+    dropdownIndicator: (styles, { isDisabled, selectProps: { isSearchable } }) => {
+        const enabledColorsSet = isSearchable ? theme['default'].color.hotPink : theme['default'].color.text;
+        return {
+            ...styles,
+            color: isDisabled ? theme['default'].color.gray40 : enabledColorsSet,
+            ':hover': {
+                color: theme['default'].color.text,
+            },
+        };
+    },
 };
 const SelectBox = ({ dropDownIndicator, 'data-testid': dataTestId, isSearchable = false, isClearable = false, isMulti = false, noOptionsText = '', isLoading = false, isDisabled = false, isRequired = false, error = false, ...props }) => {
     const getNoOptionsText = () => noOptionsText;
     const DropdownIndicator = (dropdownIndicatorProps) => {
-        const { color = isDisabled ? theme['default'].color.gray40 : theme['default'].color.black, iconSize = '1rem' } = {
+        const { color = 'currentColor', iconSize = '1.5rem' } = {
             ...dropDownIndicator,
         };
-        const getIconName = () => {
+        const getIcon = () => {
             if (isSearchable) {
-                return 'hlMagnifyingGlass';
+                return hlMagnifyingGlass['default'];
             }
             else {
-                return dropdownIndicatorProps.selectProps.menuIsOpen ? 'chevronUp' : 'chevronDown';
+                return dropdownIndicatorProps.selectProps.menuIsOpen ? hlChevronUp['default'] : hlChevronDown['default'];
             }
         };
         return (Select.components.DropdownIndicator && (React__default['default'].createElement(Select.components.DropdownIndicator, Object.assign({}, dropdownIndicatorProps),
-            React__default['default'].createElement(Icon['default'], { color: color, name: getIconName(), size: iconSize }))));
+            React__default['default'].createElement(Icon['default'], { icon: getIcon(), color: color, size: iconSize }))));
     };
     return (React__default['default'].createElement("div", { className: props.className, "data-testid": dataTestId }, !isLoading ? (React__default['default'].createElement(FieldContainer, { isDisabled: isDisabled, error: error },
         props.label && (React__default['default'].createElement(LabelText.LabelText, { htmlFor: props.inputId },
             props.label,
             " ",
             isRequired && React__default['default'].createElement(Mandatory, null, "*"))),
-        React__default['default'].createElement(Select__default['default'], { inputId: props.inputId, styles: selectBoxStyles, components: { DropdownIndicator }, options: props.options, classNamePrefix: "react_select", onChange: props.onChange, onInputChange: props.onInputChange, value: props.value, placeholder: props.placeholder, noOptionsMessage: getNoOptionsText, menuPortalTarget: props.menuPortalTarget, menuPlacement: props.menuPlacement, isSearchable: isSearchable, isClearable: isClearable, isMulti: isMulti, isDisabled: isDisabled }),
+        React__default['default'].createElement(Select__default['default'], { inputId: props.inputId, styles: selectBoxStyles, theme: customTheme, components: { DropdownIndicator }, options: props.options, classNamePrefix: "react_select", onChange: props.onChange, onInputChange: props.onInputChange, value: props.value, placeholder: props.placeholder, noOptionsMessage: getNoOptionsText, menuPortalTarget: props.menuPortalTarget, menuPlacement: props.menuPlacement, isSearchable: isSearchable, isClearable: isClearable, isMulti: isMulti, isDisabled: isDisabled }),
         error && props.errorMessage && (React__default['default'].createElement(ErrorMessage, null, props.errorMessage)))) : (React__default['default'].createElement(PixelLoader.PixelLoader, null))));
 };