feat(talk-title): formatted markdown content in the title

for #806

src/molecules/talk/presentational-test.js

@@ -2,22 +2,37 @@ import React from 'react';
 import {shallow} from 'enzyme';
 import {assert} from 'chai';
 import any from '@travi/any';
+import sinon from 'sinon';
+import * as formatters from '../../formatters';
 import Talk from '.';
 
 suite('talk', () => {
+  let sandbox;
+
+  setup(() => {
+    sandbox = sinon.createSandbox();
+
+    sandbox.stub(formatters, 'markdown');
+  });
+
+  teardown(() => sandbox.restore());
+
   test('that the title and speaker details are displayed', () => {
     const speakerName = any.string();
     const github = any.word();
     const twitter = any.word();
-    const talk = {title: any.sentence(), speaker: {frontmatter: {name: speakerName, github, twitter}}};
+    const talkTitle = any.sentence();
+    const formattedTitle = any.sentence();
+    const talk = {title: talkTitle, speaker: {frontmatter: {name: speakerName, github, twitter}}};
+    formatters.markdown.withArgs(talkTitle).returns(formattedTitle);
 
     const htmlContent = any.string();
 
     const wrapper = shallow(<Talk talk={talk} content={htmlContent} />);
     const speaker = wrapper.find('h3');
     const speakerSocialIcons = speaker.find('SpeakerSocialIcons');
 
-    assert.equal(wrapper.find('h1').text(), talk.title);
+    assert.equal(wrapper.find('h1').text(), formattedTitle);
     assert.equal(speaker.find('span').text(), speakerName);
     assert.equal(speakerSocialIcons.prop('twitter'), twitter);
     assert.equal(speakerSocialIcons.prop('github'), github);

src/molecules/talk/presentational.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import {string, shape} from 'prop-types';
 import SpeakerSocialIcons from '../../atoms/social/speaker';
+import {markdown} from '../../formatters';
 
 export default function Talk({talk, content}) {
   const {github, twitter, name: speakerName} = talk.speaker.frontmatter;
 
   return (
     <>
-      <h1 css={{color: '#AD5472'}}>{talk.title}</h1>
+      <h1 css={{color: '#AD5472'}}>{markdown(talk.title)}</h1>
       <h3 css={{display: 'flex', alignItems: 'center'}}>
         <span>{speakerName}</span>
         <small><SpeakerSocialIcons github={github} twitter={twitter} /></small>

src/molecules/talk/stories.js

@@ -37,6 +37,14 @@ Default.story = {
   name: 'default'
 };
 
+export const WithMarkdownInTitle = () => (
+  <Talk talk={{...talk, title: 'This is a `title` with _markdown_'}} content={talkContent} />
+);
+
+WithMarkdownInTitle.story = {
+  name: 'w/ markdown in title'
+};
+
 export const NoTwitter = () => <Talk talk={talkNoTwitter} content={talkContent} />;
 
 NoTwitter.story = {