feat: create avatar image in byline

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 (
-      <Block mb={1}>
-        {hasAuthorSocialMedias && (
-          <S.BylineText {...datetime}>
-            {author.socialMedias}
-          </S.BylineText>
-        )}
-        {hasAuthorEmail && (
-          <S.BylineText {...datetime}>
-            {author.email}
-          </S.BylineText>
-        )}
-      </Block>
+      <>
+        <Block mb={1}>
+          {hasAuthorSocialMedias && (
+            <S.BylineText {...datetime}>
+              {author.socialMedias}
+            </S.BylineText>
+          )}
+          {hasAuthorEmail && (
+            <S.BylineText {...datetime}>
+              {author.email}
+            </S.BylineText>
+          )}
+        </Block>
+      </>
     )
   }
 
@@ -79,10 +83,14 @@ const Byline = ({
       </Block>
     )
   }
-
   return (
     <S.Container>
       <S.Content {...content}>
+        <S.ContentAvatar>
+          {hasAvatar && ( 
+            <AvatarComponent />
+          )}
+        </S.ContentAvatar>  
         <S.BylineContainer {...dateline}>
           {authors.items.length > 0 ? (
             <ManyAuthors items={authors.items} />

components/Article/Byline/Byline.styled.js

@@ -66,6 +66,19 @@ Content.propTypes = {
   mb: PropTypes.array
 }
 
+export const ContentAvatar = ({ children }) => 
+  <Block
+    mb='16px'
+    lg={{ mb: '0px', mr: '16px' }}
+  >
+    {children}
+  </Block>
+
+ContentAvatar.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
+  mb: PropTypes.array
+}
+
 export const BylineContainer = ({ children, mb }) => 
   <Block 
     mb={mb[0]}