From aec960d3795a22f436b969175f826ce19c103b1f Mon Sep 17 00:00:00 2001
From: Iago Dahlem Lorensini <iagodahlemlorensini@gmail.com>
Date: Thu, 7 May 2026 17:00:35 -0300
Subject: [PATCH] feat(ui): add provider selection grid to ConfigureSSO step

Replace placeholder text in SelectProviderStep with a SAML provider selection UI featuring Okta Workforce and Custom SAML Provider cards. Introduces a ProviderCard component with selected state styling and adjusts Step header alignment to top-align with refined spacing.
---
 .../components/ConfigureSSO/elements/Step.tsx |  4 +-
 .../ConfigureSSO/steps/SelectProviderStep.tsx | 92 ++++++++++++++++++-
 2 files changed, 91 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/components/ConfigureSSO/elements/Step.tsx b/packages/ui/src/components/ConfigureSSO/elements/Step.tsx
index 22471d05357..f675394a50c 100644
--- a/packages/ui/src/components/ConfigureSSO/elements/Step.tsx
+++ b/packages/ui/src/components/ConfigureSSO/elements/Step.tsx
@@ -54,11 +54,11 @@ const Header = ({ title, description, children }: StepHeaderProps): JSX.Element
       })}
     >
       <Flex
-        align='center'
+        align='start'
         justify='between'
         sx={theme => ({ gap: theme.space.$4 })}
       >
-        <Col sx={theme => ({ gap: theme.space.$1x5, minWidth: 0 })}>
+        <Col sx={theme => ({ gap: theme.space.$2, minWidth: 0 })}>
           <Heading
             textVariant='h3'
             sx={theme => ({ color: theme.colors.$colorForeground, fontSize: theme.fontSizes.$lg })}
diff --git a/packages/ui/src/components/ConfigureSSO/steps/SelectProviderStep.tsx b/packages/ui/src/components/ConfigureSSO/steps/SelectProviderStep.tsx
index 5cf9fb888b8..cf9d01387c2 100644
--- a/packages/ui/src/components/ConfigureSSO/steps/SelectProviderStep.tsx
+++ b/packages/ui/src/components/ConfigureSSO/steps/SelectProviderStep.tsx
@@ -1,4 +1,6 @@
-import { descriptors, Flow, Text } from '@/customizables';
+import type { PropsWithChildren } from 'react';
+
+import { Box, Col, descriptors, Flow, Grid, SimpleButton, Text } from '@/customizables';
 
 import { Step } from '../elements/Step';
 import { useWizard } from '../elements/Wizard';
@@ -18,8 +20,42 @@ export const SelectProviderStep = (): JSX.Element => {
         />
 
         <Step.Body>
-          <Step.Section>
-            <Text>UI goes here</Text>
+          <Step.Section sx={theme => ({ gap: theme.space.$5 })}>
+            <Col sx={theme => ({ gap: theme.space.$1x5 })}>
+              <Text
+                as='p'
+                variant='subtitle'
+                sx={theme => ({ color: theme.colors.$colorForeground })}
+              >
+                Select your identity provider
+              </Text>
+
+              <Text
+                as='p'
+                variant='body'
+                sx={theme => ({ color: theme.colors.$colorMutedForeground })}
+              >
+                We&apos;ll guide you through the detailed setup process next.
+              </Text>
+            </Col>
+
+            <Col sx={theme => ({ gap: theme.space.$3 })}>
+              <Text
+                as='label'
+                variant='subtitle'
+                sx={theme => ({ color: theme.colors.$colorForeground })}
+              >
+                SAML
+              </Text>
+
+              <Grid
+                gap={3}
+                columns={2}
+              >
+                <ProviderCard>Okta Workforce</ProviderCard>
+                <ProviderCard>Custom SAML Provider</ProviderCard>
+              </Grid>
+            </Col>
           </Step.Section>
         </Step.Body>
 
@@ -37,3 +73,53 @@ export const SelectProviderStep = (): JSX.Element => {
     </Flow.Part>
   );
 };
+
+type ProviderCardProps = PropsWithChildren<{
+  isSelected?: boolean;
+  onClick?: () => void;
+}>;
+
+const ProviderCard = ({ isSelected, onClick, children }: ProviderCardProps): JSX.Element => {
+  return (
+    <SimpleButton
+      variant='outline'
+      block
+      onClick={onClick}
+      aria-pressed={isSelected}
+      sx={theme => ({
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: theme.space.$2,
+        height: theme.sizes.$32,
+        padding: theme.space.$1x5,
+        backgroundColor: theme.colors.$colorBackground,
+        ...(isSelected
+          ? {
+              boxShadow: `0 0 0 4px ${theme.colors.$colorRing}`,
+            }
+          : {}),
+      })}
+    >
+      {/* TODO: add provider icons */}
+      <Box
+        as='span'
+        aria-hidden
+        sx={theme => ({
+          width: theme.sizes.$8,
+          height: theme.sizes.$8,
+          borderRadius: theme.radii.$md,
+          backgroundColor: theme.colors.$primary500,
+        })}
+      />
+
+      <Text
+        as='span'
+        variant='body'
+        sx={theme => ({ color: theme.colors.$colorForeground })}
+      >
+        {children}
+      </Text>
+    </SimpleButton>
+  );
+};