shelving/ui/block/Card.js

Toolkit for using data in JavaScript.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Clickable } from "../form/Clickable.js";
import { getColorClass } from "../style/Color.js";
import { getPaddingClass } from "../style/Padding.js";
import { getSpacingClass } from "../style/Spacing.js";
import { getStatusClass } from "../style/Status.js";
import { getThicknessClass } from "../style/Thickness.js";
import { getTypographyClass } from "../style/Typography.js";
import { getWidthClass } from "../style/Width.js";
import { getClass, getModuleClass } from "../util/css.js";
import CARD_CSS from "./Card.module.css";
/**
 * Cards are boxed areas for content to sit within — rendered as `<article>` since each card represents a self-contained piece of content.
 * - When `href` or `onClick` is set the card becomes navigable: a stretched overlay `<a>` / `<button>` covers the entire card while the children render normally inside.
 * - Real interactive elements inside the card (e.g. inline `<a>` links) stay clickable thanks to `position: relative; z-index: 2` rules in the stylesheet.
 * - Accepts a `status` colour and raw `ColorVariants` — the card styles the box; lay out its contents however the use case needs.
 *
 * @example <Card><Subheading>Static</Subheading></Card>
 * @example <Card href="/foo" title="Open foo"><Subheading>Clickable</Subheading></Card>
 * @example <Card status="error"><Subheading>Not found</Subheading></Card>
 */
export function Card({ children, href, onClick, title = "Open", status, ...props }) {
    const overlay = (href || onClick) && _jsx(Clickable, { title: title, href: href, onClick: onClick, ...props, className: CARD_CSS.overlay });
    return (_jsxs("article", { className: getClass(getModuleClass(CARD_CSS, "card"), status && getStatusClass(status), getColorClass(props), getPaddingClass(props), getSpacingClass(props), getThicknessClass(props), getTypographyClass(props), getWidthClass(props)), children: [overlay, overlay ? _jsx("div", { children: children }) : children] }));
}