@workday/canvas-kit-react 12.4.0-1015-next.0 → 13.0.0-alpha.1009-next.0

package/dist/es6/skeleton/lib/parts/skeletonText.js

@@ -1,26 +0,0 @@
-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';
-const TextContainer = styled('div')({
-    marginBottom: space.m,
-});
-const Line = styled('div', {
-    shouldForwardProp: filterOutProps(['backgroundColor', 'width']),
-})(({ backgroundColor, width }) => {
-    return {
-        backgroundColor,
-        width,
-        borderRadius: borderRadius.s,
-        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))),
-});

package/dist/es6/skeleton/lib/skeleton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../../skeleton/lib/skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,WAAW,aAAa;IAC5B;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAmBD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,QAAQ;IAcjB;;OAEG;;IAEH;;;;OAIG;;IAEH;;;;OAIG;;CAGL,CAAC"}

package/skeleton/lib/parts/skeletonHeader.tsx

@@ -1,48 +0,0 @@
-import * as React from 'react';
-
-import {createComponent} from '@workday/canvas-kit-react/common';
-import {borderRadius, colors} from '@workday/canvas-kit-react/tokens';
-
-import {SkeletonShape} from './skeletonShape';
-
-export interface SkeletonHeaderProps {
-  /**
-   * The background color of the skeleton
-   * @default soap200
-   */
-  backgroundColor?: string;
-  /**
-   * The height of the shape in `px` or `%`.
-   * @default 28px
-   */
-  height?: number | string;
-  /**
-   *  The width of the shape in `px` or `%`.
-   * @default 100%
-   */
-  width?: number | string;
-}
-
-export const SkeletonHeader = createComponent('div')({
-  displayName: 'Skeleton.Header',
-  Component: (
-    {
-      backgroundColor = colors.soap200,
-      height = '28px',
-      width = '100%',
-      ...elemProps
-    }: SkeletonHeaderProps,
-    ref,
-    Element
-  ) => (
-    <SkeletonShape
-      ref={ref}
-      as={Element}
-      backgroundColor={backgroundColor}
-      borderRadius={borderRadius.s}
-      height={height}
-      width={width}
-      {...elemProps}
-    />
-  ),
-});

package/skeleton/lib/parts/skeletonShape.tsx

@@ -1,63 +0,0 @@
-import * as React from 'react';
-import styled from '@emotion/styled';
-
-import {createComponent, StyledType} from '@workday/canvas-kit-react/common';
-import {colors, space} from '@workday/canvas-kit-react/tokens';
-
-export interface SkeletonShapeProps {
-  /**
-   *  The width of the shape in `px` or `%`.
-   * @default 100%
-   */
-  width?: number | string;
-  /**
-   * The height of the shape in `px` or `%`.
-   * @default 100%
-   */
-  height?: number | string;
-  /**
-   * The borderRadius of the shape in `px` or `%`.
-   * @default 0
-   */
-  borderRadius?: number | string;
-  /**
-   * The background color of the skeleton
-   * @default soap200
-   */
-  backgroundColor?: string;
-}
-
-const Shape = styled('div')<SkeletonShapeProps & StyledType>(
-  ({backgroundColor, borderRadius, height, width}) => ({
-    backgroundColor,
-    borderRadius,
-    height,
-    width,
-    marginBottom: space.s,
-  })
-);
-
-export const SkeletonShape = createComponent('div')({
-  displayName: 'Skeleton.Shape',
-  Component: (
-    {
-      backgroundColor = colors.soap200,
-      borderRadius = 0,
-      height = '100%',
-      width = '100%',
-      ...elemProps
-    }: SkeletonShapeProps,
-    ref,
-    Element
-  ) => (
-    <Shape
-      ref={ref}
-      as={Element}
-      backgroundColor={backgroundColor}
-      borderRadius={borderRadius}
-      height={height}
-      width={width}
-      {...elemProps}
-    />
-  ),
-});

package/skeleton/lib/parts/skeletonText.tsx

@@ -1,65 +0,0 @@
-import * as React from 'react';
-import styled from '@emotion/styled';
-
-import {createComponent, filterOutProps, StyledType} from '@workday/canvas-kit-react/common';
-import {borderRadius, colors, space} from '@workday/canvas-kit-react/tokens';
-
-const TextContainer = styled('div')<StyledType>({
-  marginBottom: space.m,
-});
-
-export interface SkeletonTextProps {
-  /**
-   * The number of "lines" that SkeletonText will display. If there is more than one line, the last line will have a width of `60%`.
-   * @default 2
-   */
-  lineCount?: number;
-  /**
-   * The background color of the skeleton
-   * @default soap200
-   */
-  backgroundColor?: string;
-}
-
-const Line = styled('div', {
-  shouldForwardProp: filterOutProps(['backgroundColor', 'width']),
-})<
-  {
-    backgroundColor: string;
-    width: number | string;
-  } & StyledType
->(({backgroundColor, width}) => {
-  return {
-    backgroundColor,
-    width,
-    borderRadius: borderRadius.s,
-    height: '21px',
-    marginBottom: space.xs,
-  };
-});
-
-const createTextLines = (lineCount: number, backgroundColor: string) => {
-  const lines = new Array(lineCount).fill(null);
-
-  return lines.map((_value, index) => (
-    <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}: SkeletonTextProps,
-    ref,
-    Element
-  ) =>
-    lineCount <= 0 ? null : (
-      <TextContainer ref={ref} as={Element} {...elemProps}>
-        {createTextLines(lineCount, backgroundColor)}
-      </TextContainer>
-    ),
-});