@workday/canvas-kit-react/dist/es6/skeleton/lib/Skeleton.js

The parent module that contains all Workday Canvas Kit React components

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { accessibleHide, createComponent } from '@workday/canvas-kit-react/common';
import { createStencil, handleCsProp, keyframes } from '@workday/canvas-kit-styling';
import { SkeletonHeader } from './parts/SkeletonHeader';
import { SkeletonShape } from './parts/SkeletonShape';
import { SkeletonText } from './parts/SkeletonText';
const fade = keyframes({ name: "3h3zrp", styles: "from{opacity:0.4;}to{opacity:1;}" });
export const skeletonStencil = createStencil({
    base: { name: "4aq804", styles: "box-sizing:border-box;animation:animation-3h3zrp 0.8s linear infinite alternate;position:relative;overflow:hidden;height:100%;width:100%;& [data-part=\"skeleton-accessible-hide\"]{clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;min-height:1px;width:1px;min-width:1px;margin:-1px;padding:0;border:0;}" }
}, "skeleton-b7ee63");
/**
 * Skeleton subcomponents **must** be wrapped by the `Skeleton` container component.
 *
 * ```tsx
 * <Skeleton>
 *   <Skeleton.Header />
 *   <Skeleton.Text />
 * </Skeleton>
 * ```
 *
 * `Skeleton` places its children in a container element with `aria-hidden` set to `true` and
 * announces itself using a visually hidden element.
 */
export const Skeleton = createComponent('div')({
    displayName: 'Skeleton',
    Component: ({ children, 'aria-label': loadingAriaLabel = 'Loading', ...elemProps }, ref, Element) => (_jsxs(Element, { ref: ref, ...handleCsProp(elemProps, skeletonStencil()), children: [_jsx("div", { "data-part": "skeleton-accessible-hide", children: loadingAriaLabel }), _jsx("div", { "aria-hidden": true, children: children })] })),
    subComponents: {
        /**
         * `Skeleton.Header` renders a placeholder for header content such as headings.
         */
        Header: SkeletonHeader,
        /**
         * `Skeleton.Text` renders a placeholder for text content such as paragraphs. Each placeholder
         * line has a width of `100%` and a fixed height of `21px`, with the last line having a width of
         * `60%` if there are multiple lines.
         */
        Text: SkeletonText,
        /**
         * `Skeleton.Shape` renders a placeholder for graphic elements such as icons, avatars and small
         * images. Set the `height`, `width`, and `borderRadius` props of the `Skeleton.Shape` to create
         * various rectangular and circular shapes.
         */
        Shape: SkeletonShape,
    },
});