Skip to content

Commit 354e3ca

Browse files
dancormierdancormier
committed
Add code copy buttons to Card page
Addresses #829
1 parent 54c9272 commit 354e3ca

File tree

4 files changed

+89
-2
lines changed

4 files changed

+89
-2
lines changed

‎docs/.eleventy.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,35 @@ module.exports = function(eleventyConfig) {
134134
return output;
135135
});
136136

137+
// Copy button shortcode
138+
eleventyConfig.addLiquidShortcode("copybutton", function(name) {
139+
var checkmarkIcon = Icons["Checkmark"];
140+
var copyIcon = Icons["Copy"];
141+
var tooltipId = "tooltip-" + (name || Math.floor(Math.random() * 1000));
142+
143+
var output = '';
144+
output += '<button'
145+
output += ' class="s-btn s-btn__muted s-btn__icon ps-absolute t8 r8"';
146+
output += ' data-action="clipboard#copy"';
147+
output += ' data-s-tooltip-placement="top"';
148+
output += ' data-controller="s-tooltip"';
149+
output += ' aria-describedby="' + tooltipId + '"';
150+
output += '>';
151+
output += '<span class="d-none" data-show-on-copy>' + checkmarkIcon + '</span>';
152+
output += '<span data-hide-on-copy>' + copyIcon + '</span>';
153+
output += '</button>'
154+
output += '<div class="s-popover s-popover__tooltip"';
155+
output += ' id="' + tooltipId + '"';
156+
output += ' role="tooltip"';
157+
output += ' aria-hidden="true">';
158+
output += '<div class="s-popover--arrow"></div>';
159+
output += '<span class="d-none" data-show-on-copy>Copied</span>';
160+
output += '<span data-hide-on-copy>Copy</span>';
161+
output += '</div>';
162+
163+
return output;
164+
});
165+
137166
// Version shortcode
138167
eleventyConfig.addLiquidShortcode("version", function() {
139168
return {version}.version;

‎docs/assets/js/controllers/clipboard.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
(function(){
2+
var application = Stimulus.Application.start();
3+
application.register("clipboard", class extends Stimulus.Controller {
4+
static targets = ["source"];
5+
sourceTarget!: HTMLElement;
6+
7+
connect() {
8+
super.connect();
9+
};
10+
11+
copy() {
12+
const text = this.sourceTarget.innerText;
13+
navigator.clipboard.writeText(text);
14+
this.handleVisible();
15+
}
16+
17+
private handleVisible() {
18+
const { scope } = this.targets;
19+
20+
const hideElements = scope.findAllElements('[data-hide-on-copy]');
21+
const showElements = scope.findAllElements('[data-show-on-copy]');
22+
23+
hideElements.map(el => el.classList.add("d-none"));
24+
showElements.map(el => el.classList.remove("d-none"));
25+
26+
setTimeout(function () {
27+
hideElements.map(el => el.classList.remove("d-none"));
28+
showElements.map(el => el.classList.add("d-none"));
29+
}, 3000);
30+
}
31+
});
32+
})();

‎docs/assets/less/stacks-documentation.less‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -255,7 +255,8 @@
255255
box-shadow: none;
256256
});
257257

258-
> pre.s-code-block {
258+
> pre.s-code-block,
259+
> .stacks-clipboard-content pre.s-code-block {
259260
border-radius: @br-md @br-md 0 0;
260261
border: 1px solid var(--bc-medium);
261262
max-height: 24rem;

‎docs/product/components/cards.html‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,18 @@
99
<p class="stacks-copy">The base card styling applies a border and padding to the card.</p>
1010
<p class="stacks-copy">Cards can be any size and it’s ok to increase the body text size for larger cards.</p>
1111
<div class="stacks-preview">
12+
<div class="stacks-clipboard-content ps-relative" data-controller="clipboard">
13+
{% copybutton %}
14+
<span data-clipboard-target="source">
1215
{% highlight html %}
1316
<div class="s-card">
1417
<h2 class="fs-body3 lh-sm fc-dark">…</h2>
1518
<p class="fs-body1 fc-medium">…</p>
1619
<button class="s-btn s-btn__primary s-btn__sm">…</button>
1720
</div>
1821
{% endhighlight %}
22+
</span>
23+
</div>
1924
<div class="stacks-preview--example">
2025
<div class="s-card wmx3 mb12">
2126
<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>
4146
{% header "h2", "Box shadows" %}
4247
<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>
4348
<div class="stacks-preview">
49+
<div class="stacks-clipboard-content ps-relative" data-controller="clipboard">
50+
{% copybutton %}
51+
<span data-clipboard-target="source">
4452
{% highlight html %}
4553
<div class="s-card bs-sm">…</div>
4654
<div class="s-card bs-md">…</div>
4755
<div class="s-card bs-lg">…</div>
4856
{% endhighlight %}
49-
<div class="stacks-preview--example">
57+
</span>
58+
</div>
59+
<div class="stacks-preview--example">
5060
<div class="d-flex flex__allitems4 md:fd-column gs12">
5161
<div class="flex--item s-card bs-sm">
5262
<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>
7080
<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>
7181
<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>
7282
<div class="stacks-preview">
83+
<div class="stacks-clipboard-content ps-relative" data-controller="clipboard">
84+
{% copybutton %}
85+
<span data-clipboard-target="source">
7386
{% highlight html %}
7487
<a href="…" class="s-card">
7588
<h2 class="fs-body3 lh-sm fc-dark">…</h2>
@@ -83,6 +96,8 @@ <h2 class="fs-body3 lh-sm fc-dark">…</h2>
8396
<p class="fs-body1 s-link">…</p>
8497
</a>
8598
{% endhighlight %}
99+
</span>
100+
</div>
86101
<div class="stacks-preview--example">
87102
<div class="d-flex flex__allitems4 fw-wrap ai-stretch md:fd-column gs12">
88103
<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>
122137
{% header "h2", "Muted" %}
123138
<p class="stacks-copy">When a card is disabled or considered completed, apply the muted modifier to visually dim the card.</p>
124139
<div class="stacks-preview">
140+
<div class="stacks-clipboard-content ps-relative" data-controller="clipboard">
141+
{% copybutton %}
142+
<span data-clipboard-target="source">
125143
{% highlight html %}
126144
<div class="s-card s-card__muted">
127145
<h1 class="fs-body3 fc-dark">…</h1>
128146
<p class="fs-body1 fc-light">…</p>
129147
</div>
130148
{% endhighlight %}
149+
</span>
150+
</div>
131151
<div class="stacks-preview--example">
132152
<div class="d-flex flex__allitems4 md:fd-column gs12">
133153
<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>
147167
{% header "h2", "Stacked" %}
148168
<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>
149169
<div class="stacks-preview">
170+
<div class="stacks-clipboard-content ps-relative" data-controller="clipboard">
171+
{% copybutton %}
172+
<span data-clipboard-target="source">
150173
{% highlight html %}
151174
<div class="s-card p0">
152175
<div class="s-card ps-relative b4 l4">
153176
…
154177
</div>
155178
</div>
156179
{% endhighlight %}
180+
</span>
181+
</div>
157182
<div class="stacks-preview--example">
158183
<div class="pr4">
159184
<div class="s-card p0">

0 commit comments

Comments
 (0)