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.

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);
+}

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";
 

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";
 

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";
 

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) => {