Skip to content

Commit d61bef1

Browse files
alexcarpenteralexcarpenter
authored
refactor(ui): Rename layout prop to options (clerk#4209)
1 parent 19d3808 commit d61bef1

13 files changed

Lines changed: 59 additions & 90 deletions

File tree

‎.changeset/shiny-turtles-double.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
---
2+
---

‎packages/ui/src/common/connections.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,12 +57,12 @@ export function Connections(
5757
props: { columns?: number } & Pick<React.ComponentProps<typeof Button>, 'disabled' | 'textVisuallyHidden'>,
5858
) {
5959
const enabledConnections = useEnabledConnections();
60-
const { layout } = useAppearance().parsedAppearance;
60+
const { options } = useAppearance().parsedAppearance;
6161
const hasConnection = enabledConnections.length > 0;
6262
const textVisuallyHidden =
6363
typeof props?.textVisuallyHidden !== 'undefined'
6464
? props.textVisuallyHidden
65-
: enabledConnections.length > 2 || layout?.socialButtonsVariant === 'iconButton';
65+
: enabledConnections.length > 2 || options?.socialButtonsVariant === 'iconButton';
6666
const columns = getColumnCount({ length: enabledConnections.length, max: props?.columns || 6 });
6767

6868
return hasConnection ? (

‎packages/ui/src/components/sign-in/steps/get-help.tsx‎

Lines changed: 4 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { useGetHelp } from '~/components/sign-in/hooks/use-get-help';
22
import { LOCALIZATION_NEEDED } from '~/constants/localizations';
3-
import { useAppearance } from '~/contexts';
3+
import { useCard } from '~/hooks/use-card';
44
import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
5-
import { useDisplayConfig } from '~/hooks/use-display-config';
65
import { useLocalizations } from '~/hooks/use-localizations';
76
import { useSupportEmail } from '~/hooks/use-support-email';
87
import { Button } from '~/primitives/button';
@@ -12,29 +11,16 @@ import { LinkButton } from '~/primitives/link';
1211

1312
export function SignInGetHelp() {
1413
const { t } = useLocalizations();
15-
const { applicationName, branded, logoImageUrl, homeUrl } = useDisplayConfig();
16-
const { layout } = useAppearance().parsedAppearance;
1714
const isDev = useDevModeWarning();
1815
const supportEmail = useSupportEmail();
1916
const { setShowHelp } = useGetHelp();
20-
21-
const cardLogoProps = {
22-
href: layout?.logoLinkUrl || homeUrl,
23-
src: layout?.logoImageUrl || logoImageUrl,
24-
alt: applicationName,
25-
};
26-
const cardFooterProps = {
27-
branded,
28-
helpPageUrl: layout?.helpPageUrl,
29-
privacyPageUrl: layout?.privacyPageUrl,
30-
termsPageUrl: layout?.termsPageUrl,
31-
};
17+
const { logoProps, footerProps } = useCard();
3218

3319
return (
3420
<Card.Root banner={isDev ? LOCALIZATION_NEEDED.developmentMode : null}>
3521
<Card.Content>
3622
<Card.Header>
37-
<Card.Logo {...cardLogoProps} />
23+
<Card.Logo {...logoProps} />
3824
<Card.Title>{t('signIn.alternativeMethods.getHelp.title')}</Card.Title>
3925
<Card.Description>{t('signIn.alternativeMethods.getHelp.content')}</Card.Description>
4026
</Card.Header>
@@ -51,7 +37,7 @@ export function SignInGetHelp() {
5137
<LinkButton onClick={() => setShowHelp(false)}>{t('backButton')}</LinkButton>
5238
</Card.Actions>
5339
</Card.Content>
54-
<Card.Footer {...cardFooterProps} />
40+
<Card.Footer {...footerProps} />
5541
</Card.Root>
5642
);
5743
}

‎packages/ui/src/components/sign-in/steps/start.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export function SignInStart() {
3636
const hasConnection = enabledConnections.length > 0;
3737
const hasIdentifier = emailAddressEnabled || usernameEnabled || phoneNumberEnabled;
3838
const isDev = useDevModeWarning();
39-
const { layout } = useAppearance().parsedAppearance;
39+
const { options } = useAppearance().parsedAppearance;
4040
const { logoProps, footerProps } = useCard();
4141

4242
return (
@@ -68,7 +68,7 @@ export function SignInStart() {
6868
<GlobalError />
6969

7070
<Card.Body>
71-
{layout.socialButtonsPlacement === 'top' ? connectionsWithSeperator : null}
71+
{options.socialButtonsPlacement === 'top' ? connectionsWithSeperator : null}
7272

7373
{hasIdentifier ? (
7474
<div className='flex flex-col gap-4'>
@@ -135,7 +135,7 @@ export function SignInStart() {
135135
) : null}
136136
</div>
137137
) : null}
138-
{layout.socialButtonsPlacement === 'bottom' ? connectionsWithSeperator.reverse() : null}
138+
{options.socialButtonsPlacement === 'bottom' ? connectionsWithSeperator.reverse() : null}
139139
</Card.Body>
140140
<Card.Actions>
141141
<Common.Loading scope='submit'>

‎packages/ui/src/components/sign-in/steps/status.tsx‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import * as React from 'react';
22

33
import { LOCALIZATION_NEEDED } from '~/constants/localizations';
4-
import { useAppearance } from '~/contexts';
4+
import { useCard } from '~/hooks/use-card';
55
import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
6-
import { useDisplayConfig } from '~/hooks/use-display-config';
76
import { useLocalizations } from '~/hooks/use-localizations';
87
import * as Card from '~/primitives/card';
98
import ExclamationTrianglelg from '~/primitives/icons/exclamation-triangle-lg';
@@ -59,17 +58,9 @@ const statusIcon: Record<Status, React.ReactElement> = {
5958

6059
export function SignInStatus() {
6160
const { t } = useLocalizations();
62-
const { branded } = useDisplayConfig();
63-
const { layout } = useAppearance().parsedAppearance;
6461
const isDev = useDevModeWarning();
6562
const [status] = React.useState<Status>('loading');
66-
67-
const cardFooterProps = {
68-
branded,
69-
helpPageUrl: layout?.helpPageUrl,
70-
privacyPageUrl: layout?.privacyPageUrl,
71-
termsPageUrl: layout?.termsPageUrl,
72-
};
63+
const { footerProps } = useCard();
7364

7465
return (
7566
<Card.Root banner={isDev ? LOCALIZATION_NEEDED.developmentMode : null}>
@@ -85,7 +76,7 @@ export function SignInStatus() {
8576
</Card.Body>
8677
) : null}
8778
</Card.Content>
88-
<Card.Footer {...cardFooterProps} />
79+
<Card.Footer {...footerProps} />
8980
</Card.Root>
9081
);
9182
}

‎packages/ui/src/components/sign-up/steps/start.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export function SignUpStart() {
4949
const hasConnection = enabledConnections.length > 0;
5050
const hasIdentifier = emailAddressEnabled || usernameEnabled || phoneNumberEnabled;
5151
const isDev = useDevModeWarning();
52-
const { layout } = useAppearance().parsedAppearance;
52+
const { options } = useAppearance().parsedAppearance;
5353
const { logoProps, footerProps } = useCard();
5454

5555
return (
@@ -85,7 +85,7 @@ export function SignUpStart() {
8585
<GlobalError />
8686

8787
<Card.Body>
88-
{layout.socialButtonsPlacement === 'top' ? connectionsWithSeperator : null}
88+
{options.socialButtonsPlacement === 'top' ? connectionsWithSeperator : null}
8989

9090
{hasIdentifier ? (
9191
<div className='flex flex-col gap-4'>
@@ -139,7 +139,7 @@ export function SignUpStart() {
139139
</div>
140140
) : null}
141141

142-
{layout.socialButtonsPlacement === 'bottom' ? connectionsWithSeperator.reverse() : null}
142+
{options.socialButtonsPlacement === 'bottom' ? connectionsWithSeperator.reverse() : null}
143143

144144
{userSettings.signUp.captcha_enabled ? <SignUp.Captcha className='empty:hidden' /> : null}
145145
</Card.Body>

‎packages/ui/src/components/sign-up/steps/status.tsx‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import * as React from 'react';
22

33
import { LOCALIZATION_NEEDED } from '~/constants/localizations';
4-
import { useAppearance } from '~/contexts';
4+
import { useCard } from '~/hooks/use-card';
55
import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
6-
import { useDisplayConfig } from '~/hooks/use-display-config';
76
import { useLocalizations } from '~/hooks/use-localizations';
87
import * as Card from '~/primitives/card';
98
import ExclamationTrianglelg from '~/primitives/icons/exclamation-triangle-lg';
@@ -59,17 +58,9 @@ const statusIcon: Record<Status, React.ReactElement> = {
5958

6059
export function SignUpStatus() {
6160
const { t } = useLocalizations();
62-
const { branded } = useDisplayConfig();
63-
const { layout } = useAppearance().parsedAppearance;
6461
const isDev = useDevModeWarning();
6562
const [status] = React.useState<Status>('loading');
66-
67-
const cardFooterProps = {
68-
branded,
69-
helpPageUrl: layout?.helpPageUrl,
70-
privacyPageUrl: layout?.privacyPageUrl,
71-
termsPageUrl: layout?.termsPageUrl,
72-
};
63+
const { footerProps } = useCard();
7364

7465
return (
7566
<Card.Root banner={isDev ? LOCALIZATION_NEEDED.developmentMode : null}>
@@ -85,7 +76,7 @@ export function SignUpStatus() {
8576
</Card.Body>
8677
) : null}
8778
</Card.Content>
88-
<Card.Footer {...cardFooterProps} />
79+
<Card.Footer {...footerProps} />
8980
</Card.Root>
9081
);
9182
}

‎packages/ui/src/contexts/AppearanceContext.test.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ describe('AppearanceContext', () => {
1313
const { result } = renderHook(useAppearance, { wrapper });
1414
expect(result.current).toStrictEqual({
1515
parsedAppearance: {
16-
layout: defaultAppearance.layout,
16+
options: defaultAppearance.options,
1717
elements: fullTheme,
1818
theme: fullTheme,
1919
},
@@ -30,7 +30,7 @@ describe('AppearanceContext', () => {
3030
const { result } = renderHook(useAppearance, { wrapper });
3131
expect(result.current).toStrictEqual({
3232
parsedAppearance: {
33-
layout: defaultAppearance.layout,
33+
options: defaultAppearance.options,
3434
elements: {
3535
...fullTheme,
3636
alert__warning: {
@@ -60,7 +60,7 @@ describe('AppearanceContext', () => {
6060
const { result } = renderHook(useAppearance, { wrapper });
6161
expect(result.current).toStrictEqual({
6262
parsedAppearance: {
63-
layout: defaultAppearance.layout,
63+
options: defaultAppearance.options,
6464
elements: {
6565
...fullTheme,
6666
alert__warning: {
@@ -76,7 +76,7 @@ describe('AppearanceContext', () => {
7676
elements: {
7777
alert__warning: 'class-two class-three',
7878
},
79-
layout: {},
79+
options: {},
8080
},
8181
});
8282
});
@@ -93,7 +93,7 @@ describe('AppearanceContext', () => {
9393
const { result } = renderHook(useAppearance, { wrapper });
9494
expect(result.current).toStrictEqual({
9595
parsedAppearance: {
96-
layout: defaultAppearance.layout,
96+
options: defaultAppearance.options,
9797
elements: {
9898
...fullTheme,
9999
alert__warning: {
@@ -111,7 +111,7 @@ describe('AppearanceContext', () => {
111111
background: 'red',
112112
},
113113
},
114-
layout: {},
114+
options: {},
115115
},
116116
});
117117
});

0 commit comments

Comments
 (0)