feat: [CFISO-1472] Implement new Pagecut style to Layout component

[stephanLeece]

Purpose of PR

Updates the Layout alpha component to the new Modern and Scalable U.I design.

Tickets:
https://contentful.atlassian.net/browse/CFISO-1472
https://contentful.atlassian.net/browse/CFISO-1520

• New Narrow variant with max Layout.body width of 720px
• narrow, wide variants have top border radius, box shadow, 16px horizontal margin and 12px top margin
• Layout default variant is now wide as it is more ...widely used.

Full screen:

Wide:

Narrow:

PR Checklist

• I have read the relevant readme.md file(s)
• All commits follow our Git commit message convention
• Tests are added/updated/not required
• Tests are passing
• Storybook stories are added/updated/not required
• Usage notes are added/updated/not required
• Has been tested based on Contentful's browser support
• Doesn't contain any sensitive information

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
forma-36	✅ Ready (Inspect)	Visit Preview	May 31, 2024 11:25am

[changeset-bot]

⚠️ No Changeset found

Latest commit: 5fec0ae

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]

size-limit report 📦

Path	Size	Loading time (3g)	Running time (snapdragon)	Total time
CommonJS	134.77 KB (0%)	2.7 s (0%)	113 ms (+60.27% 🔺)	2.9 s
Module	131.19 KB (0%)	2.7 s (0%)	134 ms (+56.06% 🔺)	2.8 s

[stephanLeece]

@stephanLeece I noticed that the last item in the breadcrumb lacks a margin. It should be the same as for the breadcrumb links.

Two tiny details in the documentation:

1. the example content (form) has a padding. Ideally that would be removed.
2. The background there is white. It should be gray/100

-36/assets/67584870/e0423f04-ad7b-4bf4-a21c-383a59ee9000">
Generally speaking, could you please also update the documentation to show the different variants: left, right, both sidebars, and full, wide, narrow?

Let me know if you have questions.

One thing regarding the background - i will add it for the example, but it's not part of the Layout component itself. So we will need to add that background to the parent component when using Layout in the web app.

[denkristoffer]

Code looks good to me, I think, but let me play around with it a bit as well 🙂

[denkristoffer]

Looks good to me but I will request changes to block release for now. Do you want to release an alpha?