@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/comp

Usage no npm install needed!

<script type="module">
  import primerComponentMetadata from 'https://cdn.skypack.dev/@primer/component-metadata';
</script>

README

Primer Component Metadata

npm CI

🚧 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