From bda9ac14d4a25fe899e43cea7b8a7fad5055b20f Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Tue, 28 May 2024 00:55:09 +0800
Subject: [PATCH] Add pared shortcode for content warning component

---
 eleventy.config.md.js         | 10 ++++++++++
 src/assets/css/components.css | 31 +++++++++++++++++++++++++++++++
 2 files changed, 41 insertions(+)

diff --git a/eleventy.config.md.js b/eleventy.config.md.js
index 347abf66..3ea718cf 100644
--- a/eleventy.config.md.js
+++ b/eleventy.config.md.js
@@ -121,6 +121,16 @@ module.exports = function (eleventyConfig) {
         </details>`;
     });
 
+    // Paired shorcode: Content warning accordion
+    eleventyConfig.addPairedShortcode('contentWarning', (content, warning) => {
+        const warningMarkup = markdownLibrary.renderInline(warning);
+        const contentMarkup = markdownLibrary.render(content);
+        return `<details class="contnet-warning">
+            <summary class="contnet-warning__warning"><strong>⚠️ Content Warning:</strong> ${warningMarkup}</summary>
+            <div class="contnet-warning__content">${contentMarkup}</div>
+        </details>`;
+    });
+
     /* This is the part that tells 11ty to swap to our custom config */
     eleventyConfig.setLibrary("md", markdownLibrary);
 }
diff --git a/src/assets/css/components.css b/src/assets/css/components.css
index 9f5896dc..41b36069 100644
--- a/src/assets/css/components.css
+++ b/src/assets/css/components.css
@@ -85,6 +85,37 @@
     margin-top: 1em;
 }
 
+/* Content warning accordion */
+* + .contnet-warning {
+    margin-top: var(--sz-paragraph-margin);
+}
+
+.contnet-warning {
+    border: 0.1em solid var(--clr-title-border);
+    border-radius: 0.2em;
+}
+
+.contnet-warning__warning {
+    padding: 0.8em;
+    --stripe-color: rgb(0 0 0 / 0.1);
+    background-image: repeating-linear-gradient(
+        45deg,
+        transparent,
+        transparent 0.5em,
+        var(--stripe-color) 0.5em,
+        var(--stripe-color) 1em
+    );
+}
+
+.contnet-warning__warning:hover,
+.contnet-warning__warning:focus {
+    --stripe-color: rgb(150 0 0 / 0.1);
+}
+
+.contnet-warning__content {
+    padding: 1em;
+}
+
 /* Web button lists */
 .web-btn-wrapper {
     display: flex;