steps

Diagnostic Step

The diagnostic step is used when various tests are being performed to help determine the next course of action within the interaction. We display two types of diagnostics depending on the user's persona level.

Avoidant Diagnostic

The diagnostic step for an avoidant user. This is a less detailed version of the optimistic and confident scan. This is to ensure that avoidant users aren't overloaded with technical information that they may not understand.

v1.1.1Requires JS

View raw

Changelog

Notable changes to this step or component will be documented here.

### v1.1.1 - 7 Jul 2020

Removed data-renderer='svg' from the markup as this will now be referenced in the javascript
Updated the lottiejs library to lottie_light.min.js. Now around half the size.

v1.1.0 - 1 Jul 2020

Added new class to body-container html in order to allow for changing styling variables of a diagnostic step
Added new data-attributes to the diagnostic-animation--lottie class in order to manage the lottie animation within the html markup:

<div class='diagnostic-animation--lottie absolute top-0 left-0 w-full h-full z-10' data-loop=true data-renderer='svg' data-json='diagnostic.json'></div>

Revised the diagnostic animation javascript to make use of the new data-attributes:

//Activate lottie for diagnostic step
const container = document.querySelector('.diagnostic-animation--lottie'),
      renderedValue = container.dataset.renderer,
      jsonFile = container.dataset.json;

var diagnosticAnimation = bodymovin.loadAnimation({
    container: container,
    renderer: renderedValue,
    loop: true,
    autoplay: true,
    path: `/animations/${jsonFile}`
})

Starting a scan

To start the animation for a diagnostic scan, add the .start class to the .diagnostic-item--avoidant list element. This will trigger the fade in and start the spinner.

Add this class for the first .diagnostic-item--avoidant list element on load and then for the next list element once the first has finished.

Finishing a scan

To finish an animation, add the .finish class to the .diagnostic-item--avoidant list element. This will stop the spinner and trigger the icon image to appear.

Changing the icon

There are three state icons:

icon-state-success.svg
icon-state-warning.svg
icon-state-error.svg

The default icon that will appear automatically is icon-state-success.

Add .success class to .diagnostic-item--avoidant element.
Add .warning class to .diagnostic-item--avoidant element.
Add .error class to .diagnostic-item--avoidant element.

You can test this yourself by inspecting the HTML for the element in your browser and adding/removing the state classes.

Confident & Optimistic Diagnostic

This is a more detailed version of the avoidant scan, providing the user with more information to digest.

v1.1.1Requires JS

View raw

Changelog

Notable changes to this step or component will be documented here.

### v1.1.1 - 7 Jul 2020

Removed data-renderer='svg' from the markup as this will now be referenced in the javascript
Updated the lottiejs library to lottie_light.min.js. Now around half the size.

v1.1.0 - 1 Jul 2020

Added new class to body-container html in order to allow for changing styling variables of a diagnostic step
Added new data-attributes to the diagnostic-animation class in order to manage the lottie animation within the html markup:

<div class='diagnostic-animation absolute top-0 left-0 w-full h-full z-10' data-loop=true data-renderer='svg' data-json='diagnostic.json'></div>

Revised the diagnostic animation javascript to make use of the new data-attributes:

//Activate lottie for diagnostic step
const container = document.querySelector('.diagnostic-animation'),
      renderedValue = container.dataset.renderer,
      jsonFile = container.dataset.json;

var diagnosticAnimation = bodymovin.loadAnimation({
    container: container,
    renderer: renderedValue,
    loop: true,
    autoplay: true,
    path: `/animations/${jsonFile}`
})

Starting one scan

To start the animation for a diagnostic scan, add the .start class to the .diagnostic-item--confident list element. This will trigger the fade in and start the spinner.

Add this class for the first .diagnostic-item--avoidant list element on load and then for the next list element once the first has finished.

Finishing one scan

To finish a scan item, add the .finish class to the .diagnostic-item--confident list element. This will stop the spinner and trigger the state SVG to scale in. There are three states and each has a associated class that needs to be added to the diagnostic-item--confident list element in order to trigger it.

Add .success class to .diagnostic-item--confident element.
Add .warning class to .diagnostic-item--confident element.
Add .error class to .diagnostic-item--confident element.

You can test this yourself by inspecting the HTML for the element in your browser and adding/removing the state classes.

Interacting with the carousel

When a series of scans is complete e.g. scans for the “Home Network’ and you want to start a new series of scans e.g. “iPhone X”, you need to call a function to trigger the carousel.

To trigger the carousel, just call diagnosticSwiper.slideNext(); and this will move out the box and move in the next box. You’ll then need to start the scans for that group. t