[Layout foundations] Add alpha page in style guide for Bleed (#7276)

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

Fixes #7258 <!-- link to issue if one exists -->

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

Adds alpha page and examples for `Bleed` component

<details>
      <summary>Bleed alpha page</summary>
<img
src="https://user-images.githubusercontent.com/59836805/192337493-298b15a6-6622-452f-89ac-d6a90110d25c.gif"
alt="Bleed alpha page">
    </details>


<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

Co-authored-by: Lo Kim <[email protected]>

Author: chazdean

polaris.shopify.com/content/components/bleed/index.md

@@ -0,0 +1,27 @@
+---
+title: Bleed
+description: Used to create a container that applies negative margins to allow content to extend into the surrounding layout.
+category: Structure
+keywords:
+  - layout
+status:
+  value: Alpha
+  message: This component is in development. There could be breaking changes made to it in a non-major release of Polaris. Please use with caution.
+examples:
+  - fileName: bleed-vertical.tsx
+    title: Vertical
+    description: >-
+      Use to set bleed vertically.
+  - fileName: bleed-horizontal.tsx
+    title: Horizontal
+    description: >-
+      Use to set bleed horizontally.
+  - fileName: bleed-specific-direction.tsx
+    title: Specific direction
+    description: >-
+      Use to set bleed in a specific direction
+  - fileName: bleed-all-directions.tsx
+    title: All directions
+    description: >-
+      Use to set bleed in all directions
+---

polaris.shopify.com/pages/examples/bleed-all-directions.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {Bleed, Box, Text} from '@shopify/polaris';
+
+import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+
+const styles = {
+  background: 'var(--p-background-selected)',
+  borderRadius: 'var(--p-border-radius-05)',
+  border: '1px solid var(--p-surface-dark)',
+  padding: 'var(--p-space-4)',
+  height: 'var(--p-space-12)',
+  opacity: 0.7,
+};
+
+function BleedAllDirectionsExample() {
+  return (
+    <div style={{width: '500px'}}>
+      <Box background="surface" border="base" padding="4">
+        <Bleed spacing="6">
+          <div style={styles}>
+            <Text variant="bodySm" as="h3" alignment="center" fontWeight="bold">
+              All directions
+            </Text>
+          </div>
+        </Bleed>
+      </Box>
+    </div>
+  );
+}
+
+export default withPolarisExample(BleedAllDirectionsExample);

polaris.shopify.com/pages/examples/bleed-horizontal.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {Bleed, Box, Text} from '@shopify/polaris';
+
+import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+
+const styles = {
+  background: 'var(--p-background-selected)',
+  borderRadius: 'var(--p-border-radius-05)',
+  border: '1px solid var(--p-surface-dark)',
+  padding: 'var(--p-space-4)',
+  height: 'var(--p-space-12)',
+  opacity: 0.7,
+};
+
+function BleedHorizontalExample() {
+  return (
+    <div style={{width: '500px'}}>
+      <Box background="surface" border="base" padding="4">
+        <Bleed horizontal="6">
+          <div style={styles}>
+            <Text variant="bodySm" as="h3" alignment="center" fontWeight="bold">
+              horizontal
+            </Text>
+          </div>
+        </Bleed>
+      </Box>
+    </div>
+  );
+}
+
+export default withPolarisExample(BleedHorizontalExample);

polaris.shopify.com/pages/examples/bleed-specific-direction.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import {Bleed, Box, Text} from '@shopify/polaris';
+
+import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+
+const styles = {
+  background: 'var(--p-background-selected)',
+  borderRadius: 'var(--p-border-radius-05)',
+  border: '1px solid var(--p-surface-dark)',
+  padding: 'var(--p-space-4)',
+  height: 'var(--p-space-12)',
+  opacity: 0.7,
+};
+
+function BleedSpecificDirectionExample() {
+  return (
+    <div style={{width: '500px'}}>
+      <Box background="surface" border="base" padding="4">
+        <Bleed top="6">
+          <div style={styles}>
+            <Text variant="bodySm" as="h3" alignment="center" fontWeight="bold">
+              top
+            </Text>
+          </div>
+        </Bleed>
+      </Box>
+      <br />
+      <Box background="surface" border="base" padding="4">
+        <Bleed right="6">
+          <div style={styles}>
+            <Text variant="bodySm" as="h3" alignment="center" fontWeight="bold">
+              right
+            </Text>
+          </div>
+        </Bleed>
+      </Box>
+      <br />
+      <Box background="surface" border="base" padding="4">
+        <Bleed left="6">
+          <div style={styles}>
+            <Text variant="bodySm" as="h3" alignment="center" fontWeight="bold">
+              left
+            </Text>
+          </div>
+        </Bleed>
+      </Box>
+      <br />
+      <Box background="surface" border="base" padding="4">
+        <Bleed bottom="6">
+          <div style={styles}>
+            <Text variant="bodySm" as="h3" alignment="center" fontWeight="bold">
+              bottom
+            </Text>
+          </div>
+        </Bleed>
+      </Box>
+      <br />
+    </div>
+  );
+}
+
+export default withPolarisExample(BleedSpecificDirectionExample);

polaris.shopify.com/pages/examples/bleed-vertical.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {Bleed, Box, Text} from '@shopify/polaris';
+
+import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+
+const styles = {
+  background: 'var(--p-background-selected)',
+  borderRadius: 'var(--p-border-radius-05)',
+  border: '1px solid var(--p-surface-dark)',
+  padding: 'var(--p-space-4)',
+  height: 'var(--p-space-12)',
+  opacity: 0.7,
+};
+
+function BleedVerticalExample() {
+  return (
+    <div style={{width: '500px'}}>
+      <Box background="surface" border="base" padding="4">
+        <Bleed vertical="6">
+          <div style={styles}>
+            <Text variant="bodySm" as="h3" alignment="center" fontWeight="bold">
+              vertical
+            </Text>
+          </div>
+        </Bleed>
+      </Box>
+    </div>
+  );
+}
+
+export default withPolarisExample(BleedVerticalExample);