Skeleton

[Ibabalola]

As a developer
I want to be able to use a Skeleton component
so that I can display a placeholder preview for content that is loading to reduce user frustration

The component should contain:

• Embedded className called dcx-skeleton for all the variant
• Embedded className called dcx-skeleton-text if variant is text (dcx-skeleton dcx-skeleton-text)
• Embedded className called dcx-skeleton-circular if variant is circular (dcx-skeleton dcx-skeleton-circular)
• Embedded className calleddcx-skeleton-rectangular if variant is rectangular (dcx-skeleton dcx-skeleton-rectangular)
• Embedded className called dcx-skeleton-rounded if variant is rounded (dcx-skeleton dcx-skeleton-rounded)
• Add appropriate aria states for Accessibility aria-live and aria-busy

Code Guidance:

import { classNames } from '../common';
....
//for text variant
className={classNames(['dcx-skeleton', 'dcx-skeleton-text', className])}

Available Props:

• Relevant 'optional' classes for shared / reusable styling
• Add 'mandatory' variant prop it will be: text, circular , rectangular or rounded
• Add 'optional' fontSize prop (default should be 1rem)
• Add 'optional' width prop (default should be 40px)
• Add 'optional' height prop (default should be 40px)
• Add 'optional' animator prop, which we will either pulsate or wave (with css) or be disable entirely animation="wave|pulsate" to disable omit the animator prop
• Add the ability to specify other props (...props)

Code Guidance:

//Relevant classes for shared / reusable styling
className?: string;
//It will define the look and feel of the skeleton
variant: 'text' | 'circular' | 'rectangular' | 'rounded';
// this property is used only for the variant text and will define the size of it. If not specified will have 1rem 
fontSize?: string;	// by default 1rem
// this property is used for the other variants ('circular' | 'rectangular' | 'rounded') and will define the width of it. If not specified will have 40px
width?: string; // by default 40px
// this property is used for the other variants ('circular' | 'rectangular' | 'rounded') and will define the width of it. If not specified will have 40px
height?: string; // by default 40px
// this property is used to animate the skeleton component thought some css that we need to provide. We want to provide by default the wave and the pulsate animate. When this property is not passed that it will not animate
animation?: 'wave'| 'pulsate"; // if not provided will disable the animation
//additional properties to support something else that we didn't plan
props?: React.HTMLAttributes<HTMLElement>;

Example:

{/* For variant="text", adjust the height via font-size */}
<Skeleton variant="text" fontSize="1rem" className="myClassName" props={{ ...props}} animator='wave' />
{/* For other variants, adjust the size with `width` and `height` */}
<Skeleton variant="circular" width='40px' height='40px' props={{...props}} className="myClassName" />
<Skeleton variant="rectangular" width='210px' height='60px' props={{...props}} className="myClassName" />
<Skeleton variant="rounded" width='210px' height='60px' props={{...props}} className="myClassName" />

The final user will use in this way:

{
  item ? (
    <img
      style={{
        width: 210,
        height: 118,
      }}
      alt={item.title}
      src={item.src}
    />
  ) : (
    <Skeleton variant="rectangular" className="myClassName" width='210px' height='118px' props={{...props}} />
  );
}

Behind the scenes the Skeleton component could be like so:

<span
className="dcx-skeleton dcx-skeleton-circular dcx-skeleton-pulse|wave myClassName text | rounded | rectangular | circular "
style="width:40px;height:40px"
aria-live="polite"
aria-busy="true|false"
>
</span>

Tasks:

• Add unit tests
• Add Application code with commented props
• Add Demo use of component
• Add to storybook documentation file with examples (.mdx) in a section called layout
• Add to live demo

Please follow the below to create your branch

git checkout release/1.1.0
git pull
git checkout -b 'feature/skeleton'