formidable-oss-badges v1.7.2

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:

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

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

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.