Merge pull request #46 from elrumordelaluz/master

Little details
skratchdot · Oct 24, 2017 · 44d574a · 44d574a
2 parents b9a518c + 1154bca
commit 44d574a
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 34 deletions.
diff --git a/README.md b/README.md
@@ -46,13 +46,13 @@ Here are the props you can pass to the `GithubCorner` instance:
 | Property Name | Type | Default Value | Description |
 |:-------------:|:----:|:-------------:|-------------|
 | href | String | '/' | The link to your project page |
-| width | Number or String | 80 | The width of the banner |
-| height | Number or String | 80 | The height of the banner |
+| size | Number or String | 80 | The width and height of the banner |
 | direction | String | 'right' | Whether the banner shows up on the right or left |
 | octoColor | String | '#fff' | The CSS color of the Octocat |
 | bannerColor | String | '#151513' | The CSS color of the banner |
 | ariaLabel | String | 'Open GitHub project' | The aria-label for a11y support |
 | className | String | undefined | Additional class names to be merged with the `github-corner` default |
+| style | Object | undefined | Custom styles to apply to the main `svg` element |
 
 Any additional props will be added to the `<a />` tag that is rendered.
 For instance, you can do:

diff --git a/src/app/pages/Home.js b/src/app/pages/Home.js
@@ -41,17 +41,18 @@ class Home extends Component {
           ['#000', '#fff', '#000', 'left'],
           ['#000', '#64CEAA', '#fff', 'left'],
           ['#000', '#FD6C6C', '#fff', 'left'],
-          ['#000', '#70B7FD', '#fff', 'left']
+          ['#000', '#70B7FD', '#fff', 'left'],
+          ['linear-gradient(to right, orange, blue, violet)', '#000', '#fff', 'left', { mixBlendMode: 'darken'}]
         ].map((obj, i) => {
-          const [backgroundColor, bannerColor, octoColor, direction] = obj;
+          const [backgroundColor, bannerColor, octoColor, direction, customStyle] = obj;
           const height = 200;
           return (
             <Row
               key={i}
               style={{
                 margin: 20,
                 padding: 20,
-                backgroundColor: '#f8f8f8',
+                background: '#f8f8f8',
                 border: '2px solid #aaa',
                 borderRadius: 20
               }}
@@ -69,9 +70,9 @@ class Home extends Component {
                   href=""
                   bannerColor={bannerColor}
                   octoColor={octoColor}
-                  width={80}
-                  height={80}
+                  size={80}
                   direction={direction}
+                  style={customStyle}
                 />
               </Col>
               <Col md={3}>
@@ -80,9 +81,9 @@ class Home extends Component {
   href={customHref}
   bannerColor="${bannerColor}"
   octoColor="${octoColor}"
-  width={80}
-  height={80}
+  size={80}
   direction="${direction}"
+  ${customStyle ? `style={${JSON.stringify(customStyle)}}` : ''}
 />`}
                 </pre>
               </Col>

diff --git a/src/lib/GithubCorner.js b/src/lib/GithubCorner.js
@@ -17,18 +17,20 @@ const githubCornerStyles = getGithubCornerStyles();
 export default class GithubCorner extends Component {
   static propTypes = {
     href: PropTypes.string,
-    width: PropTypes.number,
-    height: PropTypes.number,
+    size: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.string
+    ]),
     direction: PropTypes.string,
     octoColor: PropTypes.string,
     bannerColor: PropTypes.string,
     ariaLabel: PropTypes.string,
-    className: PropTypes.string
+    className: PropTypes.string,
+    style: PropTypes.object
   };
   static defaultProps = {
     href: '/',
-    width: 80,
-    height: 80,
+    size: 80,
     direction: 'right',
     octoColor: '#fff',
     bannerColor: '#151513',
@@ -51,13 +53,13 @@ export default class GithubCorner extends Component {
   render() {
     const {
       href,
-      width,
-      height,
+      size,
       direction,
       octoColor,
       bannerColor,
       ariaLabel,
       className,
+      style,
       ...otherProps
     } = this.props;
     const mainStyle = {
@@ -98,10 +100,13 @@ export default class GithubCorner extends Component {
         aria-label={ariaLabel}
       >
         <svg
-          width={width}
-          height={height}
+          width={size}
+          height={size}
           viewBox="0 0 250 250"
-          style={mainStyle}
+          style={{
+            ...mainStyle,
+            ...style,
+          }}
         >
           <path className="octo-banner" d={pathBanner} fill={bannerColor} />
           <path className="octo-arm" d={pathArm} style={armStyle} />

diff --git a/src/lib/get-github-corner-styles.js b/src/lib/get-github-corner-styles.js
@@ -5,29 +5,17 @@ export default () => {
 }
 
 @keyframes octocat-wave {
-  0% {
+  0%, 100% {
     transform: rotate(0deg);
   }
 
-  20% {
+  20%, 60% {
     transform: rotate(-25deg);
   }
 
-  40% {
+  40%, 80% {
     transform: rotate(10deg);
   }
-
-  60% {
-   transform: rotate(-25deg);
-  }
-
-  80% {
-    transform: rotate(10deg);
-  }
-
-  100% {
-    transform: rotate(0deg);
-  }
 }
 
 @media (max-width: 500px) {