@primer/component-metadata

0.5.1 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i @primer/component-metadata

Weekly Downloads

365

Version

0.5.1

License

MIT

Unpacked Size

23.8 kB

Total Files

3

Last publish

Collaborators

  • lukasoppermann
  • joshblack
  • siddharthkp
  • camertron
  • hectahertz
  • broccolini
  • jonrohan
  • joelhawksley
  • primer-css
  • colebemis
  • manuelpuyol
  • smockle
  • simurai
  • khiga8