Repository: marigold-ui/marigold
Pull request #2460 (2022-09-15 07:30:06)

chore: add height prop to Breakout and refactor docs page


Patch:
diff --git a/.changeset/bright-ghosts-tap.md b/.changeset/bright-ghosts-tap.md
new file mode 100644
index 000000000..cc1adbfe1
--- /dev/null
+++ b/.changeset/bright-ghosts-tap.md
@@ -0,0 +1,6 @@
+---
+"@marigold/eslint-config": patch
+"@marigold/jest-config": patch
+---
+
+feat: losen peer deps for usage with npm
diff --git a/.changeset/fair-carpets-share.md b/.changeset/fair-carpets-share.md
new file mode 100644
index 000000000..d0bb62caa
--- /dev/null
+++ b/.changeset/fair-carpets-share.md
@@ -0,0 +1,6 @@
+---
+"@marigold/docs": patch
+"@marigold/components": patch
+---
+
+chore: add height prop to Breakout and refactor docs page
diff --git a/config/eslint/package.json b/config/eslint/package.json
index 472163ab3..c2b04ed46 100644
--- a/config/eslint/package.json
+++ b/config/eslint/package.json
@@ -39,7 +39,7 @@
   },
   "peerDependencies": {
     "eslint": "8.x.x",
-    "typescript": "4.7.x || 4.8.x"
+    "typescript": "4.8.x"
   },
   "devDependencies": {
     "eslint": "8.23.0",
diff --git a/config/jest/package.json b/config/jest/package.json
index 502f672a6..cef70954e 100644
--- a/config/jest/package.json
+++ b/config/jest/package.json
@@ -33,10 +33,10 @@
     "ts-jest": "29.0.0"
   },
   "peerDependencies": {
-    "jest": "28.x || 29.x",
-    "jest-environment-jsdom": "28.x || 29.x",
+    "jest": "29.x",
+    "jest-environment-jsdom": "29.x",
     "react": "18.x",
-    "typescript": "4.8.3"
+    "typescript": "4.x"
   },
   "devDependencies": {
     "jest": "29.0.3",
diff --git a/docs/src/demos/components/Breakout/basic-breakout.demo.tsx b/docs/src/demos/components/Breakout/basic-breakout.demo.tsx
index 7b14e16a9..faebb3455 100644
--- a/docs/src/demos/components/Breakout/basic-breakout.demo.tsx
+++ b/docs/src/demos/components/Breakout/basic-breakout.demo.tsx
@@ -1,20 +1,33 @@
 import { Container, Breakout, Box } from '@marigold/components';
 
 export const BasicBreakout = () => (
-  <Container alignItems="center">
-    <Box border="1px solid #ced4da" bg="#e9ecef" height="80px" width="100%" />
-    <Breakout>
+  <Container align="center">
+    <Box
+      css={{
+        border: '1px solid #ced4da',
+        bg: '#e9ecef',
+        height: '80px',
+        width: '100%',
+      }}
+    />
+    <Breakout verticalAlign="center">
       <Box
-        as={Breakout}
-        verticalAlign="center"
-        horizontalAlign="center"
-        border="1px solid #ced4da"
-        bg="#e9ecef"
-        height="80px"
+        css={{
+          bg: '#e9ecef',
+          border: '1px solid #ced4da',
+          textAlign: 'center',
+        }}
       >
         BREAKOUT
       </Box>
     </Breakout>
-    <Box border="1px solid #ced4da" bg="#e9ecef" height="80px" width="100%" />
+    <Box
+      css={{
+        border: '1px solid #ced4da',
+        bg: '#e9ecef',
+        height: '80px',
+        width: '100%',
+      }}
+    />
   </Container>
 );
diff --git a/docs/src/demos/components/Breakout/horizontal-breakout.demo.tsx b/docs/src/demos/components/Breakout/horizontal-breakout.demo.tsx
index 98eb636f6..cda5b828b 100644
--- a/docs/src/demos/components/Breakout/horizontal-breakout.demo.tsx
+++ b/docs/src/demos/components/Breakout/horizontal-breakout.demo.tsx
@@ -1,17 +1,25 @@
-import { Box, Breakout } from '@marigold/components';
+import { Box, Breakout, Container } from '@marigold/components';
 
 export const HorizontalBreakout = () => (
-  <Breakout>
+  <Container align="center">
     <Box
-      as={Breakout}
-      border="1px solid #ced4da"
-      bg="#e9ecef"
-      height="100px"
-      p="small"
-      horizontalAlign="bottom"
-      verticalAlign="center"
-    >
-      BREAKOUT with bottom aligned content
-    </Box>
-  </Breakout>
+      css={{
+        border: '1px solid #ced4da',
+        bg: '#e9ecef',
+        height: '80px',
+        width: '100%',
+      }}
+    />
+    <Breakout horizontalAlign="right">
+      <Box>BREAKOUT with right aligned content</Box>
+    </Breakout>
+    <Box
+      css={{
+        border: '1px solid #ced4da',
+        bg: '#e9ecef',
+        height: '80px',
+        width: '100%',
+      }}
+    />
+  </Container>
 );
diff --git a/docs/src/demos/components/Breakout/iframe-breakout.demo.tsx b/docs/src/demos/components/Breakout/iframe-breakout.demo.tsx
index ed227758c..74c941bf2 100644
--- a/docs/src/demos/components/Breakout/iframe-breakout.demo.tsx
+++ b/docs/src/demos/components/Breakout/iframe-breakout.demo.tsx
@@ -1,7 +1,7 @@
 import { Aspect, Box, Breakout, Container, Text } from '@marigold/components';
 
 export const iframeBreakout = () => (
-  <Container alignItems="center">
+  <Container align="center">
     <Box as={Text} pb="medium">
       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
diff --git a/docs/src/demos/components/Breakout/text-breakout.demo.tsx b/docs/src/demos/components/Breakout/text-breakout.demo.tsx
index e149ecfe4..8ae385dd3 100644
--- a/docs/src/demos/components/Breakout/text-breakout.demo.tsx
+++ b/docs/src/demos/components/Breakout/text-breakout.demo.tsx
@@ -1,24 +1,26 @@
-import { Container, Breakout, Box, Text } from '@marigold/components';
+import { Container, Breakout, Text } from '@marigold/components';
 
 export const TextBreakout = () => (
-  <Container alignItems="center">
-    <Box as={Text} pb="medium">
+  <Container align="center">
+    <Text p="medium">
       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.
-    </Box>
-    <Box as={Breakout} verticalAlign="left" css={{ fontWeight: 800 }}>
-      IMPORTANT: This is a breakout text inside a container full of random text.
-      Aligned from left to write and more width than the maximum width of the
-      container.
-    </Box>
-    <Box as={Text} pt="medium">
+    </Text>
+    <Breakout>
+      <Text>
+        IMPORTANT: This is a breakout text inside a container full of random
+        text. Aligned from left to write and more width than the maximum width
+        of the container.
+      </Text>
+    </Breakout>
+    <Text p="medium">
       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.
-    </Box>
+    </Text>
   </Container>
 );
diff --git a/docs/src/demos/components/Breakout/vertical-breakout.demo.tsx b/docs/src/demos/components/Breakout/vertical-breakout.demo.tsx
index 97634a30b..485a027da 100644
--- a/docs/src/demos/components/Breakout/vertical-breakout.demo.tsx
+++ b/docs/src/demos/components/Breakout/vertical-breakout.demo.tsx
@@ -1,15 +1,32 @@
-import { Box, Breakout } from '@marigold/components';
+import { Box, Breakout, Container } from '@marigold/components';
 
-export const LeftAlignment = () => (
-  <Breakout>
+export const VerticalAlignment = () => (
+  <Container align="center">
     <Box
-      as={Breakout}
-      border="1px solid #ced4da"
-      bg="#e9ecef"
-      height="100px"
-      p="small"
-    >
-      BREAKOUT with left aligned content
-    </Box>
-  </Breakout>
+      css={{
+        border: '1px solid #ced4da',
+        bg: '#e9ecef',
+        height: '80px',
+        width: '100%',
+      }}
+    />
+    <Breakout height="100px" verticalAlign="bottom">
+      <Box
+        css={{
+          bg: '#e9ecef',
+          border: '1px solid #ced4da',
+        }}
+      >
+        BREAKOUT with bottom alignment
+      </Box>
+    </Breakout>
+    <Box
+      css={{
+        border: '1px solid #ced4da',
+        bg: '#e9ecef',
+        height: '80px',
+        width: '100%',
+      }}
+    />
+  </Container>
 );
diff --git a/docs/src/demos/components/Container/basic-container.demo.tsx b/docs/src/demos/components/Container/basic-container.demo.tsx
index 3737d17a4..956272a78 100644
--- a/docs/src/demos/components/Container/basic-container.demo.tsx
+++ b/docs/src/demos/components/Container/basic-container.demo.tsx
@@ -2,15 +2,15 @@ import { Box, Container, Headline, Text } from '@marigold/components';
 
 export const BasicContainer = () => (
   <Box border="1px solid #ced4da" bg="#e9ecef" p="xsmall">
-    <Box as={Container} contentType="header" align="center" alignItems="center">
+    <Container contentType="header" align="center" alignItems="center">
       <Headline level="2">Container header</Headline>
-    </Box>
-    <Box as={Container} align="center" alignItems="center">
+    </Container>
+    <Container align="center" alignItems="center">
       <Text>
         The container content is for example a long text to present information.
         In this case it is an unnecessary text that is only used to fill the
         width of the container content. Thank you for reading this.
       </Text>
-    </Box>
+    </Container>
   </Box>
 );
diff --git a/docs/src/demos/components/Container/full-container.demo.tsx b/docs/src/demos/components/Container/full-container.demo.tsx
index 517ae1974..d173e575f 100644
--- a/docs/src/demos/components/Container/full-container.demo.tsx
+++ b/docs/src/demos/components/Container/full-container.demo.tsx
@@ -1,29 +1,25 @@
-import { Box, Container, Headline, Text } from '@marigold/components';
+import { Container, Headline, List, Text } from '@marigold/components';
 
 export const TextBlockContainer = () => (
-  <Box as={Container} bg="blue10" align="center" alignItems="center" p="small">
+  <Container size="large" alignItems="left" align="center">
     <Headline level="2">Star Wars - The Empire Strikes Back</Headline>
-    <Box pt="xsmall" width="100%">
-      <Text>
-        It is a dark time for the Rebellion. Although the Death Star has been
-        destroyed, Imperial troops have driven the Rebel forces from their
-        hidden base and pursued them across the galaxy. Evading the dreaded
-        Imperial Starfleet, a group of freedom fighters led by Luke Skywalker
-        has established a new secret base on the remote ice world of Hoth. The
-        evil lord Darth Vader, obsessed with finding young Skywalker, has
-        dispatched thousands of remote probes into the far reaches of space....
-      </Text>
-    </Box>
-    <Box width="20ch">
-      <ul>
-        <li>Luke</li>
-        <li>Leia</li>
-        <li>Han Solo</li>
-        <li>Chewbacca</li>
-        <li>R2D2</li>
-        <li>C3PO</li>
-        <li>Darth Vader</li>
-      </ul>
-    </Box>
-  </Box>
+    <Text py="small">
+      It is a dark time for the Rebellion. Although the Death Star has been
+      destroyed, Imperial troops have driven the Rebel forces from their hidden
+      base and pursued them across the galaxy. Evading the dreaded Imperial
+      Starfleet, a group of freedom fighters led by Luke Skywalker has
+      established a new secret base on the remote ice world of Hoth. The evil
+      lord Darth Vader, obsessed with finding young Skywalker, has dispatched
+      thousands of remote probes into the far reaches of space....
+    </Text>
+    <List>
+      <List.Item>Luke</List.Item>
+      <List.Item>Leia</List.Item>
+      <List.Item>Han Solo</List.Item>
+      <List.Item>Chewbacca</List.Item>
+      <List.Item>R2D2</List.Item>
+      <List.Item>C3PO</List.Item>
+      <List.Item>Darth Vader</List.Item>
+    </List>
+  </Container>
 );
diff --git a/docs/src/demos/components/Container/index.ts b/docs/src/demos/components/Container/index.ts
index 96fb6339d..51b5ac0d4 100644
--- a/docs/src/demos/components/Container/index.ts
+++ b/docs/src/demos/components/Container/index.ts
@@ -1,7 +1,3 @@
 export * from './basic-container.demo';
-export * from './small-header-container.demo';
-export * from './medium-header-container.demo';
-export * from './large-header-container.demo';
-export * from './small-content-container.demo';
+export * from './small-container.demo';
 export * from './full-container.demo';
-export * from './large-content-container.demo';
diff --git a/docs/src/demos/components/Container/large-content-container.demo.tsx b/docs/src/demos/components/Container/large-content-container.demo.tsx
deleted file mode 100644
index b3fbde0e5..000000000
--- a/docs/src/demos/components/Container/large-content-container.demo.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Container, Text } from '@marigold/components';
-
-export const LargeContentContainer = () => (
-  <Container size="medium" align="center">
-    <Text>
-      The evil lord Darth Vader, obsessed with finding young Skywalker, has
-      dispatched thousands of remote probes into the far reaches of space....
-    </Text>
-  </Container>
-);
diff --git a/docs/src/demos/components/Container/large-header-container.demo.tsx b/docs/src/demos/components/Container/large-header-container.demo.tsx
deleted file mode 100644
index 4e3cebc2c..000000000
--- a/docs/src/demos/components/Container/large-header-container.demo.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Container, Headline } from '@marigold/components';
-
-export const LargeHeaderContainer = () => (
-  <Container contentType="header" size="large">
-    <Headline level="2">Star Wars - The Empire Strikes Back</Headline>
-  </Container>
-);
diff --git a/docs/src/demos/components/Container/medium-header-container.demo.tsx b/docs/src/demos/components/Container/medium-header-container.demo.tsx
deleted file mode 100644
index 7393b76c0..000000000
--- a/docs/src/demos/components/Container/medium-header-container.demo.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Container, Headline } from '@marigold/components';
-
-export const MediumHeaderContainer = () => (
-  <Container contentType="header" size="medium">
-    <Headline level="2">Star Wars - The Empire Strikes Back</Headline>
-  </Container>
-);
diff --git a/docs/src/demos/components/Container/small-container.demo.tsx b/docs/src/demos/components/Container/small-container.demo.tsx
new file mode 100644
index 000000000..fa6a2ed3f
--- /dev/null
+++ b/docs/src/demos/components/Container/small-container.demo.tsx
@@ -0,0 +1,16 @@
+import { Container, Headline, Text } from '@marigold/components';
+
+export const SmallSizesContainer = () => (
+  <>
+    <Container contentType="header" size="small" align="center">
+      <Headline level="2">Star Wars - The Empire Strikes Back</Headline>
+    </Container>
+    <Container size="small" align="center">
+      <Text>
+        It is a dark time for the Rebellion. Although the Death Star has been
+        destroyed, Imperial troops have driven the Rebel forces from their
+        hidden base and pursued them across the galaxy.
+      </Text>
+    </Container>
+  </>
+);
diff --git a/docs/src/demos/components/Container/small-content-container.demo.tsx b/docs/src/demos/components/Container/small-content-container.demo.tsx
deleted file mode 100644
index f320f1d21..000000000
--- a/docs/src/demos/components/Container/small-content-container.demo.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Container, Text } from '@marigold/components';
-
-export const SmallContentContainer = () => (
-  <Container size="small" align="center">
-    <Text>
-      It is a dark time for the Rebellion. Although the Death Star has been
-      destroyed, Imperial troops have driven the Rebel forces from their hidden
-      base and pursued them across the galaxy.
-    </Text>
-  </Container>
-);
diff --git a/docs/src/demos/components/Container/small-header-container.demo.tsx b/docs/src/demos/components/Container/small-header-container.demo.tsx
deleted file mode 100644
index 85056f22c..000000000
--- a/docs/src/demos/components/Container/small-header-container.demo.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Container, Headline } from '@marigold/components';
-
-export const SmallHeaderContainer = () => (
-  <Container contentType="header" size="small">
-    <Headline level="2">Star Wars - The Empire Strikes Back</Headline>
-  </Container>
-);
diff --git a/docs/src/pages/components/breakout.mdx b/docs/src/pages/components/breakout.mdx
index 2b0dd404f..01688c7b9 100644
--- a/docs/src/pages/components/breakout.mdx
+++ b/docs/src/pages/components/breakout.mdx
@@ -3,31 +3,80 @@ title: Breakout
 group: Layout
 github: https://github.com/marigold-ui/marigold/blob/main/packages/components/src/Breakout/Breakout.tsx
 edit: https://github.com/marigold-ui/marigold/blob/main/docs/src/pages/components/breakout.mdx
