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"
isHoverable	Boolean	Add hover style effects	true
simple	Boolean	Hides the description and enlarges the abbreviation - use for small badge display	false

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
• envy
• figlog
• cloudsplice

For a simplified version of the logo without the name in the badge (works better for smaller sizes), you can use the simple variant of any of the above options.

<FeaturedBadge name="victory" simple />

FeaturedBadge props

Prop	Type	Description	Default
name	String	One of the available badge names	''
className	String	Additional class names	''
isHoverable	Boolean	Add hover style effects	true
simple	Boolean	Hides the description and enlarges the abbreviation - use for small badge display	false

Featured Project Badges

Named exports of featured project badges for importing a single badge.

Available Badges

See featuredProjectBadges for the latest available lineup.

• RenatureBadge
• SpectacleBadge
• UrqlBadge
• VictoryBadge
• NukaBadge
• OwlBadge
• GroqdBadge
• EnvyBadge
• FigLogBadge
• CloudSpliceBadge

FeaturedBadge props

Prop	Type	Description	Default
className	String	Additional class names	''
isHoverable	Boolean	Add hover style effects	true
simple	Boolean	Hides the description and enlarges the abbreviation - use for small badge display	false

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.