diff --git a/CHANGELOG.md b/CHANGELOG.md index ed41609..30acc70 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,10 @@ # formidable-oss-badges Changelog +## 0.5.1 (2022-06-24) + +- Fixes render warning for FeaturedBadge via [#68](https://github.com/FormidableLabs/formidable-oss-badges/pull/68) +- Replaces SVG width and height with viewbox attribute via [#68](https://github.com/FormidableLabs/formidable-oss-badges/pull/68) + ## 0.5.0 (2022-06-22) - Adds RN Owl to FeaturedBadge via [#67](https://github.com/FormidableLabs/formidable-oss-badges/pull/67) diff --git a/examples/src/App.css b/examples/src/App.css index 6289584..12c7753 100644 --- a/examples/src/App.css +++ b/examples/src/App.css @@ -12,6 +12,11 @@ width: 350px; } +.small { + margin: 1rem 2rem; + width: 25%; +} + svg { width: 100%; } diff --git a/examples/src/App.js b/examples/src/App.js index 6244821..f46f683 100644 --- a/examples/src/App.js +++ b/examples/src/App.js @@ -93,6 +93,15 @@ const App = () => (

React Native Owl ProjectBadge

+
+ + + + + + +

Small Badges

+
); diff --git a/package.json b/package.json index 43730e1..55a3f60 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "formidable-oss-badges", - "version": "0.5.0", + "version": "0.5.1", "description": "Badges for Formidable OSS", "license": "MIT", "main": "dist/formidable-oss-badges.cjs.js", diff --git a/src/FeaturedBadge.js b/src/FeaturedBadge.js index 29383fb..2372178 100644 --- a/src/FeaturedBadge.js +++ b/src/FeaturedBadge.js @@ -4,29 +4,42 @@ import styled from "styled-components"; import featuredLogos from "./assets/featuredLogos"; import smallLogos from "./assets/smallLogos"; +const StyledLogo = styled(({ tagName, isHoverable, ...props }) => { + const Component = tagName || "svg"; + // Do not forward `isHoverable` to DOM + // This method can be replaced with `styled.svg.withConfig({ shouldForwardProp: ... })` + // with styled-components@v5.1 + return ; +})` + ${(props) => + props.isHoverable && + ` + .inner-ring, + .outer-ring { + transition: 0.3s; + } + &:hover .inner-ring { + opacity: 0.3; + } + &:hover .outer-ring { + opacity: 0.6; + } + `} +`; + const FeaturedBadge = ({ name, className, isHoverable, small }) => { const Logo = small ? smallLogos[name.toLowerCase()] : featuredLogos[name.toLowerCase()]; if (!Logo) return null; - const StyledLogo = styled(({ isHoverable, ...rest }) => )` - ${({ isHoverable }) => - isHoverable && - ` - .inner-ring, - .outer-ring { - transition: 0.3s; - } - - &:hover .inner-ring { - opacity: 0.3; - } - &:hover .outer-ring { - opacity: 0.6; - }`} - `; - return ; + return ( + + ); }; FeaturedBadge.propTypes = { diff --git a/src/assets/featuredLogos/nuka.svg b/src/assets/featuredLogos/nuka.svg index f9f313e..491b91e 100644 --- a/src/assets/featuredLogos/nuka.svg +++ b/src/assets/featuredLogos/nuka.svg @@ -1 +1 @@ -Nuka \ No newline at end of file +Nuka \ No newline at end of file diff --git a/src/assets/featuredLogos/owl.svg b/src/assets/featuredLogos/owl.svg index 26b9d81..44e1a70 100644 --- a/src/assets/featuredLogos/owl.svg +++ b/src/assets/featuredLogos/owl.svg @@ -1 +1 @@ -React Native Owl \ No newline at end of file +React Native Owl \ No newline at end of file diff --git a/src/assets/featuredLogos/renature.svg b/src/assets/featuredLogos/renature.svg index c95ec3d..b5e9a64 100644 --- a/src/assets/featuredLogos/renature.svg +++ b/src/assets/featuredLogos/renature.svg @@ -1 +1 @@ -Renature \ No newline at end of file +Renature \ No newline at end of file diff --git a/src/assets/featuredLogos/spectacle.svg b/src/assets/featuredLogos/spectacle.svg index baae2dc..0f77afb 100644 --- a/src/assets/featuredLogos/spectacle.svg +++ b/src/assets/featuredLogos/spectacle.svg @@ -1 +1 @@ -Spectacle \ No newline at end of file +Spectacle \ No newline at end of file diff --git a/src/assets/featuredLogos/urql.svg b/src/assets/featuredLogos/urql.svg index d525704..32b905e 100644 --- a/src/assets/featuredLogos/urql.svg +++ b/src/assets/featuredLogos/urql.svg @@ -1 +1 @@ -URQL \ No newline at end of file +URQL \ No newline at end of file diff --git a/src/assets/featuredLogos/victory.svg b/src/assets/featuredLogos/victory.svg index 14be870..66951d1 100644 --- a/src/assets/featuredLogos/victory.svg +++ b/src/assets/featuredLogos/victory.svg @@ -1 +1 @@ -Victory \ No newline at end of file +Victory \ No newline at end of file diff --git a/src/assets/smallLogos/nuka.svg b/src/assets/smallLogos/nuka.svg index 96c7b6c..bdd1c70 100644 --- a/src/assets/smallLogos/nuka.svg +++ b/src/assets/smallLogos/nuka.svg @@ -1 +1 @@ -Nuka \ No newline at end of file +Nuka \ No newline at end of file diff --git a/src/assets/smallLogos/owl.svg b/src/assets/smallLogos/owl.svg index 20547cf..c3d3cb9 100644 --- a/src/assets/smallLogos/owl.svg +++ b/src/assets/smallLogos/owl.svg @@ -1 +1 @@ -React Native Owl \ No newline at end of file +React Native Owl \ No newline at end of file diff --git a/src/assets/smallLogos/renature.svg b/src/assets/smallLogos/renature.svg index 101aa1d..fb27f9c 100644 --- a/src/assets/smallLogos/renature.svg +++ b/src/assets/smallLogos/renature.svg @@ -1 +1 @@ -Renature \ No newline at end of file +Renature \ No newline at end of file diff --git a/src/assets/smallLogos/spectacle.svg b/src/assets/smallLogos/spectacle.svg index 6ba1bdf..9610562 100644 --- a/src/assets/smallLogos/spectacle.svg +++ b/src/assets/smallLogos/spectacle.svg @@ -1 +1 @@ -Spectacle \ No newline at end of file +Spectacle \ No newline at end of file diff --git a/src/assets/smallLogos/urql.svg b/src/assets/smallLogos/urql.svg index 204486f..ff13591 100644 --- a/src/assets/smallLogos/urql.svg +++ b/src/assets/smallLogos/urql.svg @@ -1 +1 @@ -URQL \ No newline at end of file +URQL \ No newline at end of file diff --git a/src/assets/smallLogos/victory.svg b/src/assets/smallLogos/victory.svg index 8597d37..964e689 100644 --- a/src/assets/smallLogos/victory.svg +++ b/src/assets/smallLogos/victory.svg @@ -1 +1 @@ -Victory \ No newline at end of file +Victory \ No newline at end of file