From 59a6866358037d2d0d327d8910d2202633d50300 Mon Sep 17 00:00:00 2001
From: Jonas Hungershausen <jonas.hungershausen@ory.sh>
Date: Wed, 27 Nov 2024 08:21:45 +0100
Subject: [PATCH] feat: allow overriding OIDC logos

---
 .../theme/default/components/form/index.tsx   |  2 ++
 .../theme/default/components/form/social.tsx  | 19 +++++++++++++++++--
 .../theme/default/provider-logos/apple.svg    |  5 ++---
 .../theme/default/provider-logos/google.svg   |  7 ++++++-
 4 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/packages/elements-react/src/theme/default/components/form/index.tsx b/packages/elements-react/src/theme/default/components/form/index.tsx
index ea7605c9d..67796774c 100644
--- a/packages/elements-react/src/theme/default/components/form/index.tsx
+++ b/packages/elements-react/src/theme/default/components/form/index.tsx
@@ -64,3 +64,5 @@ export function DefaultMessage({ message }: OryMessageContentProps) {
     </span>
   )
 }
+
+export { DefaultButtonSocial } from "./social"
diff --git a/packages/elements-react/src/theme/default/components/form/social.tsx b/packages/elements-react/src/theme/default/components/form/social.tsx
index 0bc00e139..1bcac25b1 100644
--- a/packages/elements-react/src/theme/default/components/form/social.tsx
+++ b/packages/elements-react/src/theme/default/components/form/social.tsx
@@ -7,9 +7,10 @@ import {
   uiTextToFormattedMessage,
   useOryFlow,
 } from "@ory/elements-react"
-import logos from "../../provider-logos"
+import defaultLogos from "../../provider-logos"
 import { cn } from "../../utils/cn"
 import { useIntl } from "react-intl"
