From 28917bbee241abf054ccea617c0accbcd01cb5f9 Mon Sep 17 00:00:00 2001 From: Aleix Suau Date: Tue, 12 May 2026 14:36:31 +0200 Subject: [PATCH] IS-5161 Expand HaapiStepper UI components list in README. --- src/login-web-app/src/haapi-stepper/README.md | 33 +++++++++++++++---- 1 file changed, 27 insertions(+), 6 deletions(-) diff --git a/src/login-web-app/src/haapi-stepper/README.md b/src/login-web-app/src/haapi-stepper/README.md index b6c8e09..bb8e493 100644 --- a/src/login-web-app/src/haapi-stepper/README.md +++ b/src/login-web-app/src/haapi-stepper/README.md @@ -114,6 +114,19 @@ Because the `HaapiStepperStepUI` handles all possible HAAPI authentication flows Check out [the HaapiStepperStepUI documentation and usage examples](./feature/steps/HaapiStepperStepUI.tsx). +### ViewName built-in UIs + +Some HAAPI viewNames (`step.metadata.viewName`) need a UI that the generic step rendering can't deliver well. For example, the **BankID** screen needs to render a spinner while the polling status is `pending`, and lifts the QR code above the actions. + +To handle this kind of view, the library ships **viewName built-in UIs** that automatically take over when the matching `step.metadata.viewName` arrives from the server. + +#### The `enableViewNameBuiltInUIs` prop + +`` accepts a +`enableViewNameBuiltInUIs?: HaapiStepperViewNameBuiltInUI[] | boolean` prop that opts in to which viewName built-in UIs are active. It is **opt-in**: when the prop is omitted (or `false`), no viewName built-in UIs are applied and every step renders through the generic render pipeline. Pass `true` to enable all known built-ins, or an array of built-in view names (`HaapiStepperViewNameBuiltInUI[]`) to pin a specific subset. + +Check out documentation and usage examples in [`HaapiStepperStepUI`](./feature/steps/HaapiStepperStepUI.tsx), and the test use cases in [`HaapiStepperStepUI.spec.tsx`](./feature/steps/HaapiStepperStepUI.spec.tsx) (`describe('ViewName built-in UIs Rendering')`) for more details. + ## HAAPI Stepper UI Components @@ -128,12 +141,20 @@ The HAAPI Stepper UI components are the UI representation of the main HAAPI enti Check out documentation and usage examples in the links below: -* [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) +* [HaapiStepperStepUI](./feature/steps/HaapiStepperStepUI.tsx) + * [HaapiStepperActionsUI](./ui/actions/HaapiStepperActionsUI.tsx) + * [HaapiStepperFormUI](./feature/actions/form/HaapiStepperFormUI.tsx) + * [HaapiStepperFormFieldUI](./feature/actions/form/fields/HaapiStepperFormFieldUI.tsx) + * [HaapiStepperTextFormFieldUI](./feature/actions/form/fields/HaapiStepperTextFormFieldUI.tsx) + * [HaapiStepperPasswordFormFieldUI](./feature/actions/form/fields/HaapiStepperPasswordFormFieldUI.tsx) + * [HaapiStepperCheckboxFormFieldUI](./feature/actions/form/fields/HaapiStepperCheckboxFormFieldUI.tsx) + * [HaapiStepperSelectFormFieldUI](./feature/actions/form/fields/HaapiStepperSelectFormFieldUI.tsx) + * [HaapiStepperSelectorUI](./feature/actions/selector/HaapiStepperSelectorUI.tsx) + * [HaapiStepperClientOperationUI](./feature/actions/client-operation/HaapiStepperClientOperationUI.tsx) + * [HaapiStepperMessagesUI](./ui/messages/HaapiStepperMessagesUI.tsx) + * [HaapiStepperMessageUI](./ui/messages/HaapiStepperMessageUI.tsx) + * [HaapiStepperLinksUI](./ui/links/HaapiStepperLinksUI.tsx) + * [HaapiStepperLinkUI](./ui/links/HaapiStepperLinkUI.tsx) ### CSS Customization