COMPONENT_GUIDELINES.md

General guidelines for React components

• Test your component in the latest version of evergreen browsers

• Use CSS grids for layout where appropriate

• Write tests in Jest

• Take time to learn from other design systems

  • Material UI (EDS is heavily inspired by Material Design)
  • Sprout Social (A lot of similarities with EDS)
  • Reach UI (Excellent on a11y)

• Keep the component as simple as possible

• Always get in touch with one of the lead developers before you start work on a component

• Components issues labelled "storefront" have the highest priority

• Remember to add code for :focus-visible.

  • The main goal is to distinguish between pointer events and keyboard navigation
  • To use in your component, add

  &:focus {
    outline: none;
  }
  
  &:focus-visible {
    outline: ${outline}; /** 1px dashed rgba(0, 112, 121, 1) */
    outline-offset: ${outlineOffset}; /** 2px */
  }