feat(talk-title): formatted markdown titles in the archive list

for #806

src/atoms/archive-list-item/component-test.js

@@ -1,22 +1,36 @@
 import React from 'react';
 import {shallow} from 'enzyme';
 import {assert} from 'chai';
+import sinon from 'sinon';
 import any from '@travi/any';
+import * as formatters from '../../formatters';
 import ArchiveListItem from '.';
 
 suite('archive list-item', () => {
+  let sandbox;
+
+  setup(() => {
+    sandbox = sinon.createSandbox();
+
+    sandbox.stub(formatters, 'markdown');
+  });
+
+  teardown(() => sandbox.restore());
+
   test('that the meeting details are linked from the list item', () => {
     const slug = any.url();
     const title = any.sentence();
+    const formattedTitle = any.sentence();
     const meetingDetails = {date: any.date(), talks: [{talk: {frontmatter: {title}}}]};
     const meeting = {node: {frontmatter: meetingDetails, fields: {slug}}};
+    formatters.markdown.withArgs(title).returns(formattedTitle);
 
     const wrapper = shallow(<ArchiveListItem meeting={meeting} />);
     const heading = wrapper.find('h4');
     const description = wrapper.find('li');
 
     assert.equal(heading.find('InternalLink').children().text(), meetingDetails.date);
     assert.equal(heading.find('InternalLink').prop('to'), slug);
-    assert.equal(description.text(), title);
+    assert.equal(description.text(), formattedTitle);
   });
 });

src/atoms/archive-list-item/component.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import {arrayOf, shape, string} from 'prop-types';
 import InternalLink from '../links/internal';
+import {markdown} from '../../formatters';
 
 export default function ArchiveListItem({meeting}) {
   const meetingDetails = meeting.node.frontmatter;
@@ -9,7 +10,7 @@ export default function ArchiveListItem({meeting}) {
     <>
       <h4><InternalLink to={meeting.node.fields.slug}>{meetingDetails.date}</InternalLink></h4>
       <ol css={{listStyle: 'none', li: {marginBottom: 15}}}>
-        {meetingDetails.talks.map(talk => <li key={talk.talk.frontmatter.title}>{talk.talk.frontmatter.title}</li>)}
+        {meetingDetails.talks.map(({talk: {frontmatter: {title}}}) => <li key={title}>{markdown(title)}</li>)}
       </ol>
     </>
   );

src/atoms/archive-list-item/stories.js

@@ -10,7 +10,10 @@ const meeting = {
     fields: {slug: '/meeting-1'},
     frontmatter: {
       date: any.date(),
-      talks: [{talk: {frontmatter: {title: any.sentence()}}}]
+      talks: [
+        {talk: {frontmatter: {title: any.sentence()}}},
+        {talk: {frontmatter: {title: 'This is a `title` with _markdown_'}}}
+      ]
     }
   }
 };

src/molecules/archive/list/stories.js

@@ -11,7 +11,7 @@ const meetings = [
       fields: {slug: '/meeting-1'},
       frontmatter: {
         date: any.date(),
-        talks: [{talk: {frontmatter: {title: any.sentence()}}}]
+        talks: [{talk: {frontmatter: {title: 'This is a `title` with _markdown_'}}}]
       }
     }
   },