@dnanpm/styleguide 2.0.1 → 2.2.0

package/README.md

@@ -14,7 +14,7 @@ Styles and styled components for DNA.
 
 ### Theme
 
-```javascript
+```js
 import { createStyled, theme as defaultTheme } from '@dnanpm/styleguide';
 
 const color = {
@@ -38,7 +38,7 @@ export const { styled, css } = createStyled<ThemeInterface>();
 export default theme;
 ```
 
-```javascript
+```js
 import theme from './theme';
 
 class MyApp {
@@ -56,7 +56,7 @@ class MyApp {
 
 ### Button
 
-```javascript
+```js
 import { ButtonPrimary } from '@dnanpm/styleguide';
 
 interface Props {

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

@@ -1,5 +1,6 @@
 import React from 'react';
-export interface Props {
+import type { Props as AccordionItemProps } from './AccordionItem';
+interface Props extends Omit<AccordionItemProps, 'title' | 'id' | 'children' | 'onClick' | 'onKeyDown'> {
     /**
      * Content of Accordion
      *
@@ -12,39 +13,8 @@ export interface Props {
      * @default false
      */
     autoCollapsible?: boolean;
-    /**
-     * Allows to remove item title highlight when it is in expanded state
-     * Removes also highlight of CSS :hover and :active states
-     *
-     * @default true
-     */
-    highlightSelected?: boolean;
-    /**
-     * Allows to expand or collapse the component
-     *
-     * @default false
-     */
-    isExpanded?: boolean;
-    /**
-     * Display close button in the item content
-     *
-     * @default false
-     */
-    hasCloseButton?: boolean;
-    /**
-     * Label to show for the open icon for accessibility
-     */
-    openLabel?: string;
-    /**
-     * Label to show for the close button in the content
-     */
-    closeLabel?: string;
-    /**
-     * Allows to pass a custom className
-     */
-    className?: string;
 }
 /** @visibleName Accordion */
-declare const Accordion: ({ autoCollapsible, highlightSelected, hasCloseButton, ...props }: Props) => JSX.Element;
+declare const Accordion: ({ autoCollapsible, highlightSelected, hasCloseButton, ...props }: Props) => JSX.Element | null;
 /** @component */
 export default Accordion;

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

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var tslib = require('tslib');
 var React = require('react');
 var AccordionItem = require('./AccordionItem.js');
 
@@ -10,7 +11,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 /** @visibleName Accordion */
-const Accordion = ({ autoCollapsible = false, highlightSelected = true, hasCloseButton = false, ...props }) => {
+const Accordion = (_a) => {
+    var { autoCollapsible = false, highlightSelected = true, hasCloseButton = false } = _a, props = tslib.__rest(_a, ["autoCollapsible", "highlightSelected", "hasCloseButton"]);
     const initialItemList = {};
     const getAccordionItemId = (index, title) => `${title.replace(/\s+/g, '')}-${index}`;
     if (props.isExpanded) {
@@ -22,29 +24,31 @@ const Accordion = ({ autoCollapsible = false, highlightSelected = true, hasClose
     }
     const [itemList, setItemList] = React.useState(initialItemList);
     const toggleExpanded = (currentItemId) => {
-        const currentItemState = itemList[currentItemId];
-        setItemList({
-            ...(autoCollapsible ? {} : itemList),
-            [currentItemId]: !currentItemState,
-        });
+        if (currentItemId) {
+            const currentItemState = itemList[currentItemId];
+            setItemList(Object.assign(Object.assign({}, (autoCollapsible ? {} : itemList)), { [currentItemId]: !currentItemState }));
+        }
     };
     const handleClick = (e) => {
-        toggleExpanded(e.currentTarget.parentElement.id);
+        var _a, _b;
+        toggleExpanded((_b = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.id);
     };
     const handleKeyDown = (e) => {
+        var _a, _b;
         if (e.key === 'Enter' || e.key === ' ') {
             e.preventDefault();
-            toggleExpanded(e.currentTarget.parentElement.id);
+            toggleExpanded((_b = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.id);
         }
     };
     const accordionItems = React__default['default'].Children.map(props.children, (child, index) => {
         if (React__default['default'].isValidElement(child) && child.type === AccordionItem['default']) {
             const id = getAccordionItemId(index, child.props.title);
-            return (React__default['default'].createElement(AccordionItem['default'], Object.assign({ id: id, key: id, title: child.props.title, isExpanded: itemList[id], hasCloseButton: hasCloseButton, highlightSelected: highlightSelected, openLabel: props.openLabel, closeLabel: props.closeLabel, onClick: handleClick, onKeyDown: handleKeyDown }, child.props), child.props.children));
+            return (React__default['default'].createElement(AccordionItem['default'], { id: id, key: id, title: child.props.title, isExpanded: itemList[id], highlightSelected: highlightSelected, hasCloseButton: hasCloseButton, openLabel: props.openLabel, closeLabel: props.closeLabel, onClick: handleClick, onKeyDown: handleKeyDown, className: child.props.className }, child.props.children));
         }
+        return null;
     });
     if (!accordionItems) {
-        return React__default['default'].createElement(React__default['default'].Fragment, null);
+        return null;
     }
     return React__default['default'].createElement("div", { className: props.className }, accordionItems);
 };

package/build/cjs/components/Accordion/AccordionItem.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Props as AccordionProps } from './Accordion';
-interface Props extends Omit<AccordionProps, 'children' | 'autoCollapsible'> {
+export interface Props {
     /**
      * Accordion item title
      */
@@ -13,6 +12,33 @@ interface Props extends Omit<AccordionProps, 'children' | 'autoCollapsible'> {
      * Content of Accordion Item
      */
     children?: React.ReactNode;
+    /**
+     * Allows to expand or collapse the component
+     *
+     * @default false
+     */
+    isExpanded?: boolean;
+    /**
+     * Allows to remove item title highlight when it is in expanded state
+     * Removes also highlight of CSS :hover and :active states
+     *
+     * @default true
+     */
+    highlightSelected?: boolean;
+    /**
+     * Display close button in the item content
+     *
+     * @default false
+     */
+    hasCloseButton?: boolean;
+    /**
+     * Label to show for the open icon for accessibility
+     */
+    openLabel?: string;
+    /**
+     * Label to show for the close button in the content
+     */
+    closeLabel?: string;
     /**
      * On component title and close button mouse click callback
      * Use `e.currentTarget.parentElement` to get AccordionItem element
@@ -23,6 +49,10 @@ interface Props extends Omit<AccordionProps, 'children' | 'autoCollapsible'> {
      * Use `e.currentTarget.parentElement` to get AccordionItem element
      */
     onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
 }
 /** @visibleName Accordion Item */
 declare const AccordionItem: ({ hasCloseButton, highlightSelected, ...props }: Props) => JSX.Element;

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

@@ -2,11 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var tslib = require('tslib');
 var React = require('react');
 var styled = require('styled-components');
 var useElementDimensions = require('../../hooks/useElementDimensions.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 hlX = require('../Icons/hlX.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -14,64 +19,65 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const AccordionItemContainer = styled__default['default'].div `
-    margin: ${p => `0 ${styledUtils.getDividedSize(p.theme.base.baseHeight, 2.5)}}`};
+    margin: 0 ${styledUtils.getDividedSize(theme['default'].base.baseHeight, 2.5)};
     border-bottom: 1px solid
-        ${p => (p.isExpanded && p.highlightSelected ? p.theme.color.hotPink : p.theme.color.gray15)};
+        ${p => (p.isExpanded && p.highlightSelected ? theme['default'].color.hotPink : theme['default'].color.gray15)};
 `;
 const AccordionItemTitle = styled__default['default'].div `
-    font-size: ${p => p.theme.fontSize.default};
-    font-weight: ${p => p.theme.fontWeight.bold};
+    font-size: ${theme['default'].fontSize.default};
+    font-weight: ${theme['default'].fontWeight.bold};
     display: flex;
     justify-content: space-between;
     flex-direction: row;
     cursor: pointer;
-    padding: ${p => styledUtils.getMultipliedSize(p.theme.base.baseHeight, 1.6)}
-        ${p => styledUtils.getMultipliedSize(p.theme.base.baseHeight, 2)};
-    color: ${p => p.isExpanded && p.highlightSelected ? p.theme.color.hotPink : p.theme.color.text};
+    padding: ${styledUtils.getMultipliedSize(theme['default'].base.baseHeight, 1.6)}
+        ${styledUtils.getMultipliedSize(theme['default'].base.baseHeight, 2)};
+    color: ${p => (p.isExpanded && p.highlightSelected ? theme['default'].color.hotPink : theme['default'].color.text)};
     transition: color 0.2s;
     ${p => p.highlightSelected &&
     styled.css `
             &:hover,
             &:active {
-                color: ${p.theme.color.hotPink};
+                color: ${theme['default'].color.hotPink};
                 text-decoration: none;
             }
         `}
 `;
 const AccordionItemContentWrapper = styled__default['default'].div `
     overflow: hidden;
-    color: ${p => p.theme.color.slateGray};
+    color: ${theme['default'].color.slateGray};
     transition: all 0.2s ease;
     height: ${p => (p.isExpanded ? p.maxHeight / 16 + 1.25 : 0)}rem;
-    padding: 0 ${p => styledUtils.getMultipliedSize(p.theme.base.baseHeight, 2)};
+    padding: 0 ${styledUtils.getMultipliedSize(theme['default'].base.baseHeight, 2)};
     visibility: ${p => (p.isExpanded ? 'visible' : 'hidden')};
 `;
 const AccordionItemContent = styled__default['default'].div `
-    padding-bottom: ${p => styledUtils.getMultipliedSize(p.theme.base.baseHeight, 1.6)};
+    padding-bottom: ${styledUtils.getMultipliedSize(theme['default'].base.baseHeight, 1.6)};
 `;
 const AccordionItemCloseButton = styled__default['default'].div `
     display: flex;
     justify-content: flex-end;
-    line-height: ${p => p.theme.lineHeight.default};
-    margin-bottom: ${p => styledUtils.getMultipliedSize(p.theme.base.baseHeight, 1.6)};
-    padding: 0 ${p => styledUtils.getMultipliedSize(p.theme.base.baseHeight, 2)};
-    gap: ${p => styledUtils.getMultipliedSize(p.theme.base.baseHeight, 1)};
-    color: ${p => p.theme.color.text};
+    line-height: ${theme['default'].lineHeight.default};
+    margin-bottom: ${styledUtils.getMultipliedSize(theme['default'].base.baseHeight, 1.6)};
+    padding: 0 ${styledUtils.getMultipliedSize(theme['default'].base.baseHeight, 2)};
+    gap: ${styledUtils.getMultipliedSize(theme['default'].base.baseHeight, 1)};
+    color: ${theme['default'].color.text};
     cursor: pointer;
 `;
 /** @visibleName Accordion Item */
-const AccordionItem = ({ hasCloseButton = false, highlightSelected = true, ...props }) => {
+const AccordionItem = (_a) => {
+    var { hasCloseButton = false, highlightSelected = true } = _a, props = tslib.__rest(_a, ["hasCloseButton", "highlightSelected"]);
     // Get height when element dimensions change
     const { height: contentHeight, ref: contentRef } = useElementDimensions['default']();
     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 }))),
+            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

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var tslib = require('tslib');
 var React = require('react');
 var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
@@ -12,9 +13,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 +30,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,9 +45,13 @@ 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 }) => {
+const AmountSelector = (_a) => {
+    var { onChange, value = 1, step = 1, min = 1, max, disabled = false, readonly = true, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["onChange", "value", "step", "min", "max", "disabled", "readonly", 'data-testid']);
     const isMinReached = (val) => val < min;
     const isMaxReached = (val) => Boolean(max && val > max);
     const isInRange = (val) => !isMinReached(val) && !isMaxReached(val);
@@ -74,10 +84,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.d.ts

@@ -1,9 +1,10 @@
+import type theme from '../../themes/theme';
 export interface ButtonProps {
     fullWidth?: boolean;
     small?: boolean;
     loading?: boolean | string;
     darkBg?: boolean;
-    theme?: any;
+    theme?: typeof theme;
 }
 declare const ButtonBasicStyle: import("styled-components").StyledComponent<"button", {
     base: {

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/ButtonDefault.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import ButtonProps from './ButtonBasicProps';
+import type ButtonProps from './ButtonBasicProps';
 /** @visibleName Buttons */
 export declare const Button: (props: ButtonProps) => JSX.Element;
 /** @component */

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

@@ -6,13 +6,14 @@ var React = require('react');
 var styled = require('../../themes/styled.js');
 var PixelLoader = require('../PixelLoader/PixelLoader.js');
 var ButtonBasicStyles = require('./ButtonBasicStyles.js');
+var theme = require('../../themes/theme.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const noop = () => { }; // tslint:disable-line
-const StyledPixelLoader = styled['default'](PixelLoader.PixelLoader) `
+const StyledPixelLoader = styled['default'](PixelLoader['default']) `
     display: inline-flex;
 `;
 /** @visibleName Buttons */
@@ -24,7 +25,7 @@ const Button = (props) => {
         // https://github.com/styled-components/styled-components/pull/2093
         loading: loading ? loading.toString() : undefined, darkBg: darkBg, disabled: disabled, onClick: !disabled || !loading ? onClick : noop, onMouseDown: (!disabled || !loading) && onMouseDown ? onMouseDown : noop, className: className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, type: type },
         !loading && (React__default['default'].createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, children)),
