Depreciated

This package has been depreciated. See root components folder for code examples.

Current components:

Storybook of /components

Do a yarn install in this directory to prep for building components individually, and to prep for using the Storybook server.

yarn storybook will start up Storybook in your browser (at http://localhost:6006). It will hot-reload your changes to any of the components and stories in this area.

| COMPONENT | NOTES | | --------------- | ------------------------------------------------------------- | | Accordion | An accessible accordion ready for more styling | | Breadcrumbs | An accessible breadcrumb widget, ready for styling | | Button | An accessible styled-components button ready for more styling | | Input | An accessible base input, ready for extending and styling | | Pagination | An accessible pagination widget, ready for styling |

Notes on Storybook

Our implementation of Storybook has some addons:

1. The Story tab shows the source code for the story, making it easy to see how the component could be implemented.

2. The Controls tab replaces Knobs, and allows you to dynamically change props. Most of our components will accept a style object prop, so when you write stories, give a few things as default and they will show in this tab for monkeying with.

3. The Actions tab shows onXXXX type events, like onClick for our Button. Click it, see what happens.

4. The top tabs include Docs, which is an automatic creation and kinda fun

5. Note the other icons in the top tabs, which include background color and responsive adjustments.

6. The Accessability tab All components should pass a11y checks before publishing

Preview with Vercel

All of the component stories can be previewed at https://common-js-components-cast-iron.vercel.app/ Any changes pushed to the main branch will be deployed. Any new branches will deploy to a unique preview URL.

Development

Philosphy on components

The philosophy behind this effort is to create highly reusable, accessible, well-formed React components. These components should come with minimal to no styling, and accept class names and style objects in order to extend any inital styling.

The Button component, for example, uses the story to inform background-color, color, and border-radius. The underlying styled button is set to accept these vars in the styled component, with simple fallback vars such as:

  color: var(--color, var(--text-dark));
  background-color: var(--background-color, var(--neutral10));

Thus, the story is a prototype for the implementation of the component, and in future, grabbing the source of a story can be a jumping off point for implementation.

Dependencies

The components in this area are usually dependent on react and styled-components. They also may leverage accessible components from the Reakit library or other agreed-upon sources.

Note that because we are using Reakit and Styled Components, when composing atomics, we may need to use the "as" prop of styled-components and thus, the render props approach of reakit: https://reakit.io/docs/composition/#render-props

a11y Sources

• Reakit library
• React Aria

a11y Guides

• WCAG 2.0
• a11y Style Guide
• A11y Coffee ☕️

Developing Components

Okay, to make a new component, use the pattern of Button, with a file structure like:

Components/
    ComponentName
    |__ src
        |__ Component.stories.js
        |__ index.js
    |__ package.json

This sets you up to be able to install this lil-bitty component, and thus to build it for distribution. Copy the Button's package.json and you'll see what I mean. If we end up doing a monorepo we won't have to publish each one, but for now, we do. This is because it would be overkill to import all the components any time we wanted to use one in a project. So, see below about working on packages for both styling packages and these components.