docs(evo-marko): massive storybook overhaul

[LuLaValva]

I went through every <evo-*> component's storybook and made sure they were all aligned.

While doing this, I uncovered dozens of inconsistencies and bugs in our components and fixed them along the way.

I know this has a bunch of massive sweeping changes, but since evo-marko is still in beta now is the time to do this. I'm excited to see the number of rough edges in our components & stories reduced.

We should not merge this yet, because it depends on an experimental and unreleased version of @storybook/marko that only exists on this PR branch. The goodies I'm hoping to get merged into that package are

1. changeHandler to have controlled components hook into storybook controls, with more seamless descriptions
2. "@": {} to scope attr tag attributes more easily and keep them consistent.

In the future, we also definitely need a way to control/render content in stories and repeatable @attr tags in controls, but I think it's at least much better with what I've implemented so far.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 51596d1

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[LuLaValva]

Among the non-storybook changes I've made, that might need a second look (in order of importance):

• Switched some mandatory aria-label to a11yText with TS mandate.
  • The most iffy one is <evo-icon-button> since <evo-button> doesn't mandate, but I think it's justified since icon button never has text content
• We had some components with <@img> attr tags and some with <@image>. I unified them all to <@img>, but maybe <@image> would be better
• A good number of attributes that existed in the Input type and were destructured were unused, so I removed them
• In some cases content was being rendered as <span><${input}/></span>. To give more control, I switched to <span ...input/>

[ianmcburnie]

Now that we aren't doing pass through for aria-label what happens if:

1. aria-label is supplied
2. A component requires aria-labelledby? (e.g. carousel using a nearby heading)

p.s. I picked avatar arbitrarily. My comment relates to any component.

[LuLaValva]

This is a good question! This is a great candidate for ADR, but I just needed to get something out (evo-marko is still in beta until all components have a few more touch-ups)

Right now I'm thinking we should soft-prevent aria-label with TypeScript, but still pass it through. If people want to use aria-labelledby they can pass a11yText="" or maybe a11yText=false alongside it.