Added Details and Summary tags to Structured Content (#842)

* add details and summary tags

* fixed css test

---------

Co-authored-by: martholomew <martholomew@users.noreply.github.com>

5 files changed, 19 insertions, 2 deletions

diff --git a/dev/data/structured-content-overrides.css b/dev/data/structured-content-overrides.css
index 46859b1b..c792cbb6 100644
--- a/dev/data/structured-content-overrides.css
+++ b/dev/data/structured-content-overrides.css
@@ -75,3 +75,9 @@
 :root[data-glossary-layout-mode=compact] .gloss-sc-ul[data-sc-content=glossary] .gloss-sc-li:not(:first-child)::before {
     /* remove-rule */
 }
+.gloss-sc-details {
+    /* remove-rule */
+}
+.gloss-sc-summary {
+    /* remove-rule */
+}
diff --git a/ext/css/structured-content.css b/ext/css/structured-content.css
index 532f1e54..2cb3fafe 100644
--- a/ext/css/structured-content.css
+++ b/ext/css/structured-content.css
@@ -254,3 +254,12 @@
     display: inline;
     color: var(--text-color-light3);
 }
+.gloss-sc-details {
+    cursor: pointer;
+    padding-left: var(--list-padding2);
+    border-top: calc(1em / var(--font-size-no-units)) solid var(--medium-border-color);
+    border-bottom: calc(1em / var(--font-size-no-units)) solid var(--medium-border-color);
+}
+.gloss-sc-summary {
+    list-style-position: outside;
+}
diff --git a/ext/data/schemas/dictionary-term-bank-v3-schema.json b/ext/data/schemas/dictionary-term-bank-v3-schema.json
index 40a326f6..47305177 100644
--- a/ext/data/schemas/dictionary-term-bank-v3-schema.json
+++ b/ext/data/schemas/dictionary-term-bank-v3-schema.json
@@ -104,7 +104,7 @@
                             "properties": {
                                 "tag": {
                                     "type": "string",
-                                    "enum": ["span", "div", "ol", "ul", "li"]
+                                    "enum": ["span", "div", "ol", "ul", "li", "details", "summary"]
                                 },
                                 "content": {
                                     "$ref": "#/definitions/structuredContent"
diff --git a/ext/js/display/structured-content-generator.js b/ext/js/display/structured-content-generator.js
index a7fd9f3d..f3b0890e 100644
--- a/ext/js/display/structured-content-generator.js
+++ b/ext/js/display/structured-content-generator.js
@@ -275,6 +275,8 @@ export class StructuredContentGenerator {
             case 'ol':
             case 'ul':
             case 'li':
+            case 'details':
+            case 'summary':
                 return this._createStructuredContentElement(tag, content, dictionary, language, 'simple', true, true);
             case 'img':
                 return this.createDefinitionImage(content, dictionary);
diff --git a/types/ext/structured-content.d.ts b/types/ext/structured-content.d.ts
index 8ab459b6..253f0324 100644
--- a/types/ext/structured-content.d.ts
+++ b/types/ext/structured-content.d.ts
@@ -122,7 +122,7 @@ export type TableElement = {
 };
 
 export type StyledElement = {
-    tag: 'span' | 'div' | 'ol' | 'ul' | 'li';
+    tag: 'span' | 'div' | 'ol' | 'ul' | 'li' | 'details' | 'summary';
     content?: Content;
     data?: Data;
     style?: StructuredContentStyle;