@dnanpm/styleguide 3.2.0 → 3.3.0

package/build/cjs/components/AccordionItem/AccordionItem.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
+var icons = require('@dnanpm/icons');
 var React = require('react');
 var styled = require('styled-components');
 var useResizeObserver = require('../../hooks/useResizeObserver.js');
@@ -10,9 +11,6 @@ var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var Box = require('../Box/Box.js');
 var Icon = require('../Icon/Icon.js');
-var hlChevronDown = require('../Icons/hlChevronDown.js');
-var hlChevronUp = require('../Icons/hlChevronUp.js');
-var hlX = require('../Icons/hlX.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -73,12 +71,12 @@ const AccordionItem = (_a) => {
     const itemContent = (React__default["default"].createElement(AccordionItemContainer, { id: props.id, type: type, "aria-expanded": Boolean(props.isExpanded), className: props.className },
         React__default["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["default"].createElement(Icon["default"], { icon: hlChevronUp["default"], color: theme["default"].color.default.black, position: "right", "aria-label": props.closeLabel })) : (React__default["default"].createElement(Icon["default"], { icon: hlChevronDown["default"], color: theme["default"].color.default.black, position: "right", "aria-label": props.openLabel }))),
+            props.isExpanded ? (React__default["default"].createElement(Icon["default"], { icon: icons.ChevronUp, color: theme["default"].color.default.black, position: "right", "aria-label": props.closeLabel })) : (React__default["default"].createElement(Icon["default"], { icon: icons.ChevronDown, color: theme["default"].color.default.black, position: "right", "aria-label": props.openLabel }))),
         React__default["default"].createElement(AccordionItemContentWrapper, { maxHeight: contentHeight, isExpanded: props.isExpanded },
             React__default["default"].createElement(AccordionItemContent, { ref: contentRef }, props.children)),
         hasCloseButton && props.isExpanded && (React__default["default"].createElement(AccordionItemCloseButton, { tabIndex: 0, onClick: props.onClick, onKeyDown: props.onKeyDown, "aria-label": props.closeLabel, role: "button" },
             React__default["default"].createElement("span", null, props.closeLabel),
-            React__default["default"].createElement(Icon["default"], { icon: hlX["default"] })))));
+            React__default["default"].createElement(Icon["default"], { icon: icons.Close })))));
     return type === 'box' ? (React__default["default"].createElement(Box["default"], { elevation: props.isExpanded ? 'low' : 'none', padding: "0" }, itemContent)) : (itemContent);
 };
 

package/build/cjs/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/cjs/components/AmountSelector/AmountSelector.js

@@ -3,15 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
+var icons = require('@dnanpm/icons');
 var React = require('react');
 var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var ButtonArrow = require('../Button/ButtonArrow.js');
 var Icon = require('../Icon/Icon.js');
-var hlMinus = require('../Icons/hlMinus.js');
-var hlPlus = require('../Icons/hlPlus.js');
-var hlTrash = require('../Icons/hlTrash.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -110,10 +108,10 @@ const AmountSelector = (_a) => {
         }
     };
     return (React__default["default"].createElement(Container, { "data-testid": dataTestId, className: props.className },
-        React__default["default"].createElement(Button, { icon: React__default["default"].createElement(Icon["default"], { icon: props.removable && isMinReached(value - step) ? hlTrash["default"] : hlMinus["default"], size: styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2) }), variant: "secondary", onClick: decrease, disabled: disabled, type: "button", "data-testid": dataTestId &&
+        React__default["default"].createElement(Button, { icon: React__default["default"].createElement(Icon["default"], { icon: props.removable && isMinReached(value - step) ? icons.Trash : icons.Minus, size: styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2) }), variant: "secondary", onClick: decrease, disabled: disabled, type: "button", "data-testid": dataTestId &&
                 `${dataTestId}${props.removable && isMinReached(value - step) ? '-remove' : '-decrease'}` }),
         React__default["default"].createElement(Input, { id: props.id, name: props.name, type: "number", onChange: handleChange, value: value, readOnly: readonly || disabled, disabled: disabled }),
-        React__default["default"].createElement(Button, { icon: React__default["default"].createElement(Icon["default"], { icon: hlPlus["default"], size: styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2) }), variant: "secondary", onClick: increase, disabled: disabled, type: "button", "data-testid": dataTestId ? `${dataTestId}-increase` : undefined })));
+        React__default["default"].createElement(Button, { icon: React__default["default"].createElement(Icon["default"], { icon: icons.Plus, size: styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2) }), variant: "secondary", onClick: increase, disabled: disabled, type: "button", "data-testid": dataTestId ? `${dataTestId}-increase` : undefined })));
 };
 
 exports["default"] = AmountSelector;

package/build/cjs/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/cjs/components/Button/ButtonArrow.js

@@ -3,15 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
+var icons = require('@dnanpm/icons');
 var React = require('react');
 var styled = require('styled-components');
 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 hlChevronLeft = require('../Icons/hlChevronLeft.js');
-var hlChevronRight = require('../Icons/hlChevronRight.js');
-var hlChevronUp = require('../Icons/hlChevronUp.js');
 var ButtonPrimary = require('./ButtonPrimary.js');
 var ButtonSecondary = require('./ButtonSecondary.js');
 
