@dnanpm/styleguide 3.2.0 → 3.3.0

package/build/es/components/ProgressIndicator/ProgressIndicator.js

@@ -1,11 +1,10 @@
 import { __rest } from 'tslib';
+import { Warning, Check } from '@dnanpm/icons';
 import React__default from 'react';
 import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize, media } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
-import { hlSuccess } from '../Icons/hlCheck.js';
-import hlExclamationMark from '../Icons/hlExclamationMark.js';
 
 const getBackgroundColor = ({ isActive, isError, }) => {
     const defaultColor = theme.color.background.white.default;
@@ -116,7 +115,7 @@ const ProgressIndicator = (_a) => {
         };
         return (React__default.createElement(ProgressIndicatorItem, { key: id, small: props.small, "aria-current": isActive ? 'step' : 'false' },
             index > 0 && (React__default.createElement(ProgressIndicatorItemConnector, { small: props.small, isActive: isActive, isCompleted: isCompleted })),
-            React__default.createElement(ProgressIndicatorItemNumber, { small: props.small, onClick: handleClick, isActive: isActive, isCompleted: isCompleted, isError: isError, isClickable: isCompleted && Boolean(props.onStepClick) }, isCompleted || isError ? (React__default.createElement(Icon, { icon: isError ? hlExclamationMark : hlSuccess, color: isError ? theme.color.text.white : theme.color.text.pink, size: "1rem" })) : (stepNumber)),
+            React__default.createElement(ProgressIndicatorItemNumber, { small: props.small, onClick: handleClick, isActive: isActive, isCompleted: isCompleted, isError: isError, isClickable: isCompleted && Boolean(props.onStepClick) }, isCompleted || isError ? (React__default.createElement(Icon, { icon: isError ? Warning : Check, color: isError ? theme.color.text.white : theme.color.text.pink, size: "1rem" })) : (stepNumber)),
             label && (React__default.createElement(ProgressIndicatorItemLabel, { small: props.small, onClick: handleClick, isActive: isActive }, label))));
     });
     return (React__default.createElement(ProgressIndicatorWrapper, { className: props.className, "data-testid": dataTestId }, progressIndicatorItems));

package/build/es/components/ReadMore/ReadMore.js

@@ -1,10 +1,8 @@
+import { ChevronUp, ChevronDown } from '@dnanpm/icons';
 import React__default, { useState, useEffect } from 'react';
 import styled from '../../themes/styled.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
-import 'tslib';
-import hlChevronDown from '../Icons/hlChevronDown.js';
-import hlChevronUp from '../Icons/hlChevronUp.js';
 
 const TruncateContainer = styled.div `
     position: relative;
@@ -49,7 +47,7 @@ const ReadMore = ({ children, showMoreText, showLessText, className, onClick = (
         setExpanded(!expanded);
         onClick(event);
     };
-    const icon = expanded ? hlChevronUp : hlChevronDown;
+    const icon = expanded ? ChevronUp : ChevronDown;
     const buttonText = expanded ? showLessText : showMoreText;
     return (React__default.createElement(TruncateContainer, { expanded: expanded, className: className },
         children,

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

@@ -1,11 +1,10 @@
 import { __rest } from 'tslib';
+import { Close, Search as Search$1 } from '@dnanpm/icons';
 import React__default, { useRef } from 'react';
 import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 import ButtonIcon from '../Button/ButtonIcon.js';
-import hlMagnifyingGlass from '../Icons/hlMagnifyingGlass.js';
-import hlX from '../Icons/hlX.js';
 
 const Container = styled.div `
     display: flex;
@@ -66,7 +65,7 @@ const Search = (_a) => {
     };
     return (React__default.createElement(Container, { className: props.className, "data-testid": dataTestId },
         React__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.createElement(Button, { icon: ((_b = props.value) === null || _b === void 0 ? void 0 : _b.length) ? hlX : hlMagnifyingGlass, name: `${props.name}-button`, onClick: handleButtonClick })));
+        React__default.createElement(Button, { icon: ((_b = props.value) === null || _b === void 0 ? void 0 : _b.length) ? Close : Search$1, name: `${props.name}-button`, onClick: handleButtonClick })));
 };
 
 export { Search as default };

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

@@ -1,12 +1,10 @@
+import { ChevronDown, Check } from '@dnanpm/icons';
 import React__default, { useState, useRef } from 'react';
 import useOutsideClick from '../../hooks/useOutsideClick.js';
 import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
 import { media, getMultipliedSize } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
