feat: Get title from markdown file

src/styleguide/components/overrides/ReactComponent/ReactComponent.js

@@ -1,6 +1,9 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 
+import getTitleFromMarkdown from 'src/styleguide/utils/get-title-from-markdown';
+import removeTitleFromMarkdown from 'src/styleguide/utils/remove-title-from-markdown';
+
 import DefaultSectionHeading from 'styleguide-components/SectionHeading';
 import DefaultContext from 'styleguide-components/Context';
 import DefaultSlot from 'styleguide-components/Slot';
@@ -15,14 +18,15 @@ const ReactComponent = ({ component, exampleMode }) => {
   const { config: { pagePerSection } } = useContext(DefaultContext);
 
   const { name, visibleName, filepath, pathLine, props = {} } = component;
-  const { description = '', examples = [], tags = {} } = props;
+  let { description = '', examples = [], tags = {} } = props;
 
   const hasDescription = !!description && description !== '\n';
 
   if (!name) {
     return null;
   }
 
+
   return (
     <ReactComponentRenderer
       name={name}
@@ -39,12 +43,12 @@ const ReactComponent = ({ component, exampleMode }) => {
           slotProps={component}
           depth={1}
         >
-          {visibleName}
+          {getTitleFromMarkdown(examples, true) || visibleName}
         </DefaultSectionHeading>
       }
       examples={
         examples.length > 0 ? (
-          <DefaultExamples examples={examples} name={name} exampleMode={exampleMode} />
+          <DefaultExamples examples={removeTitleFromMarkdown(examples)} name={name} exampleMode={exampleMode} />
         ) : (
           <DefaultExamplePlaceholder name={name} />
         )

src/styleguide/components/overrides/SectionRenderer/SectionRenderer.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import get from 'lodash/get';
 
 import DefaultSectionHeading from 'styleguide-components/SectionHeading';
 import DefaultMarkdown from 'styleguide-components/Markdown';
@@ -15,9 +16,12 @@ const SectionRenderer = (props) => {
     description,
     pagePerSection
   } = props;
+  const contentDescription = get(content, 'props.examples[0].content');
+  const startsWithOneHashRegex = /^#( |\w)/g;
+  const hasTitleInContent = contentDescription && !!contentDescription.match(startsWithOneHashRegex);
   return (
     <section>
-      {name && (
+      {name && !hasTitleInContent && (
         <DefaultSectionHeading
           depth={depth}
           id={slug}

src/styleguide/docs/overview.md

@@ -1 +1,4 @@
+# Wonderbly Design System
+
 Wonderbly is growing, a lot. One of the challenges facing us as the business evolves is maintaining a consistent, cohesive and captivating experience across our digital ecosystem. We’ve been working to create this design system as a centralised hub for showcasing our design rules, principles, and frontend components. It’s a place for people familiar with the Wonderbly ecosystem, and for anyone wishing to learn more about our work.
+

src/styleguide/utils/get-title-from-markdown.js

@@ -0,0 +1,20 @@
+import get from 'lodash/get';
+
+const getTitleFromMarkdown = (markdown, removeMarkdownSigniture = false) => {
+  const content = get(markdown, '[0].content');
+
+  if (!content) {
+    return null;
+  }
+
+  const startsWithOneHashRegex = /^#( |\w)+/g;
+  const titleFromMarkdown = (content.match(startsWithOneHashRegex) || [''])[0];
+
+  if (!removeMarkdownSigniture) {
+    return titleFromMarkdown;
+  }
+
+  return titleFromMarkdown.replace(/^#( |)/, '');
+};
+
+export default getTitleFromMarkdown;

src/styleguide/utils/remove-title-from-markdown.js

@@ -0,0 +1,23 @@
+import get from 'lodash/get';
+import getTitleFromMarkdown from './get-title-from-markdown';
+
+const removeTitleFromMarkdown = (markdown) => {
+  const titleFromMarkdown = getTitleFromMarkdown(markdown);
+
+  if (!titleFromMarkdown) {
+    return markdown;
+  }
+
+  const content = get(markdown, '[0].content');
+
+  // Need to mutate the value passed in as it has specific
+  // context used to render component examples
+  markdown.splice(0, 1, {
+    ...markdown[0],
+    content: content.replace(titleFromMarkdown, '').trimLeft(),
+  });
+
+  return markdown;
+};
+
+export default removeTitleFromMarkdown;

styleguide.config.js

@@ -104,7 +104,7 @@ module.exports = {
   sections: [
     addSection('Overview'),
     addSection('Rules', [
-      addSection('Type')
+      addSection('Type'),
     ]),
     addSection('Components', [
       addComponents('Atoms'),