@octopusdeploy/design-system-components/dist/src/components/Card/CardGroup.js

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CardGroup = CardGroup;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const hooks_1 = require("../../hooks");
const Card_1 = require("./Card");
function CardGroup(props) {
    switch (props.type) {
        case "single-select":
        case "multi-select":
            return (0, jsx_runtime_1.jsx)(OptionCardGroup, { ...props });
        case "action":
            return (0, jsx_runtime_1.jsx)(ActionCardGroup, { ...props });
    }
}
function OptionCardGroup(props) {
    const isMobile = (0, hooks_1.useIsMobile)();
    const isMultiSelect = props.type === "multi-select";
    function handleChange(itemValue) {
        if (isMultiSelect) {
            const newValues = props.value.includes(itemValue) ? props.value.filter((v) => v !== itemValue) : [...props.value, itemValue];
            props.onChange(newValues);
        }
        else {
            props.onChange(itemValue);
        }
    }
    return ((0, jsx_runtime_1.jsx)("fieldset", { role: isMultiSelect ? "group" : "radiogroup", className: (0, css_1.cx)(cardGroupStyles, { [cardGroupMobileStyles]: isMobile }), "aria-label": props.groupName, children: props.items.map((item) => {
            const isChecked = isMultiSelect ? props.value.includes(item.value) : props.value === item.value;
            return isDetailedCardItem(item) ? ((0, jsx_runtime_1.jsx)(Card_1.DetailedCard, { adornment: item.adornment, title: item.title, description: item.description, value: item.value, onChange: handleChange, checked: isChecked, disabled: item.disabled, isMultiSelect: isMultiSelect, groupName: props.groupName }, item.value)) : ((0, jsx_runtime_1.jsx)(Card_1.CompactCard, { adornment: item.adornment, title: item.title, value: item.value, onChange: handleChange, checked: isChecked, disabled: item.disabled, isMultiSelect: isMultiSelect, groupName: props.groupName }, item.value));
        }) }));
}
function ActionCardGroup({ items }) {
    const isMobile = (0, hooks_1.useIsMobile)();
    return ((0, jsx_runtime_1.jsx)("ul", { className: (0, css_1.cx)(cardGroupStyles, { [cardGroupMobileStyles]: isMobile }), children: items.map((item, index) => ((0, jsx_runtime_1.jsx)("li", { className: actionCardItemStyles, children: (0, jsx_runtime_1.jsx)(Card_1.ActionCard, { ...item }) }, index))) }));
}
function isDetailedCardItem(props) {
    return "description" in props;
}
const cardGroupStyles = (0, css_1.css)({
    display: "grid",
    gridTemplateColumns: "repeat(auto-fill, minmax(22rem, 1fr))",
    gap: design_system_tokens_1.space[16],
    listStyleType: "none",
    border: "none",
    padding: 0,
    margin: 0,
});
const cardGroupMobileStyles = (0, css_1.css)({
    display: "flex",
    flexDirection: "column",
});
const actionCardItemStyles = (0, css_1.css)({
    display: "flex",
});