[Transferred from Web repo] Improve learners' progress UX for facilitator view on edit learner group page

[paprajapati9]

Describe the bug Currently learners' progress is shown in an expandable panel and it's difficult to recognise what is shown under the progress

Observed behavior There is no clarity of what is shown under the progress expandable panel.

Expected behavior The UX should be more clear to make is easier for facilitator to understand what is shown under the progress

Screenshots / Videos

https://user-images.githubusercontent.com/42764756/199654113-5ef54c72-dd4c-4039-b782-3e1b03b39e93.mp4

Additional context Add any other context about the problem here.

DESIGN APPROVAL CHECKLIST -- DO NOT EDIT.

• [ ] UX Design approved (Android mocks should include dark mode)
• [ ] UX Writing approved
• [ ] Product approved

For a design project to be completed, it needs approval from UXD, UXW and PM. Please tag the following reviewers when your project is ready (it's enough to have one signoff from each of UXD, UXW and PM):

• LaCE projects: @ConorMack / @rfinch11 (UXD), @jikim322 / @roxanashirazi (UXW), @dchen97 (PM)
• CD projects: @IMHieuVo / @celestinetales (UXD), @kmuir1991 / @12lamy2 (UXW), @dchen97 (PM)
• Android projects: @kaiyuxu (UXD), @jlevick / @danapj (UXW), @seanlip (PM)

[findimue]

@seanlip This would be good for Ning to look back at this.

[ningz2]

The accordion is used here in case there are multiple stories aligned by the facilitator. If we show every lesson's progress under each story without collapse, it would be tough to read all the way to the bottom. But to solve the issue you reported, I would suggest to have the first story unfolded by default when facilitators enter this page so that they will have an idea about what would be shown under each list story.

[ningz2]

If it is the demo, it would be great to also include an "in-progress" lesson status under the "progress in stories" tab and show the situation when multiple stories are assigned by the facilitator.