+caption: Component that breaks out of a grid layout context.
 ---
 
-Breakout is a Layout element which lets you span the full row in a CSS grid context e.g. our Container component. You can use `horizontalAlign` or `verticalAlign` to place the items inside the Breakout element.
-
-```tsx preview file=components/Breakout/basic-breakout.demo.tsx
-
+`<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 `horizontalAlign` or `verticalAlign` to place the items inside the `<Breakout>` element.
+
+<Preview>
+  <Container align="center">
+    <Box
+      css={{
+        border: '1px solid #ced4da',
+        bg: '#e9ecef',
+        height: '80px',
+        width: '100%',
+      }}
+    />
+    <Breakout horizontalAlign="center" height="150px" verticalAlign="center">
+      <Box
+        css={{
+          bg: '#e9ecef',
+          border: '1px solid #ced4da',
+          p: 'small',
+        }}
+      >
+        BREAKOUT
+      </Box>
+    </Breakout>
+    <Box
+      css={{
+        border: '1px solid #ced4da',
+        bg: '#e9ecef',
+        height: '80px',
+        width: '100%',
+      }}
+    />
+  </Container>
+</Preview>
+
+## Usage
+
+### Import
+
+To import the component you just have to use this code below.
+
+```tsx
+import { Breakout } from '@marigold/components';
 ```
 