-        loading && React__default['default'].createElement(StyledPixelLoader, null)));
+        loading && (React__default['default'].createElement(StyledPixelLoader, { color: darkBg ? theme['default'].color.white : theme['default'].color.black }))));
 };
 
 exports.Button = Button;

package/build/cjs/components/Buttons/ButtonIcon.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import ButtonIconProps from './ButtonIconProps';
+import type ButtonIconProps from './ButtonIconProps';
 /** @visibleName Icon Button */
 declare const ButtonIcon: (props: ButtonIconProps) => JSX.Element;
 /** @component */

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.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import ButtonIconProps from './ButtonIconProps';
+import type ButtonIconProps from './ButtonIconProps';
 /** @visibleName  Icon Button Primary */
 declare const ButtonIconPrimary: (props: ButtonIconProps) => JSX.Element;
 /** @component */

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/Buttons/ButtonPrimary.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import ButtonProps from './ButtonBasicProps';
+import type ButtonProps from './ButtonBasicProps';
 /** @visibleName Button primary */
 declare const ButtonPrimary: (props: ButtonProps) => JSX.Element;
 /** @component */

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

@@ -6,13 +6,14 @@ var React = require('react');
 var styled = require('../../themes/styled.js');
 var PixelLoader = require('../PixelLoader/PixelLoader.js');
 var ButtonPrimaryStyles = require('./ButtonPrimaryStyles.js');
