Extrtact SpecialreportAlt Pullquote css to its own method

Co-authored-by: Max Duval <max.duval@guardian.co.uk> Co-authored-by: Olly Namey <olly.namey@guardian.co.uk>
guardian · Nov 2, 2022 · 49e382e · 49e382e
1 parent 8688230
commit 49e382e
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 32 deletions.
diff --git a/dotcom-rendering/src/web/components/PullQuoteBlockComponent.stories.tsx b/dotcom-rendering/src/web/components/PullQuoteBlockComponent.stories.tsx
@@ -154,6 +154,7 @@ NewsInline.story = {
 export const OpinionInline = () => {
 	const format = {
 		...defaultFormat,
+		design: ArticleDesign.Comment,
 		theme: ArticlePillar.Opinion,
 	};
 
@@ -332,6 +333,7 @@ NewsSupporting.story = {
 export const OpinionSupporting = () => {
 	const format = {
 		...defaultFormat,
+		design: ArticleDesign.Comment,
 		theme: ArticlePillar.Opinion,
 	};
 

diff --git a/dotcom-rendering/src/web/components/PullQuoteBlockComponent.tsx b/dotcom-rendering/src/web/components/PullQuoteBlockComponent.tsx
@@ -98,19 +98,36 @@ const fullyInline = css`
 	display: block;
 `;
 
+const specialReportAltStyles = (palette: Palette) => css`
+	${headline.xxsmall({ fontWeight: 'light' })};
+	line-height: 25px;
+	position: relative;
+	background-color: ${palette.background.pullQuote};
+	padding-top: 6px;
+	padding-bottom: 12px;
+	margin-bottom: 28px;
+	border: 1px solid ${transparentColour(neutral[60], 0.3)};
+
+	:after {
+		content: '';
+		width: 25px;
+		height: 25px;
+		bottom: -25px;
+		position: absolute;
+		background-color: ${palette.background.pullQuote};
+		border: 1px solid ${transparentColour(neutral[60], 0.3)};
+		border-top: none;
+		left: -1px;
+	}
+`;
+
 function decidePosition(role: string, design: ArticleDesign) {
 	if (design === ArticleDesign.PhotoEssay) {
 		return role === 'supporting' ? fullyLeft : fullyInline;
 	}
 	return role === 'supporting' ? partiallyLeft : partiallyInline;
 }
 
-const decideFontWeight = (theme: ArticleTheme) => {
-	if (theme === ArticleSpecial.SpecialReportAlt) return 'light';
-
-	return 'bold';
-};
-
 function decideFont(role: string) {
 	if (role === 'supporting') {
 		return css`
@@ -136,29 +153,7 @@ export const PullQuoteBlockComponent: React.FC<{
 			<aside
 				css={[
 					decidePosition(role, format.design),
-					css`
-						${headline.xxsmall({ fontWeight: 'light' })};
-						line-height: 25px;
-						position: relative;
-						background-color: ${palette.background.pullQuote};
-						padding-top: 6px;
-						padding-bottom: 12px;
-						margin-bottom: 28px;
-						border: 1px solid ${transparentColour(neutral[60], 0.3)};
-
-						:after {
-							content: '';
-							width: 25px;
-							height: 25px;
-							bottom: -25px;
-							position: absolute;
-							background-color: ${palette.background.pullQuote};
-							border: 1px solid
-								${transparentColour(neutral[60], 0.3)};
-							border-top: none;
-							left: -1px;
-						}
-					`,
+					specialReportAltStyles(palette),
 				]}
 			>
 				<QuoteIcon colour={palette.fill.quoteIcon} />
@@ -260,9 +255,7 @@ export const PullQuoteBlockComponent: React.FC<{
 					css={[
 						decidePosition(role, format.design),
 						css`
-							${headline.xxsmall({
-								fontWeight: decideFontWeight(format.theme),
-							})};
+							${headline.xxsmall({ fontWeight: 'bold' })};
 							line-height: 25px;
 							position: relative;
 							background-color: ${palette.background.pullQuote};