@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
20 lines (19 loc) • 1.31 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { createComponent } from '@workday/canvas-kit-react/common';
import { createStencil, cssVar, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
export const skeletonTextStencil = createStencil({
vars: {
backgroundColor: '',
},
base: { name: "1b6w5e", styles: "box-sizing:border-box;margin-bottom:var(--cnvs-sys-space-x6);& [data-part=\"skeleton-text-lines\"]{background-color:var(--backgroundColor-skeleton-text-e74bac, var(--cnvs-sys-color-bg-alt-strong));height:1.3125rem;margin-block-end:var(--cnvs-sys-space-x3);border-radius:var(--cnvs-sys-shape-half);width:100%;}& [data-part=\"skeleton-text-lines\"]:last-child{width:60%;}" }
}, "skeleton-text-e74bac");
export const SkeletonText = createComponent('div')({
displayName: 'Skeleton.Text',
Component: ({ backgroundColor, lineCount = 2, ...elemProps }, ref, Element) => {
const lines = new Array(lineCount).fill(null);
return lineCount <= 0 ? null : (_jsx(Element, { ref: ref, ...handleCsProp(elemProps, skeletonTextStencil({
backgroundColor,
})), children: lines.map((_value, index) => (_jsx("div", { "data-part": 'skeleton-text-lines' }, index))) }));
},
});