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

React components to support the MCP styleguide

"use strict";
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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Button = void 0;
const react_1 = __importDefault(require("react"));
const css_1 = require("@emotion/css");
const cvar_1 = __importDefault(require("./theme/cvar"));
const defaultButtonStyle = (0, css_1.css) `
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 2px;
  border: 1px solid ${(0, cvar_1.default)('color-button-primary')};
  color: ${(0, cvar_1.default)('color-button-primary')};
  background: ${(0, cvar_1.default)('color-button-default')};
  &:hover {
    background: ${(0, cvar_1.default)('color-button-secondary-hover')};
    border-color: ${(0, cvar_1.default)('color-button-secondary-hover')};
    color: ${(0, cvar_1.default)('color-button-primary')};
  }
  &:active {
    background: ${(0, cvar_1.default)('color-button-secondary-active')};
    border-color: ${(0, cvar_1.default)('color-button-secondary-active')};
    color: ${(0, cvar_1.default)('color-button-primary')};
  }
`;
const primaryButtonStyle = (0, css_1.css) `
  color: ${(0, cvar_1.default)('color-text-inverse')};
  background: ${(0, cvar_1.default)('color-interactive')};
  &:hover {
    background: ${(0, cvar_1.default)('color-button-primary-hover')};
    border-color: ${(0, cvar_1.default)('color-button-primary-hover')};
    color: ${(0, cvar_1.default)('color-text-inverse')};
  }
  &:active {
    background: ${(0, cvar_1.default)('color-button-primary-active')};
    border-color: ${(0, cvar_1.default)('color-button-primary-active')};
    color: ${(0, cvar_1.default)('color-text-inverse')};
  }
`;
const linkButtonStyle = (0, css_1.css) `
  border-color: transparent;
  background: transparent;
  text-decoration: none;
  text-shadow: none;
  &:hover,
  &:active {
    text-decoration: none;
  }
`;
const anchorStyle = (0, css_1.css) `
  border-color: transparent;
  background: transparent;
  font-weight: 400;
  &:hover,
  &:active {
    background: transparent;
    border-color: transparent;
    text-decoration: underline;
  }
`;
const disabledAnchorStyle = (0, css_1.css) `
  cursor: text;
`;
const disabledButtonStyle = (0, css_1.css) `
  background: ${(0, cvar_1.default)('color-button-disabled')};
  opacity: 0.65;
  color: ${(0, cvar_1.default)('color-text-disabled-dark')};
  border-color: transparent;
  cursor: not-allowed;
  &:hover {
    background: ${(0, cvar_1.default)('color-button-disabled')};
    opacity: 0.65;
    color: ${(0, cvar_1.default)('color-text-disabled-dark')};
    border-color: transparent;
    cursor: not-allowed;
  }
`;
const blockLevelButtonStyle = (0, css_1.css) `
  width: 100%;
  display: block;
`;
const btnIconSizeCss = (size) => {
    if (size === 'lg')
        return (0, css_1.css) `
      padding: ${(0, cvar_1.default)('spacing-16')};
    `;
    if (size === 'sm')
        return (0, css_1.css) `
      padding: ${(0, cvar_1.default)('spacing-8')};
    `;
    return (0, css_1.css) `
    padding: ${(0, cvar_1.default)('spacing-12')};
  `;
};
const btnSizeCss = (size) => {
    if (size === 'lg')
        return (0, css_1.css) `
      padding: ${(0, cvar_1.default)('spacing-12')} ${(0, cvar_1.default)('spacing-32')};
    `;
    if (size === 'sm')
        return (0, css_1.css) `
      padding: ${(0, cvar_1.default)('spacing-4')} ${(0, cvar_1.default)('spacing-12')};
    `;
    return (0, css_1.css) `
    padding: ${(0, cvar_1.default)('spacing-8')} ${(0, cvar_1.default)('spacing-24')};
  `;
};
const btnFontCss = (size) => {
    if (size === 'lg')
        return (0, css_1.css) `
      font: ${(0, cvar_1.default)('text-button-large')};
    `;
    if (size === 'sm')
        return (0, css_1.css) `
      font: ${(0, cvar_1.default)('text-button-small')};
    `;
    return (0, css_1.css) `
    font: ${(0, cvar_1.default)('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_1.default.createElement("a", Object.assign({}, rest, { className: (0, css_1.cx)('crc-anchor', className) }), icon || children));
};
const buttonTag = (_a) => {
    var { children, icon, className } = _a, rest = __rest(_a, ["children", "icon", "className"]);
    return (react_1.default.createElement("button", Object.assign({}, rest, { className: (0, css_1.cx)('crc-button', className) }), icon || children));
};
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_1.default.cloneElement(originalIcon, {
            style: { display: 'block' },
        });
    const variantCss = (0, css_1.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));
};
exports.Button = Button;
//# sourceMappingURL=Button.js.map