diff --git a/src/login-web-app/src/haapi-stepper/README.md b/src/login-web-app/src/haapi-stepper/README.md index e889fe34..b6c8e09e 100644 --- a/src/login-web-app/src/haapi-stepper/README.md +++ b/src/login-web-app/src/haapi-stepper/README.md @@ -25,10 +25,10 @@ The HAAPI Frontend Library is a set of React components that provides: - A built-in, full management of HAAPI flows in the frontend with minimal setup: ```tsx - + ``` - - A simple toolbox to fully customize HAAPI flows in the frontend, composed of the [HAAPI Stepper](#haapi-stepper), [HAAPI UI Step](#haapi-ui-step), and [HAAPI UI Components](#haapi-ui-components). + - A simple toolbox to fully customize HAAPI flows in the frontend, composed of the [HAAPI Stepper](#haapi-stepper), [HAAPI UI Step](#haapi-ui-step), and [HAAPI UI Components](#haapi-stepper-ui-components). ## HAAPI Stepper @@ -90,46 +90,50 @@ function App() { ### Usage -Because `HaapiStepper` does not have a UI, it can be used to build custom flow user interfaces from scratch, or it can be used in combination with the [HaapiUIStep](#haapi-ui-step) component, which provides a ready-to-use, highly customizable, HAAPI UI solution. +Because `HaapiStepper` does not have a UI, it can be used to build custom flow user interfaces from scratch, or it can be used in combination with the [HaapiStepperStepUI](#haapi-ui-step) component, which provides a ready-to-use, highly customizable, HAAPI UI solution. -Finally, the `HaapiStepper` can be used in combination with the built-in [HAAPI UI Components](#haapi-ui-components), which help create highly customized UIs while relying on some defaults. +Finally, the `HaapiStepper` can be used in combination with the built-in [HAAPI UI Components](#haapi-stepper-ui-components), which help create highly customized UIs while relying on some defaults. Check out [the HaapiStepper documentation and usage examples](./feature/stepper/HaapiStepper.tsx) ## HAAPI UI Step -The `HaapiUIStep` component provides a seamless way to implement complete HAAPI authentication flow UIs in your application, allowing extensive customization with minimal setup. +The `HaapiStepperStepUI` component provides a seamless way to implement complete HAAPI authentication flow UIs in your application, allowing extensive customization with minimal setup. ### Basic Setup ```tsx - + ``` ### Usage -Because the `HaapiUIStep` handles all possible HAAPI authentication flows with proper user interfaces (UI), it is the fastest and easiest way to get HAAPI up and running in your application. It is also highly customizable and granular, allowing you to customize some aspects while keeping the defaults for the rest. +Because the `HaapiStepperStepUI` handles all possible HAAPI authentication flows with proper user interfaces (UI), it is the fastest and easiest way to get HAAPI up and running in your application. It is also highly customizable and granular, allowing you to customize some aspects while keeping the defaults for the rest. -Check out [the HaapiUIStep documentation and usage examples](./feature/steps/HaapiUIStep.tsx). +Check out [the HaapiStepperStepUI documentation and usage examples](./feature/steps/HaapiStepperStepUI.tsx). -## HAAPI UI Components +## HAAPI Stepper UI Components -The HAAPI Frontend Library provides some common HAAPI UI elements that help create highly customized UIs while relying on some defaults. +The HAAPI Frontend Library provides some common HAAPI Stepper UI elements that help create highly customized UIs while relying on some defaults. + +### Naming convention + +The HAAPI Stepper UI components are the UI representation of the main HAAPI entities, named with a `UI` suffix: `HaapiStepperStepUI` displays/interacts with `HaapiStepperStep`, `HaapiStepperLinkUI` with `HaapiStepperLink`, and so on. Collection components use the plural form (`HaapiStepperActionsUI`, `HaapiStepperLinksUI`, `HaapiStepperMessagesUI`). ### Usage Check out documentation and usage examples in the links below: -- [Form](./feature/actions/form/Form.tsx) -* [Selector](./feature/actions/selector/HaapiSelector.tsx) -* [ClientOperation](./feature/actions/client-operation/ClientOperation.tsx) -* [Messages](./ui/messages/Messages.tsx) -* [Links](./ui/links/Links.tsx) -* [Link](./ui/links/Link.tsx) +* [HaapiStepperFormUI](./feature/actions/form/HaapiStepperFormUI.tsx) +* [HaapiStepperSelectorUI](./feature/actions/selector/HaapiStepperSelectorUI.tsx) +* [HaapiStepperClientOperationUI](./feature/actions/client-operation/HaapiStepperClientOperationUI.tsx) +* [HaapiStepperMessagesUI](./ui/messages/HaapiStepperMessagesUI.tsx) +* [HaapiStepperLinksUI](./ui/links/HaapiStepperLinksUI.tsx) +* [HaapiStepperLinkUI](./ui/links/HaapiStepperLinkUI.tsx) ### CSS Customization @@ -139,34 +143,34 @@ The HAAPI UI components reference the CSS classes listed below but do not ship a | Class | Used by | Purpose | |-------|---------|---------| -| `.haapi-stepper-selector` | `HaapiSelector` | Selector action container | +| `.haapi-stepper-selector` | `HaapiStepperSelectorUI` | Selector action container | | `.haapi-stepper-authenticator-button` | `HaapiStepperFormSubmitButton` | Authenticator-selector option button (applied automatically when the action carries `authenticatorType`); combine with `.button-` (e.g. `.button-google`) to get the per-authenticator icon color | -| `.haapi-stepper-messages` | `Messages` | Messages container | -| `.haapi-stepper-form-field-text-input` | `HaapiStepperTextFormField` | Text input fields | -| `.haapi-stepper-form-field-text-label` | `HaapiStepperTextFormField` | Form field labels | -| `.haapi-stepper-form-field-checkbox-input` | `HaapiStepperCheckboxFormField` | Checkbox inputs | -| `.haapi-stepper-form-field-checkbox-label` | `HaapiStepperCheckboxFormField` | Checkbox-specific labels | -| `.haapi-stepper-form-field-select-input` | `HaapiStepperSelectFormField` | Select inputs | -| `.haapi-stepper-form-field-select-label` | `HaapiStepperSelectFormField` | Select-specific labels | -| `.haapi-stepper-form-field-password-wrapper` | `HaapiStepperPasswordFormField` | Password input container | -| `.haapi-stepper-form-field-password-label` | `HaapiStepperPasswordFormField` | Password label | -| `.haapi-stepper-form-field-password-input` | `HaapiStepperPasswordFormField` | Password input | -| `.haapi-stepper-form-field-password-visibility-toggle` | `HaapiStepperPasswordFormField` | Password visibility toggle button | -| `.haapi-stepper-button` | `HaapiStepperForm` | Primary submit buttons | -| `.haapi-stepper-button-outline` | `HaapiStepperForm` | Outline/cancel buttons | +| `.haapi-stepper-messages` | `HaapiStepperMessagesUI` | Messages container | +| `.haapi-stepper-form-field-text-input` | `HaapiStepperTextFormFieldUI` | Text input fields | +| `.haapi-stepper-form-field-text-label` | `HaapiStepperTextFormFieldUI` | Form field labels | +| `.haapi-stepper-form-field-checkbox-input` | `HaapiStepperCheckboxFormFieldUI` | Checkbox inputs | +| `.haapi-stepper-form-field-checkbox-label` | `HaapiStepperCheckboxFormFieldUI` | Checkbox-specific labels | +| `.haapi-stepper-form-field-select-input` | `HaapiStepperSelectFormFieldUI` | Select inputs | +| `.haapi-stepper-form-field-select-label` | `HaapiStepperSelectFormFieldUI` | Select-specific labels | +| `.haapi-stepper-form-field-password-wrapper` | `HaapiStepperPasswordFormFieldUI` | Password input container | +| `.haapi-stepper-form-field-password-label` | `HaapiStepperPasswordFormFieldUI` | Password label | +| `.haapi-stepper-form-field-password-input` | `HaapiStepperPasswordFormFieldUI` | Password input | +| `.haapi-stepper-form-field-password-visibility-toggle` | `HaapiStepperPasswordFormFieldUI` | Password visibility toggle button | +| `.haapi-stepper-button` | `HaapiStepperFormUI` | Primary submit buttons | +| `.haapi-stepper-button-outline` | `HaapiStepperFormUI` | Outline/cancel buttons | | `.haapi-stepper-well` | `Well` | Styled content container | -| `.haapi-stepper-links` | `Links` | Links container | -| `.haapi-stepper-link` | `Link` | Link element | -| `.haapi-stepper-link-qr-code` | `Link` | QR code link figure wrapper | -| `.haapi-stepper-link-qr-code-title` | `Link` | QR code link figcaption | -| `.haapi-stepper-link-qr-code-button` | `Link` | QR code link expand button | +| `.haapi-stepper-links` | `HaapiStepperLinksUI` | Links container | +| `.haapi-stepper-link` | `HaapiStepperLinkUI` | Link element | +| `.haapi-stepper-link-qr-code` | `HaapiStepperLinkUI` | QR code link figure wrapper | +| `.haapi-stepper-link-qr-code-title` | `HaapiStepperLinkUI` | QR code link figcaption | +| `.haapi-stepper-link-qr-code-button` | `HaapiStepperLinkUI` | QR code link expand button | | `.haapi-stepper-link-qr-code-dialog` | `HaapiStepperQrCodeLinkDialog` | Fullscreen QR code dialog | | `.haapi-stepper-link-qr-code-dialog-image` | `HaapiStepperQrCodeLinkDialog` | Fullscreen QR code dialog image | -| `.haapi-stepper-actions` | `Actions` | Actions container | -| `.haapi-stepper-heading` | `Messages` | Heading messages | -| `.haapi-stepper-userName` | `Messages` | User name display | -| `.haapi-stepper-userCode` | `Messages` | User code display (e.g. recovery codes) | -| `.haapi-stepper-polling-progress` | `ClientOperation` | Remaining polling time indicator (e.g. recovery codes) | +| `.haapi-stepper-actions` | `HaapiStepperActionsUI` | Actions container | +| `.haapi-stepper-heading` | `HaapiStepperMessagesUI` | Heading messages | +| `.haapi-stepper-userName` | `HaapiStepperMessagesUI` | User name display | +| `.haapi-stepper-userCode` | `HaapiStepperMessagesUI` | User code display (e.g. recovery codes) | +| `.haapi-stepper-polling-progress` | `HaapiStepperClientOperationUI` | Remaining polling time indicator (e.g. recovery codes) | | `.haapi-stepper-error-boundary-fallback` | `DefaultErrorFallback` | Error boundary fallback container | diff --git a/src/login-web-app/src/haapi-stepper/feature/actions/client-operation/ClientOperation.tsx b/src/login-web-app/src/haapi-stepper/feature/actions/client-operation/HaapiStepperClientOperationUI.tsx similarity index 89% rename from src/login-web-app/src/haapi-stepper/feature/actions/client-operation/ClientOperation.tsx rename to src/login-web-app/src/haapi-stepper/feature/actions/client-operation/HaapiStepperClientOperationUI.tsx index 8b8c313a..db887366 100644 --- a/src/login-web-app/src/haapi-stepper/feature/actions/client-operation/ClientOperation.tsx +++ b/src/login-web-app/src/haapi-stepper/feature/actions/client-operation/HaapiStepperClientOperationUI.tsx @@ -12,7 +12,7 @@ import { ReactNode } from 'react'; import { HaapiStepperClientOperationAction, HaapiStepperFormAction } from '../../stepper/haapi-stepper.types'; -interface ClientOperationProps { +interface HaapiStepperClientOperationUIProps { action: HaapiStepperClientOperationAction; onAction: (action: HaapiStepperClientOperationAction | HaapiStepperFormAction) => void; showBankIdSessionTimeLeft?: boolean; @@ -37,7 +37,7 @@ interface ClientOperationProps { * const { currentStep, nextStep } = useHaapiStepper(); * * const clientOperationAction = currentStep?.dataHelpers.clientOperationActions?.[0]; * - * return { clientOperationAction && }; + * return { clientOperationAction && }; * } * * @@ -45,12 +45,12 @@ interface ClientOperationProps { * * ``` */ -export function ClientOperation({ +export function HaapiStepperClientOperationUI({ action, onAction, showBankIdSessionTimeLeft = true, render = defaultRenderClientOperation, -}: ClientOperationProps) { +}: HaapiStepperClientOperationUIProps) { return render(action, onAction, showBankIdSessionTimeLeft); } diff --git a/src/login-web-app/src/haapi-stepper/feature/actions/form/HaapiStepperFormContext.ts b/src/login-web-app/src/haapi-stepper/feature/actions/form/HaapiStepperFormContext.ts index a0e152e0..67c7245d 100644 --- a/src/login-web-app/src/haapi-stepper/feature/actions/form/HaapiStepperFormContext.ts +++ b/src/login-web-app/src/haapi-stepper/feature/actions/form/HaapiStepperFormContext.ts @@ -26,7 +26,7 @@ export function useHaapiStepperForm(): HaapiStepperFormContextValue { // eslint-disable-next-line @eslint-react/no-use-context -- useContext is preferred here over use() to keep explicit null handling const context = useContext(HaapiStepperFormContext); if (!context) { - throw new Error('useHaapiStepperForm must be used within a .'); + throw new Error('useHaapiStepperForm must be used within a .'); } return context; } diff --git a/src/login-web-app/src/haapi-stepper/feature/actions/form/HaapiStepperFormSubmitButton.spec.tsx b/src/login-web-app/src/haapi-stepper/feature/actions/form/HaapiStepperFormSubmitButton.spec.tsx index 698ee19c..5508ea71 100644 --- a/src/login-web-app/src/haapi-stepper/feature/actions/form/HaapiStepperFormSubmitButton.spec.tsx +++ b/src/login-web-app/src/haapi-stepper/feature/actions/form/HaapiStepperFormSubmitButton.spec.tsx @@ -4,10 +4,10 @@ import { render, screen } from '@testing-library/react'; import { HAAPI_FORM_ACTION_KINDS } from '../../../data-access/types/haapi-action.types'; import { HTTP_METHODS } from '../../../data-access/types/haapi-form.types'; -import { HaapiStepperForm } from './HaapiStepperForm'; import { HaapiStepperFormSubmitButton } from './HaapiStepperFormSubmitButton'; import { useHaapiStepper } from '../../stepper/HaapiStepperHook'; import { createHaapiStepperApiMock, createMockFormAction } from '../../../util/tests/mocks'; +import { HaapiStepperFormUI } from './HaapiStepperFormUI'; describe('HaapiStepperFormSubmitButton', () => { beforeEach(() => { @@ -19,7 +19,7 @@ describe('HaapiStepperFormSubmitButton', () => { it('uses action.model.actionTitle as the default label', () => { const action = createNonAuthenticatorFormAction(); - render(); + render(); expect(screen.getByTestId(submitButtonTestId)).toHaveTextContent(nonAuthenticatorActionTitle); }); @@ -31,7 +31,7 @@ describe('HaapiStepperFormSubmitButton', () => { model: { href: '/login', method: HTTP_METHODS.POST, fields: [] }, }); - render(); + render(); expect(screen.getByTestId(submitButtonTestId)).toHaveTextContent(fallbackActionTitle); }); @@ -39,7 +39,7 @@ describe('HaapiStepperFormSubmitButton', () => { it('renders no icon for a non-authenticator form action', () => { const action = createNonAuthenticatorFormAction(); - render(); + render(); expect(screen.getByTestId(submitButtonTestId).querySelector('.icon')).toBeNull(); }); @@ -47,7 +47,7 @@ describe('HaapiStepperFormSubmitButton', () => { it('applies the default haapi-stepper-button class for a non-authenticator form action', () => { const action = createNonAuthenticatorFormAction(); - render(); + render(); const button = screen.getByTestId(submitButtonTestId); expect(button).toHaveClass('haapi-stepper-button'); @@ -58,7 +58,7 @@ describe('HaapiStepperFormSubmitButton', () => { it('applies the outline class and no icon for a cancel form action', () => { const action = createCancelFormAction(); - render(); + render(); const button = screen.getByTestId(submitButtonTestId); expect(button).toHaveClass('haapi-stepper-button-outline'); @@ -71,7 +71,7 @@ describe('HaapiStepperFormSubmitButton', () => { it('renders the authenticator icon and classes', () => { const action = createAuthenticatorSelectorOption({ authenticatorType: 'google' }); - render(); + render(); const button = screen.getByTestId(submitButtonTestId); expect(button).toHaveClass('haapi-stepper-authenticator-button'); @@ -83,7 +83,7 @@ describe('HaapiStepperFormSubmitButton', () => { it('falls back to the default icon for an unknown authenticator type', () => { const action = createAuthenticatorSelectorOption({ authenticatorType: 'some-unknown-type' }); - render(); + render(); const button = screen.getByTestId(submitButtonTestId); expect(button).toHaveClass('button-some-unknown-type'); @@ -98,9 +98,9 @@ describe('HaapiStepperFormSubmitButton', () => { const action = createAuthenticatorSelectorOption({ authenticatorType: 'google' }); render( - + {() => } - + ); const button = screen.getByTestId(submitButtonTestId); @@ -114,9 +114,9 @@ describe('HaapiStepperFormSubmitButton', () => { const action = createNonAuthenticatorFormAction(); render( - + {() => } />} - + ); const button = screen.getByTestId(submitButtonTestId); @@ -128,9 +128,9 @@ describe('HaapiStepperFormSubmitButton', () => { const action = createAuthenticatorSelectorOption({ authenticatorType: 'google' }); render( - + {() => } />} - + ); const button = screen.getByTestId(submitButtonTestId); @@ -145,13 +145,13 @@ describe('HaapiStepperFormSubmitButton', () => { const action = createAuthenticatorSelectorOption({ authenticatorType: 'google' }); render( - + {() => ( Custom content )} - + ); const button = screen.getByTestId(submitButtonTestId); @@ -167,9 +167,9 @@ describe('HaapiStepperFormSubmitButton', () => { const action = createAuthenticatorSelectorOption({ authenticatorType: 'google' }); render( - + {() => } - + ); const button = screen.getByTestId(submitButtonTestId); @@ -194,9 +194,9 @@ describe('HaapiStepperFormSubmitButton', () => { } render( - + {() => } - + ); expect(screen.getByTestId(submitButtonTestId)).toHaveFocus(); @@ -208,7 +208,7 @@ describe('HaapiStepperFormSubmitButton', () => { const action = createAuthenticatorSelectorOption({ authenticatorType: 'google' }); render( - + {() => ( { name="submit" /> )} - + ); const button = screen.getByTestId(submitButtonTestId); diff --git a/src/login-web-app/src/haapi-stepper/feature/actions/form/HaapiStepperForm.spec.tsx b/src/login-web-app/src/haapi-stepper/feature/actions/form/HaapiStepperFormUI.spec.tsx similarity index 94% rename from src/login-web-app/src/haapi-stepper/feature/actions/form/HaapiStepperForm.spec.tsx rename to src/login-web-app/src/haapi-stepper/feature/actions/form/HaapiStepperFormUI.spec.tsx index 77c0107b..374c1cd4 100644 --- a/src/login-web-app/src/haapi-stepper/feature/actions/form/HaapiStepperForm.spec.tsx +++ b/src/login-web-app/src/haapi-stepper/feature/actions/form/HaapiStepperFormUI.spec.tsx @@ -1,7 +1,7 @@ import { describe, it, expect, vi, beforeEach } from 'vitest'; import { render, screen, waitFor } from '@testing-library/react'; -import { HaapiStepperForm } from './HaapiStepperForm'; +import { HaapiStepperFormUI } from './HaapiStepperFormUI'; import { HAAPI_FORM_FIELDS, HTTP_METHODS } from '../../../data-access/types/haapi-form.types'; import { HAAPI_FORM_ACTION_KINDS } from '../../../data-access/types/haapi-action.types'; import { HAAPI_PROBLEM_STEPS } from '../../../data-access/types/haapi-step.types'; @@ -23,7 +23,7 @@ import userEvent from '@testing-library/user-event'; /* eslint-disable @typescript-eslint/no-unsafe-assignment */ /* eslint-disable @typescript-eslint/no-unsafe-argument */ -describe('HaapiStepperForm', () => { +describe('HaapiStepperFormUI', () => { let user: ReturnType; beforeEach(() => { @@ -37,7 +37,7 @@ describe('HaapiStepperForm', () => { const action = createLoginFormAction(); const onSubmit = vi.fn(); - render(); + render(); expect(screen.getByTestId(formFieldTestId(HAAPI_FORM_FIELDS.TEXT, usernameFieldName))).toBeInTheDocument(); expect(screen.getByTestId(formFieldTestId(HAAPI_FORM_FIELDS.PASSWORD, passwordFieldName))).toBeInTheDocument(); @@ -50,7 +50,7 @@ describe('HaapiStepperForm', () => { const action = createLoginFormAction(); const onSubmit = vi.fn(); - render(); + render(); const usernameInput = screen.getByTestId(formFieldTestId(HAAPI_FORM_FIELDS.TEXT, usernameFieldName)); const passwordInput = screen.getByTestId(formFieldTestId(HAAPI_FORM_FIELDS.PASSWORD, passwordFieldName)); @@ -91,7 +91,7 @@ describe('HaapiStepperForm', () => { }, }; - const { rerender } = render(); + const { rerender } = render(); expect(screen.queryByTestId(validationErrorTestId)).not.toBeInTheDocument(); @@ -99,7 +99,7 @@ describe('HaapiStepperForm', () => { await user.click(screen.getByTestId(submitButtonTestId)); - rerender(); + rerender(); await waitFor(() => { expect(screen.getAllByTestId(validationErrorTestId)).toHaveLength(2); @@ -112,7 +112,7 @@ describe('HaapiStepperForm', () => { const action = createLoginFormAction(); const onSubmit = vi.fn(); - render(); + render(); // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion const passwordInput = screen.getByTestId( @@ -148,7 +148,7 @@ describe('HaapiStepperForm', () => { }); const onSubmit = vi.fn(); - render(); + render(); expect(screen.getByTestId(formFieldTestId(HAAPI_FORM_FIELDS.TEXT, usernameFieldName))).toHaveAttribute( 'autocomplete', @@ -164,7 +164,7 @@ describe('HaapiStepperForm', () => { const action = createLoginFormAction(); const onSubmit = vi.fn(); - render(); + render(); expect(screen.getByTestId(formFieldTestId(HAAPI_FORM_FIELDS.TEXT, usernameFieldName))).toHaveAttribute( 'autocomplete', @@ -192,7 +192,7 @@ describe('HaapiStepperForm', () => { }; render( - { }; render( - { }; render( - { }; render( - { ); render( - { const onSubmit = vi.fn(); render( - + {({ fields }) => ( <> {fields.map(field => { @@ -402,7 +402,7 @@ describe('HaapiStepperForm', () => { })} )} - + ); expect(screen.getByLabelText(customizedUsernameLabel)).toBeInTheDocument(); @@ -416,7 +416,7 @@ describe('HaapiStepperForm', () => { const onSubmit = vi.fn(); render( - + {({ fields }) => ( <> {fields.map(field => ( @@ -427,7 +427,7 @@ describe('HaapiStepperForm', () => { )} - + ); const usernameInput = screen.getByTestId(formFieldTestId(HAAPI_FORM_FIELDS.TEXT, usernameFieldName)); @@ -448,7 +448,7 @@ describe('HaapiStepperForm', () => { const onSubmit = vi.fn(); render( - + {({ fields }) => ( <> {fields.map(field => ( @@ -459,7 +459,7 @@ describe('HaapiStepperForm', () => { )} - + ); const usernameInput = screen.getByTestId(formFieldTestId(HAAPI_FORM_FIELDS.TEXT, usernameFieldName)); @@ -480,7 +480,7 @@ describe('HaapiStepperForm', () => { const onSubmit = vi.fn(); render( - + {({ fields, formState }) => { const usernameField = fields.find(field => field.type === HAAPI_FORM_FIELDS.USERNAME)!; const otherVisibleFields = fields.filter(field => field !== usernameField); @@ -508,7 +508,7 @@ describe('HaapiStepperForm', () => { ); }} - + ); const customInput = screen.getByLabelText(customUsernameLabelWithSuffix); @@ -540,7 +540,7 @@ describe('HaapiStepperForm', () => { const onSubmit = vi.fn(); render( - + {({ fields }) => ( <> {fields @@ -553,7 +553,7 @@ describe('HaapiStepperForm', () => { )} - + ); expect( @@ -577,7 +577,7 @@ describe('HaapiStepperForm', () => { const onSubmit = vi.fn(); render( - + {({ fields }) => ( <> {fields.map(field => ( @@ -594,7 +594,7 @@ describe('HaapiStepperForm', () => { )} - + ); expect(screen.getByTestId(composedExtraElementTestId)).toHaveTextContent(helperTextBetweenFields); @@ -618,7 +618,7 @@ describe('HaapiStepperForm', () => { }; render( - + {({ fields }) => ( <> {fields.map(field => ( @@ -629,7 +629,7 @@ describe('HaapiStepperForm', () => { )} - + ); const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true); diff --git a/src/login-web-app/src/haapi-stepper/feature/actions/form/HaapiStepperForm.tsx b/src/login-web-app/src/haapi-stepper/feature/actions/form/HaapiStepperFormUI.tsx similarity index 91% rename from src/login-web-app/src/haapi-stepper/feature/actions/form/HaapiStepperForm.tsx rename to src/login-web-app/src/haapi-stepper/feature/actions/form/HaapiStepperFormUI.tsx index a30adb99..2e66eb18 100644 --- a/src/login-web-app/src/haapi-stepper/feature/actions/form/HaapiStepperForm.tsx +++ b/src/login-web-app/src/haapi-stepper/feature/actions/form/HaapiStepperFormUI.tsx @@ -26,7 +26,7 @@ import { useHaapiStepperFormState } from './HaapiStepperFormHook'; import { HaapiStepperFormSubmitButton } from './HaapiStepperFormSubmitButton'; import { defaultHaapiStepperFormFieldElementFactory } from './fields/defaultHaapiStepperFormFieldElementFactory'; -interface HaapiStepperFormProps { +interface HaapiStepperFormUIProps { action: HaapiStepperFormAction; onSubmit: HaapiStepperNextStep; formFieldRenderInterceptor?: HaapiStepperFormFieldRenderInterceptor; @@ -40,16 +40,16 @@ interface HaapiStepperFormProps { * ## BUILT-IN HAAPI FORM ACTION SUPPORT * * Renders a HAAPI form action inside the stepper. Tests in - * `haapi-stepper/feature/actions/form/HaapiStepperForm.spec.tsx` cover the supported usage patterns: + * `haapi-stepper/feature/actions/form/HaapiStepperFormUI.spec.tsx` cover the supported usage patterns: * * @example * ```tsx * const onSubmit: HaapiStepperNextStep = (action, payload) => nextStep(action, payload); * - * + * * ``` * - * By default, the HaapiStepperForm: + * By default, the HaapiStepperFormUI: * * - Automatically renders all non-hidden fields with built-in HAAPI field components. * - Keeps hidden fields in the submission payload without rendering them. @@ -99,7 +99,7 @@ interface HaapiStepperFormProps { * return field; * }; * - * + * * {({ fields, formState }) => { * const delegateToDefaultRendering = currentStep.metadata?.viewName !== 'authenticator/html-form/authenticate/get'; * @@ -137,7 +137,7 @@ interface HaapiStepperFormProps { * <> *
* Login - * + * *