@mjhls/mjh-framework 1.0.801 → 1.0.802

package/README.md

@@ -1,5 +1,5 @@
 
-# mjh-framework v. 1.0.801
+# mjh-framework v. 1.0.802
 
 
 [![NPM](https://img.shields.io/npm/v/mjh-framework.svg)](https://www.npmjs.com/package/mjh-framework) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

package/dist/cjs/ArticleProgramLandingPage.js

@@ -5,7 +5,7 @@ var slicedToArray = require('./slicedToArray-5d1bc3b3.js');
 var _extends = require('./extends-29bdbc6d.js');
 var React = require('react');
 var BlockContent = require('./BlockContent-36e54d77.js');
-var getSerializers = require('./index-08b35e31.js');
+var getSerializers = require('./index-ada773fa.js');
 var ArticleSeriesListing = require('./ArticleSeriesListing.js');
 require('./_commonjsHelpers-06173234.js');
 require('./es6.string.iterator-c2573ffd.js');

package/dist/cjs/ExternalResources.js

@@ -4,7 +4,7 @@ var _extends = require('./extends-29bdbc6d.js');
 var slicedToArray = require('./slicedToArray-5d1bc3b3.js');
 var React = require('react');
 var BlockContent = require('./BlockContent-36e54d77.js');
-var getSerializers = require('./index-08b35e31.js');
+var getSerializers = require('./index-ada773fa.js');
 var index = require('./index-f86bb269.js');
 var Router = require('next/router');
 var Button = require('react-bootstrap/Button');

package/dist/cjs/HorizontalArticleListing.js

@@ -5,7 +5,7 @@ var React = require('react');
 var ArticleCarousel = require('./ArticleCarousel.js');
 var index_esm = require('./index.esm-00a6aade.js');
 var BlockContent = require('./BlockContent-36e54d77.js');
-var getSerializers = require('./index-08b35e31.js');
+var getSerializers = require('./index-ada773fa.js');
 require('./_commonjsHelpers-06173234.js');
 require('./_to-object-6de10e57.js');
 require('./_object-pie-083f2dd6.js');

package/dist/cjs/MediaSeriesLanding.js

@@ -16,7 +16,7 @@ var index = 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-08b35e31.js');
+var getSerializers = require('./index-ada773fa.js');
 require('./define-property-c88be878.js');
 require('./_to-object-6de10e57.js');
 require('./es6.string.iterator-c2573ffd.js');

package/dist/cjs/PartnerDetailListing.js

@@ -12,7 +12,7 @@ var QueueDeckExpanded = require('./QueueDeckExpanded.js');
 var Breadcrumbs = require('./Breadcrumbs.js');
 var Feature = require('./Feature.js');
 var urlFor = require('./urlFor.js');
-var getSerializers = require('./index-08b35e31.js');
+var getSerializers = require('./index-ada773fa.js');
 var BlockContent = require('./BlockContent-36e54d77.js');
 require('./_commonjsHelpers-06173234.js');
 require('./es6.string.iterator-c2573ffd.js');

package/dist/cjs/TaxonomyDescription.js

@@ -6,7 +6,7 @@ var React = require('react');
 var Router = require('next/router');
 var Head = require('next/head');
 var BlockContent = require('./BlockContent-36e54d77.js');
-var getSerializers = require('./index-08b35e31.js');
+var getSerializers = require('./index-ada773fa.js');
 require('./_commonjsHelpers-06173234.js');
 require('./es6.string.iterator-c2573ffd.js');
 require('./_to-object-6de10e57.js');

package/dist/cjs/VideoProgramLandingPage.js

@@ -7,7 +7,7 @@ var BlockContent = require('./BlockContent-36e54d77.js');
 var Col = require('react-bootstrap/Col');
 var Form = require('react-bootstrap/Form');
 var Button = require('react-bootstrap/Button');
-var getSerializers = require('./index-08b35e31.js');
+var getSerializers = require('./index-ada773fa.js');
 var VideoSeriesListing = require('./VideoSeriesListing.js');
 require('./_commonjsHelpers-06173234.js');
 require('./es6.string.iterator-c2573ffd.js');

package/dist/cjs/View.js

@@ -17,7 +17,7 @@ var FormControl = require('react-bootstrap/FormControl');
 var Button = require('react-bootstrap/Button');
 var visibilitySensor = require('./visibility-sensor-eb2c5b69.js');
 var SocialShare = require('./SocialShare.js');
-var getSerializers = require('./index-08b35e31.js');
+var getSerializers = require('./index-ada773fa.js');
 var AdSlot = require('./AdSlot.js');
 var SeriesSlider = require('./SeriesSlider-2db54929.js');
 var getTargeting = require('./getTargeting-a100d6e5.js');

package/dist/cjs/getSerializers.js

@@ -1,7 +1,7 @@
 'use strict';
 
 require('react');
-var getSerializers = require('./index-08b35e31.js');
+var getSerializers = require('./index-ada773fa.js');
 require('./BlockContent-36e54d77.js');
 require('./entities-3f9d0f2f.js');
 require('./slicedToArray-5d1bc3b3.js');

package/dist/cjs/{index-08b35e31.js → index-ada773fa.js}

@@ -8950,12 +8950,44 @@ var urlFor$1 = function urlFor(source, client) {
   return builder.image(source).auto('format');
 };
 
+var generateSrcSet = function generateSrcSet(source, client, width) {
+  var builder = index.imageUrlBuilder(client);
+  return builder.image(source).width(width).fit('max').auto('format').url();
+};
+
 var compareProps = function compareProps(prevProps, nextProps) {
   if (nextProps.node.asset && nextProps.node.asset._ref) {
     return prevProps.node.asset._ref === nextProps.node.asset._ref;
   }
 };
 
+var FigureImage = React__default['default'].memo(function (_ref2) {
+  var node = _ref2.node,
+      client = _ref2.client,
+      imgAlt = _ref2.imgAlt,
+      link = _ref2.link,
+      handleClickFigure = _ref2.handleClickFigure;
+
+  var figureImageStyle = link ? { maxWidth: '100%' } : { maxWidth: '100%', cursor: 'pointer', width: 'auto' };
+  return React__default['default'].createElement(
+    'picture',
+    null,
+    React__default['default'].createElement('source', { media: '(min-width: 1200px)', srcSet: generateSrcSet(node, client, 1500) }),
+    React__default['default'].createElement('source', { media: '(min-width: 600px)', srcSet: generateSrcSet(node, client, 1000) }),
+    React__default['default'].createElement('source', { media: '(max-width: 600px)', srcSet: generateSrcSet(node, client, 500) }),
+    React__default['default'].createElement('img', _extends._extends({
+      style: figureImageStyle,
+      className: 'figure-image',
+      src: urlFor$1(node, client).url(),
+      alt: imgAlt ? imgAlt : 'figure image'
+    }, !link && {
+      onClick: function onClick() {
+        return handleClickFigure(node, client);
+      }
+    }))
+  );
+});
+
 var FigureComponent = function FigureComponent(props) {
   var _useState = React.useState(false),
       _useState2 = slicedToArray._slicedToArray(_useState, 2),
@@ -9049,6 +9081,11 @@ var FigureComponent = function FigureComponent(props) {
     margin: figureMargin
   };
 
+  var handleClickFigure = React.useCallback(function (node, client) {
+    setLightboxImgSrc(urlFor$1(node, client).url());
+    setShowLightbox(true);
+  }, [node, client]);
+
   return React__default['default'].createElement(
     React__default['default'].Fragment,
     null,
@@ -9058,21 +9095,12 @@ var FigureComponent = function FigureComponent(props) {
       link ? React__default['default'].createElement(
         'a',
         { target: blank ? '_blank' : '_self', href: link },
-        React__default['default'].createElement(Figure__default['default'].Image, { style: { maxWidth: '100%' }, className: 'figure-image', src: urlFor$1(node, client).url(), alt: alt && alt }),
+        React__default['default'].createElement(FigureImage, { node: node, client: client, imgAlt: alt, link: link }),
         React__default['default'].createElement(FigureCaption, null)
       ) : React__default['default'].createElement(
         React__default['default'].Fragment,
         null,
-        React__default['default'].createElement(Figure__default['default'].Image, {
-          style: { maxWidth: '100%', cursor: 'pointer', width: 'auto' },
-          className: 'figure-image',
-          src: urlFor$1(node, client).url(),
-          alt: alt && alt,
-          onClick: function onClick() {
-            setLightboxImgSrc(urlFor$1(node, client).url());
-            setShowLightbox(true);
-          }
-        }),
+        React__default['default'].createElement(FigureImage, { node: node, client: client, imgAlt: alt, handleClickFigure: handleClickFigure }),
         React__default['default'].createElement(FigureCaption, null)
       ),
       React__default['default'].createElement(LightBox, {

package/dist/cjs/index.js

@@ -83,7 +83,7 @@ var VerticalHero = require('./VerticalHero.js');
 var YahooHero = require('./YahooHero.js');
 var GridHero = require('./GridHero.js');
 var ConferenceArticleCard = require('./ConferenceArticleCard.js');
-var getSerializers = require('./index-08b35e31.js');
+var getSerializers = require('./index-ada773fa.js');
 var Beam = require('./Beam.js');
 var Segment = require('./Segment.js');
 var KMTracker = require('./KMTracker.js');

package/dist/esm/ArticleProgramLandingPage.js

@@ -3,7 +3,7 @@ import { _ as _slicedToArray } from './slicedToArray-be2f7a22.js';
 import { _ as _extends } from './extends-60e0e1c6.js';
 import React__default from 'react';
 import { B as BlockContent } from './BlockContent-c99c9a8d.js';
-import { g as getSerializers } from './index-c2daf449.js';
+import { g as getSerializers } from './index-255b4063.js';
 import ArticleSeriesListing from './ArticleSeriesListing.js';
 import './_commonjsHelpers-0c4b6f40.js';
 import './es6.string.iterator-bc33758b.js';

package/dist/esm/ExternalResources.js

@@ -2,7 +2,7 @@ import { _ as _extends } from './extends-60e0e1c6.js';
 import { _ as _slicedToArray } from './slicedToArray-be2f7a22.js';
 import React__default, { useState, useEffect } from 'react';
 import { B as BlockContent } from './BlockContent-c99c9a8d.js';
-import { g as getSerializers } from './index-c2daf449.js';
+import { g as getSerializers } from './index-255b4063.js';
 import { m as momentTimezone } from './index-79cfd25c.js';
 import { useRouter } from 'next/router';
 import Button from 'react-bootstrap/Button';

package/dist/esm/HorizontalArticleListing.js

@@ -3,7 +3,7 @@ import React__default from 'react';
 import ArticleCarousel from './ArticleCarousel.js';
 import { I as IoIosArrowForward } from './index.esm-f6156a57.js';
 import { B as BlockContent } from './BlockContent-c99c9a8d.js';
-import { g as getSerializers } from './index-c2daf449.js';
+import { g as getSerializers } from './index-255b4063.js';
 import './_commonjsHelpers-0c4b6f40.js';
 import './_to-object-b50e61c3.js';
 import './_object-pie-133f504a.js';

package/dist/esm/MediaSeriesLanding.js

@@ -14,7 +14,7 @@ import { i as imageUrlBuilder } from './index-0dbff1d1.js';
 import { m as moment } from './moment-bc12cb97.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import { B as BlockContent } from './BlockContent-c99c9a8d.js';
-import { g as getSerializers } from './index-c2daf449.js';
+import { g as getSerializers } from './index-255b4063.js';
 import './define-property-fe54dc9f.js';
 import './_to-object-b50e61c3.js';
 import './es6.string.iterator-bc33758b.js';

package/dist/esm/PartnerDetailListing.js

@@ -10,7 +10,7 @@ import QueueDeckExpanded from './QueueDeckExpanded.js';
 import Breadcrumbs from './Breadcrumbs.js';
 import Feature from './Feature.js';
 import urlFor from './urlFor.js';
-import { g as getSerializers } from './index-c2daf449.js';
+import { g as getSerializers } from './index-255b4063.js';
 import { B as BlockContent } from './BlockContent-c99c9a8d.js';
 import './_commonjsHelpers-0c4b6f40.js';
 import './es6.string.iterator-bc33758b.js';

package/dist/esm/TaxonomyDescription.js

@@ -4,7 +4,7 @@ import React__default from 'react';
 import { useRouter } from 'next/router';
 import Head from 'next/head';
 import { B as BlockContent } from './BlockContent-c99c9a8d.js';
-import { g as getSerializers } from './index-c2daf449.js';
+import { g as getSerializers } from './index-255b4063.js';
 import './_commonjsHelpers-0c4b6f40.js';
 import './es6.string.iterator-bc33758b.js';
 import './_to-object-b50e61c3.js';

package/dist/esm/VideoProgramLandingPage.js

@@ -5,7 +5,7 @@ import { B as BlockContent } from './BlockContent-c99c9a8d.js';
 import Col from 'react-bootstrap/Col';
 import Form from 'react-bootstrap/Form';
 import Button from 'react-bootstrap/Button';
-import { g as getSerializers } from './index-c2daf449.js';
+import { g as getSerializers } from './index-255b4063.js';
 import VideoSeriesListing from './VideoSeriesListing.js';
 import './_commonjsHelpers-0c4b6f40.js';
 import './es6.string.iterator-bc33758b.js';

package/dist/esm/View.js

@@ -15,7 +15,7 @@ import FormControl from 'react-bootstrap/FormControl';
 import Button from 'react-bootstrap/Button';
 import { V as VisibilitySensor } from './visibility-sensor-72fd8f8b.js';
 import SocialShare from './SocialShare.js';
-import { r as renderAuthor, g as getSerializers } from './index-c2daf449.js';
+import { r as renderAuthor, g as getSerializers } from './index-255b4063.js';
 import DFPAdSlot from './AdSlot.js';
 import { S as SeriesSlider } from './SeriesSlider-c8477bf3.js';
 import { g as getTargeting, a as getContentPlacementUrl } from './getTargeting-05c216d6.js';

package/dist/esm/getSerializers.js

@@ -1,5 +1,5 @@
 import 'react';
-export { g as default } from './index-c2daf449.js';
+export { g as default } from './index-255b4063.js';
 import './BlockContent-c99c9a8d.js';
 import './entities-932b50cf.js';
 import './slicedToArray-be2f7a22.js';

package/dist/esm/{index-c2daf449.js → index-255b4063.js}

@@ -8936,12 +8936,44 @@ var urlFor$1 = function urlFor(source, client) {
   return builder.image(source).auto('format');
 };
 
+var generateSrcSet = function generateSrcSet(source, client, width) {
+  var builder = imageUrlBuilder(client);
+  return builder.image(source).width(width).fit('max').auto('format').url();
+};
+
 var compareProps = function compareProps(prevProps, nextProps) {
   if (nextProps.node.asset && nextProps.node.asset._ref) {
     return prevProps.node.asset._ref === nextProps.node.asset._ref;
   }
 };
 
+var FigureImage = React__default.memo(function (_ref2) {
+  var node = _ref2.node,
+      client = _ref2.client,
+      imgAlt = _ref2.imgAlt,
+      link = _ref2.link,
+      handleClickFigure = _ref2.handleClickFigure;
+
+  var figureImageStyle = link ? { maxWidth: '100%' } : { maxWidth: '100%', cursor: 'pointer', width: 'auto' };
+  return React__default.createElement(
+    'picture',
+    null,
+    React__default.createElement('source', { media: '(min-width: 1200px)', srcSet: generateSrcSet(node, client, 1500) }),
+    React__default.createElement('source', { media: '(min-width: 600px)', srcSet: generateSrcSet(node, client, 1000) }),
+    React__default.createElement('source', { media: '(max-width: 600px)', srcSet: generateSrcSet(node, client, 500) }),
+    React__default.createElement('img', _extends({
+      style: figureImageStyle,
+      className: 'figure-image',
+      src: urlFor$1(node, client).url(),
+      alt: imgAlt ? imgAlt : 'figure image'
+    }, !link && {
+      onClick: function onClick() {
+        return handleClickFigure(node, client);
+      }
+    }))
+  );
+});
+
 var FigureComponent = function FigureComponent(props) {
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -9035,6 +9067,11 @@ var FigureComponent = function FigureComponent(props) {
     margin: figureMargin
   };
 
+  var handleClickFigure = useCallback(function (node, client) {
+    setLightboxImgSrc(urlFor$1(node, client).url());
+    setShowLightbox(true);
+  }, [node, client]);
+
   return React__default.createElement(
     React__default.Fragment,
     null,
@@ -9044,21 +9081,12 @@ var FigureComponent = function FigureComponent(props) {
       link ? React__default.createElement(
         'a',
         { target: blank ? '_blank' : '_self', href: link },
-        React__default.createElement(Figure$2.Image, { style: { maxWidth: '100%' }, className: 'figure-image', src: urlFor$1(node, client).url(), alt: alt && alt }),
+        React__default.createElement(FigureImage, { node: node, client: client, imgAlt: alt, link: link }),
         React__default.createElement(FigureCaption, null)
       ) : React__default.createElement(
         React__default.Fragment,
         null,
-        React__default.createElement(Figure$2.Image, {
-          style: { maxWidth: '100%', cursor: 'pointer', width: 'auto' },
-          className: 'figure-image',
-          src: urlFor$1(node, client).url(),
-          alt: alt && alt,
-          onClick: function onClick() {
-            setLightboxImgSrc(urlFor$1(node, client).url());
-            setShowLightbox(true);
-          }
-        }),
+        React__default.createElement(FigureImage, { node: node, client: client, imgAlt: alt, handleClickFigure: handleClickFigure }),
         React__default.createElement(FigureCaption, null)
       ),
       React__default.createElement(LightBox, {

package/dist/esm/index.js

@@ -79,7 +79,7 @@ export { default as VerticalHero } from './VerticalHero.js';
 export { default as YahooHero } from './YahooHero.js';
 export { default as GridHero } from './GridHero.js';
 export { default as ConferenceArticleCard } from './ConferenceArticleCard.js';
-export { g as getSerializers } from './index-c2daf449.js';
+export { g as getSerializers } from './index-255b4063.js';
 export { default as Beam } from './Beam.js';
 export { default as Segment } from './Segment.js';
 export { default as KMTracker } from './KMTracker.js';

package/package.json

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