@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
49 lines (48 loc) • 2.83 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Skeleton = exports.skeletonStencil = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const common_1 = require("@workday/canvas-kit-react/common");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const SkeletonHeader_1 = require("./parts/SkeletonHeader");
const SkeletonShape_1 = require("./parts/SkeletonShape");
const SkeletonText_1 = require("./parts/SkeletonText");
const fade = (0, canvas_kit_styling_1.keyframes)({ name: "hqdnc", styles: "from{opacity:0.4;}to{opacity:1;}" });
exports.skeletonStencil = (0, canvas_kit_styling_1.createStencil)({
base: { name: "157p4l", styles: "box-sizing:border-box;animation:animation-hqdnc 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.
*/
exports.Skeleton = (0, common_1.createComponent)('div')({
displayName: 'Skeleton',
Component: ({ children, 'aria-label': loadingAriaLabel = 'Loading', ...elemProps }, ref, Element) => ((0, jsx_runtime_1.jsxs)(Element, { ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.skeletonStencil)()), children: [(0, jsx_runtime_1.jsx)("div", { "data-part": "skeleton-accessible-hide", children: loadingAriaLabel }), (0, jsx_runtime_1.jsx)("div", { "aria-hidden": true, children: children })] })),
subComponents: {
/**
* `Skeleton.Header` renders a placeholder for header content such as headings.
*/
Header: SkeletonHeader_1.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_1.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_1.SkeletonShape,
},
});