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.