@dnanpm/styleguide 2.0.1 → 2.1.0

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

@@ -7,6 +7,9 @@ var styled = require('styled-components');
 var useElementDimensions = require('../../hooks/useElementDimensions.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 hlX = require('../Icons/hlX.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -66,12 +69,12 @@ const AccordionItem = ({ hasCloseButton = false, highlightSelected = true, ...pr
     return (React__default['default'].createElement(AccordionItemContainer, { id: props.id, "aria-expanded": Boolean(props.isExpanded), className: props.className, isExpanded: Boolean(props.isExpanded), highlightSelected: highlightSelected },
         React__default['default'].createElement(AccordionItemTitle, { tabIndex: 0, onClick: props.onClick, onKeyDown: props.onKeyDown, isExpanded: Boolean(props.isExpanded), highlightSelected: highlightSelected, role: "button" },
             props.title,
-            Boolean(props.isExpanded) ? (React__default['default'].createElement(Icon['default'], { name: "hlChevronUp", size: "1.5rem", right: true, "aria-label": props.closeLabel })) : (React__default['default'].createElement(Icon['default'], { name: "hlChevronDown", size: "1.5rem", right: true, "aria-label": props.openLabel }))),
+            Boolean(props.isExpanded) ? (React__default['default'].createElement(Icon['default'], { icon: hlChevronUp['default'], position: "right", "aria-label": props.closeLabel })) : (React__default['default'].createElement(Icon['default'], { icon: hlChevronDown['default'], 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'], { name: "hlX", size: "1.5rem" })))));
+            React__default['default'].createElement(Icon['default'], { icon: hlX['default'] })))));
 };
 
 exports.default = AccordionItem;

package/build/cjs/components/AmountSelector/AmountSelector.js

@@ -12,9 +12,12 @@ var ButtonSecondary = require('../Buttons/ButtonSecondary.js');
 require('../Buttons/ButtonTertiary.js');
 require('../Buttons/ButtonRoundStyles.js');
 require('../Buttons/CloseButton.js');
-require('../Buttons/ButtonIconStyles.js');
 var Icon = require('../Icon/Icon.js');
+require('../Buttons/ButtonIconStyles.js');
 require('../Buttons/ButtonIconPrimaryStyles.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 }; }
 
@@ -26,6 +29,8 @@ const Container = styled['default'].div `
 
     input {
         width: ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 4)};
+        font-family: ${props => props.theme.fontFamily.default};
+        font-size: ${props => props.theme.fontSize.default};
         border: 0 none;
         text-align: center;
         outline: none;
@@ -39,6 +44,9 @@ const Container = styled['default'].div `
 `;
 const StyledButtonSecondary = styled['default'](ButtonSecondary['default']) `
     min-width: ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 4)};
+    width: ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 4)};
+    height: ${styledUtils.getMultipliedSize(theme['default'].base.baseHeight, 4)};
+    padding: ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 0.6)};
 `;
 /** @visibleName Amount Selector */
 const AmountSelector = ({ onChange, value = 1, step = 1, min = 1, max, disabled = false, readonly = true, 'data-testid': dataTestId, ...props }) => {
@@ -74,10 +82,10 @@ const AmountSelector = ({ onChange, value = 1, step = 1, min = 1, max, disabled
     return (React__default['default'].createElement(Container, { disabled: disabled, "data-testid": dataTestId, className: props.className },
         React__default['default'].createElement(StyledButtonSecondary, { disabled: disabled, onClick: decrease, type: "button", "data-testid": dataTestId &&
                 `${dataTestId}${props.removable && isMinReached(value - step) ? '-remove' : '-decrease'}` },
-            React__default['default'].createElement(Icon['default'], { color: theme['default'].color.black, name: props.removable && isMinReached(value - step) ? 'hlTrash' : 'hlMinus' })),
+            React__default['default'].createElement(Icon['default'], { icon: props.removable && isMinReached(value - step) ? hlTrash['default'] : hlMinus['default'], color: theme['default'].color.black })),
         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(StyledButtonSecondary, { disabled: disabled, onClick: increase, "data-testid": dataTestId ? `${dataTestId}-increase` : undefined, type: "button" },
-            React__default['default'].createElement(Icon['default'], { color: theme['default'].color.black, name: "hlPlus" }))));
+            React__default['default'].createElement(Icon['default'], { icon: hlPlus['default'], color: theme['default'].color.black }))));
 };
 
 exports.default = AmountSelector;

package/build/cjs/components/Buttons/ButtonBasicStyles.js

@@ -33,7 +33,7 @@ const ButtonBasicStyle = styled['default'].button `
     &:focus {
         outline: none;
         color: ${props => props && props.darkBg ? props.theme.color.white : props.theme.color.black};
-        span {
+        span:not(span.dnasg-icon) {
             border-bottom: ${props => `${props.theme.button.border} solid`};
         }
     }
@@ -41,7 +41,7 @@ const ButtonBasicStyle = styled['default'].button `
         background: ${props => props && props.darkBg ? props.theme.color.white : props.theme.color.black};
         color: ${props => props && props.darkBg ? props.theme.color.black : props.theme.color.white};
         text-decoration: none;
-        span {
+        span:not(span.dnasg-icon) {
             border-bottom: 0;
         }
     }
@@ -49,7 +49,7 @@ const ButtonBasicStyle = styled['default'].button `
         opacity: 0.7;
         background: transparent;
         color: ${props => props && props.darkBg ? props.theme.color.white : props.theme.color.black};
-        span {
+        span:not(span.dnasg-icon) {
             border-bottom: 0;
         }
     }
@@ -62,7 +62,7 @@ const ButtonBasicStyle = styled['default'].button `
         pointer-events: none;
     }
 
-    span {
+    span:not(span.dnasg-icon) {
         border-bottom: 0;
         font-size: ${props => props && props.small ? props.theme.fontSize.s : props.theme.fontSize.default};
     }

package/build/cjs/components/Buttons/ButtonIcon.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var ButtonIconStyles = require('./ButtonIconStyles.js');
 var Icon = require('../Icon/Icon.js');
+var ButtonIconStyles = require('./ButtonIconStyles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -14,12 +14,19 @@ const noop = () => { }; // tslint:disable-line
 /** @visibleName Icon Button */
 const ButtonIcon = (props) => {
     const { children, fullWidth, small, loading = false, darkBg, onClick, onMouseDown, disabled = false, className, icon, showTextMobile = true, 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue, type, } = props;
+    // TODO: Remove once https://jira.dna.fi/browse/STYLE-334 is done
+    const renderIcon = () => {
+        if (typeof icon === 'string') {
+            return (React__default['default'].createElement(Icon['default'], { name: icon, size: small ? '1.25rem' : '1.5rem', "data-testid": dataTestId && `${dataTestId}-icon`, "data-no-close": dataNoClose }));
+        }
+        return (React__default['default'].createElement(Icon['default'], { icon: icon, size: small ? '1.25rem' : '1.5rem', "data-testid": dataTestId && `${dataTestId}-icon`, "data-no-close": dataNoClose }));
+    };
     return (React__default['default'].createElement(ButtonIconStyles['default'], { fullWidth: fullWidth, small: small, 
         // There is an issue related to styled-components: react warning: Received `true` for a non-boolean attribute 'loading'.
         // If you want to write it to the DOM, pass a string instead: loading="true"
         // https://github.com/styled-components/styled-components/pull/2093
         darkBg: darkBg, disabled: disabled, onClick: !disabled || !loading ? onClick : noop, onMouseDown: (!disabled || !loading) && onMouseDown ? onMouseDown : noop, className: className, showTextMobile: showTextMobile, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, type: type }, !loading && (React__default['default'].createElement(React__default['default'].Fragment, null,
-        React__default['default'].createElement(Icon['default'], { name: icon, size: "100%", "data-testid": dataTestId && `${dataTestId}-icon`, "data-no-close": dataNoClose }),
+        renderIcon(),
         React__default['default'].createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, children)))));
 };
 

package/build/cjs/components/Buttons/ButtonIconPrimary.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var ButtonIconPrimaryStyles = require('./ButtonIconPrimaryStyles.js');
 var Icon = require('../Icon/Icon.js');
+var ButtonIconPrimaryStyles = require('./ButtonIconPrimaryStyles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -14,12 +14,19 @@ const noop = () => { }; // tslint:disable-line
 /** @visibleName  Icon Button Primary */
 const ButtonIconPrimary = (props) => {
     const { children, fullWidth, small, loading = false, darkBg, onClick, onMouseDown, disabled = false, className, icon, showTextMobile = true, 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue, type, } = props;
+    // TODO: Remove once https://jira.dna.fi/browse/STYLE-334 is done
+    const renderIcon = () => {
+        if (typeof icon === 'string') {
+            return (React__default['default'].createElement(Icon['default'], { name: icon, size: small ? '1.25rem' : '1.5rem', "data-testid": dataTestId && `${dataTestId}-icon`, "data-no-close": dataNoClose }));
+        }
+        return (React__default['default'].createElement(Icon['default'], { icon: icon, size: small ? '1.25rem' : '1.5rem', "data-testid": dataTestId && `${dataTestId}-icon`, "data-no-close": dataNoClose }));
+    };
     return (React__default['default'].createElement(ButtonIconPrimaryStyles['default'], { fullWidth: fullWidth, small: small, 
         // There is an issue related to styled-components: react warning: Received `true` for a non-boolean attribute 'loading'.
         // If you want to write it to the DOM, pass a string instead: loading="true"
         // https://github.com/styled-components/styled-components/pull/2093
         darkBg: darkBg, disabled: disabled, onClick: !disabled || !loading ? onClick : noop, onMouseDown: (!disabled || !loading) && onMouseDown ? onMouseDown : noop, className: className, showTextMobile: showTextMobile, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, type: type }, !loading && (React__default['default'].createElement(React__default['default'].Fragment, null,
-        React__default['default'].createElement(Icon['default'], { name: icon, size: "100%", "data-testid": dataTestId && `${dataTestId}-icon`, "data-no-close": dataNoClose }),
+        renderIcon(),
         React__default['default'].createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, children)))));
 };
 

package/build/cjs/components/Buttons/ButtonIconStyles.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var styled = require('../../themes/styled.js');
-var ButtonBasicStyles = require('./ButtonBasicStyles.js');
 var styledUtils = require('../../utils/styledUtils.js');
+var ButtonBasicStyles = require('./ButtonBasicStyles.js');
 
 const ButtonIconStyles = styled['default'](ButtonBasicStyles['default']) `
     border: none;
@@ -23,11 +23,7 @@ const ButtonIconStyles = styled['default'](ButtonBasicStyles['default']) `
     &:disabled {
         background: none;
     }
-    svg {
-        height: ${p => (p.small ? '1.25em' : '1.5em')};
-        width: ${p => (p.small ? '1.25em' : '1.5em')};
-    }
-    span {
+    span.dnasg-icon + span {
         margin-left: 0.5rem;
         display: ${({ showTextMobile }) => (showTextMobile ? 'block' : 'none')};
         ${styledUtils.media.sm `

package/build/cjs/components/Checkbox/Checkbox.js

@@ -21,6 +21,7 @@ const SVGIconData = () => {
     return `data:image/svg+xml,${svg}`;
 };
 const Container = styled['default'].div `
+    display: flex;
     font-size: ${props => props.theme.fontSize.default};
     line-height: ${props => props.theme.lineHeight.default};
     margin-bottom: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 0.5)};
@@ -45,7 +46,7 @@ const ErrorMessage = styled['default'].div `
     font-size: ${props => props.theme.fontSize.s};
     line-height: ${props => props.theme.lineHeight.s};
     color: ${props => props.theme.color.error};
-    margin-top: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 1)};
+    margin-bottom: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 0.5)};
 `;
 const Checkbox = ({ 'data-testid': dataTestId, ...props }) => {
     const handleChange = () => {
@@ -53,11 +54,12 @@ const Checkbox = ({ 'data-testid': dataTestId, ...props }) => {
             props.onChange(!props.value);
         }
     };
-    return (React__default['default'].createElement(Container, null,
-        React__default['default'].createElement(Input, { id: props.id, className: props.className, type: "checkbox", checked: Boolean(props.value), onChange: handleChange, disabled: props.disabled, "data-testid": dataTestId }),
-        React__default['default'].createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` },
-            props.label,
-            props.required && React__default['default'].createElement(Mandatory, null, "*")),
+    return (React__default['default'].createElement(React__default['default'].Fragment, null,
+        React__default['default'].createElement(Container, null,
+            React__default['default'].createElement(Input, { id: props.id, className: props.className, type: "checkbox", checked: Boolean(props.value), onChange: handleChange, disabled: props.disabled, "data-testid": dataTestId }),
+            React__default['default'].createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` },
+                props.label,
+                props.required && React__default['default'].createElement(Mandatory, null, "*"))),
         props.error && props.errorMessage && (React__default['default'].createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
 };
 

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

@@ -1,7 +1,11 @@
 /// <reference types="react" />
+import { Props as IconProps } from '../Icon/Icon';
 interface Props {
     message: string;
-    icon?: string;
+    /**
+     * @deprecated Use type `Icon` from Icon component
+     */
+    icon?: IconProps['icon'] | string;
     iconSize?: string;
     'data-testid'?: string;
 }

package/build/cjs/components/EmptyState/EmptyState.js

@@ -7,6 +7,7 @@ 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 hlInfo = require('../Icons/hlInfo.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -23,7 +24,7 @@ const InfoContainer = styled['default'].div `
     padding: ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 2)}
         ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 1)} ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 1)};
 
