@cimpress/react-components/dist/src/SelectableCards/SelectableCard.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.default = SelectableCard;
const react_1 = __importDefault(require("react"));
const css_1 = require("@emotion/css");
const cvar_1 = __importDefault(require("../theme/cvar"));
const SuccessSvg_1 = __importDefault(require("../icons/SuccessSvg"));
const shapes_1 = require("../internal/shapes");
const internal_1 = require("../internal");
function SelectableCard(props) {
    const { label, image, cardStyle = {}, selected = false, onCardSelected, onCardDeselected, size = 'sm' } = props, rest = __rest(props, ["label", "image", "cardStyle", "selected", "onCardSelected", "onCardDeselected", "size"]);
    const selectableCard = (0, css_1.css) `
    cursor: pointer;
    border: 1px solid ${(0, cvar_1.default)('color-border-default')};
    border-radius: 4px;
    position: relative;
    font: ${(0, cvar_1.default)('text-label-default')};
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: ${(0, cvar_1.default)('color-background')};

    .crc-selectablecards_check {
      visibility: ${selected ? 'visible' : 'hidden'};
    }
    &:hover {
      .crc-selectablecards_check {
        visibility: visible;
      }
    }
  `;
    const selectedCard = (0, css_1.css) `
    border: 1px solid ${(0, cvar_1.default)('color-button-primary')};
    box-shadow: 0px 2px 4px 2px rgba(0, 0, 0, 0.1);
    font-weight: bold;
  `;
    const overlay = (0, css_1.css) `
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: ${(0, cvar_1.default)('color-hover')};
    opacity: 0;
    transition: 0.25s;
    z-index: 4;
    &:hover {
      opacity: 0.5;
    }
  `;
    const selectedIcon = (0, css_1.css) `
    position: absolute;
    top: ${(0, cvar_1.default)('spacing-8')};
    left: ${(0, cvar_1.default)('spacing-8')};
    color: ${(0, cvar_1.default)('color-button-primary')};
    z-index: 3;
  `;
    const selectedIconBackground = (0, css_1.css) `
    position: absolute;
    top: ${(0, cvar_1.default)('spacing-8')};
    left: ${(0, cvar_1.default)('spacing-8')};
    z-index: 2;
  `;
    const imageStyle = (0, css_1.css) `
    width: 88px;
    height: 88px;
    object-fit: contain;
    margin: ${(0, cvar_1.default)('spacing-16')} ${(0, cvar_1.default)('spacing-16')} ${label ? (0, cvar_1.default)('spacing-12') : (0, cvar_1.default)('spacing-16')};
  `;
    const divider = (0, css_1.css) `
    height: 1px;
    width: calc(100% - ${(0, cvar_1.default)('spacing-16')} * 2);
    background-color: ${(0, cvar_1.default)('color-border-default')};
    margin-right: ${(0, cvar_1.default)('spacing-16')};
    margin-left: ${(0, cvar_1.default)('spacing-16')};
  `;
    const labelStyle = (0, css_1.css) `
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 1;
    padding-top: ${image ? (0, cvar_1.default)('spacing-8') : size === 'sm' ? (0, cvar_1.default)('spacing-12') : (0, cvar_1.default)('spacing-16')};
    padding-bottom: ${image ? (0, cvar_1.default)('spacing-12') : size === 'sm' ? (0, cvar_1.default)('spacing-12') : (0, cvar_1.default)('spacing-16')};
    padding-left: ${(0, cvar_1.default)('spacing-16')};
    padding-right: ${(0, cvar_1.default)('spacing-16')};
    height: ${!image && size === 'lg' ? '88px' : 'auto'};
    width: ${!image && size === 'lg' ? '88px' : 'auto'};
  `;
    const onCardClicked = () => {
        if (selected) {
            onCardDeselected && onCardDeselected();
        }
        else {
            onCardSelected && onCardSelected();
        }
    };
    return (react_1.default.createElement(internal_1.BlockButton, Object.assign({ className: (0, css_1.cx)(selectableCard, { [selectedCard]: selected }, 'crc-selectablecards'), style: cardStyle, onClick: onCardClicked }, rest),
        react_1.default.createElement("div", { className: overlay }),
        (size === 'lg' || image) && (react_1.default.createElement("div", { className: "crc-selectablecards_check" },
            react_1.default.createElement(shapes_1.Circle, { color: (0, cvar_1.default)('color-background'), className: selectedIconBackground }),
            react_1.default.createElement(SuccessSvg_1.default, { className: selectedIcon }))),
        image && react_1.default.createElement("img", { className: imageStyle, src: image, alt: label }),
        image && label && react_1.default.createElement("div", { className: divider }),
        label && react_1.default.createElement("div", { className: labelStyle }, label)));
}
//# sourceMappingURL=SelectableCard.js.map