@mjhls/mjh-framework 1.0.116 → 1.0.117

package/README.md

@@ -1,5 +1,5 @@
 
-# mjh-framework v. 1.0.116
+# mjh-framework v. 1.0.117
 
 
 > Foundation Framework

package/dist/index.es.js

@@ -20,6 +20,7 @@ import Button from 'react-bootstrap/Button';
 import Nav from 'react-bootstrap/Nav';
 import Navbar from 'react-bootstrap/Navbar';
 import NavDropdown from 'react-bootstrap/NavDropdown';
+import Pagination from 'react-bootstrap/Pagination';
 import Carousel$1 from 'react-bootstrap/Carousel';
 import Breadcrumb from 'react-bootstrap/Breadcrumb';
 
@@ -11204,7 +11205,7 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
           React__default.createElement(
             Media$1,
             { key: article._id ? article._id : index$$1, style: { marginBottom: '1.25rem', paddingBottom: '1.25rem', borderBottom: '1px solid #ddd' } },
-            React__default.createElement(
+            (article.thumbnail && article.thumbnail.asset || defaultImage) && React__default.createElement(
               Link,
               { href: mapping[contentCategoryName] + '/[url]', as: mapping[contentCategoryName] + '/' + article.url.current },
               React__default.createElement(
@@ -11263,7 +11264,7 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
     React__default.createElement(
       'style',
       { jsx: true },
-      '\n          @media only screen and (min-width: 768px) {\n            .img-wrapper {\n              max-width: 44%;\n            }\n            .img-wrapper > .img-fluid {\n              padding-right: 15px;\n            }\n          }\n          @media only screen and (max-width: 767px) {\n            .media {\n              flex-direction: column;\n            }\n            .media-body {\n              padding-top: 10px;\n            }\n          }\n        '
+      '\n          .img-wrapper img {\n            max-height: 200px;\n            width: 100%;\n            object-fit: cover;\n          }\n          @media only screen and (min-width: 768px) {\n            .img-wrapper {\n              max-width: 44%;\n            }\n            .img-wrapper > img {\n              padding-right: 1em;\n            }\n          }\n          @media only screen and (max-width: 767px) {\n            .img-wrapper {\n              max-width: 100%;\n            }\n            .img-wrapper img {\n              padding-bottom: 1em;\n            }\n            .media {\n              flex-direction: column;\n            }\n          }\n        '
     )
   );
 };
@@ -20130,23 +20131,21 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
   );
 };
 
