@workday/canvas-kit-react/dist/es6/skeleton/lib/parts/skeletonText.js

The parent module that contains all Workday Canvas Kit React components

import * as React from 'react';
import styled from '@emotion/styled';
import { createComponent, filterOutProps } from '@workday/canvas-kit-react/common';
import { borderRadius, colors, space } from '@workday/canvas-kit-react/tokens';
import { px2rem } from '@workday/canvas-kit-styling';
const TextContainer = styled('div')({
    marginBottom: space.m,
});
const Line = styled('div', {
    shouldForwardProp: filterOutProps(['backgroundColor', 'width']),
})(({ backgroundColor, width }) => {
    return {
        backgroundColor,
        width,
        borderRadius: borderRadius.s,
        outline: `${px2rem(1)} solid transparent`,
        outlineOffset: `-${px2rem(1)}`,
        height: '21px',
        marginBottom: space.xs,
    };
});
const createTextLines = (lineCount, backgroundColor) => {
    const lines = new Array(lineCount).fill(null);
    return lines.map((_value, index) => (React.createElement(Line, { key: index, backgroundColor: backgroundColor, width: index < lineCount - 1 || lineCount === 1 ? '100%' : '60%' })));
};
export const SkeletonText = createComponent('div')({
    displayName: 'Skeleton.Text',
    Component: ({ backgroundColor = colors.soap200, lineCount = 2, ...elemProps }, ref, Element) => lineCount <= 0 ? null : (React.createElement(TextContainer, { ref: ref, as: Element, ...elemProps }, createTextLines(lineCount, backgroundColor))),
});