AuthIllustration

Isometric illustration of the three portals that reacts to the sign-in state with CSS transitions only. Colours come from the theme tokens (--accent, --surface, --ink), so dark mode and every accent apply on their own. With reduced motion it rests assembled and still.

Import

import { AuthIllustration } from "@jcsoftdev/ui/auth";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/auth/auth-illustration.

Usage

<AuthIllustration state="idle" progress={0} activeIndex={0} />

Props

Prop	Type	Default	Description
look	AuthLook	Slabs	The look, a component from its own entry (Stack from @jcsoftdev/ui/auth/stack, and so on). Defaults to Slabs; looks you do not pass stay out of your bundle. For a string variant use AuthIllustrationAny from @jcsoftdev/ui/auth/looks.
state	"error" | "typing" | "success" | "idle" | "password"		What the screen is doing. Inside an AuthLayout it follows the layout’s state.
progress	number		Fill of the whole form, 0 to 1. Inside an AuthLayout it follows the layout’s progress.
activeIndex	number		Index of the portal being used (0 to 2); that slab rises above the others.
label	string		Accessible name of the image. Without it the illustration is decorative and hidden from assistive technology. Ignored by text looks (Statement): their text is the content, so they are never an img and never hidden.
headline	ReactNode		Text looks (Statement) only: the headline (a string animates word by word). Defaults to the UI string welcomeBack.
caption	ReactNode		Text looks only: a supporting line under the headline.
action	ReactNode		Text looks only: content beside the arrow pill, such as a link.

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Idle
• Typing Identifier
• Typing Password
• Failed
• Failed Settles
• Success
• Family Portal
• Labelled
• States
• Reduced Motion Keeps State
• Error Settles Without Hop
• Pointer Follows Settings

Source

packages/ui/src/auth/auth-illustration/auth-illustration.tsx