[DEV-19087] Added text to social links in contact card

prezly · Feb 3, 2025 · 5287084 · 5287084
1 parent 5e3c694
commit 5287084
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git 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
@@ -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>