feat(ui): Add logoVisibility prop functionality (#4202)

clerk · Sep 23, 2024 · 11ebd02 · 11ebd02
1 parent cac25e0
commit 11ebd02
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/.changeset/orange-scissors-marry.md 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
@@ -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
@@ -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,