Add code copy buttons to Card page

Addresses #829

Author: dancormier

docs/.eleventy.js

@@ -134,6 +134,35 @@ module.exports = function(eleventyConfig) {
     return output;
   });
 
+  // Copy button shortcode
+  eleventyConfig.addLiquidShortcode("copybutton", function(name) {
+    var checkmarkIcon = Icons["Checkmark"];
+    var copyIcon = Icons["Copy"];
+    var tooltipId = "tooltip-" + (name || Math.floor(Math.random() * 1000));
+
+    var output = '';
+    output += '<button'
+    output += ' class="s-btn s-btn__muted s-btn__icon ps-absolute t8 r8"';
+    output += ' data-action="clipboard#copy"';
+    output += ' data-s-tooltip-placement="top"';
+    output += ' data-controller="s-tooltip"';
+    output += ' aria-describedby="' + tooltipId + '"';
+    output += '>';
+    output +=  '<span class="d-none" data-show-on-copy>' + checkmarkIcon + '</span>';
+    output +=  '<span data-hide-on-copy>' + copyIcon + '</span>';
+    output += '</button>'
+    output += '<div class="s-popover s-popover__tooltip"';
+    output += ' id="' + tooltipId + '"';
+    output += ' role="tooltip"';
+    output += ' aria-hidden="true">';
+    output +=   '<div class="s-popover--arrow"></div>';
+    output +=   '<span class="d-none" data-show-on-copy>Copied</span>';
+    output +=   '<span data-hide-on-copy>Copy</span>';
+    output += '</div>';
+
+    return output;
+  });
+
   // Version shortcode
   eleventyConfig.addLiquidShortcode("version", function() {
     return {version}.version;

docs/assets/js/controllers/clipboard.ts

@@ -0,0 +1,32 @@
+(function(){
+    var application = Stimulus.Application.start();
+    application.register("clipboard", class extends Stimulus.Controller {
+        static targets = ["source"];
+        sourceTarget!: HTMLElement;
+
+        connect() {
+            super.connect();
+        };
+
+        copy() {
+            const text = this.sourceTarget.innerText;
+            navigator.clipboard.writeText(text);
+            this.handleVisible();
+        }
+
+        private handleVisible() {
+            const { scope } = this.targets;
+
+            const hideElements = scope.findAllElements('[data-hide-on-copy]');
+            const showElements = scope.findAllElements('[data-show-on-copy]');
+
+            hideElements.map(el => el.classList.add("d-none"));
+            showElements.map(el => el.classList.remove("d-none"));
+
+            setTimeout(function () {
+                hideElements.map(el => el.classList.remove("d-none"));
+                showElements.map(el => el.classList.add("d-none"));
+            }, 3000);
+        }
+    });
+})();

docs/assets/less/stacks-documentation.less

@@ -255,7 +255,8 @@
         box-shadow: none;
     });
 
