@dnanpm/styleguide 3.2.0 → 3.3.0

package/build/cjs/components/TooltipMenu/TooltipMenu.js

@@ -2,13 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var icons = require('@dnanpm/icons');
 var React = require('react');
 var useOutsideClick = require('../../hooks/useOutsideClick.js');
 var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 var Icon = require('../Icon/Icon.js');
-require('tslib');
-var hlChevronDown = require('../Icons/hlChevronDown.js');
 var TooltipMenuExportedStyles = require('./ChildComponents/TooltipMenuExportedStyles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -63,7 +62,7 @@ const TooltipMenu = ({ selector, className, color = theme["default"].color.text.
             tooltipIcon && React__default["default"].createElement(Icon["default"], { icon: tooltipIcon, size: tooltipIconSize, position: "left" }),
             tooltipIconName && (React__default["default"].createElement(Icon["default"], { name: tooltipIconName, size: tooltipIconSize, position: "left" })),
             React__default["default"].createElement("span", null, selector),
-            tooltipChevron && React__default["default"].createElement(Icon["default"], { icon: hlChevronDown["default"], size: iconSize, position: "right" })),
+            tooltipChevron && React__default["default"].createElement(Icon["default"], { icon: icons.ChevronDown, size: iconSize, position: "right" })),
         showDropdown && (React__default["default"].createElement(React__default["default"].Fragment, null,
             React__default["default"].createElement(TooltipMenuExportedStyles.TailShadow, { zIndex: zIndex, tooltipTop: tooltipTop, arrowPosition: arrowPosition }),
             React__default["default"].createElement(TooltipMenuExportedStyles.Tail, { zIndex: zIndex, tooltipTop: tooltipTop, arrowPosition: arrowPosition }))),

package/build/cjs/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/cjs/themes/themeComponents/navigation.js

@@ -33,6 +33,7 @@ const navigation = {
     navIconSizeMobile,
     subMenuWidth,
     subMenuWidthXl,
+    headerMaxHeight,
 };
 
 exports.IconContainerMinWidth = IconContainerMinWidth;

package/build/es/components/AccordionItem/AccordionItem.js

@@ -1,4 +1,5 @@
 import { __rest } from 'tslib';
+import { ChevronUp, ChevronDown, Close } from '@dnanpm/icons';
 import React__default from 'react';
 import styled__default, { css } from 'styled-components';
 import useResizeObserver from '../../hooks/useResizeObserver.js';
@@ -6,9 +7,6 @@ import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 import Box from '../Box/Box.js';
 import Icon from '../Icon/Icon.js';
-import hlChevronDown from '../Icons/hlChevronDown.js';
-import hlChevronUp from '../Icons/hlChevronUp.js';
-import hlX from '../Icons/hlX.js';
 
 const AccordionItemContainer = styled__default.div `
     ${p => p.type === 'panel' &&
@@ -64,12 +62,12 @@ const AccordionItem = (_a) => {
     const itemContent = (React__default.createElement(AccordionItemContainer, { id: props.id, type: type, "aria-expanded": Boolean(props.isExpanded), className: props.className },
         React__default.createElement(AccordionItemTitle, { tabIndex: 0, onClick: props.onClick, onKeyDown: props.onKeyDown, isExpanded: Boolean(props.isExpanded), highlightSelected: highlightSelected, role: "button" },
             props.title,
-            props.isExpanded ? (React__default.createElement(Icon, { icon: hlChevronUp, color: theme.color.default.black, position: "right", "aria-label": props.closeLabel })) : (React__default.createElement(Icon, { icon: hlChevronDown, color: theme.color.default.black, position: "right", "aria-label": props.openLabel }))),
+            props.isExpanded ? (React__default.createElement(Icon, { icon: ChevronUp, color: theme.color.default.black, position: "right", "aria-label": props.closeLabel })) : (React__default.createElement(Icon, { icon: ChevronDown, color: theme.color.default.black, position: "right", "aria-label": props.openLabel }))),
         React__default.createElement(AccordionItemContentWrapper, { maxHeight: contentHeight, isExpanded: props.isExpanded },
             React__default.createElement(AccordionItemContent, { ref: contentRef }, props.children)),
         hasCloseButton && props.isExpanded && (React__default.createElement(AccordionItemCloseButton, { tabIndex: 0, onClick: props.onClick, onKeyDown: props.onKeyDown, "aria-label": props.closeLabel, role: "button" },
             React__default.createElement("span", null, props.closeLabel),
-            React__default.createElement(Icon, { icon: hlX })))));
+            React__default.createElement(Icon, { icon: Close })))));
     return type === 'box' ? (React__default.createElement(Box, { elevation: props.isExpanded ? 'low' : 'none', padding: "0" }, itemContent)) : (itemContent);
 };
 

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

@@ -48,7 +48,7 @@ interface Props {
     readonly?: boolean;
     /**
      * Allows the `onChange` function to be called even after `min` property value is reached.
-     * When defined and `min` property value is reached, the `hlMinus` icon  changes to `hlTrash` icon
+     * When defined and `min` property value is reached, the `Minus` icon  changes to `Trash` icon
      */
     removable?: boolean;
     /**

package/build/es/components/AmountSelector/AmountSelector.js

@@ -1,13 +1,11 @@
 import { __rest } from 'tslib';
+import { Trash, Minus, Plus } from '@dnanpm/icons';
 import React__default from 'react';
 import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 import ButtonArrow from '../Button/ButtonArrow.js';
 import Icon from '../Icon/Icon.js';
-import hlMinus from '../Icons/hlMinus.js';
-import hlPlus from '../Icons/hlPlus.js';
-import hlTrash from '../Icons/hlTrash.js';
 
 const Container = styled.div `
     display: flex;
