From 44ba0d51781bd3a5c7bc7b2b7be2b22575202e4c Mon Sep 17 00:00:00 2001
From: gavinleroy <gavinleroy6@gmail.com>
Date: Thu, 1 Aug 2024 12:09:37 -0600
Subject: [PATCH] Typo and using details for Toggle

---
 ide/packages/panoptes/src/TreeView/BottomUp.tsx |  2 +-
 ide/packages/print/src/Toggle.css               | 12 +++++++-----
 ide/packages/print/src/Toggle.tsx               | 14 ++++++++------
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/ide/packages/panoptes/src/TreeView/BottomUp.tsx b/ide/packages/panoptes/src/TreeView/BottomUp.tsx
index d0caf58..e463005 100644
--- a/ide/packages/panoptes/src/TreeView/BottomUp.tsx
+++ b/ide/packages/panoptes/src/TreeView/BottomUp.tsx
@@ -240,7 +240,7 @@ export const RenderBottomUpSets = ({
   return (
     <TreeAppContext.TreeRenderContext.Provider value={SubsetRenderParams}>
       <p>
-        Argus recommends investigating these failed oblgiations. Click on ’
+        Argus recommends investigating these failed obligations. Click on ’
         {otherLabel}‘ below to see other failed obligations.
       </p>
       <div id="recommended-failure-list">{argusRecommends}</div>
diff --git a/ide/packages/print/src/Toggle.css b/ide/packages/print/src/Toggle.css
index 1ef4d05..da433b9 100644
--- a/ide/packages/print/src/Toggle.css
+++ b/ide/packages/print/src/Toggle.css
@@ -1,14 +1,16 @@
-.toggle-box {
-  display: inline;  
+details.toggle-box {
+  display: inline-block;  
   border: 1px solid var(--vscode-textCodeBlock-background);
   border-radius: 4px;
 }
 
-.toggle-box.expanded {
-  display: inline-block;
+details[open].toggle-box > summary {
+  display: none;
 }
 
-.toggle-box .summary {
+details.toggle-box > summary {
+  list-style: none;
+
   color: var(--vscode-input-placeholderForeground);
   font-size: 80%;
 }
\ No newline at end of file
diff --git a/ide/packages/print/src/Toggle.tsx b/ide/packages/print/src/Toggle.tsx
index 9be6c7e..4adb3af 100644
--- a/ide/packages/print/src/Toggle.tsx
+++ b/ide/packages/print/src/Toggle.tsx
@@ -1,4 +1,3 @@
-import classNames from "classnames";
 import React, { useState } from "react";
 
 import "./Toggle.css";
@@ -13,14 +12,17 @@ export const Toggle = ({
   const [expanded, setExpanded] = useState(false);
   return (
     // biome-ignore lint/a11y/useKeyWithClickEvents: TODO
-    <div
-      className={classNames("toggle-box", { expanded })}
+    <details
+      className="toggle-box"
+      open={expanded}
       onClick={e => {
+        e.preventDefault();
         e.stopPropagation();
-        setExpanded(!expanded);
+        setExpanded(e => !e);
       }}
     >
-      {expanded ? <Children /> : <span className="summary">{summary}</span>}
-    </div>
+      <summary>{summary}</summary>
+      <Children />
+    </details>
   );
 };