diff --git a/packages/documentation-framework/scripts/md/parseMD.js b/packages/documentation-framework/scripts/md/parseMD.js index 1e02e8653f..78fbf50747 100644 --- a/packages/documentation-framework/scripts/md/parseMD.js +++ b/packages/documentation-framework/scripts/md/parseMD.js @@ -105,6 +105,7 @@ function toReactComponent(mdFilePath, source, buildMode) { section: frontmatter.section || '', subsection: frontmatter.subsection || '', deprecated: frontmatter.deprecated || false, + template: frontmatter.template || false, beta: frontmatter.beta || false, demo: frontmatter.demo || false, newImplementationLink: frontmatter.newImplementationLink || false, @@ -295,6 +296,7 @@ function sourceMDFile(file, source, buildMode) { ...(pageData.hideNavItem && { hideNavItem: pageData.hideNavItem }), ...(pageData.beta && { beta: pageData.beta }), ...(pageData.deprecated && { deprecated: pageData.deprecated }), + ...(pageData.template && { template: pageData.template }), ...(pageData.demo && { demo: pageData.demo }), ...(pageData.sortValue && { sortValue: pageData.sortValue }), ...(pageData.subsectionSortValue && { subsectionSortValue: pageData.subsectionSortValue }) diff --git a/packages/documentation-framework/templates/mdx.js b/packages/documentation-framework/templates/mdx.js index c40f543407..ab4ddb8594 100644 --- a/packages/documentation-framework/templates/mdx.js +++ b/packages/documentation-framework/templates/mdx.js @@ -23,6 +23,7 @@ const MDXChildTemplate = ({ optIn, beta, deprecated, + template, newImplementationLink, functionDocumentation = [] } = Component.getPageData(); @@ -84,6 +85,12 @@ const MDXChildTemplate = ({ {' '}To learn more about the process, visit our about page. )} + {(template || source === 'react-template') && ( + + {`This section showcases templates for the ${id} component. A template is a wrapped ${id} component use case that has built in logic with a streamlined API, and some limited customization. + For custom use cases that fall outside of a template's design, please use the ${id} component suite directly.`} + + )} ); // Create dynamic component for @reach/router