@dnanpm/styleguide 2.2.3 → 3.0.0

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

@@ -1,21 +0,0 @@
-import 'lazysizes';
-import React from 'react';
-interface ImageProps {
-    defaultImageStyles: object;
-    imgSrc: string;
-    srcSet: SourceSet;
-    placeholder: string;
-    dataTestId: string;
-    defaultSrc: string;
-    defaultSrcSet: string;
-    imageTitle: string;
-}
-interface SourceSet {
-    srcSet: string;
-    sizes: string;
-}
-/**
- * @deprecated With no replacement
- */
-declare const Image: React.SFC<ImageProps>;
-export default Image;

package/build/cjs/components/Image/Image.js

@@ -1,25 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('lazysizes');
-var React = require('react');
-var ProgressiveImage = require('react-progressive-image');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var ProgressiveImage__default = /*#__PURE__*/_interopDefaultLegacy(ProgressiveImage);
-
-/**
- * @deprecated With no replacement
- */
-const Image = ({ defaultImageStyles, imgSrc, srcSet, placeholder, dataTestId, defaultSrc, defaultSrcSet, imageTitle, }) => {
-    const brokenImage = (ev) => {
-        ev.target.src = defaultSrc;
-        ev.target.srcset = defaultSrcSet;
-    };
-    return (React__default['default'].createElement(ProgressiveImage__default['default'], { src: imgSrc, srcSetData: srcSet, placeholder: placeholder, onError: brokenImage }, (src, loading, srcSetData) => (React__default['default'].createElement("img", { src: src, style: Object.assign(Object.assign({}, defaultImageStyles), { filter: `blur(${loading ? '2px' : 0})` }), srcSet: srcSetData.srcSet, sizes: srcSetData.sizes, alt: imageTitle, title: imageTitle, "data-testid": dataTestId, className: "lazyload" }))));
-};
-
-exports.default = Image;

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

@@ -1,57 +0,0 @@
-import React from 'react';
-import theme from '../../themes/theme';
-declare type TextColor = 'text' | 'white' | 'black';
-interface Props {
-    /**
-     * Depending on the passed value, background color and text color are determined
-     *
-     * @default 'info'
-     */
-    color?: keyof typeof theme.color;
-    /**
-     * When defined, the text colors in color map are ignored and passed value is used instead
-     *
-     * @param {TextColor} text Uses #121212 color code as text color
-     * @param {TextColor} white Uses #ffffff color code as text color
-     * @param {TextColor} black Uses #000000 color code as text color
-     * @default 'white'
-     */
-    textColor?: TextColor;
-    /**
-     * Content of the ribbon
-     */
-    children?: React.ReactNode;
-    /**
-     * Allows to show and hide close button
-     *
-     * @default false
-     */
-    closeButton?: boolean;
-    /**
-     * On close button click callback
-     */
-    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
-    /**
-     * Allows to dismiss the ribbon programmatically
-     *
-     * @default false
-     */
-    dismissed?: boolean;
-    /**
-     * Allows to center text of the ribbon
-     *
-     * @default false
-     */
-    centered?: boolean;
-    /**
-     * Allows to pass a custom className
-     */
-    className?: string;
-    /**
-     * Allows to pass testid string for testing purposes
-     */
-    'data-testid'?: string;
-}
-declare const Ribbon: ({ color, "data-testid": dataTestId, ...props }: Props) => JSX.Element | null;
-/** @component */
-export default Ribbon;

package/build/cjs/components/Ribbon/Ribbon.js

