@mjhls/mjh-framework 1.0.241 → 1.0.243

package/README.md

@@ -1,7 +1,5 @@
 
-# mjh-framework v. 1.0.241
-
-
+# mjh-framework v. 1.0.243
 
 
 > Foundation Framework

package/dist/cjs/index.js

@@ -12608,6 +12608,11 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
       client = _ref.client,
       getSerializers = _ref.getSerializers;
 
+  var builder = index$1.imageUrlBuilder(client);
+  function urlFor(source) {
+    return builder.image(source);
+  }
+
   var router = Router.useRouter();
   //state
 
@@ -12616,15 +12621,20 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
       vidUrl = _useState2[0],
       setVidUrl = _useState2[1];
 
-  var _useState3 = React.useState(''),
+  var _useState3 = React.useState('youtube'),
       _useState4 = slicedToArray._slicedToArray(_useState3, 2),
-      series = _useState4[0],
-      setSeries = _useState4[1];
+      vidType = _useState4[0],
+      setVidType = _useState4[1];
 
-  var _useState5 = React.useState([]),
+  var _useState5 = React.useState(''),
       _useState6 = slicedToArray._slicedToArray(_useState5, 2),
-      seriesData = _useState6[0],
-      setData = _useState6[1];
+      series = _useState6[0],
+      setSeries = _useState6[1];
+
+  var _useState7 = React.useState([]),
+      _useState8 = slicedToArray._slicedToArray(_useState7, 2),
+      seriesData = _useState8[0],
+      setData = _useState8[1];
   //variables
 
 
@@ -12635,19 +12645,32 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     var params = new URL(document.location).searchParams;
     var seriesVid = params.get('seriesVid') || 1;
     var data = [];
+
     nodes.videos.forEach(function (vid) {
-      data.push({ title: vid.title, thumbnail: 'https://img.youtube.com/vi/' + YoutubeGroup.getYoutubeId(vid.url) + '/hqdefault.jpg', url: vid.url });
+      if (vid.type == 'mp4') {
+        data.push({ title: vid.title, thumbnail: urlFor(vid.thumbnail.asset), url: vid.url });
+      } else {
+        data.push({ title: vid.title, thumbnail: 'https://img.youtube.com/vi/' + YoutubeGroup.getYoutubeId(vid.url) + '/hqdefault.jpg', url: vid.url });
+      }
     });
     // if series number doesn't exist, route back to first vid of series
+
     if (data.length < seriesVid) {
       setSeries(1);
       setVidUrl(nodes.videos[0].url);
+      if (nodes.videos[0].type) {
+        setVidType(nodes.videos[0].type);
+      }
+
       var newPath = '/' + get2 + '/' + get3 + '?seriesVid=1';
       var vidState = { vid_id: seriesVid };
       window.history.pushState(vidState, '', newPath);
     } else {
       setSeries(seriesVid);
       setVidUrl(nodes.videos[seriesVid - 1].url);
+      if (nodes.videos[0].type) {
+        setVidType(nodes.videos[seriesVid - 1].type);
+      }
     }
     setData(data);
   }, []);
