feat(clerk-js,types): Introduce logoLinkUrl option in appearance layo…

…ut prop
clerk · Aug 4, 2023 · 89bc5de · 89bc5de
1 parent 649ba46
commit 89bc5de
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 1 deletion.
diff --git a/.changeset/wise-badgers-cover.md b/.changeset/wise-badgers-cover.md
@@ -0,0 +1,8 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+---
+
+Introduce `logoLinkUrl` prop in `appearance.layout`
+A new `logoLinkUrl` prop has been added to `appearance.layout` and used in `ApplicationLogo` to change the `href` of the link.
+By default, the logo link url will be the Home URL you've set in the Clerk Dashboard.
diff --git a/packages/clerk-js/src/ui/customizables/__tests__/parseAppearance.test.tsx b/packages/clerk-js/src/ui/customizables/__tests__/parseAppearance.test.tsx
@@ -233,6 +233,7 @@ describe('AppearanceProvider layout flows', () => {
           layout: {
             helpPageUrl: 'test',
             logoImageUrl: 'test',
+            logoLinkUrl: 'test',
             privacyPageUrl: 'test',
             termsPageUrl: 'test',
             logoPlacement: 'inside',
@@ -249,6 +250,7 @@ describe('AppearanceProvider layout flows', () => {
     const { result } = renderHook(() => useAppearance(), { wrapper });
     expect(result.current.parsedLayout.helpPageUrl).toBe('test');
     expect(result.current.parsedLayout.logoImageUrl).toBe('test');
+    expect(result.current.parsedLayout.logoLinkUrl).toBe('test');
     expect(result.current.parsedLayout.privacyPageUrl).toBe('test');
     expect(result.current.parsedLayout.termsPageUrl).toBe('test');
     expect(result.current.parsedLayout.logoPlacement).toBe('inside');
@@ -265,6 +267,7 @@ describe('AppearanceProvider layout flows', () => {
           layout: {
             helpPageUrl: 'test2',
             logoImageUrl: 'test2',
+            logoLinkUrl: 'test2',
             privacyPageUrl: 'test2',
             termsPageUrl: 'test2',
             logoPlacement: 'outside',
@@ -281,6 +284,7 @@ describe('AppearanceProvider layout flows', () => {
     const { result } = renderHook(() => useAppearance(), { wrapper });
     expect(result.current.parsedLayout.helpPageUrl).toBe('test2');
     expect(result.current.parsedLayout.logoImageUrl).toBe('test2');
+    expect(result.current.parsedLayout.logoLinkUrl).toBe('test2');
     expect(result.current.parsedLayout.privacyPageUrl).toBe('test2');
     expect(result.current.parsedLayout.termsPageUrl).toBe('test2');
     expect(result.current.parsedLayout.logoPlacement).toBe('outside');
@@ -297,6 +301,7 @@ describe('AppearanceProvider layout flows', () => {
           layout: {
             helpPageUrl: 'test',
             logoImageUrl: 'test',
+            logoLinkUrl: 'test',
             privacyPageUrl: 'test',
             termsPageUrl: 'test',
             logoPlacement: 'inside',
@@ -309,6 +314,7 @@ describe('AppearanceProvider layout flows', () => {
           layout: {
             helpPageUrl: 'test2',
             logoImageUrl: 'test2',
+            logoLinkUrl: 'test2',
             privacyPageUrl: 'test2',
             termsPageUrl: 'test2',
             logoPlacement: 'outside',
@@ -325,6 +331,7 @@ describe('AppearanceProvider layout flows', () => {
     const { result } = renderHook(() => useAppearance(), { wrapper });
     expect(result.current.parsedLayout.helpPageUrl).toBe('test2');
     expect(result.current.parsedLayout.logoImageUrl).toBe('test2');
+    expect(result.current.parsedLayout.logoLinkUrl).toBe('test2');
     expect(result.current.parsedLayout.privacyPageUrl).toBe('test2');
     expect(result.current.parsedLayout.termsPageUrl).toBe('test2');
     expect(result.current.parsedLayout.logoPlacement).toBe('outside');

diff --git a/packages/clerk-js/src/ui/customizables/parseAppearance.ts b/packages/clerk-js/src/ui/customizables/parseAppearance.ts
@@ -37,6 +37,7 @@ const defaultLayout: ParsedLayout = {
   socialButtonsPlacement: 'top',
   socialButtonsVariant: 'auto',
   logoImageUrl: '',
+  logoLinkUrl: '',
   showOptionalFields: true,
   helpPageUrl: '',
   privacyPageUrl: '',

diff --git a/packages/clerk-js/src/ui/elements/ApplicationLogo.tsx b/packages/clerk-js/src/ui/elements/ApplicationLogo.tsx
@@ -32,6 +32,7 @@ export const ApplicationLogo = (props: ApplicationLogoProps) => {
   const { logoImageUrl, applicationName, homeUrl } = useEnvironment().displayConfig;
   const { parsedLayout } = useAppearance();
   const imageSrc = parsedLayout.logoImageUrl || logoImageUrl;
+  const logoUrl = parsedLayout.logoLinkUrl || homeUrl;
 
   if (!imageSrc) {
     return null;
@@ -64,7 +65,7 @@ export const ApplicationLogo = (props: ApplicationLogoProps) => {
         props.sx,
       ]}
     >
-      {homeUrl ? <RouterLink to={homeUrl}>{image}</RouterLink> : image}
+      {logoUrl ? <RouterLink to={logoUrl}>{image}</RouterLink> : image}
     </Flex>
   );
 };
diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts
@@ -567,6 +567,14 @@ export type Layout = {
    * @default undefined
    */
   logoImageUrl?: string;
+  /**
+   * Controls where the browser will redirect to after the user clicks the application logo,
+   * usually found in the SignIn and SignUp components.
+   * If a URL is provided, it will be used as the `href` of the link.
+   * If a value is not passed in, the components will use the Home URL as set in the Clerk dashboard
+   * @default undefined
+   */
+  logoLinkUrl?: string;
   /**
    * Controls the variant that will be used for the social buttons.
    * By default, the components will use block buttons if you have less than