fix: Add ids to docs headings

Workday · Jul 11, 2023 · 8e810ba · 8e810ba
1 parent e6c02a9
commit 8e810ba
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 6 deletions.
diff --git a/modules/docs/lib/widgetUtils.tsx b/modules/docs/lib/widgetUtils.tsx
@@ -402,7 +402,7 @@ export const SymbolDoc = ({
   const symbolDocContents = (
     <StyledSymbolDoc {...elemProps}>
       <HeadingLevelContext.Provider value={headingStart}>
-        {!hideHeading && <Heading>{name}</Heading>}
+        {!hideHeading && <Heading id={name}>{name}</Heading>}
         {!hideDescription && doc && (
           <MdxJSToJSX>{descriptionOverride || doc.description}</MdxJSToJSX>
         )}

diff --git a/modules/docs/lib/widgets/component.tsx b/modules/docs/lib/widgets/component.tsx
@@ -7,7 +7,9 @@ import {Heading} from '../widgetUtils';
 registerWidget<ComponentValue>('component', ({value, doc, meta}) => {
   return (
     <>
-      <Heading headingOffset={1}>Props</Heading>
+      <Heading id={`${value.displayName?.toLocaleLowerCase()}-props`} headingOffset={1}>
+        Props
+      </Heading>
       <PropertiesTable properties={value.props}></PropertiesTable>
     </>
   );

diff --git a/modules/docs/lib/widgets/enhancedComponent.tsx b/modules/docs/lib/widgets/enhancedComponent.tsx
@@ -68,7 +68,12 @@ registerWidget<EnhancedComponentValue>('enhancedComponent', ({value, doc, meta})
     <>
       {value.styleComponent ? (
         <>
-          <Heading headingOffset={1}>Layout Component</Heading>
+          <Heading
+            headingOffset={1}
+            id={`${value.displayName?.toLocaleLowerCase()}-layout-component`}
+          >
+            Layout Component
+          </Heading>
           <MDX as="p">
             <code>{value.displayName || parentComponentName}</code> supports all props from the
             <code>
@@ -80,7 +85,9 @@ registerWidget<EnhancedComponentValue>('enhancedComponent', ({value, doc, meta})
           </MDX>
         </>
       ) : null}
-      <Heading headingOffset={1}>Props</Heading>
+      <Heading headingOffset={1} id={`${value.displayName?.toLocaleLowerCase()}-props`}>
+        Props
+      </Heading>
       {value.baseElement && (
         <ParentComponentJSDocContext.Provider value={defaultJSDoc}>
           <MDX as="p">
@@ -122,7 +129,9 @@ registerWidget<EnhancedComponentValue>('enhancedComponent', ({value, doc, meta})
         ? value.subComponents.map((c, i) => {
             return (
               <React.Fragment key={i}>
-                <Heading>
+                <Heading
+                  id={`${value.displayName?.toLocaleLowerCase()}-${c.name.toLocaleLowerCase}`}
+                >
                   {parentComponentName ? parentComponentName : value.displayName}.{c.name}
                 </Heading>
                 <ParentComponentNameContext.Provider
@@ -145,7 +154,9 @@ registerWidget<EnhancedComponentValue>('enhancedComponent', ({value, doc, meta})
         : null}
       {value.componentType === 'container' && value.model ? (
         <>
-          <Heading headingOffset={-1}>Model</Heading>
+          <Heading id={`${value.displayName?.toLocaleLowerCase()}-model`} headingOffset={-1}>
+            Model
+          </Heading>
           <SymbolDoc name={`use${value.model}`} />
         </>
       ) : null}