@@ -1,82 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib = require('tslib');
-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 hlX = require('../Icons/hlX.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 getColorScheme = ({ color, textColor, }) => {
-    const map = {
-        text: ['pinkday', 'white', 'pink2', 'grayBg', 'gray15', 'gray10', 'gray5'],
-        black: ['grayWhite'],
-    };
-    const mappedTextColor = textColor ||
-        Object.keys(map).find(key => map[key].includes(color)) ||
-        'white';
-    return `
-        color: ${theme['default'].color[mappedTextColor]};
-        background: ${theme['default'].color[color]};
-
-        a {
-            color: ${theme['default'].color[mappedTextColor]};
-        };
-    }`;
-};
-const RibbonWrapper = styled__default['default'].div `
-    ${({ color, textColor }) => getColorScheme({ color, textColor })}
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-    padding: ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 1.2)}
-        ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 1.5)};
-    position: relative;
-    opacity: 0.95;
-    transition: all 0.3s;
-    text-align: ${({ centered }) => (centered ? 'center' : 'left')};
-    a {
-        text-decoration: underline;
-    }
-`;
-const ContentWrapper = styled__default['default'].div `
-    flex: 1;
-    font-weight: ${theme['default'].fontWeight.book};
-    overflow: hidden;
-    font-size: ${theme['default'].fontSize.default};
-    line-height: ${theme['default'].lineHeight.default};
-    position: relative;
-    word-wrap: break-word;
-    margin-right: ${({ closeButton }) => closeButton ? styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 3) : 0};
-`;
-const CloseButton = styled__default['default'].a `
-    position: absolute;
-    top: ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 0.88)};
-    right: ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 1.2)};
-    margin: ${styledUtils.getDividedSize(theme['default'].base.baseWidth, 2)};
-    cursor: pointer;
-
-    ${() => styledUtils.media.xs `
-        top: ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 1.2)};
-    `}
-`;
-const Ribbon = (_a) => {
-    var { color = 'info', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["color", 'data-testid']);
-    if (props.dismissed) {
-        return null;
-    }
-    return (React__default['default'].createElement(RibbonWrapper, { className: props.className, color: color, textColor: props.textColor, "data-testid": dataTestId, centered: props.centered },
-        React__default['default'].createElement(ContentWrapper, { closeButton: props.closeButton }, props.children),
-        props.closeButton ? (React__default['default'].createElement(CloseButton, { onClick: props.onClick },
-            React__default['default'].createElement(Icon['default'], { icon: hlX['default'], color: "currentColor" }))) : null));
-};
-
-exports.default = Ribbon;

package/build/cjs/themes/themeComponents/buttons.d.ts

@@ -1,4 +0,0 @@
-declare const buttons: {
-    border: string;
-};
-export default buttons;

package/build/cjs/themes/themeComponents/buttons.js

@@ -1,9 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const buttons = {
-    border: '1px',
-};
-
-exports.default = buttons;

package/build/cjs/themes/themeComponents/colors.d.ts

@@ -1,29 +0,0 @@
-declare const colors: {
-    black: string;
-    white: string;
-    text: string;
-    hotPink: string;
-    waterBlue: string;
-    melonYellow: string;
-    slateGray: string;
-    grayWhite: string;
-    hotPinkHover: string;
-    waterBlueHover: string;
-    pink1: string;
-    pink2: string;
-    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;
-};
-export default colors;

package/build/cjs/themes/themeComponents/colors.js

@@ -1,34 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const colors = {
-    black: '#000000',
-    white: '#FFFFFF',
-    text: '#121212',
-    hotPink: '#FF007D',
-    waterBlue: '#007d91',
-    melonYellow: '#ffa100',
-    slateGray: '#4b5055',
-    grayWhite: '#e0e1dd',
-    hotPinkHover: '#e0006c',
-    waterBlueHover: '#005a68',
-    pink1: '#ff4aa5',
-    pink2: '#ffcbe5',
-    pinkday: '#f4dee5',
-    info: '#007d91',
-    error: '#e80c0c',
-    success: '#00b201',
-    warning: '#ff7800',
-    grayBg: '#f7f7f7',
-    gray80: '#333333',
-    gray70: '#4c4c4c',
-    gray55: '#737373',
-    gray40: '#999999',
-    gray25: '#bfbfbf',
-    gray15: '#d9d9d9',
-    gray10: '#e5e5e5',
-    gray5: '#f2f2f2',
-};
-
-exports.default = colors;

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

