@mjhls/mjh-framework 1.0.817-image-crop-test-v4 → 1.0.818

package/dist/cjs/GridHero.js

@@ -2,12 +2,11 @@
 
 var React = require('react');
 var moment = require('./moment-aca40de1.js');
-var urlFor = require('./urlFor.js');
+var index = require('./index-efca863c.js');
 var entities = require('./entities-3f9d0f2f.js');
-var index = require('./index-eadd5035.js');
+var index$1 = require('./index-eadd5035.js');
 var AuthorComponent = require('./AuthorComponent-c21aac7f.js');
 require('./_commonjsHelpers-06173234.js');
-require('./index-efca863c.js');
 require('react-dom');
 require('prop-types');
 require('./slicedToArray-5d1bc3b3.js');
@@ -32,11 +31,21 @@ var GridHero = function GridHero(props) {
       _props$subHeight = props.subHeight,
       subHeight = _props$subHeight === undefined ? 270 : _props$subHeight;
 
+  var builder = index.imageUrlBuilder(client);
+  function urlFor(source) {
+    var imageWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    var imageHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+
+    var url = builder.image(source);
+    if (imageWidth) url = url.width(imageWidth);
+    if (imageHeight) url = url.height(imageHeight);
+    return url.auto('format').url();
+  }
 
   var topArticleThumbnail = '';
   var topArticleAltText = topArticle.title;
   if (topArticle.thumbnail && topArticle.thumbnail.asset) {
-    topArticleThumbnail = urlFor({ client: client, source: topArticle.thumbnail.asset, imageWidth: topWidth });
+    topArticleThumbnail = urlFor(topArticle.thumbnail.asset, topWidth);
     topArticleAltText = topArticle.thumbnail.asset.originalFileName;
   } else if (props.thumbnail) {
     topArticleThumbnail = props.thumbnail;
@@ -75,7 +84,7 @@ var GridHero = function GridHero(props) {
           moment.moment(topArticle.published).format('MMMM DD, YYYY ')
         ),
         topArticle.authorMapping && topArticle.authorMapping.length > 0 && React__default['default'].createElement(
-          index.LazyLoad,
+          index$1.LazyLoad,
           { height: 50 },
           React__default['default'].createElement(AuthorComponent.AuthorComponent, { key: topArticle.url.current, index: topArticle.url.current, authors: topArticle.authorMapping })
         ),
@@ -89,11 +98,11 @@ var GridHero = function GridHero(props) {
     React__default['default'].createElement(
       'div',
       { className: 'grid-sub-article-container' },
-      subArticles.map(function (article, index$1) {
+      subArticles.map(function (article, index) {
         var articleThumbnail = '';
         var articleAltText = article.title;
         if (article.thumbnail && article.thumbnail.asset) {
-          articleThumbnail = urlFor({ client: client, source: article.thumbnail.asset, imageWidth: subWidth, imageHeight: subHeight });
+          articleThumbnail = urlFor(article.thumbnail.asset, subWidth, subHeight);
           articleAltText = article.thumbnail.asset.originalFileName;
         } else if (props.thumbnail) {
           articleThumbnail = props.thumbnail;
@@ -101,7 +110,7 @@ var GridHero = function GridHero(props) {
 
         return React__default['default'].createElement(
           'div',
-          { key: index$1, className: 'grid-sub-article sub-grid-' + (index$1 + 1) },
+          { key: index, className: 'grid-sub-article sub-grid-' + (index + 1) },
           articleThumbnail && React__default['default'].createElement(
             'a',
             { href: '/view/' + article.url.current },
@@ -125,9 +134,9 @@ var GridHero = function GridHero(props) {
               moment.moment(article.published).format('MMMM DD, YYYY ')
             ),
             article.authorMapping && article.authorMapping.length > 0 && React__default['default'].createElement(
-              index.LazyLoad,
+              index$1.LazyLoad,
               { height: 50 },
-              React__default['default'].createElement(AuthorComponent.AuthorComponent, { key: index$1.toString(), index: index$1, authors: article.authorMapping })
+              React__default['default'].createElement(AuthorComponent.AuthorComponent, { key: index.toString(), index: index, authors: article.authorMapping })
             ),
             article.summary && React__default['default'].createElement(
               'p',

package/dist/cjs/GroupDeck.js

@@ -5,7 +5,7 @@ var slicedToArray = require('./slicedToArray-5d1bc3b3.js');
 var React = require('react');
 var index = require('./index-187c967e.js');
 var smoothscroll = require('./smoothscroll-99df7f93.js');
-var urlFor = require('./urlFor.js');
+var index$1 = require('./index-efca863c.js');
 require('./_commonjsHelpers-06173234.js');
 require('./es6.string.iterator-c2573ffd.js');
 require('./_to-object-6de10e57.js');
@@ -14,7 +14,6 @@ require('./_is-array-6128bd56.js');
 require('./_object-pie-083f2dd6.js');
 require('./_library-dd23b178.js');
 require('./core.get-iterator-method-f474eacc.js');
-require('./index-efca863c.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -41,6 +40,11 @@ var GroupDeck = function GroupDeck(props) {
       scrollPosition = _useState6[0],
       setScrollPosition = _useState6[1];
 
+  var urlFor = function urlFor(source, client) {
+    var builder = index$1.imageUrlBuilder(client);
+    return builder.image(source).auto('format');
+  };
+
   React.useEffect(function () {
     //IE11 Polyfill
     smoothscroll.smoothscroll.polyfill();
@@ -166,7 +170,7 @@ var GroupDeck = function GroupDeck(props) {
             var thumbnail = void 0;
 
             if (video.thumbnail && video.thumbnail.asset) {
-              thumbnail = urlFor({ source: video.thumbnail, client: props.client });
+              thumbnail = urlFor(video.thumbnail, props.client);
             } else if (_typeof._typeof(video.thumbnail == 'string')) {
               thumbnail = video.thumbnail;
             } else {
@@ -240,7 +244,7 @@ var GroupDeck = function GroupDeck(props) {
             var _url = '' + video.link;
             var _thumbnail = void 0;
             if (video.thumbnail && video.thumbnail.asset) {
-              _thumbnail = urlFor({ source: video.thumbnail, client: props.client });
+              _thumbnail = urlFor(video.thumbnail, props.client);
             } else if (_typeof._typeof(video.thumbnail == 'string')) {
               _thumbnail = video.thumbnail;
             } else {

package/dist/cjs/HamMagazine.js

@@ -168,17 +168,11 @@ var HamMagazine = function HamMagazine(props) {
     var adSection = document.querySelector('.AD728x90');
     var navLinks = document.getElementById('nav-links');
     var mastNav = document.querySelector('.nav-brands');
-    if (mastNav && mastNav.offsetHeight) setTopOffset(mastNav.offsetHeight - 3);
-
-    if (window.pageYOffset > navOffsetTop) {
-      if (navRef.current && navRef.current.style) {
-        navRef.current.style.position = 'fixed';
-        if (mastNav && mastNav.offsetHeight) navRef.current.style.top = mastNav.offsetHeight;
-      }
-    }
-    var stickyNav = window.addEventListener('scroll', function () {
+    var stickNavOnScroll = function stickNavOnScroll() {
       // Taking into consideration the height of the top navbar while setting the navigation fixed
+
       if (window && topNavRef && topNavRef.current && navRef && navRef.current && window.pageYOffset !== 0 && window.pageYOffset + topNavRef.current.clientHeight + navRef.current.clientHeight > navOffsetTop) {
+
         if (navRef.current && navRef.current.style) {
           navRef.current.style.position = 'fixed';
           if (mastNav && mastNav.offsetHeight) navRef.current.style.top = mastNav.offsetHeight;
@@ -195,9 +189,25 @@ var HamMagazine = function HamMagazine(props) {
         setIsSticky(false);
         navLinks.style.margin = '0px auto 0px 0px';
       }
-    });
+    };
+    if (mastNav && mastNav.offsetHeight) setTopOffset(mastNav.offsetHeight - 3);
+
+    if (window.pageYOffset > navOffsetTop) {
+      if (navRef.current && navRef.current.style) {
+        navRef.current.style.position = 'fixed';
+        if (mastNav && mastNav.offsetHeight) navRef.current.style.top = mastNav.offsetHeight;
+      }
+    }
+
+    if (props.initiallyCollapsed && !main.main_43) {
+      navRef.current.style.position = 'fixed';
+      setIsSticky(true);
+      navLinks.style.margin = 'auto';
+      if (mastNav && mastNav.offsetHeight) navRef.current.style.top = mastNav.offsetHeight;
+    }
+    window.addEventListener('scroll', stickNavOnScroll);
     return function () {
-      window.removeEventListener('scroll', stickyNav);
+      window.removeEventListener('scroll', stickNavOnScroll);
     };
   }, []);
 

package/dist/cjs/Hero.js

@@ -2,15 +2,26 @@
 
 var React = require('react');
 var reactBootstrap = require('react-bootstrap');
-var urlFor = require('./urlFor.js');
+var index = require('./index-efca863c.js');
 var entities = require('./entities-3f9d0f2f.js');
-require('./index-efca863c.js');
 require('./_commonjsHelpers-06173234.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+var urlFor = function urlFor(source, client) {
+  var builder = index.imageUrlBuilder(client);
+  return builder.image(source).auto('format');
+};
+
+var renderCardImage = function renderCardImage(thumbnail, client, imageHeight, imageWidth) {
+  var url = urlFor(thumbnail, client);
+  if (imageHeight) url = url.height(imageHeight);
+  if (imageWidth) url = url.width(imageWidth);
+  return url.url();
+};
+
 var Hero = function Hero(_ref) {
   var data = _ref.data,
       client = _ref.client,
@@ -32,7 +43,7 @@ var Hero = function Hero(_ref) {
         { className: 'h4' },
         title
       ),
-      thumbnail && client && React__default['default'].createElement(reactBootstrap.Card.Img, { src: urlFor({ source: thumbnail, client: client, imageHeight: imageHeight, imageWidth: imageWidth }), alt: title }),
+      thumbnail && client && React__default['default'].createElement(reactBootstrap.Card.Img, { src: renderCardImage(thumbnail, client, imageHeight, imageWidth) }),
       summary && React__default['default'].createElement(
         reactBootstrap.Card.Footer,
         { className: 'h6' },

package/dist/cjs/HorizontalArticleListing.js

@@ -5,7 +5,7 @@ var React = require('react');
 var ArticleCarousel = require('./ArticleCarousel.js');
 var index_esm = require('./index.esm-974f47d9.js');
 var BlockContent = require('./BlockContent-36e54d77.js');
-var getSerializers = require('./index-55c6de08.js');
+var getSerializers = require('./index-e5fd35c7.js');
 require('./_commonjsHelpers-06173234.js');
 require('./_to-object-6de10e57.js');
 require('./_object-pie-083f2dd6.js');
@@ -22,7 +22,6 @@ require('./index-eadd5035.js');
 require('react-dom');
 require('prop-types');
 require('./smoothscroll-99df7f93.js');
-require('./urlFor.js');
 require('./index-efca863c.js');
 require('./main-025fdc78.js');
 require('./iconBase-68959171.js');

package/dist/cjs/HorizontalHero.js

@@ -2,10 +2,9 @@
 
 var React = require('react');
 require('./moment-aca40de1.js');
-var urlFor = require('./urlFor.js');
+var index = require('./index-efca863c.js');
 var index_esm = require('./index.esm-05850a2f.js');
 require('./_commonjsHelpers-06173234.js');
-require('./index-efca863c.js');
 require('./iconBase-68959171.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -15,7 +14,10 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var HorizontalHero = function HorizontalHero(props) {
   var client = props.client;
 
-
+  var builder = index.imageUrlBuilder(client);
+  function urlFor(source) {
+    return builder.image(source).auto('format');
+  }
   var topArticle = props.dataRecord[0];
   var subArticles = props.dataRecord.slice(1, props.dataRecord.length);
   var _props$heroTitle = props.heroTitle,
@@ -27,8 +29,7 @@ var HorizontalHero = function HorizontalHero(props) {
   var topArticleThumbnail = '';
   var topArticleAltText = topArticle.title;
   if (topArticle.thumbnail && topArticle.thumbnail.asset) {
-    topArticleThumbnail = urlFor({ client: client, source: topArticle.thumbnail.asset, imageWidth: 350 });
-
+    topArticleThumbnail = urlFor(topArticle.thumbnail.asset).width(350).url();
     topArticleAltText = topArticle.thumbnail.asset.originalFileName;
   }
   if (props.thumbnail) {

package/dist/cjs/IssueContentDeck.js

@@ -6,13 +6,12 @@ var Col = require('react-bootstrap/Col');
 var Card = require('react-bootstrap/Card');
 var Badge = require('react-bootstrap/Badge');
 var index = require('./index-eadd5035.js');
-var urlFor = require('./urlFor.js');
+var index$1 = require('./index-efca863c.js');
 var moment = require('./moment-aca40de1.js');
 var AuthorComponent = require('./AuthorComponent-c21aac7f.js');
 require('./_commonjsHelpers-06173234.js');
 require('react-dom');
 require('prop-types');
-require('./index-efca863c.js');
 require('./slicedToArray-5d1bc3b3.js');
 require('./web.dom.iterable-46657b5c.js');
 require('./es6.string.iterator-c2573ffd.js');
@@ -27,6 +26,28 @@ var Col__default = /*#__PURE__*/_interopDefaultLegacy(Col);
 var Card__default = /*#__PURE__*/_interopDefaultLegacy(Card);
 var Badge__default = /*#__PURE__*/_interopDefaultLegacy(Badge);
 
+var urlFor = function urlFor(source, client) {
+  var builder = index$1.imageUrlBuilder(client);
+  return builder.image(source).auto('format');
+};
+
+var renderCardImage = function renderCardImage(props) {
+  var coverImage = props.coverImage,
+      imageHeight = props.imageHeight,
+      imageWidth = props.imageWidth,
+      client = props.client,
+      Settings = props.Settings;
+
+  if (coverImage && coverImage.asset) {
+    var url = urlFor(coverImage, client);
+    if (imageHeight) url = url.height(imageHeight);
+    if (imageWidth) url = url.width(imageWidth);
+    return url.url();
+  } else {
+    return Settings.logo;
+  }
+};
+
 var PublicationDeckStack = function PublicationDeckStack(props) {
   var title = props.title,
       coverImage = props.coverImage,
@@ -35,12 +56,8 @@ var PublicationDeckStack = function PublicationDeckStack(props) {
       author = props.author,
       summary = props.summary,
       section = props.section,
-      _props$imageHeight = props.imageHeight,
-      imageHeight = _props$imageHeight === undefined ? null : _props$imageHeight,
-      _props$imageWidth = props.imageWidth,
-      imageWidth = _props$imageWidth === undefined ? null : _props$imageWidth,
-      _props$imageFit = props.imageFit,
-      imageFit = _props$imageFit === undefined ? null : _props$imageFit,
+      imageHeight = props.imageHeight,
+      imageWidth = props.imageWidth,
       client = props.client,
       Settings = props.Settings,
       index$1 = props.index,
@@ -66,7 +83,7 @@ var PublicationDeckStack = function PublicationDeckStack(props) {
               { height: imageHeight },
               React__default['default'].createElement(Card__default['default'].Img, {
                 variant: 'right',
-                src: coverImage ? urlFor({ source: coverImage, imageHeight: imageHeight, imageWidth: imageWidth, imageFit: imageFit, client: client }) : Settings.logo,
+                src: renderCardImage({ coverImage: coverImage, imageHeight: imageHeight, imageWidth: imageWidth, client: client, Settings: Settings }),
                 alt: title,
                 style: { width: '170px', height: 'auto', objectFit: 'contain', padding: '0.25rem', float: 'left' }
               })
@@ -157,7 +174,7 @@ var PublicationDeckBlock = function PublicationDeckBlock(props) {
         coverImage && React__default['default'].createElement(
           index.LazyLoad,
           { height: imageHeight },
-          React__default['default'].createElement(Card__default['default'].Img, { variant: 'top', src: coverImage ? urlFor({ source: coverImage, imageHeight: imageHeight, imageWidth: imageWidth, imageFit: imageFit, client: client, Settings: Settings }) : Settings.logo, alt: title })
+          React__default['default'].createElement(Card__default['default'].Img, { variant: 'top', src: renderCardImage({ coverImage: coverImage, imageHeight: imageHeight, imageWidth: imageWidth, client: client, Settings: Settings }), alt: title })
         ),
         React__default['default'].createElement(
           Card__default['default'].Body,

package/dist/cjs/IssueDeck.js

@@ -9,7 +9,7 @@ var Col = require('react-bootstrap/Col');
 var Button = require('react-bootstrap/Button');
 var Card = require('react-bootstrap/Card');
 var index = require('./index-eadd5035.js');
-var urlFor = require('./urlFor.js');
+var index$1 = require('./index-efca863c.js');
 var index_es = require('./index.es-f3e47207.js');
 require('./_commonjsHelpers-06173234.js');
 require('./es6.string.iterator-c2573ffd.js');
@@ -20,7 +20,6 @@ require('./_object-pie-083f2dd6.js');
 require('./web.dom.iterable-46657b5c.js');
 require('react-dom');
 require('prop-types');
-require('./index-efca863c.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -41,12 +40,8 @@ var usePrevious = function usePrevious(value) {
 var IssueDeck = function IssueDeck(props) {
   var data = props.data,
       href = props.href,
-      _props$imageHeight = props.imageHeight,
-      imageHeight = _props$imageHeight === undefined ? null : _props$imageHeight,
-      _props$imageWidth = props.imageWidth,
-      imageWidth = _props$imageWidth === undefined ? null : _props$imageWidth,
-      _props$imageFit = props.imageFit,
-      imageFit = _props$imageFit === undefined ? null : _props$imageFit,
+      imageHeight = props.imageHeight,
+      imageWidth = props.imageWidth,
       Website = props.Website,
       client = props.client,
       publication = props.publication,
@@ -78,10 +73,17 @@ var IssueDeck = function IssueDeck(props) {
 
   var prevValues = usePrevious(values);
 
+  var urlFor = function urlFor(source) {
+    var builder = index$1.imageUrlBuilder(client);
+    return builder.image(source).auto('format');
+  };
+
   var renderCardImage = function renderCardImage(thumbnail) {
     if (thumbnail && thumbnail.asset) {
-      var url = urlFor({ client: client, source: thumbnail, imageHeight: imageHeight, imageWidth: imageWidth, imageFit: imageFit });
-      return url;
+      var url = urlFor(thumbnail);
+      if (imageHeight) url = url.height(imageHeight);
+      if (imageWidth) url = url.width(imageWidth);
+      return url.url();
     } else {
       return Website.logo;
     }

package/dist/cjs/IssueLanding.js

@@ -5,7 +5,7 @@ var React = require('react');
 var QueueDeckExpanded = require('./QueueDeckExpanded.js');
 var Breadcrumbs = require('./Breadcrumbs.js');
 var BlockContent = require('./BlockContent-36e54d77.js');
-var getSerializers = require('./index-55c6de08.js');
+var getSerializers = require('./index-e5fd35c7.js');
 require('./_commonjsHelpers-06173234.js');
 require('./_to-object-6de10e57.js');
 require('./_object-pie-083f2dd6.js');
@@ -16,7 +16,6 @@ require('./core.get-iterator-method-f474eacc.js');
 require('./toConsumableArray-ddb70795.js');
 require('./_iter-detect-55a5657a.js');
 require('react-bootstrap');
-require('./urlFor.js');
 require('./index-efca863c.js');
 require('./index.es-f3e47207.js');
 require('./moment-aca40de1.js');

package/dist/cjs/MasterDeck.js

@@ -63,7 +63,7 @@ var MasterDeck = function (_React$Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = inherits._possibleConstructorReturn(this, (_ref = MasterDeck.__proto__ || inherits._Object$getPrototypeOf(MasterDeck)).call.apply(_ref, [this].concat(args))), _this), _this.Deck = _this.props.deck, _this.variant = _this.props.variant, _this.mapping = _this.props.mapping, _this.data = _this.props.dataRecord || [], _this.query = _this.props.query, _this.params = _this.props.params, _this.pointer = _this.props.pointer ? _this.props.pointer : false, _this.pointerArray = _this.props.pointerArray ? _this.props.pointerArray : false, _this.defaultImage = _this.props.defaultImage ? _this.props.defaultImage : '/placeholder.jpg', _this.rightItems = _this.props.rightItems ? _this.props.rightItems : false, _this.isSeriesLanding = _this.props.isSeriesLanding ? _this.props.isSeriesLanding : false, _this.client = _this.props.client, _this.state = {
+    return _ret = (_temp = (_this = inherits._possibleConstructorReturn(this, (_ref = MasterDeck.__proto__ || inherits._Object$getPrototypeOf(MasterDeck)).call.apply(_ref, [this].concat(args))), _this), _this.Deck = _this.props.deck, _this.variant = _this.props.variant, _this.mapping = _this.props.mapping, _this.data = _this.props.dataRecord || [], _this.query = _this.props.query, _this.params = _this.props.params, _this.pointer = _this.props.pointer ? _this.props.pointer : false, _this.pointerArray = _this.props.pointerArray ? _this.props.pointerArray : false, _this.defaultImage = _this.props.defaultImage ? _this.props.defaultImage : '/placeholder.jpg', _this.rightItems = _this.props.rightItems ? _this.props.rightItems : false, _this.isSeriesLanding = _this.props.isSeriesLanding ? _this.props.isSeriesLanding : false, _this.state = {
       data: _this.data,
       dataKeptToCompareNewDatarecord: _this.data,
       per: _this.params ? _this.params.to : 2,

package/dist/cjs/MediaSeriesLanding.js

@@ -12,12 +12,12 @@ var ReactDOM = require('react-dom');
 var _commonjsHelpers = require('./_commonjsHelpers-06173234.js');
 var Link = require('next/link');
 var MasterDeck = require('./MasterDeck.js');
-var index$1 = require('./index-eadd5035.js');
-var urlFor = require('./urlFor.js');
+var index$2 = require('./index-eadd5035.js');
+var index$1 = require('./index-efca863c.js');
 var moment = require('./moment-aca40de1.js');
 var styleInject_es = require('./style-inject.es-dcee06b6.js');
 var BlockContent = require('./BlockContent-36e54d77.js');
-var getSerializers = require('./index-55c6de08.js');
+var getSerializers = require('./index-e5fd35c7.js');
 require('./define-property-c88be878.js');
 require('./_to-object-6de10e57.js');
 require('./es6.string.iterator-c2573ffd.js');
@@ -43,7 +43,6 @@ require('./isSymbol-03abbdf0.js');
 require('./toNumber-5e1fac58.js');
 require('./index.es-f3e47207.js');
 require('./visibility-sensor-eb2c5b69.js');
-require('./index-efca863c.js');
 require('./ADlgInfeed-2ee46b09.js');
 require('./AdSlot.js');
 require('./Beam.js');
@@ -9397,6 +9396,7 @@ var MediaSeriesCard = function MediaSeriesCard(props) {
       defaultImage = props.defaultImage,
       client = props.client;
 
+  var builder = index$1.imageUrlBuilder(client);
 
   return React__default['default'].createElement(
     'div',
@@ -9411,10 +9411,10 @@ var MediaSeriesCard = function MediaSeriesCard(props) {
           'figure',
           null,
           React__default['default'].createElement(
-            index$1.LazyLoad,
+            index$2.LazyLoad,
             null,
             React__default['default'].createElement('img', {
-              src: data.thumbnail && data.thumbnail.asset ? urlFor({ client: client, source: data.thumbnail }) : data.thumbnail && _typeof._typeof(data.thumbnail == 'string') ? data.thumbnail : defaultImage
+              src: data.thumbnail && data.thumbnail.asset ? builder.image(data.thumbnail).url() : data.thumbnail && _typeof._typeof(data.thumbnail == 'string') ? data.thumbnail : defaultImage
             })
           )
         )

package/dist/cjs/OncliveHero.js

@@ -1,11 +1,10 @@
 'use strict';
 
 var React = require('react');
-var urlFor = require('./urlFor.js');
+var index = require('./index-efca863c.js');
 require('react-bootstrap/Badge');
 require('./iconBase-68959171.js');
 var moment = require('./moment-aca40de1.js');
-require('./index-efca863c.js');
 require('./_commonjsHelpers-06173234.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -15,7 +14,10 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var OncliveHero = function OncliveHero(props) {
   var client = props.client;
 
-
+  var builder = index.imageUrlBuilder(client);
+  function urlFor(source) {
+    return builder.image(source).auto('format');
+  }
   return React__default['default'].createElement(
     'div',
     { className: 'article-group--container' },
@@ -23,8 +25,7 @@ var OncliveHero = function OncliveHero(props) {
       var articleThumbnail = '';
       var articleAltText = article.title;
       if (article.thumbnail && article.thumbnail.asset) {
-        articleThumbnail = urlFor({ client: client, source: article.thumbnail.asset, imageWidth: 250 });
-
+        articleThumbnail = urlFor(article.thumbnail.asset).width(250).url();
         articleAltText = article.thumbnail.asset.originalFileName;
       } else if (props.thumbnail) {
         articleThumbnail = props.thumbnail;

package/dist/cjs/OncliveLargeHero.js

@@ -2,12 +2,11 @@
 
 var React = require('react');
 var moment = require('./moment-aca40de1.js');
-var urlFor = require('./urlFor.js');
+var index = require('./index-efca863c.js');
 var entities = require('./entities-3f9d0f2f.js');
 var AuthorComponent = require('./AuthorComponent-c21aac7f.js');
-var index = require('./index-eadd5035.js');
+var index$1 = require('./index-eadd5035.js');
 require('./_commonjsHelpers-06173234.js');
-require('./index-efca863c.js');
 require('./slicedToArray-5d1bc3b3.js');
 require('./web.dom.iterable-46657b5c.js');
 require('./es6.string.iterator-c2573ffd.js');
@@ -28,12 +27,15 @@ var OncliveLargeHero = function OncliveLargeHero(props) {
   var subArticles = props.dataRecord.slice(3, props.dataRecord.length);
   var client = props.client;
 
+  var builder = index.imageUrlBuilder(client);
+  function urlFor(source) {
+    return builder.image(source).auto('format');
+  }
 
   var topArticleThumbnail = '';
   var topArticleAltText = topArticle.title;
   if (topArticle.thumbnail && topArticle.thumbnail.asset) {
-    topArticleThumbnail = urlFor({ client: client, source: topArticle.thumbnail.asset, imageWidth: 550 });
-
+    topArticleThumbnail = urlFor(topArticle.thumbnail.asset).width(550).url();
     topArticleAltText = topArticle.thumbnail.asset.originalFileName;
   } else if (props.thumbnail) {
     topArticleThumbnail = props.thumbnail;
@@ -76,18 +78,18 @@ var OncliveLargeHero = function OncliveLargeHero(props) {
       React__default['default'].createElement(
         'div',
         { className: 'sub-articles-container middle-single' },
-        middleArticles && middleArticles.map(function (article, index$1) {
+        middleArticles && middleArticles.map(function (article, index) {
           var articleThumbnail = '';
           var articleAltText = article.title;
           if (article.thumbnail && article.thumbnail.asset) {
-            articleThumbnail = urlFor({ client: client, source: article.thumbnail.asset, imageWidth: 250 });
+            articleThumbnail = urlFor(article.thumbnail.asset).width(250).url();
             articleAltText = article.thumbnail.asset.originalFileName;
           } else if (props.thumbnail) {
             articleThumbnail = props.thumbnail;
           }
           return React__default['default'].createElement(
             'div',
-            { key: index$1, className: 'sub-article' },
+            { key: index, className: 'sub-article' },
             React__default['default'].createElement(
               'a',
               { href: '/view/' + article.url.current },
@@ -115,9 +117,9 @@ var OncliveLargeHero = function OncliveLargeHero(props) {
                 'div',
                 { className: 'author-wrapper' },
                 React__default['default'].createElement(
-                  index.LazyLoad,
+                  index$1.LazyLoad,
                   { height: 50 },
-                  React__default['default'].createElement(AuthorComponent.AuthorComponent, { key: index$1.toString(), index: index$1, authors: article.authorMapping })
+                  React__default['default'].createElement(AuthorComponent.AuthorComponent, { key: index.toString(), index: index, authors: article.authorMapping })
                 )
               )
             )
@@ -131,19 +133,18 @@ var OncliveLargeHero = function OncliveLargeHero(props) {
       React__default['default'].createElement(
         'div',
         { className: 'sub-articles-container middle-group' },
-        middleArticles && middleArticles.map(function (article, index$1) {
+        middleArticles && middleArticles.map(function (article, index) {
           var articleThumbnail = '';
           var articleAltText = article.title;
           if (article.thumbnail && article.thumbnail.asset) {
-            articleThumbnail = urlFor({ client: client, source: article.thumbnail.asset, imageWidth: 250 });
-
+            articleThumbnail = urlFor(article.thumbnail.asset).width(250).url();
             articleAltText = article.thumbnail.asset.originalFileName;
           } else if (props.thumbnail) {
             articleThumbnail = props.thumbnail;
           }
           return React__default['default'].createElement(
             'div',
-            { key: index$1, className: 'sub-article' },
+            { key: index, className: 'sub-article' },
             React__default['default'].createElement(
               'a',
               { href: '/view/' + article.url.current },
@@ -171,9 +172,9 @@ var OncliveLargeHero = function OncliveLargeHero(props) {
                 'div',
                 { className: 'author-wrapper' },
                 React__default['default'].createElement(
-                  index.LazyLoad,
+                  index$1.LazyLoad,
                   { height: 50 },
-                  React__default['default'].createElement(AuthorComponent.AuthorComponent, { key: index$1.toString(), index: index$1, authors: article.authorMapping })
+                  React__default['default'].createElement(AuthorComponent.AuthorComponent, { key: index.toString(), index: index, authors: article.authorMapping })
                 )
               )
             )
@@ -183,18 +184,18 @@ var OncliveLargeHero = function OncliveLargeHero(props) {
       React__default['default'].createElement(
         'div',
         { className: 'sub-articles-container' },
-        subArticles && subArticles.map(function (article, index$1) {
+        subArticles && subArticles.map(function (article, index) {
           var articleThumbnail = '';
           var articleAltText = article.title;
           if (article.thumbnail && article.thumbnail.asset) {
-            articleThumbnail = urlFor({ client: client, source: article.thumbnail.asset, imageWidth: 250 });
+            articleThumbnail = urlFor(article.thumbnail.asset).width(250).url();
             articleAltText = article.thumbnail.asset.originalFileName;
           } else if (props.thumbnail) {
             articleThumbnail = props.thumbnail;
           }
           return React__default['default'].createElement(
             'div',
-            { key: index$1, className: 'sub-article' },
+            { key: index, className: 'sub-article' },
             React__default['default'].createElement(
               'a',
               { href: '/view/' + article.url.current },
@@ -222,9 +223,9 @@ var OncliveLargeHero = function OncliveLargeHero(props) {
                 'div',
                 { className: 'author-wrapper' },
                 React__default['default'].createElement(
-                  index.LazyLoad,
+                  index$1.LazyLoad,
                   { height: 50 },
-                  React__default['default'].createElement(AuthorComponent.AuthorComponent, { key: index$1.toString(), index: index$1, authors: article.authorMapping })
+                  React__default['default'].createElement(AuthorComponent.AuthorComponent, { key: index.toString(), index: index, authors: article.authorMapping })
                 )
               )
             )