@mjhls/mjh-framework 1.0.142 → 1.0.143

package/README.md

@@ -1,5 +1,5 @@
 
-# mjh-framework v. 1.0.142
+# mjh-framework v. 1.0.143
 
 
 

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import React__default, { Component, useState, useEffect, useRef, createContext, createElement } from 'react';
+import React__default, { Component, useState, useEffect, useRef, createElement, createContext } from 'react';
 import PropTypes from 'prop-types';
 import reactDom from 'react-dom';
 import Container from 'react-bootstrap/Container';
@@ -6331,13 +6331,13 @@ var GridContent = function (_React$Component) {
                       Card.Body,
                       { style: { padding: '20px' } },
                       React__default.createElement(
-                        Link,
-                        { href: _this2.page + '/[url]', as: _this2.page + '/' + get_1(row, 'url.current') },
+                        Card.Title,
+                        null,
                         React__default.createElement(
-                          'a',
-                          null,
+                          Link,
+                          { href: _this2.page + '/[url]', as: _this2.page + '/' + get_1(row, 'url.current') },
                           React__default.createElement(
-                            Card.Title,
+                            'a',
                             null,
                             row.title
                           )
@@ -6394,7 +6394,7 @@ var GridContent = function (_React$Component) {
                     { href: linkHref },
                     React__default.createElement(
                       'a',
-                      { className: index$$1 === 0 || index$$1 % 4 === 0 ? '' : 'card-image' },
+                      { target: row.url && row.url.target ? '_blank' : '_self', className: index$$1 === 0 || index$$1 % 4 === 0 ? '' : 'card-image' },
                       React__default.createElement(
                         LazyLoad,
                         { height: _this2.props.imageHeight },
@@ -6414,7 +6414,7 @@ var GridContent = function (_React$Component) {
                       { href: linkHref },
                       React__default.createElement(
                         'a',
-                        null,
+                        { target: row.url && row.url.target ? '_blank' : '_self' },
                         React__default.createElement(
                           Card.Title,
                           null,
@@ -6741,11 +6741,11 @@ var DeckQueue = function (_React$Component) {
                         Card.Body,
                         { style: { padding: '20px' } },
                         row.title && React__default.createElement(
-                          Link,
-                          { href: _this2.page + '/[url]', as: _this2.page + '/' + get_1(row, 'url.current') },
+                          Card.Title,
+                          null,
                           React__default.createElement(
-                            Card.Title,
-                            null,
+                            Link,
+                            { href: _this2.page + '/[url]', as: _this2.page + '/' + get_1(row, 'url.current') },
                             row.title
                           )
                         ),
@@ -6765,11 +6765,11 @@ var DeckQueue = function (_React$Component) {
                           )
                         ),
                         row.summary && React__default.createElement(
-                          Link,
-                          { href: _this2.page + '/[url]', as: _this2.page + '/' + get_1(row, 'url.current') },
+                          Card.Text,
+                          null,
                           React__default.createElement(
-                            Card.Text,
-                            null,
+                            Link,
+                            { href: _this2.page + '/[url]', as: _this2.page + '/' + get_1(row, 'url.current') },
                             row.summary
                           )
                         )
@@ -7534,6 +7534,7 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
               Media$1,
               {
                 key: article._id ? article._id : index$$1,
+                className: article._type == 'feature' ? 'feature-media' : '',
                 style: { flexDirection: article._type == 'feature' ? 'column' : 'row', marginBottom: '1.25rem', paddingBottom: '1.25rem', borderBottom: '1px solid #ddd' } },
               (article.thumbnail && article.thumbnail.asset || defaultImage) && React__default.createElement(
                 Link,
@@ -7604,7 +7605,7 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n          .img-wrapper img {\n            max-height: 240px;\n            height: auto;\n            width: 100%;\n            object-fit: contain;\n          }\n          .feature-wrapper {\n            width: 100%;\n          }\n          .feature-wrapper img {\n            width: 100%;\n            margin-bottom: 1em;\n          }\n          @media only screen and (min-width: 768px) {\n           \n            .img-wrapper > img {\n              padding-right: 1em;\n            }\n          }\n          @media only screen and (max-width: 767px) {\n            .img-wrapper {\n              width: 100%;\n            }\n            .img-wrapper img {\n              padding-bottom: 1em;\n            }\n            .media {\n              flex-direction: column;\n            }\n          }\n        '
+      '\n          .feature-media > .media-body {\n            -webkit-box-flex: none;\n            -ms-flex: none;\n            flex: none;\n          }\n          .img-wrapper img {\n            max-height: 240px;\n            height: auto;\n            width: 100%;\n            object-fit: contain;\n          }\n          .feature-wrapper {\n            width: 100%;\n          }\n          .feature-wrapper img {\n            width: 100%;\n            margin-bottom: 1em;\n          }\n          @media only screen and (min-width: 768px) {\n            .img-wrapper > img {\n              padding-right: 1em;\n            }\n          }\n          @media only screen and (max-width: 767px) {\n            .img-wrapper {\n              width: 100%;\n            }\n            .img-wrapper img {\n              padding-bottom: 1em;\n            }\n            .media {\n              flex-direction: column;\n            }\n          }\n        '
     )
   );
 };
@@ -10301,8 +10302,8 @@ var FigureComponent = function FigureComponent(_ref) {
 
   var _useState = useState(null),
       _useState2 = slicedToArray(_useState, 2),
-      captionWidth = _useState2[0],
-      setcaptionWidth = _useState2[1];
+      imageWidth = _useState2[0],
+      setimageWidth = _useState2[1];
 
   var _useState3 = useState(''),
       _useState4 = slicedToArray(_useState3, 2),
@@ -10313,65 +10314,68 @@ var FigureComponent = function FigureComponent(_ref) {
       alt = node$$1.alt,
       blank = node$$1.blank,
       link = node$$1.link,
-      widthP = node$$1.widthP,
+      _node$widthP = node$$1.widthP,
+      widthP = _node$widthP === undefined ? 'auto' : _node$widthP,
       _node$alignment = node$$1.alignment,
       alignment = _node$alignment === undefined ? 'center' : _node$alignment;
 
-  var imgWidth = widthP ? widthP + '%' : '100%';
 
   var figureMargin = void 0;
   if (imgFloat === 'none') {
     figureMargin = '0 auto 1rem';
   }
   if (imgFloat === 'left') {
-    figureMargin = '0 10% 1rem 1rem';
+    figureMargin = '0 1.5rem 1.5rem 10%';
   }
   if (imgFloat === 'right') {
-    figureMargin = '0 1rem 1rem 10%';
+    figureMargin = '0 10% 1.5rem 1.5rem';
   }
 
   var loadImg = function loadImg() {
-    setcaptionWidth(imgElement.current.width);
+    if (widthP == 'auto') {
+      setimageWidth(imgElement.current.naturalWidth);
+    } else {
+      setimageWidth(widthP + '%');
+    }
   };
 
+  useEffect(function () {
+    if (widthP == 'auto') {
+      setimageWidth(imgElement.current.naturalWidth + 'px');
+    } else {
+      setimageWidth(widthP + '%');
+    }
+  }, [imageWidth]);
+
   useEffect(function () {
     var screenWidth = window.innerWidth;
     if (screenWidth > 1000) {
       var align = alignment.toLowerCase() === 'center' ? 'none' : alignment.toLowerCase();
       setimgFloat(align);
     }
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return React__default.createElement(
     Figure,
-    { className: 'd-block text-center mb-3', style: { width: imgWidth, float: imgFloat, clear: 'both', margin: figureMargin } },
+    { className: 'd-block text-center mb-3', style: { width: imageWidth, float: imgFloat, clear: 'both', margin: figureMargin, maxWidth: '100%' } },
     link ? React__default.createElement(
       'a',
       { href: link, target: blank ? '_blank' : '_self' },
-      React__default.createElement(Figure.Image, {
-        ref: imgElement,
-        onLoad: loadImg,
-        src: urlFor$1(node$$1, client).url(),
-        alt: alt && alt
-      }),
+      React__default.createElement(Figure.Image, { style: { width: '100%' }, className: 'figure-image', ref: imgElement, onLoad: loadImg, src: urlFor$1(node$$1, client).url(), alt: alt && alt }),
       caption && React__default.createElement(
         Figure.Caption,
-        { style: { width: captionWidth } },
+        { style: { width: '100%', maxWidth: '100%' } },
         caption
       )
     ) : React__default.createElement(
       React__default.Fragment,
       null,
-      React__default.createElement(Figure.Image, {
-        ref: imgElement,
-        onLoad: loadImg,
-        src: urlFor$1(node$$1, client).url(),
-        alt: alt && alt
-      }),
+      React__default.createElement(Figure.Image, { style: { width: '100%' }, className: 'figure-image', ref: imgElement, onLoad: loadImg, src: urlFor$1(node$$1, client).url(), alt: alt && alt }),
       caption && React__default.createElement(
         Figure.Caption,
-        { style: { width: captionWidth } },
+        { style: { width: '100%', maxWidth: '100%' } },
         caption
       )
     )
@@ -14033,7 +14037,22 @@ var Media$2 = function Media$$1(_ref) {
 
   var renderFigure = function renderFigure(uploadDoc, poster, blank, caption) {
     if (uploadDoc && uploadDoc.asset) {
-      if (poster && poster.asset) {
+      if (poster && poster.asset && caption && caption !== '') {
+        return React__default.createElement(
+          Figure,
+          { className: 'mb-3' },
+          React__default.createElement(
+            'a',
+            { href: uploadDoc.asset.url, target: blank ? '_blank' : '_self' },
+            React__default.createElement(Figure.Image, { src: urlFor(poster).url(), fluid: true }),
+            React__default.createElement(
+              Figure.Caption,
+              { className: 'text-center' },
+              caption
+            )
+          )
+        );
+      } else if (poster && poster.asset) {
         return React__default.createElement(
           Figure,
           { className: 'mb-3' },
@@ -14076,11 +14095,27 @@ var Video = function Video(_ref) {
   var node = _ref.node,
       accountIDs = _ref.accountIDs;
   var source = node.source,
-      videoID = node.videoID;
+      videoID = node.videoID,
+      experienceID = node.experienceID;
 
   if (source === 'brightcove' && accountIDs.brightcove) {
-    return React__default.createElement(ReactPlayerLoader, { accountId: accountIDs.brightcove.accountId, videoId: videoID, playerId: accountIDs.brightcove.playerId, attrs: { className: 'brightcove' } });
+    if (videoID) {
+      return React__default.createElement(ReactPlayerLoader, { accountId: accountIDs.brightcove.accountId, videoId: videoID, playerId: accountIDs.brightcove.playerId, attrs: { className: 'brightcove' } });
+    } else if (experienceID) {
+      return React__default.createElement('iframe', {
+        src: 'https://players.brightcove.net/' + accountIDs.brightcove.accountId + '/experience_' + experienceID + '/index.html',
+        allowFullScreen: 'true',
+        webkitallowfullscreen: 'true',
+        mozallowfullscreen: 'true',
+        frameBorder: 'none',
+        scrolling: 'no',
+        height: '411',
+        width: '100%'
+      });
+    }
+    return null;
   }
+
   // TODO - add players for other video types
   return null;
 };