diff --git a/docs/src/modules/components/ApiPage.tsx b/docs/src/modules/components/ApiPage.tsx index d3aab5ed9d85ba..19ec201baa713d 100644 --- a/docs/src/modules/components/ApiPage.tsx +++ b/docs/src/modules/components/ApiPage.tsx @@ -47,7 +47,8 @@ type ApiHeaderKeys = | 'inheritance' | 'slots' | 'classes' - | 'css'; + | 'css' + | 'source-code'; export function getTranslatedHeader(t: Translate, header: ApiHeaderKeys) { const translations = { @@ -59,6 +60,7 @@ export function getTranslatedHeader(t: Translate, header: ApiHeaderKeys) { slots: t('api-docs.slots'), classes: t('api-docs.classes'), css: t('api-docs.css'), + 'source-code': t('api-docs.source-code'), }; // TODO Drop runtime type-checking once we type-check this file @@ -202,7 +204,8 @@ export default function ApiPage(props: ApiPageProps) { getPropertiesToC({ properties: propertiesDef, hash: 'props', t }), ...(componentSlots?.length > 0 ? [createTocEntry('slots')] : []), ...getClassesToC({ classes: classesDef, t }), - ].filter(Boolean); + pageContent.filename ? createTocEntry('source-code') : null, + ].filter((item): item is TableOfContentsParams => Boolean(item)); // The `ref` is forwarded to the root element. let refHint = t('api-docs.refRootElement'); @@ -360,6 +363,16 @@ export default function ApiPage(props: ApiPageProps) { layoutStorageKey={layoutStorageKey.classes} displayClassKeys /> + + <Heading hash="source-code" level="h2" /> + <p + dangerouslySetInnerHTML={{ + __html: t('api-docs.seeSourceCode').replace( + '{{href}}', + `${process.env.SOURCE_CODE_REPO}/blob/v${process.env.LIB_VERSION}${pageContent.filename}`, + ), + }} + /> </MarkdownElement> <svg style={{ display: 'none' }} xmlns="http://www.w3.org/2000/svg"> <symbol id="anchor-link-icon" viewBox="0 0 12 6"> diff --git a/packages/mui-docs/src/ComponentLinkHeader/ComponentLinkHeader.tsx b/packages/mui-docs/src/ComponentLinkHeader/ComponentLinkHeader.tsx index 18ef4ad1ea7777..224690db38440a 100644 --- a/packages/mui-docs/src/ComponentLinkHeader/ComponentLinkHeader.tsx +++ b/packages/mui-docs/src/ComponentLinkHeader/ComponentLinkHeader.tsx @@ -107,7 +107,7 @@ export function ComponentLinkHeader(props: ComponentLinkHeaderProps) { size="small" variant="outlined" rel="nofollow" - href={`${process.env.SOURCE_CODE_REPO}/tree/${process.env.SOURCE_GITHUB_BRANCH}/${headers.githubSource}`} + href={`${process.env.SOURCE_CODE_REPO}/blob/v${process.env.LIB_VERSION}/${headers.githubSource}`} icon={<GitHubIcon />} data-ga-event-category="ComponentLinkHeader" data-ga-event-action="click" diff --git a/packages/mui-docs/src/translations/translations.json b/packages/mui-docs/src/translations/translations.json index 5c4dfc2a14b24a..b12d0d96fdaf77 100644 --- a/packages/mui-docs/src/translations/translations.json +++ b/packages/mui-docs/src/translations/translations.json @@ -45,6 +45,7 @@ "refNotHeld": "The component cannot hold a ref.", "refRootElement": "The <code>ref</code> is forwarded to the root element.", "ruleName": "Rule name", + "seeSourceCode": "If you did not find the information in this page, consider having a look at the <a href=\"{{href}}\">implementation of the component</a> for more detail.", "signature": "Signature", "slots": "Slots", "spreadHint": "Props of the {{spreadHintElement}} component are also available.", @@ -52,6 +53,7 @@ "styleOverrides": "The name <code>{{componentStyles.name}}</code> can be used when providing <a href={{defaultPropsLink}}>default props</a> or <a href={{styleOverridesLink}}>style overrides</a> in the theme.", "slotDescription": "To learn how to customize the slot, check out the <a href={{slotGuideLink}}>Overriding component structure</a> guide.", "slotName": "Slot name", + "source-code": "Source code", "type": "Type", "required": "Required", "optional": "Optional",