@widergy/react-social-auth 2.1.0 → 2.1.2

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## [2.1.2](https://github.com/widergy/react-social-auth/compare/v2.1.1...v2.1.2) (2023-06-06)
+
+
+### Bug Fixes
+
+* corrections ([f62a556](https://github.com/widergy/react-social-auth/commit/f62a5565e16b81c844f33d37ef78c39abcd0e09c))
+
+## [2.1.1](https://github.com/widergy/react-social-auth/compare/v2.1.0...v2.1.1) (2023-06-02)
+
+
+### Bug Fixes
+
+* corrections ([7cdfd9f](https://github.com/widergy/react-social-auth/commit/7cdfd9f65d13f84bc7b2f79bfcb1fc8ae1071216))
+* label variant ([f0c7dd1](https://github.com/widergy/react-social-auth/commit/f0c7dd1e299fbd7f56a165ca4323ac69132ed97f))
+* large button with email ([cb5b30f](https://github.com/widergy/react-social-auth/commit/cb5b30fc80b834cb94293300f14ca3bdc6d6b3bb))
+
 # [2.1.0](https://github.com/widergy/react-social-auth/compare/v2.0.3...v2.1.0) (2023-03-14)
 
 

package/dist/components/Apple/index.js

@@ -28,6 +28,7 @@ var Apple = function Apple(_ref) {
   var _ref$classNames = _ref.classNames,
     classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
     config = _ref.config,
+    email = _ref.email,
     label = _ref.label,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? _buttonSizes.SMALL : _ref$size,
@@ -77,9 +78,10 @@ var Apple = function Apple(_ref) {
     tooltipContent: tooltipContent,
     triggerOnMount: triggerOnMount
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    label: label,
-    onClick: handleLogin,
-    size: size,
+    classNames: {
+      container: "".concat(_stylesModule.default.buttonContainer, " ").concat(classNames.buttonContainer)
+    },
+    email: email,
     Icon: function Icon(_ref4) {
       var className = _ref4.className;
       return /*#__PURE__*/_react.default.createElement("img", {
@@ -88,11 +90,12 @@ var Apple = function Apple(_ref) {
         src: _appleIcon.default
       });
     },
-    classNames: _objectSpread({
-      container: "".concat(_stylesModule.default.buttonContainer, " ").concat(classNames.buttonContainer)
-    }, size === _buttonSizes.LARGE ? {
-      text: _stylesModule.default.buttonText
-    } : {})
+    label: label,
+    mainLabelProps: _objectSpread({}, size === _buttonSizes.LARGE ? {
+      colorTheme: 'light'
+    } : {}),
+    onClick: handleLogin,
+    size: size
   }));
 };
 Apple.propTypes = {
@@ -104,6 +107,7 @@ Apple.propTypes = {
     scope: _propTypes.string,
     successCallback: _propTypes.func
   }),
+  email: _propTypes.string,
   label: _propTypes.string,
   size: _propTypes.string,
   tooltipContent: _propTypes.string,

package/dist/components/Apple/styles.module.scss

@@ -1,9 +1,5 @@
 @import '../../scss/variables/colors';
 
-.buttonText {
-  color: $white;
-}
-
 .buttonContainer {
   background: $black !important;
 

package/dist/components/Button/index.js

@@ -10,11 +10,14 @@ var _propTypes = require("prop-types");
 var _buttonSizes = require("../../constants/buttonSizes");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 var Button = function Button(_ref) {
   var _ref$classNames = _ref.classNames,
     classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
+    email = _ref.email,
     _Icon = _ref.Icon,
     label = _ref.label,
+    mainLabelProps = _ref.mainLabelProps,
     onClick = _ref.onClick,
     size = _ref.size;
   return size === _buttonSizes.LARGE ? /*#__PURE__*/_react.default.createElement(_energyUi.UTButton, {
@@ -22,10 +25,12 @@ var Button = function Button(_ref) {
     classNames: {
       root: "".concat(_stylesModule.default.largeContainer, " ").concat(classNames.container),
       childrenContainer: _stylesModule.default.fullWidth,
-      text: "".concat(_stylesModule.default.largeText, " ").concat(classNames.text)
+      text: "".concat(_stylesModule.default.largeText, "  ").concat(email && _stylesModule.default.labelsContainer)
     },
     Icon: _Icon
-  }, label) : /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, mainLabelProps, label), email && /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+    variant: "small"
+  }, email)) : /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(label ? _stylesModule.default.buttonWithLabel : '')
   }, /*#__PURE__*/_react.default.createElement(_energyUi.UTButton, {
     classNames: {
@@ -38,14 +43,16 @@ var Button = function Button(_ref) {
         className: className
       });
     }
-  }), label && /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+  }), label && /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, _extends({
     className: classNames.text
-  }, label));
+  }, mainLabelProps), label));
 };
 Button.propTypes = {
   classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  email: _propTypes.string,
   Icon: _propTypes.element,
   label: _propTypes.string,
+  mainLabelProps: _propTypes.object,
   onClick: _propTypes.func,
   size: _propTypes.string
 };

