From 354e3ca2fcbedc2b96c5b32e3220ff4b9e39ff1b Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Tue, 22 Mar 2022 18:05:36 -0400 Subject: [PATCH 01/16] 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 += ''; + output += '' + copyIcon + ''; + output += '' + output += '
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 @@

The base card styling applies a border and padding to the card.

Cards can be any size and it’s ok to increase the body text size for larger cards.

+
+ {% copybutton %} + {% highlight html %}

…

@@ -16,6 +19,8 @@

…

{% endhighlight %} + +

Base card title

@@ -41,12 +46,17 @@

Base card title

{% header "h2", "Box shadows" %}

Applying a .bs-* class adds a box shadow to a card. Useful when giving users the impression they can interact with the card.

+
+ {% copybutton %} + {% highlight html %}
…
…
…
{% endhighlight %} -
+ +
+

Small box shadow

@@ -70,6 +80,9 @@

Large box shadow

The .s-card class can be applied to an <a> tag for instances where a whole card should link somewhere. If possible, linked cards should visually indication that they’re interactive (ex. including an .s-btn or .s-link somewhere).

A :hover style for border color is automatically added to all linked cards. For linked cards with a box shadow (.bs-*), adding a .h:bs-* class will apply a hover style to the box shadow as well. Increasing the .bs- size by a factor of one is usually best.

+
+ {% copybutton %} + {% highlight html %}

…

@@ -83,6 +96,8 @@

…

…

 {% endhighlight %} + +
@@ -122,12 +137,17 @@

Large box shadow on :hover

{% header "h2", "Muted" %}

When a card is disabled or considered completed, apply the muted modifier to visually dim the card.

+
+ {% copybutton %} + {% highlight html %}

…

…

{% endhighlight %} + +
@@ -147,6 +167,9 @@

Linked card title

{% header "h2", "Stacked" %}

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 4px of nesting on that right edge to keep things equidistant.

+
+ {% copybutton %} + {% highlight html %}
@@ -154,6 +177,8 @@

Linked card title