-    ${Icon['default']} {
+    span.dnasg-icon > svg {
         margin-bottom: ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 2)};
     }
 
@@ -32,9 +33,16 @@ const InfoContainer = styled['default'].div `
     `}
 `;
 /** @visibleName Empty State */
-const EmptyState = ({ message, icon = 'hlInfo', iconSize = '2rem', 'data-testid': dataTestId, }) => {
+const EmptyState = ({ message, icon = hlInfo['default'], iconSize = '2rem', 'data-testid': dataTestId, }) => {
+    // TODO: Remove once https://jira.dna.fi/browse/STYLE-334 is done
+    const renderIcon = () => {
+        if (typeof icon === 'string') {
+            return React__default['default'].createElement(Icon['default'], { name: icon, size: iconSize, color: theme['default'].color.hotPink });
+        }
+        return React__default['default'].createElement(Icon['default'], { icon: icon, size: iconSize, color: theme['default'].color.hotPink });
+    };
     return (React__default['default'].createElement(InfoContainer, { "data-testid": dataTestId },
-        React__default['default'].createElement(Icon['default'], { name: icon, size: iconSize, color: theme['default'].color.hotPink }),
+        renderIcon(),
         React__default['default'].createElement(React__default['default'].Fragment, null, message)));
 };
 

package/build/cjs/components/Footer/Components/FooterComponents.js

@@ -6,6 +6,7 @@ var React = require('react');
 var styled = require('../../../themes/styled.js');
 var styledUtils = require('../../../utils/styledUtils.js');
 var Icon = require('../../Icon/Icon.js');
+var hlPlus = require('../../Icons/hlPlus.js');
 var FooterContext = require('../context/FooterContext.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -72,6 +73,8 @@ const CategoryWrapper = styled['default'].div `
     }
 `;
 const CategoryHeader = styled['default'].h4 `
