docs: update progress indicator usage tab

[aubrey-oneal]

Closes #3464

This is issue is a complete rewrite of the progress indicator usage tab, which does not currently follow our template or provide sufficient information.

Changelog

New

• Full content rewrite
• New images

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
carbondesignsystem	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 25, 2024 4:37pm

[guidari]

Hey @aubrey-oneal The end of the page is missing any content? I can see the titles but no content:

[aubrey-oneal]

Hey @guidari I put up a WIP PR which is why you're seeing missing content. I still need to work on the Placement imagery but I'd like to request a first review from our designers. One tricky thing was naming the progress states and I'm open to feedback on that. It's tricky because the states implied in the style tab have a mismatch with the icon names they use. I.e. 'Current' state uses the 'Incomplete' icon and 'Incomplete' state uses the 'Not started' icon.

[guidari]

@aubrey-oneal Ohh okay! If you think we should change the icons, I'm happy to help in the dev side.

[aubrey-oneal]

Thanks for the offer @guidari! I think for this PR our scope is going to be just getting docs up for the component as it is and we'll make some issues for potential future component updates!

[thyhmdo]

Looks good Aubrey!

I just think the anatomy image spanning 12 columns looks huge compared to the 8-column one. But yeah I understand the real size component is bigger than the 8–column image. I tried to scale it but not sure how that'll look live. But it's up to you.

I also noticed that we have italic text for the first heading column and non -italic text in some cases. Maybe something to look at in the usage template update. But Lauren just issued the tag doc and she has italic text so I'd follow that for the states.