DS - storybook center stories & group patterns

[britt6612]

Deploy Preview

What does this PR do?

This PR fixes the stories so they are centered and groups our pre- existing patterns into the patterns

What are the relevant issues?

closes #5760
related to #5710

Where should the reviewer start?

How should this be manually tested?

Any background context you want to provide?

Screenshots (if appropriate)

Should this PR be mentioned in Design System updates?

Is this change backwards compatible or is it a breaking change?

[netlify]

✅ Deploy Preview for hpe-theme-preview ready!

Name	Link
🔨 Latest commit	8156967
🔍 Latest deploy log	https://app.netlify.com/projects/hpe-theme-preview/deploys/699e116d3d59d10009f84caa
😎 Deploy Preview	https://deploy-preview-5847--hpe-theme-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for hpe-design-icons-grommet ready!

Name	Link
🔨 Latest commit	8156967
🔍 Latest deploy log	https://app.netlify.com/projects/hpe-design-icons-grommet/deploys/699e116d78b1030008212f6e
😎 Deploy Preview	https://deploy-preview-5847--hpe-design-icons-grommet.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 8156967

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

[netlify]

✅ Deploy Preview for unrivaled-bublanina-3a9bae ready!

Name	Link
🔨 Latest commit	8156967
🔍 Latest deploy log	https://app.netlify.com/projects/unrivaled-bublanina-3a9bae/deploys/699e116d7d90ea00086ba8f3
😎 Deploy Preview	https://deploy-preview-5847--unrivaled-bublanina-3a9bae.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[jcfilben]

Nice change, I'm wondering if there is a way we can opt out of this for certain stories. For example the Header story looks a bit squished and the Tabs story jumps around when I switch tabs

Screen.Recording.2026-02-23.at.4.46.36.PM.mov

[britt6612]

Nice change, I'm wondering if there is a way we can opt out of this for certain stories. For example the Header story looks a bit squished and the Tabs story jumps around when I switch tabs

Screen.Recording.2026-02-23.at.4.46.36.PM.mov

yes I believe there is a way we can make a list of components then I can opt those out

[jcfilben]

Nice improvement to the stories