Push pending changes

guardian · Oct 3, 2024 · 6f2a23a · 6f2a23a
1 parent ecb27f3
commit 6f2a23a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/dotcom-rendering/src/components/MultiByline.stories.tsx b/dotcom-rendering/src/components/MultiByline.stories.tsx
@@ -39,7 +39,7 @@ export const ThemeVariations = {
 	args: {
 		multiBylineItems: [
 			{
-				title: 'The first byline',
+				title: 'This subheading is quite long so is likely to run on to multiple lines',
 				bio: testBioText,
 				body: [testTextElement],
 				byline: 'Richard Hillgrove Political Editor',
@@ -54,10 +54,10 @@ export const ThemeVariations = {
 				],
 			},
 			{
-				title: 'The first byline',
+				title: 'My hot take',
 				bio: testBioText,
 				body: [testTextElement],
-				byline: 'Richard Hillgrove Guardian Contributor',
+				byline: 'Guardian Contributor',
 				bylineHtml:
 					"<a href='/profile/richard-hillgrove'>Richard Hillgrove</a>",
 				contributors: [
@@ -71,7 +71,7 @@ export const ThemeVariations = {
 					'https://i.guim.co.uk/img/uploads/2024/09/17/Maurice_Casey.png?width=180&dpr=1&s=none',
 			},
 			{
-				title: 'The second byline',
+				title: 'A further subheading',
 				body: [testTextElement],
 			},
 		],

diff --git a/dotcom-rendering/src/components/MultiBylineItem.tsx b/dotcom-rendering/src/components/MultiBylineItem.tsx
@@ -207,7 +207,7 @@ export const multiBylineBylineStyles = (format: ArticleFormat) => css`
 	color: ${neutral[46]};
 	a {
 		${subheadingStyles(format)}
-		color: ${palette('--byline-anchor')};
+		color: ${palette('--link-kicker-text')};
 		text-decoration: none;
 		font-style: normal;
 		:hover {
@@ -229,12 +229,20 @@ const bylineTextStyles = css`
 `;
 
 const bylineImageStyles = css`
-	width: 140px;
+	width: 80px;
 	border-radius: 50%;
-	margin-bottom: -16px;
-	height: 140px;
+	margin-bottom: -8px;
+	height: 80px;
+	min-width: 80px;
+	// TODO: make this different size based on screen size
 	overflow: hidden;
 	align-self: flex-end;
+	${from.tablet} {
+		height: 120px;
+		min-width: 120px;
+		width: 120px;
+		margin-bottom: -12px;
+	}
 `;
 
 interface MultiBylineItemProps {
@@ -251,7 +259,6 @@ export const MultiBylineItem = ({
 	return (
 		<>
 			<li css={multiBylineItemStyles} data-spacefinder-role="nested">
-				<hr css={headingLineStyles} />
 				<Byline
 					title={multiBylineItem.title}
 					byline={multiBylineItem.byline ?? ''}
@@ -288,6 +295,7 @@ const Byline = ({
 	return (
 		<div css={bylineWrapperStyles}>
 			<div css={bylineTextStyles}>
+				<hr css={headingLineStyles} />
 				<h3
 					id={slugify(title)}
 					css={[subheadingStyles(format), headingMarginStyle]}