Merge pull request #1199 from guardian/LIVE-1834-showcase-comment

LIVE-1834: move design.comment above display.showcase

Author: joecowton1

src/components/editions/header/index.tsx

@@ -247,12 +247,12 @@ const renderArticleHeader = (item: Item): ReactElement<HeaderProps> => {
 		return <ImmersiveHeader item={item} />;
 	} else if (item.design === Design.Interview) {
 		return <InterviewHeader item={item} />;
+	} else if (item.design === Design.Comment) {
+		return <CommentHeader item={item} />;
 	} else if (item.display === Display.Showcase) {
 		return <ShowcaseHeader item={item} />;
 	} else if (item.design === Design.Analysis) {
 		return <AnalysisHeader item={item} />;
-	} else if (item.design === Design.Comment) {
-		return <CommentHeader item={item} />;
 	} else if (item.design === Design.Media) {
 		return isPicture(item.tags) ? (
 			<PictureHeader item={item} />

src/components/editions/headline/index.tsx

@@ -171,16 +171,25 @@ const getHeadlineStyles = (
 ): SerializedStyles => {
 	const sharedStyles = getSharedStyles(format);
 
-	// Display.Immersive needs to come before Design.Interview
-	switch (format.display) {
-		case Display.Immersive:
-			return css(
-				sharedStyles,
-				getFontStyles('tight', 'bold'),
-				immersiveStyles,
-			);
-		case Display.Showcase:
-			return css(sharedStyles, getFontStyles('tight', 'bold'));
+	if (format.display === Display.Immersive) {
+		return css(
+			sharedStyles,
+			getFontStyles('tight', 'bold'),
+			immersiveStyles,
+		);
+	}
+
+	// this needs to come before Display.Showcase
+	if (format.design === Design.Comment) {
+		return css(
+			sharedStyles,
+			getFontStyles('regular', 'light'),
+			commentStyles,
+		);
+	}
+
+	if (format.display === Display.Showcase) {
+		return css(sharedStyles, getFontStyles('tight', 'bold'));
 	}
 
 	switch (format.design) {
@@ -198,12 +207,6 @@ const getHeadlineStyles = (
 				getFontStyles('regular', 'light'),
 				analysisStyles(kickerColor),
 			);
-		case Design.Comment:
-			return css(
-				sharedStyles,
-				getFontStyles('regular', 'light'),
-				commentStyles,
-			);
 		case Design.Media:
 			return css(sharedStyles, galleryStyles);
 	}