From e1b64e11a4794c423334b074564c278b1ddf21a7 Mon Sep 17 00:00:00 2001
From: sarahgm <38324334+sarahgm@users.noreply.github.com>
Date: Fri, 21 Jul 2023 13:24:02 +0200
Subject: [PATCH] docs: add split docs and demo (#3163)

* docs: add split docs and demo

* fix
---
 .../[...slug]/_components/PropsTable.tsx      |  4 +-
 .../components/split/split-inline.demo.tsx    | 10 +++++
 .../components/split/split-stack.demo.tsx     | 12 ++++++
 docs/content/components/split/split.mdx       | 38 +++++++++++++++++++
 4 files changed, 61 insertions(+), 3 deletions(-)
 create mode 100644 docs/content/components/split/split-inline.demo.tsx
 create mode 100644 docs/content/components/split/split-stack.demo.tsx
 create mode 100644 docs/content/components/split/split.mdx

diff --git a/docs/app/components/[...slug]/_components/PropsTable.tsx b/docs/app/components/[...slug]/_components/PropsTable.tsx
index 4c66424d3b..90a4f4d6dc 100644
--- a/docs/app/components/[...slug]/_components/PropsTable.tsx
+++ b/docs/app/components/[...slug]/_components/PropsTable.tsx
@@ -13,9 +13,7 @@ export const PropsTable = ({ props }: PropsTableProps) => {
       {!props ? (
         <Inline space={2}>
           <BlankCanvas />
-          <Text>
-            Sorry! There are currently no variants and sizes available.
-          </Text>
+          <Text>Sorry! There are currently no props available.</Text>
         </Inline>
       ) : (
         <Table aria-label="Table with component props" variant="propsTable">
diff --git a/docs/content/components/split/split-inline.demo.tsx b/docs/content/components/split/split-inline.demo.tsx
new file mode 100644
index 0000000000..3a3f1fa7ec
--- /dev/null
+++ b/docs/content/components/split/split-inline.demo.tsx
@@ -0,0 +1,10 @@
+import { Inline, Split, Text } from '@marigold/components';
+
+export default () => (
+  <Inline space={2}>
+    <Text>Blog</Text>
+    <Text>About</Text>
+    <Split />
+    <Text>Login</Text>
+  </Inline>
+);
diff --git a/docs/content/components/split/split-stack.demo.tsx b/docs/content/components/split/split-stack.demo.tsx
new file mode 100644
index 0000000000..0770332771
--- /dev/null
+++ b/docs/content/components/split/split-stack.demo.tsx
@@ -0,0 +1,12 @@
+import { Stack, Split, Text } from '@marigold/components';
+
+export default () => (
+  <div className="h-48">
+    <Stack space={1} stretch>
+      <Text>It's gonna be ...</Text>
+      <Text>wait for it!</Text>
+      <Split />
+      <Text>... legendary!</Text>
+    </Stack>
+  </div>
+);
diff --git a/docs/content/components/split/split.mdx b/docs/content/components/split/split.mdx
new file mode 100644
index 0000000000..56b2b5f34b
--- /dev/null
+++ b/docs/content/components/split/split.mdx
@@ -0,0 +1,38 @@
+---
+title: Split
+group: Layout
+caption: Component that creates spacing between two elements.
+---
+
+`<Split>` is a layout component that allows to split the contents of [`<Inline>`](/components/inline/) and [`<Stack>`](/component/stack/) layouts.
+It should be used if you need to create spacing between elements.
+
+The component behaves like the common used `flex-grow` attribute.
+
+## Usage
+
+### Import
+
+To import the component you just have to use this code below.
+
+```tsx
+import { Split } from '@marigold/components';
+```
+
+### Props
+
+<PropsTable />
+
+## Examples
+
+### With Inline
+
+You can see below how to use the `<Split>` within the `<Inline>`.
+
+<ComponentDemo file="./split-inline.demo.tsx" />
+
+### With Stack
+
+That example shows how to use the `<Split>` within the `<Stack>`.
+
+<ComponentDemo file="./split-stack.demo.tsx" />