@mjhls/mjh-framework 1.0.196 → 1.0.197

package/dist/index.js

@@ -7,7 +7,7 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 var React = require('react');
 var React__default = _interopDefault(React);
 var PropTypes = _interopDefault(require('prop-types'));
-var require$$1 = _interopDefault(require('react-dom'));
+var reactDom = _interopDefault(require('react-dom'));
 var Container = _interopDefault(require('react-bootstrap/Container'));
 var Row = _interopDefault(require('react-bootstrap/Row'));
 var Col = _interopDefault(require('react-bootstrap/Col'));
@@ -7194,7 +7194,7 @@ var InfiniteScroll = /** @class */ (function (_super) {
 
 var visibilitySensor = createCommonjsModule(function (module, exports) {
 (function webpackUniversalModuleDefinition(root, factory) {
-	module.exports = factory(React__default, require$$1);
+	module.exports = factory(React__default, reactDom);
 })(commonjsGlobal, function(__WEBPACK_EXTERNAL_MODULE__1__, __WEBPACK_EXTERNAL_MODULE__2__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
@@ -8502,7 +8502,7 @@ var _react2 = _interopRequireDefault(React__default);
 
 
 
-var _reactDom2 = _interopRequireDefault(require$$1);
+var _reactDom2 = _interopRequireDefault(reactDom);
 
 
 
@@ -29399,6 +29399,16 @@ var fbsHero = function fbsHero(props) {
   function urlFor(source) {
     return builder.image(source);
   }
+
+  var topArticleThumbnail = '';
+  var topArticleAltText = topArticle.title;
+  if (topArticle.thumbnail && topArticle.thumbnail.asset) {
+    topArticleThumbnail = urlFor(topArticle.thumbnail.asset).width(600).url();
+    topArticleAltText = topArticle.thumbnail.asset.originalFileName;
+  } else if (props.thumbnail) {
+    topArticleThumbnail = props.thumbnail;
+  }
+
   return React__default.createElement(
     'div',
     { className: 'article-hero' },
@@ -29411,7 +29421,7 @@ var fbsHero = function fbsHero(props) {
         React__default.createElement(
           'div',
           { className: 'fbs-top-article--img' },
-          React__default.createElement('img', { src: urlFor(topArticle.thumbnail.asset).width(600).url(), alt: topArticle.thumbnail.asset.originalFileName })
+          React__default.createElement('img', { src: topArticleThumbnail, alt: topArticleAltText })
         ),
         React__default.createElement(
           'div',
@@ -29426,7 +29436,7 @@ var fbsHero = function fbsHero(props) {
             null,
             moment(topArticle.published).format('MMMM DD, YYYY hh:mma')
           ),
-          React__default.createElement(
+          topArticle.authorMapping && topArticle.authorMapping[0] && React__default.createElement(
             'p',
             null,
             'By ',
@@ -29443,10 +29453,19 @@ var fbsHero = function fbsHero(props) {
       'div',
       { className: 'fbs-sub-article-container' },
       subArticles.map(function (article, index) {
+        var articleThumbnail = '';
+        var articleAltText = article.title;
+        if (article.thumbnail && article.thumbnail.asset) {
+          articleThumbnail = urlFor(article.thumbnail.asset).width(250).url();
+          articleAltText = article.thumbnail.asset.originalFileName;
+        } else if (props.thumbnail) {
+          articleThumbnail = props.thumbnail;
+        }
+
         return React__default.createElement(
           'a',
           { key: index, href: '/view/' + article.url.current, className: 'fbs-sub-article' },
-          React__default.createElement('img', { src: urlFor(article.thumbnail.asset).width(250).url() }),
+          React__default.createElement('img', { src: articleThumbnail, alt: articleAltText }),
           React__default.createElement(
             'div',
             null,
@@ -29460,14 +29479,14 @@ var fbsHero = function fbsHero(props) {
               null,
               moment(article.published).format('MMMM DD, YYYY hh:mma')
             ),
-            React__default.createElement(
+            article.authorMapping && article.authorMapping[0] && React__default.createElement(
               'p',
               null,
               'By ',
               React__default.createElement(
                 'b',
                 null,
-                topArticle.authorMapping[0].displayName
+                article.authorMapping[0].displayName
               )
             )
           )
@@ -29477,7 +29496,7 @@ var fbsHero = function fbsHero(props) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        .article-hero {\n          margin-bottom: 1rem;\n          border-bottom: 1px solid #ddd;\n          padding-bottom: 0.5rem;\n        }\n        .fbs-top-article {\n          width: 100%;\n          margin-bottom: 1rem;\n          padding-bottom: 1rem;\n          border-bottom: 1px solid #ddd;\n        }\n        .fbs-top-article img {\n          width: 100%;\n          height: auto;\n          max-height: 375px;\n          object-fit: cover;\n        }\n        .fbs-top-article--body {\n        }\n        .fbs-top-article--body h1 {\n          color: #252525!important;\n          font-size: 1.6rem;\n          font-weight: bold;\n          text-align: center;\n          margin-top: 1rem;\n        }\n        .fbs-top-article--body p {\n          text-align: center;\n          margin-bottom: 0;\n          color: #252525;\n        }\n        .fbs-top-article--body p:first-of-type {\n          \n          font-size: 0.9rem;\n        }\n        .fbs-sub-article-container {\n          display: flex;\n          flex-direction: row;\n          flex-wrap: wrap;\n\n          padding-top: 1.75rem;\n          margin-left: -1rem;\n          margin-rigth: -1rem;\n        }\n        .fbs-sub-article {\n          width: calc(50% - 2rem);\n          min-width: 350px;\n          display: flex;\n          flex-direction: row;\n          flex: 1 1 auto;\n          margin: 0 1rem 1.75rem;\n        }\n        .fbs-sub-article img {\n          margin-right: 1rem;\n          width: 100px;\n          max-height: 100px;\n          object-fit: cover;\n        }\n        .fbs-sub-article p {\n          margin-bottom: 0;\n          font-size: 0.8rem;\n          color: #252525;\n        }\n        .fbs-sub-article .fbs-sub-article--title {\n          font-weight: bold;\n          font-size: 1rem;\n          color: #252525;\n        }\n       \n      '
+      '\n        .article-hero {\n          margin-bottom: 1rem;\n          border-bottom: 1px solid #ddd;\n          padding-bottom: 0.5rem;\n        }\n        .fbs-top-article {\n          width: 100%;\n          margin-bottom: 1rem;\n          padding-bottom: 1rem;\n          border-bottom: 1px solid #ddd;\n        }\n        .fbs-top-article img {\n          width: 100%;\n          height: auto;\n          max-height: 375px;\n          object-fit: cover;\n        }\n        \n        .fbs-top-article--body {\n        }\n        .fbs-top-article--body h1 {\n          color: #252525 !important;\n          font-size: 1.6rem;\n          font-weight: bold;\n          text-align: center;\n          margin-top: 1rem;\n        }\n        .fbs-top-article--body p {\n          text-align: center;\n          margin-bottom: 0;\n          color: #252525;\n        }\n        .fbs-top-article--body p:first-of-type {\n          font-size: 0.9rem;\n        }\n        .fbs-sub-article-container {\n          display: flex;\n          flex-direction: row;\n          flex-wrap: wrap;\n\n          padding-top: 1.75rem;\n          margin-left: -1rem;\n          margin-rigth: -1rem;\n        }\n        .fbs-sub-article {\n          width: calc(50% - 2rem);\n          min-width: 350px;\n          display: flex;\n          flex-direction: row;\n          flex: 1 1 auto;\n          margin: 0 1rem 1.75rem;\n        }\n        .fbs-sub-article img {\n          margin-right: 1rem;\n          width: 100px;\n          max-height: 100px;\n          object-fit: contain;\n        }\n        .fbs-sub-article p {\n          margin-bottom: 0;\n          font-size: 0.8rem;\n          color: #252525;\n        }\n        .fbs-sub-article .fbs-sub-article--title {\n          font-weight: bold;\n          font-size: 1rem;\n          color: #252525;\n        }\n      '
     )
   );
 };
@@ -29497,9 +29516,18 @@ var HorizontalHero = function HorizontalHero(props) {
       borderColor = _props$borderColor === undefined ? 'black' : _props$borderColor;
 
 
+  var topArticleThumbnail = '';
+  var topArticleAltText = topArticle.title;
+  if (topArticle.thumbnail && topArticle.thumbnail.asset) {
+    topArticleThumbnail = urlFor(topArticle.thumbnail.asset).width(350).url();
+    topArticleAltText = topArticle.thumbnail.asset.originalFileName;
+  } else if (props.thumbnail) {
+    topArticleThumbnail = props.thumbnail;
+  }
+
   return React__default.createElement(
     'div',
-    { className: 'horizontal-hero-container' },
+    { className: 'horizontal-hero-container', style: { borderRight: '3px solid ' + borderColor, borderTop: '3px solid ' + borderColor } },
     React__default.createElement(
       'div',
       { className: 'horizontal-hero-title' },
@@ -29516,7 +29544,7 @@ var HorizontalHero = function HorizontalHero(props) {
       React__default.createElement(
         'a',
         { href: '/view/' + topArticle.url.current, className: 'horizontal-hero-img' },
-        React__default.createElement('img', { src: urlFor(topArticle.thumbnail.asset).width(350).url() })
+        React__default.createElement('img', { src: topArticleThumbnail, alt: topArticleAltText })
       ),
       React__default.createElement(
         'div',
@@ -29563,7 +29591,7 @@ var HorizontalHero = function HorizontalHero(props) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        .horizontal-hero-container {\n          border-right: 3px solid ' + borderColor + ';\n          border-top: 3px solid ' + borderColor + ';\n          margin-bottom: 3rem;\n          margin-top: 2rem;\n          position: relative;\n        }\n        .horizontal-hero-title {\n          position: absolute;\n          top: -25px;\n          background: white;\n          z-index: 2;\n          padding-right: 1.5rem;\n          font-weight: bold;\n        }\n        .horizontal-hero-inner {\n          display: flex;\n          flex-direction: row;\n          padding-top: 0.75rem;\n          margin-top: 0.75rem;\n        }\n\n        .horizontal-articles-wrap {\n          padding: 0 1rem;\n        }\n\n        .horizontal-hero-img {\n          width: 33%;\n          min-width: 200px;\n        }\n        .horizontal-hero-img img {\n          width: 100%;\n          height: 100%;\n          object-fit: cover;\n        }\n        .horizontal-article {\n          border-bottom: 1px solid #ccc;\n          display: block;\n          margin-bottom: 0.5rem;\n        }\n        .horizontal-article:hover {\n            background: #eee;\n        }\n        .horizontal-article p {\n          margin-bottom: 0.5rem;\n          font-weight: bold;\n          color: #252525;\n        }\n        .horizontal-view-more {\n          position: absolute;\n          right: 0;\n          margin-top: 0.25rem;\n          font-weight: bold;\n        }\n        .horizontal-view-more span {\n          display: inline-block;\n          color: rgb(81, 116, 153);\n          font-size: 1.2rem;\n        }\n        @media screen and (max-width: 768px) {\n            .horizontal-hero-img {\n                display: none;\n            }\n        }\n      '
+      '\n        .horizontal-hero-container {\n          margin-bottom: 3rem;\n          margin-top: 2rem;\n          position: relative;\n        }\n        .horizontal-hero-title {\n          position: absolute;\n          top: -25px;\n          background: white;\n          z-index: 2;\n          padding-right: 1.5rem;\n          font-weight: bold;\n        }\n        .horizontal-hero-inner {\n          display: flex;\n          flex-direction: row;\n          padding-top: 0.75rem;\n          margin-top: 0.75rem;\n        }\n\n        .horizontal-articles-wrap {\n          padding: 0 1rem;\n        }\n\n        .horizontal-hero-img {\n          width: 33%;\n          min-width: 200px;\n        }\n        .horizontal-hero-img img {\n          width: 100%;\n          height: 100%;\n          object-fit: cover;\n        }\n        .horizontal-article {\n          border-bottom: 1px solid #ccc;\n          display: block;\n          margin-bottom: 0.5rem;\n        }\n        .horizontal-article:hover {\n            background: #eee;\n        }\n        .horizontal-article p {\n          margin-bottom: 0.5rem;\n          font-weight: bold;\n          color: #252525;\n        }\n        .horizontal-view-more {\n          position: absolute;\n          right: 0;\n          margin-top: 0.25rem;\n          font-weight: bold;\n        }\n        .horizontal-view-more span {\n          display: inline-block;\n          color: rgb(81, 116, 153);\n          font-size: 1.2rem;\n        }\n        @media screen and (max-width: 768px) {\n            .horizontal-hero-img {\n                display: none;\n            }\n        }\n      '
     )
   );
 };
@@ -29579,13 +29607,21 @@ var OncliveHero = function OncliveHero(props) {
     'div',
     { className: 'article-group--container' },
     props.dataRecord.map(function (article, index) {
+      var articleThumbnail = '';
+      var articleAltText = article.title;
+      if (article.thumbnail && article.thumbnail.asset) {
+        articleThumbnail = urlFor(article.thumbnail.asset).width(250).url();
+        articleAltText = article.thumbnail.asset.originalFileName;
+      } else if (props.thumbnail) {
+        articleThumbnail = props.thumbnail;
+      }
       return React__default.createElement(
         'a',
         { key: index, href: '/view/' + article.url.current, className: 'article-group' },
         React__default.createElement(
           'figure',
           null,
-          React__default.createElement('img', { src: urlFor(article.thumbnail.asset).width(250).url(), alt: article.title })
+          React__default.createElement('img', { src: articleThumbnail, alt: articleAltText })
         ),
         React__default.createElement(
           'div',
@@ -29597,7 +29633,7 @@ var OncliveHero = function OncliveHero(props) {
           ),
           React__default.createElement('div', null),
           moment(article.published).format('MMMM Do YYYY, h:mma'),
-          article.authorMapping[0].displayName && React__default.createElement(
+          article.authorMapping && article.authorMapping[0] && article.authorMapping[0].displayName && React__default.createElement(
             'p',
             { className: 'mb-2' },
             'By ',
@@ -29618,7 +29654,7 @@ var OncliveHero = function OncliveHero(props) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        .article-group--container {\n          display: flex;\n          flex-direction: row;\n          flex-wrap: wrap;\n        }\n        .article-group--container * {\n          transition: all 0.13s ease;\n        }\n        .article-group {\n          display: flex;\n          flex-direction: row;\n          flex: 1 1 auto;\n          margin: 0.5rem 1rem;\n          width: calc(50% - 2rem);\n          background: #fff;\n          min-width: 320px;\n          transition: all 0.1s ease-out;\n          border-top: 1px solid #eee;\n          position: relative;\n          overflow: hidden;\n        }\n      \n        .article-group:nth-of-type(1) {\n          width: 100%;\n        }\n        .article-group:nth-of-type(1) .article-group--body {\n        }\n        .article-group:nth-of-type(1) figure img {\n          width: 225px;\n        }\n        .article-group:nth-of-type(1) .article-group--body h2 {\n          font-size: 1.4rem;\n        }\n        .article-group:nth-of-type(1) .article-group--summary {\n          display: block;\n        }\n        @media screen and (max-width: 1091px) {\n          .article-group:nth-of-type(1) {\n            width: 100%;\n          }\n          .article-group:nth-of-type(1) .article-group--summary {\n            display: none;\n          }\n          .article-group:nth-of-type(1) figure img {\n            width: 130px;\n          }\n          .article-group:nth-of-type(1) .article-group--body h2 {\n            font-size: 1rem;\n          }\n        }\n        .article-group figure {\n          margin-bottom: 0;\n        }\n        .article-group figure img {\n          height: 100%;\n          width: 130px;\n\n          object-fit: cover;\n        }\n        .article-group--body {\n          padding-left: 1rem;\n        }\n        .article-group--body p {\n          font-size: .9rem;\n        }\n        .article-group--body h2 {\n          font-weight: bold;\n          margin-top: 1rem;\n          font-size: 1rem;\n          padding-right: 0.5rem;\n        }\n        .article-group--summary {\n          font-size: 1rem;\n          display: none;\n        }\n      '
+      '\n        .article-group--container {\n          display: flex;\n          flex-direction: row;\n          flex-wrap: wrap;\n        }\n        .article-group--container * {\n          transition: all 0.13s ease;\n        }\n        .article-group {\n          display: flex;\n          flex-direction: row;\n          flex: 1 1 auto;\n          margin: 0.5rem 1rem;\n          width: calc(50% - 2rem);\n          background: #fff;\n          min-width: 320px;\n          transition: all 0.1s ease-out;\n          border-top: 1px solid #eee;\n          position: relative;\n          overflow: hidden;\n        }\n      \n        .article-group:nth-of-type(1) {\n          width: 100%;\n        }\n        .article-group:nth-of-type(1) .article-group--body {\n        }\n        .article-group:nth-of-type(1) figure img {\n          width: 225px;\n        }\n        .article-group:nth-of-type(1) .article-group--body h2 {\n          font-size: 1.4rem;\n        }\n        .article-group:nth-of-type(1) .article-group--summary {\n          display: block;\n        }\n        @media screen and (max-width: 1091px) {\n          .article-group:nth-of-type(1) {\n            width: 100%;\n          }\n          .article-group:nth-of-type(1) .article-group--summary {\n            display: none;\n          }\n          .article-group:nth-of-type(1) figure img {\n            width: 130px;\n          }\n          .article-group:nth-of-type(1) .article-group--body h2 {\n            font-size: 1rem;\n          }\n        }\n        .article-group figure {\n          margin-bottom: 0;\n        }\n        .article-group figure img {\n          height: 100%;\n          width: 130px;\n          object-fit: contain;\n        }\n \n        .article-group--body {\n          padding-left: 1rem;\n        }\n        .article-group--body p {\n          font-size: .9rem;\n        }\n        .article-group--body h2 {\n          font-weight: bold;\n          margin-top: 1rem;\n          font-size: 1rem;\n          padding-right: 0.5rem;\n        }\n        .article-group--summary {\n          font-size: 1rem;\n          display: none;\n        }\n      '
     )
   );
 };
@@ -29633,6 +29669,15 @@ var OncliveLargeHero = function OncliveLargeHero(props) {
     return builder.image(source);
   }
 
+  var topArticleThumbnail = '';
+  var topArticleAltText = topArticle.title;
+  if (topArticle.thumbnail && topArticle.thumbnail.asset) {
+    topArticleThumbnail = urlFor(topArticle.thumbnail.asset).width(550).url();
+    topArticleAltText = topArticle.thumbnail.asset.originalFileName;
+  } else if (props.thumbnail) {
+    topArticleThumbnail = props.thumbnail;
+  }
+
   return React__default.createElement(
     'div',
     { className: 'article-hero-container' },
@@ -29642,8 +29687,7 @@ var OncliveLargeHero = function OncliveLargeHero(props) {
       React__default.createElement(
         'figure',
         null,
-        React__default.createElement('img', {
-          src: urlFor(topArticle.thumbnail.asset).width(500).url() })
+        React__default.createElement('img', { src: topArticleThumbnail, alt: topArticleAltText })
       ),
       React__default.createElement(
         'div',
@@ -29669,16 +29713,21 @@ var OncliveLargeHero = function OncliveLargeHero(props) {
       'div',
       { className: 'sub-articles-container' },
       subArticles && subArticles.map(function (article, index) {
+        var articleThumbnail = '';
+        var articleAltText = article.title;
+        if (article.thumbnail && article.thumbnail.asset) {
+          articleThumbnail = urlFor(article.thumbnail.asset).width(250).url();
+          articleAltText = article.thumbnail.asset.originalFileName;
+        } else if (props.thumbnail) {
+          articleThumbnail = props.thumbnail;
+        }
         return React__default.createElement(
           'a',
-          { href: '/view/' + article.url.current, className: 'sub-article' },
+          { key: index, href: '/view/' + article.url.current, className: 'sub-article' },
           React__default.createElement(
             'figure',
             null,
-            React__default.createElement('img', {
-              src: urlFor(article.thumbnail.asset).width(250).url(),
-              alt: article.title
-            })
+            React__default.createElement('img', { src: articleThumbnail, alt: articleAltText })
           ),
           React__default.createElement(
             'div',
@@ -29690,7 +29739,7 @@ var OncliveLargeHero = function OncliveLargeHero(props) {
             ),
             React__default.createElement('div', null),
             moment(article.published).format('MMMM Do YYYY, h:mma'),
-            article.authorMapping[0].displayName && React__default.createElement(
+            article.authorMapping && article.authorMapping[0] && article.authorMapping[0].displayName && React__default.createElement(
               'p',
               { className: 'mb-2' },
               'By ',
@@ -29739,10 +29788,18 @@ var VerticalHero = function VerticalHero(props) {
         )
       ),
       props.dataRecord.map(function (article, index) {
+        var articleThumbnail = '';
+        var articleAltText = article.title;
+        if (article.thumbnail && article.thumbnail.asset) {
+          articleThumbnail = urlFor(article.thumbnail.asset).width(500).url();
+          articleAltText = article.thumbnail.asset.originalFileName;
+        } else if (props.thumbnail) {
+          articleThumbnail = props.thumbnail;
+        }
         return index === 0 ? React__default.createElement(
           'a',
           { href: '/view/' + article.url.current, key: index, className: 'vertical-article' },
-          React__default.createElement('img', { src: urlFor(article.thumbnail.asset).width(500).url() }),
+          React__default.createElement('img', { src: articleThumbnail, alt: articleAltText }),
           React__default.createElement(
             'h2',
             null,
@@ -29762,7 +29819,7 @@ var VerticalHero = function VerticalHero(props) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        .vertical-hero-container {\n          display: flex;\n          flex-direction: row;\n          padding: 0.25rem;\n          justify-content: space-between;\n          width: 100%;\n          flex: 1 1 auto;\n          \n        }\n        .hero-title h2{\n          font-size: 1.2rem;\n          font-weight: bold;\n          \n        }\n        .vertical-article {\n          display: block;\n        }\n        .vertical-article img {\n          width: 100%;\n          height: auto;\n          min-width: 200px;\n        }\n        .vertical-article h2 {\n          font-size: .9rem;\n          color: #252525;\n          font-weight: bold;\n          padding: 0.5rem .5rem 1rem;\n          margin: 0.5rem;\n          border-bottom: 1px solid #ccc;\n        }\n    \n      '
+      '\n        .vertical-hero-container {\n          display: flex;\n          flex-direction: row;\n          padding: 0.25rem;\n          justify-content: space-between;\n          width: 100%;\n          flex: 1 1 auto;\n        }\n        .hero-title h2 {\n          font-size: 1.2rem;\n          font-weight: bold;\n        }\n        .vertical-article {\n          display: block;\n        }\n        .vertical-article img {\n          width: 100%;\n          height: auto;\n          min-width: 200px;\n        }\n        .vertical-article h2 {\n          font-size: 0.9rem;\n          color: #252525;\n          font-weight: bold;\n          padding: 0.5rem 0.5rem 1rem;\n          margin: 0.5rem;\n          border-bottom: 1px solid #ccc;\n        }\n      '
     )
   );
 };
@@ -29776,6 +29833,16 @@ var YahooHero = function YahooHero(props) {
   function urlFor(source) {
     return builder.image(source);
   }
+
+  var topArticleThumbnail = '';
+  var topArticleAltText = topArticle.title;
+  if (topArticle.thumbnail && topArticle.thumbnail.asset) {
+    topArticleThumbnail = urlFor(topArticle.thumbnail.asset).width(600).url();
+    topArticleAltText = topArticle.thumbnail.asset.originalFileName;
+  } else if (props.thumbnail) {
+    topArticleThumbnail = props.thumbnail;
+  }
+
   return React__default.createElement(
     'div',
     { className: 'article-hero' },
@@ -29788,7 +29855,7 @@ var YahooHero = function YahooHero(props) {
         React__default.createElement(
           'div',
           { className: 'yh-top-article--img' },
-          React__default.createElement('img', { src: urlFor(topArticle.thumbnail.asset).width(600).url(), alt: topArticle.thumbnail.asset.originalFileName })
+          React__default.createElement('img', { src: topArticleThumbnail, alt: topArticleAltText })
         ),
         React__default.createElement('div', { className: 'yh-top-article--blur' }),
         React__default.createElement(
@@ -29816,10 +29883,19 @@ var YahooHero = function YahooHero(props) {
       'div',
       { className: 'yh-sub-article-container' },
       subArticles.map(function (article, index) {
+        var articleThumbnail = '';
+        var articleAltText = article.title;
+        if (article.thumbnail && article.thumbnail.asset) {
+          articleThumbnail = urlFor(article.thumbnail.asset).width(250).url();
+          articleAltText = article.thumbnail.asset.originalFileName;
+        } else if (props.thumbnail) {
+          articleThumbnail = props.thumbnail;
+        }
+
         return React__default.createElement(
           'a',
           { href: '/view/' + article.url.current, key: index, className: 'yh-sub-article' },
-          React__default.createElement('img', { src: urlFor(article.thumbnail.asset).width(250).url() }),
+          React__default.createElement('img', { src: articleThumbnail }),
           React__default.createElement(
             'h6',
             { className: 'yh-sub-article--title' },
@@ -29830,9 +29906,9 @@ var YahooHero = function YahooHero(props) {
             { className: 'yh-sub-article--info' },
             moment(article.published).format('MMMM DD, YYYY hh:mma')
           ),
-          React__default.createElement(
+          article.authorMapping && article.authorMapping[0] && React__default.createElement(
             'p',
-            { className: 'yh-sub-article--info' },
+            null,
             'By ',
             React__default.createElement(
               'b',
@@ -29846,7 +29922,7 @@ var YahooHero = function YahooHero(props) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        .yh-top-article {\n          display: flex;\n          flex-direction: row;\n          position: relative;\n          font-family: \'Roboto\', sans-serif;\n          margin-bottom: 1rem;\n          border-radius: 15px;\n          overflow: hidden;\n          min-height: 315px;\n        }\n        .yh-top-article--img {\n          width: 100%;\n          min-height: 240px;\n          overflow: hidden;\n        }\n        .yh-top-article--img img {\n          width: 100%;\n          height: auto;\n          min-height: 100%;\n          max-height: 315px;\n          object-fit: cover;\n        }\n        .yh-top-article--body {\n          height: 100%;\n          width: 40%;\n          min-width: 320px;\n          right: 0;\n          position: absolute;\n          color: white;\n          padding: 1.75rem;\n          height: 315px;\n          display: flex;\n          align-items: flex-start;\n          justify-content: center;\n          flex-direction: column;\n        }\n        .yh-top-article--body h1 {\n          color: white!important;\n          font-size: 1.4rem;\n          font-weight: 500;\n          margin-bottom: 0.5rem;\n        }\n        .yh-top-article--body p {\n          font-size: 0.9rem;\n          margin-bottom: 0.5rem;\n        }\n        .yh-top-article--blur {\n          height: 100%;\n          width: 40%;\n          right: 0;\n          position: absolute;\n          filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));\n          background: rgba(0,0,0,.65);\n          min-width: 320px;\n        }\n        .yh-sub-article-container {\n          display: flex;\n          justify-content: space-between;\n        }\n        .yh-sub-article {\n          width: 23.25%;\n        }\n        .yh-sub-article p.yh-sub-article--title {\n          font-weight: bold;\n        }\n        .yh-sub-article img {\n          width: 100%;\n          height: 150px;\n          object-fit: cover;\n          border-radius: 15px;\n        }\n        .yh-sub-article--title {\n          font-weight: bold;\n          margin-top: .25rem;\n          font-size: 1rem;\n          margin-bottom: .25rem;\n        }\n        .yh-sub-article--info {\n          font-size: .8rem;\n          margin-bottom: 0;\n          \n        }\n        @media screen and (max-width: 968px) {\n          .yh-sub-article-container {\n            flex-wrap: wrap;\n          }\n          .yh-sub-article {\n            width: 48%;\n            margin-bottom: 1rem;\n          }\n        }\n      '
+      '\n        .yh-top-article {\n          display: flex;\n          flex-direction: row;\n          position: relative;\n          font-family: \'Roboto\', sans-serif;\n          margin-bottom: 1rem;\n          border-radius: 15px;\n          overflow: hidden;\n          min-height: 315px;\n        }\n        .yh-top-article--img {\n          width: 100%;\n          min-height: 240px;\n          overflow: hidden;\n        }\n        .yh-top-article--img img {\n          width: 100%;\n          height: auto;\n          min-height: 100%;\n          max-height: 315px;\n          object-fit: cover;\n        }\n        .yh-top-article--body {\n          height: 100%;\n          width: 40%;\n          min-width: 320px;\n          right: 0;\n          position: absolute;\n          color: white;\n          padding: 1.75rem;\n          height: 315px;\n          display: flex;\n          align-items: flex-start;\n          justify-content: center;\n          flex-direction: column;\n        }\n        .yh-top-article--body h1 {\n          color: white!important;\n          font-size: 1.4rem;\n          font-weight: 500;\n          margin-bottom: 0.5rem;\n        }\n        .yh-top-article--body p {\n          font-size: 0.9rem;\n          margin-bottom: 0.5rem;\n        }\n        .yh-top-article--blur {\n          height: 100%;\n          width: 40%;\n          right: 0;\n          position: absolute;\n          filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));\n          background: rgba(0,0,0,.65);\n          min-width: 320px;\n        }\n        .yh-sub-article-container {\n          display: flex;\n          justify-content: space-between;\n        }\n        .yh-sub-article {\n          width: 23.25%;\n        }\n        .yh-sub-article p.yh-sub-article--title {\n          font-weight: bold;\n        }\n        .yh-sub-article img {\n          width: 100%;\n          height: 150px;\n          object-fit: cover;\n          border-radius: 15px;\n        }\n        .yh-sub-article img[src=\'' + props.thumbnail + '\']{\n          object-fit: contain;\n        }\n        .yh-sub-article--title {\n          font-weight: bold;\n          margin-top: .25rem;\n          font-size: 1rem;\n          margin-bottom: .25rem;\n        }\n        .yh-sub-article--info {\n          font-size: .8rem;\n          margin-bottom: 0;\n          \n        }\n        @media screen and (max-width: 968px) {\n          .yh-sub-article-container {\n            flex-wrap: wrap;\n          }\n          .yh-sub-article {\n            width: 48%;\n            margin-bottom: 1rem;\n          }\n        }\n      '
     )
   );
 };