Merge branch 'main' into accordion-page

docs/content/components/container/container.mdx

@@ -0,0 +1,66 @@
+---
+title: Container
+group: Layout
+caption: Component used to structure the content.
+---
+
+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/).
+
+`<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.
+
+## Usage
+
+### Import
+
+To import the component you just have to use this code below.
+
+```tsx
+import { Container } from '@marigold/components';
+```
+
+### Props
+
+<PropsTable
+  props={[
+    {
+      property: 'contentType',
+      description: 'The content type of the container.',
+      type: '"header" | "content"',
+      default: '"content"',
+    },
+    {
+      property: 'size',
+      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"',
+      default: '"left"',
+    },
+    {
+      property: 'alignItems',
+      description: 'Set alignment of the items inside the container.',
+      type: '"left" | "center" | "right" | "none"',
+      default: '"none"',
+    },
+  ]}
+/>
+
+## Examples
+
+### Container sizes
+
+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.
+
+<ComponentDemo file="./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 container left, center or right. The `alignItems` props allows you to align the children left, center or right.
+
+<ComponentDemo file="./full-container.demo.tsx" />

docs/content/components/container/full-container.demo.tsx

@@ -0,0 +1,25 @@
+import { Container, Headline, List, Text } from '@marigold/components';
+
+export default () => (
+  <Container size="large" alignItems="left" align="center">
+    <Headline level="2">Star Wars - The Empire Strikes Back</Headline>
+    <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>
+    <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>
+);

docs/content/components/container/small-container.demo.tsx

@@ -0,0 +1,16 @@
+import { Container, Headline, Text } from '@marigold/components';
+
+export default () => (
+  <>
+    <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>
+  </>
+);

docs/registry/index.tsx

@@ -33,23 +33,6 @@ export const registry = {
     ),
     file: 'content/components/accordion/single-select-accordion.demo.tsx',
   },
-  rightside: {
-    name: 'rightside',
-    demo: dynamic(() => import('@/content/components/aside/rightside.demo')),
-    file: 'content/components/aside/rightside.demo.tsx',
-  },
-  space: {
-    name: 'space',
-    demo: dynamic(() => import('@/content/components/aside/space.demo')),
-    file: 'content/components/aside/space.demo.tsx',
-  },
-  'button-variant': {
-    name: 'button-variant',
-    demo: dynamic(
-      () => import('@/content/components/button/button-variant.demo')
-    ),
-    file: 'content/components/button/button-variant.demo.tsx',
-  },
   'horizontal-breakout': {
     name: 'horizontal-breakout',
     demo: dynamic(
@@ -71,4 +54,35 @@ export const registry = {
     ),
     file: 'content/components/breakout/vertical-breakout.demo.tsx',
   },
+  'full-container': {
+    name: 'full-container',
+    demo: dynamic(
+      () => import('@/content/components/container/full-container.demo')
+    ),
+    file: 'content/components/container/full-container.demo.tsx',
+  },
+  'small-container': {
+    name: 'small-container',
+    demo: dynamic(
+      () => import('@/content/components/container/small-container.demo')
+    ),
+    file: 'content/components/container/small-container.demo.tsx',
+  },
+  'button-variant': {
+    name: 'button-variant',
+    demo: dynamic(
+      () => import('@/content/components/button/button-variant.demo')
+    ),
+    file: 'content/components/button/button-variant.demo.tsx',
+  },
+  rightside: {
+    name: 'rightside',
+    demo: dynamic(() => import('@/content/components/aside/rightside.demo')),
+    file: 'content/components/aside/rightside.demo.tsx',
+  },
+  space: {
+    name: 'space',
+    demo: dynamic(() => import('@/content/components/aside/space.demo')),
+    file: 'content/components/aside/space.demo.tsx',
+  },
 } as const;