docs: breakout page (#3154)

docs-old/src/demos/components/Breakout/horizontal-breakout.demo.tsx

@@ -1,25 +1,11 @@
-import { Box, Breakout, Container } from '@marigold/components';
+import { Breakout, Container } from '@marigold/components';
 
 export const HorizontalBreakout = () => (
   <Container align="center">
-    <Box
-      css={{
-        border: '1px solid #ced4da',
-        bg: '#e9ecef',
-        height: '80px',
-        width: '100%',
-      }}
-    />
+    <div className="h-20 w-full border border-slate-300 bg-slate-200" />
     <Breakout alignX="right">
-      <Box>BREAKOUT with right aligned content</Box>
+      <div>BREAKOUT with right aligned content</div>
     </Breakout>
-    <Box
-      css={{
-        border: '1px solid #ced4da',
-        bg: '#e9ecef',
-        height: '80px',
-        width: '100%',
-      }}
-    />
+    <div className="h-20 w-full border border-slate-300 bg-slate-200" />
   </Container>
 );

docs/content/components/breakout/breakout.mdx

@@ -0,0 +1,68 @@
+---
+title: Breakout
+group: Layout
+caption: Component that breaks out of a grid layout context.
+---
+
+`<Breakout>` is a layout component which lets you span the full row in a CSS grid context e.g. our [`<Container>`](container/) component.
+
+You need this component if you want to display something out of the context. It is also possible to put several components into the `<Breakout>`.
+
+You can use `alignX` or `alignY` to place the items inside the `<Breakout>` element.
+
+## Usage
+
+### Import
+
+To import the component you just have to use this code below.
+
+```tsx
+import { Breakout } from '@marigold/components';
+```
+
+### Props
+
+<PropsTable
+  props={[
+    {
+      property: 'alignX',
+      type: '"left" | "right" | "center"',
+      description:
+        'Horizontal alignment of the items inside the breakout element.',
+      default: 'left',
+    },
+    {
+      property: 'alignY',
+      type: '"top" | "bottom" | "center"',
+      description:
+        'Vertical alignment of the items inside the breakout element.',
+      default: 'top',
+    },
+    {
+      property: 'height',
+      type: 'string',
+      description: 'Set the height of the breakout element.',
+      default: 'none',
+    },
+  ]}
+/>
+
+## Examples
+
+### Vertical alignment
+
+In this case the `height` prop is necessary, if you haven't set it, the `alignY` has no impact.
+
+<ComponentDemo file="./vertical-breakout.demo.tsx" />
+
+### Horizontal alignment
+
+Example to show how the `alignX` prop is to set. Options are `"left" | "center" | "right"`. The default value is `left`.
+
+<ComponentDemo file="./horizontal-breakout.demo.tsx" />
+
+### Breakout iframe
+
+This example shows how to use an `<iframe>` within a `<Breakout>`.
+
+<ComponentDemo file="./iframe-breakout.demo.tsx" />

docs/content/components/breakout/horizontal-breakout.demo.tsx

@@ -0,0 +1,11 @@
+import { Breakout, Container } from '@marigold/components';
+
+export default () => (
+  <Container align="center">
+    <div className="h-20 w-full border border-slate-300 bg-slate-200" />
+    <Breakout alignX="right">
+      <div>BREAKOUT with right aligned content</div>
+    </Breakout>
+    <div className="h-20 w-full border border-slate-300 bg-slate-200" />
+  </Container>
+);

docs/content/components/breakout/iframe-breakout.demo.tsx

@@ -0,0 +1,29 @@
+import { Aspect, Breakout, Container } from '@marigold/components';
+
+export default () => (
+  <Container align="center">
+    <p className="p-1">
+      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+      Lorem Ipsum has been the industry's standard dummy text ever since the
+      1500s, when an unknown printer took a galley of type and scrambled it to
+      make a type specimen book.
+    </p>
+    <Breakout alignX="center" alignY="center">
+      <Aspect ratio="ultrawide">
+        <iframe
+          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4820.000043444012!2d7.826018541821473!3d48.020383262446884!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47911b1e29425703%3A0xbe342117a976e59!2sEuropa-Park%20Stadion!5e1!3m2!1sde!2sde!4v1647595604899!5m2!1sde!2sde"
+          title="sc_map"
+          width="100%"
+          height="100%"
+        />
+      </Aspect>
+    </Breakout>
+    <p className="p-2">
+      It has survived not only five centuries, but also the leap into electronic
+      typesetting, remaining essentially unchanged. It was popularised in the
+      1960s with the release of Letraset sheets containing Lorem Ipsum passages,
+      and more recently with desktop publishing software like Aldus PageMaker
+      including versions of Lorem Ipsum.
+    </p>
+  </Container>
+);

docs/content/components/breakout/vertical-breakout.demo.tsx

@@ -0,0 +1,13 @@
+import { Breakout, Container } from '@marigold/components';
+
+export default () => (
+  <Container align="center">
+    <div className="h-20 w-full border border-slate-300 bg-slate-200" />
+    <Breakout height="100px" alignY="bottom">
+      <div className="border border-slate-300 bg-slate-200">
+        BREAKOUT with bottom alignment
+      </div>
+    </Breakout>
+    <div className="h-20 w-full border border-slate-300 bg-slate-200" />
+  </Container>
+);

docs/registry/index.tsx

@@ -28,4 +28,25 @@ export const registry = {
     ),
     file: 'content/components/button/button-variant.demo.tsx',
   },
+  'horizontal-breakout': {
+    name: 'horizontal-breakout',
+    demo: dynamic(
+      () => import('@/content/components/breakout/horizontal-breakout.demo')
+    ),
+    file: 'content/components/breakout/horizontal-breakout.demo.tsx',
+  },
+  'iframe-breakout': {
+    name: 'iframe-breakout',
+    demo: dynamic(
+      () => import('@/content/components/breakout/iframe-breakout.demo')
+    ),
+    file: 'content/components/breakout/iframe-breakout.demo.tsx',
+  },
+  'vertical-breakout': {
+    name: 'vertical-breakout',
+    demo: dynamic(
+      () => import('@/content/components/breakout/vertical-breakout.demo')
+    ),
+    file: 'content/components/breakout/vertical-breakout.demo.tsx',
+  },
 } as const;