...
Together we will learn how to contribute to Paragon by contributing a new <Skeleton /> component. This will include:
Paragon installation and workbench set up.
Adding a new component with companion styles
Adding new component documentation
Adding a basic test
Merging, and releasing a new feature version
...
Resources we’ll use
Clone the Paragon repo
https://github.com/edx/paragon
Skeleton styles in Prospectus
| Code Block | ||
|---|---|---|
| ||
@keyframes skeleton-pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
.skeleton-pulse {
animation: skeleton-pulse 2s infinite both;
}
.skeleton {
/* Setting the background-color to important so that we
can ensure that all items in the skeleton loading state
are consistant */
background-color: $slightly-opaque-black !important;
border-radius: $border-radius;
border-radius: 4px;
display: inline-block;
line-height: 1;
width: 100%;
} |
Prop/API Design for our Skeleton Component
| Code Block |
|---|
<Skeleton.Circle size={100} />
<Skeleton.Rect rounded height={100} width={100} />
<Skeleton.Text count={4} /> |
Zero-width non-joiner
https://en.wikipedia.org/wiki/Zero-width_non-joiner
...