+
+ Ich verstehe, dass ein Klick auf
+ “Kostenpflichtig buchen” keinerlei
+ Auswirkungen hat, da es sich um einen rein
+ fiktiven Bestellprozess handelt. Es wird keine
+ Bestellung ausgelöst und wir speichern keine
+ Daten. Hier passiert nichts, daher sind AGBs
+ und Datenschutz überflüssig.
+
+
+
+
+
+
+
+ ‚
+
+
+
+
+
+;
diff --git a/packages/docs/src/content/02-foundations/04-ui-patterns/02-anlegeprozess/index.mdx b/packages/docs/src/content/02-foundations/04-ui-patterns/02-anlegeprozess/index.mdx
new file mode 100644
index 000000000..390756c96
--- /dev/null
+++ b/packages/docs/src/content/02-foundations/04-ui-patterns/02-anlegeprozess/index.mdx
@@ -0,0 +1,8 @@
+---
+title: Anlegeprozess
+---
+
+Anlege-Prozesse fügen ein neues Element zur Benutzeroberfläche hinzu. Kleinere
+Anlege-Prozesse erfolgen in einem Standard-Modal. Umfangreichere Anlege- oder
+Buchungsprozesse werden hingegen in einem Modal mit OffCanvas-Variante
+dargestellt.
diff --git a/packages/docs/src/content/02-foundations/04-ui-patterns/02-anlegeprozess/overview.mdx b/packages/docs/src/content/02-foundations/04-ui-patterns/02-anlegeprozess/overview.mdx
new file mode 100644
index 000000000..f3cdce858
--- /dev/null
+++ b/packages/docs/src/content/02-foundations/04-ui-patterns/02-anlegeprozess/overview.mdx
@@ -0,0 +1,23 @@
+# List
+
+## Leerer Inhalt
+
+Wenn sich noch kein Element in der [List](/03-components/structure/list)
+befindet, sollte statt der List eine
+[IllustratedMessage](/03-components/content/illustrated-message) verwendet
+werden. Ein Klick auf den [Button](/03-components/actions/button) öffnet in den
+meisten Fällen ein [Modal](/03-components/overlays/modal) – bei einfachen
+Anlegeprozessen in der üblichen Modal-Darstellung, bei umfangreicheren Prozessen
+in der OffCanvas-Variant.
+
+
+
+## Mit Inhalt
+
+In einer List kann oben rechts eine
+[ActionGroup](/03-components/actions/action-group) platziert werden, die einen
+Button enthält, über den weitere Elemente angelegt/gebucht werden. Auch hier
+öffnet ein Klick auf den Button entweder ein Anlege-Modal für kleinere Prozesse
+oder ein Modal in der OffCanvas-Variante für größere Anlege-/Buchungsprozesse.
+
+
diff --git a/packages/docs/src/content/02-foundations/04-ui-patterns/03-struktur/examples/detail-page.tsx b/packages/docs/src/content/02-foundations/04-ui-patterns/03-struktur/examples/detail-page.tsx
new file mode 100644
index 000000000..1802ee7a4
--- /dev/null
+++ b/packages/docs/src/content/02-foundations/04-ui-patterns/03-struktur/examples/detail-page.tsx
@@ -0,0 +1,150 @@
+import Heading from "@mittwald/flow-react-components/Heading";
+import Text from "@mittwald/flow-react-components/Text";
+import Button from "@mittwald/flow-react-components/Button";
+import Section from "@mittwald/flow-react-components/Section";
+import Label from "@mittwald/flow-react-components/Label";
+import Header from "@mittwald/flow-react-components/Header";
+import { ColumnLayout } from "@mittwald/flow-react-components/ColumnLayout";
+import { LayoutCard } from "@mittwald/flow-react-components/LayoutCard";
+import {
+ ContextMenu,
+ ContextMenuTrigger,
+ MenuItem,
+} from "@mittwald/flow-react-components/ContextMenu";
+import { IconContextMenu } from "@mittwald/flow-react-components/Icons";
+import LabeledValue from "@mittwald/flow-react-components/LabeledValue";
+import { Alert } from "@mittwald/flow-react-components/Alert";
+import { Content } from "@mittwald/flow-react-components/Content";
+import { Action } from "@mittwald/flow-react-components/Action";
+import {
+ Tab,
+ Tabs,
+ TabTitle,
+} from "@mittwald/flow-react-components/Tabs";
+
+export default () => {
+ const domain = {
+ id: "4",
+ hostname: "example.de",
+ domain: "example.de",
+ type: "Domain",
+ ssl: undefined,
+ owner: {
+ firstName: "Franz",
+ lastName: "Müller",
+ street: "Jackenweg",
+ houseNumber: "44a",
+ zip: "12893",
+ city: "Lanzhausen",
+ email: "f.mueller@mittwald.de",
+ },
+ };
+
+ const domainDetailsSection = (
+
+
+ Domain-Details
+
+
+
+
+
+
+
+
+
+
+
+
+ Es konnte kein SSL-Zertifikat ausgestellt werden
+
+
+
+ Für diese Domain konnte kein SSL-Zertifikat
+ ausgestellt werden, da {domain.hostname} nicht
+ per DNS auf deine Server-IP zeigt. Ändere den
+ A-Record oder CNAME auf die Server-IP zeigen. Es
+ kann einige Minuten dauern, bis das Zertifikat
+ bei korrekten Einstellungen ausgestellt ist.
+
+
+
+
+
+
+
+
+
+ {domain.hostname}
+
+
+
+ {domain.ssl ? domain.ssl : "-"}
+
+
+
+ );
+
+ const domainOwnerSection = (
+
+
+ Domain-Inhaber
+
+
+
+
+
+
+ {domain.owner.firstName} {domain.owner.lastName}
+
+ {domain.owner.street} {domain.owner.houseNumber}
+
+ {domain.owner.zip} {domain.owner.city}
+
+
+
+
+ {domain.owner.email}
+
+
+
+ );
+
+ return (
+
+
+
+ Allgemein
+ {domainDetailsSection}
+ {domainOwnerSection}
+
+
+ DNS
+ not implemented
+
+
+ Pfade
+ not implemented
+
+
+
+ );
+};
diff --git a/packages/docs/src/content/02-foundations/04-ui-patterns/03-struktur/index.mdx b/packages/docs/src/content/02-foundations/04-ui-patterns/03-struktur/index.mdx
new file mode 100644
index 000000000..ae8934c72
--- /dev/null
+++ b/packages/docs/src/content/02-foundations/04-ui-patterns/03-struktur/index.mdx
@@ -0,0 +1,7 @@
+---
+title: Content strukturieren
+---
+
+Inhalte sollten so strukturiert werden, dass User schnell und einfach alle
+wichtigen Informationen finden können. Dafür gibt es Components, die auf die
+Layout- und Strukturierung der Darstellung spezialisiert sind.
diff --git a/packages/docs/src/content/02-foundations/04-ui-patterns/03-struktur/overview.mdx b/packages/docs/src/content/02-foundations/04-ui-patterns/03-struktur/overview.mdx
new file mode 100644
index 000000000..f63508bb8
--- /dev/null
+++ b/packages/docs/src/content/02-foundations/04-ui-patterns/03-struktur/overview.mdx
@@ -0,0 +1,13 @@
+# Detailseite
+
+Detailseiten zeigen dem User die Inhalte eines bestimmten Elements. Diese können
+über eine [Tab](/03-components/navigation/tabs)-Navigation in verschiedene
+Bereiche aufgeteilt werden. Innerhalb des Content-Bereichs wird der Inhalt
+vertikal durch [Sections](/03-components/structure/section) gegliedert.
+Horizontal sorgt das [ColumnLayout](/03-components/structure/column-layout) für
+eine übersichtliche Anordnung. Wichtig ist, dass die wichtigsten Informationen
+möglichst oben im Content-Bereich stehen. Eine gut strukturierte
+[Heading](/03-components/content/heading)-Hierarchie hilft zudem, den Inhalt
+klar und logisch zu ordnen.
+
+
diff --git a/packages/docs/src/content/02-foundations/04-ui-patterns/04-bearbeitungsprozess/examples/edit-section.tsx b/packages/docs/src/content/02-foundations/04-ui-patterns/04-bearbeitungsprozess/examples/edit-section.tsx
new file mode 100644
index 000000000..00ea6f4f3
--- /dev/null
+++ b/packages/docs/src/content/02-foundations/04-ui-patterns/04-bearbeitungsprozess/examples/edit-section.tsx
@@ -0,0 +1,132 @@
+import Heading from "@mittwald/flow-react-components/Heading";
+import Text from "@mittwald/flow-react-components/Text";
+import Button from "@mittwald/flow-react-components/Button";
+import Section from "@mittwald/flow-react-components/Section";
+import Content from "@mittwald/flow-react-components/Content";
+import {
+ Modal,
+ ModalTrigger,
+} from "@mittwald/flow-react-components/Modal";
+import Label from "@mittwald/flow-react-components/Label";
+import Header from "@mittwald/flow-react-components/Header";
+import { ColumnLayout } from "@mittwald/flow-react-components/ColumnLayout";
+import { LayoutCard } from "@mittwald/flow-react-components/LayoutCard";
+import LabeledValue from "@mittwald/flow-react-components/LabeledValue";
+import TextField from "@mittwald/flow-react-components/TextField";
+import { ActionGroup } from "@mittwald/flow-react-components/ActionGroup";
+import { Action } from "@mittwald/flow-react-components/Action";
+
+export default () => {
+ const domain = {
+ id: "4",
+ hostname: "example.de",
+ domain: "example.de",
+ type: "Domain",
+ ssl: undefined,
+ owner: {
+ firstName: "Franz",
+ lastName: "Müller",
+ street: "Jackenweg",
+ houseNumber: "44a",
+ zip: "12893",
+ city: "Lanzhausen",
+ email: "f.mueller@mittwald.de",
+ },
+ };
+
+ const updateOwnerModal = (
+
+ Domain-Inhaber bearbeiten
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+
+ return (
+
+
+
+ Domain-Inhaber
+
+
+ {updateOwnerModal}
+
+
+
+
+
+
+ {domain.owner.firstName}{" "}
+ {domain.owner.lastName}
+
+ {domain.owner.street}{" "}
+ {domain.owner.houseNumber}
+
+ {domain.owner.zip} {domain.owner.city}
+
+
+
+
+ {domain.owner.email}
+
+
+
+
+ );
+};
diff --git a/packages/docs/src/content/02-foundations/04-ui-patterns/04-bearbeitungsprozess/index.mdx b/packages/docs/src/content/02-foundations/04-ui-patterns/04-bearbeitungsprozess/index.mdx
new file mode 100644
index 000000000..7a0edd8f4
--- /dev/null
+++ b/packages/docs/src/content/02-foundations/04-ui-patterns/04-bearbeitungsprozess/index.mdx
@@ -0,0 +1,7 @@
+---
+title: Bearbeitungsprozess
+---
+
+Im Content-Bereich verschiedener Seiten werden häufig Daten angezeigt, die der
+User bearbeiten kann. Die Bearbeitung erfolgt dabei nicht direkt im
+Content-Bereich, sondern durch das Öffnen eines separaten Modals.
diff --git a/packages/docs/src/content/02-foundations/04-ui-patterns/04-bearbeitungsprozess/overview.mdx b/packages/docs/src/content/02-foundations/04-ui-patterns/04-bearbeitungsprozess/overview.mdx
new file mode 100644
index 000000000..b013375e9
--- /dev/null
+++ b/packages/docs/src/content/02-foundations/04-ui-patterns/04-bearbeitungsprozess/overview.mdx
@@ -0,0 +1,10 @@
+# Section-Inhalte bearbeiten
+
+Durch die generelle Strukturierung von Inhalten mit einer
+[Section](/03-components/structure/section) ist es möglich, im Header der
+Section einen "Bearbeiten"-[Button](/03-components/actions/button) zu
+platzieren. Dieser öffnet je nach Länge des Bearbeitungsformulars ein
+Standard-[Modal](/03-components/overlays/modal) oder ein Modal in der
+OffCanvas-Variante.
+
+