add sponsor button

Author: vaibhavhrt

CHANGELOG.md

@@ -4,6 +4,11 @@ All notable changes to the "react-github-buttons" project will be documented in
 
 ## [Unreleased]
 
+## [0.4.0] 2019-6-15
+### Added
+
+- Sponsor button
+
 ## [0.3.0] 2019-6-15
 ### Added
 

README.md

@@ -35,10 +35,10 @@ function App() {
 
 ## Release Notes
 
-### 0.3.0
-#### Added
+## 0.4.0
+### Added
 
-- Used by button
+- Sponsor button
 
 ## Issues
 

example/package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "react-github-buttons-example",
   "homepage": "https://vaibhavhrt.github.io/react-github-buttons",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "license": "MIT",
   "private": true,
   "dependencies": {

example/package.json

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 
-import { Fork, Star, Watch, UsedBy } from 'react-github-buttons';
+import { Fork, Sponsor, Star, Watch, UsedBy } from 'react-github-buttons';
 
 export default class App extends Component {
   render () {
@@ -10,6 +10,7 @@ export default class App extends Component {
         <Fork owner='vaibhavhrt' repo='react-github-buttons' />
         <Watch owner='vaibhavhrt' repo='react-github-buttons' />
         <UsedBy owner='vaibhavhrt' repo='react-github-buttons' count={0} />
+        <Sponsor owner='vaibhavhrt' repo='react-github-buttons' />
       </div>
     )
   }

example/src/App.js

@@ -1,6 +1,6 @@
 {
   "name": "react-github-buttons",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "React Components for dynamic buttons for github repo's star, fork etc.",
   "keywords": ["react", "github", "component", "utility"],
   "author": {

package.json

@@ -2,5 +2,6 @@ import Star from "./star";
 import Fork from "./fork";
 import Watch from "./watch";
 import UsedBy from './usedBy';
+import Sponsor from './sponsor';
 
-export { Fork, Star, UsedBy, Watch };
+export { Fork, Sponsor, Star, UsedBy, Watch };

src/index.ts

@@ -10,6 +10,7 @@ import ForkIcon from "./icons/forkIcon";
 import StarIcon from "./icons/starIcon";
 import WatchIcon from "./icons/watchIcon";
 import UsedByIcon from './icons/usedByIcon';
+import SponsorIcon from './icons/sponsorIcon';
 
 function getDataForVariant(
   variant: string,
@@ -51,43 +52,58 @@ function getDataForVariant(
     label = `${count} repositories depend on this package`;
     countUrl = `https://github.com/${owner}/${repo}/network/dependents`;
     return { title, btnTitle, label, countUrl, Icon: UsedByIcon };
+  } else if (variant === "sponsor") {
+    title = "Sponsor";
+    btnTitle = `Sponsor ${owner}/${repo}`;
+    label = "";
+    countUrl = "";
+    return { title, btnTitle, label, countUrl, Icon: SponsorIcon };
   }
-  throw new Error("Invalid Variant, supply one of [star, fork, watch, usedby]");
+  throw new Error("Invalid Variant, supply one of [star, fork, watch, usedby, sponsor]");
 }
 
 export interface IPropTypes {
   owner: string;
   repo: string;
   variant: string;
   count: number;
+  showCount: boolean;
 }
 
 export default function GithubButton(props: IPropTypes) {
-  const { owner, repo, variant, count } = props;
+  const { owner, repo, variant, count, showCount } = props;
   const { title, btnTitle, label, countUrl, Icon } = getDataForVariant(variant, count, owner, repo);
 
+  const inlineStyle = showCount ? {} : { borderRadius: ".25em" };
+
   return (
     <div className={classes.root}>
-      <button title={btnTitle} className={classes.button}>
+      <button title={btnTitle} className={classes.button} style={inlineStyle}>
         <Icon />
         {` ${title}`}
       </button>
-      <a
+      {showCount && <a
         className={classes.count}
         href={countUrl}
         aria-label={label}
         target="_blank"
         rel="noreferrer noopener"
       >
         {count}
-      </a>
+      </a>}
   </div>
   );
 }
 
 GithubButton.propTypes = {
-  count: PropTypes.node.isRequired,
+  count: PropTypes.number,
   owner: PropTypes.string.isRequired,
   repo: PropTypes.string.isRequired,
-  variant: PropTypes.oneOf(["star", "fork", "watch", "usedby"]),
+  variant: PropTypes.oneOf(["star", "fork", "watch", "usedby", "sponsor"]),
+  showCount: PropTypes.bool,
+};
+
+GithubButton.defaultProps = {
+  count: 0,
+  showCount: true,
 };

src/lib/githubButton.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import classes from "../../styles.css";
+
+export default function SponsorIcon() {
+  return (
+    <svg
+      className={classes.svgicon}
+      viewBox="0 0 12 16"
+      version="1.1"
+      width="12"
+      height="16"
+      style={{ fill: "#ea4aaa" }}
+    >
+      <path
+        fillRule="evenodd"
+        // tslint:disable-next-line:max-line-length
+        d="M9 2c-.97 0-1.69.42-2.2 1-.51.58-.78.92-.8 1-.02-.08-.28-.42-.8-1-.52-.58-1.17-1-2.2-1-1.632.086-2.954 1.333-3 3 0 .52.09 1.52.67 2.67C1.25 8.82 3.01 10.61 6 13c2.98-2.39 4.77-4.17 5.34-5.33C11.91 6.51 12 5.5 12 5c-.047-1.69-1.342-2.913-3-3z" />
+    </svg>
+  );
+}

src/lib/icons/sponsorIcon.tsx

@@ -11,7 +11,7 @@ export default function UsedByIcon() {
       height="16"
     >
       <path
-        fill-rule="evenodd"
+        fillRule="evenodd"
         // tslint:disable-next-line:max-line-length
         d="M1 4.27v7.47c0 .45.3.84.75.97l6.5 1.73c.16.05.34.05.5 0l6.5-1.73c.45-.13.75-.52.75-.97V4.27c0-.45-.3-.84-.75-.97l-6.5-1.74a1.4 1.4 0 0 0-.5 0L1.75 3.3c-.45.13-.75.52-.75.97zm7 9.09l-6-1.59V5l6 1.61v6.75zM2 4l2.5-.67L11 5.06l-2.5.67L2 4zm13 7.77l-6 1.59V6.61l2-.55V8.5l2-.53V5.53L15 5v6.77zm-2-7.24L6.5 2.8l2-.53L15 4l-2 .53z"
       />

src/lib/icons/usedByIcon.tsx

@@ -0,0 +1,21 @@
+/**
+ * @function Sponsor
+ */
+import * as PropTypes from "prop-types";
+import * as React from "react";
+
+import GithubButton from "./lib/githubButton";
+
+export interface IPropTypes {
+  owner: string;
+  repo: string;
+}
+
+export default function Sponsor(props: IPropTypes) {
+  return <GithubButton variant="sponsor" showCount={false} { ...props } />;
+}
+
+Sponsor.propTypes = {
+  owner: PropTypes.string.isRequired,
+  repo: PropTypes.string.isRequired,
+};