add rest props spread for using ProjectBadge in the OSS Banner context (

#91)

* add rest props spread for using ProjectBadge in the OSS Banner context

* add svg element props to ProjectBadge and a new story to test

---------

Co-authored-by: Christy Presler <[email protected]>

.changeset/kind-candles-fail.md

@@ -0,0 +1,6 @@
+---
+"formidable-oss-badges": patch
+---
+
+Enable ProjectBadge to accept additional props for use in OSS Banner - matching
+FeaturedBadge"

src/ProjectBadge.stories.tsx

@@ -17,3 +17,19 @@ ReactLiveBadge.args = {
   color: "skyblue",
   simple: false,
 }
+
+const BannerTemplate: ComponentStory<typeof ProjectBadge> = args => (
+  <ProjectBadge {...args} />
+)
+
+export const ReactNativeBadge = BannerTemplate.bind({})
+ReactNativeBadge.args = {
+  abbreviation: "Re",
+  description: "React Native",
+  color: "skyblue",
+  simple: true,
+  x: "40",
+  y: "160",
+  width: "200",
+  height: "200",
+}

src/ProjectBadge.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, Fragment } from "react"
+import React, { CSSProperties, Fragment, SVGProps } from "react"
 import clsx from "clsx"
 import reducerFn from "./reducerFn"
 import styles from "./styles.module.css"
@@ -7,7 +7,7 @@ const BLACK = "#202020"
 const BASE_Y = 58
 const includesDescender = (str: string) => RegExp(`[gjpqy]`).test(str)
 
-type Props = {
+type Props = SVGProps<SVGSVGElement> & {
   color?: string
   abbreviation: string
   description: string
@@ -52,6 +52,8 @@ const ProjectBadge = (props: Props) => {
     style,
     isHoverable = true,
     simple = false,
+    description,
+    ...rest
   } = props
   let baseY = BASE_Y
   if (simple) {
@@ -64,6 +66,7 @@ const ProjectBadge = (props: Props) => {
         viewBox="0 0 600 595"
         className={clsx(isHoverable && styles.hoverableLogo, className)}
         style={style}
+        {...rest}
       >
         <g fill="none" fillRule="evenodd">
           <path