From dd2bde730e065b36d78c3ee750e9dc1c045c34eb Mon Sep 17 00:00:00 2001
From: George Cushen <gcushen@users.noreply.github.com>
Date: Sat, 19 Dec 2020 20:17:58 +0000
Subject: [PATCH] feat(shortcode): migrate Spoiler to new standardized HTML

Toggle lists have now been standardized in HTML. Functions just like the toggle lists on Github.

Also now supports Markdown in title and works better with longer titles (unlike the previous button based component).
---
 wowchemy/assets/scss/wowchemy/_shortcodes.scss | 11 +++++++++++
 wowchemy/layouts/shortcodes/spoiler.html       | 17 +++++------------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/wowchemy/assets/scss/wowchemy/_shortcodes.scss b/wowchemy/assets/scss/wowchemy/_shortcodes.scss
index 47cb1612..8bb59e43 100644
--- a/wowchemy/assets/scss/wowchemy/_shortcodes.scss
+++ b/wowchemy/assets/scss/wowchemy/_shortcodes.scss
@@ -21,3 +21,14 @@
   margin-left: var(--button-group-margin);
   margin-right: var(--button-group-margin);
 }
+
+// Spoilers (toggle lists)
+
+details {
+  margin-bottom: 1rem;
+}
+
+summary:focus {
+  // Override Webkit setting an outline.
+  outline: none;
+}
diff --git a/wowchemy/layouts/shortcodes/spoiler.html b/wowchemy/layouts/shortcodes/spoiler.html
index 6d617ed9..6559cbb0 100644
--- a/wowchemy/layouts/shortcodes/spoiler.html
+++ b/wowchemy/layouts/shortcodes/spoiler.html
@@ -1,13 +1,6 @@
 {{- $id := printf "spoiler-%d" .Ordinal -}}
-<div class="spoiler {{ .Get "class" }}" {{ with .Get "style" }}style="{{ . | safeCSS }}"{{ end }}>
-  <p>
-    <a class="btn btn-primary" data-toggle="collapse" href="#{{$id}}" role="button" aria-expanded="false" aria-controls="{{$id}}">
-      {{ .Get "text" | emojify }}
-    </a>
-  </p>
-  <div class="collapse card {{ if (eq (.Get "open") "true") }}show{{ end }}" id="{{$id}}">
-    <div class="card-body">
-      {{ .Inner | markdownify | emojify }}
-    </div>
-  </div>
-</div>
\ No newline at end of file
+
+<details class="spoiler {{ .Get "class" }}" {{ with .Get "style" }}style="{{ . | safeCSS }}"{{ end }} id="{{$id}}">
+  <summary>{{ .Get "text" | markdownify | emojify }}</summary>
+  <p>{{ .Inner | markdownify | emojify }}</p>
+</details>
\ No newline at end of file