feat: add table of contents and remove accordion functionality

openui · Mar 30, 2021 · 42f0b00 · 42f0b00
1 parent 85e9059
commit 42f0b00
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 62 deletions.
diff --git a/research/src/components/component-index.js b/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>
+ )
+}
diff --git a/research/src/components/concept.js b/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>
  )
 }
diff --git a/research/src/components/concepts.js b/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}
  />
  )
  })}

diff --git a/research/src/components/global.css b/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;
  }

diff --git a/research/src/components/layout.js b/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>