@mjhls/mjh-framework 1.0.195 → 1.0.197

package/README.md

@@ -1,5 +1,5 @@
 
-# mjh-framework v. 1.0.195
+# mjh-framework v. 1.0.197
 
 
 

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import React__default, { Component, useState, useEffect, useRef, createElement, createContext } from 'react';
 import PropTypes from 'prop-types';
-import require$$1 from 'react-dom';
+import reactDom from 'react-dom';
 import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
@@ -7186,7 +7186,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
@@ -8494,7 +8494,7 @@ var _react2 = _interopRequireDefault(React__default);
 
 
 
-var _reactDom2 = _interopRequireDefault(require$$1);
+var _reactDom2 = _interopRequireDefault(reactDom);
 
 
 
@@ -11764,6 +11764,88 @@ function get$1(object, path, defaultValue) {
 
 var get_1 = get$1;
 
+var AD = function AD(_ref) {
+  var networkID = _ref.networkID,
+      adUnit = _ref.adUnit,
+      sizeMapping = _ref.sizeMapping,
+      className = _ref.className,
+      slotId = _ref.slotId,
+      sizes = _ref.sizes,
+      minInViewPercent = _ref.minInViewPercent,
+      _ref$targeting = _ref.targeting,
+      targeting = _ref$targeting === undefined ? {} : _ref$targeting;
+
+  var _useState = useState(false),
+      _useState2 = slicedToArray(_useState, 2),
+      adRendered = _useState2[0],
+      setAdRendered = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = slicedToArray(_useState3, 2),
+      showPlaceholder = _useState4[0],
+      setShowPlaceholder = _useState4[1];
+
+  var handleVisibilityChange = debounce_1(function (_ref2) {
+    var event = _ref2.event;
+
+    if (event.inViewPercentage <= 0) {
+      setShowPlaceholder(true);
+    }
+  }, 500);
+
+  return React__default.createElement(
+    React__default.Fragment,
+    null,
+    !showPlaceholder && React__default.createElement(
+      lib_1,
+      {
+        dfpNetworkId: networkID,
+        targetingArguments: targeting,
+        sizeMapping: sizeMapping,
+        lazyLoad: { fetchMarginPercent: 500, renderMarginPercent: 200, mobileScaling: 2.0 } },
+      React__default.createElement(
+        'div',
+        { className: className },
+        React__default.createElement(lib_2, {
+          slotId: slotId,
+          sizes: sizes,
+          adUnit: adUnit,
+          sizeMapping: sizeMapping,
+          onSlotRender: function onSlotRender(eventData) {
+            setAdRendered(true);
+          },
+          onSlotVisibilityChanged: handleVisibilityChange
+        })
+      )
+    ),
+    adRendered && showPlaceholder && React__default.createElement(
+      VisibilitySensor,
+      {
+        partialVisibility: true,
+        onChange: function onChange(isVisible) {
+          if (isVisible) {
+            setShowPlaceholder(false);
+          }
+        } },
+      React__default.createElement(
+        'div',
+        { style: { height: 'auto' } },
+        '\xA0'
+      )
+    )
+  );
+};
+
+AD.propTypes = {
+  networkID: PropTypes.string.isRequired,
+  adUnit: PropTypes.string.isRequired,
+  slotId: PropTypes.string,
+  className: PropTypes.string,
+  sizeMapping: PropTypes.array,
+  sizes: PropTypes.array,
+  minInViewPercent: PropTypes.number
+};
+
 var GridContent = function (_React$Component) {
   inherits(GridContent, _React$Component);
 
@@ -11982,7 +12064,7 @@ var GridContent = function (_React$Component) {
 
   createClass(GridContent, [{
     key: 'cardLoader',
-    value: function cardLoader(page, columns, variant, showVideo, VideoPlayer) {
+    value: function cardLoader(page, columns, variant, showVideo, VideoPlayer, showBI, brandInsight) {
       var _this2 = this;
 
       var lgVar = Math.floor(12 / columns);
@@ -12057,13 +12139,33 @@ var GridContent = function (_React$Component) {
           })
         );
       }
+
+      var insert = function insert(arr, index$$1, newElement) {
+        return [].concat(toConsumableArray(arr.slice(0, index$$1)), [newElement], toConsumableArray(arr.slice(index$$1)));
+      };
+      var posts = [];
+      if (showBI) {
+        var interval = brandInsight.interval;
+        var data = this.state.data;
+        posts = data;
+        var i = 1;
+        for (var pos = interval; pos <= posts.length;) {
+          brandInsight.targeting.pos = 'article' + i;
+          posts = insert(posts, pos, brandInsight);
+          pos += interval + 1;
+          i++;
+        }
+      } else {
+        posts = this.state.data;
+      }
+
       return React__default.createElement(
         'div',
         { className: 'grid-container' },
-        this.state.data && this.state.data.map(function (row, index$$1) {
+        posts && posts.map(function (row, index$$1) {
           var pageNumber = row.pageNumber || _this2.state.page;
           var contentCategoryName = row.contentCategory && row.contentCategory.name && _this2.mapping[row.contentCategory.name] ? row.contentCategory.name : 'Articles';
-          var linkHref = _this2.mapping[contentCategoryName] + '/' + row.url.current;
+          var linkHref = row.url && row.url.current ? _this2.mapping[contentCategoryName] + '/' + row.url.current : '';
           if (row._type === 'feature') {
             if (row.blank || _this2.checkExternalUrl(row.url.current)) {
               return React__default.createElement(
@@ -12123,7 +12225,7 @@ var GridContent = function (_React$Component) {
                     )
                   )
                 ),
-                showVideo && (_this2.state.data.length < numberOfItemsBeforeVideo || index$$1 + 1 === numberOfItemsBeforeVideo) && React__default.createElement(VideoPlayer, null),
+                showVideo && (posts.length < numberOfItemsBeforeVideo || index$$1 + 1 === numberOfItemsBeforeVideo) && React__default.createElement(VideoPlayer, null),
                 main_36 && _this2.props.rightItems && (index$$1 + 1) % numberOfItemsBeforeAd === 0 && _this2.renderMobileAd(index$$1, numberOfItemsBeforeAd)
               );
             } else {
@@ -12184,10 +12286,24 @@ var GridContent = function (_React$Component) {
                     )
                   )
                 ),
-                showVideo && (_this2.state.data.length < numberOfItemsBeforeVideo || index$$1 + 1 === numberOfItemsBeforeVideo) && React__default.createElement(VideoPlayer, null),
+                showVideo && (posts.length < numberOfItemsBeforeVideo || index$$1 + 1 === numberOfItemsBeforeVideo) && React__default.createElement(VideoPlayer, null),
                 main_36 && _this2.props.rightItems && (index$$1 + 1) % numberOfItemsBeforeAd === 0 && _this2.renderMobileAd(index$$1, numberOfItemsBeforeAd)
               );
             }
+          } else if (row._type === 'BrandInsight' && row.adUnit) {
+            return React__default.createElement(
+              React__default.Fragment,
+              { key: itemCounter, className: 'brand-insight-wrapper' },
+              React__default.createElement(
+                'div',
+                { counter: itemCounter++, style: { display: 'flex', flex: '1 0 auto' } },
+                React__default.createElement(
+                  Card,
+                  { className: 'content-card ad-wrapper', style: { flexDirection: index$$1 === 0 || index$$1 % 4 === 0 ? 'top' : 'row' } },
+                  React__default.createElement(AD, { networkID: row.networkID, adUnit: row.adUnit, targeting: row.targeting, className: row.className, sizes: row.sizes, slotId: row.slotId })
+                )
+              )
+            );
           }
           return React__default.createElement(
             React__default.Fragment,
@@ -12246,7 +12362,7 @@ var GridContent = function (_React$Component) {
                 )
               )
             ),
-            showVideo && (_this2.state.data.length < numberOfItemsBeforeVideo || index$$1 + 1 === numberOfItemsBeforeVideo) && React__default.createElement(VideoPlayer, null),
+            showVideo && (posts.length < numberOfItemsBeforeVideo || index$$1 + 1 === numberOfItemsBeforeVideo) && React__default.createElement(VideoPlayer, null),
             main_36 && _this2.props.rightItems && (index$$1 + 1) % numberOfItemsBeforeAd === 0 && _this2.renderMobileAd(index$$1, numberOfItemsBeforeAd)
           );
         })
@@ -12263,7 +12379,9 @@ var GridContent = function (_React$Component) {
           autoScroll = _props.autoScroll,
           page = _props.page,
           showVideo = _props.showVideo,
-          VideoPlayer = _props.VideoPlayer;
+          VideoPlayer = _props.VideoPlayer,
+          showBI = _props.showBI,
+          brandInsight = _props.brandInsight;
 
 
       return React__default.createElement(
@@ -12275,7 +12393,7 @@ var GridContent = function (_React$Component) {
           React__default.createElement(
             Container,
             null,
-            this.cardLoader(page, columns, variant, showVideo, VideoPlayer)
+            this.cardLoader(page, columns, variant, showVideo, VideoPlayer, showBI, brandInsight)
           )
         ) : React__default.createElement(
           React__default.Fragment,
@@ -12283,7 +12401,7 @@ var GridContent = function (_React$Component) {
           React__default.createElement(
             Container,
             null,
-            this.cardLoader(page, columns, variant, showVideo, VideoPlayer)
+            this.cardLoader(page, columns, variant, showVideo, VideoPlayer, showBI, brandInsight)
           ),
           React__default.createElement(
             'div',
@@ -16888,88 +17006,6 @@ var HamMagazine = function HamMagazine(props) {
   );
 };
 
-var AD = function AD(_ref) {
-  var networkID = _ref.networkID,
-      adUnit = _ref.adUnit,
-      sizeMapping = _ref.sizeMapping,
-      className = _ref.className,
-      slotId = _ref.slotId,
-      sizes = _ref.sizes,
-      minInViewPercent = _ref.minInViewPercent,
-      _ref$targeting = _ref.targeting,
-      targeting = _ref$targeting === undefined ? {} : _ref$targeting;
-
-  var _useState = useState(false),
-      _useState2 = slicedToArray(_useState, 2),
-      adRendered = _useState2[0],
-      setAdRendered = _useState2[1];
-
-  var _useState3 = useState(false),
-      _useState4 = slicedToArray(_useState3, 2),
-      showPlaceholder = _useState4[0],
-      setShowPlaceholder = _useState4[1];
-
-  var handleVisibilityChange = debounce_1(function (_ref2) {
-    var event = _ref2.event;
-
-    if (event.inViewPercentage <= 0) {
-      setShowPlaceholder(true);
-    }
-  }, 500);
-
-  return React__default.createElement(
-    React__default.Fragment,
-    null,
-    !showPlaceholder && React__default.createElement(
-      lib_1,
-      {
-        dfpNetworkId: networkID,
-        targetingArguments: targeting,
-        sizeMapping: sizeMapping,
-        lazyLoad: { fetchMarginPercent: 500, renderMarginPercent: 200, mobileScaling: 2.0 } },
-      React__default.createElement(
-        'div',
-        { className: className },
-        React__default.createElement(lib_2, {
-          slotId: slotId,
-          sizes: sizes,
-          adUnit: adUnit,
-          sizeMapping: sizeMapping,
-          onSlotRender: function onSlotRender(eventData) {
-            setAdRendered(true);
-          },
-          onSlotVisibilityChanged: handleVisibilityChange
-        })
-      )
-    ),
-    adRendered && showPlaceholder && React__default.createElement(
-      VisibilitySensor,
-      {
-        partialVisibility: true,
-        onChange: function onChange(isVisible) {
-          if (isVisible) {
-            setShowPlaceholder(false);
-          }
-        } },
-      React__default.createElement(
-        'div',
-        { style: { height: 'auto' } },
-        '\xA0'
-      )
-    )
-  );
-};
-
-AD.propTypes = {
-  networkID: PropTypes.string.isRequired,
-  adUnit: PropTypes.string.isRequired,
-  slotId: PropTypes.string,
-  className: PropTypes.string,
-  sizeMapping: PropTypes.array,
-  sizes: PropTypes.array,
-  minInViewPercent: PropTypes.number
-};
-
 var AD728x90 = function AD728x90(_ref) {
   var networkID = _ref.networkID,
       adUnit = _ref.adUnit,
@@ -29355,6 +29391,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' },
@@ -29367,7 +29413,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',
@@ -29382,7 +29428,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 ',
@@ -29399,10 +29445,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,
@@ -29416,14 +29471,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
               )
             )
           )
@@ -29433,7 +29488,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      '
     )
   );
 };
@@ -29453,9 +29508,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' },
@@ -29472,7 +29536,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',
@@ -29519,7 +29583,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      '
     )
   );
 };
@@ -29535,13 +29599,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',
@@ -29553,7 +29625,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 ',
@@ -29574,7 +29646,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      '
     )
   );
 };
@@ -29589,6 +29661,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' },
@@ -29598,8 +29679,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',
@@ -29625,16 +29705,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',
@@ -29646,7 +29731,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 ',
@@ -29695,10 +29780,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,
@@ -29718,7 +29811,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      '
     )
   );
 };
@@ -29732,6 +29825,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' },
@@ -29744,7 +29847,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(
@@ -29772,10 +29875,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' },
@@ -29786,9 +29898,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',
@@ -29802,7 +29914,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      '
     )
   );
 };