@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 CardHeading_1 = require("./CardHeading");
const CardBody_1 = require("./CardBody");
// .cnvs-card
exports.cardStencil = (0, canvas_kit_styling_1.createStencil)({
    base: { name: "u1749", styles: "box-sizing:border-box;box-shadow:var(--cnvs-sys-depth-1);padding:var(--cnvs-sys-space-x8);background-color:var(--cnvs-sys-color-bg-default);border:0.0625rem solid var(--cnvs-sys-color-border-container);border-radius:var(--cnvs-sys-shape-x2);" }
}, "card-f60e02");
/**
 * `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, ...elemProps }, ref, Element) => {
        return ((0, jsx_runtime_1.jsx)(Element, { ref: ref, ...(0, layout_1.mergeStyles)(elemProps, (0, exports.cardStencil)()), 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,
    },
});