@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
23 lines (22 loc) • 1.54 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.SkeletonText = exports.skeletonTextStencil = 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 canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
exports.skeletonTextStencil = (0, canvas_kit_styling_1.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");
exports.SkeletonText = (0, common_1.createComponent)('div')({
displayName: 'Skeleton.Text',
Component: ({ backgroundColor, lineCount = 2, ...elemProps }, ref, Element) => {
const lines = new Array(lineCount).fill(null);
return lineCount <= 0 ? null : ((0, jsx_runtime_1.jsx)(Element, { ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.skeletonTextStencil)({
backgroundColor,
})), children: lines.map((_value, index) => ((0, jsx_runtime_1.jsx)("div", { "data-part": 'skeleton-text-lines' }, index))) }));
},
});