Skip to content

Commit 9e0fafe

Browse files
LauraBeatrisLauraBeatris
committed
Add support for inner steps
1 parent 18f5bfd commit 9e0fafe

12 files changed

Lines changed: 381 additions & 106 deletions

File tree

‎packages/ui/src/components/ConfigureSSO/constants.ts‎

Lines changed: 41 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,63 @@
11
import type { WizardStep } from '@/elements/Wizard';
22

33
import type { ConfigureSSOData } from './ConfigureSSOContext';
4-
import { Configure, ProvideEmail, TestStep, VerifyDomain } from './steps';
4+
import {
5+
ConfigureCreateApp,
6+
ConfigureMapAttributes,
7+
ConfirmationStep,
8+
ProvideEmail,
9+
TestStep,
10+
VerifyDomain,
11+
} from './steps';
512

613
export const CONFIGURE_SSO_STEPS: ReadonlyArray<WizardStep<ConfigureSSOData>> = [
714
{
8-
id: 'provide-email',
9-
path: 'provide-email',
10-
label: 'Provide email',
11-
Component: ProvideEmail,
12-
// Skip this step when the user already has an email address
13-
shouldSkip: data => data.email !== '',
14-
},
15-
{
16-
id: 'verify-domain',
17-
path: 'verify-domain',
15+
id: 'verify-email-domain',
16+
path: 'verify-email-domain',
1817
label: 'Verify domain',
19-
Component: VerifyDomain,
2018
isOptional: true,
21-
// Skip this step when the primary email address domain is already verified
19+
// Skip this step when there's a primary email address domain already verified
2220
shouldSkip: data => data.domainAlreadyVerified,
21+
steps: [
22+
{
23+
id: 'provide-email',
24+
path: 'provide-email',
25+
Component: ProvideEmail,
26+
},
27+
{
28+
id: 'verify-domain',
29+
path: 'verify-domain',
30+
Component: VerifyDomain,
31+
},
32+
],
2333
},
2434
{
2535
id: 'configure',
2636
path: 'configure',
2737
label: 'Configure',
28-
Component: Configure,
38+
steps: [
39+
{
40+
id: 'create-app',
41+
path: 'create-app',
42+
Component: ConfigureCreateApp,
43+
},
44+
{
45+
id: 'map-attributes',
46+
path: 'map-attributes',
47+
Component: ConfigureMapAttributes,
48+
},
49+
],
2950
},
3051
{
3152
id: 'test',
3253
path: 'test',
3354
label: 'Test',
3455
Component: TestStep,
3556
},
57+
{
58+
id: 'confirmation',
59+
path: 'confirmation',
60+
label: 'Confirmation',
61+
Component: ConfirmationStep,
62+
},
3663
];

packages/ui/src/components/ConfigureSSO/steps/ConfigureStep.tsx renamed to packages/ui/src/components/ConfigureSSO/steps/ConfigureCreateAppStep.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useRegisterContinueAction, useWizard } from '@/elements/Wizard';
33

44
import { StepLayout } from './StepLayout';
55

