From a9a3284d08d7bf6ef2cfbd182e0b4c2744fa542b Mon Sep 17 00:00:00 2001
From: sarahgm <38324334+sarahgm@users.noreply.github.com>
Date: Mon, 24 Jul 2023 13:54:56 +0200
Subject: [PATCH] docs: list demo and docs (#3196)

* docs: list demo and docs

* save
---
 .../components/list/list-ordered.demo.tsx     | 11 ++++
 .../list/list-unorded-stacked.demo.tsx        | 30 ++++++++++
 docs/content/components/list/list.mdx         | 60 +++++++++++++++++++
 .../components/list/simple-list.demo.tsx      | 11 ++++
 4 files changed, 112 insertions(+)
 create mode 100644 docs/content/components/list/list-ordered.demo.tsx
 create mode 100644 docs/content/components/list/list-unorded-stacked.demo.tsx
 create mode 100644 docs/content/components/list/list.mdx
 create mode 100644 docs/content/components/list/simple-list.demo.tsx

diff --git a/docs/content/components/list/list-ordered.demo.tsx b/docs/content/components/list/list-ordered.demo.tsx
new file mode 100644
index 0000000000..f3a09a06fb
--- /dev/null
+++ b/docs/content/components/list/list-ordered.demo.tsx
@@ -0,0 +1,11 @@
+import { List } from '@marigold/components';
+
+export default () => (
+  <div className="p-4">
+    <List as="ol">
+      <List.Item>Black Tea</List.Item>
+      <List.Item>Green Tea</List.Item>
+      <List.Item>Chai Tea</List.Item>
+    </List>
+  </div>
+);
diff --git a/docs/content/components/list/list-unorded-stacked.demo.tsx b/docs/content/components/list/list-unorded-stacked.demo.tsx
new file mode 100644
index 0000000000..743bfccf93
--- /dev/null
+++ b/docs/content/components/list/list-unorded-stacked.demo.tsx
@@ -0,0 +1,30 @@
+import { List } from '@marigold/components';
+
+export default () => (
+  <div className="p-4">
+    <List>
+      <List.Item>
+        Crispy Chicken Burger
+        <List>
+          <List.Item>Hähnchen Filet im Crunchy Cornflakes Mantel</List.Item>
+        </List>
+      </List.Item>
+      <List.Item>
+        Cream Cheese Chicken Burger
+        <List>
+          <List.Item>Hähnchen Filet im Crunchy Cornflakes Mantel</List.Item>
+          <List.Item>Rucola</List.Item>
+          <List.Item>Frischkäse</List.Item>
+        </List>
+      </List.Item>
+      <List.Item>
+        Farmer
+        <List>
+          <List.Item>Rindfleisch</List.Item>
+          <List.Item>Bacon</List.Item>
+          <List.Item>Spiegelei</List.Item>
+        </List>
+      </List.Item>
+    </List>
+  </div>
+);
diff --git a/docs/content/components/list/list.mdx b/docs/content/components/list/list.mdx
new file mode 100644
index 0000000000..a748459b0e
--- /dev/null
+++ b/docs/content/components/list/list.mdx
@@ -0,0 +1,60 @@
+---
+title: List
+group: Content
+caption: Component for unordered or ordered list.
+---
+
+The `<List>` component is used to display an unordered or ordered list.
+
+The list is divided into two parts: `<List>` and `<List.Item>`.
+By default, the application displays an unordered `(ul)` list. However, this list can also be displayed as an ordered `(ol)` list.
+
+The `<List.Items>` in unordered lists are marked with bullets and in an ordered list are marked with numbers.
+
+## Usage
+
+### Import
+
+To import the component you just have to use this code below.
+
+```tsx
+import { List } from '@marigold/components';
+```
+
+### Apperance
+
+<AppearanceTable component={title} />
+
+### Props
+
+<PropsTable
+  props={[
+    {
+      property: 'as',
+      type: 'ul ⎮ ol',
+      default: 'ul',
+      description:
+        'Displaying a unordered or ordered list for showing Information',
+    },
+  ]}
+/>
+
+## Usage
+
+### Unordered list
+
+In this example you can see how to use a unordered list.
+
+<ComponentDemo file="./simple-list.demo.tsx" />
+
+### Ordered list
+
+In this example you can see how to use the `as` property for an ordered list.
+
+<ComponentDemo file="./list-ordered.demo.tsx" />
+
+### Nested Unordered List
+
+It is also possible to create a unordered nested list. Here for the `<List>` is wrapped inside the `<List.Item>`.
+
+<ComponentDemo file="./list-unorded-stacked.demo.tsx" />
diff --git a/docs/content/components/list/simple-list.demo.tsx b/docs/content/components/list/simple-list.demo.tsx
new file mode 100644
index 0000000000..f3ec36d52f
--- /dev/null
+++ b/docs/content/components/list/simple-list.demo.tsx
@@ -0,0 +1,11 @@
+import { List } from '@marigold/components';
+
+export default () => (
+  <div className="p-4">
+    <List>
+      <List.Item>Cheese</List.Item>
+      <List.Item>Milk</List.Item>
+      <List.Item>Bread</List.Item>
+    </List>
+  </div>
+);