Skip to content

airbnb/react-component-variations

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-component-variations

⚠️ Warning: this project is still very alpha

This project is:

  • A format called "variations" for specifying React component examples and providing documentation for them.
  • Tools for finding, validating, and iterating over variations.

A variation looks like:

// ButtonVariationProvider.jsx

import React from 'react';
import Button from '../components/Button';

export default function ButtonVariationProvider({ action }) {
  return {
    component: Button,

    usage: 'Buttons are things you click on!',

    variations: [
      {
        title: 'Default',
        render: () => <Button onClick={() => action('onClick')}>click me!</Button>,
      },
      {
        title: 'Disabled',
        render: () => <Button disabled>Nope</Button>
      }
    ],
  };
}

We also have "consumers" that use the variation provider to perform tasks. Example consumers are:

  • Rendering variations in Storybook
  • Running in tests with Enzyme
  • Taking screenshots with Happo
  • Checking for accessibility violations with Axe

Contribution Guidelines:

  1. Fork this Repo
  2. Install dependencies by running npm install in the root of the project directory.
  3. To run lint and test run locally, in the project root run npm test. To run tests only, npm run tests-only.

Make sure new helpers and traversal functions have related tests.

About

No description, website, or topics provided.

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks

Packages

No packages published