From 3bf3a8e66c989185171b6d53e1af4573da817303 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcel=20K=C3=B6hler?=
 <77496890+aromko@users.noreply.github.com>
Date: Mon, 25 Nov 2024 12:07:46 +0100
Subject: [PATCH] docs[DST-615]: Revise `<Center>`documentation (#4312)

---
 .changeset/three-apes-decide.md               |  8 +++
 .../components/layout/center/center.demo.tsx  | 10 +++
 .../components/layout/center/center.mdx       | 63 +++++++++++--------
 .../layout/center/space-center.demo.tsx       |  9 ---
 .../layout/center/text-center.demo.tsx        | 22 -------
 .../layout/center/width-center.demo.tsx       |  7 ---
 .../components/src/Center/Center.stories.tsx  | 30 ++++-----
 7 files changed, 66 insertions(+), 83 deletions(-)
 create mode 100644 .changeset/three-apes-decide.md
 create mode 100644 docs/content/components/layout/center/center.demo.tsx
 delete mode 100644 docs/content/components/layout/center/space-center.demo.tsx
 delete mode 100644 docs/content/components/layout/center/text-center.demo.tsx
 delete mode 100644 docs/content/components/layout/center/width-center.demo.tsx

diff --git a/.changeset/three-apes-decide.md b/.changeset/three-apes-decide.md
new file mode 100644
index 0000000000..890a4c11eb
--- /dev/null
+++ b/.changeset/three-apes-decide.md
@@ -0,0 +1,8 @@
+---
+"@marigold/docs": patch
+"@marigold/components": patch
+---
+
+docs([DST-615]): Revise `<Center>` documentation
+
+Revised the `<Center>` page according to our new structure of component documentation.
diff --git a/docs/content/components/layout/center/center.demo.tsx b/docs/content/components/layout/center/center.demo.tsx
new file mode 100644
index 0000000000..c11a736257
--- /dev/null
+++ b/docs/content/components/layout/center/center.demo.tsx
@@ -0,0 +1,10 @@
+import { Center } from '@marigold/components';
+import { Rectangle } from '@/ui/Rectangle';
+
+export default () => (
+  <Center maxWidth="xxlarge" space={1}>
+    <Rectangle height="50px" width="300px" />
+    <Rectangle height="50px" width="300px" />
+    <Rectangle height="50px" width="300px" />
+  </Center>
+);
diff --git a/docs/content/components/layout/center/center.mdx b/docs/content/components/layout/center/center.mdx
index 8a29db3906..13a4226337 100644
--- a/docs/content/components/layout/center/center.mdx
+++ b/docs/content/components/layout/center/center.mdx
@@ -1,39 +1,50 @@
 ---
 title: Center
 caption: Component to center its children horizontally.
+badge: updated
 ---
 
-The `<Center>` is a layout component that centers its children horizontally.
-You can use it to center a single child or a list of children. The `<Center>` component has also the property maxWidth.
+The `<Center>` is a layout component that centers its children <strong>horizontally</strong> within a container.
 
-The `<Center>` component can also be a child from the [`<Stack>`](/components/stack/) or [`<Inline>`](/components/inline/) component.
+## Usage
 
-## Import
+You can use it to center a single child or a list of children. The `maxWidth` prop sets the maximum width of the container
+and the `space` prop adds spacing between the children elements.
 
-```tsx
-import { Center } from '@marigold/components';
-```
+The `<Center>` component can also be used with components like [`<Text>`](/components/content/text), [`<Stack>`](/components/layout/stack/) or [`<Inline>`](/components/layout/inline/) component.
 
-## Props
-
-<PropsTable component={title} />
-
-## Examples
-
-### Center element with maximum width
-
-To center an element you must give the element a `maxWidth` prop.
+<ComponentDemo file="./center.demo.tsx" />
 
-<ComponentDemo file="./width-center.demo.tsx" />
-
-### Center more than one element with space
-
-To add spaces between each child you can use the prop `space`.
-
-<ComponentDemo file="./space-center.demo.tsx" />
+## Props
 
-### Center inside Text Block
+<StorybookHintMessage component={title} />
 
-If you want to center something like a `<Button>` you must only wrap your component with a `<Center>` component.
+<PropsTable component={title} />
 
-<ComponentDemo file="./text-center.demo.tsx" />
+## Related
+
+<TeaserList
+  items={[
+    {
+      title: 'Building layouts',
+      href: '../../foundations/layouts',
+      caption: 'Learn how to build layouts.',
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="size-6"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 0 1-1.125-1.125v-3.75ZM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125v-8.25ZM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125v-2.25Z"
+          />
+        </svg>
+      ),
+    },
+  ]}
+/>
diff --git a/docs/content/components/layout/center/space-center.demo.tsx b/docs/content/components/layout/center/space-center.demo.tsx
deleted file mode 100644
index 1369aeff21..0000000000
--- a/docs/content/components/layout/center/space-center.demo.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Center } from '@marigold/components';
-
-export default () => (
-  <Center maxWidth="xxlarge" space={1}>
-    <div className="h-28 w-1/2 border border-slate-300 bg-slate-200" />
-    <div className="h-28 w-1/2 border border-slate-300 bg-slate-200" />
-    <div className="h-28 w-1/2 border border-slate-300 bg-slate-200" />
-  </Center>
-);
diff --git a/docs/content/components/layout/center/text-center.demo.tsx b/docs/content/components/layout/center/text-center.demo.tsx
deleted file mode 100644
index bc1031ec77..0000000000
--- a/docs/content/components/layout/center/text-center.demo.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Button, Center, Headline, Stack, Text } from '@marigold/components';
-
-export default () => (
-  <Stack space={4}>
-    <Headline level={3}>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.
-    </Text>
-    <Center>
-      <Button variant="secondary">Watch now</Button>
-    </Center>
-    <Text>
-      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>
-  </Stack>
-);
diff --git a/docs/content/components/layout/center/width-center.demo.tsx b/docs/content/components/layout/center/width-center.demo.tsx
deleted file mode 100644
index 7c33fc11c3..0000000000
--- a/docs/content/components/layout/center/width-center.demo.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Center } from '@marigold/components';
-
-export default () => (
-  <Center maxWidth="xxlarge">
-    <div className="h-28 w-1/2 border border-slate-300 bg-slate-200" />
-  </Center>
-);
diff --git a/packages/components/src/Center/Center.stories.tsx b/packages/components/src/Center/Center.stories.tsx
index 7307e091d2..4260d964a2 100644
--- a/packages/components/src/Center/Center.stories.tsx
+++ b/packages/components/src/Center/Center.stories.tsx
@@ -18,7 +18,7 @@ const meta = {
         'the maximum width of the center element. Should be a string value (e.g. 500px)',
       table: {
         defaultValue: {
-          summary: 'not set',
+          summary: '100%',
         },
       },
     },
