# Primer Component Metadata

[![npm](https://img.shields.io/npm/v/@primer/component-metadata)](https://www.npmjs.com/package/@primer/component-metadata)
[![CI](https://github.com/primer/component-metadata/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/primer/component-metadata/actions/workflows/ci.yml)

🚧 _Work in progress. Expect frequent breaking changes._

A place to store component metadata shared across all implementations of Primer.

## Installation

Install with npm or yarn:

```bash
npm install @primer/component-metadata
```

```bash
yarn add @primer/component-metadata
```

## Usage

```javascript
import metadata from "@primer/component-metadata";

metadata.components.progress_bar;
// {
//   id: 'progress_bar',
//   displayName: 'Progress bar',
//   description: 'Use progress bars to visualize task completion.',
//   implementations: {
//     react: 'https://primer.style/components/ProgressBar',
//     viewComponent: 'https://primer.style/view-components/components/progressbar',
//     css: 'https://primer.style/css/components/progress'
//   }
// }
```

## Metadata

Each component should have the following metadata:

| Name | Description | Guidelines |
| --- | --- | --- |
| `id` (required) | A unqiue string used to identify the component | The `id` of the component should be the component name in snake case (e.g. `"progress_bar"`) |
| `displayName` (required) | The name of the component | Use sentence case (e.g. `"Progress bar"`) |
| `description` (required) | Describe how the component should be used | Use [active voice](https://www.plainlanguage.gov/guidelines/conversational/use-active-voice/) (e.g. `"Use progress bars to ..."` not `"Progress bars are used to ..."`) |
| `guidelines` | URL to design guidelines for the component | |
| `implementations.react` | URL to React implementation of the component | |
| `implementations.viewComponent` | URL to ViewComponent implementation of the component | |
| `implementations.css` | URL to CSS impelementation of the component | |
| `implementations.figma` | URL to Figma implementation of the component | |