Replace progress bars with icons in certain cases

[swashbuck]

Subject of the enhancement

In the PLP drawer, component completion is only represented by two states: "incomplete" or "complete". Presentation components like Accordion do not show partial completion when, for example, one of three items have been visited. The progress bar is either empty (incomplete) or full (complete).

If we were to switch the component progress bars to completion icons, this may increase the user's comprehension of what has been completed and what is still left. Furthermore, a lock icon could be used to indicate a locked state.

This could be a new, configurable option or we could replace the current behavior entirely.

Drawer example

Component title example

[oliverfoster]

Opinion:

I like the locked icons.

It is possible to use non-binary/continuous indicator bars for itemscomponent models (hotgraphic, narrative, accordion, etc) if we want.

I'm not sure about the title ticks and plp ticks, as we will need continuous bars for some things, like pages and menus and plp nav icon etc. and because I always think of ticks and crosses are an axiom for correctness. Although I do understand we now use them for hotgraphic visited states, which I do like.

[swashbuck]

Thanks, @oliverfoster . Just to clarify, I wouldn't recommend changing the progress bars to icons on the PLP nav button, the menu items, or for content objects (except for "locked" states as shown above).

[StuartNicholls]

What happens when the page progress bar is filled in the PLP drawer? no tick? tick appears?

Side note, the default look of the progress bar could do with a transparent border around the progress so it separates it visually from the white border. This helps make it look a bit more like a progress bar. Can be a pain point with clients.

[swashbuck]

@StuartNicholls Agree on the transparent border for sure. Did you want to create a new ticket for that?

Hmm, I think we could do a tick for a 100% completed page, too. I could go either way on this one, though.

[StuartNicholls]

I think we could sneak the border in as its so minor if we get to a consensus on this. If a problem, yeah Ill sort it later.

I think the progress with a tick works - Im sure Ive done that before. Kind of brings progress and tick as a completed status together. Just conscious of space / visual clutter. I could go either way also

[oliverfoster]

Transparent border, with that initial fill looks great.
That would fix the "is it filled or empty" question. And the "what is it", "it's a progress bar" problem.

[swashbuck]

The lock icon has been added in #210. We can also use this new .icon element to show a completion checkmark via theme customization.

From my perspective, the only thing left would be to add an .icon element to the component title PLPs so that we can show a checkmark. We can actually do this with theme work, although it won't be a dedicated icon element that has an aria-hidden="true". We rarely (if ever) use this feature, so I'm less concerned about it.

Otherwise, should we close out this ticket?

@StuartNicholls , are you fine to create a new ticket regarding the transparent border you mentioned above?

[oliverfoster]

@StuartNicholls , are you fine to create a new ticket regarding the transparent border you mentioned above?

Issue here #217