feat(storybook): add a shared decorator for group rendering and static color settings

[castastrophe]

Description

As we expand the decorators available for use, a more organized decorators folder becomes essential to maintain and update decorators independently of each other. I've moved all decorators into their own distinct files and imported them all into a single entry point: decorators/index.js.

Additionally, the properties available to all components (argTypes defined in preview.js) and global controls (globalTypes in preview.js) have been pulled into the types folder as args and global respectively. There is also a set of shared properties available in the states.js file to be imported into a component's story so that they don't have to continue to be redefined.

All storybook assets have been updated to reflect a few global changes:

• Express assets no longer need to be imported into Template iles
• The globals spread operator no longer needs to be passed between stories; these properties now persist in the global scope and will inherit
  • One minor exception to this seems to be Icon. We must pass the scale property down to the Icon because it throws a React Hook error when we try to fetch the value of scale in the Icon template.
• Any linting errors that could be fixed were fixed in this PR (namely duplicate properties, unused variables, whitespace, and converting single to double quotes)
• Removed boilerplate comments still in the files from the template

Four new decorators have been added:

Preview styles decorator

Many storybook stories require adding layout and/or padding in order to view variants together or snapshot focus states. The goal of this PR is to unify this effort in a shared decorator that can be customized using a new customStorybookStyles object that is leveraged in a story's args settings.

Any settings added by the story will override these values. You can unset a value completely using undefined, i.e.:

customStorybookStyles: {
  padding: undefined,
}

Sizing decorator

This decorator is based on the preview sizing wrapper decorator that was unused. It displays all sizes of a provided story with labels but only in the testing preview state. It automatically pulls the size properties from a component's argTypes.

Variants decorator

This decorator renders (in testing preview mode only) any argType listed with a category of "Variant".

States decorator

This decorator renders (in testing preview mode only) any argType listed with a category of "State".

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

• Accordion: overrides padding settings to 0

Note: All values set by this decorator should appear as inline-styles assigned to the #root-inner element.

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. ✨

[castastrophe]

@mdt2 Not 100% why PR #2398 closed and wouldn't re-open except that since I pulled some items out, maybe since one of them merged first it triggered a connection in git. All that to say, I re-opened this PR for review.

[github-actions]

File metrics

Summary

Total size: 4.42 MB^*
Total change (Δ): ⬆ 0.13 KB (0.00%)

Table reports on changes to a package's main file. Other changes can be found in the collapsed Details section below.

Package	Size	Δ
fieldgroup	1.70 KB	⬆ 0.04 KB

Details

fieldgroup

File	Head	Base	Δ
index-base.css	1.70 KB	1.65 KB	⬆ 0.04 KB (2.48%)
index-vars.css	1.70 KB	1.65 KB	⬆ 0.04 KB (2.48%)
index.css	1.70 KB	1.65 KB	⬆ 0.04 KB (2.48%)
metadata.json	0.88 KB	0.88 KB	-

* 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.

[github-actions]

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