Merge pull request #67 from FormidableLabs/feature/badges-logos-only

Add RN Owl and new size for featured badges

README.md

@@ -69,6 +69,15 @@ See [featuredLogos](https://github.com/FormidableLabs/formidable-oss-badges/tree
 - `urql`
 - `victory`
 - `nuka`
+- `owl`
+
+### Additional props
+
+| Prop        | Type    | Description              | Default |
+| ----------- | ------- | ------------------------ | ------- |
+| className   | String  | Additional class names   | `''`    |
+| isHoverable | Boolean | Add hover style effects  | `false` |
+| small       | Boolean | Small badge w/ icon only | `false` |
 
 ## IconBadge
 
@@ -126,7 +135,6 @@ ProjectBadge with svg child:
 
 ### IconBadge Usage
 
-
 **Example 4**:
 
 ```jsx
@@ -173,7 +181,6 @@ You can then edit `examples/src/App.js`, either by returning the components dire
 
 Note that this array is currently just used for passing _props_ into `<ProjectBadge />` and not for passing children or for rendering `<IconBadge />`.
 
-
 ## 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.

examples/src/App.js

@@ -58,11 +58,7 @@ const App = () => (
       <p>Example of IconBadge using a png</p>
     </div>
     <div className="badge-container">
-      <ProjectBadge
-        abbreviation="R"
-        description="React"
-        color="#FFFFFF"
-      >
+      <ProjectBadge abbreviation="R" description="React" color="#FFFFFF">
         <image
           width="70%"
           height="70%"
@@ -93,6 +89,10 @@ const App = () => (
       <FeaturedBadge isHoverable name="nuka"></FeaturedBadge>
       <p>Nuka ProjectBadge</p>
     </div>
+    <div className="badge-container">
+      <FeaturedBadge isHoverable name="owl"></FeaturedBadge>
+      <p>React Native Owl ProjectBadge</p>
+    </div>
   </div>
 );
 

src/FeaturedBadge.js

@@ -2,9 +2,12 @@ import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
 import featuredLogos from "./assets/featuredLogos";
+import smallLogos from "./assets/smallLogos";
 
-const FeaturedBadge = ({ name, className, isHoverable }) => {
-  const Logo = featuredLogos[name.toLowerCase()];
+const FeaturedBadge = ({ name, className, isHoverable, small }) => {
+  const Logo = small
+    ? smallLogos[name.toLowerCase()]
+    : featuredLogos[name.toLowerCase()];
   if (!Logo) return null;
   const StyledLogo = styled(({ isHoverable, ...rest }) => <Logo {...rest} />)`
     ${({ isHoverable }) =>
@@ -38,11 +41,13 @@ FeaturedBadge.propTypes = {
   },
   className: PropTypes.string,
   isHoverable: PropTypes.bool,
+  small: PropTypes.bool,
 };
 
 FeaturedBadge.defaultProps = {
   className: "",
   isHoverable: false,
+  small: false,
 };
 
 export default FeaturedBadge;

src/assets/featuredLogos/index.js

@@ -3,11 +3,13 @@ import victory from "./victory.svg";
 import spectacle from "./spectacle.svg";
 import urql from "./urql.svg";
 import nuka from "./nuka.svg";
+import owl from "./owl.svg";
 
 export default {
   renature,
   victory,
   spectacle,
   urql,
-  nuka
+  nuka,
+  owl,
 };