feat: add contacts component

components/Current/Aside.tsx

@@ -1,5 +1,5 @@
 import Puffs from "./Asides/Puffs"
-import Contact from "./Asides/Contacts"
+import Contacts from "./Asides/Contacts"
 
 import { AsideTypenameEnum } from "@/types/requests/utils/typename"
 import type { AsideProps } from "@/types/components/current/aside"
@@ -15,9 +15,7 @@ export default function Aside({ blocks }: AsideProps) {
         const type = block.__typename
         switch (type) {
           case AsideTypenameEnum.CurrentBlocksPageAsideContact:
-            return block.contact.contactConnection.edges.map((contact) => (
-              <Contact key={`contact-${idx}`} {...contact.node} />
-            ))
+            return <Contacts contacts={block.contact.contactConnection.edges} />
           case AsideTypenameEnum.CurrentBlocksPageAsidePuff:
             return <Puffs key={`block-${idx}`} puffs={block.puff.puffConnection.edges} />
           default:

components/Current/Asides/Contacts/Contact.tsx

@@ -0,0 +1,57 @@
+import styles from "./contacts.module.css"
+
+import { ContactNode } from "@/types/requests/asides/contact"
+
+export default function Contact({
+  title,
+  mailing_address,
+  visiting_address,
+  phone,
+}: ContactNode) {
+  return (
+    <div className={styles.wrapper} id="sidebar_personalized">
+      <div>
+        <div>
+          <div>
+            <h2 className={styles.heading}>{title}</h2>
+            <p>
+              {mailing_address.name}
+              <br />
+              {mailing_address.street}
+              <br />
+              {mailing_address.zip} {mailing_address.city}
+              <br />
+              {mailing_address.country}
+            </p>
+            <p>Visiting address: {visiting_address.street} </p>
+          </div>
+        </div>
+        <div>
+          <div className="highlight-infoblock highlight-infoblock--light">
+            <h3>HQ Stockholm, Sweden</h3>
+            <div className={styles.phoneContainer}>
+              <svg
+                focusable="false"
+                className="iconic-item__icon-container__icon icon icon--phone icon--nordicsea"
+                viewBox="0 0 32 32"
+              >
+                <use
+                  xmlnsXlink="http://www.w3.org/1999/xlink"
+                  xlinkHref="/Static/img/icons/sprites.svg#icon-phone"
+                ></use>
+              </svg>
+
+              <a
+                href={phone}
+                itemProp="telephone"
+                className={styles.phoneNumberLink}
+              >
+                {phone}
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

components/Current/Asides/Contacts/contacts.module.css

@@ -0,0 +1,80 @@
+.wrapper {
+    margin-top: 2rem;
+    }
+    
+    .link {
+      display: inline-block;
+      transition: 200ms ease;
+    }
+    
+    .link:hover {
+      text-decoration: none;
+      transform: scale(1.01);
+    }
+    
+    .image {
+      height: auto;
+      object-fit: contain;
+      object-position: center;
+    }
+    
+    .content {
+      padding: 20px 0px;
+    }
+    
+    .heading {
+        font-family: BrandonText-Bold,Arial,Helvetica,sans-serif;
+        font-size: 1.375rem;
+        line-height: 1.1em;
+        text-transform: uppercase;
+        font-weight: 400;
+        color: #483729;
+        margin-bottom: 1rem;
+    }
+    
+    .link:hover .heading {
+      text-decoration: underline;
+    }
+    
+    .phoneContainer {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+    }
+    
+    .phoneNumberLink {
+      line-height: 1.1em;
+      font-family: Helvetica,Arial,sans-serif;
+      font-weight: 400;
+      text-transform: none;
+      font-size: 1.125rem;
+      color: #00838e;
+      text-decoration: none;
+      cursor: pointer;
+    }
+    
+    
+    .p {
+      color: #333;
+      line-height: 1.3;
+      margin-bottom: 1em;
+      padding-top: 7px;
+      text-decoration: none;
+    }
+
+    .phoneNumberLink:active, 
+    .phoneNumberLink:hover {
+      outline: 0;
+      text-decoration: underline;
+    }
+    
+    @media screen and (min-width: 950px) {
+      .heading {
+        font-size: 1.625rem;
+      }
+    
+      .phoneNumberLink {
+        line-height: 1.1em;
+        font-size: 1.375rem;
+      }
+    }

components/Current/Asides/Contacts/index.tsx

@@ -0,0 +1,8 @@
+import type { ContactsProps } from "@/types/components/current/asides/contact"
+import Contact from "./Contact"
+
+export default function Contacts({ contacts }: ContactsProps) {
+  return contacts.map((contact) => (
+    <Contact key={contact.node.system.uid} {...contact.node} />
+  ))
+}

lib/graphql/Fragments/Contact.graphql

@@ -6,6 +6,9 @@ fragment Contact on ContactBlock {
     street
     zip
   }
+  system {
+    uid
+  }
   phone
   title
   visiting_address {

types/components/current/asides/contact.ts

@@ -1,3 +1,4 @@
 import type { ContactNode } from "@/types/requests/asides/contact"
+import type { Node } from "@/types/requests/utils/edges"
 
-export type ContactProps = ContactNode
+export type ContactsProps = { contacts: Node<ContactNode>[] }

types/requests/asides/contact.ts

@@ -8,6 +8,9 @@ export type ContactNode = {
     street: string
     zip: string
   }
+  system: {
+    uid: string
+  }
   phone: string
   title: string
   visiting_address: {