From f1a49e87a76e44321f0a66fb19177884cb553f05 Mon Sep 17 00:00:00 2001
From: Edwin <edwin@wonderbly.com>
Date: Fri, 14 Feb 2020 13:26:44 +0000
Subject: [PATCH] feat: Get title from markdown file

---
 .../ReactComponent/ReactComponent.js          | 10 +++++---
 .../SectionRenderer/SectionRenderer.js        |  6 ++++-
 src/styleguide/docs/overview.md               |  3 +++
 .../utils/get-title-from-markdown.js          | 20 ++++++++++++++++
 .../utils/remove-title-from-markdown.js       | 23 +++++++++++++++++++
 styleguide.config.js                          |  2 +-
 6 files changed, 59 insertions(+), 5 deletions(-)
 create mode 100644 src/styleguide/utils/get-title-from-markdown.js
 create mode 100644 src/styleguide/utils/remove-title-from-markdown.js

diff --git a/src/styleguide/components/overrides/ReactComponent/ReactComponent.js b/src/styleguide/components/overrides/ReactComponent/ReactComponent.js
index 2f09fe8..c90b82c 100644
--- a/src/styleguide/components/overrides/ReactComponent/ReactComponent.js
+++ b/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,7 +18,7 @@ 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';
 
@@ -23,6 +26,7 @@ const ReactComponent = ({ component, exampleMode }) => {
     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} />
         )
diff --git a/src/styleguide/components/overrides/SectionRenderer/SectionRenderer.js b/src/styleguide/components/overrides/SectionRenderer/SectionRenderer.js
index a1ccc9a..666c317 100644
--- a/src/styleguide/components/overrides/SectionRenderer/SectionRenderer.js
+++ b/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}
diff --git a/src/styleguide/docs/overview.md b/src/styleguide/docs/overview.md
index 8812d14..03a26d2 100644
--- a/src/styleguide/docs/overview.md
+++ b/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.
+
diff --git a/src/styleguide/utils/get-title-from-markdown.js b/src/styleguide/utils/get-title-from-markdown.js
new file mode 100644
index 0000000..51da35f
--- /dev/null
+++ b/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;
diff --git a/src/styleguide/utils/remove-title-from-markdown.js b/src/styleguide/utils/remove-title-from-markdown.js
new file mode 100644
index 0000000..62d0326
--- /dev/null
+++ b/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;
diff --git a/styleguide.config.js b/styleguide.config.js
index 2c26a7b..56dace7 100644
--- a/styleguide.config.js
+++ b/styleguide.config.js
@@ -104,7 +104,7 @@ module.exports = {
   sections: [
     addSection('Overview'),
     addSection('Rules', [
-      addSection('Type')
+      addSection('Type'),
     ]),
     addSection('Components', [
       addComponents('Atoms'),