+import { ElementType } from "react"
 
 export function extractProvider(
   context: object | undefined,
@@ -27,6 +28,7 @@ export function extractProvider(
 
 type DefaultSocialButtonProps = OryNodeOidcButtonProps & {
   showLabel?: boolean
+  logos?: Record<string, ElementType>
 }
 
 export function DefaultButtonSocial({
@@ -34,7 +36,9 @@ export function DefaultButtonSocial({
   node,
   onClick,
   showLabel: _showLabel,
+  logos: providedLogos,
 }: DefaultSocialButtonProps) {
+  const logos = { ...defaultLogos, ...providedLogos }
   const {
     node_type: _ignoredNodeType,
     type: _ignoredType,
@@ -73,7 +77,7 @@ export function DefaultButtonSocial({
           <Logo
             size={20}
             // alt={node.meta.label?.text || attributes.value}
-            className="object-fill w-full h-full"
+            // className="object-fill w-full h-full"
           />
         ) : (
           <span className="rounded-full aspect-square border flex items-center justify-center text-xs">
@@ -90,6 +94,17 @@ export function DefaultButtonSocial({
   )
 }
 
+/**
+ * Returns a variant of DefaultButtonSocial that can use your own logos
+ *
+ * @param logos - a record of provider names and their respective logos
+ * @returns a variant of DefaultButtonSocial that uses the provided logos
+ */
+DefaultButtonSocial.WithLogos =
+  (logos: Record<string, ElementType>) => (props: DefaultSocialButtonProps) => (
+    <DefaultButtonSocial {...props} logos={logos} />
+  )
+
 export function DefaultSocialButtonContainer({
   children,
   nodes,
diff --git a/packages/elements-react/src/theme/default/provider-logos/apple.svg b/packages/elements-react/src/theme/default/provider-logos/apple.svg
index c85777c57..7cd5e61a2 100644
--- a/packages/elements-react/src/theme/default/provider-logos/apple.svg
+++ b/packages/elements-react/src/theme/default/provider-logos/apple.svg
@@ -1,4 +1,3 @@
-<svg  viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M30 16C30 23.728 23.735 30 16 30C8.265 30 2 23.728 2 16C2 8.26499 8.265 1.99999 16 1.99999C23.735 1.99999 30 8.26499 30 16Z" fill="#283544"/>
-<path d="M22.5621 12.4574C22.4857 12.502 20.6671 13.4425 20.6671 15.5279C20.7528 17.9061 22.9621 18.7401 23 18.7401C22.9621 18.7847 22.6665 19.8763 21.7907 21.0205C21.0956 22.0062 20.3242 23 19.1528 23C18.0385 23 17.6385 22.3431 16.3528 22.3431C14.972 22.3431 14.5813 23 13.5242 23C12.3528 23 11.5242 21.953 10.7913 20.9766C9.8391 19.6986 9.02978 17.6931 9.00121 15.7675C8.98195 14.7471 9.19189 13.744 9.72481 12.8921C10.477 11.7026 11.8198 10.8952 13.2863 10.8686C14.4099 10.8333 15.4099 11.5875 16.0956 11.5875C16.7528 11.5875 17.9814 10.8686 19.3714 10.8686C19.9714 10.8692 21.5714 11.0376 22.5621 12.4574ZM16.0006 10.6649C15.8006 9.73303 16.3528 8.80119 16.8671 8.20677C17.5242 7.48792 18.5621 7 19.4571 7C19.5143 7.93185 19.1522 8.84575 18.505 9.51136C17.9242 10.2302 16.9242 10.7714 16.0006 10.6649Z" fill="white"/>
+<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27.7337 11.5504C27.6 11.6284 24.4174 13.2743 24.4174 16.9237C24.5674 21.0857 28.4337 22.5452 28.5 22.5452C28.4337 22.6232 27.9163 24.5335 26.3837 26.536C25.1674 28.2609 23.8174 30 21.7674 30C19.8174 30 19.1174 28.8504 16.8674 28.8504C14.4511 28.8504 13.7674 30 11.9173 30C9.86734 30 8.41734 28.1677 7.13473 26.459C5.46842 24.2225 4.05211 20.7129 4.00211 17.3431C3.96842 15.5574 4.33581 13.8021 5.26842 12.3111C6.58473 10.2296 8.93473 8.81667 11.501 8.77008C13.4674 8.70829 15.2174 10.0281 16.4174 10.0281C17.5674 10.0281 19.7174 8.77008 22.15 8.77008C23.2 8.77109 26 9.06584 27.7337 11.5504ZM16.2511 8.41354C15.9011 6.78281 16.8674 5.15208 17.7674 4.11185C18.9174 2.85386 20.7337 2 22.3 2C22.4 3.63073 21.7663 5.23007 20.6337 6.39488C19.6174 7.65287 17.8674 8.59991 16.2511 8.41354Z" fill="#283544" id="apple-svg"/>
 </svg>
diff --git a/packages/elements-react/src/theme/default/provider-logos/google.svg b/packages/elements-react/src/theme/default/provider-logos/google.svg
index b8cf5b26b..3f670be38 100644
--- a/packages/elements-react/src/theme/default/provider-logos/google.svg
+++ b/packages/elements-react/src/theme/default/provider-logos/google.svg
@@ -1 +1,6 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#4285F4" d="M23.745 12.27c0-.79-.07-1.54-.19-2.27h-11.3v4.51h6.47c-.29 1.48-1.14 2.73-2.4 3.58v3h3.86c2.26-2.09 3.56-5.17 3.56-8.82Z"/><path fill="#34A853" d="M12.255 24c3.24 0 5.95-1.08 7.93-2.91l-3.86-3c-1.08.72-2.45 1.16-4.07 1.16-3.13 0-5.78-2.11-6.73-4.96h-3.98v3.09C3.515 21.3 7.565 24 12.255 24Z"/><path fill="#FBBC05" d="M5.525 14.29c-.25-.72-.38-1.49-.38-2.29s.14-1.57.38-2.29V6.62h-3.98a11.86 11.86 0 0 0 0 10.76l3.98-3.09Z"/><path fill="#EA4335" d="M12.255 4.75c1.77 0 3.35.61 4.6 1.8l3.42-3.42C18.205 1.19 15.495 0 12.255 0c-4.69 0-8.74 2.7-10.71 6.62l3.98 3.09c.95-2.85 3.6-4.96 6.73-4.96Z"/></svg>
\ No newline at end of file
+<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.0014 16.3109C30.0014 15.1598 29.9061 14.3198 29.6998 13.4487H16.2871V18.6442H24.1601C24.0014 19.9354 23.1443 21.8798 21.2395 23.1864L21.2128 23.3604L25.4536 26.58L25.7474 26.6087C28.4458 24.1665 30.0014 20.5731 30.0014 16.3109Z" fill="#4285F4"/>
+<path d="M16.2862 30C20.1433 30 23.3814 28.7555 25.7465 26.6089L21.2386 23.1865C20.0322 24.011 18.4132 24.5866 16.2862 24.5866C12.5085 24.5866 9.30219 22.1444 8.15923 18.7688L7.9917 18.7827L3.58202 22.1272L3.52435 22.2843C5.87353 26.8577 10.6989 30 16.2862 30Z" fill="#34A853"/>
+<path d="M8.16007 18.7688C7.85848 17.8977 7.68395 16.9643 7.68395 15.9999C7.68395 15.0354 7.85849 14.1021 8.1442 13.231L8.13621 13.0455L3.67126 9.64734L3.52518 9.71544C2.55696 11.6132 2.0014 13.7444 2.0014 15.9999C2.0014 18.2555 2.55696 20.3865 3.52518 22.2843L8.16007 18.7688Z" fill="#FBBC05"/>
+<path d="M16.2863 7.4133C18.9688 7.4133 20.7783 8.54885 21.8101 9.4978L25.8418 5.64C23.3657 3.38445 20.1434 2 16.2863 2C10.699 2 5.87354 5.1422 3.52435 9.71549L8.14339 13.2311C9.30223 9.85555 12.5086 7.4133 16.2863 7.4133Z" fill="#EB4335"/>
+</svg>