import { Meta } from '@storybook/addon-docs';
import EditPage from 'Storybook/components/EditPage';

<Meta title="Components/README" />

# Components

The Components directory contains all of the [React components][components]
provided by this library. Each component plays a discrete role in a front-end
application. In general, they fall into two loose categories:

- components that are mostly concerned with adding some visual styling or
  structure to the content on the page, like a `Card` or a `Button` that focus
  on rendering certain, recognizable pieces of a UI; and
- components that don't have any directly visible impact on the page, but that
  provide some other functionality to your application, like the `AtomsRoot`
  which provides a data store for global state.

Because this library is called `@politico/interactive-style` (emphasis on
_style_), it should not be too surprising that most of the components tend
towards the former category. And because that's the trend we've opted to
organize the components mostly by what visual role they play in an application.
Components that are useful for giving your page layout some structure are in
the Layout directory; components that help you render calls to action are in
the Action directory; components that are integral to the POLITICO branding of
our pages are in the Brand directory; and so on.

## How to use our component documentation

Each component includes a documentation page in Storybook, made up of one or
more stories. (If you're new to Storybook, "story" is its term for a live,
interactive example of a component being used.) If you look at the top of this
page, you should see two tabs: "Canvas" and "Docs". The Canvas tab will allow
you to isolate a single story, while the Docs tab will allow you to see all of
a component's stories on one page and read the accompanying prose
documentation.

In general, each component's Docs page starts with a general explanation of
what the component does and a basic example. Below that, you'll find a table
listing each prop that the component accepts, annotated with its type, its
default value, and a description of what it does. If you're trying to figure
out _everything_ a single component can do, that's the best place to look.
Below the props table, there's usually a set of additional stories that
demonstrate different specific uses of the component. You can click on the
"Show code" button in the bottom right corner of any story to see the basic JSX
that is used to render the story.

[components]: https://react.dev/reference/react/Component

<EditPage page={STORYBOOK_FILE_PATH} />