formidable-oss-badges

Formidable OSS Badges

Badges for Formidable Open Source Projects

Contents

• Using the package
• ProjectBadge
  • Component props
  • Component children
• IconBadge
  • Component props
  • Component children
• Examples
• Try component locally

Using the package

• yarn add formidable-oss-badges or npm install formidable-oss-badges
• In your react app, import { ProjectBadge, IconBadge } from "formidable-oss-badges";
• Use the <ProjectBadge /> and/or <IconBadge></IconBadge> component as directed below

ProjectBadge

ProjectBadge props

The <ProjectBadge /> component takes five, optional, props:

Prop	Type	Description	Example
color	String (hex/RGB)	Base color of the badge	"#FF00FF"
abbreviation	String	Short representation of the name. Large font. Typically one uppercase letter, one lowercase.	"Em"
description	String	Title or brief description. Smaller text, displayed in all-caps.	"Enzyme Matchers"
number	Number or String	Number that appears at the top of the badge	9 or "09"
className	String	Class to apply directly to the SVG	"project-badge"

It is recommended to at least include the color, description and abbreviation props.

ProjectBadge children

Will accept any svg child (we recommend to use an <image/> with an embedded png, svg or lossless image format of your choice. See example 5).

Presence of a child will cause the component to ignore any abbreviation prop.

You will need to position the child yourself.

e.g:

 <image
    x="14%"
    y="20%"
  />

IconBadge

IconBadge props

<IconBadge /> only accepts a color prop.

Prop	Type	Description	Example
color	String (hex/RGB)	Base color of the badge	"#FF00FF"

IconBadge children

Like ProjectBadge, will accept any svg child (we recommend to use an <image/> with an embedded png, svg or lossless image format of your choice. See example 4).

This badge should always be given a child.

You will need to position the child yourself.

Examples

1:

<ProjectBadge color="#89E" abbreviation="No" description="Number" />

2:

<ProjectBadge
  color="#E48055"
  abbreviation="Em"
  description="Enzyme Matchers"
  number="09"
/>

3:

<ProjectBadge />

Children:

4:

IconBadge which just shows an outline:

<IconBadge color="#89E">
  <image
    x="14%"
    y="20%"
    width="50%"
    href="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/512px-React-icon.svg.png"
  />
</IconBadge>

5:

ProjectBadge with svg child:

<ProjectBadge abbreviation="R" description="React" number="09" color="#90dafa">
  <image
    x="14%"
    y="20%"
    width="50%"
    href="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/512px-React-icon.svg.png"
  />
</ProjectBadge>

Try the components locally

To try out the badge components locally:

1. git clone this repo
2. cd formidable-oss-badges
3. yarn && yarn build && yarn link or npm i && npm run build && npm link
4. cd examples
5. yarn link "formidable-oss-badges" or npm link "formidable-oss-badges"
6. yarn && yarn start or npm i && npm start to run a basic React app prepopulated with basic examples

You can then edit examples/src/App.js, either by returning the components directly, or by adding an object with the props you would like to trial in the dataForExamples array.

Note that this array is currently just used for passing props into <ProjectBadge /> and not for passing children or for rendering <IconBadge />.