docs: list demo and docs (#3196)

* docs: list demo and docs

* save

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>
+);

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>
+);

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" />

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>
+);