@widergy/react-social-auth 3.2.4 → 3.2.6

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [3.2.6](https://github.com/widergy/react-social-auth/compare/v3.2.5...v3.2.6) (2026-04-16)
+
+
+### Bug Fixes
+
+* test org deploy ([477549c](https://github.com/widergy/react-social-auth/commit/477549c2369de2d2519d5ab078332a6307374916))
+
+## [3.2.5](https://github.com/widergy/react-social-auth/compare/v3.2.4...v3.2.5) (2026-03-12)
+
+
+### Bug Fixes
+
+* [CX-1938] login visual adjustments ([7d4f617](https://github.com/widergy/react-social-auth/commit/7d4f61787b518331f25f0668fc3d6939384c34ab))
+* fixes ([7322c3e](https://github.com/widergy/react-social-auth/commit/7322c3eb2aa45cfd1691c010a676c20b3bc99d9f))
+
 ## [3.2.4](https://github.com/widergy/react-social-auth/compare/v3.2.3...v3.2.4) (2026-03-11)
 
 

package/README.md

@@ -1,5 +1,5 @@
 
-# react-package-bootstrap ![Logo](https://funkyimg.com/i/2VY6U.png)
+# react-package-bootstrap ![Logo](https://funkyimg.com/i/2VY6U.png) 
 
 ![WidergyWeb](https://img.shields.io/badge/WIDERGY-WEB-00d564.svg)
 

package/dist/components/Apple/AppleIcon.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const AppleIcon = _ref => {
+  let {
+    className,
+    fill = '#FFFFFF'
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    className: className,
+    width: "21px",
+    height: "24px",
+    viewBox: "0 0 21 24",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    fill: fill,
+    fillRule: "nonzero"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M18.5424591,17.5224972 C18.2024218,18.3080534 17.7999282,19.0311534 17.3335909,19.6959621 C16.6979284,20.6022652 16.1774629,21.2296004 15.7763572,21.5779659 C15.1545744,22.1497841 14.4883782,22.4426326 13.774993,22.4592879 C13.2628549,22.4592879 12.6452354,22.3135568 11.9262989,22.0179337 C11.205003,21.7236951 10.5421377,21.5779659 9.93603788,21.5779659 C9.30037576,21.5779659 8.61863485,21.7236951 7.88942784,22.0179337 C7.15910966,22.3135568 6.57077557,22.4676155 6.12095417,22.4828826 C5.43685398,22.5120284 4.754975,22.2108523 4.07434413,21.5779659 C3.63992917,21.1990663 3.09656307,20.5495246 2.44563352,19.6293409 C1.74723818,18.646703 1.17306038,17.5072301 0.723239167,16.2081477 C0.241496117,14.804972 0,13.4462095 0,12.1307502 C0,10.6238979 0.32560339,9.32426023 0.97778161,8.23516818 C1.49033625,7.36036989 2.17221572,6.67030152 3.02564034,6.16371458 C3.87906572,5.65712841 4.80119223,5.39897746 5.7942411,5.38246098 C6.33760682,5.38246098 7.05015966,5.55053674 7.93564508,5.88085909 C8.81863258,6.21229167 9.38559337,6.38036742 9.63416742,6.38036742 C9.82000833,6.38036742 10.4498413,6.1838392 11.5175595,5.79203314 C12.5272634,5.4286786 13.379439,5.27822879 14.077557,5.33749242 C15.9692767,5.4901625 17.3904951,6.23588598 18.335661,7.57938144 C16.6438006,8.60449091 15.8068915,10.0402822 15.8235462,11.8821756 C15.8388133,13.3168564 16.3592788,14.5107352 17.3821674,15.4586775 C17.8457286,15.8986437 18.3634189,16.2386814 18.9393996,16.4801778 C18.8144896,16.8424218 18.6826383,17.1893991 18.5424591,17.5224972 Z M14.2038572,0.449834034 C14.2038572,1.57433081 13.7930356,2.62427027 12.9741701,3.59608333 C11.9859784,4.75137898 10.7907121,5.41896269 9.49454394,5.31362064 C9.47802803,5.17871572 9.46845133,5.03673295 9.46845133,4.88753295 C9.46845133,3.80801723 9.93839735,2.65272216 10.7729472,1.7081115 C11.1895966,1.22983858 11.7195002,0.832161117 12.3621021,0.514926269 C13.0033157,0.202424754 13.609832,0.0296046856 14.1802619,9.98757121e-06 C14.196918,0.15033764 14.2038572,0.300674754 14.2038572,0.449819451 L14.2038572,0.449834034 Z"
+  }))));
+};
+AppleIcon.propTypes = {
+  className: _propTypes.string,
+  fill: _propTypes.string
+};
+var _default = exports.default = AppleIcon;

package/dist/components/Apple/index.js

@@ -10,18 +10,20 @@ var _buttonSizes = require("../../constants/buttonSizes");
 var _Button = _interopRequireDefault(require("../Button"));
 var _ButtonContainer = _interopRequireDefault(require("../ButtonContainer"));
 var _utils = require("../utils");
-var _appleIcon = _interopRequireDefault(require("./assets/appleIcon.svg"));
+var _AppleIcon = _interopRequireDefault(require("./AppleIcon"));
 var _utils2 = require("./utils");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const Apple = _ref => {
   let {
+    appleLogoColor = 'white',
     classNames = {},
     config,
     dataTestId,
     email,
     label,
+    rectangleButtonEnabled,
     size = _buttonSizes.SMALL,
     tooltipContent,
     triggerOnMount
@@ -33,6 +35,7 @@ const Apple = _ref => {
     scope,
     successCallback
   } = config || {};
+  const iconColor = appleLogoColor === 'black' ? '#000000' : '#FFFFFF';
   (0, _react.useEffect)(() => {
     if ((0, _utils.isValidId)(clientId)) (0, _utils2.initAppleAuth)(clientId, redirectUrl, scope);
     // eslint-disable-next-line no-console
@@ -48,12 +51,13 @@ const Apple = _ref => {
   };
   return (0, _utils.isValidId)(clientId) ? /*#__PURE__*/_react.default.createElement(_ButtonContainer.default, {
     className: classNames.container,
+    fullWidth: rectangleButtonEnabled,
     size: size,
     tooltipContent: tooltipContent,
     triggerOnMount: triggerOnMount
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     classNames: {
-      container: `${_stylesModule.default.buttonContainer} ${classNames.buttonContainer}`
+      container: `${_stylesModule.default.buttonContainer} ${rectangleButtonEnabled ? _stylesModule.default.iconOnlyButton : ''} ${classNames.buttonContainer}`
     },
     dataTestId: dataTestId,
     email: email,
@@ -64,10 +68,9 @@ const Apple = _ref => {
       let {
         className
       } = _ref2;
-      return /*#__PURE__*/_react.default.createElement("img", {
-        alt: "Logo de Apple",
+      return /*#__PURE__*/_react.default.createElement(_AppleIcon.default, {
         className: className,
-        src: _appleIcon.default
+        fill: iconColor
       });
     },
     label: label,
@@ -77,10 +80,12 @@ const Apple = _ref => {
       } : {})
     },
     onClick: handleLogin,
+    rectangleButtonEnabled: rectangleButtonEnabled,
     size: size
   })) : null;
 };
 Apple.propTypes = {
+  appleLogoColor: _propTypes.string,
   classNames: (0, _propTypes.objectOf)(_propTypes.string),
   config: (0, _propTypes.shape)({
     clientId: _propTypes.string,
@@ -92,6 +97,7 @@ Apple.propTypes = {
   dataTestId: _propTypes.string,
   email: _propTypes.string,
   label: _propTypes.string,
+  rectangleButtonEnabled: _propTypes.bool,
   size: _propTypes.string,
   tooltipContent: _propTypes.string,
   triggerOnMount: _propTypes.bool

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

@@ -7,3 +7,11 @@
     background: scale-color($color: $black, $lightness: 20%) !important;
   }
 }
+
+.iconOnlyButton {
+  background: none !important;
+
+  &:hover {
+    background: $gray !important;
+  }
+}

package/dist/components/Button/index.js

@@ -21,9 +21,17 @@ const Button = _ref => {
     label,
     mainLabelProps,
     onClick,
+    rectangleButtonEnabled = false,
     size
   } = _ref;
-  return size === _buttonSizes.LARGE ? /*#__PURE__*/_react.default.createElement(_energyUi.UTButton, {
+  return rectangleButtonEnabled ? /*#__PURE__*/_react.default.createElement(_energyUi.UTButton, {
+    classNames: {
+      root: `${_stylesModule.default.rectangleContainer} ${classNames.container}`
+    },
+    dataTestId: dataTestId,
+    Icon: Icon,
+    onClick: onClick
+  }) : size === _buttonSizes.LARGE ? /*#__PURE__*/_react.default.createElement(_energyUi.UTButton, {
     onClick: onClick,
     classNames: {
       root: `${_stylesModule.default.largeContainer} ${classNames.container}`,
@@ -63,6 +71,7 @@ Button.propTypes = {
   label: _propTypes.string,
   mainLabelProps: _propTypes.object,
   onClick: _propTypes.func,
+  rectangleButtonEnabled: _propTypes.bool,
   size: _propTypes.string
 };
 var _default = exports.default = Button;

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

@@ -18,6 +18,32 @@
   width: 100%;
 }
 
+.iconOnlyContainer {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 0.2s ease;
+
+  &:hover {
+    opacity: 0.8;
+  }
+
+  &:active {
+    opacity: 0.6;
+  }
+}
+
+.iconOnly {
+  display: block;
+  height: 48px;
+  width: 48px;
+  object-fit: contain;
+}
+
 .largeContainer {
   box-shadow: 0 3px 6px $large-button-shadow !important;
   width: 100%;
@@ -48,3 +74,43 @@
 .labelsContainer {
   text-align: left;
 }
+
+.noHover {
+  &:hover {
+    opacity: 1 !important;
+    background: inherit !important;
+    box-shadow: inherit !important;
+  }
+
+  &:active {
+    opacity: 1 !important;
+  }
+}
+
+.rectangleContainer {
+  border: 1px solid $gray !important;
+  border-radius: 8px !important;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 64px !important;
+  padding: 16px !important;
+  width: 100%;
+  transition: opacity 0.2s ease;
+
+  &:hover {
+    opacity: 0.9;
+  }
+
+  &:active {
+    opacity: 0.8;
+  }
+}
+
+.rectangleIcon {
+  display: block;
+  height: 24px;
+  width: 24px;
+  object-fit: contain;
+}

package/dist/components/ButtonContainer/index.js

@@ -7,12 +7,15 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = require("prop-types");
 var _energyUi = require("@widergy/energy-ui");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const ButtonContainer = _ref => {
   let {
     children,
     className,
     dataTestId,
+    fullWidth,
     tooltipContent,
     triggerOnMount
   } = _ref;
@@ -34,7 +37,7 @@ const ButtonContainer = _ref => {
       placement: 'left'
     }
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: `${className ?? ''}`,
+    className: `${fullWidth ? _stylesModule.default.fullWidth : _stylesModule.default.container} ${className ?? ''}`,
     "data-testid": dataTestId,
     ref: ref
   }, children));
@@ -43,6 +46,7 @@ ButtonContainer.propTypes = {
   children: _propTypes.object,
   className: _propTypes.string,
   dataTestId: _propTypes.string,
+  fullWidth: _propTypes.bool,
   tooltipContent: _propTypes.string,
   triggerOnMount: _propTypes.bool
 };

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

@@ -0,0 +1,9 @@
+.container {
+  display: inline-block;
+  width: auto;
+}
+
+.fullWidth {
+  display: flex;
+  width: 100%;
+}

package/dist/components/Facebook/assets/facebookNewIcon.svg

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg9"
+   width="666.66669"
+   height="666.66718"
+   viewBox="0 0 666.66668 666.66717"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs13">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath25">
+      <path
+         d="M 0,700 H 700 V 0 H 0 Z"
+         id="path23" />
+    </clipPath>
+  </defs>
+  <g
+     id="g17"
+     transform="matrix(1.3333333,0,0,-1.3333333,-133.33333,799.99999)">
+    <g
+       id="g19">
+      <g
+         id="g21"
+         clip-path="url(#clipPath25)">
+        <g
+           id="g27"
+           transform="translate(600,350)">
+          <path
+             d="m 0,0 c 0,138.071 -111.929,250 -250,250 -138.071,0 -250,-111.929 -250,-250 0,-117.245 80.715,-215.622 189.606,-242.638 v 166.242 h -51.552 V 0 h 51.552 v 32.919 c 0,85.092 38.508,124.532 122.048,124.532 15.838,0 43.167,-3.105 54.347,-6.211 V 81.986 c -5.901,0.621 -16.149,0.932 -28.882,0.932 -40.993,0 -56.832,-15.528 -56.832,-55.9 V 0 h 81.659 l -14.028,-76.396 h -67.631 V -248.169 C -95.927,-233.218 0,-127.818 0,0"
+             style="fill:#0866ff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path29" />
+        </g>
+        <g
+           id="g31"
+           transform="translate(447.9175,273.6036)">
+          <path
+             d="M 0,0 14.029,76.396 H -67.63 v 27.019 c 0,40.372 15.838,55.899 56.831,55.899 12.733,0 22.981,-0.31 28.882,-0.931 v 69.253 c -11.18,3.106 -38.509,6.212 -54.347,6.212 -83.539,0 -122.048,-39.441 -122.048,-124.533 V 76.396 h -51.552 V 0 h 51.552 v -166.242 c 19.343,-4.798 39.568,-7.362 60.394,-7.362 10.254,0 20.358,0.632 30.288,1.831 L -67.63,0 Z"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+             id="path33" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

package/dist/components/Facebook/index.js

@@ -12,6 +12,7 @@ var _Button = _interopRequireDefault(require("../Button"));
 var _ButtonContainer = _interopRequireDefault(require("../ButtonContainer"));
 var _utils = require("../utils");
 var _facebookIcon = _interopRequireDefault(require("./assets/facebookIcon.svg"));
+var _facebookNewIcon = _interopRequireDefault(require("./assets/facebookNewIcon.svg"));
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Facebook = _ref => {
@@ -20,7 +21,9 @@ const Facebook = _ref => {
     config,
     dataTestId,
     email,
+    facebookIconVariant = 'default',
     label,
+    rectangleButtonEnabled,
     size = _buttonSizes.SMALL,
     tooltipContent,
     triggerOnMount
@@ -30,11 +33,13 @@ const Facebook = _ref => {
     callback,
     fields
   } = config || {};
+  const selectedFacebookIcon = facebookIconVariant === 'new' ? _facebookNewIcon.default : _facebookIcon.default;
 
   // eslint-disable-next-line no-console
   if (!(0, _utils.isValidId)(appId)) console.error('El id de Facebook es inválido');
   return (0, _utils.isValidId)(appId) ? /*#__PURE__*/_react.default.createElement(_ButtonContainer.default, {
     className: classNames.container,
+    fullWidth: rectangleButtonEnabled,
     size: size,
     tooltipContent: tooltipContent,
     triggerOnMount: triggerOnMount
@@ -46,7 +51,7 @@ const Facebook = _ref => {
     fields: fields,
     render: renderProps => /*#__PURE__*/_react.default.createElement(_Button.default, {
       classNames: {
-        container: `${_stylesModule.default.buttonContainer} ${classNames.buttonContainer}`
+        container: `${_stylesModule.default.buttonContainer} ${rectangleButtonEnabled ? _stylesModule.default.iconOnlyButton : ''} ${classNames.buttonContainer}`
       },
       dataTestId: dataTestId,
       email: email,
@@ -60,7 +65,7 @@ const Facebook = _ref => {
         return /*#__PURE__*/_react.default.createElement("img", {
           alt: "Logo de Facebook",
           className: className,
-          src: _facebookIcon.default
+          src: selectedFacebookIcon
         });
       },
       label: label,
@@ -70,6 +75,7 @@ const Facebook = _ref => {
         } : {})
       },
       onClick: renderProps.onClick,
+      rectangleButtonEnabled: rectangleButtonEnabled,
       size: size
     })
   })) : null;
@@ -83,7 +89,9 @@ Facebook.propTypes = {
   }),
   dataTestId: _propTypes.string,
   email: _propTypes.string,
+  facebookIconVariant: _propTypes.string,
   label: _propTypes.string,
+  rectangleButtonEnabled: _propTypes.bool,
   size: _propTypes.string,
   tooltipContent: _propTypes.string,
   triggerOnMount: _propTypes.bool

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

@@ -7,3 +7,11 @@
     background: scale-color($color: $facebook-bg, $lightness: -30%) !important;
   }
 }
+
+.iconOnlyButton {
+  background: none !important;
+
+  &:hover {
+    background: $gray !important;
+  }
+}

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

@@ -18,6 +18,7 @@ const GoogleButton = _ref => {
     dataTestId,
     failureCallback,
     label,
+    rectangleButtonEnabled,
     size,
     successCallback,
     email
@@ -28,7 +29,7 @@ const GoogleButton = _ref => {
   });
   return /*#__PURE__*/_react.default.createElement(_Button.default, {
     classNames: {
-      container: `${_stylesModule.default.buttonContainer} ${classNames.buttonContainer}`
+      container: `${rectangleButtonEnabled ? _stylesModule.default.iconOnlyButton : _stylesModule.default.buttonContainer} ${classNames.buttonContainer}`
     },
     dataTestId: dataTestId,
     email: email,
@@ -54,6 +55,7 @@ const GoogleButton = _ref => {
       } : {})
     },
     onClick: login,
+    rectangleButtonEnabled: rectangleButtonEnabled,
     size: size
   });
 };
@@ -63,6 +65,7 @@ GoogleButton.propTypes = {
   email: _propTypes.string,
   failureCallback: _propTypes.func,
   label: _propTypes.string,
+  rectangleButtonEnabled: _propTypes.bool,
   size: _propTypes.string,
   successCallback: _propTypes.bool
 };

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

@@ -7,3 +7,11 @@
     background: scale-color($color: $white, $lightness: -10%) !important;
   }
 }
+
+.iconOnlyButton {
+  background: transparent !important;
+
+  &:hover {
+    background: $gray !important;
+  }
+}

package/dist/components/Google/index.js

@@ -19,6 +19,7 @@ const Google = _ref => {
     config,
     email,
     label,
+    rectangleButtonEnabled,
     size = _buttonSizes.SMALL,
     tooltipContent,
     triggerOnMount
@@ -35,6 +36,7 @@ const Google = _ref => {
     clientId: clientId
   }, /*#__PURE__*/_react.default.createElement(_ButtonContainer.default, {
     className: classNames.container,
+    fullWidth: rectangleButtonEnabled,
     size: size,
     tooltipContent: tooltipContent,
     triggerOnMount: triggerOnMount
@@ -44,6 +46,7 @@ const Google = _ref => {
     email: email,
     failureCallback: failureCallback,
     label: label,
+    rectangleButtonEnabled: rectangleButtonEnabled,
     size: size,
     successCallback: successCallback
   }))) : null;
@@ -58,6 +61,7 @@ Google.propTypes = {
   }),
   email: _propTypes.string,
   label: _propTypes.string,
+  rectangleButtonEnabled: _propTypes.bool,
   size: _propTypes.string,
   tooltipContent: _propTypes.string,
   triggerOnMount: _propTypes.bool

package/dist/components/Microsoft/index.js

@@ -21,6 +21,7 @@ const Microsoft = _ref => {
     config,
     email,
     label,
+    rectangleButtonEnabled,
     size = _buttonSizes.SMALL,
     tooltipContent,
     tooltipDataTestId,
@@ -42,11 +43,12 @@ const Microsoft = _ref => {
   return (0, _utils.isValidId)(clientId) ? /*#__PURE__*/_react.default.createElement(_ButtonContainer.default, {
     className: `${_stylesModule.default.container} ${classNames.container}`,
     dataTestId: tooltipDataTestId,
+    fullWidth: rectangleButtonEnabled,
     size: size,
     tooltipContent: tooltipContent,
     triggerOnMount: triggerOnMount
   }, /*#__PURE__*/_react.default.createElement(_reactMsLogin.default, {
-    btnContent: size === _buttonSizes.LARGE ? /*#__PURE__*/_react.default.createElement(_react.Fragment, null, Image, /*#__PURE__*/_react.default.createElement("div", {
+    btnContent: rectangleButtonEnabled ? Image : size === _buttonSizes.LARGE ? /*#__PURE__*/_react.default.createElement(_react.Fragment, null, Image, /*#__PURE__*/_react.default.createElement("div", {
       className: _stylesModule.default.textsContainer
     }, /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, {
       className: `${_stylesModule.default.label} ${classNames.label}`,
@@ -58,7 +60,7 @@ const Microsoft = _ref => {
       className: _stylesModule.default.smallButtonWrapper
     }, Image),
     clientId: clientId,
-    cssClass: `${_stylesModule.default.button} ${classNames.buttonContainer} ${size === _buttonSizes.SMALL ? _stylesModule.default.smallContainer : ''}`,
+    cssClass: `${_stylesModule.default.button} ${classNames.buttonContainer} ${rectangleButtonEnabled ? _stylesModule.default.rectangleButton : size === _buttonSizes.SMALL ? _stylesModule.default.smallContainer : ''}`,
     handleLogin: loginHandler,
     redirectUri: redirectUrl
   }), size === _buttonSizes.SMALL && label && /*#__PURE__*/_react.default.createElement(_energyUi.UTLabel, null, label)) : null;
@@ -72,6 +74,7 @@ Microsoft.propTypes = {
   }),
   email: _propTypes.string,
   label: _propTypes.string,
+  rectangleButtonEnabled: _propTypes.bool,
   size: _propTypes.string,
   tooltipContent: _propTypes.string,
   tooltipDataTestId: _propTypes.string,

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

@@ -5,16 +5,17 @@
   background: $microsoft-bg !important;
   border-radius: 4px;
   border: 1px solid transparent;
-  box-shadow: 0 3px 6px $microsoft-button-shadow;
   box-sizing: border-box;
   cursor: pointer;
   display: inline-flex;
   justify-content: center;
   outline: 0;
   padding: 8px 12px;
-  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
-  box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
-  color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition:
+    background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   width: 100%;
 
   &:hover {
@@ -56,3 +57,64 @@
   margin: 0 auto;
   text-align: left;
 }
+
+.iconOnly {
+  background: none !important;
+  border: none !important;
+  box-shadow: none !important;
+  padding: 0 !important;
+  width: auto !important;
+  transition: opacity 0.2s ease !important;
+
+  &:hover {
+    background: $gray !important;
+    opacity: 0.8;
+  }
+
+  &:active {
+    opacity: 0.6;
+  }
+
+  .icon {
+    height: 48px;
+    width: 48px;
+  }
+}
+
+.noHover {
+  &:hover {
+    opacity: 1 !important;
+    box-shadow: 0 3px 6px $microsoft-button-shadow !important;
+  }
+
+  &:active {
+    opacity: 1 !important;
+  }
+
+  &.iconOnly:hover {
+    background: none !important;
+    box-shadow: none !important;
+  }
+}
+
+.rectangleButton {
+  background: none !important;
+  border: 1px solid $gray !important;
+  border-radius: 8px !important;
+  height: 64px !important;
+  padding: 16px !important;
+  width: 100% !important;
+
+  &:hover {
+    background: $gray !important;
+  }
+
+  &:active {
+    opacity: 0.8 !important;
+  }
+
+  .icon {
+    height: 24px;
+    width: 24px;
+  }
+}

package/dist/components/Twitter/index.js

@@ -23,6 +23,7 @@ const Twitter = _ref => {
     dataTestId,
     email,
     label,
+    rectangleButtonEnabled,
     size = _buttonSizes.SMALL,
     tooltipContent,
     triggerOnMount
@@ -67,12 +68,13 @@ const Twitter = _ref => {
   };
   return /*#__PURE__*/_react.default.createElement(_ButtonContainer.default, {
     className: classNames.container,
+    fullWidth: rectangleButtonEnabled,
     size: size,
     tooltipContent: tooltipContent,
     triggerOnMount: triggerOnMount
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     classNames: {
-      container: `${_stylesModule.default.buttonContainer} ${classNames.buttonContainer}`
+      container: `${_stylesModule.default.buttonContainer} ${rectangleButtonEnabled ? _stylesModule.default.iconOnlyButton : ''} ${classNames.buttonContainer}`
     },
     dataTestId: dataTestId,
     email: email,
@@ -96,6 +98,7 @@ const Twitter = _ref => {
       } : {})
     },
     onClick: handleClick,
+    rectangleButtonEnabled: rectangleButtonEnabled,
     size: size
   }));
 };
@@ -113,6 +116,7 @@ Twitter.propTypes = {
   dataTestId: _propTypes.string,
   email: _propTypes.string,
   label: _propTypes.string,
+  rectangleButtonEnabled: _propTypes.bool,
   size: _propTypes.string,
   tooltipContent: _propTypes.string,
   triggerOnMount: _propTypes.bool

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

@@ -7,3 +7,11 @@
     background: scale-color($color: $twitter-bg, $lightness: -30%) !important;
   }
 }
+
+.iconOnlyButton {
+  background: none !important;
+
+  &:hover {
+    background: $gray !important;
+  }
+}

package/dist/scss/variables/_colors.scss

@@ -1,9 +1,10 @@
 $black: #000;
-$facebook-bg: #4267B2;
+$facebook-bg: #4267b2;
 $large-button-shadow: rgba(9, 30, 66, 0.1);
 $small-button-shadow: rgba(24, 44, 73, 0.1);
 $light-black: #252525;
-$microsoft-bg: #2F2F2F;
+$microsoft-bg: #2f2f2f;
 $microsoft-button-shadow: rgba(24, 44, 73, 0.1);
-$twitter-bg: #00ACED;
-$white: #FFF;
+$twitter-bg: #00aced;
+$white: #fff;
+$gray: #E4E6EA;

package/package.json

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

package/dist/components/Apple/assets/appleIcon.svg

@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="21px" height="24px" viewBox="0 0 21 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Apple_logo_black 2</title>
-    <g id="Login" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Con-DNI---01" transform="translate(-1039.000000, -389.000000)" fill="#FFFFFF" fill-rule="nonzero">
-            <g id="Group-27" transform="translate(887.000000, 167.000000)">
-                <g id="Group-23" transform="translate(17.000000, 212.000000)">
-                    <g id="Group-15" transform="translate(123.000000, 0.000000)">
-                        <g id="Apple_logo_black" transform="translate(12.600000, 10.800000)">
-                            <path d="M18.5424591,17.5224972 C18.2024218,18.3080534 17.7999282,19.0311534 17.3335909,19.6959621 C16.6979284,20.6022652 16.1774629,21.2296004 15.7763572,21.5779659 C15.1545744,22.1497841 14.4883782,22.4426326 13.774993,22.4592879 C13.2628549,22.4592879 12.6452354,22.3135568 11.9262989,22.0179337 C11.205003,21.7236951 10.5421377,21.5779659 9.93603788,21.5779659 C9.30037576,21.5779659 8.61863485,21.7236951 7.88942784,22.0179337 C7.15910966,22.3135568 6.57077557,22.4676155 6.12095417,22.4828826 C5.43685398,22.5120284 4.754975,22.2108523 4.07434413,21.5779659 C3.63992917,21.1990663 3.09656307,20.5495246 2.44563352,19.6293409 C1.74723818,18.646703 1.17306038,17.5072301 0.723239167,16.2081477 C0.241496117,14.804972 0,13.4462095 0,12.1307502 C0,10.6238979 0.32560339,9.32426023 0.97778161,8.23516818 C1.49033625,7.36036989 2.17221572,6.67030152 3.02564034,6.16371458 C3.87906572,5.65712841 4.80119223,5.39897746 5.7942411,5.38246098 C6.33760682,5.38246098 7.05015966,5.55053674 7.93564508,5.88085909 C8.81863258,6.21229167 9.38559337,6.38036742 9.63416742,6.38036742 C9.82000833,6.38036742 10.4498413,6.1838392 11.5175595,5.79203314 C12.5272634,5.4286786 13.379439,5.27822879 14.077557,5.33749242 C15.9692767,5.4901625 17.3904951,6.23588598 18.335661,7.57938144 C16.6438006,8.60449091 15.8068915,10.0402822 15.8235462,11.8821756 C15.8388133,13.3168564 16.3592788,14.5107352 17.3821674,15.4586775 C17.8457286,15.8986437 18.3634189,16.2386814 18.9393996,16.4801778 C18.8144896,16.8424218 18.6826383,17.1893991 18.5424591,17.5224972 Z M14.2038572,0.449834034 C14.2038572,1.57433081 13.7930356,2.62427027 12.9741701,3.59608333 C11.9859784,4.75137898 10.7907121,5.41896269 9.49454394,5.31362064 C9.47802803,5.17871572 9.46845133,5.03673295 9.46845133,4.88753295 C9.46845133,3.80801723 9.93839735,2.65272216 10.7729472,1.7081115 C11.1895966,1.22983858 11.7195002,0.832161117 12.3621021,0.514926269 C13.0033157,0.202424754 13.609832,0.0296046856 14.1802619,9.98757121e-06 C14.196918,0.15033764 14.2038572,0.300674754 14.2038572,0.449819451 L14.2038572,0.449834034 Z" id="path4"></path>
-                        </g>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>