From d3194ee28cd702d8b8fd1449c39bb533fd078ce6 Mon Sep 17 00:00:00 2001
From: lmeyer <l.meyer@mittwald.de>
Date: Tue, 12 Nov 2024 09:20:26 +0100
Subject: [PATCH] docs:update templates

---
 .../detail-page/examples/default.tsx          | 231 +++++++++++-------
 1 file changed, 147 insertions(+), 84 deletions(-)

diff --git a/packages/docs/src/content/01-get-started/templates/detail-page/examples/default.tsx b/packages/docs/src/content/01-get-started/templates/detail-page/examples/default.tsx
index 5b3151f58..1ec538a55 100644
--- a/packages/docs/src/content/01-get-started/templates/detail-page/examples/default.tsx
+++ b/packages/docs/src/content/01-get-started/templates/detail-page/examples/default.tsx
@@ -3,7 +3,6 @@ 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 Link from "@mittwald/flow-react-components/Link";
 import {
   Modal,
   ModalTrigger,
@@ -31,39 +30,58 @@ export default () => {
     domain: "example.de",
     type: "Domain",
     ssl: undefined,
+    owner: {
+      firstName: "Max",
+      lastName: "Mustermann",
+      street: "Königsberger Str",
+      houseNumber: "4",
+      zip: "32339",
+      city: "Espelkamp",
+    },
   };
 
   const updateOwnerModal = (
     <Modal>
       <Heading>Domain-Inhaber bearbeiten</Heading>
-
       <Content>
         <Section>
           <ColumnLayout>
-            <TextField isRequired defaultValue="Max">
+            <TextField
+              isRequired
+              defaultValue={domain.owner.firstName}
+            >
               <Label>Vorname</Label>
             </TextField>
-            <TextField isRequired defaultValue="Mustermann">
+            <TextField
+              isRequired
+              defaultValue={domain.owner.lastName}
+            >
               <Label>Nachname</Label>
             </TextField>
             <ColumnLayout gap="s" s={[2, 1]}>
               <TextField
                 isRequired
-                defaultValue="Königsberger Str"
+                defaultValue={domain.owner.street}
               >
                 <Label>Straße</Label>
               </TextField>
-              <TextField isRequired defaultValue="4">
+              <TextField
+                isRequired
+                defaultValue={domain.owner.houseNumber}
+              >
                 <Label>Hausnr.</Label>
               </TextField>
             </ColumnLayout>
             <ColumnLayout gap="s" s={[1, 2]}>
-              <TextField isRequired defaultValue="32339">
+              <TextField
+                isRequired
+                defaultValue={domain.owner.zip}
+              >
                 <Label>PLZ</Label>
               </TextField>
               <TextField
                 isRequired
-                defaultValue="Espelkamp"
+                defaultValue={domain.owner.city}
               >
                 <Label>Ort</Label>
               </TextField>
@@ -71,7 +89,29 @@ export default () => {
           </ColumnLayout>
         </Section>
       </Content>
+      <ActionGroup>
+        <Action closeOverlay="Modal">
+          <Button color="secondary" variant="soft">
+            Abbrechen
+          </Button>
+          <Button color="accent" type="submit">
+            Speichern
+          </Button>
+        </Action>
+      </ActionGroup>
+    </Modal>
+  );
 
+  const updateDomainTargetModal = (
+    <Modal>
+      <Heading>Domain-Ziel ändern</Heading>
+      <Content>
+        <Section>
+          <TextField isRequired>
+            <Label>Domain-Ziel</Label>
+          </TextField>
+        </Section>
+      </Content>
       <ActionGroup>
         <Action closeOverlay="Modal">
           <Button color="secondary" variant="soft">
@@ -85,84 +125,107 @@ export default () => {
     </Modal>
   );
 
-  return (
-    <LayoutCard>
-      <Section>
-        {!domain.ssl && (
-          <Alert status="danger">
-            <Heading>
-              Es konnte kein SSL-Zertifikat ausgestellt
-              werden
-            </Heading>
-            <Content>
-              <Text>
-                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.
-              </Text>
-              <Link>SSL-Zertifikat ausstellen</Link>
-            </Content>
-          </Alert>
-        )}
-      </Section>
-      <Section>
-        <Header>
-          <Heading>Domain-Details</Heading>
-          <ContextMenuTrigger>
-            <Button color="secondary" variant="soft">
-              <IconContextMenu />
+  const sslAlertSection = !domain.ssl && (
+    <Section>
+      <Alert status="danger">
+        <Heading>
+          Es konnte kein SSL-Zertifikat ausgestellt werden
+        </Heading>
+        <Content>
+          <Text>
+            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.
+          </Text>
+          <Action showFeedback>
+            <Button variant="plain">
+              SSL-Zertifikat ausstellen
             </Button>
-            <ContextMenu>
-              <MenuItem>Domain umziehen</MenuItem>
-              <MenuItem>Domain entfernen</MenuItem>
-            </ContextMenu>
-          </ContextMenuTrigger>
+          </Action>
+        </Content>
+      </Alert>
+    </Section>
+  );
+
+  const domainDetailsSection = (
+    <Section>
+      <Header>
+        <Heading>Domain-Details</Heading>
+        <ContextMenuTrigger>
+          <Button color="secondary" variant="soft">
+            <IconContextMenu />
+          </Button>
+          <ContextMenu>
+            <MenuItem
+              onAction={() => alert("not implemented")}
+            >
+              Domain umziehen
+            </MenuItem>
+            <MenuItem
+              onAction={() => alert("not implemented")}
+            >
+              Domain entfernen
+            </MenuItem>
+          </ContextMenu>
+        </ContextMenuTrigger>
+        <ModalTrigger>
           <Button>Domain-Ziel ändern</Button>
-        </Header>
-        <ColumnLayout s={[1, 1]}>
-          <LabeledValue>
-            <Label>Domain-Ziel</Label>
-            <Text>{domain.domain}</Text>
-          </LabeledValue>
-          <LabeledValue>
-            <Label>Zertifikat</Label>
-            <Text>{domain.ssl ? domain.ssl : "-"}</Text>
-          </LabeledValue>
-        </ColumnLayout>
-      </Section>
-      <Section>
-        <Header>
-          <Heading>Domain-Inhaber</Heading>
-          <ModalTrigger>
-            <Button color="secondary" variant="soft">
-              Bearbeiten
-            </Button>
-            {updateOwnerModal}
-          </ModalTrigger>
-        </Header>
-        <ColumnLayout>
-          <LabeledValue>
-            <Label>Inhaber</Label>
-            <Text>
-              Max Mustermann
-              <br />
-              Königsberger Str. 4, 32339 Espelkamp
-            </Text>
-          </LabeledValue>
-          <LabeledValue>
-            <Label>Kontaktdaten</Label>
-            <Text>
-              max@mustermann.de
-              <br />
-              0163/123456789
-            </Text>
-          </LabeledValue>
-        </ColumnLayout>
-      </Section>
+          {updateDomainTargetModal}
+        </ModalTrigger>
+      </Header>
+      <ColumnLayout s={[1, 1]}>
+        <LabeledValue>
+          <Label>Domain-Ziel</Label>
+          <Text>{domain.domain}</Text>
+        </LabeledValue>
+        <LabeledValue>
+          <Label>Zertifikat</Label>
+          <Text>{domain.ssl ? domain.ssl : "-"}</Text>
+        </LabeledValue>
+      </ColumnLayout>
+    </Section>
+  );
+
+  const domainOwnerSection = (
+    <Section>
+      <Header>
+        <Heading>Domain-Inhaber</Heading>
+        <ModalTrigger>
+          <Button color="secondary" variant="soft">
+            Bearbeiten
+          </Button>
+          {updateOwnerModal}
+        </ModalTrigger>
+      </Header>
+      <ColumnLayout>
+        <LabeledValue>
+          <Label>Inhaber</Label>
+          <Text>
+            Max Mustermann
+            <br />
+            Königsberger Str. 4, 32339 Espelkamp
+          </Text>
+        </LabeledValue>
+        <LabeledValue>
+          <Label>Kontaktdaten</Label>
+          <Text>
+            max@mustermann.de
+            <br />
+            0163/123456789
+          </Text>
+        </LabeledValue>
+      </ColumnLayout>
+    </Section>
+  );
+
+  return (
+    <LayoutCard>
+      {sslAlertSection}
+      {domainDetailsSection}
+      {domainOwnerSection}
     </LayoutCard>
   );
 };