Primer Component Metadata

🚧 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:

npm install @primer/component-metadata

yarn add @primer/component-metadata

Usage

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 (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 | |