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" />
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 frustrationThe component should contain:
dcx-skeleton
for all the variantdcx-skeleton-text
if variant is text (dcx-skeleton dcx-skeleton-text
)dcx-skeleton-circular
if variant is circular (dcx-skeleton dcx-skeleton-circular
)dcx-skeleton-rectangular
if variant is rectangular (dcx-skeleton dcx-skeleton-rectangular
)dcx-skeleton-rounded
if variant is rounded (dcx-skeleton dcx-skeleton-rounded
)aria
states for Accessibilityaria-live
andaria-busy
Code Guidance:
Available Props:
text
,circular
,rectangular
orrounded
animator
prop, which we will either pulsate or wave (with css) or be disable entirelyanimation="wave|pulsate"
to disable omit the animator propCode Guidance:
Example:
The final user will use in this way:
Behind the scenes the
Skeleton
component could be like so:Tasks:
layout
Please follow the below to create your branch