@workday/canvas-kit-react/dist/es6/expandable/lib/Expandable.js

The parent module that contains all Workday Canvas Kit React components

import { jsx as _jsx } from "react/jsx-runtime";
import { createContainer } from '@workday/canvas-kit-react/common';
import { mergeStyles } from '@workday/canvas-kit-react/layout';
import { ExpandableContent } from './ExpandableContent';
import { ExpandableTarget } from './ExpandableTarget';
import { ExpandableIcon } from './ExpandableIcon';
import { ExpandableTitle } from './ExpandableTitle';
import { ExpandableAvatar } from './ExpandableAvatar';
import { useExpandableModel } from './hooks/useExpandableModel';
import { createStencil } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
export const expandableContainerStencil = createStencil({
    base: { name: "2m0mbc", styles: "box-sizing:border-box;display:flex;flex-direction:column;padding:var(--cnvs-sys-space-x2);" }
}, "expandable-container-f664d5");
/**
 * `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.
 */
export const Expandable = createContainer('div')({
    displayName: 'Expandable',
    modelHook: 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,
        /**
         * `Expandable.Title` styles the target text that describes the content.
         */
        Title: 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,
        /**
         * `Expandable.Avatar` is an optional component that creates an `Avatar` to display a decorative
         * image.
         */
        Avatar: 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,
    },
})(({ children, ...elementProps }, Element) => (_jsx(Element, { ...mergeStyles(elementProps, expandableContainerStencil()), children: children })));