IS-11346: render page symbols for HAAPI steps#210
Merged
aleixsuau merged 28 commits intoJun 2, 2026
Merged
Conversation
Adds the LWA-side rendering of `theme.pageSymbols`. The `PageSymbol`
component resolves the symbol URL for the current step's HAAPI
`viewName` against the bootstrap configuration's `pageSymbols` map:
1. exact match in `views[viewName]`
2. plugin-type match in `plugins[<pluginType>]` (extracted from the
`authenticator | authentication-action | consentor` viewName format)
3. fallback to `default`
4. otherwise renders nothing
Wired into `HaapiStepperStepUI` so the symbol renders above the step's
messages/actions/links, with a slot in `ViewNameBuiltInUIProps` so the
BankID built-in places it above the lifted QR link.
Contributor
There was a problem hiding this comment.
Pull request overview
Adds client-side support for rendering per-step icons ("page symbols") in the HAAPI stepper, resolving an image from the new theme.pageSymbols bootstrap config based on the current step's viewName. The symbol is rendered above the step's messages/actions/links in both the generic shell and the BankID built-in UI.
Changes:
- Adds
PageSymbolsto the bootstrap config plus aresolvePageSymbolutil implementing exact-view → plugin-type → default precedence. - Introduces a
<PageSymbol>component and renders it at the top ofHaapiStepperStepUI, threading it as a newpageSymbolElementslot intoViewNameBuiltInUIProps/BankIdViewNameBuiltInUI. - Adds CSS for
.haapi-stepper-page-symboland unit tests for the resolver, the component, and the step-level placement (including BankID).
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| src/login-web-app/src/haapi-stepper/data-access/bootstrap-configuration.ts | Adds PageSymbols type and optional theme.pageSymbols field. |
| src/login-web-app/src/shared/util/resolve-page-symbol.ts | Implements view/plugin/default resolution. |
| src/login-web-app/src/shared/ui/PageSymbol.tsx | New component that reads theme config and renders the symbol image. |
| src/login-web-app/src/shared/ui/PageSymbol.spec.tsx | Unit tests covering precedence and no-render cases. |
| src/login-web-app/src/shared/util/css/styles.css | Adds .haapi-stepper-page-symbol styling. |
| src/login-web-app/src/haapi-stepper/feature/viewnames/typings.ts | Adds pageSymbolElement to ViewNameBuiltInUIProps. |
| src/login-web-app/src/haapi-stepper/feature/viewnames/BankIdViewNameBuiltInUI.tsx | Renders the page symbol above the lifted QR link. |
| src/login-web-app/src/haapi-stepper/feature/steps/HaapiStepperStepUI.tsx | Creates pageSymbolElement and renders it before other slots. |
| src/login-web-app/src/haapi-stepper/feature/steps/HaapiStepperStepUI.spec.tsx | Wraps tests in AppConfigContext and adds page-symbol placement tests. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Adds the LWA-side rendering of `theme.pageSymbols`. The `PageSymbol`
component resolves the symbol URL for the current step's HAAPI
`viewName` against the bootstrap configuration's `pageSymbols` map:
1. exact match in `views[viewName]`
2. plugin-type match in `plugins[<pluginType>]` (extracted from the
`authenticator | authentication-action | consentor` viewName format)
3. fallback to `default`
4. otherwise renders nothing
Wired into `HaapiStepperStepUI` so the symbol renders above the step's
messages/actions/links, with a slot in `ViewNameBuiltInUIProps` so the
BankID built-in places it above the lifted QR link.
…b.com:curityio/ui-kit into feature/IS-5161/IS-11346-display-page-symbols
vahag-curity
approved these changes
Jun 1, 2026
aleixsuau
changed the base branch from
fix/integration/IS-5161/login-web-app/IS-11345-display-logos
to
integration/IS-5161/login-web-app
Adds the LWA-side rendering of `theme.pageSymbols`. The `PageSymbol`
component resolves the symbol URL for the current step's HAAPI
`viewName` against the bootstrap configuration's `pageSymbols` map:
1. exact match in `views[viewName]`
2. plugin-type match in `plugins[<pluginType>]` (extracted from the
`authenticator | authentication-action | consentor` viewName format)
3. fallback to `default`
4. otherwise renders nothing
Wired into `HaapiStepperStepUI` so the symbol renders above the step's
messages/actions/links, with a slot in `ViewNameBuiltInUIProps` so the
BankID built-in places it above the lifted QR link.
luisgoncalves
approved these changes
Jun 1, 2026
Contributor
|
Commit list looks a bit funky. Could be good to improve, but maybe it's harmless. |
…b.com:curityio/ui-kit into feature/IS-5161/IS-11346-display-page-symbols
urre
approved these changes
Jun 2, 2026
luisgoncalves
approved these changes
Jun 2, 2026
Contributor
luisgoncalves
left a comment
luisgoncalves
left a comment
There was a problem hiding this comment.
Latest version LGTM
…b.com:curityio/ui-kit into feature/IS-5161/IS-11346-display-page-symbols
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
IS-11346-dev-mock.patch
Jira: https://curity.atlassian.net/browse/IS-11346
Summary
LWA-side rendering of
theme.pageSymbols(which IS-11318 wires up server-side). A new<PageSymbol>component resolves a symbol URL for the current step's HAAPIviewNameand renders it above the step's messages/actions/links.Resolution order in
resolvePageSymbol:pageSymbols.views[viewName]pageSymbols.plugins[<pluginType>]—<pluginType>is the middle segment of viewNames shapedauthenticator | authentication-action | consentor / <pluginType> / …pageSymbols.defaultThe BankID built-in places the symbol above the lifted QR link via a new
pageSymbolElementslot inViewNameBuiltInUIProps.To test, apply the following patch file and change
DEV_PAGE_SYMBOLS.viewsandDEV_PAGE_SYMBOLS.pluginsto emulate the use cases.IS-11346-dev-mock.patch