UNPKG

@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
"use strict"; 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)));