@@ -102,10 +100,10 @@ const AmountSelector = (_a) => {
         }
     };
     return (React__default.createElement(Container, { "data-testid": dataTestId, className: props.className },
-        React__default.createElement(Button, { icon: React__default.createElement(Icon, { icon: props.removable && isMinReached(value - step) ? hlTrash : hlMinus, size: getMultipliedSize(theme.base.baseWidth, 2) }), variant: "secondary", onClick: decrease, disabled: disabled, type: "button", "data-testid": dataTestId &&
+        React__default.createElement(Button, { icon: React__default.createElement(Icon, { icon: props.removable && isMinReached(value - step) ? Trash : Minus, size: getMultipliedSize(theme.base.baseWidth, 2) }), variant: "secondary", onClick: decrease, disabled: disabled, type: "button", "data-testid": dataTestId &&
                 `${dataTestId}${props.removable && isMinReached(value - step) ? '-remove' : '-decrease'}` }),
         React__default.createElement(Input, { id: props.id, name: props.name, type: "number", onChange: handleChange, value: value, readOnly: readonly || disabled, disabled: disabled }),
-        React__default.createElement(Button, { icon: React__default.createElement(Icon, { icon: hlPlus, size: getMultipliedSize(theme.base.baseWidth, 2) }), variant: "secondary", onClick: increase, disabled: disabled, type: "button", "data-testid": dataTestId ? `${dataTestId}-increase` : undefined })));
+        React__default.createElement(Button, { icon: React__default.createElement(Icon, { icon: Plus, size: getMultipliedSize(theme.base.baseWidth, 2) }), variant: "secondary", onClick: increase, disabled: disabled, type: "button", "data-testid": dataTestId ? `${dataTestId}-increase` : undefined })));
 };
 
 export { AmountSelector as default };

package/build/es/components/Button/ButtonArrow.d.ts

