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 () => (
+
+
+ Black Tea
+ Green Tea
+ Chai Tea
+
+
+);
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 () => (
+
+
+
+ Crispy Chicken Burger
+
+ Hähnchen Filet im Crunchy Cornflakes Mantel
+
+
+
+ Cream Cheese Chicken Burger
+
+ Hähnchen Filet im Crunchy Cornflakes Mantel
+ Rucola
+ Frischkäse
+
+
+
+ Farmer
+
+ Rindfleisch
+ Bacon
+ Spiegelei
+
+
+
+
+);
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 `` component is used to display an unordered or ordered list.
+
+The list is divided into two parts: `` and ``.
+By default, the application displays an unordered `(ul)` list. However, this list can also be displayed as an ordered `(ol)` list.
+
+The `` 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
+
+
+
+### Props
+
+
+
+## Usage
+
+### Unordered list
+
+In this example you can see how to use a unordered list.
+
+
+
+### Ordered list
+
+In this example you can see how to use the `as` property for an ordered list.
+
+
+
+### Nested Unordered List
+
+It is also possible to create a unordered nested list. Here for the `` is wrapped inside the ``.
+
+
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 () => (
+
+
+ Cheese
+ Milk
+ Bread
+
+
+);