From b00e3653f2620f16fa8eadf41de66d4b7d62d183 Mon Sep 17 00:00:00 2001
From: Dan Cormier <dcormier@stackoverflow.com>
Date: Tue, 22 Mar 2022 18:05:36 -0400
Subject: [PATCH] Add code copy buttons to Card page

Addresses https://github.com/StackExchange/Stacks/issues/829
---
 docs/.eleventy.js                          | 29 ++++++++++++++++++++
 docs/assets/js/controllers/clipboard.ts    | 32 ++++++++++++++++++++++
 docs/assets/less/stacks-documentation.less |  3 +-
 docs/product/components/cards.html         | 27 +++++++++++++++++-
 4 files changed, 89 insertions(+), 2 deletions(-)
 create mode 100644 docs/assets/js/controllers/clipboard.ts

diff --git a/docs/.eleventy.js b/docs/.eleventy.js
index e530813f2f..a75af71d70 100644
--- a/docs/.eleventy.js
+++ b/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;
diff --git a/docs/assets/js/controllers/clipboard.ts b/docs/assets/js/controllers/clipboard.ts
new file mode 100644
index 0000000000..421884c645
--- /dev/null
+++ b/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);
+        }
+    });
+})();
\ No newline at end of file
diff --git a/docs/assets/less/stacks-documentation.less b/docs/assets/less/stacks-documentation.less
index acff8723dd..638a9ad550 100644
--- a/docs/assets/less/stacks-documentation.less
+++ b/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;
diff --git a/docs/product/components/cards.html b/docs/product/components/cards.html
index f58ffdd769..d16b65ef13 100644
--- a/docs/product/components/cards.html
+++ b/docs/product/components/cards.html
@@ -9,6 +9,9 @@
     <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>
@@ -16,6 +19,8 @@ <h2 class="fs-body3 lh-sm fc-dark">…</h2>
     <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,6 +167,9 @@ <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">
@@ -154,6 +177,8 @@ <h2 class="fs-body3 lh-sm fc-dark">Linked card title</h2>
     </div>
 </div>
 {% endhighlight %}
+            </span>
+        </div>
         <div class="stacks-preview--example">
             <div class="pr4">
                 <div class="s-card p0">