Export Featured Project Badges (#93)

* Add named featured project badge components

* Add Stories and change casing on CloudSplice and FigLog

* Add top level export

* Add change set

* Update README to include featured project badges

.changeset/healthy-jeans-agree.md

@@ -0,0 +1,5 @@
+---
+"formidable-oss-badges": minor
+---
+
+Add featured project badge exports for improved tree shaking

README.md

@@ -20,8 +20,10 @@ Badges for Formidable Open Source Projects
 ## 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";`
+- 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
@@ -39,11 +41,13 @@ The `<ProjectBadge />` component takes five, optional, props:
 | 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.
+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).
+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.
 
@@ -57,11 +61,14 @@ e.g:
 
 ## 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.
+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](https://github.com/FormidableLabs/formidable-oss-badges/tree/master/src/assets/featuredLogos) for the latest available lineup.
+See
+[featuredLogos](https://github.com/FormidableLabs/formidable-oss-badges/tree/master/src/assets/featuredLogos)
+for the latest available lineup.
 
 - `renature`
 - `spectacle`
@@ -74,7 +81,9 @@ See [featuredLogos](https://github.com/FormidableLabs/formidable-oss-badges/tree
 - `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.
+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
 <FeaturedBadge name="victory" simple />
@@ -89,6 +98,35 @@ For a simplified version of the logo without the name in the badge (works better
 | 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](https://github.com/FormidableLabs/formidable-oss-badges/tree/master/src/featuredProjectBadges)
+for the latest available lineup.
+
+- `Renature`
+- `Spectacle`
+- `Urql`
+- `Victory`
+- `Nuka`
+- `Owl`
+- `Groqd`
+- `Envy`
+- `FigLog`
+- `CloudSplice`
+
+### 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
@@ -155,6 +193,9 @@ To try out the badge components locally:
 
 ## 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.
+**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
+[maintenance-image]:
+  https://img.shields.io/badge/maintenance-active-green.svg?color=brightgreen&style=flat

src/featuredProjectBadges/CloudSpliceBadge.tsx

@@ -0,0 +1,30 @@
+import clsx from "clsx"
+import { CSSProperties, SVGProps } from "react"
+import CloudSplice from "../assets/featuredLogos/cloudsplice.svg"
+import CloudSpliceSimple from "../assets/featuredLogos/cloudsplice-simple.svg"
+import styles from "../styles.module.css"
+
+type Props = SVGProps<SVGElement> & {
+  className?: string
+  isHoverable?: boolean
+  style?: CSSProperties
+  simple?: boolean
+}
+
+export const CloudSpliceBadge = ({
+  className,
+  style,
+  isHoverable = true,
+  simple = false,
+  ...rest
+}: Props) => {
+  const Logo = simple ? CloudSpliceSimple : CloudSplice
+
+  return (
+    <Logo
+      className={clsx(isHoverable && styles.hoverableLogo, className)}
+      style={style}
+      {...rest}
+    />
+  )
+}

src/featuredProjectBadges/EnvyBadge.tsx

@@ -0,0 +1,30 @@
+import clsx from "clsx"
+import { CSSProperties, SVGProps } from "react"
+import Envy from "../assets/featuredLogos/envy.svg"
+import EnvySimple from "../assets/featuredLogos/envy-simple.svg"
+import styles from "../styles.module.css"
+
+type Props = SVGProps<SVGElement> & {
+  className?: string
+  isHoverable?: boolean
+  style?: CSSProperties
+  simple?: boolean
+}
+
+export const EnvyBadge = ({
+  className,
+  style,
+  isHoverable = true,
+  simple = false,
+  ...rest
+}: Props) => {
+  const Logo = simple ? EnvySimple : Envy
+
+  return (
+    <Logo
+      className={clsx(isHoverable && styles.hoverableLogo, className)}
+      style={style}
+      {...rest}
+    />
+  )
+}

src/featuredProjectBadges/FigLogBadge.tsx

@@ -0,0 +1,30 @@
+import clsx from "clsx"
+import { CSSProperties, SVGProps } from "react"
+import FigLog from "../assets/featuredLogos/figlog.svg"
+import FigLogSimple from "../assets/featuredLogos/figlog-simple.svg"
+import styles from "../styles.module.css"
+
+type Props = SVGProps<SVGElement> & {
+  className?: string
+  isHoverable?: boolean
+  style?: CSSProperties
+  simple?: boolean
+}
+
+export const FigLogBadge = ({
+  className,
+  style,
+  isHoverable = true,
+  simple = false,
+  ...rest
+}: Props) => {
+  const Logo = simple ? FigLogSimple : FigLog
+
+  return (
+    <Logo
+      className={clsx(isHoverable && styles.hoverableLogo, className)}
+      style={style}
+      {...rest}
+    />
+  )
+}

src/featuredProjectBadges/GroqdBadge.tsx

@@ -0,0 +1,30 @@
+import clsx from "clsx"
+import { CSSProperties, SVGProps } from "react"
+import Groqd from "../assets/featuredLogos/groqd.svg"
+import GroqdSimple from "../assets/featuredLogos/groqd-simple.svg"
+import styles from "../styles.module.css"
+
+type Props = SVGProps<SVGElement> & {
+  className?: string
+  isHoverable?: boolean
+  style?: CSSProperties
+  simple?: boolean
+}
+
+export const GroqdBadge = ({
+  className,
+  style,
+  isHoverable = true,
+  simple = false,
+  ...rest
+}: Props) => {
+  const Logo = simple ? GroqdSimple : Groqd
+
+  return (
+    <Logo
+      className={clsx(isHoverable && styles.hoverableLogo, className)}
+      style={style}
+      {...rest}
+    />
+  )
+}

src/featuredProjectBadges/NukaBadge.tsx

@@ -0,0 +1,30 @@
+import clsx from "clsx"
+import { CSSProperties, SVGProps } from "react"
+import Nuka from "../assets/featuredLogos/nuka.svg"
+import NukaSimple from "../assets/featuredLogos/nuka-simple.svg"
+import styles from "../styles.module.css"
+
+type Props = SVGProps<SVGElement> & {
+  className?: string
+  isHoverable?: boolean
+  style?: CSSProperties
+  simple?: boolean
+}
+
+export const NukaBadge = ({
+  className,
+  style,
+  isHoverable = true,
+  simple = false,
+  ...rest
+}: Props) => {
+  const Logo = simple ? NukaSimple : Nuka
+
+  return (
+    <Logo
+      className={clsx(isHoverable && styles.hoverableLogo, className)}
+      style={style}
+      {...rest}
+    />
+  )
+}

src/featuredProjectBadges/OwlBadge.tsx

@@ -0,0 +1,30 @@
+import clsx from "clsx"
+import { CSSProperties, SVGProps } from "react"
+import Owl from "../assets/featuredLogos/owl.svg"
+import OwlSimple from "../assets/featuredLogos/owl-simple.svg"
+import styles from "../styles.module.css"
+
+type Props = SVGProps<SVGElement> & {
+  className?: string
+  isHoverable?: boolean
+  style?: CSSProperties
+  simple?: boolean
+}
+
+export const OwlBadge = ({
+  className,
+  style,
+  isHoverable = true,
+  simple = false,
+  ...rest
+}: Props) => {
+  const Logo = simple ? OwlSimple : Owl
+
+  return (
+    <Logo
+      className={clsx(isHoverable && styles.hoverableLogo, className)}
+      style={style}
+      {...rest}
+    />
+  )
+}

src/featuredProjectBadges/RenatureBadge.tsx

@@ -0,0 +1,30 @@
+import clsx from "clsx"
+import { CSSProperties, SVGProps } from "react"
+import Renature from "../assets/featuredLogos/renature.svg"
+import RenatureSimple from "../assets/featuredLogos/renature-simple.svg"
+import styles from "../styles.module.css"
+
+type Props = SVGProps<SVGElement> & {
+  className?: string
+  isHoverable?: boolean
+  style?: CSSProperties
+  simple?: boolean
+}
+
+export const RenatureBadge = ({
+  className,
+  style,
+  isHoverable = true,
+  simple = false,
+  ...rest
+}: Props) => {
+  const Logo = simple ? RenatureSimple : Renature
+
+  return (
+    <Logo
+      className={clsx(isHoverable && styles.hoverableLogo, className)}
+      style={style}
+      {...rest}
+    />
+  )
+}

src/featuredProjectBadges/SpectacleBadge.tsx

@@ -0,0 +1,30 @@
+import clsx from "clsx"
+import { CSSProperties, SVGProps } from "react"
+import Spectacle from "../assets/featuredLogos/spectacle.svg"
+import SpectacleSimple from "../assets/featuredLogos/spectacle-simple.svg"
+import styles from "../styles.module.css"
+
+type Props = SVGProps<SVGElement> & {
+  className?: string
+  isHoverable?: boolean
+  style?: CSSProperties
+  simple?: boolean
+}
+
+export const SpectacleBadge = ({
+  className,
+  style,
+  isHoverable = true,
+  simple = false,
+  ...rest
+}: Props) => {
+  const Logo = simple ? SpectacleSimple : Spectacle
+
+  return (
+    <Logo
+      className={clsx(isHoverable && styles.hoverableLogo, className)}
+      style={style}
+      {...rest}
+    />
+  )
+}

src/featuredProjectBadges/UrqlBadge.tsx

@@ -0,0 +1,30 @@
+import clsx from "clsx"
+import { CSSProperties, SVGProps } from "react"
+import Urql from "../assets/featuredLogos/urql.svg"
+import UrqlSimple from "../assets/featuredLogos/urql-simple.svg"
+import styles from "../styles.module.css"
+
+type Props = SVGProps<SVGElement> & {
+  className?: string
+  isHoverable?: boolean
+  style?: CSSProperties
+  simple?: boolean
+}
+
+export const UrqlBadge = ({
+  className,
+  style,
+  isHoverable = true,
+  simple = false,
+  ...rest
+}: Props) => {
+  const Logo = simple ? UrqlSimple : Urql
+
+  return (
+    <Logo
+      className={clsx(isHoverable && styles.hoverableLogo, className)}
+      style={style}
+      {...rest}
+    />
+  )
+}