Add grid overlay control to Storybook

[joshfarrant]

Summary

Adds a grid overlay control to the Storybook preview.

When building the RiverAccordion I needed an easy way to check that it conformed to our standard Grid, so I added this control.

The control supports multiple grid options to allow it to be used across all of our stories.

List of notable changes:

• Adds a grid overlay control to Storybook, which supports 5 modes
  • Off
  • Limited width — limits the grid to 1280px to match our standard Grid
  • Full width — allows the grid to expand to the full width of the viewport, similar to passing fullWidth to Grid
  • Limited width (no padding) — limits the grid to 1280px without padding
  • Full width (no padding) — allows the grid to expand to the full width of the viewport without padding
• Changes the icon for the colour mode control; a paint brush felt more appropriate

What should reviewers focus on?

• Are you happy with this addition?

Steps to test:

1. Open 🔗 Storybook
2. Click the Grid overlay control

Contributor checklist:

• [x] All new and existing CI checks pass
• [x] Tests prove that the feature works and covers both happy and unhappy paths
• [x] Any drop in coverage, breaking changes or regressions have been documented above
• [x] UI Changes contain new visual snapshots (generated by adding update snapshots label to the PR)
• [x] All developer debugging and non-functional logging has been removed
• [x] Related issues have been referenced in the PR description

Reviewer checklist:

• [ ] Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
• [ ] Check that tests prove the feature works and covers both happy and unhappy paths
• [ ] Check that there aren't other open Pull Requests for the same update/change

Example screenshots

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: c5f7fec356eb742b047a5799b895c753aba61341

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[bot]]

🟢 No design token changes found

[github-actions[bot]]

🟢 No visual differences found

Our visual comparison tests did not find any differences in the UI.

[rezrah]

Hi @joshfarrant, just going through open PRs and wanted to get back to you (sorry for delay).

It's a neat idea, but I'm reluctant to add this to Storybook because it doesn't use our own Grid component. It would require ongoing maintenance of duplicative, non-library code that implements the same thing. E.g. hardcoding max-widths, which can change.

I needed an easy way to check that it conformed to our standard Grid, so I added this control.

FYI, we do a similar thing in other Stories. It's not as obvious as having a global toggle, but it uses the enableOverlay prop that's already built into Grid, which applies the same visual effect and is also most representative of end-user behavior. If you need it for debugging purposes, can you adopt the same approach going forward?

If you're okay with it, I recommend closing this out.

[joshfarrant]

No prob, thanks for the feedback @rezrah