6-
export const Configure = (): JSX.Element => {
6+
export const ConfigureCreateApp = (): JSX.Element => {
77
const { goNext } = useWizard();
88

99
useRegisterContinueAction({
@@ -15,7 +15,7 @@ export const Configure = (): JSX.Element => {
1515
title='Configure Okta Workforce'
1616
subtitle='Create a new enterprise application in your Okta Dashboard.'
1717
>
18-
<Text as='p'>Configuration form goes here.</Text>
18+
<Text as='p'>UI goes here</Text>
1919
</StepLayout>
2020
);
2121
};

‎packages/ui/src/components/ConfigureSSO/steps/ConfigureMapAttributesStep.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { Text } from '@/customizables';
2+
import { useRegisterContinueAction, useWizard } from '@/elements/Wizard';
3+
4+
import { StepLayout } from './StepLayout';
5+
6+
export const ConfigureMapAttributes = (): JSX.Element => {
7+
const { goNext } = useWizard();
8+
9+
useRegisterContinueAction({
10+
handler: () => goNext(),
11+
});
12+
13+
return (
14+
<StepLayout
15+
title='Map attributes'
16+
subtitle='Map identity provider attributes to Clerk user properties.'
17+
>
18+
<Text as='p'>UI goes here</Text>
19+
</StepLayout>
20+
);
21+
};

‎packages/ui/src/components/ConfigureSSO/steps/ConfirmationStep.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Text } from '@/customizables';
2+
3+
import { StepLayout } from './StepLayout';
4+
5+
export const ConfirmationStep = (): JSX.Element => {
6+
return (
7+
<StepLayout>
8+
<Text
9+
as='p'
10+
variant='body'
11+
sx={theme => ({ color: theme.colors.$colorMutedForeground })}
12+
>
13+
UI goes here
14+
</Text>
15+
</StepLayout>
16+
);
17+
};

‎packages/ui/src/components/ConfigureSSO/steps/ProvideEmailStep.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,8 @@ export const ProvideEmail = (): JSX.Element => {
3232

3333
return (
3434
<StepLayout
35-
title='Configure SSO'
36-
subtitle='Create a new enterprise application in your Okta Dashboard'
35+
title='Verify your domain'
36+
subtitle='Verify the domain you want to enable the enterprise connection on.'
3737
>
3838
<Flex
3939
direction='col'

‎packages/ui/src/components/ConfigureSSO/steps/StepLayout.tsx‎

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,20 @@ import { Col, Flex, Heading, Text } from '@/customizables';
44
import { Wizard } from '@/elements/Wizard';
55

66
interface StepLayoutProps {
7-
title: React.ReactNode;
7+
title?: React.ReactNode;
88
subtitle?: React.ReactNode;
9-
/**
10-
* If true, renders the "Step X / Y" badge on the title row.
11-
* Defaults to true.
12-
*/
13-
showStepIndicator?: boolean;
149
children: React.ReactNode;
1510
}
1611

1712
/**
1813
* Renders the title row (with the Wizard's Step X/Y badge) on top, a divider, and the step body
1914
* underneath. Each individual step file owns the body content.
15+
*
16+
* The Step X/Y badge is rendered via `Wizard.StepIndicator`, which
17+
* self-hides on steps that have no inner sub-steps — so consumers
18+
* never have to opt in/out manually.
2019
*/
21-
export const StepLayout = ({ title, subtitle, showStepIndicator = true, children }: StepLayoutProps): JSX.Element => {
20+
export const StepLayout = ({ title, subtitle, children }: StepLayoutProps): JSX.Element => {
2221
return (
2322
<Col
2423
sx={{
@@ -31,32 +30,34 @@ export const StepLayout = ({ title, subtitle, showStepIndicator = true, children
3130
justify='between'
3231
sx={theme => ({
3332
gap: theme.space.$4,
34-
padding: `${theme.space.$5} ${theme.space.$6}`,
33+
padding: theme.space.$5,
3534
})}
3635
>
37-
<Col sx={theme => ({ gap: theme.space.$1, minWidth: 0 })}>
38-
<Heading
39-
textVariant='h3'
40-
sx={theme => ({ color: theme.colors.$colorForeground, fontSize: theme.fontSizes.$lg })}
41-
>
42-
{title}
43-
</Heading>
44-
{subtitle ? (
45-
<Text
46-
as='p'
47-
variant='body'
48-
sx={theme => ({ color: theme.colors.$colorMutedForeground })}
36+
{title ? (
37+
<Col sx={theme => ({ gap: theme.space.$1, minWidth: 0 })}>
38+
<Heading
39+
textVariant='h3'
40+
sx={theme => ({ color: theme.colors.$colorForeground, fontSize: theme.fontSizes.$lg })}
4941
>
50-
{subtitle}
51-
</Text>
52-
) : null}
53-
</Col>
54-
{showStepIndicator ? <Wizard.StepIndicator /> : null}
42+
{title}
43+
</Heading>
44+
{subtitle ? (
45+
<Text
46+
as='p'
47+
variant='body'
48+
sx={theme => ({ color: theme.colors.$colorMutedForeground })}
49+
>
50+
{subtitle}
51+
</Text>
52+
) : null}
53+
</Col>
54+
) : null}
55+
<Wizard.StepIndicator />
5556
</Flex>
5657
<Col
5758
sx={theme => ({
5859
flex: 1,
59-
padding: theme.space.$6,
60+
paddingInline: theme.space.$5,
6061
overflowY: 'auto',
6162
})}
6263
>

‎packages/ui/src/components/ConfigureSSO/steps/TestConfigurationStep.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import { StepLayout } from './StepLayout';
55
export const TestConfigurationStep = (): JSX.Element => {
66
return (
77
<StepLayout
8-
title='Test your connection'
9-
subtitle='Make sure everything is wired up before you finish.'
8+
title='Test your SSO connection'
9+
subtitle='Test your SSO configuration to verify you can successfully authenticate via your identity provider'
1010
>
1111
<Col
1212
sx={theme => ({
@@ -21,8 +21,7 @@ export const TestConfigurationStep = (): JSX.Element => {
2121
variant='body'
2222
sx={theme => ({ color: theme.colors.$colorMutedForeground })}
2323
>
24-
Test step UI goes here. The shared &ldquo;Continue&rdquo; button is hidden on the last step; use a step-local
25-
primary action to finish.
24+
UI goes here
2625
</Text>
2726
</Col>
2827
</StepLayout>

‎packages/ui/src/components/ConfigureSSO/steps/index.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
export { Configure } from './ConfigureStep';
1+
export { ConfigureCreateApp } from './ConfigureCreateAppStep';
2+
export { ConfigureMapAttributes } from './ConfigureMapAttributesStep';
3+
export { ConfirmationStep } from './ConfirmationStep';
24
export { ProvideEmail } from './ProvideEmailStep';
35
export { StepLayout } from './StepLayout';
46
export { TestConfigurationStep as TestStep } from './TestConfigurationStep';

0 commit comments

Comments
 (0)