[docs-infra] Fix anchor links in API pages (#40450)

Co-authored-by: alexandre <[email protected]>
mui · Jan 8, 2024 · f8e820a · f8e820a
1 parent c7788e9
commit f8e820a
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 29 deletions.
diff --git a/docs/src/modules/components/ApiPage.js b/docs/src/modules/components/ApiPage.js
@@ -255,7 +255,7 @@ export default function ApiPage(props) {
         <PropertiesSection
           properties={componentProps}
           propertiesDescriptions={propDescriptions}
-          targetName={pageContent.name}
+          componentName={pageContent.name}
           spreadHint={spreadHint}
         />
         {cssComponent && (

diff --git a/docs/src/modules/components/ApiPage/list/ClassesList.tsx b/docs/src/modules/components/ApiPage/list/ClassesList.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable react/no-danger */
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
+import kebabCase from 'lodash/kebabCase';
 import { ComponentClassDefinition } from '@mui-internal/docs-utilities';
 import { useTranslate } from 'docs/src/modules/utils/i18n';
 import ExpandableApiItem, {
@@ -34,17 +35,18 @@ const StyledApiItem = styled(ExpandableApiItem)(
   }),
 );
 
+type HashParams = { componentName: string; className: string };
+
+export function getHash({ componentName, className }: HashParams) {
+  return `${kebabCase(componentName)}-classes-${className}`;
+}
+
 type ClassesListProps = {
   componentName: string;
   classes: ComponentClassDefinition[];
   displayOption: 'collapsed' | 'expanded';
   displayClassKeys?: boolean;
 };
-type HashParams = { componentName?: string; className: string };
-
-export function getHash({ componentName, className }: HashParams) {
-  return `${componentName ? `${componentName}-` : ''}classes-${className}`;
-}
 
 export default function ClassesList(props: ClassesListProps) {
   const { classes, displayOption, componentName, displayClassKeys } = props;

diff --git a/docs/src/modules/components/ApiPage/list/PropertiesList.tsx b/docs/src/modules/components/ApiPage/list/PropertiesList.tsx
@@ -3,6 +3,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Alert from '@mui/material/Alert';
 import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
+import kebabCase from 'lodash/kebabCase';
 import { useTranslate } from 'docs/src/modules/utils/i18n';
 import {
   brandingDarkTheme as darkTheme,
@@ -99,12 +100,12 @@ function PropDescription(props: { description: string }) {
 }
 
 export function getHash({
-  targetName,
+  componentName,
   propName,
   hooksParameters,
   hooksReturnValue,
 }: {
-  targetName: string;
+  componentName: string;
   propName: string;
   hooksParameters?: boolean;
   hooksReturnValue?: boolean;
@@ -115,11 +116,11 @@ export function getHash({
   } else if (hooksReturnValue) {
     sectionName = 'return-value';
   }
-  return `${targetName ? `${targetName}-` : ''}${sectionName}-${propName}`;
+  return `${kebabCase(componentName)}-${sectionName}-${propName}`;
 }
 
 export interface PropDescriptionParams {
-  targetName: string;
+  componentName: string;
   propName: string;
   description?: string;
   requiresRef?: string;
@@ -149,7 +150,7 @@ export default function PropertiesList(props: PropertiesListProps) {
     <ApiItemContaier>
       {properties.map((params) => {
         const {
-          targetName,
+          componentName,
           propName,
           description,
           requiresRef,
@@ -169,7 +170,7 @@ export default function PropertiesList(props: PropertiesListProps) {
         return (
           <StyledApiItem
             key={propName}
-            id={getHash({ targetName, propName, hooksParameters, hooksReturnValue })}
+            id={getHash({ componentName, propName, hooksParameters, hooksReturnValue })}
             title={propName}
             note={(isOptional && 'Optional') || (isRequired && 'Required') || ''}
             type="props"

diff --git a/docs/src/modules/components/ApiPage/list/SlotsList.tsx b/docs/src/modules/components/ApiPage/list/SlotsList.tsx
@@ -43,20 +43,20 @@ const StyledApiItem = styled(ExpandableApiItem)(
   }),
 );
 
+type HashParams = { componentName: string; className: string };
+
+export function getHash({ componentName, className }: HashParams) {
+  return `${componentName}-css-${className}`;
+}
+
 export type SlotsFormatedParams = {
   className: string;
-  componentName?: string;
+  componentName: string;
   description?: string;
   name: string;
   defaultValue?: string;
 };
 
-type HashParams = { componentName?: string; className: string };
-
-export function getHash({ componentName, className }: HashParams) {
-  return `${componentName ? `${componentName}-` : ''}css-${className}`;
-}
-
 interface SlotsListProps {
   slots: SlotsFormatedParams[];
   displayOption: 'collapsed' | 'expanded';

diff --git a/docs/src/modules/components/ApiPage/sections/PropertiesSection.js b/docs/src/modules/components/ApiPage/sections/PropertiesSection.js
@@ -26,7 +26,7 @@ export function getPropsToC({
         .filter(([, propData]) => propData.description !== '@ignore')
         .map(([propName]) => ({
           text: propName,
-          hash: getHash({ propName, targetName: componentName }),
+          hash: getHash({ propName, componentName }),
           children: [],
         })),
       ...(inheritance
@@ -43,7 +43,7 @@ export default function PropertiesSection(props) {
   const {
     properties,
     propertiesDescriptions,
-    targetName = '',
+    componentName = '',
     showOptionalAbbr = false,
     title = 'api-docs.props',
     titleHash = 'props',
@@ -87,7 +87,7 @@ export default function PropertiesSection(props) {
         propertiesDescriptions[propName].typeDescriptions[propData.signature.returned];
 
       return {
-        targetName,
+        componentName,
         propName,
         description: propDescription?.description,
         requiresRef: propDescription?.requiresRef,
@@ -135,14 +135,14 @@ export default function PropertiesSection(props) {
 }
 
 PropertiesSection.propTypes = {
+  componentName: PropTypes.string,
   hooksParameters: PropTypes.bool,
   hooksReturnValue: PropTypes.bool,
   level: PropTypes.string,
   properties: PropTypes.object.isRequired,
   propertiesDescriptions: PropTypes.object.isRequired,
   showOptionalAbbr: PropTypes.bool,
   spreadHint: PropTypes.string,
-  targetName: PropTypes.string,
   title: PropTypes.string,
   titleHash: PropTypes.string,
 };
diff --git a/docs/src/modules/components/ApiPage/sections/SlotsSection.tsx b/docs/src/modules/components/ApiPage/sections/SlotsSection.tsx
@@ -12,7 +12,7 @@ import SlotsTable from 'docs/src/modules/components/ApiPage/table/SlotsTable';
 export type SlotsSectionProps = {
   componentSlots: { class: string; name: string; default: string }[];
   slotDescriptions: { [key: string]: string };
-  componentName?: string;
+  componentName: string;
   title?: string;
   titleHash?: string;
   level?: 'h2' | 'h3' | 'h4';
@@ -38,9 +38,8 @@ export default function SlotsSection(props: SlotsSectionProps) {
   }
 
   const formatedSlots = componentSlots?.map(({ class: className, name, default: defaultValue }) => {
-    const description = slotDescriptions[name];
     return {
-      description,
+      description: slotDescriptions[name],
       className,
       name,
       defaultValue,

diff --git a/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx b/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx
@@ -180,7 +180,7 @@ export default function PropertiesTable(props: PropertiesTableProps) {
         <tbody>
           {properties.map((params) => {
             const {
-              targetName,
+              componentName,
               propName,
               description,
               requiresRef,
@@ -201,7 +201,7 @@ export default function PropertiesTable(props: PropertiesTableProps) {
             return (
               <tr
                 key={propName}
-                id={getHash({ targetName, propName, hooksParameters, hooksReturnValue })}
+                id={getHash({ componentName, propName, hooksParameters, hooksReturnValue })}
               >
                 <td className="MuiApi-table-item-title">
                   {propName}

diff --git a/docs/src/modules/components/ComponentsApiContent.js b/docs/src/modules/components/ComponentsApiContent.js
@@ -146,7 +146,7 @@ export default function ComponentsApiContent(props) {
           <PropertiesSection
             properties={componentProps}
             propertiesDescriptions={propDescriptions}
-            targetName={componentNameKebabCase}
+            componentName={componentName}
             spreadHint={spreadHint}
             level="h3"
             titleHash={`${componentNameKebabCase}-props`}