diff --git a/README.md b/README.md
index d8d9d0a..5c02dd3 100644
--- a/README.md
+++ b/README.md
@@ -36,6 +36,8 @@ The `` 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 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
index 6b9682e..7d1ff5e 100644
--- a/src/FeaturedBadge.stories.tsx
+++ b/src/FeaturedBadge.stories.tsx
@@ -11,25 +11,28 @@ const Template: ComponentStory = 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
index 7bae5b3..aef2c6f 100644
--- a/src/FeaturedBadge.tsx
+++ b/src/FeaturedBadge.tsx
@@ -8,6 +8,7 @@ type Props = SVGProps & {
className?: string
isHoverable?: boolean
style?: CSSProperties
+ simple?: boolean
}
const FeaturedBadge = ({
@@ -15,12 +16,12 @@ const FeaturedBadge = ({
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
index 4f4ae74..02cec32 100644
--- a/src/ProjectBadge.stories.tsx
+++ b/src/ProjectBadge.stories.tsx
@@ -12,7 +12,8 @@ const Template: ComponentStory = 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
index 0fe51d1..44a9d42 100644
--- 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 (
diff --git a/src/assets/featuredLogos/cloudsplice-simple.svg b/src/assets/featuredLogos/cloudsplice-simple.svg
new file mode 100644
index 0000000..557400f
--- /dev/null
+++ b/src/assets/featuredLogos/cloudsplice-simple.svg
@@ -0,0 +1,56 @@
+
diff --git a/src/assets/featuredLogos/cloudsplice.svg b/src/assets/featuredLogos/cloudsplice.svg
new file mode 100644
index 0000000..76321d8
--- /dev/null
+++ b/src/assets/featuredLogos/cloudsplice.svg
@@ -0,0 +1,67 @@
+
diff --git a/src/assets/featuredLogos/envy-simple.svg b/src/assets/featuredLogos/envy-simple.svg
new file mode 100644
index 0000000..e19f361
--- /dev/null
+++ b/src/assets/featuredLogos/envy-simple.svg
@@ -0,0 +1,34 @@
+
diff --git a/src/assets/featuredLogos/envy.svg b/src/assets/featuredLogos/envy.svg
index 021ad5a..5fadf54 100644
--- a/src/assets/featuredLogos/envy.svg
+++ b/src/assets/featuredLogos/envy.svg
@@ -1,4 +1,4 @@
-