{% endhighlight %} + +
From cd58475d2239d0d7f1b5fa832fcfd741d395960b Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Mon, 4 Apr 2022 11:27:24 -0400 Subject: [PATCH 02/16] Use template string for copy button Addresses https://github.com/StackExchange/Stacks/pull/883#discussion_r841426692 --- docs/.eleventy.js | 38 +++++++++++++++++--------------------- 1 file changed, 17 insertions(+), 21 deletions(-) diff --git a/docs/.eleventy.js b/docs/.eleventy.js index a75af71d70..54002b0209 100644 --- a/docs/.eleventy.js +++ b/docs/.eleventy.js @@ -136,29 +136,25 @@ module.exports = function(eleventyConfig) { // 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 += ''; - output += '' + copyIcon + ''; - output += '' - output += '
+ ${Icons["Checkmark"]} + ${Icons["Copy"]} + + `; return output; }); From 04ce2f7a588d98795bbdebfd1b99a922ac5e44f3 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Mon, 4 Apr 2022 11:48:59 -0400 Subject: [PATCH 03/16] Match new file structure --- docs/.eleventy.js | 27 ++--------------------- docs/assets/js/controllers/clipboard.ts | 2 ++ docs/assets/js/index.ts | 1 + docs/plugins/copy-button.js | 29 +++++++++++++++++++++++++ 4 files changed, 34 insertions(+), 25 deletions(-) create mode 100644 docs/plugins/copy-button.js diff --git a/docs/.eleventy.js b/docs/.eleventy.js index 0398dc1287..19693a6e7f 100644 --- a/docs/.eleventy.js +++ b/docs/.eleventy.js @@ -6,6 +6,7 @@ const highlightPlugin = require("./plugins/highlight"); const iconPlugin = require("./plugins/icons"); const tipPlugin = require("./plugins/tip"); const markdownPlugin = require("./plugins/markdown"); +const copyButtonPlugin = require("./plugins/copy-button"); module.exports = function(eleventyConfig) { eleventyConfig.setQuietMode(true); // Reduce the console output @@ -15,31 +16,7 @@ module.exports = function(eleventyConfig) { eleventyConfig.addPlugin(iconPlugin); eleventyConfig.addPlugin(headerPlugin); eleventyConfig.addPlugin(tipPlugin); - - // Copy button shortcode - eleventyConfig.addLiquidShortcode("copybutton", function(name) { - var tooltipId = "tooltip-" + (name || Math.floor(Math.random() * 1000)); - - var output = ` - `; - - return output; - }); + eleventyConfig.addPlugin(copyButtonPlugin); // Version shortcode eleventyConfig.addLiquidShortcode("version", function() { diff --git a/docs/assets/js/controllers/clipboard.ts b/docs/assets/js/controllers/clipboard.ts index 421884c645..958b47cec4 100644 --- a/docs/assets/js/controllers/clipboard.ts +++ b/docs/assets/js/controllers/clipboard.ts @@ -1,3 +1,5 @@ +import * as Stimulus from "stimulus"; + (function(){ var application = Stimulus.Application.start(); application.register("clipboard", class extends Stimulus.Controller { diff --git a/docs/assets/js/index.ts b/docs/assets/js/index.ts index c8b10faf6b..7976761cec 100644 --- a/docs/assets/js/index.ts +++ b/docs/assets/js/index.ts @@ -1,5 +1,6 @@ import "../../../lib/ts/index"; import "../less/stacks-documentation.less"; +import "./controllers/clipboard"; import "./controllers/docs-resizer"; import * as Stacks from "../../../lib/ts/index"; diff --git a/docs/plugins/copy-button.js b/docs/plugins/copy-button.js new file mode 100644 index 0000000000..8f5af2f088 --- /dev/null +++ b/docs/plugins/copy-button.js @@ -0,0 +1,29 @@ +const { default: Icons } = require("@stackoverflow/stacks-icons"); + +module.exports = { + configFunction(eleventyConfig) { + eleventyConfig.addLiquidShortcode("copybutton", function(name) { + var tooltipId = "tooltip-" + (name || Math.floor(Math.random() * 1000)); + + var output = ` + `; + + return output; + }); + } +} From 4ea641439d28e5d22786198f998fbdb09b9ced8b Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Mon, 4 Apr 2022 11:52:16 -0400 Subject: [PATCH 04/16] Cleanup stimulus import --- docs/assets/js/controllers/clipboard.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/docs/assets/js/controllers/clipboard.ts b/docs/assets/js/controllers/clipboard.ts index 958b47cec4..1467eca761 100644 --- a/docs/assets/js/controllers/clipboard.ts +++ b/docs/assets/js/controllers/clipboard.ts @@ -1,8 +1,7 @@ -import * as Stimulus from "stimulus"; +import { Application, Controller } from "stimulus"; (function(){ - var application = Stimulus.Application.start(); - application.register("clipboard", class extends Stimulus.Controller { + Application.start().register("clipboard", class extends Controller { static targets = ["source"]; sourceTarget!: HTMLElement; From aa84fc37bc1272218667d8fbddab3c755d337372 Mon Sep 17 00:00:00 2001 From: Aaron Shekey Date: Tue, 5 Apr 2022 15:20:06 -0500 Subject: [PATCH 05/16] Some aesthetic choices --- docs/assets/less/stacks-documentation.less | 15 +++++++++++++++ docs/plugins/copy-button.js | 2 +- 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/docs/assets/less/stacks-documentation.less b/docs/assets/less/stacks-documentation.less index dec4011f89..293b7d81b8 100644 --- a/docs/assets/less/stacks-documentation.less +++ b/docs/assets/less/stacks-documentation.less @@ -231,6 +231,20 @@ white-space: normal; } +// ============================================================================ +// $ CODE COPY BUTTON +// ---------------------------------------------------------------------------- +.stacks-copy-btn { + .svg-icon, + .svg-icon * { + pointer-events: none; + } + + .iconCheckmark { + color: var(--green-500); + } +} + // ============================================================================ // $ LISTS @@ -260,6 +274,7 @@ border-radius: var(--br-md) var(--br-md) 0 0; border: 1px solid var(--bc-medium); max-height: 24rem; + padding-right: var(--su32); .dark-mode({ border-color: var(--bc-lighter); diff --git a/docs/plugins/copy-button.js b/docs/plugins/copy-button.js index 8f5af2f088..56ee6abaf4 100644 --- a/docs/plugins/copy-button.js +++ b/docs/plugins/copy-button.js @@ -6,7 +6,7 @@ module.exports = { var tooltipId = "tooltip-" + (name || Math.floor(Math.random() * 1000)); var output = ` - `; - - return output; - }); - } + var output = ` +
+ + +
+ ${content} +
+
+`; + + return output; + }); } +} \ No newline at end of file diff --git a/docs/product/components/cards.html b/docs/product/components/cards.html index d16b65ef13..e49d0d42b0 100644 --- a/docs/product/components/cards.html +++ b/docs/product/components/cards.html @@ -9,9 +9,7 @@

The base card styling applies a border and padding to the card.

Cards can be any size and it’s ok to increase the body text size for larger cards.

-
- {% copybutton %} - +{% copybutton %} {% highlight html %}

…

@@ -19,8 +17,7 @@

…

{% endhighlight %} - -
+{% endcopybutton %}

Base card title

@@ -47,14 +44,11 @@

Base card title

Applying a .bs-* class adds a box shadow to a card. Useful when giving users the impression they can interact with the card.

- {% copybutton %} - {% highlight html %}
…
…
…
{% endhighlight %} -
@@ -81,8 +75,6 @@

Large box shadow

A :hover style for border color is automatically added to all linked cards. For linked cards with a box shadow (.bs-*), adding a .h:bs-* class will apply a hover style to the box shadow as well. Increasing the .bs- size by a factor of one is usually best.

- {% copybutton %} - {% highlight html %}

…

@@ -96,7 +88,6 @@

…

…

 {% endhighlight %} -
@@ -138,15 +129,12 @@

Large box shadow on :hover

When a card is disabled or considered completed, apply the muted modifier to visually dim the card.

- {% copybutton %} - {% highlight html %}

…

…

{% endhighlight %} -
@@ -168,8 +156,6 @@

Linked card title

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 4px of nesting on that right edge to keep things equidistant.

- {% copybutton %} - {% highlight html %}
@@ -177,7 +163,6 @@

Linked card title

{% endhighlight %} -
From 32f803ea3577737f14b092b430e83944f6b324ed Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Wed, 6 Jul 2022 18:42:12 -0400 Subject: [PATCH 10/16] Add copy button to the rest of card examples --- docs/product/components/cards.html | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/product/components/cards.html b/docs/product/components/cards.html index e49d0d42b0..8662cb800c 100644 --- a/docs/product/components/cards.html +++ b/docs/product/components/cards.html @@ -43,13 +43,13 @@

Base card title

{% header "h2", "Box shadows" %}

Applying a .bs-* class adds a box shadow to a card. Useful when giving users the impression they can interact with the card.

-
+{% copybutton %} {% highlight html %}
…
…
…
{% endhighlight %} -
+{% endcopybutton %}
@@ -74,7 +74,7 @@

Large box shadow

The .s-card class can be applied to an <a> tag for instances where a whole card should link somewhere. If possible, linked cards should visually indication that they’re interactive (ex. including an .s-btn or .s-link somewhere).

A :hover style for border color is automatically added to all linked cards. For linked cards with a box shadow (.bs-*), adding a .h:bs-* class will apply a hover style to the box shadow as well. Increasing the .bs- size by a factor of one is usually best.

-
+{% copybutton %} {% highlight html %}

…

@@ -88,7 +88,7 @@

…

…

 {% endhighlight %} -
+{% endcopybutton %}
@@ -128,14 +128,14 @@

Large box shadow on :hover

{% header "h2", "Muted" %}

When a card is disabled or considered completed, apply the muted modifier to visually dim the card.

-
+{% copybutton %} {% highlight html %}

…

…

{% endhighlight %} -
+{% endcopybutton %}
@@ -155,7 +155,7 @@

Linked card title

{% header "h2", "Stacked" %}

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 4px of nesting on that right edge to keep things equidistant.

-
+{% copybutton %} {% highlight html %}
@@ -163,7 +163,7 @@

Linked card title

{% endhighlight %} -
+{% endcopybutton %}
From d8d4dc08b0cdbae13eae67d87c1d2f640bad230c Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Wed, 6 Jul 2022 18:51:35 -0400 Subject: [PATCH 11/16] tweak copy button style MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit I think we can get away with this. Larger click target, looks alright. 🤷‍♂️ --- docs/plugins/copy-button.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/plugins/copy-button.js b/docs/plugins/copy-button.js index 06c5a71208..8c9130b908 100644 --- a/docs/plugins/copy-button.js +++ b/docs/plugins/copy-button.js @@ -8,7 +8,7 @@ module.exports = { var output = `

+ {% endcopybutton %}

Base card title

From 3ea29dd014e69b7591fe524a1f22cff2d1da4e06 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Thu, 7 Jul 2022 11:30:46 -0400 Subject: [PATCH 16/16] whoops, don't need that --- docs/product/components/cards.html | 2 -- 1 file changed, 2 deletions(-) diff --git a/docs/product/components/cards.html b/docs/product/components/cards.html index 0e148331e6..8662cb800c 100644 --- a/docs/product/components/cards.html +++ b/docs/product/components/cards.html @@ -20,14 +20,12 @@

…

{% endcopybutton %}
- {% copybutton, "", "rn8 tn8" %}

Base card title

This is a description of the card’s content.

- {% endcopybutton %}

Base card title