Skip to content

Commit

Permalink
Push pending changes
Browse files Browse the repository at this point in the history
  • Loading branch information
rhystmills authored and simonbyford committed Dec 11, 2024
1 parent e66a66b commit 894a7d9
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 9 deletions.
8 changes: 4 additions & 4 deletions dotcom-rendering/src/components/MultiByline.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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: [
Expand All @@ -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],
},
],
Expand Down
18 changes: 13 additions & 5 deletions dotcom-rendering/src/components/MultiBylineItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 {
Expand All @@ -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 ?? ''}
Expand Down Expand Up @@ -288,6 +295,7 @@ const Byline = ({
return (
<div css={bylineWrapperStyles}>
<div css={bylineTextStyles}>
<hr css={headingLineStyles} />
<h3
id={slugify(title)}
css={[subheadingStyles(format), headingMarginStyle]}
Expand Down

0 comments on commit 894a7d9

Please sign in to comment.