New: completion icon added to progress indicators (fixes #288)

[kirsty-hames]

Fixes #288

New

• Set progress indicator variables for consistent sizing.
• Progress indicator border and .is-selected styles added.
• Progress indicator .is-visited icon style added. Tick icon displayed for consistency with other visited component item states.

The overall .narrative__progress size has increased from 12px to 16px. The screen shots shared in the issue have larger icons (@icon-size 1.5rem for consistency with other component item visited ticks) however this limits the amount of items we can comfortably fit visually and the preference was to keep these small.

Update

• Display progress indicators below the image always. When _hasNavigationInTextArea is enabled, displaying the indicators within the controls limits the space available for the indicators. Instead, display these consistently, below the image, across the various layout views. See issue for discussion.
• Progress indicator margin replaced with variable (maintains same 0.25rem value).

Dependency

Vanilla narrative.less will need updating to include color and border-color styles. I'll update the testing instructions when a Vanilla PR has been raised. Issue raised.

Testing

1. Install issue/288 branch.
2. Comment out .narrative__progress background-color styles in Vanilla narrative.less. For example:

  &__progress {
    //background-color: @item-color;
    border-radius: 50%;
  }

  // &__progress.is-visited {
  //   background-color: @visited;
  // }

  // &__progress.is-selected {
  //   background-color: @item-color-selected;
  // }

3. Test the following Narrative layouts on both large and small screen widths. Screen shots added for each configuration.

In component.json, default layout:

    "_hasNavigationInTextArea": false,
    "_isMobileTextBelowImage": false,

Enable _hasNavigationInTextArea:

Enable _hasNavigationInTextArea and _isMobileTextBelowImage:

^ mobile view (based on 375px screen width) supports 9 items before progress indicators are wrapped.

[cahirodoherty-learningpool]

👀

[kirsty-hames]

FYI @oliverfoster and @StuartNicholls as you were involved in the issue discussion.

[oliverfoster]

Would you be able to increase the default contrast for the completed ticks please?

[kirsty-hames]

Would you be able to increase the default contrast for the completed ticks please?

Those ticks should be white. Missing color property added in 81d7c5a.

[oliverfoster]