feat(backgroundlayers): class based implementation [CSS-1268]

[jenndiaz]

Description

Creates utility classes which can be used by adding background layers to the dependencies for the component and then using the classes where needed.

Changes:

• Created a utility like "component" for background layers. This should eventually live in it's own section of the docs site. I didn't focus too much on navigation for the docs site or editing the nav.pug file.
• index.css has classes for each of the layers specified in the specs for background layers which can be used directly
• class names intentionally include the context it should be used in, editting vs browsing
• In storybook background layers is in it's own section "utility classes"

View Comments from previous branch for background layers that is now closed: #2274

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

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.

2. 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.
• I have tested these changes in Windows High Contrast mode.
• 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: 7c8f1b8

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]

📚 Branch preview

PR #2368 has been deployed to Azure Blob Storage: https://spectrumcss.z13.web.core.windows.net/pr-2368/index.html.

[github-actions]

Remaining comments which cannot be posted as a review comment to avoid GitHub Rate Limit

eslint

---

⚠️ [eslint] <indent> _{reported by reviewdog 🐶}
Expected indentation of 1 tab but found 2 spaces.

spectrum-css/components/backgroundlayers/stories/template.js

Line 10 in feb718e

id,

---

🚫 [eslint] <no-unused-vars> _{reported by reviewdog 🐶}
'id' is defined but never used.

spectrum-css/components/backgroundlayers/stories/template.js

Line 10 in feb718e

id,

---

⚠️ [eslint] <indent> _{reported by reviewdog 🐶}
Expected indentation of 1 tab but found 2 spaces.

spectrum-css/components/backgroundlayers/stories/template.js

Line 11 in feb718e

customClasses = [],

---

⚠️ [eslint] <indent> _{reported by reviewdog 🐶}
Expected indentation of 1 tab but found 2 spaces.

spectrum-css/components/backgroundlayers/stories/template.js

Line 13 in feb718e

return html`

[github-actions]

File metrics

Summary

Total size: 1.43 MB^*

🎉 No changes detected in any packages

* Size is the sum of all main files for packages in the library.
* An ASCII character in UTF-8 is 8 bits or 1 byte.