@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
22 lines (21 loc) • 1.32 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { createComponent } from '@workday/canvas-kit-react/common';
import { createStencil, handleCsProp, px2rem, cssVar, calc, } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
import { SkeletonShape } from './SkeletonShape';
export const skeletonHeaderStencil = createStencil({
vars: {
width: '',
height: '',
backgroundColor: '',
},
base: { name: "14oy62", styles: "box-sizing:border-box;background-color:var(--backgroundColor-skeleton-header-7a0ddd, var(--cnvs-sys-color-bg-alt-strong));border-radius:0;height:var(--height-skeleton-header-7a0ddd, calc(var(--cnvs-sys-space-x1) * 7));width:var(--width-skeleton-header-7a0ddd);margin-bottom:var(--cnvs-sys-space-x4);" }
}, "skeleton-header-7a0ddd");
export const SkeletonHeader = createComponent('div')({
displayName: 'Skeleton.Header',
Component: ({ width = '100%', backgroundColor, height, ...elemProps }, ref, Element) => (_jsx(SkeletonShape, { ref: ref, as: Element, ...handleCsProp(elemProps, skeletonHeaderStencil({
width: typeof width === 'number' ? px2rem(width) : width,
backgroundColor: backgroundColor,
height: typeof height === 'number' ? px2rem(height) : height,
})) })),
});