Formidable OSS Badges

[![Maintenance Status][maintenance-image]](#maintenance-status)

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 or component as directed below

ProjectBadge

$3

The 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.

$3

Will accept any svg child (we recommend to use an 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:

``jsx

`

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.

$3

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.

`jsx

`

$3

| 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.

$3

See
featuredProjectBadges
for the latest available lineup.

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

$3

| 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)

$3

Example 1:

`jsx

`

Example 2:

`jsx

`

Example 3:

`jsx

`

Example 5:

ProjectBadge with svg child:

`jsx

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

`

$3

Example 6:

`jsx

`

$3

| 1 | 2 | 3 |
| --------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------- |
| !Number | !Enzyme Matchers | !Blank |

| 4 | 5 | 6 |
| ------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| !ProjectBadge with png | !IconBadge with png | !Featured badge |

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.

[maintenance-image]:
https://img.shields.io/badge/maintenance-active-green.svg?color=brightgreen&style=flat