@dnanpm/styleguide/build/cjs/components/ButtonCard/ButtonCard.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 Box = require('../Box/Box.js');
var Icon = require('../Icon/Icon.js');

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

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

const ButtonCardWrapper = styledComponents.styled.button `
    display: block;
    padding: 0;
    border: 0 none;
    width: 100%;
    background-color: transparent;
    cursor: pointer;
    font-family: ${theme.default.fontFamily.default};
    font-size: ${theme.default.fontSize.default};
    line-height: ${theme.default.lineHeight.default};
    color: ${theme.default.color.text.black};

    &:focus-visible {
        border: 1px solid ${theme.default.color.focus.light};
        box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.dark};
        border-radius: ${theme.default.radius.default};
        outline: none;

        & > div {
            border: 0 none;
        }
    }

    &:hover {
        color: ${theme.default.color.text.black};
        text-decoration: none;
    }
`;
const StyledBox = styledComponents.styled(Box.default) `
    display: flex;
    gap: ${({ size }) => (size === 'small' ? '0.313rem' : '1rem')};
    border: 1px solid ${theme.default.color.line.L03};
    padding: ${({ size }) => (size === 'small' ? '0.625rem' : '1rem')};
    ${({ size }) => size === 'small' && 'flex-direction: column'};
    ${({ size }) => size !== 'small' && 'align-items: center'};
`;
const VisualContent = styledComponents.styled.div `
    display: flex;
    align-items: center;
    width: ${({ size }) => (size === 'small' ? '2.5rem' : '3.75rem')};
    height: ${({ size }) => (size === 'small' ? '2.5rem' : '3.75rem')};
`;
const TextContentWrapper = styledComponents.styled.div `
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: space-between;
    gap: ${({ size }) => (size === 'small' ? '0.625rem' : '1rem')};
    min-width: 0;
`;
const TextContent = styledComponents.styled.div `
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    min-width: 0;
`;
const Title = styledComponents.styled.div `
    font-size: ${theme.default.fontSize.default};
    line-height: ${theme.default.lineHeight.default};
    font-weight: ${theme.default.fontWeight.bold};

    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;

    ${({ size }) => size === 'small' &&
    `
        font-size: ${theme.default.fontSize.s};
        line-height: ${theme.default.lineHeight.s};
        font-weight: ${theme.default.fontWeight.medium};
    `}

    ${({ size }) => size === 'large' &&
    `
        font-size: ${theme.default.fontSize.xl};
    `};
`;
const Subtitle = styledComponents.styled.div `
    color: ${theme.default.color.text.gray};
    font-size: ${theme.default.fontSize.s};
    line-height: ${theme.default.lineHeight.s};
    font-weight: ${theme.default.fontWeight.medium};

    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;

    ${({ size }) => size === 'small' &&
    `
        font-size: ${theme.default.fontSize.xs};
        line-height: ${theme.default.lineHeight.xxs};
    `}

    ${({ size }) => size === 'large' &&
    `
        font-size: ${theme.default.fontSize.default};
    `};
`;
const CtaIcon = styledComponents.styled(Icon.default) `
    color: ${theme.default.color.text.pink};

    ${ButtonCardWrapper}:hover & {
        color: ${theme.default.color.hover.pink};
    }
`;
/** @visibleName Button Card */
const ButtonCard = (_a) => {
    var { type = 'submit', size = 'medium', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", "size", 'data-testid']);
    return (React__default.default.createElement(ButtonCardWrapper, Object.assign({ id: props.id, as: props.href ? 'a' : undefined, type: props.href ? undefined : type, href: props.href, onClick: props.onClick, className: props.className, "data-testid": dataTestId }, props.dataAttributes, (!props.href && {
        name: props.name,
    })),
        React__default.default.createElement(StyledBox, { elevation: "low", size: size },
            React__default.default.createElement(VisualContent, { size: size, "data-testid": dataTestId && `${dataTestId}-content` }, props.children),
            React__default.default.createElement(TextContentWrapper, { size: size },
                React__default.default.createElement(TextContent, null,
                    React__default.default.createElement(Title, { size: size, "data-testid": dataTestId && `${dataTestId}-title` }, props.title),
                    props.subtitle && (React__default.default.createElement(Subtitle, { size: size, "data-testid": dataTestId && `${dataTestId}-subtitle` }, props.subtitle))),
                React__default.default.createElement(CtaIcon, { icon: props.isExternal && props.href ? icons.Open : icons.ChevronRight, size: size === 'small' ? '1rem' : '1.5rem', "data-testid": dataTestId && `${dataTestId}-cta`, "aria-label": props.ariaLabelIcon, "aria-hidden": !props.ariaLabelIcon && true })))));
};

exports.default = ButtonCard;