package/dist/components/Button/styles.module.scss

@@ -44,3 +44,8 @@
   padding: 8px !important;
   width: 48px !important;
 }
+
+.labelsContainer {
+  text-align: left;
+  padding: 10px 0;
+}

package/dist/components/ButtonContainer/index.js

@@ -8,9 +8,6 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = require("prop-types");
 var _energyUi = require("@widergy/energy-ui");
-var _buttonSizes = require("../../constants/buttonSizes");
-var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -22,7 +19,6 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var ButtonContainer = function ButtonContainer(_ref) {
   var children = _ref.children,
     className = _ref.className,
-    size = _ref.size,
     tooltipContent = _ref.tooltipContent,
     triggerOnMount = _ref.triggerOnMount;
   var ref = (0, _react.useRef)();
@@ -49,13 +45,12 @@ var ButtonContainer = function ButtonContainer(_ref) {
     }
   }, /*#__PURE__*/_react.default.createElement("span", {
     ref: ref,
-    className: "".concat(className !== null && className !== void 0 ? className : '', " ").concat(size === _buttonSizes.LARGE ? _stylesModule.default.large : '')
+    className: "".concat(className !== null && className !== void 0 ? className : '')
   }, children));
 };
 ButtonContainer.propTypes = {
   children: _propTypes.object,
   className: _propTypes.string,
-  size: _propTypes.string,
   tooltipContent: _propTypes.string,
   triggerOnMount: _propTypes.bool
 };

package/dist/components/Facebook/index.js

@@ -23,6 +23,7 @@ var Facebook = function Facebook(_ref) {
   var _ref$classNames = _ref.classNames,
     classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
     config = _ref.config,
+    email = _ref.email,
     label = _ref.label,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? _buttonSizes.SMALL : _ref$size,
@@ -45,9 +46,10 @@ var Facebook = function Facebook(_ref) {
     fields: fields,
     render: function render(renderProps) {
       return /*#__PURE__*/_react.default.createElement(_Button.default, {
-        label: label,
-        onClick: renderProps.onClick,
-        size: size,
+        classNames: {
+          container: "".concat(_stylesModule.default.buttonContainer, " ").concat(classNames.buttonContainer)
+        },
+        email: email,
         Icon: function Icon(_ref3) {
           var className = _ref3.className;
           return /*#__PURE__*/_react.default.createElement("img", {
@@ -56,11 +58,12 @@ var Facebook = function Facebook(_ref) {
             src: _facebookIcon.default
           });
         },
-        classNames: _objectSpread({
-          container: "".concat(_stylesModule.default.buttonContainer, " ").concat(classNames.buttonContainer)
-        }, size === _buttonSizes.LARGE ? {
-          text: _stylesModule.default.buttonText
-        } : {})
+        label: label,
+        mainLabelProps: _objectSpread({}, size === _buttonSizes.LARGE ? {
+          colorTheme: 'light'
+        } : {}),
+        onClick: renderProps.onClick,
+        size: size
       });
     }
   }));
