@cimpress/react-components/dist/esm/src/Button.js

React components to support the MCP styleguide

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React from 'react';
import { cx, css } from '@emotion/css';
import cvar from './theme/cvar';
const defaultButtonStyle = css `
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 2px;
  border: 1px solid ${cvar('color-button-primary')};
  color: ${cvar('color-button-primary')};
  background: ${cvar('color-button-default')};
  &:hover {
    background: ${cvar('color-button-secondary-hover')};
    border-color: ${cvar('color-button-secondary-hover')};
    color: ${cvar('color-button-primary')};
  }
  &:active {
    background: ${cvar('color-button-secondary-active')};
    border-color: ${cvar('color-button-secondary-active')};
    color: ${cvar('color-button-primary')};
  }
`;
const primaryButtonStyle = css `
  color: ${cvar('color-text-inverse')};
  background: ${cvar('color-interactive')};
  &:hover {
    background: ${cvar('color-button-primary-hover')};
    border-color: ${cvar('color-button-primary-hover')};
    color: ${cvar('color-text-inverse')};
  }
  &:active {
    background: ${cvar('color-button-primary-active')};
    border-color: ${cvar('color-button-primary-active')};
    color: ${cvar('color-text-inverse')};
  }
`;
const linkButtonStyle = css `
  border-color: transparent;
  background: transparent;
  text-decoration: none;
  text-shadow: none;
  &:hover,
  &:active {
    text-decoration: none;
  }
`;
const anchorStyle = css `
  border-color: transparent;
  background: transparent;
  font-weight: 400;
  &:hover,
  &:active {
    background: transparent;
    border-color: transparent;
    text-decoration: underline;
  }
`;
const disabledAnchorStyle = css `
  cursor: text;
`;
const disabledButtonStyle = css `
  background: ${cvar('color-button-disabled')};
  opacity: 0.65;
  color: ${cvar('color-text-disabled-dark')};
  border-color: transparent;
  cursor: not-allowed;
  &:hover {
    background: ${cvar('color-button-disabled')};
    opacity: 0.65;
    color: ${cvar('color-text-disabled-dark')};
    border-color: transparent;
    cursor: not-allowed;
  }
`;
const blockLevelButtonStyle = css `
  width: 100%;
  display: block;
`;
const btnIconSizeCss = (size) => {
    if (size === 'lg')
        return css `
      padding: ${cvar('spacing-16')};
    `;
    if (size === 'sm')
        return css `
      padding: ${cvar('spacing-8')};
    `;
    return css `
    padding: ${cvar('spacing-12')};
  `;
};
const btnSizeCss = (size) => {
    if (size === 'lg')
        return css `
      padding: ${cvar('spacing-12')} ${cvar('spacing-32')};
    `;
    if (size === 'sm')
        return css `
      padding: ${cvar('spacing-4')} ${cvar('spacing-12')};
    `;
    return css `
    padding: ${cvar('spacing-8')} ${cvar('spacing-24')};
  `;
};
const btnFontCss = (size) => {
    if (size === 'lg')
        return css `
      font: ${cvar('text-button-large')};
    `;
    if (size === 'sm')
        return css `
      font: ${cvar('text-button-small')};
    `;
    return css `
    font: ${cvar('text-button-medium')};
  `;
};
const buttonClassTypes = (variant) => {
    switch (variant) {
        case 'primary':
            return primaryButtonStyle;
        case 'link':
            return linkButtonStyle;
        case 'anchor':
            return anchorStyle;
        default:
            return defaultButtonStyle;
    }
};
const disabledButtonClassTypes = (variant) => {
    switch (variant) {
        case 'anchor':
            return `${anchorStyle} ${disabledAnchorStyle}`;
        default:
            return disabledButtonStyle;
    }
};
const aTag = (_a) => {
    var { children, icon, className } = _a, rest = __rest(_a, ["children", "icon", "className"]);
    return (React.createElement("a", Object.assign({}, rest, { className: cx('crc-anchor', className) }), icon || children));
};
const buttonTag = (_a) => {
    var { children, icon, className } = _a, rest = __rest(_a, ["children", "icon", "className"]);
    return (React.createElement("button", Object.assign({}, rest, { className: cx('crc-button', className) }), icon || children));
};
export const Button = (_a) => {
    var { blockLevel = false, className, disabled = false, href, icon: originalIcon, onClick, size = 'default', variant = 'default', target } = _a, rest = __rest(_a, ["blockLevel", "className", "disabled", "href", "icon", "onClick", "size", "variant", "target"]);
    const icon = originalIcon &&
        React.cloneElement(originalIcon, {
            style: { display: 'block' },
        });
    const variantCss = cx(btnFontCss(size), defaultButtonStyle, disabled ? disabledButtonClassTypes(variant) : buttonClassTypes(variant), variant === 'anchor' ? '' : icon ? btnIconSizeCss(size) : btnSizeCss(size), { [blockLevelButtonStyle]: blockLevel }, className);
    return href
        ? aTag(Object.assign({ href, target, icon, disabled, size, onClick, className: variantCss }, rest))
        : buttonTag(Object.assign({ disabled, icon, size, onClick, className: variantCss }, rest));
};
//# sourceMappingURL=Button.js.map