-## Props
+### Props
 
 <PropsTable
   props={[
     {
       property: 'horizontalAlign',
-      type: '"top", "bottom", "center"',
+      type: '"left" | "right" | "center"',
       description:
-        'Horizontal alignment of the items inside the Breakout element',
-      default: '"center"',
+        'Horizontal alignment of the items inside the breakout element.',
+      default: 'left',
     },
     {
       property: 'verticalAlign',
-      type: '"left", "center", "right"',
+      type: '"top" | "bottom" | "center"',
       description:
-        'Vertical alignment of the items inside the Breakout element',
-      default: '"center"',
+        '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',
     },
   ]}
 />
@@ -36,23 +85,23 @@ Breakout is a Layout element which lets you span the full row in a CSS grid cont
 
 ### Vertical alignment
 
+In this case the `height` prop is necessary, if you haven't set it, the `verticalAlign` has no impact.
+
 ```tsx preview file=components/Breakout/vertical-breakout.demo.tsx
 
 ```
 
 ### Horizontal alignment
 
+Example to show how the `horizontalAlign` prop is to set. Options are `"left" | "center" | "right"`. The default value is `left`.
+
 ```tsx preview file=components/Breakout/horizontal-breakout.demo.tsx
 
 ```
 
-### Breakout Text inside Container
-
-```tsx preview file=components/Breakout/text-breakout.demo.tsx
-
-```
+### Breakout iframe
 
