docs: update doc.s for used components

[booc0mtaco]

Summary:

Adding better documentation for the components used in current projects:

• Icon
• Accordion
• Avatar
• NumberIcon
• TextareaField
• Tag
• InputField
• Checkbox
• Table
• Card
• Popover
• Tooltip
• Modal
• ClickableStyle
• ButtonGroup
• Button
• FiltersCheckboxField
• FiltersPopover

For each component:

• ensure the type info for the stories is tidied up (type for Story created, using Args)
• ensure the props for the component type are consistent (ComponenNameProps over just Props when sub-components need importing elsewhere)
• stories have documentation blocks explaining any caveats
• utility types are used with Extract to avoid bifurcating common variant names/values
• Defaults are documented in a consistent format (**Default is 'value'.**)
• args get passed to stories using render

Test Plan:

• Wrote automated tests
• CI tests / new tests are not applicable
• Manually tested my changes, but I want to keep the details secret
• Manually tested my changes, and here are the details:
  • Create an alpha publish and try out in edu-stack or traject as a sanity check if changes affect build or deploy, or are breaking, such as token changes, widely used component updates, hooks changes, and major dependency upgrades.

[github-actions]

size-limit report 📦

Path	Size
components	97.91 KB (+0.11% 🔺)
styles	34.31 KB (-0.06% 🔽)

[codecov]

Codecov Report

Merging #1791 (c98c9e5) into next (aa9b1f3) will increase coverage by 0.00%.
The diff coverage is 100.00%.

❗ Current head c98c9e5 differs from pull request most recent head 174aef4. Consider uploading reports for the commit 174aef4 to get more accurate results

@@           Coverage Diff           @@
##             next    #1791   +/-   ##
=======================================
  Coverage   92.50%   92.50%           
=======================================
  Files         147      147           
  Lines        2735     2736    +1     
  Branches      712      714    +2     
=======================================
+ Hits         2530     2531    +1     
  Misses        189      189           
  Partials       16       16           

Files	Coverage Δ
src/components/Accordion/Accordion.tsx	97.18% <ø> (ø)
src/components/Avatar/Avatar.tsx	100.00% <100.00%> (ø)
src/components/Card/Card.tsx	100.00% <100.00%> (ø)
src/components/Checkbox/Checkbox.tsx	100.00% <100.00%> (ø)
src/components/Icon/Icon.tsx	100.00% <ø> (ø)
src/components/InputField/InputField.tsx	100.00% <ø> (ø)
src/components/InputLabel/InputLabel.tsx	100.00% <ø> (ø)
src/components/Modal/Modal.tsx	95.95% <ø> (ø)
src/components/NumberIcon/NumberIcon.tsx	100.00% <100.00%> (ø)
src/components/Popover/Popover.tsx	92.85% <ø> (ø)
... and 5 more

📣 Codecov offers a browser extension for seamless coverage viewing on GitHub. Try it in Chrome or Firefox today!

[booc0mtaco]

Context: This includes a ton of improvements on the component docs, mostly addressing inconsistencies but also adding details to individual stories to help give context when looking at the Docs tab.

For example, compare the following:

• Avatar
  • Before: https://chanzuckerberg.github.io/edu-design-system/?path=/docs/components-avatar--docs
  • After: https://61313967cde49b003ae2a860-bagmibralg.chromatic.com/?path=/docs/components-avatar--docs
• Modal
  • Before: https://chanzuckerberg.github.io/edu-design-system/?path=/docs/components-modal--docs
  • After: https://61313967cde49b003ae2a860-bagmibralg.chromatic.com/?path=/docs/components-modal--docs

The checked components above contain the ones I modify here. They are drawn from the omlet reports on component usage, so I am prioritizing the changes for those.

There are some soft best-practices coming from this work, so there are some notes attached to some changes for reference.

[booc0mtaco]

@jeremiah-clothier as someone who worked on the pilots directly, any insights into undocumented or confusing things would be appreciated