[docs-infra] Share code for section title (#42236)

mui · May 15, 2024 · 3c888ed · 3c888ed
1 parent 2b0629f
commit 3c888ed
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 88 deletions.
diff --git a/docs/src/modules/components/ApiPage.js b/docs/src/modules/components/ApiPage.js
@@ -13,6 +13,7 @@ import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
 import AppLayoutDocs from 'docs/src/modules/components/AppLayoutDocs';
 import Ad from 'docs/src/modules/components/Ad';
 import { BrandingProvider } from '@mui/docs/branding';
+import { SectionTitle } from '@mui/docs/SectionTitle';
 import PropertiesSection, {
   getPropsToC,
 } from 'docs/src/modules/components/ApiPage/sections/PropertiesSection';
@@ -47,21 +48,9 @@ export function getTranslatedHeader(t, header) {
 }
 
 function Heading(props) {
-  const { hash, level: Level = 'h2' } = props;
+  const { hash, level = 'h2' } = props;
   const t = useTranslate();
-
-  return (
-    <Level id={hash}>
-      <a aria-labelledby={hash} className="title-link-to-anchor" href={`#${hash}`} tabIndex={-1}>
-        {getTranslatedHeader(t, hash)}
-        <span className="anchor-icon">
-          <svg>
-            <use xlinkHref="#anchor-link-icon" />
-          </svg>
-        </span>
-      </a>
-    </Level>
-  );
+  return <SectionTitle title={getTranslatedHeader(t, hash)} hash={hash} level={level} />;
 }
 
 Heading.propTypes = {

diff --git a/docs/src/modules/components/ApiPage/sections/ClassesSection.tsx b/docs/src/modules/components/ApiPage/sections/ClassesSection.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable react/no-danger */
 import * as React from 'react';
 import { useTranslate } from '@mui/docs/i18n';
+import { SectionTitle } from '@mui/docs/SectionTitle';
 import { ComponentClassDefinition } from '@mui/internal-docs-utils';
 import Box from '@mui/material/Box';
 import ToggleDisplayOption, {
@@ -63,7 +64,7 @@ export default function ClassesSection(props: ClassesSectionProps) {
     spreadHint,
     title = 'api-docs.classes',
     titleHash = 'classes',
-    level: Level = 'h2',
+    level = 'h2',
     displayClassKeys,
     styleOverridesLink,
     defaultLayout,
@@ -92,21 +93,7 @@ export default function ClassesSection(props: ClassesSectionProps) {
   return (
     <React.Fragment>
       <Box sx={{ display: 'flex', alignItems: 'baseline', mb: 1 }}>
-        <Level id={titleHash} style={{ flexGrow: 1 }}>
-          <a
-            aria-labelledby={titleHash}
-            className="title-link-to-anchor"
-            href={`#${titleHash}`}
-            tabIndex={-1}
-          >
-            {t(title)}
-            <span className="anchor-icon">
-              <svg>
-                <use xlinkHref="#anchor-link-icon" />
-              </svg>
-            </span>
-          </a>
-        </Level>
+        <SectionTitle title={t(title)} hash={titleHash} level={level} />
         <ToggleDisplayOption
           displayOption={displayOption}
           setDisplayOption={setDisplayOption}

diff --git a/docs/src/modules/components/ApiPage/sections/PropertiesSection.js b/docs/src/modules/components/ApiPage/sections/PropertiesSection.js
@@ -3,6 +3,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
 import { useTranslate } from '@mui/docs/i18n';
+import { SectionTitle } from '@mui/docs/SectionTitle';
 import ToggleDisplayOption, {
   useApiPageOption,
 } from 'docs/src/modules/components/ApiPage/sections/ToggleDisplayOption';
@@ -46,7 +47,7 @@ export default function PropertiesSection(props) {
     showOptionalAbbr = false,
     title = 'api-docs.props',
     titleHash = 'props',
-    level: Level = 'h2',
+    level = 'h2',
     spreadHint,
     hooksParameters = false,
     hooksReturnValue = false,
@@ -121,21 +122,7 @@ export default function PropertiesSection(props) {
   return (
     <React.Fragment>
       <Box sx={{ display: 'flex', alignItems: 'baseline', mb: 1 }}>
-        <Level id={titleHash} style={{ flexGrow: 1 }}>
-          <a
-            aria-labelledby={titleHash}
-            className="title-link-to-anchor"
-            href={`#${titleHash}`}
-            tabIndex={-1}
-          >
-            {t(title)}
-            <span className="anchor-icon">
-              <svg>
-                <use xlinkHref="#anchor-link-icon" />
-              </svg>
-            </span>
-          </a>
-        </Level>
+        <SectionTitle title={t(title)} hash={titleHash} level={level} />
         <ToggleDisplayOption
           displayOption={displayOption}
           setDisplayOption={setDisplayOption}

diff --git a/docs/src/modules/components/ApiPage/sections/SlotsSection.tsx b/docs/src/modules/components/ApiPage/sections/SlotsSection.tsx
@@ -2,6 +2,7 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import { useTranslate } from '@mui/docs/i18n';
+import { SectionTitle } from '@mui/docs/SectionTitle';
 import ToggleDisplayOption, {
   ApiDisplayOptions,
   useApiPageOption,
@@ -28,7 +29,7 @@ export default function SlotsSection(props: SlotsSectionProps) {
     componentName,
     title = 'api-docs.slots',
     titleHash = 'slots',
-    level: Level = 'h2',
+    level = 'h2',
     spreadHint,
     defaultLayout,
     layoutStorageKey,
@@ -54,21 +55,7 @@ export default function SlotsSection(props: SlotsSectionProps) {
   return (
     <React.Fragment>
       <Box sx={{ display: 'flex', alignItems: 'baseline', mb: 1 }}>
-        <Level id={titleHash} style={{ flexGrow: 1 }}>
-          <a
-            aria-labelledby={titleHash}
-            className="title-link-to-anchor"
-            href={`#${titleHash}`}
-            tabIndex={-1}
-          >
-            {t(title)}
-            <span className="anchor-icon">
-              <svg>
-                <use xlinkHref="#anchor-link-icon" />
-              </svg>
-            </span>
-          </a>
-        </Level>
+        <SectionTitle title={t(title)} hash={titleHash} level={level} />
         <ToggleDisplayOption
           displayOption={displayOption}
           setDisplayOption={setDisplayOption}

diff --git a/docs/src/modules/components/ComponentsApiContent.js b/docs/src/modules/components/ComponentsApiContent.js
@@ -5,6 +5,7 @@ import kebabCase from 'lodash/kebabCase';
 import { useRouter } from 'next/router';
 import { exactProp } from '@mui/utils';
 import { useTranslate, useUserLanguage } from '@mui/docs/i18n';
+import { SectionTitle } from '@mui/docs/SectionTitle';
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
 import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
 import PropertiesSection from 'docs/src/modules/components/ApiPage/sections/PropertiesSection';
@@ -28,21 +29,10 @@ function getTranslatedHeader(t, header, text) {
 }
 
 function Heading(props) {
-  const { hash, text, level: Level = 'h2' } = props;
+  const { hash, text, level = 'h2' } = props;
   const t = useTranslate();
 
-  return (
-    <Level id={hash}>
-      <a aria-labelledby={hash} className="title-link-to-anchor" href={`#${hash}`} tabIndex={-1}>
-        {getTranslatedHeader(t, hash, text)}
-        <span className="anchor-icon">
-          <svg>
-            <use xlinkHref="#anchor-link-icon" />
-          </svg>
-        </span>
-      </a>
-    </Level>
-  );
+  return <SectionTitle title={getTranslatedHeader(t, hash, text)} hash={hash} level={level} />;
 }
 
 Heading.propTypes = {

diff --git a/docs/src/modules/components/HooksApiContent.js b/docs/src/modules/components/HooksApiContent.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import kebabCase from 'lodash/kebabCase';
 import { exactProp } from '@mui/utils';
 import { useTranslate, useUserLanguage } from '@mui/docs/i18n';
+import { SectionTitle } from '@mui/docs/SectionTitle';
 import PropertiesSection from 'docs/src/modules/components/ApiPage/sections/PropertiesSection';
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
 import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
@@ -22,21 +23,10 @@ function getTranslatedHeader(t, header, text) {
 }
 
 function Heading(props) {
-  const { hash, text, level: Level = 'h2' } = props;
+  const { hash, text, level = 'h2' } = props;
   const t = useTranslate();
 
-  return (
-    <Level id={hash}>
-      <a aria-labelledby={hash} className="title-link-to-anchor" href={`#${hash}`} tabIndex={-1}>
-        {getTranslatedHeader(t, hash, text)}
-        <span className="anchor-icon">
-          <svg>
-            <use xlinkHref="#anchor-link-icon" />
-          </svg>
-        </span>
-      </a>
-    </Level>
-  );
+  return <SectionTitle hash={hash} title={getTranslatedHeader(t, hash, text)} level={level} />;
 }
 
 Heading.propTypes = {

diff --git a/packages/mui-docs/src/SectionTitle/SectionTitle.tsx b/packages/mui-docs/src/SectionTitle/SectionTitle.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+export interface SectionTitleProps {
+  title: string;
+  hash: string;
+  level?: 'h2' | 'h3' | 'h4';
+}
+export function SectionTitle(props: SectionTitleProps) {
+  const { title, hash, level: Level = 'h2' } = props;
+  return (
+    <Level id={hash} style={{ flexGrow: 1 }}>
+      <a aria-labelledby={hash} className="title-link-to-anchor" href={`#${hash}`} tabIndex={-1}>
+        {title}
+        <span className="anchor-icon">
+          <svg>
+            <use xlinkHref="#anchor-link-icon" />
+          </svg>
+        </span>
+      </a>
+    </Level>
+  );
+}
diff --git a/packages/mui-docs/src/SectionTitle/index.tsx b/packages/mui-docs/src/SectionTitle/index.tsx
@@ -0,0 +1 @@
+export * from './SectionTitle';