+    display: flex;
+    align-items: center;
     margin: 0;
     padding: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 2)};
     border-top: 1px solid #cfcfcf;
@@ -81,6 +84,7 @@ const CategoryHeader = styled['default'].h4 `
     line-height: ${props => props.theme.lineHeight.default};
     color: ${props => props.theme.color.slateGray};
     align-content: center;
+
     &:hover,
     &:active {
         color: ${props => props.theme.color.hotPink};
@@ -88,10 +92,9 @@ const CategoryHeader = styled['default'].h4 `
     &:hover {
         cursor: pointer;
     }
-    svg {
+    span.dnasg-icon svg {
         transition: transform 0.2s ease-in;
         transform: ${props => (props.active ? 'rotate(45deg)' : 'rotate(0deg)')};
-        margin-right: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 0.4)};
     }
     @media (min-width: ${p => p.collapseSize + 1}px) {
         padding: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 1.6)} 0 0 0;
@@ -254,7 +257,7 @@ const CategoryDisplay = ({ category, currentIndex }) => {
     };
     return (React__default['default'].createElement(CategoryWrapper, { collapseSize: collapseSize, "data-testid": `category-${currentIndex}` },
         React__default['default'].createElement(CategoryHeader, { collapseSize: collapseSize, active: isCollapsed[currentIndex], onClick: toggleCollapse },
-            React__default['default'].createElement(Icon['default'], { name: "plus", size: "0.625em" }),
+            React__default['default'].createElement(Icon['default'], { icon: hlPlus['default'], size: "1rem", position: "left" }),
             category.description[language]),
         React__default['default'].createElement(CategoryLinks, { active: isCollapsed[currentIndex], collapseSize: collapseSize }, categoryLinkArray.map((categoryLink, index) => {
             return (React__default['default'].createElement(CategoryLinksListEl, { key: `category-${currentIndex}-link-${index}`, "data-testid": `category-${currentIndex}-link-${index}`, collapseSize: collapseSize },
@@ -285,7 +288,7 @@ const GeneralInformation = ({ generalInformation }) => {
     return (React__default['default'].createElement(GeneralInformationContainer, { "data-testid": "general-information-section" },
         React__default['default'].createElement("span", null,
             orderedGeneralInformation.map((item, index) => {
-                return (item && (React__default['default'].createElement(GeneralInformationLink, { href: (item.urls && item.urls[language]) || '#', className: item.type && typeToClassMap[item.type], key: `general-information-link-${index}` }, item.titles[language])));
+                return (item && (React__default['default'].createElement(GeneralInformationLink, { href: (item.urls && item.urls[language]) || '#!', className: item.type && typeToClassMap[item.type], key: `general-information-link-${index}` }, item.titles[language])));
             }),
             "DNA \u00A9",
             currentYear)));
@@ -300,7 +303,7 @@ const SocialMediaLinks = ({ socialMedia }) => {
             const currentObject = socialMedia[socialMediaKey];
             const currentMediaUrl = currentObject && currentObject.urls && currentObject.urls[language];
             return (React__default['default'].createElement("a", { href: currentMediaUrl, key: `social-media-link-${socialMediaKey}`, "aria-label": socialMediaName },
-                React__default['default'].createElement(Icon['default'], { name: socialMediaKey.toLowerCase(), size: "1.625em" })));
+                React__default['default'].createElement(Icon['default'], { name: socialMediaKey.toLowerCase() })));
         })));
 };
 

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

@@ -1,147 +1,69 @@
 import React from 'react';
+declare type Position = 'left' | 'right' | 'middle';
 export interface IconProps {
     /**
-     * Size
+     * Icon width and height passed to SVG element.
      *
-     * @default '1em'
+     * Icons can be scaled up by steps of 0.5rem (2.0rem, 2.5rem, 3.0rem). Small version of icons (e.g. hlDownloadSmall)
+     * should be used with size of 1rem and not be scaled up, since details were left out due to their small size.
+     *
+     * @default '1.5rem'
      */
-    size?: string;
+    size: string;
     /**
-     * Icon color, specified as a hex, or a color name (hotPink, waterBlue)
+     * Icon fill color passed to SVG element
+     *
+     * @default 'currentColor'
      */
-    color?: string;
+    color: string;
+}
+export interface Props extends Partial<IconProps> {
     /**
-     * Allows to pass a custom className
+     * Icon to render
+     *
+     * @type Icon
      */
-    className?: string;
+    icon?: React.ComponentType<IconProps>;
+    /**
+     * Icon name
+     *
+     * @deprecated Use property `icon`
+     */
+    name?: string;
+    /**
+     * On Icon click callback
+     */
+    onClick?: (e: React.MouseEvent) => void;
+    /**
+     * Allows to set position of Icon component relative to other content and adds appropriate margins
+     *
+     * @default false
+     * @param {Position} left Icon component is on the left side of content, add right margin
+     * @param {Position} right Icon component is on the right side of content, add left margin
+     * @param {Position} middle Icon component is in the middle of content, add left and right margins
+     */
+    position?: Position;
     /**
      * Indicates that this component is on left side of other content and adds an appropriate right margin.
+     *
+     * @deprecated Use property `position`
      */
     left?: boolean;
     /**
      * Indicates that this component is on right side of other contents and adds an appropriate left margin.
+     *
+     * @deprecated Use property `position`
      */
     right?: boolean;
     /**
-     * Icon name.
+     * Allows to pass a custom className
      */
-    name: string;
+    className?: string;
     /**
-     * On Icon click callback
+     * Allows to pass testid string for testing purposes
      */
-    onClick?: (e: React.MouseEvent) => void;
+    'data-testid'?: string;
 }
-declare const _default: import("styled-components").StyledComponent<React.FunctionComponent<IconProps>, {
-    base: {
-        baseHeight: {
-            value: number;
-            unit: string;
-        };
-        baseWidth: {
-            value: number;
-            unit: string;
-        };
-    };
-    breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
-    button: {
-        border: string;
-    };
-    color: {
-        black: string;
-        white: string;
-        text: string;
-        hotPink: string;
-        waterBlue: string;
-        melonYellow: string;
-        slateGray: string;
-        grayWhite: string;
-        hotPinkHover: string;
-        /**
-         * Size
-         *
-         * @default '1em'
-         */
-        waterBlueHover: string;
-        pink1: string;
-        pink2: string;
-        /**
-         * Icon color, specified as a hex, or a color name (hotPink, waterBlue)
-         */
-        pinkday: string;
-        info: string;
-        error: string;
-        success: string;
-        warning: string;
-        grayBg: string;
-        gray80: string;
-        gray70: string;
-        gray55: string;
-        gray40: string;
-        gray25: string;
-        gray15: string;
-        gray10: string;
-        gray5: string;
-    };
-    fontFamily: {
-        default: string;
-        heading: string;
-        numerals: string;
-    };
-    fontSize: {
-        default: string;
-        xl: string;
-        l: string;
-        s: string;
-        xs: string;
-        h1XL: string;
-        h1L: string;
-        h1M: string;
-        h1S: string;
-        h2M: string;
-        h2S: string; /**
-         * Icon color, specified as a hex, or a color name (hotPink, waterBlue)
-         */
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    fontWeight: {
-        book: number;
-        medium: number;
-        bold: number;
-        black: number;
-    };
-    form: {
-        smallSelectWidth: string;
-        smallSelectHeight: string;
-    };
-    grid: {
-        gutter: string;
-    }; /**
-     * Indicates that this component is on right side of other contents and adds an appropriate left margin.
-     */
-    lineHeight: {
-        default: string;
-        xl: string;
-        s: string;
-        xs: string;
-        xxs: string;
-        auto: string;
-        h1XL: string;
-        h1L: string;
-        h1M: string;
-        h1S: string;
-        h2M: string;
-        h2S: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    media: Record<React.ReactText, (l: TemplateStringsArray, ...p: any[]) => string>;
-}, IconProps, never>;
+declare const Icon: ({ name, icon: IconParam, color, size, "data-testid": dataTestId, ...props }: Props) => JSX.Element | null;
 /** @component */
-export default _default;
+export default Icon;

package/build/cjs/components/Icon/Icon.js

@@ -3,31 +3,50 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var styled = require('../../themes/styled.js');
+var styled = require('styled-components');
 var styledUtils = require('../../utils/styledUtils.js');
+var index = require('../Icons/index.js');
 var Icons = require('./Icons.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const IconsList = Icons;
-const Icon = ({ left, right, color, name, size, ...props }) => {
-    const iconColor = color || 'currentColor';
-    const iconSize = size || '1em';
-    const RenderIcon = IconsList[name];
+const IconsList = index;
+const StandardIconsList = Icons;
+const IconContainer = styled__default['default'].span `
+    width: ${p => p.size};
+    height: ${p => p.size};
+
+    ${p => (p.position === 'right' || p.position === 'middle' || p.right) &&
+    `
+            margin-left: ${styledUtils.getMultipliedSize(p.theme.base.baseWidth, 1)};
+        `}
+
+    ${p => (p.position === 'left' || p.position === 'middle' || p.left) &&
+    `
+            margin-right: ${styledUtils.getMultipliedSize(p.theme.base.baseWidth, 1)};
+        `}
+    
+    svg {
+        width: ${p => p.size};
+        height: ${p => p.size};
+    }
+`;
+const Icon = ({ name, icon: IconParam, color = 'currentColor', size = '1.5rem', 'data-testid': dataTestId, ...props }) => {
+    // TODO: Remove once https://jira.dna.fi/browse/STYLE-334 is done
+    const RenderIcon = name && (IconsList[name] || StandardIconsList[name]);
+    // TODO: Remove once https://jira.dna.fi/browse/STYLE-334 is done
     if (RenderIcon) {
-        return React__default['default'].createElement(RenderIcon, Object.assign({}, props, { size: iconSize, color: iconColor }));
+        return (React__default['default'].createElement(IconContainer, { position: props.position, size: size, left: props.left, right: props.right, className: "dnasg-icon", "data-testid": dataTestId },
+            React__default['default'].createElement(RenderIcon, Object.assign({}, props, { size: size, color: color }))));
+    }
+    if (IconParam) {
+        return (React__default['default'].createElement(IconContainer, { onClick: props.onClick, position: props.position, size: size, className: `dnasg-icon ${props.className || ''}`.trim(), "data-testid": dataTestId, left: props.left, right: props.right },
+            React__default['default'].createElement(IconParam, { size: size, color: color })));
     }
     return null;
-};
-/** @component */
-var Icon$1 = styled['default'](Icon)(({ left, right, size, color, theme }) => ({
-    width: size,
-    height: size,
-    color,
-    marginLeft: right ? styledUtils.getMultipliedSize(theme.base.baseWidth, 1) : 0,
-    marginRight: left ? styledUtils.getMultipliedSize(theme.base.baseWidth, 1) : 0,
-}));
-
-exports.default = Icon$1;
+};
+
+exports.default = Icon;