From 5287084c1da2fade0ef67321836384dfe20aaf88 Mon Sep 17 00:00:00 2001
From: Francis Gyimah <fgyimah883@gmail.com>
Date: Mon, 3 Feb 2025 15:39:06 +0000
Subject: [PATCH] [DEV-19087] Added text to social links in contact card

---
 components/ContactCard/ContactCard.module.scss | 3 +++
 components/ContactCard/ContactCard.tsx         | 5 +++++
 2 files changed, 8 insertions(+)

diff --git a/components/ContactCard/ContactCard.module.scss b/components/ContactCard/ContactCard.module.scss
index e803110d..d272f180 100644
--- a/components/ContactCard/ContactCard.module.scss
+++ b/components/ContactCard/ContactCard.module.scss
@@ -64,6 +64,9 @@
 }
 
 .linkText {
+    @include text-label;
+    @include link-primary;
+
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
diff --git a/components/ContactCard/ContactCard.tsx b/components/ContactCard/ContactCard.tsx
index 0c675902..37e5f31b 100644
--- a/components/ContactCard/ContactCard.tsx
+++ b/components/ContactCard/ContactCard.tsx
@@ -94,6 +94,9 @@ function ContactCard({ className, contactInfo, layout, renderAvatar, showAvatar,
                     {website && isCard && (
                         <a href={website.toString()} className={styles.link} title="Website">
                             <IconGlobe width={16} height={16} className={styles.icon} />
+                            <span className={styles.linkText}>
+                                {website.toString().replace(/(^\w+:|^)\/\//, '')}
+                            </span>
                         </a>
                     )}
                     {facebook && (
@@ -103,6 +106,7 @@ function ContactCard({ className, contactInfo, layout, renderAvatar, showAvatar,
                             title="Facebook"
                         >
                             <IconFacebook width={16} height={16} className={styles.icon} />
+                            <span className={styles.linkText}>{facebook}</span>
                         </a>
                     )}
                     {twitter && (
@@ -112,6 +116,7 @@ function ContactCard({ className, contactInfo, layout, renderAvatar, showAvatar,
                             title="Twitter"
                         >
                             <IconTwitter width={16} height={16} className={styles.icon} />
+                            <span className={styles.linkText}>{`@${twitter}`}</span>
                         </a>
                     )}
                 </div>