@mjhls/mjh-framework 1.0.696-1034 → 1.0.696-1034-2

package/README.md

@@ -1,5 +1,5 @@
 
-# mjh-framework v. 1.0.696-1034
+# mjh-framework v. 1.0.696-1034-2
 
 > Foundation Framework 
 

package/dist/cjs/ExternalResources.js

@@ -48,11 +48,12 @@ require('./iconBase-68959171.js');
 require('./index.esm-90433435.js');
 var Button = _interopDefault(require('react-bootstrap/Button'));
 var index$3 = require('./index-5be2866f.js');
-var getSerializers = require('./index-8e495016.js');
+var getSerializers = require('./index-7a6308f1.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-156bd4d6.js');
 require('react-bootstrap/Pagination');
 require('next/head');
+require('react-bootstrap/Figure');
 
 var ExternalResources = function ExternalResources(props) {
   var resources = props.resources,

package/dist/cjs/PartnerDetailListing.js

@@ -57,11 +57,12 @@ var QueueDeckExpanded = require('./QueueDeckExpanded.js');
 require('./iconBase-68959171.js');
 require('./index.esm-90433435.js');
 require('react-bootstrap/Button');
-var getSerializers = require('./index-8e495016.js');
+var getSerializers = require('./index-7a6308f1.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-156bd4d6.js');
 require('react-bootstrap/Pagination');
 require('next/head');
+require('react-bootstrap/Figure');
 require('react-bootstrap/Carousel');
 var Feature = require('./Feature.js');
 require('react-bootstrap/Breadcrumb');

package/dist/cjs/VideoSeriesListing.js

@@ -52,25 +52,27 @@ var VideoSeriesListing = function (_React$Component) {
 
     return _ret = (_temp = (_this = inherits._possibleConstructorReturn(this, (_ref = VideoSeriesListing.__proto__ || inherits._Object$getPrototypeOf(VideoSeriesListing)).call.apply(_ref, [this].concat(args))), _this), _this.page = _this.props.page, _this.mapping = _this.props.mapping, _this.data = _this.props.dataRecord, _this.query = _this.props.query, _this.params = _this.props.params, _this.today = moment.moment().utc().format(), _this.dataArr = [_this.data], _this.defaultImage = _this.props.defaultImage ? _this.props.defaultImage : '/placeholder.jpg', _this.state = {
       data: _this.dataArr.map(function (item) {
-        var tempObj = item;
-        if (tempObj.body) {
-          var filteredBody = tempObj.body.map(function (item) {
-            if (item._type === 'articleSeries') {
-              var innerObj = item;
-              var filteredArticles = innerObj.articles.filter(function (article) {
-                if ((article.is_visible === true || !article.hasOwnProperty('is_visible')) && (_this.today >= article.published || !article.hasOwnProperty('published'))) {
-                  return article;
-                }
-              });
-              innerObj.body = filteredArticles;
-              return innerObj;
-            } else {
-              return item;
-            }
-          });
+        var tempObj = item.map(function (arrItem) {
+          if (arrItem.body) {
+            var filteredBody = arrItem.body.map(function (item) {
+              if (item._type === 'youtubeGallery') {
+                var innerObj = item;
+                var filteredArticles = innerObj.videos.filter(function (video) {
+                  if ((video.is_visible === true || !video.hasOwnProperty('is_visible')) && (_this.today >= video.published || !video.hasOwnProperty('published'))) {
+                    return video;
+                  }
+                });
+                innerObj.videos = filteredArticles;
+                return innerObj;
+              } else {
+                return item;
+              }
+            });
 
-          tempObj.body = filteredBody;
-        }
+            arrItem.body = filteredBody;
+          }
+          return arrItem;
+        });
         return tempObj;
       }),
       per: _this.params ? _this.params.to : 2,

package/dist/cjs/View.js

@@ -51,11 +51,12 @@ require('./index.esm-90433435.js');
 var Button = _interopDefault(require('react-bootstrap/Button'));
 var defineProperty$1 = require('./defineProperty-55548b25.js');
 var Form = _interopDefault(require('react-bootstrap/Form'));
-var getSerializers = require('./index-8e495016.js');
+var getSerializers = require('./index-7a6308f1.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-156bd4d6.js');
 require('react-bootstrap/Pagination');
 var Head = _interopDefault(require('next/head'));
+require('react-bootstrap/Figure');
 require('react-share');
 var SocialShare = require('./SocialShare.js');
 var FormControl = _interopDefault(require('react-bootstrap/FormControl'));
@@ -819,7 +820,7 @@ var Article = function Article(props) {
           partialVisibility: true,
           offset: { bottom: 100, top: containerHeight - 100 },
           onChange: function onChange(isVisible) {
-            if (isVisible) {
+            if (isVisible && queueData.length > 1) {
               onChangeArticle(url, meta);
               setVisibleFlag(function () {
                 return true;

package/dist/cjs/YoutubeGroup.js

@@ -74,7 +74,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
     var tileHeight = tileArray.current.map(function (tile) {
       return tile.scrollHeight;
     });
-    console.log(tileArray.current);
+
     for (var ele in tileArray.current) {
       var eleHeight = tileHeight[ele] < 185 ? 185 : tileHeight[ele];
       tileArray.current[ele].style.height = eleHeight + 'px';

package/dist/cjs/getSerializers.js

@@ -43,11 +43,12 @@ require('react-bootstrap');
 require('./iconBase-68959171.js');
 require('./index.esm-90433435.js');
 require('react-bootstrap/Button');
-var getSerializers = require('./index-8e495016.js');
+var getSerializers = require('./index-7a6308f1.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-156bd4d6.js');
 require('react-bootstrap/Pagination');
 require('next/head');
+require('react-bootstrap/Figure');
 
 
 

package/dist/cjs/{index-8e495016.js → index-7a6308f1.js}

@@ -35,6 +35,7 @@ var util = require('./util-f2c1b65b.js');
 var brightcoveReactPlayerLoader_es = require('./brightcove-react-player-loader.es-156bd4d6.js');
 var Pagination = _interopDefault(require('react-bootstrap/Pagination'));
 var Head = _interopDefault(require('next/head'));
+var Figure$1 = _interopDefault(require('react-bootstrap/Figure'));
 
 var urlFor = function urlFor(source, builder) {
   return builder.image(source).auto('format');
@@ -7068,6 +7069,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
   var today = moment.moment().utc().format();
 
   var Videos = nodes.videos.filter(function (video) {
+    console.dir(video);
     if ((video.is_visible === true || !video.hasOwnProperty('is_visible')) && (today >= video.published || !video.hasOwnProperty('published'))) {
       return video;
     }
@@ -8051,12 +8053,65 @@ var ArticleSeries = function ArticleSeries(_ref) {
   var articleContainerRef = React.useRef(null);
   var arrowRef = React.useRef(null);
 
-  var _useState = React.useState(0),
+  var _ref2 = router && router.asPath && router.asPath.split('?')[1] ? React.useState(router.asPath.split('=')[1]) : React.useState(null),
+      _ref3 = slicedToArray._slicedToArray(_ref2, 2),
+      selectedArticle = _ref3[0],
+      setSelectedArticle = _ref3[1];
+
+  var _useState = React.useState(false),
       _useState2 = slicedToArray._slicedToArray(_useState, 2),
-      contentWidth = _useState2[0],
-      setContentWidth = _useState2[1];
+      firstLoad = _useState2[0],
+      setFirstLoad = _useState2[1];
+
+  var _useState3 = React.useState(null),
+      _useState4 = slicedToArray._slicedToArray(_useState3, 2),
+      currentURL = _useState4[0],
+      setCurrentURL = _useState4[1];
+
+  var _useState5 = React.useState(null),
+      _useState6 = slicedToArray._slicedToArray(_useState5, 2),
+      currentTitle = _useState6[0],
+      setCurrentTitle = _useState6[1];
+
+  var _useState7 = React.useState(null),
+      _useState8 = slicedToArray._slicedToArray(_useState7, 2),
+      currentSummary = _useState8[0],
+      setCurrentSummary = _useState8[1];
+
+  var _useState9 = React.useState(null),
+      _useState10 = slicedToArray._slicedToArray(_useState9, 2),
+      currentThumbnail = _useState10[0],
+      setCurrentThumbnail = _useState10[1];
+
+  var _useState11 = React.useState(null),
+      _useState12 = slicedToArray._slicedToArray(_useState11, 2),
+      sensorVisible = _useState12[0],
+      setSensorVisible = _useState12[1];
+
+  var _useState13 = React.useState(0),
+      _useState14 = slicedToArray._slicedToArray(_useState13, 2),
+      contentWidth = _useState14[0],
+      setContentWidth = _useState14[1];
 
-  var upArrowClicked = false;
+  var _useState15 = React.useState(false),
+      _useState16 = slicedToArray._slicedToArray(_useState15, 2),
+      upArrowClicked = _useState16[0],
+      setUpArrowClicked = _useState16[1];
+
+  var _useState17 = React.useState(null),
+      _useState18 = slicedToArray._slicedToArray(_useState17, 2),
+      articleScrollHeight = _useState18[0],
+      setArticleScrollHeight = _useState18[1];
+
+  var _useState19 = React.useState(false),
+      _useState20 = slicedToArray._slicedToArray(_useState19, 2),
+      articleClicked = _useState20[0],
+      setArticleClicked = _useState20[1];
+
+  var _useState21 = React.useState(null),
+      _useState22 = slicedToArray._slicedToArray(_useState21, 2),
+      articleIndex = _useState22[0],
+      setArticleIndex = _useState22[1];
 
   var Articles = nodes.articles.filter(function (article) {
     if ((article.is_visible === true || !article.hasOwnProperty('is_visible')) && today >= article.published) {
@@ -8089,7 +8144,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
           'a',
           { onClick: function onClick(e) {
               return articleCardClickHandler(e);
-            }, 'data-articleid': '' + article.param.current },
+            }, 'data-cardlabel': '' + articleLabel, 'data-articleIndex': '' + index, 'data-articleid': '' + article.param.current },
           React__default.createElement(
             'div',
             { className: 'prevNext-thumbnail' },
@@ -8119,43 +8174,17 @@ var ArticleSeries = function ArticleSeries(_ref) {
     });
   };
 
-  var _ref2 = router && router.asPath && router.asPath.split('?')[1] ? React.useState(router.asPath.split('=')[1]) : React.useState(null),
-      _ref3 = slicedToArray._slicedToArray(_ref2, 2),
-      selectedArticle = _ref3[0],
-      setSelectedArticle = _ref3[1];
-
-  var _useState3 = React.useState(false),
-      _useState4 = slicedToArray._slicedToArray(_useState3, 2),
-      firstLoad = _useState4[0],
-      setFirstLoad = _useState4[1];
-
-  var _useState5 = React.useState(null),
-      _useState6 = slicedToArray._slicedToArray(_useState5, 2),
-      currentURL = _useState6[0],
-      setCurrentURL = _useState6[1];
-
-  var _useState7 = React.useState(null),
-      _useState8 = slicedToArray._slicedToArray(_useState7, 2),
-      currentTitle = _useState8[0],
-      setCurrentTitle = _useState8[1];
-
-  var _useState9 = React.useState(null),
-      _useState10 = slicedToArray._slicedToArray(_useState9, 2),
-      currentSummary = _useState10[0],
-      setCurrentSummary = _useState10[1];
-
-  var _useState11 = React.useState(null),
-      _useState12 = slicedToArray._slicedToArray(_useState11, 2),
-      currentThumbnail = _useState12[0],
-      setCurrentThumbnail = _useState12[1];
-
   var articleCardClickHandler = function articleCardClickHandler(e) {
     e.preventDefault();
     var articleClicked = e.currentTarget.dataset.articleid;
+    setArticleClicked(true);
+    setArticleIndex(e.currentTarget.dataset.articleindex);
+    setSensorVisible(false);
     setSelectedArticle(articleClicked);
-    scrollToArticle(articleClicked);
+    scrollToArticle(articleClicked, e.currentTarget.dataset.cardlabel);
+    arrowRef.current.style.visibility = 'hidden';
   };
-  var scrollToArticle = function scrollToArticle(id) {
+  var scrollToArticle = function scrollToArticle(id, cardLabel) {
     var localArticleID = id ? id : selectedArticle;
     var findArticle = function findArticle(ref) {
       if (ref) {
@@ -8163,13 +8192,18 @@ var ArticleSeries = function ArticleSeries(_ref) {
       }
       return false;
     };
+    console.log('cardLabel', cardLabel);
+    var isNextPrev = cardLabel === 'Next' || 'Previous' ? true : false;
+    console.log(isNextPrev);
     var indexOfRef = refArray.current.findIndex(findArticle);
-
     if (indexOfRef >= 0) {
       var newOffsetTop = !firstLoad ? refArray.current[indexOfRef].wraperRef.current.offsetTop : refArray.current[indexOfRef].wraperRef.current.offsetTop + document.getElementsByTagName('header')[0].clientHeight;
       // console.dir(refArray.current[indexOfRef].wraperRef.current)
       // console.log(document.getElementsByTagName('header')[0].clientHeight)
       // console.log(refArray.current[indexOfRef].wraperRef.current.offsetTop)
+
+      setArticleScrollHeight(newOffsetTop);
+
       window.scrollTo({ top: newOffsetTop, behavior: 'smooth' });
       //refArray.current[indexOfRef].wraperRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' })
     }
@@ -8182,6 +8216,12 @@ var ArticleSeries = function ArticleSeries(_ref) {
     }
   };
 
+  React.useEffect(function () {
+    if (articleClicked === true) {
+      onChangeArticle(Articles[articleIndex].param.current, 'top', Articles[articleIndex].title, Articles[articleIndex].summary, urlFor(Articles[articleIndex].thumbnail.asset).url());
+    }
+  }, [articleClicked]);
+
   var onChangeArticle = function onChangeArticle(path, visibility, title, summary, shareImage) {
     var currentPath = window && window.location && window.location.pathname ? window.location.pathname.replace('?seriesArticle=', '') : '';
     var newPath = (router && router.asPath && router.asPath.split('?')[0]) + '?seriesArticle=' + path;
@@ -8221,7 +8261,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
     var window = e.currentTarget;
     if (preVscroll > window.scrollY) {
       isScrollDown = false;
-      if (window.scrollY > articleContainerRef.current.offsetTop && preVscroll !== 0 && !upArrowClicked) {
+      if (window.scrollY > articleContainerRef.current.offsetTop && preVscroll !== 0 && upArrowClicked === false && articleClicked === false) {
         arrowRef.current.style.visibility = 'visible';
       }
     } else if (preVscroll < window.scrollY) {
@@ -8235,8 +8275,15 @@ var ArticleSeries = function ArticleSeries(_ref) {
     if (preVscroll <= articleContainerRef.current.offsetTop) {
       arrowRef.current.style.visibility = 'hidden';
     }
+    if (window.scrollY >= articleScrollHeight && articleClicked === true) {
+      setArticleClicked(false);
+      setSensorVisible(true);
+      setUpArrowClicked(false);
+    }
     if (window.scrollY === 0 && upArrowClicked === true) {
-      upArrowClicked = false;
+      setUpArrowClicked(false);
+      setSensorVisible(true);
+      setArticleClicked(false);
     }
   };
 
@@ -8250,6 +8297,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
   React.useLayoutEffect(function () {
     //console.log('useLayoutEffect')
     if (!firstLoad) {
+      setUpArrowClicked(false);
       if (main.main_39) {
         grabLoadedAds();
       } else {
@@ -8292,26 +8340,34 @@ var ArticleSeries = function ArticleSeries(_ref) {
     }
   };
 
-  var handleArrowClick = function handleArrowClick() {
-    var newPath = router.asPath.split('?')[0];
-    var title = nodes.seriesTitle;
-    isScrollDown = true;
-    upArrowClicked = true;
-    arrowRef.current.style.visibility = 'hidden';
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-    window.history.pushState({}, '', newPath);
-    document.title = title;
+  React.useEffect(function () {
+    console.log('sensorVisible Effect');
+    if (sensorVisible === false && articleClicked === false) {
+      var newPath = router.asPath.split('?')[0];
+      var title = nodes.seriesTitle;
+      isScrollDown = true;
+      setUpArrowClicked(true);
+      arrowRef.current.style.visibility = 'hidden';
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+      window.history.pushState({}, '', newPath);
+      document.title = title;
 
-    setCurrentURL(newPath);
-    setCurrentTitle(title);
-    if (rootArticle) {
-      setCurrentSummary(rootArticle.summary ? rootArticle.summary : '');
-      setCurrentThumbnail(urlFor(rootArticle.thumbnail.asset).url());
-    } else {
-      setCurrentSummary('');
-      setCurrentThumbnail('');
+      setCurrentURL(newPath);
+      setCurrentTitle(title);
+      if (rootArticle) {
+        setCurrentSummary(rootArticle.summary ? rootArticle.summary : '');
+        setCurrentThumbnail(urlFor(rootArticle.thumbnail.asset).url());
+      } else {
+        setCurrentSummary('');
+        setCurrentThumbnail('');
+      }
+      refreshAD(newPath);
     }
-    refreshAD(newPath);
+  }, [sensorVisible]);
+
+  var handleArrowClick = function handleArrowClick() {
+    console.log('handleArrowClick');
+    setSensorVisible(false);
   };
 
   return React__default.createElement(
@@ -8375,6 +8431,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
           React__default.createElement(
             InscreenSensor,
             {
+              visible: sensorVisible,
               offSetTop: 120,
               className: 'inscreen-wrapper',
               key: '' + article.param.current,
@@ -8383,7 +8440,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
                 return refArray.current[index] = ele;
               },
               onChange: function onChange(visible) {
-                if (!upArrowClicked) {
+                if (upArrowClicked === false && articleClicked === false) {
                   if (visible === 'top' || visible === 'bottom' || visible === 'small-top') {
                     onChangeArticle(article.param.current, visible, article.title, article.summary, urlFor(article.thumbnail.asset).url());
                   }
@@ -8556,12 +8613,14 @@ var FigureComponent = function FigureComponent(props) {
   if (typeof window === 'undefined') return null;
 
   var node = props.node,
-      client = props.client;
+      client = props.client,
+      getSerializers = props.getSerializers;
 
 
   if (!node.asset) return null;
 
   var caption = node.caption,
+      imgcaption = node.imgcaption,
       alt = node.alt,
       blank = node.blank,
       link = node.link,
@@ -8613,6 +8672,18 @@ var FigureComponent = function FigureComponent(props) {
     imageWidth = '100%';
   }
 
+  var FigureCaption = React.useCallback(function () {
+    if (imgcaption && imgcaption.length > 0) {
+      return React__default.createElement(
+        'div',
+        { className: 'figure-caption' },
+        React__default.createElement(BlockContent.BlockContent, { blocks: imgcaption, serializers: getSerializers })
+      );
+    } else if (caption) {
+      return React__default.createElement('div', { dangerouslySetInnerHTML: { __html: '<span class=\'figure-caption\'>' + caption + '</span>' } });
+    } else return null;
+  }, [caption, imgcaption]);
+
   var figureStyle = disableTextWrap ? { maxWidth: '100%', width: imageWidth, margin: imageFloat !== 'none' ? imageFloat === 'left' ? '' : '0 0 0 auto' : '' } : {
     width: imageWidth,
     maxWidth: '100%',
@@ -8625,17 +8696,17 @@ var FigureComponent = function FigureComponent(props) {
     React__default.Fragment,
     null,
     React__default.createElement(
-      reactBootstrap.Figure,
+      Figure$1,
       { className: '' + class_name, style: figureStyle },
       link ? React__default.createElement(
         'a',
         { target: blank ? '_blank' : '_self', href: link },
-        React__default.createElement(reactBootstrap.Figure.Image, { style: { maxWidth: '100%' }, className: 'figure-image', src: urlFor$3(node, client).url(), alt: alt && alt }),
-        caption && React__default.createElement('div', { dangerouslySetInnerHTML: { __html: '<span class=\'figure-caption\'>' + caption + '</span>' } })
+        React__default.createElement(Figure$1.Image, { style: { maxWidth: '100%' }, className: 'figure-image', src: urlFor$3(node, client).url(), alt: alt && alt }),
+        React__default.createElement(FigureCaption, null)
       ) : React__default.createElement(
         React__default.Fragment,
         null,
-        React__default.createElement(reactBootstrap.Figure.Image, {
+        React__default.createElement(Figure$1.Image, {
           style: { maxWidth: '100%', cursor: 'pointer', width: 'auto' },
           className: 'figure-image',
           src: urlFor$3(node, client).url(),
@@ -8645,7 +8716,7 @@ var FigureComponent = function FigureComponent(props) {
             setShowLightbox(true);
           }
         }),
-        caption && React__default.createElement('div', { dangerouslySetInnerHTML: { __html: '<span class=\'figure-caption\'>' + caption + '</span>' } })
+        React__default.createElement(FigureCaption, null)
       ),
       React__default.createElement(LightBox, {
         showLightbox: showLightbox,
@@ -8659,7 +8730,7 @@ var FigureComponent = function FigureComponent(props) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        .figure-caption {\n          font-size: 90%;\n          color: #6c757d;\n        }\n      '
+      '\n        .figure-caption,\n        .figure-caption h1,\n        .figure-caption h2,\n        .figure-caption h3,\n        .figure-caption h4,\n        .figure-caption h5,\n        .figure-caption h6,\n        .figure-caption p,\n        .figure-caption ul {\n          color: #6c757d;\n          font-size: 0.875rem;\n        }\n      '
     )
   );
 };
@@ -8688,7 +8759,8 @@ function useOutsideAlerter(ref, container, setOpenImg, setOpenImgSrc) {
 
 var MultiFigure = function MultiFigure(props) {
   var images = props.node.images,
-      client = props.client;
+      client = props.client,
+      getSerializers = props.getSerializers;
 
   var _useState = React.useState(false),
       _useState2 = slicedToArray._slicedToArray(_useState, 2),
@@ -8703,16 +8775,32 @@ var MultiFigure = function MultiFigure(props) {
   var lightboxImage = React.useRef(null);
   var lightboxContainer = React.useRef(null);
   useOutsideAlerter(lightboxImage, lightboxContainer, setOpenImg, setOpenImgSrc);
+
+  var FigureCaption = function FigureCaption(_ref) {
+    var caption = _ref.caption,
+        imgcaption = _ref.imgcaption;
+
+    if (imgcaption && imgcaption.length > 0) {
+      return React__default.createElement(
+        'div',
+        { className: 'multi-figure-caption' },
+        React__default.createElement(BlockContent.BlockContent, { blocks: imgcaption, serializers: getSerializers })
+      );
+    } else if (caption) {
+      return React__default.createElement('div', { dangerouslySetInnerHTML: { __html: '<span class=\'multi-figure-caption\'>' + caption + '</span>' } });
+    } else return null;
+  };
+
   if (images && images.length > 0) {
     return React__default.createElement(
       'div',
       { className: 'multi-figure-container' },
       React__default.createElement(
-        reactBootstrap.Row,
+        Row,
         { noGutters: true },
         images.map(function (image, index) {
           return React__default.createElement(
-            reactBootstrap.Col,
+            Col,
             { xs: 12, md: 12 / images.length, key: index },
             image.link ? React__default.createElement(
               'a',
@@ -8725,11 +8813,7 @@ var MultiFigure = function MultiFigure(props) {
                   { once: true },
                   React__default.createElement('img', { 'images-count': images.length, className: 'multi-figure-image', src: urlFor$4(image.asset, client).url(), alt: image.alt })
                 ),
-                image.caption && React__default.createElement(
-                  'span',
-                  { className: 'multi-figure-caption' },
-                  image.caption
-                )
+                React__default.createElement(FigureCaption, { caption: image.caption, imgcaption: image.imgcaption })
               )
             ) : React__default.createElement(
               'div',
@@ -8748,11 +8832,7 @@ var MultiFigure = function MultiFigure(props) {
                   }
                 })
               ),
-              image.caption && React__default.createElement(
-                'span',
-                { className: 'multi-figure-caption' },
-                image.caption
-              )
+              React__default.createElement(FigureCaption, { caption: image.caption, imgcaption: image.imgcaption })
             )
           );
         })
@@ -8765,7 +8845,7 @@ var MultiFigure = function MultiFigure(props) {
       React__default.createElement(
         'style',
         { jsx: 'true' },
-        '\n          .multi-figure-container {\n            margin-bottom: 1rem;\n          }\n          .multi-figure-image {\n            width: 100%;\n            height: auto;\n            object-fit: cover;\n          }\n          .multi-figure-image-container {\n            padding-right: 0.5rem;\n          }\n          /* Small devices (portrait tablets and  phones, 767px and down) */\n          @media (max-width: 767px) {\n            .multi-figure-image-container {\n              margin-bottom: 1rem;\n            }\n          }\n\n          /* Medium devices (landscape tablets, 768px and up) */\n          @media (min-width: 768px) {\n            .multi-figure-image[images-count=\'4\'] {\n              height: 100px;\n            }\n            .multi-figure-image[images-count=\'3\'] {\n              height: 130px;\n            }\n            .multi-figure-image[images-count=\'2\'] {\n              height: 200px;\n            }\n            .multi-figure-container [class*=\'col-\'] + [class*=\'col-\'] {\n              padding-left: 0.75rem;\n            }\n          }\n\n          /* Large devices (laptops/desktops, 992px and up) */\n          @media (min-width: 992px) {\n            .multi-figure-image[images-count=\'4\'] {\n              height: 150px;\n            }\n            .multi-figure-image[images-count=\'3\'] {\n              height: 200px;\n            }\n            .multi-figure-image[images-count=\'2\'] {\n              height: 300px;\n            }\n          }\n\n          .multi-figure-caption {\n            font-size: 90%;\n            color: #6c757d;\n          }\n\n          /* Styles the lightbox, removes it from sight and adds the fade-in transition */\n\n          .lightbox-target {\n            position: fixed;\n            top: -100%;\n            width: 100%;\n            background: rgba(0, 0, 0, 0.7);\n            width: 100%;\n            opacity: 0;\n            -webkit-transition: opacity 0.5s ease-in-out;\n            -moz-transition: opacity 0.5s ease-in-out;\n            -o-transition: opacity 0.5s ease-in-out;\n            transition: opacity 0.5s ease-in-out;\n            overflow: hidden;\n          }\n\n          .lightbox-target.close {\n            opacity: 0;\n          }\n\n          /* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */\n\n          .lightbox-target img {\n            margin: auto;\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            max-height: 0%;\n            max-width: 0%;\n            border: 3px solid white;\n            box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);\n            box-sizing: border-box;\n            -webkit-transition: 0.5s ease-in-out;\n            -moz-transition: 0.5s ease-in-out;\n            -o-transition: 0.5s ease-in-out;\n            transition: 0.5s ease-in-out;\n          }\n\n          /* Styles the close link, adds the slide down transition */\n\n          a.lightbox-close {\n            display: block;\n            width: 50px;\n            height: 50px;\n            box-sizing: border-box;\n            background: white;\n            color: black;\n            text-decoration: none;\n            position: absolute;\n            top: -80px;\n            right: 0;\n            -webkit-transition: 0.5s ease-in-out;\n            -moz-transition: 0.5s ease-in-out;\n            -o-transition: 0.5s ease-in-out;\n            transition: 0.5s ease-in-out;\n          }\n\n          /* Provides part of the "X" to eliminate an image from the close link */\n\n          a.lightbox-close:before {\n            content: \'\';\n            display: block;\n            height: 30px;\n            width: 1px;\n            background: black;\n            position: absolute;\n            left: 26px;\n            top: 10px;\n            -webkit-transform: rotate(45deg);\n            -moz-transform: rotate(45deg);\n            -o-transform: rotate(45deg);\n            transform: rotate(45deg);\n          }\n\n          /* Provides part of the "X" to eliminate an image from the close link */\n\n          a.lightbox-close:after {\n            content: \'\';\n            display: block;\n            height: 30px;\n            width: 1px;\n            background: black;\n            position: absolute;\n            left: 26px;\n            top: 10px;\n            -webkit-transform: rotate(-45deg);\n            -moz-transform: rotate(-45deg);\n            -o-transform: rotate(-45deg);\n            transform: rotate(-45deg);\n          }\n\n          /* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */\n\n          .lightbox-target.open {\n            opacity: 1;\n            top: 0;\n            bottom: 0;\n            right: 0;\n            z-index: 3000000;\n          }\n\n          .lightbox-target.open img {\n            max-height: 100%;\n            max-width: 100%;\n          }\n\n          .lightbox-target.open a.lightbox-close {\n            top: 0px;\n          }\n        '
+        '\n          .multi-figure-caption,\n          .multi-figure-caption h1,\n          .multi-figure-caption h2,\n          .multi-figure-caption h3,\n          .multi-figure-caption h4,\n          .multi-figure-caption h5,\n          .multi-figure-caption h6,\n          .multi-figure-caption p,\n          .multi-figure-caption ul {\n            color: #6c757d;\n            font-size: 0.875rem;\n          }\n\n          .multi-figure-container {\n            margin-bottom: 1rem;\n          }\n          .multi-figure-image {\n            width: 100%;\n            height: auto;\n            object-fit: cover;\n          }\n          .multi-figure-image-container {\n            padding-right: 0.5rem;\n          }\n          /* Small devices (portrait tablets and  phones, 767px and down) */\n          @media (max-width: 767px) {\n            .multi-figure-image-container {\n              margin-bottom: 1rem;\n            }\n          }\n\n          /* Medium devices (landscape tablets, 768px and up) */\n          @media (min-width: 768px) {\n            .multi-figure-image[images-count=\'4\'] {\n              height: 100px;\n            }\n            .multi-figure-image[images-count=\'3\'] {\n              height: 130px;\n            }\n            .multi-figure-image[images-count=\'2\'] {\n              height: 200px;\n            }\n            .multi-figure-container [class*=\'col-\'] + [class*=\'col-\'] {\n              padding-left: 0.75rem;\n            }\n          }\n\n          /* Large devices (laptops/desktops, 992px and up) */\n          @media (min-width: 992px) {\n            .multi-figure-image[images-count=\'4\'] {\n              height: 150px;\n            }\n            .multi-figure-image[images-count=\'3\'] {\n              height: 200px;\n            }\n            .multi-figure-image[images-count=\'2\'] {\n              height: 300px;\n            }\n          }\n\n          /* Styles the lightbox, removes it from sight and adds the fade-in transition */\n\n          .lightbox-target {\n            position: fixed;\n            top: -100%;\n            width: 100%;\n            background: rgba(0, 0, 0, 0.7);\n            width: 100%;\n            opacity: 0;\n            -webkit-transition: opacity 0.5s ease-in-out;\n            -moz-transition: opacity 0.5s ease-in-out;\n            -o-transition: opacity 0.5s ease-in-out;\n            transition: opacity 0.5s ease-in-out;\n            overflow: hidden;\n          }\n\n          .lightbox-target.close {\n            opacity: 0;\n          }\n\n          /* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */\n\n          .lightbox-target img {\n            margin: auto;\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            max-height: 0%;\n            max-width: 0%;\n            border: 3px solid white;\n            box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);\n            box-sizing: border-box;\n            -webkit-transition: 0.5s ease-in-out;\n            -moz-transition: 0.5s ease-in-out;\n            -o-transition: 0.5s ease-in-out;\n            transition: 0.5s ease-in-out;\n          }\n\n          /* Styles the close link, adds the slide down transition */\n\n          a.lightbox-close {\n            display: block;\n            width: 50px;\n            height: 50px;\n            box-sizing: border-box;\n            background: white;\n            color: black;\n            text-decoration: none;\n            position: absolute;\n            top: -80px;\n            right: 0;\n            -webkit-transition: 0.5s ease-in-out;\n            -moz-transition: 0.5s ease-in-out;\n            -o-transition: 0.5s ease-in-out;\n            transition: 0.5s ease-in-out;\n          }\n\n          /* Provides part of the "X" to eliminate an image from the close link */\n\n          a.lightbox-close:before {\n            content: \'\';\n            display: block;\n            height: 30px;\n            width: 1px;\n            background: black;\n            position: absolute;\n            left: 26px;\n            top: 10px;\n            -webkit-transform: rotate(45deg);\n            -moz-transform: rotate(45deg);\n            -o-transform: rotate(45deg);\n            transform: rotate(45deg);\n          }\n\n          /* Provides part of the "X" to eliminate an image from the close link */\n\n          a.lightbox-close:after {\n            content: \'\';\n            display: block;\n            height: 30px;\n            width: 1px;\n            background: black;\n            position: absolute;\n            left: 26px;\n            top: 10px;\n            -webkit-transform: rotate(-45deg);\n            -moz-transform: rotate(-45deg);\n            -o-transform: rotate(-45deg);\n            transform: rotate(-45deg);\n          }\n\n          /* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */\n\n          .lightbox-target.open {\n            opacity: 1;\n            top: 0;\n            bottom: 0;\n            right: 0;\n            z-index: 3000000;\n          }\n\n          .lightbox-target.open img {\n            max-height: 100%;\n            max-width: 100%;\n          }\n\n          .lightbox-target.open a.lightbox-close {\n            top: 0px;\n          }\n        '
       )
     );
   }
@@ -8874,12 +8954,12 @@ var getSerializers = function getSerializers() {
       figure: function figure(_ref4) {
         var node = _ref4.node;
 
-        return React__default.createElement(Figure, { node: node, client: client, contextualADFlag: contextualADFlag });
+        return React__default.createElement(Figure, { node: node, client: client, contextualADFlag: contextualADFlag, getSerializers: getSerializers.apply(undefined, props) });
       },
       multifigure: function multifigure(_ref5) {
         var node = _ref5.node;
 
-        return React__default.createElement(MultiFigure, { node: node, client: client });
+        return React__default.createElement(MultiFigure, { node: node, client: client, getSerializers: getSerializers.apply(undefined, props) });
       },
       slideshow: function slideshow(_ref6) {
         var node = _ref6.node;

package/dist/cjs/index.js

@@ -83,11 +83,12 @@ require('react-bootstrap/Form');
 require('./index-5be2866f.js');
 require('./js.cookie-a511c430.js');
 var CMEDeck = require('./CMEDeck.js');
-var getSerializers = require('./index-8e495016.js');
+var getSerializers = require('./index-7a6308f1.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-156bd4d6.js');
 require('react-bootstrap/Pagination');
 require('next/head');
+require('react-bootstrap/Figure');
 var ExternalResources = require('./ExternalResources.js');
 var Column1 = require('./Column1.js');
 var SideFooter = require('./SideFooter.js');

package/dist/esm/ExternalResources.js

@@ -42,11 +42,12 @@ import './iconBase-602d52fe.js';
 import './index.esm-29e48d38.js';
 import Button from 'react-bootstrap/Button';
 import { m as momentTimezone } from './index-d2f90501.js';
-import { g as getSerializers } from './index-6a239712.js';
+import { g as getSerializers } from './index-d3fdad5e.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'react-bootstrap/Pagination';
 import 'next/head';
+import 'react-bootstrap/Figure';
 
 var ExternalResources = function ExternalResources(props) {
   var resources = props.resources,

package/dist/esm/PartnerDetailListing.js

@@ -51,11 +51,12 @@ import QueueDeckExpanded from './QueueDeckExpanded.js';
 import './iconBase-602d52fe.js';
 import './index.esm-29e48d38.js';
 import 'react-bootstrap/Button';
-import { g as getSerializers } from './index-6a239712.js';
+import { g as getSerializers } from './index-d3fdad5e.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'react-bootstrap/Pagination';
 import 'next/head';
+import 'react-bootstrap/Figure';
 import 'react-bootstrap/Carousel';
 import Feature from './Feature.js';
 import 'react-bootstrap/Breadcrumb';

package/dist/esm/VideoSeriesListing.js

@@ -46,25 +46,27 @@ var VideoSeriesListing = function (_React$Component) {
 
     return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = VideoSeriesListing.__proto__ || _Object$getPrototypeOf(VideoSeriesListing)).call.apply(_ref, [this].concat(args))), _this), _this.page = _this.props.page, _this.mapping = _this.props.mapping, _this.data = _this.props.dataRecord, _this.query = _this.props.query, _this.params = _this.props.params, _this.today = moment().utc().format(), _this.dataArr = [_this.data], _this.defaultImage = _this.props.defaultImage ? _this.props.defaultImage : '/placeholder.jpg', _this.state = {
       data: _this.dataArr.map(function (item) {
-        var tempObj = item;
-        if (tempObj.body) {
-          var filteredBody = tempObj.body.map(function (item) {
-            if (item._type === 'articleSeries') {
-              var innerObj = item;
-              var filteredArticles = innerObj.articles.filter(function (article) {
-                if ((article.is_visible === true || !article.hasOwnProperty('is_visible')) && (_this.today >= article.published || !article.hasOwnProperty('published'))) {
-                  return article;
-                }
-              });
-              innerObj.body = filteredArticles;
-              return innerObj;
-            } else {
-              return item;
-            }
-          });
+        var tempObj = item.map(function (arrItem) {
+          if (arrItem.body) {
+            var filteredBody = arrItem.body.map(function (item) {
+              if (item._type === 'youtubeGallery') {
+                var innerObj = item;
+                var filteredArticles = innerObj.videos.filter(function (video) {
+                  if ((video.is_visible === true || !video.hasOwnProperty('is_visible')) && (_this.today >= video.published || !video.hasOwnProperty('published'))) {
+                    return video;
+                  }
+                });
+                innerObj.videos = filteredArticles;
+                return innerObj;
+              } else {
+                return item;
+              }
+            });
 
-          tempObj.body = filteredBody;
-        }
+            arrItem.body = filteredBody;
+          }
+          return arrItem;
+        });
         return tempObj;
       }),
       per: _this.params ? _this.params.to : 2,

package/dist/esm/View.js

@@ -45,11 +45,12 @@ import './index.esm-29e48d38.js';
 import Button from 'react-bootstrap/Button';
 import { _ as _defineProperty } from './defineProperty-b798470d.js';
 import Form from 'react-bootstrap/Form';
-import { r as renderAuthor, g as getSerializers } from './index-6a239712.js';
+import { r as renderAuthor, g as getSerializers } from './index-d3fdad5e.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'react-bootstrap/Pagination';
 import Head from 'next/head';
+import 'react-bootstrap/Figure';
 import 'react-share';
 import SocialShare from './SocialShare.js';
 import FormControl from 'react-bootstrap/FormControl';
@@ -813,7 +814,7 @@ var Article = function Article(props) {
           partialVisibility: true,
           offset: { bottom: 100, top: containerHeight - 100 },
           onChange: function onChange(isVisible) {
-            if (isVisible) {
+            if (isVisible && queueData.length > 1) {
               onChangeArticle(url, meta);
               setVisibleFlag(function () {
                 return true;

package/dist/esm/YoutubeGroup.js

@@ -69,7 +69,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
     var tileHeight = tileArray.current.map(function (tile) {
       return tile.scrollHeight;
     });
-    console.log(tileArray.current);
+
     for (var ele in tileArray.current) {
       var eleHeight = tileHeight[ele] < 185 ? 185 : tileHeight[ele];
       tileArray.current[ele].style.height = eleHeight + 'px';

package/dist/esm/getSerializers.js

@@ -41,8 +41,9 @@ import 'react-bootstrap';
 import './iconBase-602d52fe.js';
 import './index.esm-29e48d38.js';
 import 'react-bootstrap/Button';
-export { g as default } from './index-6a239712.js';
+export { g as default } from './index-d3fdad5e.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'react-bootstrap/Pagination';
 import 'next/head';
+import 'react-bootstrap/Figure';

package/dist/esm/{index-6a239712.js → index-d3fdad5e.js}

@@ -28,6 +28,7 @@ import { u as util } from './util-7700fc59.js';
 import { R as ReactPlayerLoader } from './brightcove-react-player-loader.es-83f53e4e.js';
 import Pagination from 'react-bootstrap/Pagination';
 import Head from 'next/head';
+import Figure$1$1 from 'react-bootstrap/Figure';
 
 var urlFor = function urlFor(source, builder) {
   return builder.image(source).auto('format');
@@ -7061,6 +7062,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
   var today = moment().utc().format();
 
   var Videos = nodes.videos.filter(function (video) {
+    console.dir(video);
     if ((video.is_visible === true || !video.hasOwnProperty('is_visible')) && (today >= video.published || !video.hasOwnProperty('published'))) {
       return video;
     }
@@ -8044,12 +8046,65 @@ var ArticleSeries = function ArticleSeries(_ref) {
   var articleContainerRef = useRef(null);
   var arrowRef = useRef(null);
 
-  var _useState = useState(0),
+  var _ref2 = router && router.asPath && router.asPath.split('?')[1] ? useState(router.asPath.split('=')[1]) : useState(null),
+      _ref3 = _slicedToArray(_ref2, 2),
+      selectedArticle = _ref3[0],
+      setSelectedArticle = _ref3[1];
+
+  var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      contentWidth = _useState2[0],
-      setContentWidth = _useState2[1];
+      firstLoad = _useState2[0],
+      setFirstLoad = _useState2[1];
+
+  var _useState3 = useState(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      currentURL = _useState4[0],
+      setCurrentURL = _useState4[1];
+
+  var _useState5 = useState(null),
+      _useState6 = _slicedToArray(_useState5, 2),
+      currentTitle = _useState6[0],
+      setCurrentTitle = _useState6[1];
+
+  var _useState7 = useState(null),
+      _useState8 = _slicedToArray(_useState7, 2),
+      currentSummary = _useState8[0],
+      setCurrentSummary = _useState8[1];
+
+  var _useState9 = useState(null),
+      _useState10 = _slicedToArray(_useState9, 2),
+      currentThumbnail = _useState10[0],
+      setCurrentThumbnail = _useState10[1];
+
+  var _useState11 = useState(null),
+      _useState12 = _slicedToArray(_useState11, 2),
+      sensorVisible = _useState12[0],
+      setSensorVisible = _useState12[1];
+
+  var _useState13 = useState(0),
+      _useState14 = _slicedToArray(_useState13, 2),
+      contentWidth = _useState14[0],
+      setContentWidth = _useState14[1];
 
-  var upArrowClicked = false;
+  var _useState15 = useState(false),
+      _useState16 = _slicedToArray(_useState15, 2),
+      upArrowClicked = _useState16[0],
+      setUpArrowClicked = _useState16[1];
+
+  var _useState17 = useState(null),
+      _useState18 = _slicedToArray(_useState17, 2),
+      articleScrollHeight = _useState18[0],
+      setArticleScrollHeight = _useState18[1];
+
+  var _useState19 = useState(false),
+      _useState20 = _slicedToArray(_useState19, 2),
+      articleClicked = _useState20[0],
+      setArticleClicked = _useState20[1];
+
+  var _useState21 = useState(null),
+      _useState22 = _slicedToArray(_useState21, 2),
+      articleIndex = _useState22[0],
+      setArticleIndex = _useState22[1];
 
   var Articles = nodes.articles.filter(function (article) {
     if ((article.is_visible === true || !article.hasOwnProperty('is_visible')) && today >= article.published) {
@@ -8082,7 +8137,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
           'a',
           { onClick: function onClick(e) {
               return articleCardClickHandler(e);
-            }, 'data-articleid': '' + article.param.current },
+            }, 'data-cardlabel': '' + articleLabel, 'data-articleIndex': '' + index, 'data-articleid': '' + article.param.current },
           React__default.createElement(
             'div',
             { className: 'prevNext-thumbnail' },
@@ -8112,43 +8167,17 @@ var ArticleSeries = function ArticleSeries(_ref) {
     });
   };
 
-  var _ref2 = router && router.asPath && router.asPath.split('?')[1] ? useState(router.asPath.split('=')[1]) : useState(null),
-      _ref3 = _slicedToArray(_ref2, 2),
-      selectedArticle = _ref3[0],
-      setSelectedArticle = _ref3[1];
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      firstLoad = _useState4[0],
-      setFirstLoad = _useState4[1];
-
-  var _useState5 = useState(null),
-      _useState6 = _slicedToArray(_useState5, 2),
-      currentURL = _useState6[0],
-      setCurrentURL = _useState6[1];
-
-  var _useState7 = useState(null),
-      _useState8 = _slicedToArray(_useState7, 2),
-      currentTitle = _useState8[0],
-      setCurrentTitle = _useState8[1];
-
-  var _useState9 = useState(null),
-      _useState10 = _slicedToArray(_useState9, 2),
-      currentSummary = _useState10[0],
-      setCurrentSummary = _useState10[1];
-
-  var _useState11 = useState(null),
-      _useState12 = _slicedToArray(_useState11, 2),
-      currentThumbnail = _useState12[0],
-      setCurrentThumbnail = _useState12[1];
-
   var articleCardClickHandler = function articleCardClickHandler(e) {
     e.preventDefault();
     var articleClicked = e.currentTarget.dataset.articleid;
+    setArticleClicked(true);
+    setArticleIndex(e.currentTarget.dataset.articleindex);
+    setSensorVisible(false);
     setSelectedArticle(articleClicked);
-    scrollToArticle(articleClicked);
+    scrollToArticle(articleClicked, e.currentTarget.dataset.cardlabel);
+    arrowRef.current.style.visibility = 'hidden';
   };
-  var scrollToArticle = function scrollToArticle(id) {
+  var scrollToArticle = function scrollToArticle(id, cardLabel) {
     var localArticleID = id ? id : selectedArticle;
     var findArticle = function findArticle(ref) {
       if (ref) {
@@ -8156,13 +8185,18 @@ var ArticleSeries = function ArticleSeries(_ref) {
       }
       return false;
     };
+    console.log('cardLabel', cardLabel);
+    var isNextPrev = cardLabel === 'Next' || 'Previous' ? true : false;
+    console.log(isNextPrev);
     var indexOfRef = refArray.current.findIndex(findArticle);
-
     if (indexOfRef >= 0) {
       var newOffsetTop = !firstLoad ? refArray.current[indexOfRef].wraperRef.current.offsetTop : refArray.current[indexOfRef].wraperRef.current.offsetTop + document.getElementsByTagName('header')[0].clientHeight;
       // console.dir(refArray.current[indexOfRef].wraperRef.current)
       // console.log(document.getElementsByTagName('header')[0].clientHeight)
       // console.log(refArray.current[indexOfRef].wraperRef.current.offsetTop)
+
+      setArticleScrollHeight(newOffsetTop);
+
       window.scrollTo({ top: newOffsetTop, behavior: 'smooth' });
       //refArray.current[indexOfRef].wraperRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' })
     }
@@ -8175,6 +8209,12 @@ var ArticleSeries = function ArticleSeries(_ref) {
     }
   };
 
+  useEffect(function () {
+    if (articleClicked === true) {
+      onChangeArticle(Articles[articleIndex].param.current, 'top', Articles[articleIndex].title, Articles[articleIndex].summary, urlFor(Articles[articleIndex].thumbnail.asset).url());
+    }
+  }, [articleClicked]);
+
   var onChangeArticle = function onChangeArticle(path, visibility, title, summary, shareImage) {
     var currentPath = window && window.location && window.location.pathname ? window.location.pathname.replace('?seriesArticle=', '') : '';
     var newPath = (router && router.asPath && router.asPath.split('?')[0]) + '?seriesArticle=' + path;
@@ -8214,7 +8254,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
     var window = e.currentTarget;
     if (preVscroll > window.scrollY) {
       isScrollDown = false;
-      if (window.scrollY > articleContainerRef.current.offsetTop && preVscroll !== 0 && !upArrowClicked) {
+      if (window.scrollY > articleContainerRef.current.offsetTop && preVscroll !== 0 && upArrowClicked === false && articleClicked === false) {
         arrowRef.current.style.visibility = 'visible';
       }
     } else if (preVscroll < window.scrollY) {
@@ -8228,8 +8268,15 @@ var ArticleSeries = function ArticleSeries(_ref) {
     if (preVscroll <= articleContainerRef.current.offsetTop) {
       arrowRef.current.style.visibility = 'hidden';
     }
+    if (window.scrollY >= articleScrollHeight && articleClicked === true) {
+      setArticleClicked(false);
+      setSensorVisible(true);
+      setUpArrowClicked(false);
+    }
     if (window.scrollY === 0 && upArrowClicked === true) {
-      upArrowClicked = false;
+      setUpArrowClicked(false);
+      setSensorVisible(true);
+      setArticleClicked(false);
     }
   };
 
@@ -8243,6 +8290,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
   useLayoutEffect(function () {
     //console.log('useLayoutEffect')
     if (!firstLoad) {
+      setUpArrowClicked(false);
       if (main_39) {
         grabLoadedAds();
       } else {
@@ -8285,26 +8333,34 @@ var ArticleSeries = function ArticleSeries(_ref) {
     }
   };
 
-  var handleArrowClick = function handleArrowClick() {
-    var newPath = router.asPath.split('?')[0];
-    var title = nodes.seriesTitle;
-    isScrollDown = true;
-    upArrowClicked = true;
-    arrowRef.current.style.visibility = 'hidden';
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-    window.history.pushState({}, '', newPath);
-    document.title = title;
+  useEffect(function () {
+    console.log('sensorVisible Effect');
+    if (sensorVisible === false && articleClicked === false) {
+      var newPath = router.asPath.split('?')[0];
+      var title = nodes.seriesTitle;
+      isScrollDown = true;
+      setUpArrowClicked(true);
+      arrowRef.current.style.visibility = 'hidden';
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+      window.history.pushState({}, '', newPath);
+      document.title = title;
 
-    setCurrentURL(newPath);
-    setCurrentTitle(title);
-    if (rootArticle) {
-      setCurrentSummary(rootArticle.summary ? rootArticle.summary : '');
-      setCurrentThumbnail(urlFor(rootArticle.thumbnail.asset).url());
-    } else {
-      setCurrentSummary('');
-      setCurrentThumbnail('');
+      setCurrentURL(newPath);
+      setCurrentTitle(title);
+      if (rootArticle) {
+        setCurrentSummary(rootArticle.summary ? rootArticle.summary : '');
+        setCurrentThumbnail(urlFor(rootArticle.thumbnail.asset).url());
+      } else {
+        setCurrentSummary('');
+        setCurrentThumbnail('');
+      }
+      refreshAD(newPath);
     }
-    refreshAD(newPath);
+  }, [sensorVisible]);
+
+  var handleArrowClick = function handleArrowClick() {
+    console.log('handleArrowClick');
+    setSensorVisible(false);
   };
 
   return React__default.createElement(
@@ -8368,6 +8424,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
           React__default.createElement(
             InscreenSensor,
             {
+              visible: sensorVisible,
               offSetTop: 120,
               className: 'inscreen-wrapper',
               key: '' + article.param.current,
@@ -8376,7 +8433,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
                 return refArray.current[index] = ele;
               },
               onChange: function onChange(visible) {
-                if (!upArrowClicked) {
+                if (upArrowClicked === false && articleClicked === false) {
                   if (visible === 'top' || visible === 'bottom' || visible === 'small-top') {
                     onChangeArticle(article.param.current, visible, article.title, article.summary, urlFor(article.thumbnail.asset).url());
                   }
@@ -8549,12 +8606,14 @@ var FigureComponent = function FigureComponent(props) {
   if (typeof window === 'undefined') return null;
 
   var node = props.node,
-      client = props.client;
+      client = props.client,
+      getSerializers = props.getSerializers;
 
 
   if (!node.asset) return null;
 
   var caption = node.caption,
+      imgcaption = node.imgcaption,
       alt = node.alt,
       blank = node.blank,
       link = node.link,
@@ -8606,6 +8665,18 @@ var FigureComponent = function FigureComponent(props) {
     imageWidth = '100%';
   }
 
+  var FigureCaption = useCallback(function () {
+    if (imgcaption && imgcaption.length > 0) {
+      return React__default.createElement(
+        'div',
+        { className: 'figure-caption' },
+        React__default.createElement(BlockContent, { blocks: imgcaption, serializers: getSerializers })
+      );
+    } else if (caption) {
+      return React__default.createElement('div', { dangerouslySetInnerHTML: { __html: '<span class=\'figure-caption\'>' + caption + '</span>' } });
+    } else return null;
+  }, [caption, imgcaption]);
+
   var figureStyle = disableTextWrap ? { maxWidth: '100%', width: imageWidth, margin: imageFloat !== 'none' ? imageFloat === 'left' ? '' : '0 0 0 auto' : '' } : {
     width: imageWidth,
     maxWidth: '100%',
@@ -8618,17 +8689,17 @@ var FigureComponent = function FigureComponent(props) {
     React__default.Fragment,
     null,
     React__default.createElement(
-      Figure$1,
+      Figure$1$1,
       { className: '' + class_name, style: figureStyle },
       link ? React__default.createElement(
         'a',
         { target: blank ? '_blank' : '_self', href: link },
-        React__default.createElement(Figure$1.Image, { style: { maxWidth: '100%' }, className: 'figure-image', src: urlFor$3(node, client).url(), alt: alt && alt }),
-        caption && React__default.createElement('div', { dangerouslySetInnerHTML: { __html: '<span class=\'figure-caption\'>' + caption + '</span>' } })
+        React__default.createElement(Figure$1$1.Image, { style: { maxWidth: '100%' }, className: 'figure-image', src: urlFor$3(node, client).url(), alt: alt && alt }),
+        React__default.createElement(FigureCaption, null)
       ) : React__default.createElement(
         React__default.Fragment,
         null,
-        React__default.createElement(Figure$1.Image, {
+        React__default.createElement(Figure$1$1.Image, {
           style: { maxWidth: '100%', cursor: 'pointer', width: 'auto' },
           className: 'figure-image',
           src: urlFor$3(node, client).url(),
@@ -8638,7 +8709,7 @@ var FigureComponent = function FigureComponent(props) {
             setShowLightbox(true);
           }
         }),
-        caption && React__default.createElement('div', { dangerouslySetInnerHTML: { __html: '<span class=\'figure-caption\'>' + caption + '</span>' } })
+        React__default.createElement(FigureCaption, null)
       ),
       React__default.createElement(LightBox, {
         showLightbox: showLightbox,
@@ -8652,7 +8723,7 @@ var FigureComponent = function FigureComponent(props) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        .figure-caption {\n          font-size: 90%;\n          color: #6c757d;\n        }\n      '
+      '\n        .figure-caption,\n        .figure-caption h1,\n        .figure-caption h2,\n        .figure-caption h3,\n        .figure-caption h4,\n        .figure-caption h5,\n        .figure-caption h6,\n        .figure-caption p,\n        .figure-caption ul {\n          color: #6c757d;\n          font-size: 0.875rem;\n        }\n      '
     )
   );
 };
@@ -8681,7 +8752,8 @@ function useOutsideAlerter(ref, container, setOpenImg, setOpenImgSrc) {
 
 var MultiFigure = function MultiFigure(props) {
   var images = props.node.images,
-      client = props.client;
+      client = props.client,
+      getSerializers = props.getSerializers;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -8696,16 +8768,32 @@ var MultiFigure = function MultiFigure(props) {
   var lightboxImage = useRef(null);
   var lightboxContainer = useRef(null);
   useOutsideAlerter(lightboxImage, lightboxContainer, setOpenImg, setOpenImgSrc);
+
+  var FigureCaption = function FigureCaption(_ref) {
+    var caption = _ref.caption,
+        imgcaption = _ref.imgcaption;
+
+    if (imgcaption && imgcaption.length > 0) {
+      return React__default.createElement(
+        'div',
+        { className: 'multi-figure-caption' },
+        React__default.createElement(BlockContent, { blocks: imgcaption, serializers: getSerializers })
+      );
+    } else if (caption) {
+      return React__default.createElement('div', { dangerouslySetInnerHTML: { __html: '<span class=\'multi-figure-caption\'>' + caption + '</span>' } });
+    } else return null;
+  };
+
   if (images && images.length > 0) {
     return React__default.createElement(
       'div',
       { className: 'multi-figure-container' },
       React__default.createElement(
-        Row$1,
+        Row,
         { noGutters: true },
         images.map(function (image, index) {
           return React__default.createElement(
-            Col$1,
+            Col,
             { xs: 12, md: 12 / images.length, key: index },
             image.link ? React__default.createElement(
               'a',
@@ -8718,11 +8806,7 @@ var MultiFigure = function MultiFigure(props) {
                   { once: true },
                   React__default.createElement('img', { 'images-count': images.length, className: 'multi-figure-image', src: urlFor$4(image.asset, client).url(), alt: image.alt })
                 ),
-                image.caption && React__default.createElement(
-                  'span',
-                  { className: 'multi-figure-caption' },
-                  image.caption
-                )
+                React__default.createElement(FigureCaption, { caption: image.caption, imgcaption: image.imgcaption })
               )
             ) : React__default.createElement(
               'div',
@@ -8741,11 +8825,7 @@ var MultiFigure = function MultiFigure(props) {
                   }
                 })
               ),
-              image.caption && React__default.createElement(
-                'span',
-                { className: 'multi-figure-caption' },
-                image.caption
-              )
+              React__default.createElement(FigureCaption, { caption: image.caption, imgcaption: image.imgcaption })
             )
           );
         })
@@ -8758,7 +8838,7 @@ var MultiFigure = function MultiFigure(props) {
       React__default.createElement(
         'style',
         { jsx: 'true' },
-        '\n          .multi-figure-container {\n            margin-bottom: 1rem;\n          }\n          .multi-figure-image {\n            width: 100%;\n            height: auto;\n            object-fit: cover;\n          }\n          .multi-figure-image-container {\n            padding-right: 0.5rem;\n          }\n          /* Small devices (portrait tablets and  phones, 767px and down) */\n          @media (max-width: 767px) {\n            .multi-figure-image-container {\n              margin-bottom: 1rem;\n            }\n          }\n\n          /* Medium devices (landscape tablets, 768px and up) */\n          @media (min-width: 768px) {\n            .multi-figure-image[images-count=\'4\'] {\n              height: 100px;\n            }\n            .multi-figure-image[images-count=\'3\'] {\n              height: 130px;\n            }\n            .multi-figure-image[images-count=\'2\'] {\n              height: 200px;\n            }\n            .multi-figure-container [class*=\'col-\'] + [class*=\'col-\'] {\n              padding-left: 0.75rem;\n            }\n          }\n\n          /* Large devices (laptops/desktops, 992px and up) */\n          @media (min-width: 992px) {\n            .multi-figure-image[images-count=\'4\'] {\n              height: 150px;\n            }\n            .multi-figure-image[images-count=\'3\'] {\n              height: 200px;\n            }\n            .multi-figure-image[images-count=\'2\'] {\n              height: 300px;\n            }\n          }\n\n          .multi-figure-caption {\n            font-size: 90%;\n            color: #6c757d;\n          }\n\n          /* Styles the lightbox, removes it from sight and adds the fade-in transition */\n\n          .lightbox-target {\n            position: fixed;\n            top: -100%;\n            width: 100%;\n            background: rgba(0, 0, 0, 0.7);\n            width: 100%;\n            opacity: 0;\n            -webkit-transition: opacity 0.5s ease-in-out;\n            -moz-transition: opacity 0.5s ease-in-out;\n            -o-transition: opacity 0.5s ease-in-out;\n            transition: opacity 0.5s ease-in-out;\n            overflow: hidden;\n          }\n\n          .lightbox-target.close {\n            opacity: 0;\n          }\n\n          /* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */\n\n          .lightbox-target img {\n            margin: auto;\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            max-height: 0%;\n            max-width: 0%;\n            border: 3px solid white;\n            box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);\n            box-sizing: border-box;\n            -webkit-transition: 0.5s ease-in-out;\n            -moz-transition: 0.5s ease-in-out;\n            -o-transition: 0.5s ease-in-out;\n            transition: 0.5s ease-in-out;\n          }\n\n          /* Styles the close link, adds the slide down transition */\n\n          a.lightbox-close {\n            display: block;\n            width: 50px;\n            height: 50px;\n            box-sizing: border-box;\n            background: white;\n            color: black;\n            text-decoration: none;\n            position: absolute;\n            top: -80px;\n            right: 0;\n            -webkit-transition: 0.5s ease-in-out;\n            -moz-transition: 0.5s ease-in-out;\n            -o-transition: 0.5s ease-in-out;\n            transition: 0.5s ease-in-out;\n          }\n\n          /* Provides part of the "X" to eliminate an image from the close link */\n\n          a.lightbox-close:before {\n            content: \'\';\n            display: block;\n            height: 30px;\n            width: 1px;\n            background: black;\n            position: absolute;\n            left: 26px;\n            top: 10px;\n            -webkit-transform: rotate(45deg);\n            -moz-transform: rotate(45deg);\n            -o-transform: rotate(45deg);\n            transform: rotate(45deg);\n          }\n\n          /* Provides part of the "X" to eliminate an image from the close link */\n\n          a.lightbox-close:after {\n            content: \'\';\n            display: block;\n            height: 30px;\n            width: 1px;\n            background: black;\n            position: absolute;\n            left: 26px;\n            top: 10px;\n            -webkit-transform: rotate(-45deg);\n            -moz-transform: rotate(-45deg);\n            -o-transform: rotate(-45deg);\n            transform: rotate(-45deg);\n          }\n\n          /* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */\n\n          .lightbox-target.open {\n            opacity: 1;\n            top: 0;\n            bottom: 0;\n            right: 0;\n            z-index: 3000000;\n          }\n\n          .lightbox-target.open img {\n            max-height: 100%;\n            max-width: 100%;\n          }\n\n          .lightbox-target.open a.lightbox-close {\n            top: 0px;\n          }\n        '
+        '\n          .multi-figure-caption,\n          .multi-figure-caption h1,\n          .multi-figure-caption h2,\n          .multi-figure-caption h3,\n          .multi-figure-caption h4,\n          .multi-figure-caption h5,\n          .multi-figure-caption h6,\n          .multi-figure-caption p,\n          .multi-figure-caption ul {\n            color: #6c757d;\n            font-size: 0.875rem;\n          }\n\n          .multi-figure-container {\n            margin-bottom: 1rem;\n          }\n          .multi-figure-image {\n            width: 100%;\n            height: auto;\n            object-fit: cover;\n          }\n          .multi-figure-image-container {\n            padding-right: 0.5rem;\n          }\n          /* Small devices (portrait tablets and  phones, 767px and down) */\n          @media (max-width: 767px) {\n            .multi-figure-image-container {\n              margin-bottom: 1rem;\n            }\n          }\n\n          /* Medium devices (landscape tablets, 768px and up) */\n          @media (min-width: 768px) {\n            .multi-figure-image[images-count=\'4\'] {\n              height: 100px;\n            }\n            .multi-figure-image[images-count=\'3\'] {\n              height: 130px;\n            }\n            .multi-figure-image[images-count=\'2\'] {\n              height: 200px;\n            }\n            .multi-figure-container [class*=\'col-\'] + [class*=\'col-\'] {\n              padding-left: 0.75rem;\n            }\n          }\n\n          /* Large devices (laptops/desktops, 992px and up) */\n          @media (min-width: 992px) {\n            .multi-figure-image[images-count=\'4\'] {\n              height: 150px;\n            }\n            .multi-figure-image[images-count=\'3\'] {\n              height: 200px;\n            }\n            .multi-figure-image[images-count=\'2\'] {\n              height: 300px;\n            }\n          }\n\n          /* Styles the lightbox, removes it from sight and adds the fade-in transition */\n\n          .lightbox-target {\n            position: fixed;\n            top: -100%;\n            width: 100%;\n            background: rgba(0, 0, 0, 0.7);\n            width: 100%;\n            opacity: 0;\n            -webkit-transition: opacity 0.5s ease-in-out;\n            -moz-transition: opacity 0.5s ease-in-out;\n            -o-transition: opacity 0.5s ease-in-out;\n            transition: opacity 0.5s ease-in-out;\n            overflow: hidden;\n          }\n\n          .lightbox-target.close {\n            opacity: 0;\n          }\n\n          /* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */\n\n          .lightbox-target img {\n            margin: auto;\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            max-height: 0%;\n            max-width: 0%;\n            border: 3px solid white;\n            box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);\n            box-sizing: border-box;\n            -webkit-transition: 0.5s ease-in-out;\n            -moz-transition: 0.5s ease-in-out;\n            -o-transition: 0.5s ease-in-out;\n            transition: 0.5s ease-in-out;\n          }\n\n          /* Styles the close link, adds the slide down transition */\n\n          a.lightbox-close {\n            display: block;\n            width: 50px;\n            height: 50px;\n            box-sizing: border-box;\n            background: white;\n            color: black;\n            text-decoration: none;\n            position: absolute;\n            top: -80px;\n            right: 0;\n            -webkit-transition: 0.5s ease-in-out;\n            -moz-transition: 0.5s ease-in-out;\n            -o-transition: 0.5s ease-in-out;\n            transition: 0.5s ease-in-out;\n          }\n\n          /* Provides part of the "X" to eliminate an image from the close link */\n\n          a.lightbox-close:before {\n            content: \'\';\n            display: block;\n            height: 30px;\n            width: 1px;\n            background: black;\n            position: absolute;\n            left: 26px;\n            top: 10px;\n            -webkit-transform: rotate(45deg);\n            -moz-transform: rotate(45deg);\n            -o-transform: rotate(45deg);\n            transform: rotate(45deg);\n          }\n\n          /* Provides part of the "X" to eliminate an image from the close link */\n\n          a.lightbox-close:after {\n            content: \'\';\n            display: block;\n            height: 30px;\n            width: 1px;\n            background: black;\n            position: absolute;\n            left: 26px;\n            top: 10px;\n            -webkit-transform: rotate(-45deg);\n            -moz-transform: rotate(-45deg);\n            -o-transform: rotate(-45deg);\n            transform: rotate(-45deg);\n          }\n\n          /* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */\n\n          .lightbox-target.open {\n            opacity: 1;\n            top: 0;\n            bottom: 0;\n            right: 0;\n            z-index: 3000000;\n          }\n\n          .lightbox-target.open img {\n            max-height: 100%;\n            max-width: 100%;\n          }\n\n          .lightbox-target.open a.lightbox-close {\n            top: 0px;\n          }\n        '
       )
     );
   }
@@ -8867,12 +8947,12 @@ var getSerializers = function getSerializers() {
       figure: function figure(_ref4) {
         var node = _ref4.node;
 
-        return React__default.createElement(Figure, { node: node, client: client, contextualADFlag: contextualADFlag });
+        return React__default.createElement(Figure, { node: node, client: client, contextualADFlag: contextualADFlag, getSerializers: getSerializers.apply(undefined, props) });
       },
       multifigure: function multifigure(_ref5) {
         var node = _ref5.node;
 
-        return React__default.createElement(MultiFigure, { node: node, client: client });
+        return React__default.createElement(MultiFigure, { node: node, client: client, getSerializers: getSerializers.apply(undefined, props) });
       },
       slideshow: function slideshow(_ref6) {
         var node = _ref6.node;

package/dist/esm/index.js

@@ -79,11 +79,12 @@ import 'react-bootstrap/Form';
 import './index-d2f90501.js';
 import './js.cookie-6874175c.js';
 export { default as CMEDeck } from './CMEDeck.js';
-export { g as getSerializers } from './index-6a239712.js';
+export { g as getSerializers } from './index-d3fdad5e.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'react-bootstrap/Pagination';
 import 'next/head';
+import 'react-bootstrap/Figure';
 export { default as ExternalResources } from './ExternalResources.js';
 export { Column1 } from './Column1.js';
 export { default as SideFooter } from './SideFooter.js';

package/package.json

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