Add simple (#88)

* add simple option for project badges * implement simple for featured badges and add cloudsplice * update readme with simple prop info * Update README.md Co-authored-by: Charlie Brown <[email protected]> * add featured project badge simple usage code example * return BASE_Y constant and change to function level override --------- Co-authored-by: Christy Presler <[email protected]> Co-authored-by: Charlie Brown <[email protected]>
FormidableLabs · Apr 19, 2024 · f712c1a · f712c1a
1 parent 684ec88
commit f712c1a
Show file tree

Hide file tree

Showing 20 changed files with 384 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -36,6 +36,8 @@ The `<ProjectBadge />` component takes five, optional, props:
 | 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.
 
@@ -70,13 +72,22 @@ See [featuredLogos](https://github.com/FormidableLabs/formidable-oss-badges/tree
 - `groqd`
 - `envy`
 - `figlog`
+- `cloudsplice`
 
-### Additional props
+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.
 
-| Prop        | Type    | Description              | Default |
-| ----------- | ------- | ------------------------ | ------- |
-| className   | String  | Additional class names   | `''`    |
-| isHoverable | Boolean | Add hover style effects  | `true` |
+```jsx
+<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` |
 
 ## Examples (with Images)
 

diff --git a/src/FeaturedBadge.stories.tsx b/src/FeaturedBadge.stories.tsx
@@ -11,25 +11,28 @@ const Template: ComponentStory<typeof FeaturedBadge> = args => (
 )
 
 export const Spectacle = Template.bind({})
-Spectacle.args = { name: "spectacle" }
+Spectacle.args = { name: "spectacle", simple: false }
 
 export const Groqd = Template.bind({})
-Groqd.args = { name: "groqd" }
+Groqd.args = { name: "groqd", simple: false }
 
 export const Nuka = Template.bind({})
-Nuka.args = { name: "nuka" }
+Nuka.args = { name: "nuka", simple: false }
 
 export const ReactNativeOwl = Template.bind({})
-ReactNativeOwl.args = { name: "owl" }
+ReactNativeOwl.args = { name: "owl", simple: false }
 
 export const Victory = Template.bind({})
-Victory.args = { name: "victory" }
+Victory.args = { name: "victory", simple: false }
 
 export const Urql = Template.bind({})
-Urql.args = { name: "urql" }
+Urql.args = { name: "urql", simple: false }
 
 export const Envy = Template.bind({})
-Envy.args = { name: "envy" }
+Envy.args = { name: "envy", simple: false }
 
 export const FigLog = Template.bind({})
-FigLog.args = { name: "figlog" }
+FigLog.args = { name: "figlog", simple: false }
+
+export const CloudSplice = Template.bind({})
+CloudSplice.args = { name: "cloudsplice", simple: false }
diff --git a/src/FeaturedBadge.tsx b/src/FeaturedBadge.tsx
@@ -8,19 +8,20 @@ type Props = SVGProps<SVGElement> & {
   className?: string
   isHoverable?: boolean
   style?: CSSProperties
+  simple?: boolean
 }
 
 const FeaturedBadge = ({
   name,
   className,
   style,
   isHoverable = true,
+  simple = false,
   ...rest
 }: Props) => {
+  const keyName = simple ? `${name.toLowerCase()}Simple` : name.toLowerCase()
   const Logo =
-    featuredLogos.default[
-      name.toLowerCase() as keyof typeof featuredLogos.default
-    ]
+    featuredLogos.default[keyName as keyof typeof featuredLogos.default]
   if (!Logo) return null
 
   return (

diff --git a/src/ProjectBadge.stories.tsx b/src/ProjectBadge.stories.tsx
@@ -12,7 +12,8 @@ const Template: ComponentStory<typeof ProjectBadge> = args => (
 
 export const ReactLiveBadge = Template.bind({})
 ReactLiveBadge.args = {
-  abbreviation: "RL",
+  abbreviation: "Re",
   description: "React Live",
   color: "skyblue",
+  simple: false,
 }
diff --git a/src/ProjectBadge.tsx b/src/ProjectBadge.tsx
@@ -15,6 +15,7 @@ type Props = {
   className?: string
   isHoverable?: boolean
   style?: CSSProperties
+  simple?: boolean
 }
 
 const getDescription = (props: Props) => {
@@ -50,8 +51,13 @@ const ProjectBadge = (props: Props) => {
     className,
     style,
     isHoverable = true,
+    simple = false,
   } = props
-  const abbrYAxis = includesDescender(abbreviation) ? BASE_Y : BASE_Y + 2
+  let baseY = BASE_Y
+  if (simple) {
+    baseY = 64
+  }
+  const abbrYAxis = includesDescender(abbreviation) ? baseY : baseY + 2
   return (
     <Fragment>
       <svg
@@ -84,16 +90,16 @@ const ProjectBadge = (props: Props) => {
             <text
               fill={BLACK}
               fontFamily="Helvetica, sans-serif"
-              fontSize={230}
+              fontSize={simple ? 280 : 230}
               letterSpacing={-5.5}
               textAnchor="middle"
-              x="50%"
+              x={simple ? "49%" : "50%"}
               y={`${abbrYAxis}%`}
             >
               {abbreviation}
             </text>
           )}
-          {getDescription(props)}
+          {!simple && getDescription(props)}
         </g>
       </svg>
     </Fragment>