-    > pre.s-code-block {
+    > pre.s-code-block,
+    > .stacks-clipboard-content pre.s-code-block {
         border-radius: @br-md @br-md 0 0;
         border: 1px solid var(--bc-medium);
         max-height: 24rem;

docs/product/components/cards.html

@@ -9,13 +9,18 @@
     <p class="stacks-copy">The base card styling applies a border and padding to the card.</p>
     <p class="stacks-copy">Cards can be any size and it’s ok to increase the body text size for larger cards.</p>
     <div class="stacks-preview">
+        <div class="stacks-clipboard-content ps-relative" data-controller="clipboard">
+            {% copybutton %}
+            <span data-clipboard-target="source">
 {% highlight html %}
 <div class="s-card">
     <h2 class="fs-body3 lh-sm fc-dark">…</h2>
     <p class="fs-body1 fc-medium">…</p>
     <button class="s-btn s-btn__primary s-btn__sm">…</button>
 </div>
 {% endhighlight %}
+            </span>
+        </div>
         <div class="stacks-preview--example">
             <div class="s-card wmx3 mb12">
                 <h2 class="fs-body3 lh-sm fc-dark">Base card title</h2>
@@ -41,12 +46,17 @@ <h2 class="fs-body3 lh-sm fc-dark">Base card title</h2>
     {% header "h2", "Box shadows" %}
     <p class="stacks-copy">Applying <a href="{{ "/product/base/box-shadow/" | url }}">a <a href="{{ "/product/base/box-shadow/" | url }}"><code class="stacks-code">.bs-*</code> class</a> adds a box shadow to a card. Useful when giving users the impression they can interact with the card.</p>
     <div class="stacks-preview">
+        <div class="stacks-clipboard-content ps-relative" data-controller="clipboard">
+            {% copybutton %}
+            <span data-clipboard-target="source">
 {% highlight html %}
 <div class="s-card bs-sm">…</div>
 <div class="s-card bs-md">…</div>
 <div class="s-card bs-lg">…</div>
 {% endhighlight %}
-        <div class="stacks-preview--example">
+            </span>
+        </div>
+            <div class="stacks-preview--example">
             <div class="d-flex flex__allitems4 md:fd-column gs12">
                 <div class="flex--item s-card bs-sm">
                     <h2 class="fs-body3 lh-sm fc-dark">Small box shadow</h2>
@@ -70,6 +80,9 @@ <h2 class="fs-body3 lh-sm fc-dark">Large box shadow</h2>
     <p class="stacks-copy">The <code class="stacks-code">.s-card</code> class can be applied to an <code class="stacks-code">&lt;a&gt;</code> tag for instances where a whole card should link somewhere. If possible, linked cards should visually indication that they’re interactive (ex. including an <code class="stacks-code">.s-btn</code> or <code class="stacks-code">.s-link</code> somewhere).</p>
     <p class="stacks-copy">A <code class="stacks-code">:hover</code> style for border color is automatically added to all linked cards. For linked cards with a box shadow (<code class="stacks-code">.bs-*</code>), adding <a href="{{ "/product/base/box-shadow/" | url }}">a <code class="stacks-code">.h:bs-*</code> class</a> will apply a hover style to the box shadow as well. Increasing the <code class="stacks-code">.bs-</code> size by <strong>a factor of one</strong> is usually best.</p>
     <div class="stacks-preview">
+        <div class="stacks-clipboard-content ps-relative" data-controller="clipboard">
+            {% copybutton %}
+            <span data-clipboard-target="source">
 {% highlight html %}
 <a href="…" class="s-card">
     <h2 class="fs-body3 lh-sm fc-dark">…</h2>
@@ -83,6 +96,8 @@ <h2 class="fs-body3 lh-sm fc-dark">…</h2>
     <p class="fs-body1 s-link">…</p>
 </a>
 {% endhighlight %}
+            </span>
+        </div>
         <div class="stacks-preview--example">
             <div class="d-flex flex__allitems4 fw-wrap ai-stretch md:fd-column gs12">
                 <a href="#" class="flex--item s-card">
@@ -122,12 +137,17 @@ <h2 class="fs-body3 lh-sm fc-dark">Large box shadow on :hover</h2>
     {% header "h2", "Muted" %}
     <p class="stacks-copy">When a card is disabled or considered completed, apply the muted modifier to visually dim the card.</p>
     <div class="stacks-preview">
+        <div class="stacks-clipboard-content ps-relative" data-controller="clipboard">
+            {% copybutton %}
+            <span data-clipboard-target="source">
 {% highlight html %}
 <div class="s-card s-card__muted">
     <h1 class="fs-body3 fc-dark">…</h1>
     <p class="fs-body1 fc-light">…</p>
 </div>
 {% endhighlight %}
+            </span>
+        </div>
         <div class="stacks-preview--example">
             <div class="d-flex flex__allitems4 md:fd-column gs12">
                 <div class="flex--item s-card s-card__muted">
@@ -147,13 +167,18 @@ <h2 class="fs-body3 lh-sm fc-dark">Linked card title</h2>
     {% header "h2", "Stacked" %}
     <p class="stacks-copy">First introduced for our collections feature in Teams, cards can also be stacked to imply multiple sections or items. No need to overthink it, we can just nest our cards. Note: You’ll need to compensate for the <code class="stacks-code">4px</code> of nesting on that right edge to keep things equidistant.</p>
     <div class="stacks-preview">
+        <div class="stacks-clipboard-content ps-relative" data-controller="clipboard">
+            {% copybutton %}
+            <span data-clipboard-target="source">
 {% highlight html %}
 <div class="s-card p0">
     <div class="s-card ps-relative b4 l4">
         …
     </div>
 </div>
 {% endhighlight %}
+            </span>
+        </div>
         <div class="stacks-preview--example">
             <div class="pr4">
                 <div class="s-card p0">