feat: AcfPhone

wp-content/themes/headless/app/components/acf/AcfPhone.gql

@@ -0,0 +1,5 @@
+fragment AcfPhone on AcfPhone {
+  e164
+  national
+  extension
+}

wp-content/themes/headless/app/components/acf/AcfPhone.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import type { AcfPhoneFragment } from "#graphql/types";
+
+defineProps<{ phone: AcfPhoneFragment; link?: boolean }>();
+</script>
+
+<template>
+  <Component :is="link ? 'a' : 'span'" v-if="phone" :href="link ? `tel:${phone.e164}` : undefined">
+    {{ phone.national }}{{ phone.extension ? ` ext. ${phone.extension}` : "" }}
+  </Component>
+</template>

wp-content/themes/headless/app/components/acf/AcfSocial.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { AcfSocialFragment } from "#graphql/types";
 
-defineProps<{ social?: AcfSocialFragment }>();
+defineProps<{ social: AcfSocialFragment }>();
 
 const socialIconNames = {
   "facebook.com": "i-cib-facebook-f",
@@ -24,7 +24,7 @@ function getSocialIcon(url: string): string {
 </script>
 
 <template>
-  <ul v-if="social?.profiles.length">
+  <ul v-if="social.profiles.length">
     <li v-for="({ url }, key) in social.profiles" :key="key">
       <a :href="url" target="_blank" rel="noopener noreferrer">
         <UIcon :name="getSocialIcon(url)" />