docs: storybook description format; lit syntax alignment

[castastrophe]

Description

Descriptions can be written as JDoc comments in Storybook stories above stories, meta, or components. This format seems more contributor-friendly than attaching parameters.docs.description.{story,component} to each story. These JSDoc blocks can include markdown as well!

This PR moves all description data into JSDoc blocks. It also updates customStyles objects to use a consistent format and naming approach along with a few other minor linting fixes.

In an effort to prevent unnecessary VRT shifts, I also migrated all ems and rems used in displaying VRT groupings to px.

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Validation steps

1. Spin up the local storybook (yarn start) or preview the linked version in the PR.

• No regressions in VRTs
• Click through docs pages and check that the descriptions appear above the initial code example.

Regression testing

Validate:

1. The documentation pages for at least two other components are still loading, including:

• The pages render correctly, are accessible, and are responsive.

3. If components have been modified, VRTs have been run on this branch:

• VRTs have been run and looked at.
• Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

Screenshots

To-do list

• I have read the contribution guidelines.
• I have updated relevant storybook stories and templates.
• If my change impacts other components, I have tested to make sure they don't break.
• If my change impacts documentation, I have updated the documentation accordingly.
• ✨ This pull request is ready to merge. ✨

[changeset-bot]

⚠️ No Changeset found

Latest commit: 689a461

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

[github-actions]

🚀 Deployed on https://pr-2681--spectrum-css.netlify.app

[github-actions]

File metrics

Summary

Total size: 4.57 MB^*

🎉 No changes detected in any packages

* Size determined by adding together the size of the main file for all packages in the library.
* Results are not gzipped or minified.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

[pfulton]

I like this idea, and I think it's a step in the right direction, as we continue to bring over some of the features of the Docs site.

It looks like we might have lost the padding on some of the stories (see the Chromatic diffs; Action Menu is an example). In the Card stories, we seem to be missing the ... icon (also captured via Chromatic).

Overall, it looks like this batch of Chromatic diffs has mostly detected things that I think we should try to address before we merge this work in.

[castastrophe]

@pfulton Great feedback. I found a decorators typo in several stories and corrected a few issues. There are 5 baselines left that I think are improvements and fixes. Let me know if you find any other issues!