-import 'tslib';
-import HlCheck from '../Icons/hlCheck.js';
-import hlChevronDown from '../Icons/hlChevronDown.js';
 
 const SecondaryNavigationWrapper = styled.nav `
     font-size: ${theme.fontSize.default};
@@ -160,7 +158,7 @@ const SecondaryNavigation = ({ currentUrl = '', data, lang = 'fi', nextJSSeconda
                     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: hlChevronDown })))),
+                React__default.createElement(Icon, { icon: ChevronDown })))),
         React__default.createElement(SecondaryNavigationList, { id: data.name || `secondary-navigation-category-${(_c = data.categoryId) !== null && _c !== void 0 ? _c : ''}`, isOpen: isSecondaryNavOpen, collapseSize: collapseSize, componentMaxWidth: componentMaxWidth, "data-testid": "secondary-nav-menu-ul" }, (_d = data.pages) === null || _d === void 0 ? void 0 : _d.map((listElement, index) => {
             const linkUrl = listElement.urls[lang];
             const linkTitle = listElement.titles[lang];
@@ -171,12 +169,12 @@ const SecondaryNavigation = ({ currentUrl = '', data, lang = 'fi', nextJSSeconda
             const showNotification = highlightIds.some(el => el === listElement.id);
             const isMenuItemLinkAbsolute = checkIsMenuItemLinkAbsolute(linkUrl);
             return (React__default.createElement(SecondaryNavigationListElement, { key: listElement.id, isActive: isActive, onClick: closeNav, 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: HlCheck }))))) : (React__default.createElement("a", { href: linkUrl, "data-testid": `secondary-nav-item-link-${index + 1}` },
+                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: HlCheck })))))));
+                    React__default.createElement(Icon, { icon: Check })))))));
         }))));
 };
 

package/build/es/components/Selectbox/Selectbox.js

@@ -1,16 +1,11 @@
 import { __rest } from 'tslib';
+import { Close, Error, Lock, Search, ChevronUp, ChevronDown } from '@dnanpm/icons';
 import React__default from 'react';
 import Select, { defaultTheme, components } from 'react-select';
 import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
-import hlChevronDown from '../Icons/hlChevronDown.js';
-import hlChevronUp from '../Icons/hlChevronUp.js';
-import hlError from '../Icons/hlError.js';
-import hlLock from '../Icons/hlLock.js';
-import hlMagnifyingGlass from '../Icons/hlMagnifyingGlass.js';
-import hlX from '../Icons/hlX.js';
 import LabelText from '../LabelText/LabelText.js';
 import PixelLoader from '../PixelLoader/PixelLoader.js';
 
@@ -70,30 +65,30 @@ const getStyles = () => ({
 const MultiValueRemove = (_a) => {
     var multiValueRemoveProps = __rest(_a, []);
     return components.MultiValueRemove && (React__default.createElement(components.MultiValueRemove, { data: multiValueRemoveProps.data, innerProps: multiValueRemoveProps.innerProps, selectProps: multiValueRemoveProps.selectProps },
-        React__default.createElement(Icon, { icon: hlX, size: "1rem" })));
+        React__default.createElement(Icon, { icon: Close, size: "1rem" })));
 };
 const IndicatorsContainer = (_a) => {
     var { selectProps } = _a, indicatorsContainerProps = __rest(_a, ["selectProps"]);
     return components.IndicatorsContainer && (React__default.createElement(components.IndicatorsContainer, { clearValue: indicatorsContainerProps.clearValue, cx: indicatorsContainerProps.cx, getClassNames: indicatorsContainerProps.getClassNames, getStyles: indicatorsContainerProps.getStyles, getValue: indicatorsContainerProps.getValue, hasValue: indicatorsContainerProps.hasValue, isDisabled: selectProps.isDisabled, isMulti: indicatorsContainerProps.isMulti, isRtl: indicatorsContainerProps.isRtl, options: indicatorsContainerProps.options, selectOption: indicatorsContainerProps.selectOption, selectProps: selectProps, setValue: indicatorsContainerProps.setValue, theme: indicatorsContainerProps.theme },
-        selectProps.errorState && (React__default.createElement(Icon, { icon: hlError, color: theme.color.notification.error, position: "right" })),
-        selectProps.isDisabled && React__default.createElement(Icon, { icon: hlLock, position: "right" }),
+        selectProps.errorState && (React__default.createElement(Icon, { icon: Error, color: theme.color.notification.error, position: "right" })),
+        selectProps.isDisabled && React__default.createElement(Icon, { icon: Lock, position: "right" }),
         indicatorsContainerProps.children));
 };
 const ClearIndicator = (_a) => {
     var clearIndicatorProps = __rest(_a, []);
     return components.ClearIndicator && (React__default.createElement(components.ClearIndicator, { clearValue: clearIndicatorProps.clearValue, cx: clearIndicatorProps.cx, getClassNames: clearIndicatorProps.getClassNames, getStyles: clearIndicatorProps.getStyles, getValue: clearIndicatorProps.getValue, hasValue: clearIndicatorProps.hasValue, innerProps: clearIndicatorProps.innerProps, isFocused: clearIndicatorProps.isFocused, isMulti: clearIndicatorProps.isMulti, isRtl: clearIndicatorProps.isRtl, options: clearIndicatorProps.options, selectOption: clearIndicatorProps.selectOption, selectProps: clearIndicatorProps.selectProps, setValue: clearIndicatorProps.setValue, theme: clearIndicatorProps.theme },
-        React__default.createElement(Icon, { icon: hlX })));
+        React__default.createElement(Icon, { icon: Close })));
 };
 const DropdownIndicator = (_a) => {
     var { selectProps } = _a, dropdownIndicatorProps = __rest(_a, ["selectProps"]);
     const getIcon = () => {
         if (selectProps.isSearchable) {
-            return hlMagnifyingGlass;
+            return Search;
         }
-        return selectProps.menuIsOpen ? hlChevronUp : hlChevronDown;
+        return selectProps.menuIsOpen ? ChevronUp : ChevronDown;
     };
     return (components.DropdownIndicator && (React__default.createElement(components.DropdownIndicator, { clearValue: dropdownIndicatorProps.clearValue, cx: dropdownIndicatorProps.cx, getClassNames: dropdownIndicatorProps.getClassNames, getStyles: dropdownIndicatorProps.getStyles, getValue: dropdownIndicatorProps.getValue, hasValue: dropdownIndicatorProps.hasValue, innerProps: dropdownIndicatorProps.innerProps, isDisabled: dropdownIndicatorProps.isDisabled, isFocused: dropdownIndicatorProps.isFocused, isMulti: dropdownIndicatorProps.isMulti, isRtl: dropdownIndicatorProps.isRtl, options: dropdownIndicatorProps.options, selectOption: dropdownIndicatorProps.selectOption, selectProps: selectProps, setValue: dropdownIndicatorProps.setValue, theme: dropdownIndicatorProps.theme },
-        React__default.createElement(Icon, { icon: getIcon(), color: "currentColor", size: "1.5rem" }))));
+        React__default.createElement(Icon, { icon: getIcon() }))));
 };
 const SelectBox = (_a) => {
     var { noOptionsText = '', 'data-testid': dataTestId } = _a, props = __rest(_a, ["noOptionsText", 'data-testid']);

package/build/es/components/Toaster/Toaster.js

@@ -1,4 +1,5 @@
 import { __rest } from 'tslib';
+import { Close, Info, Check, Warning, Error } from '@dnanpm/icons';
 import React__default from 'react';
 import styled__default from 'styled-components';
 import theme from '../../themes/theme.js';
@@ -6,17 +7,12 @@ import { getMultipliedSize, media } from '../../utils/styledUtils.js';
 import Box from '../Box/Box.js';
 import ButtonClose from '../Button/ButtonClose.js';
 import Icon from '../Icon/Icon.js';
-import HlCheck from '../Icons/hlCheck.js';
-import hlError from '../Icons/hlError.js';
-import hlInfo from '../Icons/hlInfo.js';
-import hlWarning from '../Icons/hlWarning.js';
-import hlX from '../Icons/hlX.js';
 
 const iconsMap = {
-    info: hlInfo,
-    success: HlCheck,
-    warning: hlWarning,
-    error: hlError,
+    info: Info,
+    success: Check,
+    warning: Warning,
+    error: Error,
 };
 const ToasterWrapper = styled__default.div `
     width: 300px;
