feat: add table of contents and remove accordion functionality

research/src/components/component-index.js

@@ -0,0 +1,37 @@
+import React from 'react'
+import _ from 'lodash'
+import { openUIConceptsByComponent } from '../sources'
+
+export default function ConceptIndex({ component }) {
+  if (!openUIConceptsByComponent[component]) return null
+
+  const concepts = _.sortBy(
+    _.toPairs(openUIConceptsByComponent[component]),
+    ([openUIName, concepts]) => -concepts.length,
+  )
+
+  return (
+    <ol style={{ listStyle: 'none', marginLeft: 24, marginRight: -24, width: 100 }}>
+      <li>
+        <a href="#names">Names</a>
+      </li>
+      <li>
+        <a href="#anatomy">Anatomy</a>
+      </li>
+      <li>
+        <a href="#concepts">Concepts</a>
+      </li>
+      <ol style={{ fontSize: '.825rem', listStyle: 'none', marginLeft: 8 }}>
+        {concepts.map(([concept]) => {
+          return (
+            <li key={concept} style={{ marginBottom: 4 }}>
+              <a style={{ textTransform: 'capitalize' }} href={`#${concept}`}>
+                {concept}
+              </a>
+            </li>
+          )
+        })}
+      </ol>
+    </ol>
+  )
+}

research/src/components/concept.js

@@ -8,13 +8,7 @@ export default function Concept({
   component,
   uniqueNames,
   showDescriptions,
-  initExpand,
 }) {
-  const [open, toggleOpen] = React.useState(initExpand)
-
-  React.useEffect(() => {
-    toggleOpen(initExpand)
-  }, [initExpand])
   return (
     <div style={{ padding: '8px', marginBottom: '36px' }}>
       <h3
@@ -26,31 +20,7 @@ export default function Concept({
           lineHeight: 1,
         }}
       >
-        <button
-          style={{
-            textDecoration: 'none',
-            color: 'inherit',
-            cursor: 'pointer',
-            marginRight: '8px',
-            background: 'none',
-            border: 'none',
-          }}
-          onClick={(e) => {
-            e.preventDefault()
-            toggleOpen((isOpen) => !isOpen)
-          }}
-        >
-          <span
-            style={{
-              fontSize: '12px',
-              verticalAlign: 'middle',
-              textAlign: 'center',
-            }}
-          >
-            {open ? <>&#9660;</> : <>&#9650;</>}
-          </span>{' '}
-          {conceptOpenUIName}
-        </button>
+        <span style={{ marginRight: 8 }}>{conceptOpenUIName}</span>
         {!hasOtherNames && (
           <ConceptCoverage
             component={component}
@@ -73,14 +43,11 @@ export default function Concept({
           ))}
         </div>
       )}
-
-      {open && (
-        <Specimens
-          showDescriptions={showDescriptions}
-          component={component}
-          conceptName={conceptOpenUIName}
-        />
-      )}
+      <Specimens
+        showDescriptions={showDescriptions}
+        component={component}
+        conceptName={conceptOpenUIName}
+      />
     </div>
   )
 }

research/src/components/concepts.js

@@ -6,7 +6,6 @@ import Concept from './concept'
 
 const Concepts = ({ component }) => {
   const [showDescriptions, setShowDescriptions] = React.useState(false)
-  const [collapseAll, toggleCollapseAll] = React.useState(true)
 
   const conceptsForComponent = _.sortBy(
     _.toPairs(openUIConceptsByComponent[component]),
@@ -42,27 +41,6 @@ const Concepts = ({ component }) => {
           />
           Show descriptions
         </label>
-        <label
-          style={{
-            cursor: 'pointer',
-          }}
-          htmlFor="collapse"
-        >
-          <input
-            type="checkbox"
-            id="collapse"
-            checked={collapseAll}
-            aria-checked={collapseAll}
-            onChange={() => toggleCollapseAll((isCollapsed) => !isCollapsed)}
-            style={{
-              marginRight: '8px',
-              verticalAlign: 'middle',
-              width: '0px',
-              height: '0px',
-            }}
-          />
-          {collapseAll ? 'Collapse all' : 'Expand all'}
-        </label>
       </div>
       {_.map(conceptsForComponent, ([conceptOpenUIName, concepts]) => {
         const uniqueNames = _.uniq(_.map(concepts, 'name'))
@@ -76,7 +54,6 @@ const Concepts = ({ component }) => {
             uniqueNames={uniqueNames}
             showDescriptions={showDescriptions}
             key={conceptOpenUIName}
-            initExpand={collapseAll}
           />
         )
       })}

research/src/components/global.css

@@ -1,3 +1,7 @@
+html {
+    scroll-behavior: smooth;
+}
+
 /*       Header     */
 .header-menu-btn[type='button'] {
   display: none;
@@ -50,6 +54,10 @@
     display: none;
   }
 
+  .component-index-wrapper {
+      display: none;
+  }
+
   .community-links.mobile {
     display: flex;
   }

research/src/components/layout.js

@@ -10,6 +10,7 @@ import './global.css'
 import Header from './header'
 import Navigation from './navigation'
 import ComponentLayout from './component-layout'
+import ComponentIndex from './component-index'
 
 // Add JSON5 language support to Prism
 import Prism from 'prism-react-renderer/prism'
@@ -94,6 +95,11 @@ const Layout = ({ children, pageContext }) => {
                   children
                 )}
               </div>
+              {frontmatter ? (
+                <div className="component-index-wrapper">
+                  <ComponentIndex component={frontmatter.name} />
+                </div>
+              ) : null}
             </div>
           </div>
         </MDXProvider>