@workday/canvas-kit-react/dist/commonjs/card/lib/Card.js

The parent module that contains all Workday Canvas Kit React components

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Card = exports.cardStencil = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const common_1 = require("@workday/canvas-kit-react/common");
const layout_1 = require("@workday/canvas-kit-react/layout");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
const CardBody_1 = require("./CardBody");
const CardHeading_1 = require("./CardHeading");
// .cnvs-card
exports.cardStencil = (0, canvas_kit_styling_1.createStencil)({
    extends: common_1.cornerShapeStencil,
    vars: {
        background: '',
    },
    base: { name: "nkfxt", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem));display:flex;flex-direction:column;gap:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));padding:var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));background:var(--background-card-10b5c7, var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));border:0.0625rem solid var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));" },
    modifiers: {
        variant: {
            tonal: { name: "3ic9og", styles: "background:var(--background-card-10b5c7, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))));border-color:var(--cnvs-sys-color-border-transparent);" },
            alt: { name: "24zyus", styles: "background:var(--background-card-10b5c7, var(--cnvs-sys-color-surface-elevated, linear-gradient(0deg, oklch(1 0 89.88 / 0.374) 0%, oklch(1 0 89.88 / 0.374) 100%), linear-gradient(0deg, oklch(0 0 0 / 0.0196) 0%, oklch(0 0 0 / 0.0196) 100%), oklch(1 0 0 / 1)));border-color:var(--cnvs-sys-color-border-elevated, oklch(1 0 0 / 1));" }
        }
    }
}, "card-10b5c7");
/**
 * `Card` is a container component that holds a {@link CardBody Card.Body} and an optional
 * {@link CardHeading Card.Heading}. `Card` wraps a non-semantic `div` element. The element can be
 * replaced using the `as` prop, or a `role` or other `aria-*` attributes can be added to give
 * `Card` semantic meaning.
 *
 * **Note**: Changing the `Card` container to certain semantic elements will put accessibility at
 * risk. For example, using the `as` prop to change the cards to buttons will flatten the content in
 * the card. Headings, calls to action, etc. will not function as expected for users with
 * disabilities. Semantic container elements like `<section>`, or using `<li>` grouped together in a
 * common `<ul>` can be a useful way to elevate the accessibility of your design.
 */
exports.Card = (0, common_1.createComponent)('div')({
    displayName: 'Card',
    Component: ({ children, variant, ...elemProps }, ref, Element) => {
        return ((0, jsx_runtime_1.jsx)(Element, { ref: ref, ...(0, layout_1.mergeStyles)(elemProps, (0, exports.cardStencil)({ variant })), children: children }));
    },
    subComponents: {
        /**
         * `Card.Heading` is an optional subcomponent that is meant to describe the Card. Since `Card`
         * is a non-semantic presentational component, `Card.Heading` does not automatically have any
         * semantic meaning. If your use case requires the Heading to label the Card, you must do so
         * manually.
         *
         * For example, {@link Modal} (which uses a `Card`) adds an `aria-labelledby` and a `role` to
         * the `Card`, as well as an `id` to the `Card.Heading`.
         *
         * ```tsx
         * <Card role="dialog" aria-labelledby="card-heading">
         *   <Card.Heading id="card-heading">Card Title</Card.Heading>
         *   <Card.Body>Card Contents</Card.Body>
         * </Card>
         * ```
         *
         * `Card.Heading` defaults to an `<h3>` element, but it can be changed using the `as` prop.
         */
        Heading: CardHeading_1.CardHeading,
        /**
         * `Card.Body` is a non-semantic subcomponent that contains the body of the card. Attributes may
         * be added to give `Card.Body` semantic meaning. If `Card.Body` is brief (like in a short
         * dialog), it may be helpful to add an `aria-describedby` referencing the `id` of the
         * `Card.Body` to the `Card` container.
         */
        Body: CardBody_1.CardBody,
    },
});