@@ -56,10 +52,10 @@ const Toaster = (_a) => {
     return (React__default.createElement(ToasterWrapper, { role: "alert", "aria-live": "assertive", "aria-atomic": "true", className: props.className, "data-testid": dataTestId },
         React__default.createElement(StyledBox, { type: type, padding: getMultipliedSize(theme.base.baseWidth, 1), elevation: "extraHigh" },
             React__default.createElement(IconWrapper, null,
-                React__default.createElement(Icon, { icon: iconsMap[type], size: "1.8rem", color: theme.color.notification[type] })),
+                React__default.createElement(Icon, { icon: iconsMap[type], size: "2rem", color: theme.color.notification[type] })),
             React__default.createElement(ContentWrapper, null, props.children),
             React__default.createElement(ButtonCloseStyled, { "aria-label": props.closeLabel, onClick: props.onClickCloseButton },
-                React__default.createElement(Icon, { icon: hlX, color: theme.color.text.black })))));
+                React__default.createElement(Icon, { icon: Close, color: theme.color.text.black })))));
 };
 
 export { Toaster as default };

package/build/es/components/Tooltip/Tooltip.js

@@ -1,4 +1,5 @@
 import { __rest } from 'tslib';
+import { Info } from '@dnanpm/icons';
 import React__default from 'react';
 import { Tooltip as Tooltip$1 } from 'react-tooltip';
 import styled from '../../themes/styled.js';
