From 1cabd2a51464611e8cdc98bb7df649186af84ae7 Mon Sep 17 00:00:00 2001
From: Zainab Amir <zainab.amir@arbisoft.com>
Date: Fri, 31 Mar 2023 14:38:42 +0500
Subject: [PATCH] fix: sso providers position (#824)

---
 src/common-components/SocialAuthProviders.jsx |   3 +-
 .../SocialAuthProviders.test.jsx.snap         | 164 +++++++++---------
 2 files changed, 82 insertions(+), 85 deletions(-)

diff --git a/src/common-components/SocialAuthProviders.jsx b/src/common-components/SocialAuthProviders.jsx
index b2bb3d07..f786907d 100644
--- a/src/common-components/SocialAuthProviders.jsx
+++ b/src/common-components/SocialAuthProviders.jsx
@@ -50,7 +50,8 @@ const SocialAuthProviders = (props) => {
     </button>
   ));
 
-  return <span>{socialAuth}</span>;
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  return <>{socialAuth}</>;
 };
 
 SocialAuthProviders.defaultProps = {
diff --git a/src/common-components/tests/__snapshots__/SocialAuthProviders.test.jsx.snap b/src/common-components/tests/__snapshots__/SocialAuthProviders.test.jsx.snap
index 41109b54..6152667a 100644
--- a/src/common-components/tests/__snapshots__/SocialAuthProviders.test.jsx.snap
+++ b/src/common-components/tests/__snapshots__/SocialAuthProviders.test.jsx.snap
@@ -1,101 +1,97 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SocialAuthProviders should match social auth provider with default icon snapshot 1`] = `
-<span>
-  <button
-    className="btn-social btn-oa2-apple-id mr-3"
-    data-provider-url="/auth/login/apple-id/?auth_entry=login&next=/dashboard"
-    id="oa2-apple-id"
-    onClick={[Function]}
-    type="button"
+<button
+  className="btn-social btn-oa2-apple-id mr-3"
+  data-provider-url="/auth/login/apple-id/?auth_entry=login&next=/dashboard"
+  id="oa2-apple-id"
+  onClick={[Function]}
+  type="button"
+>
+  <div
+    aria-hidden="true"
+    className="font-container"
   >
-    <div
+    <svg
       aria-hidden="true"
-      className="font-container"
+      className="svg-inline--fa fa-right-to-bracket "
+      data-icon="right-to-bracket"
+      data-prefix="fas"
+      focusable="false"
+      role="img"
+      style={Object {}}
+      viewBox="0 0 512 512"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <svg
-        aria-hidden="true"
-        className="svg-inline--fa fa-right-to-bracket "
-        data-icon="right-to-bracket"
-        data-prefix="fas"
-        focusable="false"
-        role="img"
+      <path
+        d="M352 96h64c17.7 0 32 14.3 32 32V384c0 17.7-14.3 32-32 32H352c-17.7 0-32 14.3-32 32s14.3 32 32 32h64c53 0 96-43 96-96V128c0-53-43-96-96-96H352c-17.7 0-32 14.3-32 32s14.3 32 32 32zm-7.5 177.4c4.8-4.5 7.5-10.8 7.5-17.4s-2.7-12.9-7.5-17.4l-144-136c-7-6.6-17.2-8.4-26-4.6s-14.5 12.5-14.5 22v72H32c-17.7 0-32 14.3-32 32v64c0 17.7 14.3 32 32 32H160v72c0 9.6 5.7 18.2 14.5 22s19 2 26-4.6l144-136z"
+        fill="currentColor"
         style={Object {}}
-        viewBox="0 0 512 512"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M352 96h64c17.7 0 32 14.3 32 32V384c0 17.7-14.3 32-32 32H352c-17.7 0-32 14.3-32 32s14.3 32 32 32h64c53 0 96-43 96-96V128c0-53-43-96-96-96H352c-17.7 0-32 14.3-32 32s14.3 32 32 32zm-7.5 177.4c4.8-4.5 7.5-10.8 7.5-17.4s-2.7-12.9-7.5-17.4l-144-136c-7-6.6-17.2-8.4-26-4.6s-14.5 12.5-14.5 22v72H32c-17.7 0-32 14.3-32 32v64c0 17.7 14.3 32 32 32H160v72c0 9.6 5.7 18.2 14.5 22s19 2 26-4.6l144-136z"
-          fill="currentColor"
-          style={Object {}}
-        />
-      </svg>
-    </div>
-    <span
-      aria-hidden="true"
-      className="notranslate mr-auto pl-2"
-      id="provider-name"
-    >
-      Apple
-    </span>
-    <span
-      className="sr-only"
-    >
-      Sign in with Apple
-    </span>
-  </button>
-</span>
+      />
+    </svg>
+  </div>
+  <span
+    aria-hidden="true"
+    className="notranslate mr-auto pl-2"
+    id="provider-name"
+  >
+    Apple
+  </span>
+  <span
+    className="sr-only"
+  >
+    Sign in with Apple
+  </span>
+</button>
 `;
 
 exports[`SocialAuthProviders should match social auth provider with iconClass snapshot 1`] = `
-<span>
-  <button
-    className="btn-social btn-oa2-apple-id mr-3"
-    data-provider-url="/auth/login/apple-id/?auth_entry=login&next=/dashboard"
-    id="oa2-apple-id"
-    onClick={[Function]}
-    type="button"
+<button
+  className="btn-social btn-oa2-apple-id mr-3"
+  data-provider-url="/auth/login/apple-id/?auth_entry=login&next=/dashboard"
+  id="oa2-apple-id"
+  onClick={[Function]}
+  type="button"
+>
+  <div
+    aria-hidden="true"
+    className="font-container"
   >
-    <div
+    <svg
       aria-hidden="true"
-      className="font-container"
+      className="svg-inline--fa fa-google "
+      data-icon="google"
+      data-prefix="fab"
+      focusable="false"
+      role="img"
+      style={Object {}}
+      viewBox="0 0 488 512"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <svg
-        aria-hidden="true"
-        className="svg-inline--fa fa-google "
-        data-icon="google"
-        data-prefix="fab"
-        focusable="false"
-        role="img"
+      <path
+        d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
+        fill="currentColor"
         style={Object {}}
-        viewBox="0 0 488 512"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
-          fill="currentColor"
-          style={Object {}}
-        />
-      </svg>
-    </div>
-    <span
-      aria-hidden="true"
-      className="notranslate mr-auto pl-2"
-      id="provider-name"
-    >
-      Apple
-    </span>
-    <span
-      className="sr-only"
-    >
-      Sign in with Apple
-    </span>
-  </button>
-</span>
+      />
+    </svg>
+  </div>
+  <span
+    aria-hidden="true"
+    className="notranslate mr-auto pl-2"
+    id="provider-name"
+  >
+    Apple
+  </span>
+  <span
+    className="sr-only"
+  >
+    Sign in with Apple
+  </span>
+</button>
 `;
 
 exports[`SocialAuthProviders should match social auth provider with iconImage snapshot 1`] = `
-<span>
+Array [
   <button
     className="btn-social btn-oa2-apple-id mr-3"
     data-provider-url="/auth/login/apple-id/?auth_entry=login&next=/dashboard"
@@ -124,7 +120,7 @@ exports[`SocialAuthProviders should match social auth provider with iconImage sn
     >
       Sign in with Apple
     </span>
-  </button>
+  </button>,
   <button
     className="btn-social btn-oa2-facebook "
     data-provider-url="/auth/login/facebook/?auth_entry=login&next=/dashboard"
@@ -153,6 +149,6 @@ exports[`SocialAuthProviders should match social auth provider with iconImage sn
     >
       Sign in with Facebook
     </span>
-  </button>
-</span>
+  </button>,
+]
 `;