From 0be817353b54d201dc45008e6a8ce8a0687b5b6c Mon Sep 17 00:00:00 2001
From: David Blankenship <david.blankenship@yale.edu>
Date: Wed, 3 Jan 2024 10:09:12 -0500
Subject: [PATCH] fix(YALB-520): fix punctuation after text

When using CKE text, the punctuations look out of place vs the rest of
the content due to the spacing needed.  This shaves off some of the
spacing so that it looks better, albeit it does make the icon not fully
underlined.
---
 .../modules/custom/ys_links/css/ys_links.css  |  8 ++++++
 .../custom/ys_links/js/link_types/download.js |  2 ++
 .../custom/ys_links/js/link_types/external.js |  2 ++
 .../ys_links/js/link_types/target_blank.js    |  2 ++
 .../modules/custom/ys_links/js/ys_links.js    | 27 +++++++++++++++++++
 5 files changed, 41 insertions(+)

diff --git a/web/profiles/custom/yalesites_profile/modules/custom/ys_links/css/ys_links.css b/web/profiles/custom/yalesites_profile/modules/custom/ys_links/css/ys_links.css
index 2db39cfb25..2f1bd0356a 100644
--- a/web/profiles/custom/yalesites_profile/modules/custom/ys_links/css/ys_links.css
+++ b/web/profiles/custom/yalesites_profile/modules/custom/ys_links/css/ys_links.css
@@ -89,3 +89,11 @@ li.primary-nav__item a.link--with-icon.ys_linked:hover {
 li.utility-nav__item a.link--with-icon.ys_linked:hover {
   color: inherit;
 }
+
+a.link--with-icon.ys_linked.ys_punctuation-after {
+  padding-right: var(--size-spacing-4);
+}
+
+a.link--with-icon.ys_linked.ys_download.ys_punctuation-after {
+  padding-right: var(--size-spacing-5);
+}
diff --git a/web/profiles/custom/yalesites_profile/modules/custom/ys_links/js/link_types/download.js b/web/profiles/custom/yalesites_profile/modules/custom/ys_links/js/link_types/download.js
index c57b544b13..02f08a74f9 100644
--- a/web/profiles/custom/yalesites_profile/modules/custom/ys_links/js/link_types/download.js
+++ b/web/profiles/custom/yalesites_profile/modules/custom/ys_links/js/link_types/download.js
@@ -53,6 +53,8 @@
         "link"
       );
 
+      link = Drupal.ys_links.addPunctuationSpacing(link);
+
       link.dataset.linkType = "download";
       link.dataset.linkStyle = "underline-with-icon";
 
diff --git a/web/profiles/custom/yalesites_profile/modules/custom/ys_links/js/link_types/external.js b/web/profiles/custom/yalesites_profile/modules/custom/ys_links/js/link_types/external.js
index ac91c8acf4..2ae020d266 100644
--- a/web/profiles/custom/yalesites_profile/modules/custom/ys_links/js/link_types/external.js
+++ b/web/profiles/custom/yalesites_profile/modules/custom/ys_links/js/link_types/external.js
@@ -34,6 +34,8 @@
         "link"
       );
 
+      link = Drupal.ys_links.addPunctuationSpacing(link);
+
       link.dataset.linkType = "external";
       link.dataset.linkStyle = "underline-with-icon";
 
diff --git a/web/profiles/custom/yalesites_profile/modules/custom/ys_links/js/link_types/target_blank.js b/web/profiles/custom/yalesites_profile/modules/custom/ys_links/js/link_types/target_blank.js
index 07be57668f..c0a0a4bd84 100644
--- a/web/profiles/custom/yalesites_profile/modules/custom/ys_links/js/link_types/target_blank.js
+++ b/web/profiles/custom/yalesites_profile/modules/custom/ys_links/js/link_types/target_blank.js
@@ -28,6 +28,8 @@
         "link"
       );
 
+      link = Drupal.ys_links.addPunctuationSpacing(link);
+
       link.dataset.linkType = "target-blank";
       link.dataset.linkStyle = "underline-with-icon";
 
diff --git a/web/profiles/custom/yalesites_profile/modules/custom/ys_links/js/ys_links.js b/web/profiles/custom/yalesites_profile/modules/custom/ys_links/js/ys_links.js
index 24db309661..9691c8d6d4 100644
--- a/web/profiles/custom/yalesites_profile/modules/custom/ys_links/js/ys_links.js
+++ b/web/profiles/custom/yalesites_profile/modules/custom/ys_links/js/ys_links.js
@@ -20,6 +20,33 @@
     return link.querySelectorAll(".fa-icon").length === 0;
   };
 
+  /* Looks at the next character after a link to determine if it is a
+  punctuation.  In CKE text, we must append a class that will help render it
+  closer to the link for looks. */
+  Drupal.ys_links.punctuationAfter = (link) => {
+    const punctuationRegex = /(\.|\?|!|”|"|'|,|\)|\]|-)$/;
+
+    if (link.nextSibling === null) {
+      return false;
+    }
+
+    const nextCharacter = link.nextSibling.textContent.trim()[0];
+
+    return (
+      nextCharacter !== undefined &&
+      nextCharacter.match(punctuationRegex) !== null
+    );
+  };
+
+  // Adds the punctuation modifier if it exists.
+  Drupal.ys_links.addPunctuationSpacing = (link) => {
+    if (Drupal.ys_links.punctuationAfter(link)) {
+      link.classList.add("ys_punctuation-after");
+    }
+
+    return link;
+  };
+
   // Attempts to detect if a link is inside of a component or not.
   // Based on this, we will determine whether to decorate it or not.
   Drupal.ys_links.isInComponent = (link) => {