Switch proposal

site/src/components/component-name-matrix.jsx

@@ -31,17 +31,19 @@ const ComponentNameMatrix = (props) => {
   const matchNameToCount = Object.entries(
     matchNames.reduce((acc, value) => {
       if (!acc[value]) {
-        acc[value] = 1;
+        acc[value] = 1
       } else {
-        acc[value]++;
+        acc[value]++
       }
 
-      return acc;
-    }, {})
+      return acc
+    }, {}),
   ).sort(([matchNameA, countA], [matchNameB, countB]) => {
     return sort === SORT_OPTIONS.COMPONENT_NAME
       ? matchNameA.localeCompare(matchNameB)
-      : (SORT_OPTIONS.MATCH_COUNT ? countB - countA : matchNameA.localeCompare(matchNameB));
+      : SORT_OPTIONS.MATCH_COUNT
+      ? countB - countA
+      : matchNameA.localeCompare(matchNameB)
   })
 
   return (

site/src/components/concept-coverage.jsx

@@ -4,7 +4,7 @@ import './concept-coverage.css'
 
 const ConceptCoverage = ({ component, conceptName, openUIConceptName }) => {
   const withConcept = getSourcesWithComponentConcept(component, conceptName, openUIConceptName)
-  const withoutConcept = sourceNames.filter(x => !withConcept.includes(x))
+  const withoutConcept = sourceNames.filter((x) => !withConcept.includes(x))
 
   return (
     <div className="concept-coverage">

site/src/sources/index.js

@@ -67,21 +67,21 @@ export const sources = [
           componentName: componentOpenUIName,
           openUIName: conceptOpenUIName,
         }
-      })
+      }),
     }
   }),
 }))
 
 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy
 export const groupBy = (items, callbackFn) => {
   return items.reduce((acc, currentValue, currentIndex) => {
-    let groupKey = callbackFn(currentValue, currentIndex);
+    let groupKey = callbackFn(currentValue, currentIndex)
     if (!acc[groupKey]) {
-      acc[groupKey] = [];
+      acc[groupKey] = []
     }
-    acc[groupKey].push(currentValue);
-    return acc;
-  }, {});
+    acc[groupKey].push(currentValue)
+    return acc
+  }, {})
 }
 
 export const get = (obj, path, defValue) => {
@@ -91,23 +91,18 @@ export const get = (obj, path, defValue) => {
   // Regex explained: https://regexr.com/58j0k
   const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g)
   // Find value
-  const result = pathArray.reduce(
-    (prevObj, key) => prevObj && prevObj[key],
-    obj
-  )
+  const result = pathArray.reduce((prevObj, key) => prevObj && prevObj[key], obj)
   // If found value is undefined return default value; otherwise return the value
   return result === undefined ? defValue : result
 }
 
 export const uniqBy = (arr, iteratee) => {
   if (typeof iteratee === 'string') {
     const prop = iteratee
-    iteratee = item => item[prop]
+    iteratee = (item) => item[prop]
   }
 
-  return arr.filter(
-    (x, i, self) => i === self.findIndex(y => iteratee(x) === iteratee(y))
-  )
+  return arr.filter((x, i, self) => i === self.findIndex((y) => iteratee(x) === iteratee(y)))
 }
 
 export const sourceNames = sources.map((source) => source.name)
@@ -120,28 +115,40 @@ export const componentsByName = groupBy(componentList, (component) => component.
 
 // Anatomies
 export const anatomiesByComponent = Object.fromEntries(
-  Object.entries(componentsByName).map(([key, value]) =>
-    [key, uniqBy(value.flatMap((component) => component.anatomy).filter(Boolean), "name")])
+  Object.entries(componentsByName).map(([key, value]) => [
+    key,
+    uniqBy(value.flatMap((component) => component.anatomy).filter(Boolean), 'name'),
+  ]),
 )
 
 // Concepts
 const conceptList = componentList.flatMap((component) => component.concepts).filter(Boolean)
 
-export const openUIConceptsByComponent = Object.fromEntries(Object.entries(groupBy(conceptList, concept => concept.componentName)).map(([key, value]) => [key, groupBy(value, concept => concept.openUIName)]))
+export const openUIConceptsByComponent = Object.fromEntries(
+  Object.entries(groupBy(conceptList, (concept) => concept.componentName)).map(([key, value]) => [
+    key,
+    groupBy(value, (concept) => concept.openUIName),
+  ]),
+)
 
-export const conceptsByComponent = Object.fromEntries(Object.entries(groupBy(conceptList, concept => concept.componentName)).map(([key, value]) => [key, groupBy(value, concept => concept.name)]))
+export const conceptsByComponent = Object.fromEntries(
+  Object.entries(groupBy(conceptList, (concept) => concept.componentName)).map(([key, value]) => [
+    key,
+    groupBy(value, (concept) => concept.name),
+  ]),
+)
 
 export const getSourcesWithComponentConcept = (
   componentName,
   conceptName,
   conceptOpenUIName = conceptName,
-) =>
-  [...new Set(
-      get(conceptsByComponent, [componentName, conceptName]).filter(
-        (concept) => concept.name === conceptName && concept.openUIName === conceptOpenUIName,
-      )
-        .map((concept) => concept.sourceName),
-  )]
+) => [
+  ...new Set(
+    get(conceptsByComponent, [componentName, conceptName])
+      .filter((concept) => concept.name === conceptName && concept.openUIName === conceptOpenUIName)
+      .map((concept) => concept.sourceName),
+  ),
+]
 
 // Images
 export const getImagesForComponentConcept = (componentOpenUIName, conceptOpenUIName) =>

site/src/styles/spec.css

@@ -1,6 +1,7 @@
 dl {
   border: 1px solid rgba(0, 0, 0, 0.2);
   padding: 1em;
+  margin-bottom: 1.125rem;
 }
 
 dd {
@@ -15,16 +16,35 @@ dd + dt {
   background: #f7f781;
   position: relative;
   display: flex;
+  padding: 0.5em;
+  margin-bottom: 1.125rem;
   counter-increment: questions;
 }
 
+.question p:last-child {
+  margin-bottom: 0;
+}
+
 .question::before {
   background: #ffdf3f;
   content: 'QUESTION ' counter(questions);
   width: max-content;
-  padding: 0 0.5em;
-  margin-right: 0.5em;
+  margin: -0.5em 0.5em -0.5em -0.5em;
+  padding: 0.5em;
   font-weight: bold;
+  flex-shrink: 0;
+}
+
+@media (max-width: 640px) {
+  .question {
+    flex-direction: column;
+  }
+
+  .question::before {
+    width: auto;
+    margin-right: -0.5em;
+    margin-bottom: 0.5rem;
+  }
 }
 
 .note {