@@ -8,10 +8,10 @@ type Props = ({
      * Allows to change the direction of chevron icon.
      * Either `direction` or `icon` has to be defined
      *
-     * @param {ButtonArrowDirection} up Uses `hlChevronUp` icon as content of component
-     * @param {ButtonArrowDirection} right Uses `hlChevronRight` icon as content of component
-     * @param {ButtonArrowDirection} down Uses `hlChevronDown` icon as content of component
-     * @param {ButtonArrowDirection} left Uses `hlChevronLeft` icon as content of component
+     * @param {ButtonArrowDirection} up Uses `ChevronUp` icon as content of component
+     * @param {ButtonArrowDirection} right Uses `ChevronRight` icon as content of component
+     * @param {ButtonArrowDirection} down Uses `ChevronDown` icon as content of component
+     * @param {ButtonArrowDirection} left Uses `ChevronLeft` icon as content of component
      */
     direction: ButtonArrowDirection;
     icon?: never;

package/build/es/components/Button/ButtonArrow.js

@@ -1,21 +1,18 @@
 import { __rest } from 'tslib';
+import { ChevronUp, ChevronRight, ChevronDown, ChevronLeft } from '@dnanpm/icons';
 import React__default, { isValidElement } from 'react';
 import styled__default from 'styled-components';
 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 hlChevronLeft from '../Icons/hlChevronLeft.js';
-import hlChevronRight from '../Icons/hlChevronRight.js';
-import hlChevronUp from '../Icons/hlChevronUp.js';
 import ButtonPrimary from './ButtonPrimary.js';
 import ButtonSecondary from './ButtonSecondary.js';
 
 const iconsMap = {
-    up: hlChevronUp,
-    right: hlChevronRight,
-    down: hlChevronDown,
-    left: hlChevronLeft,
+    up: ChevronUp,
+    right: ChevronRight,
+    down: ChevronDown,
+    left: ChevronLeft,
 };
 const overrideStyles = `
     display: flex;

package/build/es/components/Button/ButtonIcon.d.ts

@@ -5,7 +5,7 @@ interface Props extends Omit<ButtonProps, 'fullWidth'> {
     /**
      * Icon shown in icon button component
      *
-     * @default `hlPen`
+     * @default `EditUnderline`
      */
     icon?: IconProps['icon'];
     /**

package/build/es/components/Button/ButtonIcon.js

@@ -1,10 +1,10 @@
 import { __rest } from 'tslib';
+import { EditUnderline } from '@dnanpm/icons';
 import React__default from 'react';
 import styled__default, { css } from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getDividedSize, media } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
-import hlPen from '../Icons/hlPen.js';
 import PixelLoader from '../PixelLoader/PixelLoader.js';
 
 const ButtonElement = styled__default.button `
@@ -75,7 +75,7 @@ const ButtonElement = styled__default.button `
 `;
 /** @visibleName Button Icon */
 const ButtonIcon = (_a) => {
-    var { icon = hlPen, 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = __rest(_a, ["icon", 'data-testid', 'data-no-close', 'data-track-value']);
+    var { icon = EditUnderline, 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = __rest(_a, ["icon", 'data-testid', 'data-no-close', 'data-track-value']);
     return (React__default.createElement(ButtonElement, { id: props.id, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, disabled: props.disabled, hideChildrenMobile: props.hideChildrenMobile, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue }, props.loading ? (React__default.createElement(PixelLoader, { color: props.darkBg ? theme.color.default.white : theme.color.default.black })) : (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(Icon, { icon: icon, color: props.darkBg ? theme.color.default.white : theme.color.default.pink, size: props.small ? '1.25rem' : '1.5rem', position: props.children ? 'left' : undefined }),
         props.children && (React__default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))))));

package/build/es/components/DateTimePicker/DateTimePicker.js

@@ -1,12 +1,11 @@
 import { __rest } from 'tslib';
+import { ChevronLeft, ChevronRight } from '@dnanpm/icons';
 import React__default, { useState } from 'react';
 import ReactDatePicker from 'react-datepicker';
 import styled__default from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 import ButtonIcon from '../Button/ButtonIcon.js';
-import hlChevronLeft from '../Icons/hlChevronLeft.js';
-import hlChevronRight from '../Icons/hlChevronRight.js';
 import Input from '../Input/Input.js';
 
 /**
@@ -216,12 +215,12 @@ const CurrentMonth = styled__default.div `
     font-weight: ${theme.fontWeight.bold};
 `;
 const DateTimePickerCustomHeader = ({ date, decreaseMonth, increaseMonth, locale, }) => (React__default.createElement(MonthSelector, null,
-    React__default.createElement(ButtonIcon, { icon: hlChevronLeft, onClick: decreaseMonth }),
+    React__default.createElement(ButtonIcon, { icon: ChevronLeft, onClick: decreaseMonth }),
     React__default.createElement(CurrentMonth, null, sentenceCase(date.toLocaleString(locale, {
         month: 'long',
         year: 'numeric',
     }))),
-    React__default.createElement(ButtonIcon, { icon: hlChevronRight, onClick: increaseMonth })));
+    React__default.createElement(ButtonIcon, { icon: ChevronRight, onClick: increaseMonth })));
 /** @visibleName DateTime Picker */
 const DateTimePicker = (_a) => {
     var _b;

package/build/es/components/Drawer/Drawer.js

@@ -1,4 +1,5 @@
 import { __rest } from 'tslib';
+import { Close } from '@dnanpm/icons';
 import React__default from 'react';
 import ReactModal from 'react-modal';
 import styled, { createGlobalStyle } from '../../themes/styled.js';
@@ -7,7 +8,6 @@ import { media } from '../../utils/styledUtils.js';
 import Box from '../Box/Box.js';
 import ButtonClose from '../Button/ButtonClose.js';
 import Icon from '../Icon/Icon.js';
-import hlX from '../Icons/hlX.js';
 
 const sizeMap = {
     small: '375px',
@@ -115,7 +115,7 @@ const Drawer = (_a) => {
             React__default.createElement(StyledBox, { elevation: "extraHigh", margin: props.margin, padding: props.padding, "data-testid": dataTestId },
                 props.children,
                 closeButton && isClosable && (React__default.createElement(ButtonClose, { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button` },
-                    React__default.createElement(Icon, { icon: hlX }))))),
+                    React__default.createElement(Icon, { icon: Close }))))),
         React__default.createElement(GlobalStyle, null)));
 };
 

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

@@ -13,7 +13,7 @@ interface Props {
     /**
      * Icon shown in the component
      *
-     * @default `hlInfo`
+     * @default `Info`
      */
     icon?: IconProps['icon'];
     /**

package/build/es/components/EmptyState/EmptyState.js

@@ -1,11 +1,11 @@
 import { __rest } from 'tslib';
+import { Info } from '@dnanpm/icons';
 import React__default from 'react';
 import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 import Box from '../Box/Box.js';
 import Icon from '../Icon/Icon.js';
-import hlInfo from '../Icons/hlInfo.js';
 
 const ContentWrapper = styled.div `
     display: grid;
@@ -15,7 +15,7 @@ const ContentWrapper = styled.div `
 `;
 /** @visibleName Empty State */
 const EmptyState = (_a) => {
-    var { icon = hlInfo, iconSize = '2rem', 'data-testid': dataTestId } = _a, props = __rest(_a, ["icon", "iconSize", 'data-testid']);
+    var { icon = Info, iconSize = '2rem', 'data-testid': dataTestId } = _a, props = __rest(_a, ["icon", "iconSize", 'data-testid']);
     return (React__default.createElement(Box, { id: props.id, padding: "1.875rem", className: props.className, "data-testid": dataTestId },
         React__default.createElement(ContentWrapper, null,
             React__default.createElement(Icon, { icon: icon, size: iconSize, color: theme.color.default.pink }),

package/build/es/components/Footer/Components/FooterComponents.d.ts

@@ -1,12 +1,10 @@
 import React from 'react';
-import type { CategoryArrayProps, FooterNavigationProps, GeneralInformationComponentProps, LanguageComponentProps, LanguageSelectorProps } from '../types/footerProps';
+import type { CategoriesComponentProps, FooterNavigationProps, GeneralInformationComponentProps, LanguageSelectorProps } from '../types/footerProps';
 export declare const mapCorporateSelector: (languagesObject: LanguageSelectorProps) => {
     title: string;
     url: string;
 }[];
-export declare const Services: ({ services }: FooterNavigationProps) => React.JSX.Element;
-export declare const CategoryDisplay: ({ category, currentIndex }: CategoryArrayProps) => React.JSX.Element;
-export declare const Categories: ({ categories }: FooterNavigationProps) => React.JSX.Element;
-export declare const LanguageLinks: ({ languages }: LanguageComponentProps) => React.JSX.Element;
+export declare const TopSection: ({ topSection }: FooterNavigationProps) => React.JSX.Element;
+export declare const Categories: ({ categories }: CategoriesComponentProps) => React.JSX.Element;
 export declare const GeneralInformation: ({ generalInformation }: GeneralInformationComponentProps) => React.JSX.Element | null;
 export declare const SocialMediaLinks: ({ socialMedia }: FooterNavigationProps) => React.JSX.Element;