@dnanpm/styleguide/build/cjs/components/ButtonArrow/ButtonArrow.js

DNA Styleguide repository provides the set of components and theme object used in various DNA projects.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib = require('tslib');
var icons = require('@dnanpm/icons');
var React = require('react');
var styledComponents = require('styled-components');
var theme = require('../../themes/theme.js');
var styledUtils = require('../../utils/styledUtils.js');
var ButtonPrimary = require('../ButtonPrimary/ButtonPrimary.js');
var ButtonSecondary = require('../ButtonSecondary/ButtonSecondary.js');

function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefaultCompat(React);

const iconsMap = {
    up: icons.ChevronUp,
    right: icons.ChevronRight,
    down: icons.ChevronDown,
    left: icons.ChevronLeft,
};
const overrideStyles = `
    display: flex;
    min-width: initial;
    width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 3.2)};
    height: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 3.2)};
    padding: initial;
    text-align: center;
    vertical-align: middle;
    justify-content: center;
    align-items: center;
`;
const buttonsMap = {
    primary: styledComponents.styled(ButtonPrimary.default) `
        ${overrideStyles};
        border-radius: ${theme.default.radius.circle};

        &:disabled,
        &[disabled] {
            color: ${theme.default.color.text.black};
        }
    `,
    secondary: styledComponents.styled(ButtonSecondary.default) `
        ${overrideStyles};
        color: ${theme.default.color.text.black};
        border: 1px solid ${theme.default.color.line.L01};
        border-radius: ${theme.default.radius.s};

        &:focus {
            color: ${theme.default.color.text.black};
        }

        &:hover {
            color: ${theme.default.color.text.black};
        }

        &:active {
            color: ${theme.default.color.text.black};
            border: 1px solid ${theme.default.color.line.L01};
        }

        &:disabled,
        &[disabled] {
            border: 1px solid ${theme.default.color.line.L02 + theme.default.color.transparency.T30};
        }
    `,
};
/** @visibleName Button Arrow */
const ButtonArrow = (_a) => {
    var { variant = 'primary', 'data-testid': dataTestId, 'data-track-value': dataTrackValue, 'aria-label': ariaLabel } = _a, props = tslib.__rest(_a, ["variant", 'data-testid', 'data-track-value', 'aria-label']);
    const Element = buttonsMap[variant];
    let iconElement = null;
    if (props.direction) {
        const IconComponent = iconsMap[props.direction];
        iconElement = React__default.default.createElement(IconComponent, { size: "1rem" });
    }
    else if (React.isValidElement(props.icon)) {
        iconElement = React.cloneElement(props.icon, { size: '1rem' });
    }
    return (React__default.default.createElement(Element, { id: props.id, href: props.href, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, darkBg: props.darkBg, disabled: props.disabled, className: props.className, "data-testid": dataTestId, "data-track-value": dataTrackValue, dataAttributes: props.dataAttributes, "aria-label": ariaLabel }, iconElement));
};

exports.default = ButtonArrow;