From 11ebd02352258101b3f485b93bc811f793195d0f Mon Sep 17 00:00:00 2001
From: Alex Carpenter <im.alexcarpenter@gmail.com>
Date: Mon, 23 Sep 2024 09:53:58 -0400
Subject: [PATCH] feat(ui): Add logoVisibility prop functionality (#4202)

---
 .changeset/orange-scissors-marry.md            |  2 ++
 packages/ui/src/contexts/AppearanceContext.tsx |  8 ++++++--
 packages/ui/src/hooks/use-card.ts              | 13 ++++++++-----
 3 files changed, 16 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/orange-scissors-marry.md

diff --git a/.changeset/orange-scissors-marry.md b/.changeset/orange-scissors-marry.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/orange-scissors-marry.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/ui/src/contexts/AppearanceContext.tsx b/packages/ui/src/contexts/AppearanceContext.tsx
index 15a3220cbf..90b64d6858 100644
--- a/packages/ui/src/contexts/AppearanceContext.tsx
+++ b/packages/ui/src/contexts/AppearanceContext.tsx
@@ -37,7 +37,11 @@ export type ParsedElementsFragment = Partial<PartialTheme>;
  * the main type interacted with within components.
  */
 export type ParsedElements = Record<DescriptorIdentifier, ParsedDescriptor>;
-export type ParsedLayout = Required<Layout>;
+export type ParsedLayout = Required<
+  Omit<Layout, 'logoPlacement'> & {
+    logoVisibility: 'visible' | 'hidden';
+  }
+>;
 
 type ElementsAppearanceConfig = string | (React.CSSProperties & { className?: string });
 
@@ -224,7 +228,7 @@ export const defaultAppearance: ParsedAppearance = {
   theme: fullTheme,
   elements: fullTheme,
   layout: {
-    logoPlacement: 'inside',
+    logoVisibility: 'visible',
     socialButtonsPlacement: 'top',
     socialButtonsVariant: 'auto',
     logoImageUrl: '',
diff --git a/packages/ui/src/hooks/use-card.ts b/packages/ui/src/hooks/use-card.ts
index 4db9adc6f2..3387bc18d9 100644
--- a/packages/ui/src/hooks/use-card.ts
+++ b/packages/ui/src/hooks/use-card.ts
@@ -27,11 +27,14 @@ export function useCard() {
   const { layout } = useAppearance().parsedAppearance;
   const { applicationName, branded, logoImageUrl, homeUrl } = useDisplayConfig();
 
-  const logoProps = {
-    href: layout?.logoLinkUrl || homeUrl,
-    src: layout?.logoImageUrl || logoImageUrl,
-    alt: applicationName,
-  };
+  const logoProps =
+    layout?.logoVisibility === 'visible'
+      ? {
+          href: layout?.logoLinkUrl || homeUrl,
+          src: layout?.logoImageUrl || logoImageUrl,
+          alt: applicationName,
+        }
+      : null;
 
   const footerProps = {
     branded,