Made facet name a header

Author: AndreasArvidsson

packages/cursorless-org-docs/src/docs/user/languages/components/Header.tsx

@@ -1,18 +1,38 @@
 import React from "react";
 
-export function H2({ children }: { children: string }) {
-  return renderHeader(2, children);
+interface Props {
+  className?: string;
+  title?: string;
+  children: string;
 }
 
-export function H3({ children }: { children: string }) {
-  return renderHeader(3, children);
+export function H2(props: Props) {
+  return renderHeader(2, props);
 }
 
-function renderHeader(level: number, children: string): React.JSX.Element {
+export function H3(props: Props) {
+  return renderHeader(3, props);
+}
+
+export function H4(props: Props) {
+  return renderHeader(4, props);
+}
+
+function renderHeader(
+  level: number,
+  { className, title, children }: Props,
+): React.JSX.Element {
   const Tag = `h${level}` as keyof React.JSX.IntrinsicElements;
   const href = children.toLowerCase().replaceAll(" ", "-");
   return (
-    <Tag id={href} className="scope-header anchorWithStickyNavbar_IncK">
+    <Tag
+      id={href}
+      title={title}
+      className={
+        "scope-header anchorWithStickyNavbar_IncK" +
+        (className ? " " + className : "")
+      }
+    >
       {children}
       <a className="hash-link" href={`#${href}`} />
     </Tag>

packages/cursorless-org-docs/src/docs/user/languages/components/ScopeSupport.css

@@ -1,3 +1,4 @@
 .facet-name {
   font-weight: 600;
+  margin: 0;
 }

packages/cursorless-org-docs/src/docs/user/languages/components/ScopeSupport.tsx

@@ -8,7 +8,7 @@ import {
 import { usePluginData } from "@docusaurus/useGlobalData";
 import React, { useState } from "react";
 import { Code, type Highlight } from "./Code";
-import { H2, H3 } from "./Header";
+import { H2, H3, H4 } from "./Header";
 import "./ScopeSupport.css";
 import type { Fixture, ScopeTests } from "./types";
 import { getFacetInfo, prettifyFacet, prettifyScopeType } from "./util";
@@ -104,10 +104,9 @@ function renderFacet(
 ) {
   return (
     <div key={facet.facet}>
-      <span className="facet-name" title={facet.facet}>
+      <H4 className="facet-name" title={facet.facet}>
         {facet.name}
-      </span>
-      <br />
+      </H4>
       <i>{facet.info.description}</i>
       {facet.fixtures.map((fixture) => (
         <Code