Custom and net-new: SpinnerSequence
Everything in this proposal that is not plain PDS v2. npm run check:tokens reads this file: each net-new class, custom CSS variable and raw value found in the code must appear here in backticks.
Net-new components
.pds-spinner-sequence— a Spinner that walks through a list of steps, each with its own text, then ends on an illustration and a final text.- Parts and modifiers:
.pds-spinner-sequence__illustration,.pds-spinner-sequence__label,.pds-spinner-sequence__spinner,.pds-spinner-sequence__stage,.pds-spinner-sequence__text,.pds-spinner-sequence--complete
- Parts and modifiers:
Additions to existing PDS components
None. It composes the Spinner (unchanged) and the Illustration.
Net-new props
All. activeStep, defaultDuration, finalLabel, illustration, illustrationName, onComplete, size, steps (each step: label, duration). One new illustration name, task, for the existing Illustration.
Custom CSS variables
--sequence-fade— set on.pds-spinner-sequence; the cross-fade time (--pds-animation-duration-reveal).--sequence-size— set inline on.pds-spinner-sequence; the spinner size, which the illustration is drawn at too.
Raw values kept on purpose
None.