steps
Display Step
These are steps which don't require a choice from the user. This step type includes media, or content displayed to the user, including copy, image, video or other media. A second type is a countdown timer to provide user feedback as an action is occurring.
Media
This type of display step would be used to present static visuals to the user. For example, a series of setup instructions for installing an Amazon Firestick.
Changelog
Notable changes to this step or component will be documented here.
### v1.1.0
- Added glossary modal and js required to activate it. Glossary modal can now be triggered by adding a
data-popup-triggerto the link tag. See the code preview for further explanation.
Countdown timer
Displays an unskippable countdown timer to the user that visually demonstrates a length of time to wait until progressing to the next step.
Changelog
Notable changes to this step or component will be documented here.
### v1.0.2 - 29/10/2020
- Amended javascript to look for a true or false on the
data-disabledattribute for the button.
v1.0.1 - 24/09/2020
- Updated animations to remove the disappearing act
Updating the timer
Updating the timer value is super easy.
<span class="countdown__number" data-countdown="30">0</span>
Just change the value of data-countdown in the HTML to whatever you’d like the countdown value to be. So in the HTML above the timer is set to count down from 30. Change this value to 60 and it’ll countdown for one minute.
Disabling the button
If you want to disable the button to stop users progressing to the next step until the timer has finished, then add data-disabled='true' to the primary <button> on the step. This is then read by the javascript and disables the button until the timer has finished. For example:
<button id="btn-countdown" data-disabled='true' class="btn btn--lg btn-full-width btn--primary">Next step</button>
Set data-disabled='false' to enable the button during countdown.
Try to only disable the button when it’s necessary for users to wait until progressing to the next step. It’s not recommended to use this on timers over 60 seconds.
Loading (Proof of Concept)
Displays a loader to the user until necessary data is received and progression to the next step can occur.
Changelog
Notable changes to this step or component will be documented here.
### - 26 Jun 2020
- Fix: Fixed JS for dragging slides.
The progress loading step has a slider component built in that cycles between text states to either keep the user informed on the checks that are taking place, or to let them know that the checks are still in progress.
Slider data-attributes
The slider can be configured/customised via data-attributes in the HTML markup. They are as follows:
| Data-attributes | Description | Type | Default |
|---|---|---|---|
data-interval |
The time (in seconds) between each slide | Integer | 4 |
data-slide |
Whether the slider should automatically slide or not | Boolean | true |
data-drag |
Whether the slides should be draggable/user interactable | Boolean | false |
For instance, if you wanted to change the time between each slide, you would update data-interval="4" to whatever the new value is.
Multiple images (Proof of Concept)
A proof of concept showing how a display media step with multiple images could work