-var onSubmitPoll = function onSubmitPoll(e, setShowAnswer) {
-  e.preventDefault();
-  setShowAnswer(true);
-};
-
 var Poll = function Poll(_ref) {
   var node = _ref.node,
       client = _ref.client,
       pageview = _ref.pageview,
-      videoAccountIDs = _ref.videoAccountIDs;
+      videoAccountIDs = _ref.videoAccountIDs,
+      onVote = _ref.onVote,
+      _ref$showVotes = _ref.showVotes,
+      showVotes = _ref$showVotes === undefined ? false : _ref$showVotes;
 
   var _useState = useState(null),
       _useState2 = slicedToArray(_useState, 2),
       selectedChoice = _useState2[0],
       setSelectedChoice = _useState2[1];
 
-  var _useState3 = useState(false),
+  var _useState3 = useState(showVotes),
       _useState4 = slicedToArray(_useState3, 2),
       showAnswer = _useState4[0],
       setShowAnswer = _useState4[1];
@@ -20156,6 +20155,12 @@ var Poll = function Poll(_ref) {
       response = node.response;
 
 
+  var onSubmitPoll = function onSubmitPoll(e, setShowAnswer) {
+    e.preventDefault();
+    onVote(node._key, selectedChoice);
+    setShowAnswer(true);
+  };
+
   var choicesTotalCount = choices && choices.reduce(function (acc, choice) {
     acc = acc + parseInt(choice.choiceCount);
     return acc;
@@ -20177,7 +20182,7 @@ var Poll = function Poll(_ref) {
         return React__default.createElement(
           'div',
           { key: choice._key },
-          React__default.createElement('input', { type: 'radio', id: 'male', name: choice._type, value: choice.choiceText, onChange: function onChange(e) {
+          React__default.createElement('input', { type: 'radio', id: 'male', name: choice._type, value: choice._key, onChange: function onChange(e) {
               return setSelectedChoice(e.target.value);
             } }),
           React__default.createElement(
@@ -20233,7 +20238,94 @@ var Poll = function Poll(_ref) {
   );
 };
 
-var getSerializers$1 = function getSerializers(client, pageview, videoAccountIDs) {
+var Quiz = function Quiz(_ref) {
+  var quizzes = _ref.quizzes;
+
+  var pageCount = quizzes.length;
+
+  var _useState = useState(1),
+      _useState2 = slicedToArray(_useState, 2),
+      currentPage = _useState2[0],
+      setCurrentPage = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = slicedToArray(_useState3, 2),
+      showAnswer = _useState4[0],
+      setShowAnswer = _useState4[1];
+
+  var changePage = function changePage(page) {
+    if (page > 0 && page <= pageCount) {
+      setShowAnswer(false);
+      setCurrentPage(page);
+    }
+  };
+
+  var renderPagination = function renderPagination() {
+    var pages = [];
+
+    var _loop = function _loop(i) {
+      pages.push(React__default.createElement(
+        Pagination.Item,
+        { onClick: function onClick() {
+            return changePage(i);
+          }, active: i === currentPage },
+        i
+      ));
+    };
+
+    for (var i = 1; i <= pageCount; i++) {
+      _loop(i);
+    }
+    return React__default.createElement(
+      Pagination,
+      { className: 'p-0 m-0' },
+      React__default.createElement(Pagination.First, { onClick: function onClick() {
+          return changePage(1);
+        } }),
+      React__default.createElement(Pagination.Prev, { onClick: function onClick() {
+          return changePage(currentPage - 1);
+        } }),
+      pages,
+      React__default.createElement(Pagination.Next, { onClick: function onClick() {
+          return changePage(currentPage + 1);
+        } }),
+      React__default.createElement(Pagination.Last, { onClick: function onClick() {
+          return changePage(pageCount);
+        } })
+    );
+  };
+
+  return React__default.createElement(
+    React__default.Fragment,
+    null,
+    quizzes[currentPage - 1] && React__default.createElement(BlockContent, { blocks: quizzes[currentPage - 1].question }),
+    !showAnswer && React__default.createElement(
+      Button,
+      { onClick: function onClick() {
+          return setShowAnswer(true);
+        }, variant: 'info', block: true },
+      'Please click here for answer'
+    ),
+    quizzes[currentPage - 1] && showAnswer && React__default.createElement(
+      React__default.Fragment,
+      null,
+      React__default.createElement(
+        'h4',
+        null,
+        'Answer:'
+      ),
+      React__default.createElement(BlockContent, { blocks: quizzes[currentPage - 1].answer })
+    ),
+    React__default.createElement('br', null),
+    React__default.createElement(
+      'div',
+      { className: 'd-flex justify-content-center' },
+      renderPagination()
+    )
+  );
+};
+
+var getSerializers$1 = function getSerializers(client, pageview, videoAccountIDs, onVote, showVotes) {
   return {
     types: {
       youtube: function youtube(_ref) {
@@ -20298,7 +20390,13 @@ var getSerializers$1 = function getSerializers(client, pageview, videoAccountIDs
       poll: function poll(_ref11) {
         var node = _ref11.node;
 
-        return React__default.createElement(Poll, { node: node, client: client, pageview: pageview, videoAccountIDs: videoAccountIDs });
+        return React__default.createElement(Poll, { node: node, client: client, pageview: pageview, videoAccountIDs: videoAccountIDs, onVote: onVote, showVotes: showVotes });
+      },
+      quiz: function quiz(_ref12) {
+        var node = _ref12.node;
+        var quizzes = node.quizzes;
+
+        return React__default.createElement(Quiz, { quizzes: quizzes });
       }
     },
     marks: {