From 0d4f71ab6b3c773c0afc8d820f05d1468e63a640 Mon Sep 17 00:00:00 2001 From: Lionel T Date: Mon, 23 Oct 2017 22:02:32 +0200 Subject: [PATCH 1/6] Unify keyframes with same value --- src/lib/get-github-corner-styles.js | 18 +++--------------- 1 file changed, 3 insertions(+), 15 deletions(-) diff --git a/src/lib/get-github-corner-styles.js b/src/lib/get-github-corner-styles.js index e2dbbf3..5692bde 100644 --- 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) { From 22c20b9a49880b14360fe17116b21c2374e5b36b Mon Sep 17 00:00:00 2001 From: Lionel T Date: Mon, 23 Oct 2017 22:29:55 +0200 Subject: [PATCH 2/6] Unify size props Sice it's an SVG and its a square, needs always the same value for width and height. --- src/lib/GithubCorner.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/lib/GithubCorner.js b/src/lib/GithubCorner.js index 79a3f11..2a70030 100644 --- a/src/lib/GithubCorner.js +++ b/src/lib/GithubCorner.js @@ -17,8 +17,10 @@ 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, @@ -27,8 +29,7 @@ export default class GithubCorner extends Component { }; static defaultProps = { href: '/', - width: 80, - height: 80, + size: 80, direction: 'right', octoColor: '#fff', bannerColor: '#151513', @@ -51,8 +52,7 @@ export default class GithubCorner extends Component { render() { const { href, - width, - height, + size, direction, octoColor, bannerColor, @@ -98,8 +98,8 @@ export default class GithubCorner extends Component { aria-label={ariaLabel} > From 4689f3471bef18021e856f1286c7d1510f88ad38 Mon Sep 17 00:00:00 2001 From: Lionel T Date: Mon, 23 Oct 2017 22:39:50 +0200 Subject: [PATCH 3/6] Add style prop Allow to customize more the gh-corner like: ``` ``` to made the octocat trasnparent. Details in [this issue](https://github.com/tholman/github-corners/issues/15). --- src/lib/GithubCorner.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/lib/GithubCorner.js b/src/lib/GithubCorner.js index 2a70030..dc98e68 100644 --- a/src/lib/GithubCorner.js +++ b/src/lib/GithubCorner.js @@ -25,7 +25,8 @@ export default class GithubCorner extends Component { octoColor: PropTypes.string, bannerColor: PropTypes.string, ariaLabel: PropTypes.string, - className: PropTypes.string + className: PropTypes.string, + style: PropTypes.object }; static defaultProps = { href: '/', @@ -58,6 +59,7 @@ export default class GithubCorner extends Component { bannerColor, ariaLabel, className, + style, ...otherProps } = this.props; const mainStyle = { @@ -101,7 +103,10 @@ export default class GithubCorner extends Component { width={size} height={size} viewBox="0 0 250 250" - style={mainStyle} + style={{ + ...mainStyle, + ...style, + }} > From 2248575f1dfaa1cd1ce4d62c5835af84eb4eb661 Mon Sep 17 00:00:00 2001 From: Lionel T Date: Tue, 24 Oct 2017 11:35:29 +0200 Subject: [PATCH 4/6] Change `width` and `height` into `size` in the examples --- src/app/pages/Home.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/app/pages/Home.js b/src/app/pages/Home.js index 5c5f427..d3e04c8 100644 --- a/src/app/pages/Home.js +++ b/src/app/pages/Home.js @@ -69,8 +69,7 @@ class Home extends Component { href="" bannerColor={bannerColor} octoColor={octoColor} - width={80} - height={80} + size={80} direction={direction} /> @@ -80,8 +79,7 @@ class Home extends Component { href={customHref} bannerColor="${bannerColor}" octoColor="${octoColor}" - width={80} - height={80} + size={80} direction="${direction}" />`} From e7ff9c5451b7778371dbb953bb4b5aca35c7072c Mon Sep 17 00:00:00 2001 From: Lionel T Date: Tue, 24 Oct 2017 11:35:51 +0200 Subject: [PATCH 5/6] Update props table with new size one --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index ca44b4c..131acc6 100644 --- 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 `` tag that is rendered. For instance, you can do: From 1154bca5c8a97b2983f15ac3524f203b0722e698 Mon Sep 17 00:00:00 2001 From: Lionel T Date: Tue, 24 Oct 2017 11:46:05 +0200 Subject: [PATCH 6/6] Add example with custom `style` prop --- src/app/pages/Home.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/app/pages/Home.js b/src/app/pages/Home.js index d3e04c8..7e60937 100644 --- a/src/app/pages/Home.js +++ b/src/app/pages/Home.js @@ -41,9 +41,10 @@ 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 ( @@ -81,6 +83,7 @@ class Home extends Component { octoColor="${octoColor}" size={80} direction="${direction}" + ${customStyle ? `style={${JSON.stringify(customStyle)}}` : ''} />`}