Primer Component Metadata
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 |