feat: plh_module_list_item highlighted param and circle variant

[jfmcquade]

PR Checklist

• PR title descriptive (can be used in release notes)

Description

Updates the plh_module_list_item component:

• Adds a new param, highlighted
  • If true, "highlighted" styling is applied (by default, the theme's secondary colour is applied as a highlight)
• Adds a new variant, circle
  • This variant is styled to very closely resemble the styling of the circle variant of the task_card component
  • This variant responds as expected to the same highlighted/locked parameters
  • The fact that this is now a variant of the same component should open up a neater authoring pattern for the map/list view on the plh_kids_kw deployment homepage
• Various other styling improvements
  • Brings the styling more inline with the original designs for the component
  • Tidies the style/component code, removing the need for theme-level override styling

Follow-up

If the new circle variant is sufficient, and the task card's circle variant is no longer needed, the latter should be removed from the code, is it was always a somewhat messy workaround for a specific use-case.

Git Issues

Closes #2756
Related issues: #2763, ParentingForLifelongHealth/plh-kids-app-kw-content#145

Screenshots/Videos

comp_plh_module_list_item template:

default variant	circle variant

comp_plh_progress_path

[esmeetewinkel]

Minor comment: The comparison between the two styles would be slightly more consistent to me if the blue and yellow border styles were the same size also for the circle variant. In that case, across both variants:

• locked: smaller, greyed out, lock appears
• unlocked (independent of whether or not it's highlighted): larger

This also seems desirable from a user perspective, where the initial state of the app they will see is circle variant with 1 unlocked unhighlighted module and the other modules locked unhighlighted.

[jfmcquade]

@esmeetewinkel yeh that makes sense.

I think you're suggesting two changes if I've understood correctly:

1. Consistent border width across the two variants
2. The size of the circle variant buttons should be the same when the instance is not locked – i.e. the unhighlighted unlocked circle button should be made larger to match the size of the highlighted unlocked circle button

Is that right? If so:

1. This was bugging me too, but I chose the heavier border for the circle variant because of the way it has to appear over the background image in our current use case. I found that with a less heavy border, the colour was lost against the busy background, so I kept the heavier border to match the designs. I also tried giving the default variant a heavier border to match, but this didn't look right. So as the circle variant currently has the single use case of appearing over a background image, I think the inconsistency is acceptable/desirable at the moment

2. Yeh this makes sense, I can quickly make the update, just let me know if I've misunderstood the request

[esmeetewinkel]

@jfmcquade Thanks for writing that down more clearly. I was suggesting only 2., your point 1. is not actually bugging me much. So let's leave 1. as is and action 2.

[jfmcquade]

@esmeetewinkel I've updated with bec9f03 and have updated the screenshots in the PR description acordingly

[esmeetewinkel]

Functional test passed.