From 89bc5de04aafa9832d4d1b5f816af2340acd14d4 Mon Sep 17 00:00:00 2001 From: nikospapcom Date: Wed, 2 Aug 2023 12:41:16 +0300 Subject: [PATCH] feat(clerk-js,types): Introduce logoLinkUrl option in appearance layout prop --- .changeset/wise-badgers-cover.md | 8 ++++++++ .../ui/customizables/__tests__/parseAppearance.test.tsx | 7 +++++++ packages/clerk-js/src/ui/customizables/parseAppearance.ts | 1 + packages/clerk-js/src/ui/elements/ApplicationLogo.tsx | 3 ++- packages/types/src/appearance.ts | 8 ++++++++ 5 files changed, 26 insertions(+), 1 deletion(-) create mode 100644 .changeset/wise-badgers-cover.md diff --git a/.changeset/wise-badgers-cover.md b/.changeset/wise-badgers-cover.md new file mode 100644 index 0000000000..a65b4b606e --- /dev/null +++ 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. \ No newline at end of file diff --git a/packages/clerk-js/src/ui/customizables/__tests__/parseAppearance.test.tsx b/packages/clerk-js/src/ui/customizables/__tests__/parseAppearance.test.tsx index ba697ad342..f048de589b 100644 --- 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 index 1dac0b4703..b06aa2b6e9 100644 --- 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 index f58463c2b8..5106e3b468 100644 --- 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 ? {image} : image} + {logoUrl ? {image} : image} ); }; diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts index 18ca64e5d2..9768adf395 100644 --- 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