@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
26 lines (25 loc) • 1.91 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.SkeletonText = exports.skeletonTextStencil = exports.skeletonTextLineStencil = 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");
const SkeletonShape_1 = require("./SkeletonShape");
exports.skeletonTextLineStencil = (0, canvas_kit_styling_1.createStencil)({
extends: SkeletonShape_1.skeletonSurfaceFillStencil,
vars: {
backgroundColor: '',
},
base: { name: "t7t7l", styles: "box-sizing:border-box;height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));margin-block-end:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));border-radius:var(--cnvs-sys-shape-xxxl, 2rem);width:100%;display:block;" }
}, "skeleton-text-line-318cd1");
exports.skeletonTextStencil = (0, canvas_kit_styling_1.createStencil)({
base: { name: "3kq3wt", styles: "box-sizing:border-box;margin-block-end:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));& [data-part=\"skeleton-text-lines\"]:last-child{width:60%;}" }
}, "skeleton-text-175643");
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 ? ((0, jsx_runtime_1.jsx)(Element, { ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.skeletonTextStencil)()), children: lines.map((_value, index) => ((0, jsx_runtime_1.jsx)("div", { "data-part": "skeleton-text-lines", ...(0, canvas_kit_styling_1.handleCsProp)({}, (0, exports.skeletonTextLineStencil)({ backgroundColor })) }, index))) })) : null;
},
});