@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
84 lines (83 loc) • 4.38 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Card = exports.cardStencil = void 0;
const React = __importStar(require("react"));
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: "ojxax", 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 (React.createElement(Element, { ref: ref, ...(0, layout_1.mergeStyles)(elemProps, (0, exports.cardStencil)()) }, 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,
},
});