@@ -42,42 +42,34 @@ type Story = StoryObj<typeof meta>;
 
 export const Basic: Story = {
   render: args => (
-    <Center {...args}>
-      <div className="h-[100px] w-full border border-solid border-[#ced4da] bg-[#ced4da]" />
+    <Center maxWidth="xxlarge" {...args}>
+      <div className="h-28 w-1/2 border border-slate-300 bg-slate-200" />
     </Center>
   ),
 };
 
 export const Children: Story = {
   render: args => (
-    <Center {...args}>
-      <div className="h-[100px] w-full border border-solid border-[#ced4da] bg-[#ced4da]" />
-      <div className="h-[100px] w-full border border-solid border-[#ced4da] bg-[#ced4da]" />
-      <div className="h-[100px] w-full border border-solid border-[#ced4da] bg-[#ced4da]" />
+    <Center {...args} space={2}>
+      <div className="h-28 w-1/2 border border-slate-300 bg-slate-200" />
+      <div className="h-28 w-1/2 border border-slate-300 bg-slate-200" />
+      <div className="h-28 w-1/2 border border-slate-300 bg-slate-200" />
     </Center>
   ),
 };
 
-export const Icon: Story = {
+export const Nested: Story = {
   render: args => (
     <Center {...args}>
       <div className="size-[40px] bg-blue-700">
-        <Ticket className="fill-white" />
+        <Center {...args}>
+          <Ticket className="fill-white" />
+        </Center>
       </div>
     </Center>
   ),
 };
 
-export const SpaceCenter: Story = {
-  render: args => (
-    <Center maxWidth="500px" space={4} {...args}>
-      <div className="h-28 w-1/2 border border-slate-300 bg-slate-200" />
-      <div className="h-28 w-1/2 border border-slate-300 bg-slate-200" />
-      <div className="h-28 w-1/2 border border-slate-300 bg-slate-200" />
-    </Center>
-  ),
-};
-
 export const Complex: Story = {
   render: args => (
     <Stack space={3}>