-### Breakout iframe inside Text Container
+This example shows how to use an `<iframe>` within a `<Breakout>`.
 
 ```tsx preview file=components/Breakout/iframe-breakout.demo.tsx
 
diff --git a/docs/src/pages/components/container.mdx b/docs/src/pages/components/container.mdx
index 6ad9a0418..f8ee910d7 100644
--- a/docs/src/pages/components/container.mdx
+++ b/docs/src/pages/components/container.mdx
@@ -3,40 +3,55 @@ title: Container
 group: Layout
 github: https://github.com/marigold-ui/marigold/blob/main/packages/components/src/Container/Container.tsx
 edit: https://github.com/marigold-ui/marigold/blob/main/docs/src/pages/components/container.mdx
+caption: Component used to structure the content.
 ---
 
-Containers width is based on used font and is optimized for readability. You can use `header` or `content` as content type and set the `size` prop to `small`, `medium` or `large`.
+The `<Container>` component is a CSS grid layout component in which you can wrap child components. This component should be used if you want to structure content or form components. It is also useful when you want to use a [`<Breakout>`](/components/breakout/).
 
-```tsx preview file=components/Container/basic-container.demo.tsx
+`<Container>` width is based on used font and is optimized for readability. You can use `header` or `content` as content type and set the `size` prop to `small`, `medium` or `large`.
 
