From 44a8672b966f8ee36597a11b3de50d2c1ce9fc20 Mon Sep 17 00:00:00 2001 From: Sam McElligott Date: Sat, 25 Sep 2021 18:10:19 +0100 Subject: [PATCH 1/5] Made style fix, and amended snapshots to reflect this change --- __test__/__snapshots__/google-login.test.js.snap | 4 ++-- src/google-login.js | 6 ++++++ 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/__test__/__snapshots__/google-login.test.js.snap b/__test__/__snapshots__/google-login.test.js.snap index 838f82c6..1974c4f6 100644 --- a/__test__/__snapshots__/google-login.test.js.snap +++ b/__test__/__snapshots__/google-login.test.js.snap @@ -108,7 +108,7 @@ Object { "border": "1px solid transparent", "borderRadius": 2, "boxShadow": "0 2px 2px 0 rgba(0, 0, 0, .24), 0 0 1px 0 rgba(0, 0, 0, .24)", - "color": "rgba(0, 0, 0, .54)", + "color": "red", "display": "inline-flex", "fontFamily": "Roboto, sans-serif", "fontSize": 14, @@ -134,7 +134,7 @@ exports[`Google Login With custom class and custom style render the button 1`] = "border": "1px solid transparent", "borderRadius": 2, "boxShadow": "0 2px 2px 0 rgba(0, 0, 0, .24), 0 0 1px 0 rgba(0, 0, 0, .24)", - "color": "rgba(0, 0, 0, .54)", + "color": "red", "display": "inline-flex", "fontFamily": "Roboto, sans-serif", "fontSize": 14, diff --git a/src/google-login.js b/src/google-login.js index 09e17f04..d8402483 100755 --- a/src/google-login.js +++ b/src/google-login.js @@ -17,6 +17,7 @@ const GoogleLogin = props => { type, className, disabledStyle, + style, buttonText, children, render, @@ -81,6 +82,11 @@ const GoogleLogin = props => { fontWeight: '500', fontFamily: 'Roboto, sans-serif' } + if (style) { + Object.keys(style).forEach(key => { + initialStyle[key] = style[key] + }) + } const hoveredStyle = { cursor: 'pointer', From 115f0f6e3e765697ca62f4929da30c804c65b2bd Mon Sep 17 00:00:00 2001 From: Sam McElligott Date: Mon, 27 Sep 2021 19:13:22 +0100 Subject: [PATCH 2/5] Added ability to specify active, hover, disabled and icon inline styles The implementation of the new style merging is to use a function, named 'addKeysTo' which takes 2 objects, copies a reference to the target object, and assigns each style from the user defined style object too it. The reason that I am using a function for this operation is to follow the DRY principle, and to minimize the bundle size. --- index.d.ts | 3 +++ src/google-login.js | 33 ++++++++++++++++++--------- src/icon.js | 55 +++++++++++++++++++++++++++------------------ 3 files changed, 58 insertions(+), 33 deletions(-) diff --git a/index.d.ts b/index.d.ts index 289263f6..2fe48337 100644 --- a/index.d.ts +++ b/index.d.ts @@ -90,6 +90,9 @@ export interface GoogleLoginProps { readonly responseType?: string, readonly children?: ReactNode, readonly style?: CSSProperties, + readonly hoveredStyle?: CSSProperties, + readonly activeStyle?: CSSProperties, + readonly iconStyle?: CSSProperties, readonly icon?: boolean, readonly theme?: "light" | "dark", readonly tag?: string, diff --git a/src/google-login.js b/src/google-login.js index d8402483..a5b97278 100755 --- a/src/google-login.js +++ b/src/google-login.js @@ -4,6 +4,16 @@ import useGoogleLogin from './use-google-login' import ButtonContent from './button-content' import Icon from './icon' +export const addKeysTo = (targetObj, fromObj) => { + if (fromObj) { + // Copy object reference to prevent assigning to function parameter. + const referenceObjCopy = targetObj + Object.keys(fromObj).forEach(key => { + referenceObjCopy[key] = fromObj[key] + }) + } +} + const GoogleLogin = props => { const [hovered, setHovered] = useState(false) const [active, setActive] = useState(false) @@ -18,6 +28,9 @@ const GoogleLogin = props => { className, disabledStyle, style, + activeStyle, + hoveredStyle, + iconStyle, buttonText, children, render, @@ -82,23 +95,21 @@ const GoogleLogin = props => { fontWeight: '500', fontFamily: 'Roboto, sans-serif' } - if (style) { - Object.keys(style).forEach(key => { - initialStyle[key] = style[key] - }) - } + addKeysTo(initialStyle, style) - const hoveredStyle = { + const buttonHoveredStyle = { cursor: 'pointer', opacity: 0.9 } + addKeysTo(buttonHoveredStyle, hoveredStyle) - const activeStyle = { + const buttonActiveStyle = { cursor: 'pointer', backgroundColor: theme === 'dark' ? '#3367D6' : '#eee', color: theme === 'dark' ? '#fff' : 'rgba(0, 0, 0, .54)', opacity: 1 } + addKeysTo(buttonActiveStyle, activeStyle) const defaultStyle = (() => { if (disabled) { @@ -107,14 +118,14 @@ const GoogleLogin = props => { if (active) { if (theme === 'dark') { - return Object.assign({}, initialStyle, activeStyle) + return Object.assign({}, initialStyle, buttonActiveStyle) } - return Object.assign({}, initialStyle, activeStyle) + return Object.assign({}, initialStyle, buttonActiveStyle) } if (hovered) { - return Object.assign({}, initialStyle, hoveredStyle) + return Object.assign({}, initialStyle, buttonHoveredStyle) } return initialStyle @@ -136,7 +147,7 @@ const GoogleLogin = props => { className }, [ - icon && , + icon && , {children || buttonText} diff --git a/src/icon.js b/src/icon.js index 7de9a7c0..24ee6b31 100644 --- a/src/icon.js +++ b/src/icon.js @@ -1,24 +1,35 @@ import React from 'react' +import { addKeysTo } from './google-login' -export default ({ active }) => ( -
- - - - - - - - - -
-) +export default ({ active, iconStyle }) => { + const initialIconStyle = { + marginRight: 10, + background: active ? '#eee' : '#fff', + padding: 10, + borderRadius: 2 + } + addKeysTo(initialIconStyle, iconStyle) + + return ( +
+ + + + + + + + + +
+ ) +} From 67f360bac36bd99fd772f4a5acb485209b4f10d7 Mon Sep 17 00:00:00 2001 From: Sam McElligott Date: Mon, 27 Sep 2021 20:38:09 +0100 Subject: [PATCH 3/5] Updated README with new styling options' documentation --- README.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index d5fafb83..2a5925ea 100644 --- a/README.md +++ b/README.md @@ -152,8 +152,11 @@ Use GoogleLogout button to logout the user from google. | onAutoLoadFinished | function | - | | | buttonText | string | Login with Google | | | className | string | - | | -| style | object | - | | -| disabledStyle| object | - | | +| style | object | - | CSS properties to be set on the button | +| hoveredStyle | object | - | Like `style`, but only set when the user hovers over the button | +| activeStyle | object | - | Like `style`, but only set when the button is being clicked | +| disabledStyle| object | - | Like `style`, but only set when the `disabled` prop is `true` | +| iconStyle | object | - | CSS properties to be set on the `div` which wraps the Google logo. Only set when the `icon` prop is `true` | | loginHint | string | - | | | prompt | string | - | Can be 'consent' to force google return refresh token. | | tag | string | button | sets element tag (div, a, span, etc | From a066af3c00940a60089f661bb6baa41f495a616f Mon Sep 17 00:00:00 2001 From: Sam McElligott Date: Mon, 27 Sep 2021 22:17:08 +0100 Subject: [PATCH 4/5] Moved addKeysTo function to separate file, and renamed to addKeys This is to keep in line with the general layout of the project, instead of defining the function in google-login.js --- src/google-login.js | 17 ++++------------- src/icon.js | 4 ++-- 2 files changed, 6 insertions(+), 15 deletions(-) diff --git a/src/google-login.js b/src/google-login.js index a5b97278..a10dec97 100755 --- a/src/google-login.js +++ b/src/google-login.js @@ -3,16 +3,7 @@ import PropTypes from 'prop-types' import useGoogleLogin from './use-google-login' import ButtonContent from './button-content' import Icon from './icon' - -export const addKeysTo = (targetObj, fromObj) => { - if (fromObj) { - // Copy object reference to prevent assigning to function parameter. - const referenceObjCopy = targetObj - Object.keys(fromObj).forEach(key => { - referenceObjCopy[key] = fromObj[key] - }) - } -} +import addKeys from './add-keys' const GoogleLogin = props => { const [hovered, setHovered] = useState(false) @@ -95,13 +86,13 @@ const GoogleLogin = props => { fontWeight: '500', fontFamily: 'Roboto, sans-serif' } - addKeysTo(initialStyle, style) + addKeys(initialStyle, style) const buttonHoveredStyle = { cursor: 'pointer', opacity: 0.9 } - addKeysTo(buttonHoveredStyle, hoveredStyle) + addKeys(buttonHoveredStyle, hoveredStyle) const buttonActiveStyle = { cursor: 'pointer', @@ -109,7 +100,7 @@ const GoogleLogin = props => { color: theme === 'dark' ? '#fff' : 'rgba(0, 0, 0, .54)', opacity: 1 } - addKeysTo(buttonActiveStyle, activeStyle) + addKeys(buttonActiveStyle, activeStyle) const defaultStyle = (() => { if (disabled) { diff --git a/src/icon.js b/src/icon.js index 24ee6b31..31ebe6a7 100644 --- a/src/icon.js +++ b/src/icon.js @@ -1,5 +1,5 @@ import React from 'react' -import { addKeysTo } from './google-login' +import addKeys from './add-keys' export default ({ active, iconStyle }) => { const initialIconStyle = { @@ -8,7 +8,7 @@ export default ({ active, iconStyle }) => { padding: 10, borderRadius: 2 } - addKeysTo(initialIconStyle, iconStyle) + addKeys(initialIconStyle, iconStyle) return (
From 6cff5ec68a2f899a437bce827a3f4713d6021ef0 Mon Sep 17 00:00:00 2001 From: Sam McElligott Date: Mon, 27 Sep 2021 22:21:41 +0100 Subject: [PATCH 5/5] Add new file to src folder --- src/add-keys.js | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 src/add-keys.js diff --git a/src/add-keys.js b/src/add-keys.js new file mode 100644 index 00000000..a4c050a0 --- /dev/null +++ b/src/add-keys.js @@ -0,0 +1,9 @@ +export default (targetObj, fromObj) => { + if (fromObj) { + // Copy object reference to prevent assigning to function parameter. + const referenceObjCopy = targetObj + Object.keys(fromObj).forEach(key => { + referenceObjCopy[key] = fromObj[key] + }) + } +}