Merge pull request #3466 from guardian/ma/labsStandfirstLink

Change labs standfirst link colour
guardian · Sep 27, 2021 · 387671d · 387671d
2 parents 68ae20a + fc86d2e
commit 387671d
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git a/dotcom-rendering/src/web/components/Standfirst.stories.tsx b/dotcom-rendering/src/web/components/Standfirst.stories.tsx
@@ -277,3 +277,19 @@ export const PhotoEssay = () => {
 	);
 };
 PhotoEssay.story = { name: 'PhotoEssay' };
+
+export const LabsWithLink = () => {
+	return (
+		<ElementContainer>
+			<Standfirst
+				format={{
+					display: Display.Standard,
+					design: Design.Article,
+					theme: Special.Labs,
+				}}
+				standfirst='<p>Whether your holiday priorities are sampling gastronomic delights, visiting cultural landmarks, adventuring in the great outdoors or just having an easy time with the kids, this quiz will help you plan your itinerary for Brittany, Normandy and the Atlantic Loire Valley</p> <ul> <li>National restrictions may apply, please consult <a href="https://www.gov.uk/guidance/travel-advice-novel-coronavirus" rel="nofollow">government advice</a> before planning travel</li> </ul>'
+			/>
+		</ElementContainer>
+	);
+};
+LabsWithLink.story = { name: 'LabsWithLink' };
diff --git a/dotcom-rendering/src/web/components/Standfirst.tsx b/dotcom-rendering/src/web/components/Standfirst.tsx
@@ -152,6 +152,13 @@ const standfirstStyles = (format: Format, palette: Palette) => {
 								margin-bottom: ${space[3]}px;
 								max-width: 540px;
 								color: ${palette.text.standfirst};
+								a {
+									color: ${neutral[7]};
+									border-bottom: 1px solid ${neutral[60]};
+								}
+								a:hover {
+									border-bottom: 1px solid ${neutral[7]};
+								}
 							`;
 						default:
 							return css`