26 add public member profiles (#107)

apps/design-system/src/components/Atoms/ContactPerson/ContactPerson.stories.tsx

@@ -0,0 +1,18 @@
+import { Meta, Story } from '@storybook/react'
+
+import ContactPerson from './ContactPerson'
+
+export default {
+  component: ContactPerson,
+  title: 'Components/ContactPerson',
+} as Meta
+
+const Template: Story = ({ name, phone, email }) => <ContactPerson name={name} phone={phone} email={email} />
+
+export const ContactPersonStory = Template.bind({})
+
+ContactPersonStory.args = {
+  name: 'Name',
+  phone: '+1234567',
+  email: '[email protected]',
+}

apps/design-system/src/components/Atoms/ContactPerson/ContactPerson.tsx

@@ -0,0 +1,50 @@
+import { EnvelopeIcon, PhoneIcon, UserIcon } from '@heroicons/react/24/outline'
+import React, { FC } from 'react'
+
+interface ContactPersonProps {
+  name: string
+  phone?: string
+  email?: string
+}
+
+const ContactPerson: FC<ContactPersonProps> = ({ name, phone = null, email = null }) => {
+  return (
+    <dl className="space-y-4 text-sm leading-7 text-gray-600 dark:text-gray-300">
+      <div className="flex gap-x-4">
+        <dt className="flex-none">
+          <span className="sr-only">Address</span>
+          <UserIcon className="h-7 w-6 text-gray-400" aria-hidden="true" />
+        </dt>
+        <dd>{name}</dd>
+      </div>
+      {phone && (
+        <div className="flex gap-x-4">
+          <dt className="flex-none">
+            <span className="sr-only">Telephone</span>
+            <PhoneIcon className="h-7 w-6 text-gray-400" aria-hidden="true" />
+          </dt>
+          <dd>
+            <a className="hover:text-white" href={`tel:${phone}`}>
+              {phone}
+            </a>
+          </dd>
+        </div>
+      )}
+      {email && (
+        <div className="flex gap-x-4">
+          <dt className="flex-none">
+            <span className="sr-only">Email</span>
+            <EnvelopeIcon className="h-7 w-6 text-gray-400" aria-hidden="true" />
+          </dt>
+          <dd>
+            <a className="hover:text-white" href={`mailto:${email}`}>
+              {email}
+            </a>
+          </dd>
+        </div>
+      )}
+    </dl>
+  )
+}
+
+export default ContactPerson

apps/design-system/src/components/Atoms/ContactPerson/ContactPerson.ui.test.tsx

@@ -0,0 +1,19 @@
+import { render, screen } from '@testing-library/react'
+
+import ContactPerson from './ContactPerson'
+
+describe('compoments/Atoms/ContactPerson', () => {
+  it('should render Contact Person details', () => {
+    // when ... rendering component
+    const name = 'NAME'
+    const phone = 'PHONE_NUMBER'
+    const email = 'EMAIL_ADDRESS'
+
+    render(<ContactPerson name={name} phone={phone} email={email} />)
+
+    const AddressElement = screen.getByText(name)
+
+    // then ... should render as expected
+    expect(AddressElement).toBeInTheDocument()
+  })
+})

apps/design-system/src/components/Atoms/ContactPerson/index.ts

@@ -0,0 +1 @@
+export { default as ContactPerson } from './ContactPerson'

apps/design-system/src/components/Molecules/Address/Address.stories.tsx

@@ -0,0 +1,23 @@
+import { Meta, Story } from '@storybook/react'
+
+import Address from './Address'
+
+export default {
+  component: Address,
+  title: 'Molecules/Address',
+} as Meta
+
+const Template: Story = ({ street, city, postalCode, country, phone, email }) => (
+  <Address street={street} city={city} postalCode={postalCode} country={country} phone={phone} email={email} />
+)
+
+export const AddressStory = Template.bind({})
+
+AddressStory.args = {
+  street: 'Main street 1',
+  city: 'Munich',
+  postalCode: '1234',
+  country: 'Germany',
+  phone: '+1234567',
+  email: '[email protected]',
+}

apps/design-system/src/components/Molecules/Address/Address.tsx

@@ -0,0 +1,81 @@
+import { BuildingOffice2Icon, EnvelopeIcon, LinkIcon, PhoneIcon } from '@heroicons/react/24/outline'
+import React, { FC } from 'react'
+
+interface AddressProps {
+  street: string
+  city: string
+  postalCode: string
+  country: string
+  website?: string
+  phone?: string
+  email?: string
+}
+
+const Address: FC<AddressProps> = ({
+  street,
+  city,
+  postalCode,
+  country,
+  website = null,
+  phone = null,
+  email = null,
+}) => {
+  return (
+    <dl className="space-y-4 text-sm leading-7 text-gray-600 dark:text-gray-300">
+      <div className="flex gap-x-4">
+        <dt className="flex-none">
+          <span className="sr-only">Address</span>
+          <BuildingOffice2Icon className="h-7 w-6 text-gray-400" aria-hidden="true" />
+        </dt>
+        <dd>
+          {street}
+          <br />
+          {city}, {postalCode}
+          <br />
+          {country}
+        </dd>
+      </div>
+      {website && (
+        <div className="flex gap-x-4">
+          <dt className="flex-none">
+            <span className="sr-only">Website</span>
+            <LinkIcon className="h-7 w-6 text-gray-400" aria-hidden="true" />
+          </dt>
+          <dd>
+            <a className="hover:text-white" href={website}>
+              {website}
+            </a>
+          </dd>
+        </div>
+      )}
+      {phone && (
+        <div className="flex gap-x-4">
+          <dt className="flex-none">
+            <span className="sr-only">Telephone</span>
+            <PhoneIcon className="h-7 w-6 text-gray-400" aria-hidden="true" />
+          </dt>
+          <dd>
+            <a className="hover:text-white" href={`tel:${phone}`}>
+              {phone}
+            </a>
+          </dd>
+        </div>
+      )}
+      {email && (
+        <div className="flex gap-x-4">
+          <dt className="flex-none">
+            <span className="sr-only">Email</span>
+            <EnvelopeIcon className="h-7 w-6 text-gray-400" aria-hidden="true" />
+          </dt>
+          <dd>
+            <a className="hover:text-white" href={`mailto:${email}`}>
+              {email}
+            </a>
+          </dd>
+        </div>
+      )}
+    </dl>
+  )
+}
+
+export default Address

apps/design-system/src/components/Molecules/Address/Address.ui.test.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react'
+
+import Address from './Address'
+
+describe('compoments/Molecules/Address', () => {
+  it('should render Address', () => {
+    // when ... rendering component
+    const street = 'STREET'
+    const city = 'CITY'
+    const postalCode = 'POSTAL_CODE'
+    const country = 'COUNTRY'
+    const phone = '+123456789'
+    const email = 'EMAIL_ADDRESS'
+
+    render(
+      <Address street={street} city={city} postalCode={postalCode} country={country} phone={phone} email={email} />,
+    )
+
+    const AddressElement = screen.getByText(phone)
+
+    // then ... should render as expected
+    expect(AddressElement).toBeInTheDocument()
+  })
+})

apps/design-system/src/components/Molecules/Address/index.ts

@@ -0,0 +1 @@
+export { default as Address } from './Address'

apps/design-system/src/components/Molecules/MemberProfileCard/MemberProfileCard.stories.tsx

@@ -0,0 +1,37 @@
+import { Meta, Story } from '@storybook/react'
+
+import Pill from '../../Atoms/Pill/Pill'
+import MemberProfileCard from './MemberProfileCard'
+
+export default {
+  component: MemberProfileCard,
+  title: 'Molecules/MemberProfileCard',
+} as Meta
+
+const Template: Story = ({ title, logoUri, street, city, postalCode, country }) => (
+  <MemberProfileCard
+    title={title}
+    logoUri={logoUri}
+    street={street}
+    city={city}
+    postalCode={postalCode}
+    country={country}
+    businessCategories={
+      <>
+        <Pill>OEM</Pill>
+        <Pill>Supplier</Pill>
+      </>
+    }
+  />
+)
+
+export const MemberProfileCardStory = Template.bind({})
+
+MemberProfileCardStory.args = {
+  title: 'The golden idea ',
+  logoUri: 'https://source.unsplash.com/random',
+  street: 'Main street 1',
+  city: 'Munich',
+  postalCode: '1234',
+  country: 'Germany',
+}

apps/design-system/src/components/Molecules/MemberProfileCard/MemberProfileCard.tsx

@@ -0,0 +1,46 @@
+import React, { FC, ReactElement } from 'react'
+
+import { Address } from '../Address'
+
+interface MemberProfileCardProps {
+  title: string
+  logoUri: string
+  street: string
+  city: string
+  postalCode: string
+  country: string
+  businessCategories: ReactElement<any, any>
+}
+
+const MemberProfileCard: FC<MemberProfileCardProps> = ({
+  title,
+  logoUri,
+  street,
+  city,
+  postalCode,
+  country,
+  businessCategories,
+}) => {
+  return (
+    <div className="flex flex-col border rounded-2xl max-w-xl overflow-hidden ring-0 focus:ring focus:ring-orange-50 hover:shadow h-full bg-white dark:bg-gray-900 dark:border-transparent dark:border-gray-800">
+      <div className="aspect-square bg-gray-100 dark:bg-gray-700 flex justify-center items-center overflow-hidden relative h-48">
+        <img src={logoUri} alt={title} className="w-full h-full object-center object-contain px-4" />
+        <div className="absolute block w-full h-full top-0 left-0" />
+      </div>
+      <div className="min-w-0 relative flex flex-auto flex-col p-5 sm:p-5 items-start">
+        <h2 className="text-xl sm:text-xl font-extrabold mt-4 mb-2">{title}</h2>
+        <div className="mt-2">
+          <Address street={street} city={city} postalCode={postalCode} country={country} />
+        </div>
+        {businessCategories && (
+          <div className="mt-6">
+            <h3 className="text-xs font-normal dark:text-gray-500">Business Categories</h3>
+            <div className="flex gap-3 mt-2">{businessCategories}</div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default MemberProfileCard

apps/design-system/src/components/Molecules/MemberProfileCard/MemberProfileCard.ui.test.tsx

@@ -0,0 +1,39 @@
+import { render, screen } from '@testing-library/react'
+import React from 'react'
+
+import Pill from '../../Atoms/Pill/Pill'
+import MemberProfileCard from './MemberProfileCard'
+
+describe('compoments/Molecules/MemberProfileCard', () => {
+  it('should render a Member Card with the title', () => {
+    // when ... rendering component
+    const title = 'TITLE'
+    const logoUri = 'https://source.unsplash.com/random'
+    const street = 'STREET'
+    const city = 'CITY'
+    const postalCode = 'POSTAL_CODE'
+    const country = 'COUNTRY'
+
+    render(
+      <MemberProfileCard
+        title={title}
+        logoUri={logoUri}
+        street={street}
+        city={city}
+        postalCode={postalCode}
+        country={country}
+        businessCategories={
+          <>
+            <Pill>OEM</Pill>
+            <Pill>Supplier</Pill>
+          </>
+        }
+      />,
+    )
+
+    const CardElement = screen.getByText(title)
+
+    // then ... should render as expected
+    expect(CardElement).toBeInTheDocument()
+  })
+})

apps/design-system/src/components/Molecules/MemberProfileCard/index.ts

@@ -0,0 +1 @@
+export { default as MemberProfileCard } from './MemberProfileCard'

apps/design-system/src/index.ts

@@ -1,11 +1,14 @@
+export { Address } from './components/Molecules/Address'
 export { Button } from './components/Atoms/Button'
 export { Card } from './components/Atoms/Card'
+export { ContactPerson } from './components/Atoms/ContactPerson'
 export { Date } from './components/Atoms/Date'
 export { Checkbox, Checkboxes, TextField, TextareaField } from './components/Atoms/Form'
 export { Grid, GridRow } from './components/Atoms/Grid'
 export { Heading } from './components/Atoms/Heading'
 export { HeadingWithTooltip } from './components/Atoms/HeadingWithTooltip'
 export { LoadingIndicator } from './components/Atoms/LoadingIndicator'
+export { MemberProfileCard } from './components/Molecules/MemberProfileCard'
 export { Nav, NavItem } from './components/Atoms/Nav'
 export { Pill } from './components/Atoms/Pill'
 export { Table, TableBody, TableCell, TableFooter, TableHeader, TableRow } from './components/Atoms/Table'

apps/envited.ascs.digital/app/members/[slug]/page.tsx

@@ -1,13 +1,18 @@
 import { getProfile } from '../../../common/serverActions'
 import { Header } from '../../../modules/Header'
+import { Member } from '../../../modules/Member'
 
 export default async function Index({ params: { slug } }: { params: { slug: string } }) {
   const profile = await getProfile(slug)
 
   return (
     <>
       <Header />
-      <main>{JSON.stringify(profile)}</main>
+      <main>
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <Member member={profile} />
+        </div>
+      </main>
     </>
   )
 }