@mentor-medier/author-bio-block - npm Package Compare versions

Comparing version 5.9.15 to 5.10.0

CHANGELOG.md

@@ -6,2 +6,14 @@ # Change Log
 
+## [5.9.2](https://github.com/WPMedia/fusion-news-theme-blocks/compare/v5.9.1...v5.9.2) (2021-01-14)
+
+
+### Performance Improvements
+
+* Ignore test files in features folder ([b2a344f](https://github.com/WPMedia/fusion-news-theme-blocks/commit/b2a344f96d92b63d25658ab70ec9ec63633fcf6f))
+* Remove mock feature files ([bdd5a3b](https://github.com/WPMedia/fusion-news-theme-blocks/commit/bdd5a3bc942ac93a97623bf5c1fdd3aec264aa6f))
+
+
+
+
+
 ## [5.9.1](https://github.com/WPMedia/fusion-news-theme-blocks/compare/v5.9.0...v5.9.1) (2020-12-16)
@@ -8,0 +20,0 @@

features/author-bio/default.jsx

@@ -48,2 +48,12 @@ import React, { Fragment } from 'react';
 
+export const getSocialLinkAriaLabel = (authorName = 'author', webService) => {
+  if (!webService) return null;
+  return (
+    (webService.toLowerCase() === 'soundcloud' && `Listen to ${authorName} on SoundCloud`)
+    || (webService.toLowerCase() === 'rss' && `Subscribe to ${authorName} RSS feed`)
+    || (webService.toLowerCase() === 'email' && `Send an email to ${authorName}`)
+    || `Connect with ${authorName} on ${webService}`
+  );
+};
+
 const renderAuthorInfo = (author, arcSite) => {
@@ -84,3 +94,3 @@ const {
   const authors = by.reduce((authorList, author) => {
-    const { additional_properties: additionalProperties } = author;
+    const { additional_properties: additionalProperties, name } = author;
     const { original } = additionalProperties;
@@ -93,2 +103,3 @@
             && author.description.length > 0
+            && original
             && original.bio
@@ -103,163 +114,185 @@ && original.bio.length > 0
             let socialButton;
+            let linkTitle;
             const constructedURL = constructSocialURL(socialLink.site, socialLink.url);
 
+            const MediaLink = ({ children, webService, ...otherProps }) => (
+              <MediaLinksStyled
+                href={constructedURL}
+                target="_blank"
+                rel="noreferrer noopener"
+                aria-label={getSocialLinkAriaLabel(name, webService)}
+                primaryColor={getThemeStyle(arcSite)['primary-color']}
+                {...otherProps}
+              >
+                { children }
+              </MediaLinksStyled>
+            );
+
             switch (socialLink.site) {
               case 'linkedin':
+                linkTitle = 'LinkedIn';
                 socialButton = (
-                  <MediaLinksStyled href={constructedURL} target="_blank" rel="noreferrer noopener" primaryColor={getThemeStyle(arcSite)['primary-color']}>
+                  <MediaLink webService={linkTitle}>
                     <LinkedInIcon
                       fill={getThemeStyle(arcSite)['primary-color']}
-                      title="LinkedIn"
+                      title={linkTitle}
                       description="Connect on LinkedIn"
                     />
-                  </MediaLinksStyled>
+                  </MediaLink>
                 );
                 break;
               case 'twitter':
+                linkTitle = 'Twitter';
                 socialButton = (
-                  <MediaLinksStyled href={constructedURL} target="_blank" rel="noreferrer noopener" primaryColor={getThemeStyle(arcSite)['primary-color']}>
+                  <MediaLink webService={linkTitle}>
                     <TwitterIcon
                       fill={getThemeStyle(arcSite)['primary-color']}
-                      title="Twitter"
+                      title={linkTitle}
                       description="Connect on Twitter"
                     />
-                  </MediaLinksStyled>
+                  </MediaLink>
                 );
                 break;
               case 'instagram':
+                linkTitle = 'Instagram';
                 socialButton = (
-                  <MediaLinksStyled href={constructedURL} target="_blank" rel="noreferrer noopener" primaryColor={getThemeStyle(arcSite)['primary-color']}>
+                  <MediaLink webService={linkTitle}>
                     <InstagramIcon
                       fill={getThemeStyle(arcSite)['primary-color']}
-                      title="Instagram"
+                      title={linkTitle}
                       description="Connect on Instagram"
                     />
-                  </MediaLinksStyled>
+                  </MediaLink>
                 );
                 break;
               case 'facebook':
+                linkTitle = 'Facebook';
                 socialButton = (
-                  <MediaLinksStyled href={constructedURL} target="_blank" rel="noreferrer noopener" primaryColor={getThemeStyle(arcSite)['primary-color']}>
+                  <MediaLink webService={linkTitle}>
                     <FacebookIcon
                       fill={getThemeStyle(arcSite)['primary-color']}
-                      title="Facebook"
+                      title={linkTitle}
                       description="Connect on Facebook"
                     />
-                  </MediaLinksStyled>
+                  </MediaLink>
                 );
                 break;
               case 'reddit':
+                linkTitle = 'Reddit';
                 socialButton = (
-                  <MediaLinksStyled href={constructedURL} target="_blank" rel="noreferrer noopener" primaryColor={getThemeStyle(arcSite)['primary-color']}>
+                  <MediaLink webService={linkTitle}>
                     <RedditIcon
                       fill={getThemeStyle(arcSite)['primary-color']}
-                      title="Reddit"
+                      title={linkTitle}
                       description="Connect on Reddit"
                     />
-                  </MediaLinksStyled>
+                  </MediaLink>
                 );
                 break;
               case 'youtube':
+                linkTitle = 'YouTube';
                 socialButton = (
-                  <MediaLinksStyled
-                    href={constructedURL}
-                    target="_blank"
-                    rel="noreferrer noopener"
-                    id="link-social-youtube"
-                    primaryColor={getThemeStyle(arcSite)['primary-color']}
-                  >
+                  <MediaLink webService={linkTitle} id="link-social-youtube">
                     <YoutubeIcon
                       fill={getThemeStyle(arcSite)['primary-color']}
-                      title="YouTube"
+                      title={linkTitle}
                       description="Connect on YouTube"
                     />
-                  </MediaLinksStyled>
+                  </MediaLink>
                 );
                 break;
               case 'medium':
+                linkTitle = 'Medium';
                 socialButton = (
-                  <MediaLinksStyled href={constructedURL} target="_blank" rel="noreferrer noopener" primaryColor={getThemeStyle(arcSite)['primary-color']}>
+                  <MediaLink webService={linkTitle}>
                     <MediumIcon
                       fill={getThemeStyle(arcSite)['primary-color']}
-                      title="Medium"
+                      title={linkTitle}
                       description="Connect on Medium"
                     />
-                  </MediaLinksStyled>
+                  </MediaLink>
                 );
                 break;
               case 'tumblr':
+                linkTitle = 'Tumblr';
                 socialButton = (
-                  <MediaLinksStyled href={constructedURL} target="_blank" rel="noreferrer noopener" primaryColor={getThemeStyle(arcSite)['primary-color']}>
+                  <MediaLink webService={linkTitle}>
                     <TumblrIcon
                       fill={getThemeStyle(arcSite)['primary-color']}
-                      title="Tumblr"
+                      title={linkTitle}
                       description="Connect on Tumblr"
                     />
-                  </MediaLinksStyled>
+                  </MediaLink>
                 );
                 break;
               case 'pinterest':
+                linkTitle = 'Pinterest';
                 socialButton = (
-                  <MediaLinksStyled href={constructedURL} target="_blank" rel="noreferrer noopener" primaryColor={getThemeStyle(arcSite)['primary-color']}>
+                  <MediaLink webService={linkTitle}>
                     <PinterestIcon
                       fill={getThemeStyle(arcSite)['primary-color']}
-                      title="Pinterest"
+                      title={linkTitle}
                       description="Connect on Pinterest"
                     />
-                  </MediaLinksStyled>
+                  </MediaLink>
                 );
                 break;
               case 'snapchat':
+                linkTitle = 'Snapchat';
                 socialButton = (
-                  <MediaLinksStyled href={constructedURL} target="_blank" rel="noreferrer noopener" primaryColor={getThemeStyle(arcSite)['primary-color']}>
+                  <MediaLink webService={linkTitle}>
                     <SnapchatIcon
                       fill={getThemeStyle(arcSite)['primary-color']}
-                      title="Snapchat"
+                      title={linkTitle}
                       description="Connect on Snapchat"
                     />
-                  </MediaLinksStyled>
+                  </MediaLink>
                 );
                 break;
               case 'whatsapp':
+                linkTitle = 'WhatsApp';
                 socialButton = (
-                  <MediaLinksStyled href={constructedURL} target="_blank" rel="noreferrer noopener" primaryColor={getThemeStyle(arcSite)['primary-color']}>
+                  <MediaLink webService={linkTitle}>
                     <WhatsAppIcon
                       fill={getThemeStyle(arcSite)['primary-color']}
-                      title="WhatsApp"
+                      title={linkTitle}
                       description="Connect on WhatsApp"
                     />
-                  </MediaLinksStyled>
+                  </MediaLink>
                 );
                 break;
               case 'soundcloud':
+                linkTitle = 'SoundCloud';
                 socialButton = (
-                  <MediaLinksStyled href={constructedURL} target="_blank" rel="noreferrer noopener" primaryColor={getThemeStyle(arcSite)['primary-color']}>
+                  <MediaLink webService={linkTitle}>
                     <SoundCloudIcon
                       fill={getThemeStyle(arcSite)['primary-color']}
-                      title="SoundCloud"
+                      title={linkTitle}
                       description="Listen on SoundCloud"
                     />
-                  </MediaLinksStyled>
+                  </MediaLink>
                 );
                 break;
               case 'rss':
+                linkTitle = 'RSS';
                 socialButton = (
-                  <MediaLinksStyled href={constructedURL} target="_blank" rel="noreferrer noopener" primaryColor={getThemeStyle(arcSite)['primary-color']}>
+                  <MediaLink webService={linkTitle}>
                     <RssIcon
                       fill={getThemeStyle(arcSite)['primary-color']}
-                      title="RSS"
+                      title={linkTitle}
                       description="Subscribe to RSS feed"
                     />
-                  </MediaLinksStyled>
+                  </MediaLink>
                 );
                 break;
               default:
+                linkTitle = 'Email';
                 socialButton = (
-                  <MediaLinksStyled href={constructedURL} target="_blank" rel="noreferrer noopener" primaryColor={getThemeStyle(arcSite)['primary-color']}>
+                  <MediaLink webService={linkTitle}>
                     <EnvelopeIcon
                       fill={getThemeStyle(arcSite)['primary-color']}
-                      title="Email"
+                      title={linkTitle}
                       description="Send an email"
                     />
-                  </MediaLinksStyled>
+                  </MediaLink>
                 );
@@ -266,0 +299,0 @@ break;

package.json

 {
   "name": "@mentor-medier/author-bio-block",
-  "version": "5.9.15",
+  "version": "5.10.0",
   "description": "Fusion News Theme byline block",
@@ -32,3 +32,3 @@ "author": "SangHee Kim <[e-mail]>",
   },
-  "gitHead": "d7550d1ab57f0b256e433c4902738a28e2322eba"
+  "gitHead": "a1e15e287ef31a6ef84a2d884bd2111defb74f3c"
 }

No alert changes

Improved metrics

Total package byte prevSize

20708

increased by1.64%

Lines of code

364

increased by9.31%

No dependency changes