@@ -1,74 +0,0 @@
-import { __rest } from 'tslib';
-import React from 'react';
-import styled__default, { css } from 'styled-components';
-import useResizeObserver from '../../hooks/useElementDimensions.js';
-import theme from '../../themes/theme.js';
-import { getDividedSize, getMultipliedSize } from '../../utils/styledUtils.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 `
-    margin: 0 ${getDividedSize(theme.base.baseHeight, 2.5)};
-    border-bottom: 1px solid
-        ${p => (p.isExpanded && p.highlightSelected ? theme.color.hotPink : theme.color.gray15)};
-`;
-const AccordionItemTitle = styled__default.div `
-    font-size: ${theme.fontSize.default};
-    font-weight: ${theme.fontWeight.bold};
-    display: flex;
-    justify-content: space-between;
-    flex-direction: row;
-    cursor: pointer;
-    padding: ${getMultipliedSize(theme.base.baseHeight, 1.6)}
-        ${getMultipliedSize(theme.base.baseHeight, 2)};
-    color: ${p => (p.isExpanded && p.highlightSelected ? theme.color.hotPink : theme.color.text)};
-    transition: color 0.2s;
-    ${p => p.highlightSelected &&
-    css `
-            &:hover,
-            &:active {
-                color: ${theme.color.hotPink};
-                text-decoration: none;
-            }
-        `}
-`;
-const AccordionItemContentWrapper = styled__default.div `
-    overflow: hidden;
-    color: ${theme.color.slateGray};
-    transition: all 0.2s ease;
-    height: ${p => (p.isExpanded ? p.maxHeight / 16 + 1.25 : 0)}rem;
-    padding: 0 ${getMultipliedSize(theme.base.baseHeight, 2)};
-    visibility: ${p => (p.isExpanded ? 'visible' : 'hidden')};
-`;
-const AccordionItemContent = styled__default.div `
-    padding-bottom: ${getMultipliedSize(theme.base.baseHeight, 1.6)};
-`;
-const AccordionItemCloseButton = styled__default.div `
-    display: flex;
-    justify-content: flex-end;
-    line-height: ${theme.lineHeight.default};
-    margin-bottom: ${getMultipliedSize(theme.base.baseHeight, 1.6)};
-    padding: 0 ${getMultipliedSize(theme.base.baseHeight, 2)};
-    gap: ${getMultipliedSize(theme.base.baseHeight, 1)};
-    color: ${theme.color.text};
-    cursor: pointer;
-`;
-/** @visibleName Accordion Item */
-const AccordionItem = (_a) => {
-    var { hasCloseButton = false, highlightSelected = true } = _a, props = __rest(_a, ["hasCloseButton", "highlightSelected"]);
-    // Get height when element dimensions change
-    const { height: contentHeight, ref: contentRef } = useResizeObserver();
-    return (React.createElement(AccordionItemContainer, { id: props.id, "aria-expanded": Boolean(props.isExpanded), className: props.className, isExpanded: Boolean(props.isExpanded), highlightSelected: highlightSelected },
-        React.createElement(AccordionItemTitle, { tabIndex: 0, onClick: props.onClick, onKeyDown: props.onKeyDown, isExpanded: Boolean(props.isExpanded), highlightSelected: highlightSelected, role: "button" },
-            props.title,
-            props.isExpanded ? (React.createElement(Icon, { icon: hlChevronUp, position: "right", "aria-label": props.closeLabel })) : (React.createElement(Icon, { icon: hlChevronDown, position: "right", "aria-label": props.openLabel }))),
-        React.createElement(AccordionItemContentWrapper, { maxHeight: contentHeight, isExpanded: props.isExpanded },
-            React.createElement(AccordionItemContent, { ref: contentRef }, props.children)),
-        hasCloseButton && props.isExpanded && (React.createElement(AccordionItemCloseButton, { tabIndex: 0, onClick: props.onClick, onKeyDown: props.onKeyDown, "aria-label": props.closeLabel, role: "button" },
-            React.createElement("span", null, props.closeLabel),
-            React.createElement(Icon, { icon: hlX })))));
-};
-
-export default AccordionItem;

package/build/es/components/Buttons/ButtonBasicStyles.d.ts

@@ -1,109 +0,0 @@
-import type theme from '../../themes/theme';
-export interface ButtonProps {
-    fullWidth?: boolean;
-    small?: boolean;
-    loading?: boolean | string;
-    darkBg?: boolean;
-    theme?: typeof theme;
-}
-declare const ButtonBasicStyle: import("styled-components").StyledComponent<"button", {
-    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;
-        waterBlueHover: string;
-        pink1: string;
-        pink2: string;
-        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;
-        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;
-    };
-    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<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
-}, ButtonProps, never>;
-export default ButtonBasicStyle;

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

@@ -1,67 +0,0 @@
-import styled from '../../themes/styled.js';
-import { getMultipliedSize } from '../../utils/styledUtils.js';
-
-const ButtonBasicStyle = styled.button `
-    position: relative;
-    padding: ${props => `${getMultipliedSize(props.theme.base.baseWidth, 0.8)}
-        ${getMultipliedSize(props.theme.base.baseWidth, 1)}`};
-    text-decoration: none;
-    display: inline-block;
-    border-style: solid;
-    border-width: ${props => props.theme.button.border};
-    border-color: ${props => props && props.darkBg ? props.theme.color.white : props.theme.color.black};
-    box-sizing: border-box;
-    background-color: transparent;
-    color: ${props => (props && props.darkBg ? props.theme.color.white : props.theme.color.black)};
-    font-family: ${props => props.theme.fontFamily.default};
-    font-weight: ${props => props.theme.fontWeight.bold};
-    font-size: ${props => props && props.small ? props.theme.fontSize.s : props.theme.fontSize.default};
-    line-height: ${props => props && props.small ? props.theme.lineHeight.s : props.theme.lineHeight.default};
-    outline: none;
-    text-align: center;
-    vertical-align: middle;
-    min-width: ${props => getMultipliedSize(props.theme.base.baseWidth, props && props.small ? 10.5 : 12.5)};
-    width: ${props => (props && props.fullWidth ? '100%' : 'auto')};
-    cursor: pointer;
-    max-width: 100%;
-    pointer-events: ${props => (props && props.loading ? 'none' : 'auto')};
-
-    &:focus {
-        outline: none;
-        color: ${props => props && props.darkBg ? props.theme.color.white : props.theme.color.black};
-        span:not(span.dnasg-icon) {
-            border-bottom: ${props => `${props.theme.button.border} solid`};
-        }
-    }
-    &:hover {
-        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:not(span.dnasg-icon) {
-            border-bottom: 0;
-        }
-    }
-    &:active {
-        opacity: 0.7;
-        background: transparent;
-        color: ${props => props && props.darkBg ? props.theme.color.white : props.theme.color.black};
-        span:not(span.dnasg-icon) {
-            border-bottom: 0;
-        }
-    }
-
-    &[disabled],
-    &:disabled {
-        border-color: ${props => props && props.darkBg ? props.theme.color.gray70 : props.theme.color.gray10};
-        background: ${props => props && props.darkBg ? props.theme.color.gray70 : props.theme.color.gray10};
-        color: ${props => props && props.darkBg ? props.theme.color.gray55 : props.theme.color.gray25};
-        pointer-events: none;
-    }
-
-    span:not(span.dnasg-icon) {
-        border-bottom: 0;
-        font-size: ${props => props && props.small ? props.theme.fontSize.s : props.theme.fontSize.default};
-    }
-`;
-
-export default ButtonBasicStyle;

package/build/es/components/Buttons/ButtonDefault.d.ts

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

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

@@ -1,24 +0,0 @@
-import React from 'react';
-import styled from '../../themes/styled.js';
-import PixelLoader from '../PixelLoader/PixelLoader.js';
-import ButtonBasicStyle from './ButtonBasicStyles.js';
-import theme from '../../themes/theme.js';
-
-const noop = () => { }; // tslint:disable-line
-const StyledPixelLoader = styled(PixelLoader) `
-    display: inline-flex;
-`;
-/** @visibleName Buttons */
-const Button = (props) => {
-    const { children, className, fullWidth, small, loading = false, darkBg, onClick, onMouseDown, disabled = false, 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue, type, } = props;
-    return (React.createElement(ButtonBasicStyle, { 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
-        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.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, children)),
-        loading && (React.createElement(StyledPixelLoader, { color: darkBg ? theme.color.white : theme.color.black }))));
-};
-
-export default Button;
-export { Button };

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

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

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

@@ -1,25 +0,0 @@
-import React from 'react';
-import Icon from '../Icon/Icon.js';
-import ButtonIconStyles from './ButtonIconStyles.js';
-
-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.createElement(Icon, { name: icon, size: small ? '1.25rem' : '1.5rem', "data-testid": dataTestId && `${dataTestId}-icon`, "data-no-close": dataNoClose }));
-        }
-        return (React.createElement(Icon, { icon: icon, size: small ? '1.25rem' : '1.5rem', "data-testid": dataTestId && `${dataTestId}-icon`, "data-no-close": dataNoClose }));
-    };
-    return (React.createElement(ButtonIconStyles, { 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.createElement(React.Fragment, null,
-        renderIcon(),
-        React.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, children)))));
-};
-
-export default ButtonIcon;

package/build/es/components/Buttons/ButtonIconPrimary.d.ts

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

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

@@ -1,25 +0,0 @@
-import React from 'react';
-import Icon from '../Icon/Icon.js';
-import ButtonIconPrimaryStyles from './ButtonIconPrimaryStyles.js';
-
-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.createElement(Icon, { name: icon, size: small ? '1.25rem' : '1.5rem', "data-testid": dataTestId && `${dataTestId}-icon`, "data-no-close": dataNoClose }));
-        }
-        return (React.createElement(Icon, { icon: icon, size: small ? '1.25rem' : '1.5rem', "data-testid": dataTestId && `${dataTestId}-icon`, "data-no-close": dataNoClose }));
-    };
-    return (React.createElement(ButtonIconPrimaryStyles, { 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.createElement(React.Fragment, null,
-        renderIcon(),
-        React.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, children)))));
-};
-
-export default ButtonIconPrimary;