@workday/canvas-kit-labs-react
Version:
Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functi
60 lines (59 loc) • 2.93 kB
JavaScript
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Expandable = void 0;
const react_1 = __importDefault(require("react"));
const common_1 = require("@workday/canvas-kit-react/common");
const layout_1 = require("@workday/canvas-kit-react/layout");
const ExpandableContent_1 = require("./ExpandableContent");
const ExpandableTarget_1 = require("./ExpandableTarget");
const ExpandableIcon_1 = require("./ExpandableIcon");
const ExpandableTitle_1 = require("./ExpandableTitle");
const ExpandableAvatar_1 = require("./ExpandableAvatar");
const useExpandableModel_1 = require("./hooks/useExpandableModel");
/**
* `Expandable` wraps an `Expandable.Target` and an `Expandable.Content`. By default, it provides a
* `DisclosureModel` for its subcomponents. Alternatively, a model may be passed in using the
* hoisted model pattern.
*/
exports.Expandable = (0, common_1.createContainer)('div')({
displayName: 'Expandable',
modelHook: useExpandableModel_1.useExpandableModel,
subComponents: {
/**
* `Expandable.Target` creates a heading and a button. The heading is a semantic heading to
* describe the associated content. The button provides users the ability to toggle the
* associated content.
*
* As according to the [W3 disclosure
* specification](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/), the button has
* `aria-expanded` and `aria-controls` attributes set by default
*
* This component should hold an `Expandable.Icon`, an optional `Expandable.Avatar`, and an
* `Expandable.Title`.
*/
Target: ExpandableTarget_1.ExpandableTarget,
/**
* `Expandable.Title` styles the target text that describes the content.
*/
Title: ExpandableTitle_1.ExpandableTitle,
/**
* `Expandable.Icon` creates an icon to visually indicate the state of the content. It takes an
* `iconPosition` prop to determine which chevron icon to use.
*/
Icon: ExpandableIcon_1.ExpandableIcon,
/**
* `Expandable.Avatar` is an optional component that creates an `Avatar` to display a decorative
* image.
*/
Avatar: ExpandableAvatar_1.ExpandableAvatar,
/**
* `Expandable.Content` holds the content that will be conditionally expanded and collapsed. It
* has an `id` to ensure the `Expandable.Target` properly set it to the `aria-controls`
* attribute.
*/
Content: ExpandableContent_1.ExpandableContent,
},
})(({ children, ...elementProps }, Element) => (react_1.default.createElement(layout_1.Flex, { as: Element, flexDirection: 'column', padding: 'xxs', ...elementProps }, children)));
;