feature: Event excerpt with clickable mail address

src/components/ContactPerson2/ContactPerson2.stories.tsx

@@ -0,0 +1,28 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { ContactPerson2 } from './ContactPerson2'
+
+const meta: Meta<typeof ContactPerson2> = {
+  component: ContactPerson2,
+}
+
+type Story = StoryObj<typeof ContactPerson2>;
+export default meta
+
+export const Default: Story = {
+  args: {
+    contact: {
+      id: "some_id",
+      name: "Pfr. M. Mustermann",
+      email: "m.mustermann@gmail.com",
+      telephone: "+491234567890",
+      createdAt: "2021-03-01T00:00:00.000Z",
+      updatedAt: ""
+    }
+  },
+}
+
+export const NotFound: Story = {
+  args: {
+    contact: "Some weird id"
+  },
+}

src/components/ContactPerson2/ContactPerson2.tsx

@@ -0,0 +1,29 @@
+import styles from "./styles.module.scss"
+import { ContactPerson } from '@/payload-types'
+
+type ContactPerson2Props = {
+  contact: null | string | undefined | ContactPerson
+}
+
+export const ContactPerson2 = ({contact}: ContactPerson2Props) => {
+  if (contact === null || contact === undefined || typeof contact === 'string') {
+    return "Unbekannt"
+  }
+
+  return (
+    <div className={styles.contact}>
+      {contact.name}
+      {contact.email &&
+        <>
+          <br/> <a href={`mailto:${contact.email}`} className={styles.hover}>{contact.email}</a>
+        </>
+      }
+      {
+        contact.telephone &&
+        <>
+          <br/> <a href={`tel:${contact.telephone}`}>{contact.telephone}</a>
+        </>
+      }
+    </div>
+  )
+}

src/components/ContactPerson2/styles.module.scss

@@ -0,0 +1,8 @@
+.contact a {
+  text-decoration: none;
+  color: inherit;
+}
+
+.hover:hover {
+  text-decoration: underline;
+}

src/components/EventExcerpt/EventExcerpt.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react'
-import { EventExcerpt } from './EventExcerpt'
+import { EventExcerpt, EventExcerptRow } from './EventExcerpt'
+import { TextDiv } from '@/components/Text/TextDiv'
 
 const meta: Meta<typeof EventExcerpt> = {
   component: EventExcerpt,
@@ -10,21 +11,17 @@ export default meta
 
 export const Default: Story = {
   args: {
-    what: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.',
-    where: 'St. Richard\n' +
-      'Braunschweiger Str. 18, 12055 Berlin \n' +
-      'Anfahrt über S-Sonnenallee oder Mareschtraße \n',
-    who: 'Pfarrei Ulrich Kotzur\n' +
-      'pfarrer@sankt-clara.de\n' +
-      '+4930 6851042'
-  },
-}
-
-export const OnlyWhatAndWhere: Story = {
-  args: {
-    what: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.',
-    where: 'St. Richard\n' +
-      'Braunschweiger Str. 18, 12055 Berlin \n' +
-      'Anfahrt über S-Sonnenallee oder Mareschtraße \n',
+    children: <>
+      <EventExcerptRow label={"What: "}>
+        <TextDiv text={"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum."}/>
+      </EventExcerptRow>
+      <EventExcerptRow label={"Where:"}>
+        <p>
+          St. Richard<br/>
+          Braunschweiger Str. 18, 12055 Berlin<br/>
+          Anfahrt über S-Sonnenallee oder Mareschtraße
+        </p>
+      </EventExcerptRow>
+    </>
   },
 }

src/components/EventExcerpt/EventExcerpt.tsx

@@ -1,44 +1,31 @@
 import styles from "./styles.module.scss"
-import { TextDiv } from '@/components/Text/TextDiv'
 
 type EventExcerptProps = {
-  what?: string | null,
-  where?: string | null,
-  who?: string | null
+  children?: React.ReactNode
 }
 
 type RowProps = {
   label: string,
-  text: string
+  children: React.ReactNode
 }
 
-const Row = ({label, text}: RowProps) => {
+export const EventExcerptRow = ({label, children}: RowProps) => {
   return (
     <div className={styles.row}>
       <div className={styles.col1}>
         {label}
       </div>
       <div>
-        <TextDiv text={text} />
+        {children}
       </div>
     </div>
   )
 }
 
-export const EventExcerpt = ({ what, where, who }: EventExcerptProps) => {
+export const EventExcerpt = ({ children }: EventExcerptProps) => {
   return (
     <div className={styles.container}>
-      { what &&
-        <Row label={"Was:"} text={what} />
-      }
-
-      { where &&
-        <Row label={"Wo:"} text={where} />
-      }
-
-      { who &&
-        <Row label={"Ansprechperson:"} text={who} />
-      }
+      {children}
     </div>
   )
 }

src/pageComponents/Event/Event.tsx

@@ -3,18 +3,17 @@ import { ContactPerson, Document, Location } from '@/payload-types'
 import { Section } from '@/components/Section/Section'
 import { Title } from '@/components/Title/Title'
 import { Container } from '@/components/Container/Container'
-import { Row } from '@/components/Flex/Row'
 import { Col } from '@/components/Flex/Col'
 import { Pill } from '@/components/Pill/Pill'
 import { HR } from '@/components/HorizontalRule/HorizontalRule'
 import { useDate } from '@/hooks/useCompactDate'
 import { readableDateTime } from '@/utils/readableDate'
 import { TextDiv } from '@/components/Text/TextDiv'
-import { EventExcerpt } from '@/components/EventExcerpt/EventExcerpt'
+import { EventExcerpt, EventExcerptRow } from '@/components/EventExcerpt/EventExcerpt'
 import { Button } from '@/components/Button/Button'
 import { StaticImageData } from 'next/image'
 import { locationString } from '@/utils/dto/location'
-import { contactPersonString } from '@/utils/dto/contact'
+import { ContactPerson2 } from '@/components/ContactPerson2/ContactPerson2'
 
 type EventProps = {
   title: string,
@@ -50,7 +49,6 @@ export function EventPage(
   const published = useDate(createdAt)
   const readableDate = readableDateTime(date)
   const where = locationString(location);
-  const who = contactPersonString(contact)
 
   return (
     <>
@@ -140,11 +138,17 @@ export function EventPage(
           </Section>
         </Container>
 
-        <EventExcerpt
-          what={shortDescription}
-          where={where}
-          who={who}
-        />
+        <EventExcerpt>
+          <EventExcerptRow label={"Was:"}>
+            <TextDiv text={shortDescription} />
+          </EventExcerptRow>
+          <EventExcerptRow label={"Wo:"}>
+            <TextDiv text={where} />
+          </EventExcerptRow>
+          <EventExcerptRow label={"Ansprechperson:"}>
+            <ContactPerson2 contact={contact} />
+          </EventExcerptRow>
+        </EventExcerpt>
 
       </Section>
       <Section/>

src/utils/dto/contact.ts

@@ -1,29 +0,0 @@
-import { ContactPerson } from '@/payload-types'
-
-
-/**
- * Return contact person as a readable string
- *
- * e.G
- *
- * Hans Mustermann
- * hans@mustermann.com
- * 030-65625885
- */
-export const contactPersonString = (c: string | ContactPerson | undefined) => {
-  if(typeof c === "string" || !c) {
-    return "Unbekannt"
-  }
-
-  let s = c.name
-
-  if (c.email) {
-    s += '\n' + c.email;
-  }
-
-  if (c.telephone) {
-    s += '\n' + c.telephone;
-  }
-
-  return s
-}