@@ -12717,9 +12740,14 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     React__default.createElement(
       'div',
       { className: 'video-block', style: { position: 'relative', overflow: 'hidden' } },
-      vidUrl && React__default.createElement(YouTube, { videoId: YoutubeGroup.getYoutubeId(vidUrl), opts: opts, onEnd: function onEnd(e) {
+      vidUrl && vidType == 'youtube' ? React__default.createElement(YouTube, { videoId: YoutubeGroup.getYoutubeId(vidUrl), opts: opts, onEnd: function onEnd(e) {
           return handleOnEnd(e);
-        } }),
+        } }) : React__default.createElement(
+        'video',
+        { style: { width: '100%' }, controls: true },
+        React__default.createElement('source', { src: vidUrl, type: 'video/mp4' }),
+        'Your browser does not support the video tag.'
+      ),
       React__default.createElement(
         'div',
         {
@@ -12765,7 +12793,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
         { className: 'mb-3' },
         nodes.videos[series - 1].title
       ),
-      nodes.videos[series - 1] && React__default.createElement(TaxonomyCard.BlockContent, _extends$2._extends({ serializers: getSerializers, blocks: nodes.videos[series - 1].text, imageOptions: { w: 320, h: 240, fit: 'max' } }, client.config()))
+      nodes.videos[series - 1] && nodes.videos[series - 1].text && React__default.createElement(TaxonomyCard.BlockContent, _extends$2._extends({ serializers: getSerializers, blocks: nodes.videos[series - 1].text, imageOptions: { w: 320, h: 240, fit: 'max' } }, client.config()))
     ),
     React__default.createElement(
       'style',
@@ -14440,6 +14468,168 @@ var YahooHero = function YahooHero(props) {
   );
 };
 
+var GridHero = function GridHero(props) {
+  var topArticle = props.dataRecord[0];
+  var subArticles = props.dataRecord.slice(1, 3);
+
+  var client = props.client;
+
+  var builder = index$1.imageUrlBuilder(client);
+  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;
+  }
+
+  var renderAuthor = function renderAuthor(authorDetail, index, length) {
+    if (authorDetail) {
+      var _id = authorDetail._id,
+          displayName = authorDetail.displayName,
+          url = authorDetail.url;
+
+      if (displayName && url && url.current) {
+        return React__default.createElement(
+          'div',
+          { key: _id },
+          index === 0 && React__default.createElement(
+            'span',
+            { className: 'pr-1' },
+            'By'
+          ),
+          React__default.createElement(
+            'a',
+            { href: '/authors/' + url.current, className: 'text-muted' },
+            displayName,
+            length !== index + 1 && React__default.createElement('br', null)
+          )
+        );
+      } else if (displayName) {
+        return React__default.createElement(
+          'div',
+          { key: _id },
+          index === 0 && React__default.createElement(
+            'span',
+            { className: 'pr-1' },
+            'By'
+          ),
+          React__default.createElement(
+            'span',
+            { className: 'text-muted' },
+            displayName,
+            length !== index + 1 && React__default.createElement('br', null)
+          )
+        );
+      }
+    } else return null;
+  };
+
+  return React__default.createElement(
+    'div',
+    { className: 'article-hero' },
+    React__default.createElement(
+      'div',
+      { className: 'grid-top-article' },
+      topArticleThumbnail && React__default.createElement(
+        'a',
+        { href: '/view/' + topArticle.url.current },
+        React__default.createElement(
+          'div',
+          { className: 'grid-top-article--img' },
+          React__default.createElement('img', { src: topArticleThumbnail, alt: topArticleAltText })
+        )
+      ),
+      React__default.createElement(
+        'div',
+        { className: 'grid-top-article--body' },
+        React__default.createElement(
+          'a',
+          { href: '/view/' + topArticle.url.current },
+          React__default.createElement(
+            'h1',
+            null,
+            topArticle.title
+          )
+        ),
+        React__default.createElement(
+          'p',
+          { className: 'article-date' },
+          visibilitySensor.moment(topArticle.published).format('MMMM DD, YYYY ')
+        ),
+        topArticle.authorMapping && topArticle.authorMapping.length > 0 && topArticle.authorMapping.map(function (authorDetail, index) {
+          return renderAuthor(authorDetail, index, topArticle.authorMapping.length);
+        }),
+        topArticle.summary && React__default.createElement(
+          'p',
+          { className: 'top-article-summary' },
+          entities.clean_html_1(topArticle.summary)
+        )
+      )
+    ),
+    React__default.createElement(
+      'div',
+      { className: 'grid-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(480).height(270).url();
+          articleAltText = article.thumbnail.asset.originalFileName;
+        } else if (props.thumbnail) {
+          articleThumbnail = props.thumbnail;
+        }
+
+        return React__default.createElement(
+          'div',
+          { key: index, className: 'grid-sub-article sub-grid-' + (index + 1) },
+          React__default.createElement(
+            'a',
+            { href: '/view/' + article.url.current },
+            React__default.createElement('img', { src: articleThumbnail, alt: articleAltText })
+          ),
+          React__default.createElement(
+            'div',
+            { className: 'grid-sub-article-body' },
+            React__default.createElement(
+              'a',
+              { href: '/view/' + article.url.current },
+              React__default.createElement(
+                'h2',
+                { className: 'grid-sub-article--title' },
+                article.title
+              )
+            ),
+            React__default.createElement(
+              'p',
+              { className: 'article-date' },
+              visibilitySensor.moment(article.published).format('MMMM DD, YYYY ')
+            ),
+            article.authorMapping && article.authorMapping.length > 0 && article.authorMapping.map(function (authorDetail, index) {
+              return renderAuthor(authorDetail, index, article.authorMapping.length);
+            }),
+            article.summary && React__default.createElement(
+              'p',
+              { className: 'sub-article-summary' },
+              entities.clean_html_1(article.summary)
+            )
+          )
+        );
+      })
+    ),
+    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          margin-left: 15px;\n          margin-right: 15px;\n        }\n        .grid-top-article {\n          width: 100%;\n          margin-bottom: 1rem;\n          padding-bottom: 1rem;\n          border-bottom: 5px solid var(--primary);\n          box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.2);\n        }\n        .grid-top-article img {\n          width: 100%;\n\n          max-height: 300px;\n          min-height: 275px;\n          object-fit: cover;\n          height: 112.5px;\n        }\n\n        .grid-top-article--body {\n          padding: 1.25rem;\n        }\n        .grid-top-article--body h1 {\n          color: #373a3c !important;\n          margin-bottom: 0.25rem !important;\n          font-weight: 600 !important;\n          font-size: 1.6rem;\n          font-size: 1.40625rem;\n          line-height: 1.2;\n        }\n        .grid-top-article--body p {\n          margin-bottom: 0;\n          color: #252525;\n        }\n\n        .grid-sub-article-container {\n          display: flex;\n          flex-direction: row;\n          padding-top: 1rem;\n        }\n        .grid-sub-article {\n          width: 48%;\n          margin-bottom: 1.75rem;\n        }\n        .grid-sub-article-body {\n          padding: 1.25rem;\n        }\n        @media screen and (min-width: 992px) {\n          .sub-grid-1 {\n            margin-right: 2%;\n          }\n          .sub-grid-2 {\n            margin-left: 2%;\n          }\n        }\n        .grid-sub-article img {\n          margin-right: 1rem;\n          width: 100%;\n          max-height: 240px;\n          object-fit: contain;\n        }\n        .grid-sub-article p {\n          margin-bottom: 0;\n\n          color: #373a3c;\n        }\n        .grid-sub-article .grid-sub-article--title {\n          color: #373a3c !important;\n          margin-bottom: 0.25rem !important;\n          font-weight: 600 !important;\n          font-size: 1.6rem;\n          font-size: 1.40625rem;\n          line-height: 1.2;\n        }\n        .author-text {\n          font-size: 0.9375rem;\n          font-weight: 400;\n          line-height: 1.5;\n        }\n        .author-text > span {\n          color: #868e96 !important;\n        }\n        .article-date {\n          font-style: italic;\n        }\n        .top-article-summary,\n        .sub-article-summary {\n          margin-top: 0.5rem;\n        }\n\n        @media screen and (max-width: 992px) {\n          .grid-sub-article-container {\n            flex-direction: column;\n          }\n          .grid-sub-article {\n            width: 100%;\n          }\n        }\n      '
+    )
+  );
+};
+
 /*
 Sample query
                 let references = ''
@@ -14494,7 +14684,7 @@ var RelatedContent = function RelatedContent(props) {
       dataRecord.map(function (article, index) {
         return React__default.createElement(
           'a',
-          { href: '/view/' + article.url.current, className: 'related-article' },
+          { key: index, href: '/view/' + article.url.current, className: 'related-article' },
           React__default.createElement(
             'figure',
             null,
@@ -15220,6 +15410,7 @@ exports.ConferenceArticleCard = ConferenceArticleCard;
 exports.EventsDeck = EventsDeck;
 exports.Feature = Feature;
 exports.ForbesHero = fbsHero;
+exports.GridHero = GridHero;
 exports.Hero = Hero;
 exports.HorizontalHero = HorizontalHero;
 exports.OncliveHero = OncliveHero;

package/dist/esm/index.js

@@ -12606,6 +12606,11 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
       client = _ref.client,
       getSerializers = _ref.getSerializers;
 
+  var builder = imageUrlBuilder(client);
+  function urlFor(source) {
+    return builder.image(source);
+  }
+
   var router = useRouter();
   //state
 
@@ -12614,15 +12619,20 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
       vidUrl = _useState2[0],
       setVidUrl = _useState2[1];
 
-  var _useState3 = useState(''),
+  var _useState3 = useState('youtube'),
       _useState4 = _slicedToArray(_useState3, 2),
-      series = _useState4[0],
-      setSeries = _useState4[1];
+      vidType = _useState4[0],
+      setVidType = _useState4[1];
 
-  var _useState5 = useState([]),
+  var _useState5 = useState(''),
       _useState6 = _slicedToArray(_useState5, 2),
-      seriesData = _useState6[0],
-      setData = _useState6[1];
+      series = _useState6[0],
+      setSeries = _useState6[1];
+
+  var _useState7 = useState([]),
+      _useState8 = _slicedToArray(_useState7, 2),
+      seriesData = _useState8[0],
+      setData = _useState8[1];
   //variables
 
 
@@ -12633,19 +12643,32 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     var params = new URL(document.location).searchParams;
     var seriesVid = params.get('seriesVid') || 1;
     var data = [];
+
     nodes.videos.forEach(function (vid) {
-      data.push({ title: vid.title, thumbnail: 'https://img.youtube.com/vi/' + getYoutubeId(vid.url) + '/hqdefault.jpg', url: vid.url });
+      if (vid.type == 'mp4') {
+        data.push({ title: vid.title, thumbnail: urlFor(vid.thumbnail.asset), url: vid.url });
+      } else {
+        data.push({ title: vid.title, thumbnail: 'https://img.youtube.com/vi/' + getYoutubeId(vid.url) + '/hqdefault.jpg', url: vid.url });
+      }
     });
     // if series number doesn't exist, route back to first vid of series
+
     if (data.length < seriesVid) {
       setSeries(1);
       setVidUrl(nodes.videos[0].url);
+      if (nodes.videos[0].type) {
+        setVidType(nodes.videos[0].type);
+      }
+
       var newPath = '/' + get2 + '/' + get3 + '?seriesVid=1';
       var vidState = { vid_id: seriesVid };
       window.history.pushState(vidState, '', newPath);
     } else {
       setSeries(seriesVid);
       setVidUrl(nodes.videos[seriesVid - 1].url);
+      if (nodes.videos[0].type) {
+        setVidType(nodes.videos[seriesVid - 1].type);
+      }
     }
     setData(data);
   }, []);
@@ -12715,9 +12738,14 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     React__default.createElement(
       'div',
       { className: 'video-block', style: { position: 'relative', overflow: 'hidden' } },
-      vidUrl && React__default.createElement(YouTube, { videoId: getYoutubeId(vidUrl), opts: opts, onEnd: function onEnd(e) {
+      vidUrl && vidType == 'youtube' ? React__default.createElement(YouTube, { videoId: getYoutubeId(vidUrl), opts: opts, onEnd: function onEnd(e) {
           return handleOnEnd(e);
-        } }),
+        } }) : React__default.createElement(
+        'video',
+        { style: { width: '100%' }, controls: true },
+        React__default.createElement('source', { src: vidUrl, type: 'video/mp4' }),
+        'Your browser does not support the video tag.'
+      ),
       React__default.createElement(
         'div',
         {
@@ -12763,7 +12791,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
         { className: 'mb-3' },
         nodes.videos[series - 1].title
       ),
-      nodes.videos[series - 1] && React__default.createElement(BlockContent, _extends$2({ serializers: getSerializers, blocks: nodes.videos[series - 1].text, imageOptions: { w: 320, h: 240, fit: 'max' } }, client.config()))
+      nodes.videos[series - 1] && nodes.videos[series - 1].text && React__default.createElement(BlockContent, _extends$2({ serializers: getSerializers, blocks: nodes.videos[series - 1].text, imageOptions: { w: 320, h: 240, fit: 'max' } }, client.config()))
     ),
     React__default.createElement(
       'style',
@@ -14438,6 +14466,168 @@ var YahooHero = function YahooHero(props) {
   );
 };
 
+var GridHero = function GridHero(props) {
+  var topArticle = props.dataRecord[0];
+  var subArticles = props.dataRecord.slice(1, 3);
+
+  var client = props.client;
+
+  var builder = imageUrlBuilder(client);
+  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;
+  }
+
+  var renderAuthor = function renderAuthor(authorDetail, index, length) {
+    if (authorDetail) {
+      var _id = authorDetail._id,
+          displayName = authorDetail.displayName,
+          url = authorDetail.url;
+
+      if (displayName && url && url.current) {
+        return React__default.createElement(
+          'div',
+          { key: _id },
+          index === 0 && React__default.createElement(
+            'span',
+            { className: 'pr-1' },
+            'By'
+          ),
+          React__default.createElement(
+            'a',
+            { href: '/authors/' + url.current, className: 'text-muted' },
+            displayName,
+            length !== index + 1 && React__default.createElement('br', null)
+          )
+        );
+      } else if (displayName) {
+        return React__default.createElement(
+          'div',
+          { key: _id },
+          index === 0 && React__default.createElement(
+            'span',
+            { className: 'pr-1' },
+            'By'
+          ),
+          React__default.createElement(
+            'span',
+            { className: 'text-muted' },
+            displayName,
+            length !== index + 1 && React__default.createElement('br', null)
+          )
+        );
+      }
+    } else return null;
+  };
+
+  return React__default.createElement(
+    'div',
+    { className: 'article-hero' },
+    React__default.createElement(
+      'div',
+      { className: 'grid-top-article' },
+      topArticleThumbnail && React__default.createElement(
+        'a',
+        { href: '/view/' + topArticle.url.current },
+        React__default.createElement(
+          'div',
+          { className: 'grid-top-article--img' },
+          React__default.createElement('img', { src: topArticleThumbnail, alt: topArticleAltText })
+        )
+      ),
+      React__default.createElement(
+        'div',
+        { className: 'grid-top-article--body' },
+        React__default.createElement(
+          'a',
+          { href: '/view/' + topArticle.url.current },
+          React__default.createElement(
+            'h1',
+            null,
+            topArticle.title
+          )
+        ),
+        React__default.createElement(
+          'p',
+          { className: 'article-date' },
+          moment(topArticle.published).format('MMMM DD, YYYY ')
+        ),
+        topArticle.authorMapping && topArticle.authorMapping.length > 0 && topArticle.authorMapping.map(function (authorDetail, index) {
+          return renderAuthor(authorDetail, index, topArticle.authorMapping.length);
+        }),
+        topArticle.summary && React__default.createElement(
+          'p',
+          { className: 'top-article-summary' },
+          clean_html_1(topArticle.summary)
+        )
+      )
+    ),
+    React__default.createElement(
+      'div',
+      { className: 'grid-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(480).height(270).url();
+          articleAltText = article.thumbnail.asset.originalFileName;
+        } else if (props.thumbnail) {
+          articleThumbnail = props.thumbnail;
+        }
+
+        return React__default.createElement(
+          'div',
+          { key: index, className: 'grid-sub-article sub-grid-' + (index + 1) },
+          React__default.createElement(
+            'a',
+            { href: '/view/' + article.url.current },
+            React__default.createElement('img', { src: articleThumbnail, alt: articleAltText })
+          ),
+          React__default.createElement(
+            'div',
+            { className: 'grid-sub-article-body' },
+            React__default.createElement(
+              'a',
+              { href: '/view/' + article.url.current },
+              React__default.createElement(
+                'h2',
+                { className: 'grid-sub-article--title' },
+                article.title
+              )
+            ),
+            React__default.createElement(
+              'p',
+              { className: 'article-date' },
+              moment(article.published).format('MMMM DD, YYYY ')
+            ),
+            article.authorMapping && article.authorMapping.length > 0 && article.authorMapping.map(function (authorDetail, index) {
+              return renderAuthor(authorDetail, index, article.authorMapping.length);
+            }),
+            article.summary && React__default.createElement(
+              'p',
+              { className: 'sub-article-summary' },
+              clean_html_1(article.summary)
+            )
+          )
+        );
+      })
+    ),
+    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          margin-left: 15px;\n          margin-right: 15px;\n        }\n        .grid-top-article {\n          width: 100%;\n          margin-bottom: 1rem;\n          padding-bottom: 1rem;\n          border-bottom: 5px solid var(--primary);\n          box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.2);\n        }\n        .grid-top-article img {\n          width: 100%;\n\n          max-height: 300px;\n          min-height: 275px;\n          object-fit: cover;\n          height: 112.5px;\n        }\n\n        .grid-top-article--body {\n          padding: 1.25rem;\n        }\n        .grid-top-article--body h1 {\n          color: #373a3c !important;\n          margin-bottom: 0.25rem !important;\n          font-weight: 600 !important;\n          font-size: 1.6rem;\n          font-size: 1.40625rem;\n          line-height: 1.2;\n        }\n        .grid-top-article--body p {\n          margin-bottom: 0;\n          color: #252525;\n        }\n\n        .grid-sub-article-container {\n          display: flex;\n          flex-direction: row;\n          padding-top: 1rem;\n        }\n        .grid-sub-article {\n          width: 48%;\n          margin-bottom: 1.75rem;\n        }\n        .grid-sub-article-body {\n          padding: 1.25rem;\n        }\n        @media screen and (min-width: 992px) {\n          .sub-grid-1 {\n            margin-right: 2%;\n          }\n          .sub-grid-2 {\n            margin-left: 2%;\n          }\n        }\n        .grid-sub-article img {\n          margin-right: 1rem;\n          width: 100%;\n          max-height: 240px;\n          object-fit: contain;\n        }\n        .grid-sub-article p {\n          margin-bottom: 0;\n\n          color: #373a3c;\n        }\n        .grid-sub-article .grid-sub-article--title {\n          color: #373a3c !important;\n          margin-bottom: 0.25rem !important;\n          font-weight: 600 !important;\n          font-size: 1.6rem;\n          font-size: 1.40625rem;\n          line-height: 1.2;\n        }\n        .author-text {\n          font-size: 0.9375rem;\n          font-weight: 400;\n          line-height: 1.5;\n        }\n        .author-text > span {\n          color: #868e96 !important;\n        }\n        .article-date {\n          font-style: italic;\n        }\n        .top-article-summary,\n        .sub-article-summary {\n          margin-top: 0.5rem;\n        }\n\n        @media screen and (max-width: 992px) {\n          .grid-sub-article-container {\n            flex-direction: column;\n          }\n          .grid-sub-article {\n            width: 100%;\n          }\n        }\n      '
+    )
+  );
+};
+
 /*
 Sample query
                 let references = ''
@@ -14492,7 +14682,7 @@ var RelatedContent = function RelatedContent(props) {
       dataRecord.map(function (article, index) {
         return React__default.createElement(
           'a',
-          { href: '/view/' + article.url.current, className: 'related-article' },
+          { key: index, href: '/view/' + article.url.current, className: 'related-article' },
           React__default.createElement(
             'figure',
             null,
@@ -15172,4 +15362,4 @@ var _initialiseProps = function _initialiseProps() {
   };
 };
 
-export { AD300x250, AD300x250x600, ADFooter, AccordionPanel, AdSlotsProvider, AlphabeticList, ArticleDetailDropdown, ArticleQueue, Breadcrumbs$1 as Breadcrumbs, CMEDeck, ConferenceArticleCard, EventsDeck, Feature, fbsHero as ForbesHero, Hero, HorizontalHero, OncliveHero, OncliveLargeHero, PdfDownload, RelatedContent, RelatedTopicsDropdown, SetCookie, SocialShare$1 as SocialShare, VerticalHero, YahooHero, getSerializers };
+export { AD300x250, AD300x250x600, ADFooter, AccordionPanel, AdSlotsProvider, AlphabeticList, ArticleDetailDropdown, ArticleQueue, Breadcrumbs$1 as Breadcrumbs, CMEDeck, ConferenceArticleCard, EventsDeck, Feature, fbsHero as ForbesHero, GridHero, Hero, HorizontalHero, OncliveHero, OncliveLargeHero, PdfDownload, RelatedContent, RelatedTopicsDropdown, SetCookie, SocialShare$1 as SocialShare, VerticalHero, YahooHero, getSerializers };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mjhls/mjh-framework",
-  "version": "1.0.241",
+  "version": "1.0.243",
   "description": "Foundation Framework",
   "author": "mjh-framework",
   "license": "MIT",