formidable-oss-badges

Formidable OSS Badges

Badges for Formidable Open Source Projects

Contents

• Using the package
• ProjectBadge
  • Component props
  • Component children
  • Usage
• FeaturedBadge
  • Available badges
  • Usage
• Examples
• Try component locally

Using the package

• yarn add formidable-oss-badges or npm install formidable-oss-badges
• In your react app, import { FeaturedBadge, ProjectBadge } from "formidable-oss-badges";
• To get hover styles using CSS modules import "formidable-oss-badges/dist/style.css";
• Use the <ProjectBadge /> or <FeaturedBadge /> 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"
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%" />

FeaturedBadge

To use a Featured Formidable Badge, you only need to pass in a single prop, name, that matches one of the available badges listed below.

Available Badges

See featuredLogos for the latest available lineup.

• renature
• spectacle
• urql
• victory
• nuka
• owl
• groqd

Additional props

Prop	Type	Description	Default
className	String	Additional class names	''
isHoverable	Boolean	Add hover style effects	true

Examples (with Images)

ProjectBadge Usage

Example 1:

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

Example 2:

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

Example 3:

<ProjectBadge />

Example 5:

ProjectBadge with svg child:

<ProjectBadge abbreviation="R" description="React" 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>

FeaturedBadge Usage

Example 6:

<FeaturedBadge name="victory">

Example Badges

1	2	3

4	5	6

Try the components locally

To try out the badge components locally:

1. git clone this repo
2. cd formidable-oss-badges
3. yarn install
4. yarn storybook

Maintenance Status

Active: Formidable is actively working on this project, and we expect to continue for work for the foreseeable future. Bug reports, feature requests and pull requests are welcome.