@workday/canvas-kit-react/dist/es6/side-panel/lib/SidePanelHeading.js

The parent module that contains all Workday Canvas Kit React components

import { jsx as _jsx } from "react/jsx-runtime";
import { createElemPropsHook, createSubcomponent, } from '@workday/canvas-kit-react/common';
import { Heading, headingStencil } from '@workday/canvas-kit-react/text';
import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
import { useSidePanelModel } from './useSidePanelModel';
export const sidePanelHeadingStencil = createStencil({
    extends: headingStencil,
    base: { name: "2oap3n", styles: "box-sizing:border-box;display:flex;align-items:center;padding:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));padding-inline-start:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));min-height:var(--cnvs-sys-size-xxl, var(--cnvs-sys-space-x16, 4rem));margin:0;&:where([hidden]){display:none;}" },
    modifiers: {
        origin: {
            end: { name: "20zwv9", styles: "padding-inline-start:4.25rem;" },
            start: { name: "o7ihn", styles: "" }
        }
    }
}, "side-panel-heading-9d38c2");
/**
 * Adds the necessary props to the SidePanelHeading subcomponent.
 * This sets the `id` to the `labelId` from the model for accessibility purposes,
 * and hides the heading when the panel is not expanded.
 */
export const useSidePanelHeading = createElemPropsHook(useSidePanelModel)(({ state }) => {
    return {
        id: state.labelId,
        hidden: state.transitionState !== 'expanded',
    };
});
/**
 * `SidePanel.Heading` is a styled heading component that provides the accessible name
 * for the SidePanel. The heading's `id` is automatically set to the model's `labelId`,
 * which is used by the panel's `aria-labelledby` attribute.
 *
 * The heading is automatically hidden when the panel is collapsed.
 */
export const SidePanelHeading = createSubcomponent(Heading)({
    displayName: 'SidePanel.Heading',
    modelHook: useSidePanelModel,
    elemPropsHook: useSidePanelHeading,
})(({ size = 'small', children, ...elemProps }, Element, model) => {
    return (_jsx(Element, { size: size, ...handleCsProp(elemProps, sidePanelHeadingStencil({ size, origin: model.state.origin })), children: children }));
});