@@ -6,7 +7,6 @@ import theme from '../../themes/theme.js';
 import getElevationShadow from '../../utils/common.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
-import hlInfo from '../Icons/hlInfo.js';
 
 const Helper = styled.div `
     display: inline;
@@ -60,7 +60,7 @@ const Tooltip = (_a) => {
     var { 'data-testid': dataTestId, closeWithEsc = true } = _a, props = __rest(_a, ['data-testid', "closeWithEsc"]);
     return (React__default.createElement(React__default.Fragment, null,
         !props.hideTriggerElement && (React__default.createElement(Helper, { "data-tooltip-id": props.id, isClickable: props.isClickable, className: props.className, "data-testid": dataTestId },
-            React__default.createElement(Icon, { icon: hlInfo, size: "1rem", position: props.position }))),
+            React__default.createElement(Icon, { icon: Info, size: "1rem", position: props.position }))),
         React__default.createElement(StyledReactTooltip, { id: props.id, place: props.placement, closeOnEsc: closeWithEsc, openOnClick: props.isClickable, clickable: props.isHoverable, isMultiline: props.isMultiline, disableStyleInjection: true, "data-testid": dataTestId && `${dataTestId}-content` }, props.children)));
 };
 

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

@@ -1,10 +1,9 @@
+import { ChevronDown } from '@dnanpm/icons';
 import React__default, { 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 'tslib';
-import hlChevronDown from '../Icons/hlChevronDown.js';
 import { TailShadow, Tail } from './ChildComponents/TooltipMenuExportedStyles.js';
 
 const Selector = styled.div `
@@ -55,7 +54,7 @@ const TooltipMenu = ({ selector, className, color = theme.color.text.black, chil
             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: hlChevronDown, size: iconSize, position: "right" })),
+            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 }))),

package/build/es/themes/themeComponents/navigation.d.ts

@@ -29,5 +29,6 @@ declare const navigation: {
     navIconSizeMobile: string;
     subMenuWidth: string;
     subMenuWidthXl: string;
+    headerMaxHeight: string;
 };
 export default navigation;

package/build/es/themes/themeComponents/navigation.js

@@ -29,6 +29,7 @@ const navigation = {
     navIconSizeMobile,
     subMenuWidth,
     subMenuWidthXl,
+    headerMaxHeight,
 };
 
 export { IconContainerMinWidth, IconContainerWidth, navigation as default, desktopLogoSize, desktopNavMaxHeight, headerLogoSize, headerMaxHeight, menuItemMargin, menuLevelsAmount, mobileLogoSize, mobileNavMaxHeight, mobileNavMaxWidth, navIconSize, navIconSizeMobile, navMaxHeight, ribbonHeight, subMenuWidth, subMenuWidthXl, wideMenuBreakpoint };

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@dnanpm/styleguide",
     "sideEffects": false,
-    "version": "3.2.0",
+    "version": "3.3.0",
     "main": "build/cjs/index.js",
     "module": "build/es/index.js",
     "jsnext:main": "build/es/index.js",
@@ -47,6 +47,7 @@
         "@babel/preset-env": "^7.22.10",
         "@babel/preset-react": "^7.22.5",
         "@babel/preset-typescript": "^7.22.11",
+        "@dnanpm/icons": "^2.0.0-alpha14",
         "@rollup/plugin-commonjs": "^25.0.4",
         "@rollup/plugin-node-resolve": "^15.2.1",
         "@rollup/plugin-typescript": "^11.1.5",
@@ -105,6 +106,7 @@
         "react-tooltip": "^5.21.5"
     },
     "peerDependencies": {
+        "@dnanpm/icons": "^2.x",
         "react": "^17.x",
         "react-dom": "^17.x",
         "styled-components": "5.x"