Feat: external link icon (#1540)

cal-itp · Jul 18, 2023 · bc49146 · bc49146
2 parents e60a4c9 + 228acc1
commit bc49146
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 2 deletions.
diff --git a/benefits/locale/en/LC_MESSAGES/django.po b/benefits/locale/en/LC_MESSAGES/django.po
@@ -183,7 +183,7 @@ msgstr ""
 "tool to support the Courtesy Card program. This benefit may need to be "
 "renewed in the future based on the expiration date of the Courtesy Card. "
 "Learn more at the <a href='https://mst.org/riders-guide/how-to-ride/courtesy-"
-"card/' target =\"blank\" rel=\"noopener noreferrer\">MST Riders Guide</a>."
+"card/' target=\"_blank\" rel=\"noopener noreferrer\">MST Riders Guide</a>."
 
 msgid "core.pages.help.littlepay"
 msgstr "What is Littlepay?"

diff --git a/benefits/locale/es/LC_MESSAGES/django.po b/benefits/locale/es/LC_MESSAGES/django.po
@@ -191,7 +191,7 @@ msgstr ""
 "Tarjeta de Cortesía. Es posible que este beneficio deba renovarse en el "
 "futuro según la fecha de vencimiento de la Tarjeta de Cortesía. Obtenga más "
 "información <a href='https://mst.org/riders-guide/how-to-ride/courtesy-"
-"card/' target =\"blank\" rel=\"noopener noreferrer\">MST Riders Guide</a>."
+"card/' target=\"_blank\" rel=\"noopener noreferrer\">MST Riders Guide</a>."
 
 msgid "core.pages.help.littlepay"
 msgstr "¿Qué es Littlepay?"

diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
@@ -142,6 +142,25 @@ a:visited:not(.btn) {
   color: var(--selected-color);
 }
 
+a[target="_blank"]::after {
+  content: " ";
+  background-color: currentColor;
+
+  mask-image: url("/static/img/external-link.svg"),
+    linear-gradient(transparent, transparent);
+  mask-position: center center;
+  -webkit-mask-image: url("/static/img/external-link.svg"),
+    linear-gradient(transparent, transparent);
+  -webkit-mask-position: center center;
+
+  display: inline-block;
+  position: relative;
+  width: 24px;
+  height: 24px;
+  margin-left: 2px;
+  vertical-align: text-bottom;
+}
+
 /* Headlines */
 /* All headlines */
 /* All headlines share font-weight, letter-spacing, line-height and margin */

diff --git a/benefits/static/img/external-link.svg b/benefits/static/img/external-link.svg