feat(trumps): u-mailto-text-replace (for ecep 214) (#44)

* feat(trumps): ecep-214 u-mailto-text-replace

To replace text of mailto links with text from data attributes.
Lets us protect mailto links from spam by adding false href attribute.

TACC/Core-CMS#546

* fix(trumps): ecep-214 u-mailto-… class in hbs

* feat(tools): ecep-214 x-mailto-… from u-mailto-…

src/lib/_imports/tools/x-mailto-text-replace.css

@@ -0,0 +1,18 @@
+/*
+Mailto Link Text Replacement
+
+Replace mailto link rendered text with virtual text from data-attributes
+
+Styleguide Tools.ExtendsAndMixins.MailtoTextReplace
+*/
+
+%x-mailto-text-replace {
+    visibility: hidden;
+    font-size: 0;
+}
+%x-mailto-text-replace::before {
+    display: inline;
+    content: attr(data-user) "@" attr(data-domain);
+    font-size: initial;
+    visibility: visible;
+}

src/lib/_imports/trumps/u-mailto-text-replace.css

@@ -0,0 +1,7 @@
+/* Create utility class from `x-mailto-text-replace` */
+
+@import url("@tacc/core-styles/src/lib/_imports/tools/x-mailto-text-replace.css");
+
+.u-mailto-text-replace[data-user][data-domain] {
+    @extend %x-mailto-text-replace;
+}

src/lib/_imports/trumps/u-mailto-text-replace/u-mailto-text-replace.config.yml

@@ -0,0 +1,7 @@
+label: Mailto Link Text Replacement
+notes: |-
+  Replaces the display text of an `<a href="mailto:…" data-user="bob" data-domain="">` link with the e-mail address constructed from the `data-user` and `data-domain` attributes.
+
+  This can be used to render an accurate e-mail that will not be recognized by a generic web scraper. The default display text should be an inaccurate e-mail address.
+
+  _To make sure link is accessible if CSS does not load, make it obvious to humans what part of an e-mail is inaccurate, e.g. `__REMOVE_THIS__`._

src/lib/_imports/trumps/u-mailto-text-replace/u-mailto-text-replace.hbs

@@ -0,0 +1,20 @@
+<dl>
+  <dt>No Attributes (thus no effect)</dt>
+  <dd>
+    <a
+      href="mailto:[email protected]"
+      class="u-mailto-text-replace">
+      [email protected]
+    </a>
+  </dt>
+
+  <dt>Has Attributes (<code>data-user</code>, <code>data-domain</code>)</dt>
+  <dd>
+    <a
+      href="mailto:[email protected]"
+      data-domain="any.domain.ext" data-user="someone"
+      class="u-mailto-text-replace">
+      [email protected]
+    </a>
+  </dt>
+</dl>