@@ -21,10 +18,10 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const iconsMap = {
-    up: hlChevronUp["default"],
-    right: hlChevronRight["default"],
-    down: hlChevronDown["default"],
-    left: hlChevronLeft["default"],
+    up: icons.ChevronUp,
+    right: icons.ChevronRight,
+    down: icons.ChevronDown,
+    left: icons.ChevronLeft,
 };
 const overrideStyles = `
     display: flex;

package/build/cjs/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/cjs/components/Button/ButtonIcon.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
+var icons = require('@dnanpm/icons');
 var React = require('react');
 var styled = require('styled-components');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var Icon = require('../Icon/Icon.js');
-var hlPen = require('../Icons/hlPen.js');
 var PixelLoader = require('../PixelLoader/PixelLoader.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -84,7 +84,7 @@ const ButtonElement = styled__default["default"].button `
 `;
 /** @visibleName Button Icon */
 const ButtonIcon = (_a) => {
-    var { icon = hlPen["default"], 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = tslib.__rest(_a, ["icon", 'data-testid', 'data-no-close', 'data-track-value']);
+    var { icon = icons.EditUnderline, 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = tslib.__rest(_a, ["icon", 'data-testid', 'data-no-close', 'data-track-value']);
     return (React__default["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["default"].createElement(PixelLoader["default"], { color: props.darkBg ? theme["default"].color.default.white : theme["default"].color.default.black })) : (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(Icon["default"], { icon: icon, color: props.darkBg ? theme["default"].color.default.white : theme["default"].color.default.pink, size: props.small ? '1.25rem' : '1.5rem', position: props.children ? 'left' : undefined }),
         props.children && (React__default["default"].createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))))));

package/build/cjs/components/DateTimePicker/DateTimePicker.js

@@ -3,14 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
+var icons = require('@dnanpm/icons');
 var React = require('react');
 var ReactDatePicker = require('react-datepicker');
 var styled = require('styled-components');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var ButtonIcon = require('../Button/ButtonIcon.js');
-var hlChevronLeft = require('../Icons/hlChevronLeft.js');
-var hlChevronRight = require('../Icons/hlChevronRight.js');
 var Input = require('../Input/Input.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -226,12 +225,12 @@ const CurrentMonth = styled__default["default"].div `
     font-weight: ${theme["default"].fontWeight.bold};
 `;
 const DateTimePickerCustomHeader = ({ date, decreaseMonth, increaseMonth, locale, }) => (React__default["default"].createElement(MonthSelector, null,
-    React__default["default"].createElement(ButtonIcon["default"], { icon: hlChevronLeft["default"], onClick: decreaseMonth }),
+    React__default["default"].createElement(ButtonIcon["default"], { icon: icons.ChevronLeft, onClick: decreaseMonth }),
     React__default["default"].createElement(CurrentMonth, null, sentenceCase(date.toLocaleString(locale, {
         month: 'long',
         year: 'numeric',
     }))),
-    React__default["default"].createElement(ButtonIcon["default"], { icon: hlChevronRight["default"], onClick: increaseMonth })));
+    React__default["default"].createElement(ButtonIcon["default"], { icon: icons.ChevronRight, onClick: increaseMonth })));
 /** @visibleName DateTime Picker */
 const DateTimePicker = (_a) => {
     var _b;

package/build/cjs/components/Drawer/Drawer.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
+var icons = require('@dnanpm/icons');
 var React = require('react');
 var ReactModal = require('react-modal');
 var styled = require('../../themes/styled.js');
@@ -11,7 +12,6 @@ var styledUtils = require('../../utils/styledUtils.js');
 var Box = require('../Box/Box.js');
 var ButtonClose = require('../Button/ButtonClose.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 }; }
 
@@ -124,7 +124,7 @@ const Drawer = (_a) => {
             React__default["default"].createElement(StyledBox, { elevation: "extraHigh", margin: props.margin, padding: props.padding, "data-testid": dataTestId },
                 props.children,
                 closeButton && isClosable && (React__default["default"].createElement(ButtonClose["default"], { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button` },
-                    React__default["default"].createElement(Icon["default"], { icon: hlX["default"] }))))),
+                    React__default["default"].createElement(Icon["default"], { icon: icons.Close }))))),
         React__default["default"].createElement(GlobalStyle, null)));
 };
 

package/build/cjs/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/cjs/components/EmptyState/EmptyState.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
+var icons = require('@dnanpm/icons');
 var React = require('react');
 var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var Box = require('../Box/Box.js');
 var Icon = require('../Icon/Icon.js');
-var hlInfo = require('../Icons/hlInfo.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -23,7 +23,7 @@ const ContentWrapper = styled["default"].div `
 `;
 /** @visibleName Empty State */
 const EmptyState = (_a) => {
-    var { icon = hlInfo["default"], iconSize = '2rem', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["icon", "iconSize", 'data-testid']);
+    var { icon = icons.Info, iconSize = '2rem', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["icon", "iconSize", 'data-testid']);
     return (React__default["default"].createElement(Box["default"], { id: props.id, padding: "1.875rem", className: props.className, "data-testid": dataTestId },
         React__default["default"].createElement(ContentWrapper, null,
             React__default["default"].createElement(Icon["default"], { icon: icon, size: iconSize, color: theme["default"].color.default.pink }),

package/build/cjs/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;