Writing a React component for Paragon (Study Group 1-26-2021)

https://drive.google.com/file/d/1Ok2ITast6BAWTt-egRlz8z1NM60hw2LT/view?usp=sharing

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

GitHub - openedx/paragon: 💎 An accessible, theme-ready design system built for learning applications and Open edX.

Skeleton styles in Prospectus

@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

<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

&zwnj;

Design System Documentation

Writing a React component for Paragon (Study Group 1-26-2021)

Resources we’ll use

Clone the Paragon repo

Skeleton styles in Prospectus

Prop/API Design for our Skeleton Component

Zero-width non-joiner

Related content