+It is also possible to set the alignment for the `<Container>` itself and for its children.
+
+<Preview>
+  <BasicContainer />
+</Preview>
+
+## Usage
+
+### Import
+
+To import the component you just have to use this code below.
+
+```tsx
+import { Container } from '@marigold/components';
 ```
 
-## Props
+### Props
 
 <PropsTable
   props={[
     {
       property: 'contentType',
-      description: 'The content type of the container',
-      type: '"header", "content"',
+      description: 'The content type of the container.',
+      type: '"header" | "content"',
       default: '"content"',
     },
     {
       property: 'size',
-      description: 'The size of the container',
-      type: '"small", "medium", "large"',
+      description: 'The size of the container.',
+      type: '"small" | "medium" | "large"',
       default: '"medium"',
     },
     {
       property: 'align',
-      description: 'set alignment the content inside the container',
-      type: '"left", "center", "right"',
+      description: 'Set alignment the content inside the container.',
+      type: '"left" | "center" | "right"',
       default: '"left"',
     },
     {
       property: 'alignItems',
-      description: 'set alignment of the items inside the container',
-      type: '"left", "center", "right", "none"',
+      description: 'Set alignment of the items inside the container.',
+      type: '"left" | "center" | "right" | "none"',
       default: '"none"',
     },
   ]}
