Support JSX/node as customSlotContent.

Financial-Times · Jan 21, 2019 · b923ae8 · b923ae8
1 parent a3970be
commit b923ae8
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 15 deletions.
diff --git a/components/x-teaser-timeline/__tests__/TeaserTimeline.test.jsx b/components/x-teaser-timeline/__tests__/TeaserTimeline.test.jsx
@@ -91,30 +91,45 @@ describe('x-teaser-timeline', () => {
 	describe('custom slot', () => {
 		let component;
 
-		describe('custom slot without latestArticlesTime set', () => {
-			beforeEach(() => {
-				props.customSlotContent = '<div class="custom-slot">Custom slot content</div>';
-				props.customSlotPosition = 3;
-				component = shallow(<TeaserTimeline {...props} />);
+		describe('custom slot content is a string', () => {
+			describe('without latestArticlesTime set', () => {
+				beforeEach(() => {
+					props.customSlotContent = '<div class="custom-slot">Custom slot content</div>';
+					props.customSlotPosition = 3;
+					component = shallow(<TeaserTimeline {...props} />);
+				});
+
+				it('has custom content in correct position', () => {
+					expect(component.render().find('.custom-slot')).toHaveLength(1);
+					expect(component.render().find('li').eq(3).find('.custom-slot')).toHaveLength(1);
+				});
 			});
 
-			it('has custom content in correct position', () => {
-				expect(component.render().find('.custom-slot')).toHaveLength(1);
-				expect(component.render().find('li').eq(3).find('.custom-slot')).toHaveLength(1);
+			describe('with latestArticlesTime set', () => {
+				beforeEach(() => {
+					props.customSlotContent = '<div class="custom-slot">Custom slot content</div>';
+					props.customSlotPosition = 2;
+					props.latestItemsTime = '2018-10-16T12:10:33.000Z';
+					component = shallow(<TeaserTimeline {...props} />);
+				});
+
+				it('has custom content in correct position', () => {
+					expect(component.render().find('.custom-slot')).toHaveLength(1);
+					expect(component.render().find('li').eq(2).find('.custom-slot')).toHaveLength(1);
+				});
 			});
 		});
 
-		describe('custom slot with latestArticlesTime set', () => {
+		describe('custom slot content is a node', () => {
 			beforeEach(() => {
-				props.customSlotContent = '<div class="custom-slot">Custom slot content</div>';
-				props.customSlotPosition = 2;
-				props.latestItemsTime = '2018-10-16T12:10:33.000Z';
+				props.customSlotContent = <div className="custom-slot">Custom slot content</div>;
+				props.customSlotPosition = 3;
 				component = shallow(<TeaserTimeline {...props} />);
 			});
 
 			it('has custom content in correct position', () => {
 				expect(component.render().find('.custom-slot')).toHaveLength(1);
-				expect(component.render().find('li').eq(2).find('.custom-slot')).toHaveLength(1);
+				expect(component.render().find('li').eq(3).find('.custom-slot')).toHaveLength(1);
 			});
 		});
 	});

diff --git a/components/x-teaser-timeline/src/TeaserTimeline.jsx b/components/x-teaser-timeline/src/TeaserTimeline.jsx
@@ -49,10 +49,11 @@ const TeaserTimeline = props => {
 										</div>}
 									</li>
 								);
-							}
-							if (typeof item === 'string') {
+							} else if (typeof item === 'string') {
 								return (<li key="custom-slot" dangerouslySetInnerHTML={{ __html: item }} />);
 							}
+
+							return (<li key="custom-slot">{item}</li>);
 						})}
 					</ul>
 				</section>