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