@@ -72,6 +75,7 @@ Facebook.propTypes = {
     callback: _propTypes.func,
     fields: _propTypes.string
   }),
+  email: _propTypes.string,
   label: _propTypes.string,
   size: _propTypes.string,
   tooltipContent: _propTypes.string,

package/dist/components/Facebook/styles.module.scss

@@ -1,9 +1,5 @@
 @import '../../scss/variables/colors';
 
-.buttonText {
-  color: $white;
-}
-
 .buttonContainer {
   background: $facebook-bg !important;
 

package/dist/components/Google/components/GoogleButton/index.js

@@ -24,15 +24,17 @@ var GoogleButton = function GoogleButton(_ref) {
     failureCallback = _ref.failureCallback,
     label = _ref.label,
     size = _ref.size,
-    successCallback = _ref.successCallback;
+    successCallback = _ref.successCallback,
+    email = _ref.email;
   var login = (0, _google.useGoogleLogin)({
     onError: failureCallback,
     onSuccess: successCallback
   });
   return /*#__PURE__*/_react.default.createElement(_Button.default, {
-    label: label,
-    onClick: login,
-    size: size,
+    classNames: {
+      container: "".concat(_stylesModule.default.buttonContainer, " ").concat(classNames.buttonContainer)
+    },
+    email: email,
     Icon: function Icon(_ref2) {
       var className = _ref2.className;
       return /*#__PURE__*/_react.default.createElement("img", {
@@ -41,15 +43,18 @@ var GoogleButton = function GoogleButton(_ref) {
         src: _googleIcon.default
       });
     },
-    classNames: _objectSpread({
-      container: "".concat(_stylesModule.default.buttonContainer, " ").concat(classNames.buttonContainer)
-    }, size === _buttonSizes.LARGE ? {
-      text: _stylesModule.default.buttonText
-    } : {})
+    label: label,
+    mainLabelProps: _objectSpread({}, size === _buttonSizes.LARGE ? {
+      colorTheme: 'dark',
+      shade: '01'
+    } : {}),
+    onClick: login,
+    size: size
   });
 };
 GoogleButton.propTypes = {
   classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  email: _propTypes.string,
   failureCallback: _propTypes.func,
   label: _propTypes.string,
   size: _propTypes.string,

package/dist/components/Google/components/GoogleButton/styles.module.scss

@@ -1,9 +1,5 @@
 @import '../../../../scss/variables/colors';
 
-.buttonText {
-  color: $dark01 !important;
-}
-
 .buttonContainer {
   background: $white !important;
 

package/dist/components/Google/index.js

@@ -15,6 +15,7 @@ var Google = function Google(_ref) {
   var _ref$classNames = _ref.classNames,
     classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
     config = _ref.config,
+    email = _ref.email,
     label = _ref.label,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? _buttonSizes.SMALL : _ref$size,
@@ -33,6 +34,7 @@ var Google = function Google(_ref) {
     triggerOnMount: triggerOnMount
   }, /*#__PURE__*/_react.default.createElement(_GoogleButton.default, {
     classNames: classNames,
+    email: email,
     failureCallback: failureCallback,
     label: label,
     size: size,
@@ -46,6 +48,7 @@ Google.propTypes = {
     failureCallback: _propTypes.func,
     successCallback: _propTypes.func
   }),
+  email: _propTypes.string,
   label: _propTypes.string,
   size: _propTypes.string,
   tooltipContent: _propTypes.string,

package/dist/components/Microsoft/index.js

@@ -20,6 +20,7 @@ var Microsoft = function Microsoft(_ref) {
   var _ref$classNames = _ref.classNames,
     classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
     config = _ref.config,
+    email = _ref.email,
     label = _ref.label,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? _buttonSizes.SMALL : _ref$size,
@@ -43,7 +44,10 @@ var Microsoft = function Microsoft(_ref) {
     btnContent: size === _buttonSizes.LARGE ? /*#__PURE__*/_react.default.createElement(_react.Fragment, null, Image, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
       className: "".concat(_stylesModule.default.label, " ").concat(classNames.label),
       colorTheme: "light"
-    }, label)) : /*#__PURE__*/_react.default.createElement("div", {
+    }, label), email && /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
+      className: "".concat(_stylesModule.default.label, " ").concat(classNames.label),
+      colorTheme: "light"
+    }, email)) : /*#__PURE__*/_react.default.createElement("div", {
       className: _stylesModule.default.smallButtonWrapper
     }, Image),
     clientId: clientId,
@@ -59,6 +63,7 @@ Microsoft.propTypes = {
     loginHandler: _propTypes.func,
     redirectUrl: _propTypes.string
   }),
+  email: _propTypes.string,
   label: _propTypes.string,
   size: _propTypes.string,
   tooltipContent: _propTypes.string,

package/dist/components/Twitter/index.js

@@ -29,6 +29,7 @@ var Twitter = function Twitter(_ref) {
   var _ref$classNames = _ref.classNames,
     classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
     config = _ref.config,
+    email = _ref.email,
     label = _ref.label,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? _buttonSizes.SMALL : _ref$size,
@@ -97,9 +98,10 @@ var Twitter = function Twitter(_ref) {
     tooltipContent: tooltipContent,
     triggerOnMount: triggerOnMount
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    label: label,
-    onClick: handleClick,
-    size: size,
+    classNames: {
+      container: "".concat(_stylesModule.default.buttonContainer, " ").concat(classNames.buttonContainer)
+    },
+    email: email,
     Icon: function Icon(_ref4) {
       var className = _ref4.className;
       return /*#__PURE__*/_react.default.createElement("img", {
@@ -108,11 +110,12 @@ var Twitter = function Twitter(_ref) {
         src: _twitterIcon.default
       });
     },
-    classNames: _objectSpread({
-      container: "".concat(_stylesModule.default.buttonContainer, " ").concat(classNames.buttonContainer)
-    }, size === _buttonSizes.LARGE ? {
-      text: _stylesModule.default.buttonText
-    } : {})
+    label: label,
+    mainLabelProps: _objectSpread({}, size === _buttonSizes.LARGE ? {
+      colorTheme: 'light'
+    } : {}),
+    onClick: handleClick,
+    size: size
   }));
 };
 Twitter.propTypes = {
@@ -126,6 +129,7 @@ Twitter.propTypes = {
     requestTokenUrl: _propTypes.string,
     screenName: _propTypes.string
   }),
+  email: _propTypes.string,
   label: _propTypes.string,
   size: _propTypes.string,
   tooltipContent: _propTypes.string,

package/dist/components/Twitter/styles.module.scss

@@ -1,9 +1,5 @@
 @import '../../scss/variables/colors';
 
-.buttonText {
-  color: $white;
-}
-
 .buttonContainer {
   background: $twitter-bg !important;
 

package/dist/scss/variables/_colors.scss

@@ -1,5 +1,4 @@
 $black: #000;
-$dark01: #42536c;
 $facebook-bg: #4267b2;
 $large-button-shadow: rgba(9, 30, 66, 0.1);
 $small-button-shadow: rgba(24, 44, 73, 0.1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/react-social-auth",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "description": "Social Network Authorization (Twitter, Facebook, etc.)",
   "license": "MIT",
   "main": "dist/index.js",

package/dist/components/ButtonContainer/styles.module.scss

@@ -1,3 +0,0 @@
-.large {
-  width: 100%;
-}