diff --git a/components/Article/Byline/Byline.js b/components/Article/Byline/Byline.js index f5a51a3be..a130807e8 100644 --- a/components/Article/Byline/Byline.js +++ b/components/Article/Byline/Byline.js @@ -11,6 +11,7 @@ const Byline = ({ amp, author, authors, + avatar, content, dateline, datetime, @@ -20,6 +21,8 @@ const Byline = ({ share }) => { + const hasAvatar = get(avatar, 'enabled', false) + const AvatarComponent = get(avatar, 'component', false) const shareData = get(share, 'byline', {}) const shareColor = get(share, 'color', undefined) const shareSize = get(share, 'size', undefined) @@ -31,20 +34,21 @@ const Byline = ({ if (!hasAuthorEmail && !hasAuthorSocialMedias) { return null } - return ( - - {hasAuthorSocialMedias && ( - - {author.socialMedias} - - )} - {hasAuthorEmail && ( - - {author.email} - - )} - + <> + + {hasAuthorSocialMedias && ( + + {author.socialMedias} + + )} + {hasAuthorEmail && ( + + {author.email} + + )} + + ) } @@ -79,10 +83,14 @@ const Byline = ({ ) } - return ( + + {hasAvatar && ( + + )} + {authors.items.length > 0 ? ( diff --git a/components/Article/Byline/Byline.styled.js b/components/Article/Byline/Byline.styled.js index 34013293d..e6b4e1f92 100644 --- a/components/Article/Byline/Byline.styled.js +++ b/components/Article/Byline/Byline.styled.js @@ -66,6 +66,19 @@ Content.propTypes = { mb: PropTypes.array } +export const ContentAvatar = ({ children }) => + + {children} + + +ContentAvatar.propTypes = { + children: PropTypes.oneOfType([PropTypes.array, PropTypes.object]), + mb: PropTypes.array +} + export const BylineContainer = ({ children, mb }) =>