Badges for Formidable OSS
npm install formidable-oss-badges[![Maintenance Status][maintenance-image]](#maintenance-status)
Badges for Formidable Open Source Projects
- Using the package
- ProjectBadge
- Component props
- Component children
- Usage
- FeaturedBadge
- Available badges
- Usage
- Examples
- Try component locally
- 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
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, andabbreviation props.
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`
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.
See
featuredLogos
for the latest available lineup.
- renaturespectacle
- 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`
| Prop | Type | Description | Default |
| ----------- | ------- | --------------------------------------------------------------------------------- | ------- |
| name | String | One of the available badge names | '' |''
| className | String | Additional class names | |true
| isHoverable | Boolean | Add hover style effects | |false
| simple | Boolean | Hides the description and enlarges the abbreviation - use for small badge display | |
Named exports of featured project badges for importing a single badge.
See
featuredProjectBadges
for the latest available lineup.
- RenatureBadgeSpectacleBadge
- UrqlBadge
- VictoryBadge
- NukaBadge
- OwlBadge
- GroqdBadge
- EnvyBadge
- FigLogBadge
- CloudSpliceBadge
-
| Prop | Type | Description | Default |
| ----------- | ------- | --------------------------------------------------------------------------------- | ------- |
| className | String | Additional class names | '' |true
| isHoverable | Boolean | Add hover style effects | |false
| simple | Boolean | Hides the description and enlarges the abbreviation - use for small badge display | |
Example 1:
`jsx`
Example 2:
`jsx`
Example 3:
`jsx`
Example 5:
ProjectBadge with svg child:
`jsx`
y="20%"
width="50%"
href="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/512px-React-icon.svg.png"
/>
Example 6:
`jsx`
| 1 | 2 | 3 |
| --------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------- |
| !Number | !Enzyme Matchers | !Blank |
| 4 | 5 | 6 |
| ------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| !ProjectBadge with png | !IconBadge with png | !Featured badge |
To try out the badge components locally:
1. git clone this repocd formidable-oss-badges
2. yarn install
3. yarn storybook`
4.
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