+var theme = require('../../themes/theme.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const noop = () => { }; // tslint:disable-line
-const StyledPixelLoader = styled['default'](PixelLoader.PixelLoader) `
+const StyledPixelLoader = styled['default'](PixelLoader['default']) `
     display: inline-flex;
 `;
 /** @visibleName Button primary */
@@ -24,7 +25,7 @@ const ButtonPrimary = (props) => {
         // https://github.com/styled-components/styled-components/pull/2093
         loading: loading ? loading.toString() : undefined, darkBg: darkBg, disabled: disabled, onClick: !disabled || !loading ? onClick : noop, onMouseDown: (!disabled || !loading) && onMouseDown ? onMouseDown : noop, className: className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, type: type },
         !loading && (React__default['default'].createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, children)),
-        loading && React__default['default'].createElement(StyledPixelLoader, null)));
+        loading && React__default['default'].createElement(StyledPixelLoader, { color: theme['default'].color.white })));
 };
 
 exports.default = ButtonPrimary;

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var styled = require('styled-components');
+var theme = require('../../themes/theme.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -12,8 +13,8 @@ const ButtonRoundStyles = styled__default['default'].button `
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    background-color: ${props => props.theme.color.hotPink};
-    color: ${props => props.theme.color.white};
+    background-color: ${theme['default'].color.hotPink};
+    color: ${theme['default'].color.white};
     outline: none;
     cursor: pointer;
     text-align: center;
@@ -21,15 +22,15 @@ const ButtonRoundStyles = styled__default['default'].button `
     border-radius: 50%;
     width: 2rem;
     height: 2rem;
-    border-color: ${props => props.theme.color.hotPink};
+    border-color: ${theme['default'].color.hotPink};
     border-style: solid;
     &:focus {
         outline: none;
-        color: ${props => props.theme.color.white};
+        color: ${theme['default'].color.white};
     }
     &:hover,
     &:active {
-        color: ${props => props.theme.color.white};
+        color: ${theme['default'].color.white};
     }
 `;
 

package/build/cjs/components/Buttons/ButtonSecondary.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import ButtonProps from './ButtonBasicProps';
+import type ButtonProps from './ButtonBasicProps';
 /** @visibleName Button secondary */
 declare const ButtonSecondary: (props: ButtonProps) => JSX.Element;
 /** @component */

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

@@ -13,7 +13,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const noop = () => { }; // tslint:disable-line
-const StyledPixelLoader = styled['default'](PixelLoader.PixelLoader) `
+const StyledPixelLoader = styled['default'](PixelLoader['default']) `
     display: inline-flex;
 `;
 /** @visibleName Button secondary */

package/build/cjs/components/Buttons/ButtonTertiary.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import ButtonProps from './ButtonBasicProps';
+import type ButtonProps from './ButtonBasicProps';
 /** @visibleName Button tertiary */
 declare const ButtonTertiary: (props: ButtonProps) => JSX.Element;
 /** @component */