@@ -44,33 +59,17 @@ Containers width is based on used font and is optimized for readability. You can
 
 ## Examples
 
-### Container header small, medium & large
-
-```tsx preview file=components/Container/small-header-container.demo.tsx
-
-```
-
-```tsx preview file=components/Container/medium-header-container.demo.tsx
+### Container sizes
 
-```
-
-```tsx preview file=components/Container/large-header-container.demo.tsx
-
-```
-
-### Container content small, medium & large
-
-```tsx preview file=components/Container/small-content-container.demo.tsx
-
-```
+In this example the `size` prop is set to small. You can also choose medium or large size. It sets the width of the content of the container.
 
-```tsx preview file=components/Container/large-content-container.demo.tsx
+```tsx preview file=components/Container/small-container.demo.tsx
 
 ```
 
 ## Text Container
 
-In some cases, the width of the content can be smaller than the container's width. You can use the align prop to align the content left, center or right.
+In some cases, the width of the content can be smaller than the container's width. You can use the `align` prop to align the container left, center or right. The `alignItems` props allows you to align the children left, center or right.
 
 ```tsx preview file=components/Container/full-container.demo.tsx
 
diff --git a/packages/components/src/Breakout/Breakout.stories.tsx b/packages/components/src/Breakout/Breakout.stories.tsx
index 47d8253f4..432872615 100644
--- a/packages/components/src/Breakout/Breakout.stories.tsx
+++ b/packages/components/src/Breakout/Breakout.stories.tsx
@@ -12,52 +12,61 @@ import { Breakout } from './Breakout';
 export default {
   title: 'Components/Breakout',
   argTypes: {
-    horizontalAlign: {
+    verticalAlign: {
       control: {
         type: 'select',
       },
       options: ['top', 'center', 'bottom'],
-      description: 'horizontal alignment',
+      description: 'vertical alignment',
       table: {
         defaultValue: {
-          summary: 'center',
+          summary: 'top',
         },
       },
     },
-    verticalAlign: {
+    horizontalAlign: {
       control: {
         type: 'select',
       },
       options: ['left', 'center', 'right'],
-      description: 'vertical alignment',
+      description: 'horizontal alignment',
       table: {
         defaultValue: {
-          summary: 'center',
+          summary: 'left',
         },
       },
     },
   },
 } as Meta;
 
-export const Basic: ComponentStory<typeof Breakout> = args => (
-  <Container size="large" align="center">
-    <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" width="100%" />
-    <Box
-      as={Breakout}
-      border="1px solid #ced4da"
-      bg="#e9ecef"
-      height="100px"
-      {...args}
-    >
-      BREAKOUT
-    </Box>
-    <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" width="100%" />
-  </Container>
-);
-
+export const Basic: ComponentStory<typeof Breakout> = args => {
+  return (
+    <Container align="center">
+      <Box
+        css={{
+          border: '1px solid #ced4da',
+          bg: '#e9ecef',
+          height: '80px',
+          width: '100%',
+        }}
+      />
+      <Breakout {...args}>
+        <Text>Breakout</Text>
+      </Breakout>
+      <Box
+        css={{
+          border: '1px solid #ced4da',
+          bg: '#e9ecef',
+          height: '80px',
+          width: '100%',
+        }}
+      />
+    </Container>
+  );
+};
 export const ExampleText: ComponentStory<typeof Breakout> = args => (
   <Container size="large" align="center">
-    <Box as={Text} p="small">
+    <Text>
       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
@@ -67,17 +76,13 @@ export const ExampleText: ComponentStory<typeof Breakout> = args => (
       sheets containing Lorem Ipsum passages, and more recently with desktop
       publishing software like Aldus PageMaker including versions of Lorem
       Ipsum.
-    </Box>
-    <Box
-      as={Breakout}
-      border="1px solid #ced4da"
-      bg="#e9ecef"
-      height="100px"
-      {...args}
-    >
-      BREAKOUT element inside a container
-    </Box>
-    <Box as={Text} p="small">
+    </Text>
+    <Breakout {...args}>
+      <Box border="1px solid #ced4da" bg="#e9ecef" height="100px">
+        BREAKOUT element inside a container
+      </Box>
+    </Breakout>
+    <Text>
       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
@@ -87,19 +92,19 @@ export const ExampleText: ComponentStory<typeof Breakout> = args => (
       sheets containing Lorem Ipsum passages, and more recently with desktop
       publishing software like Aldus PageMaker including versions of Lorem
       Ipsum.
-    </Box>
+    </Text>
   </Container>
 );
 
 export const ExampleFrame: ComponentStory<typeof Breakout> = args => (
   <Container align="center">
-    <Box as={Text} pb="medium">
+    <Text>
       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.
-    </Box>
-    <Breakout>
+    </Text>
+    <Breakout {...args}>
       <Aspect ratio="ultrawide">
         <Image
           src="https://images.unsplash.com/photo-1511468102400-883d6ea28755?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"
@@ -107,12 +112,12 @@ export const ExampleFrame: ComponentStory<typeof Breakout> = args => (
         />
       </Aspect>
     </Breakout>
-    <Box as={Text} pt="medium">
+    <Text>
       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.
-    </Box>
+    </Text>
   </Container>
 );
diff --git a/packages/components/src/Breakout/Breakout.tsx b/packages/components/src/Breakout/Breakout.tsx
index 2584c6f56..6987cf0da 100755
--- a/packages/components/src/Breakout/Breakout.tsx
+++ b/packages/components/src/Breakout/Breakout.tsx
@@ -5,8 +5,9 @@ import { Box } from '../Box';
 
 export interface BreakoutProps extends ComponentProps<'div'> {
   children?: ReactNode;
-  horizontalAlign?: 'top' | 'bottom' | 'center';
-  verticalAlign?: 'left' | 'right' | 'center';
+  verticalAlign?: 'top' | 'bottom' | 'center';
+  horizontalAlign?: 'left' | 'right' | 'center';
+  height?: string;
 }
 
 const useAlignment = (direction?: string) => {
@@ -24,19 +25,22 @@ const useAlignment = (direction?: string) => {
 export const Breakout = ({
   horizontalAlign,
   verticalAlign,
+  height,
   children,
   ...props
 }: BreakoutProps) => {
-  const alignItems = useAlignment(horizontalAlign);
-  const justifyContent = useAlignment(verticalAlign);
+  const alignItems = useAlignment(verticalAlign);
+  const justifyContent = useAlignment(horizontalAlign);
+
   return (
     <Box
       alignItems={alignItems}
       justifyContent={justifyContent}
       width="100%"
+      height={height}
       display={verticalAlign || horizontalAlign ? 'flex' : 'block'}
-      css={{
-        gridColumn: '1 / -1',
+      __baseCSS={{
+        gridColumn: '1 / -1 !important',
       }}
       {...props}
     >
diff --git a/packages/components/src/Container/Container.stories.tsx b/packages/components/src/Container/Container.stories.tsx
index 060c536b5..98bb39e30 100644
--- a/packages/components/src/Container/Container.stories.tsx
+++ b/packages/components/src/Container/Container.stories.tsx
@@ -34,7 +34,7 @@ export default {
       control: {
         type: 'select',
       },
-      options: ['left', 'center', 'right'],
+      options: ['left', 'center', 'right', 'none'],
       description: 'set alignment of the items inside the container',
     },
   },


Test patch:
diff --git a/packages/components/src/Breakout/Breakout.test.tsx b/packages/components/src/Breakout/Breakout.test.tsx
index 20034289a..b514c1bd5 100644
--- a/packages/components/src/Breakout/Breakout.test.tsx
+++ b/packages/components/src/Breakout/Breakout.test.tsx
@@ -10,15 +10,15 @@ test('has gridColumn and default width', () => {
   expect(breakout).toHaveStyle(`width: 100%`);
 });
 
-test('supports default verticalAlign left', () => {
+test('supports default horizontalAlign left', () => {
   render(<Breakout data-testid="breakout">breakout</Breakout>);
   const breakout = screen.getByTestId(/breakout/);
   expect(breakout).toHaveStyle(`justifyContent: flex-start`);
 });
 
-test('supports verticalAlign center', () => {
+test('supports horizontal center', () => {
   render(
-    <Breakout verticalAlign="center" data-testid="breakout">
+    <Breakout horizontalAlign="center" data-testid="breakout">
       breakout
     </Breakout>
   );
@@ -26,9 +26,9 @@ test('supports verticalAlign center', () => {
   expect(breakout).toHaveStyle(`justifyContent: center`);
 });
 
-test('supports verticalAlign right', () => {
+test('supports horizontalAlign right', () => {
   render(
-    <Breakout verticalAlign="right" data-testid="breakout">
+    <Breakout horizontalAlign="right" data-testid="breakout">
       breakout
     </Breakout>
   );
@@ -42,9 +42,9 @@ test('supports default horizontalAlign top', () => {
   expect(breakout).toHaveStyle(`alignItems: flex-start`);
 });
 
-test('supports horizontalAlign center', () => {
+test('supports verticalAlign center', () => {
   render(
-    <Breakout horizontalAlign="center" data-testid="breakout">
+    <Breakout verticalAlign="center" data-testid="breakout">
       breakout
     </Breakout>
   );
@@ -52,12 +52,22 @@ test('supports horizontalAlign center', () => {
   expect(breakout).toHaveStyle(`alignItems: center`);
 });
 
-test('supports horizontalAlign bottom', () => {
+test('supports verticalAlign bottom', () => {
   render(
-    <Breakout horizontalAlign="bottom" data-testid="breakout">
+    <Breakout verticalAlign="bottom" data-testid="breakout">
       breakout
     </Breakout>
   );
   const breakout = screen.getByTestId(/breakout/);
   expect(breakout).toHaveStyle(`alignItems: flex-end`);
 });
+
+test('supports height prop', () => {
+  render(
+    <Breakout height="200px" data-testid="breakout">
+      breakout
+    </Breakout>
+  );
+  const breakout = screen.getByTestId(/breakout/);
+  expect(breakout).toHaveStyle(`height: 200px`);
+});