@mjhls/mjh-framework 1.0.115 → 1.0.117

package/dist/index.js

@@ -27,6 +27,7 @@ var Button = _interopDefault(require('react-bootstrap/Button'));
 var Nav = _interopDefault(require('react-bootstrap/Nav'));
 var Navbar = _interopDefault(require('react-bootstrap/Navbar'));
 var NavDropdown = _interopDefault(require('react-bootstrap/NavDropdown'));
+var Pagination = _interopDefault(require('react-bootstrap/Pagination'));
 var Carousel = _interopDefault(require('react-bootstrap/Carousel'));
 var Breadcrumb = _interopDefault(require('react-bootstrap/Breadcrumb'));
 
@@ -11211,13 +11212,13 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
           React__default.createElement(
             reactBootstrap.Media,
             { 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(
                 'a',
-                null,
-                article.thumbnail && article.thumbnail.asset ? React__default.createElement('img', { className: 'mr-3', src: renderCardImage(article, builder, imageHeight, imageWidth), alt: article.title }) : React__default.createElement('img', { src: defaultImage, className: 'mr-3', width: '240', height: '135' })
+                { className: 'img-wrapper' },
+                article.thumbnail && article.thumbnail.asset ? React__default.createElement('img', { className: 'mr-3 img-fluid', src: renderCardImage(article, builder, imageHeight, imageWidth), alt: article.title }) : React__default.createElement('img', { src: defaultImage, className: 'mr-3', width: '240', height: '135' })
               )
             ),
             React__default.createElement(
@@ -11266,7 +11267,12 @@ var cardLoader = function cardLoader(data, builder, mapping, values, seoPaginate
           )
         )
       );
-    })
+    }),
+    React__default.createElement(
+      'style',
+      { jsx: true },
+      '\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        '
+    )
   );
 };
 
@@ -12373,7 +12379,7 @@ var NavMagazine = function NavMagazine(props) {
               React__default.createElement(
                 'a',
                 null,
-                mobileLogo && screenWidth < 776 ? React__default.createElement('img', { src: mobileLogo }) : React__default.createElement('img', { src: logo, style: { height: '55px' } })
+                mobileLogo && screenWidth < 776 ? React__default.createElement('img', { src: mobileLogo }) : React__default.createElement('img', { src: logo, className: 'logo', style: { height: '55px' } })
               )
             )
           )
@@ -12501,7 +12507,7 @@ var NavMagazine = function NavMagazine(props) {
     React__default.createElement(
       'style',
       { jsx: true },
-      '\n        .sticky-home {\n          position: relative;\n          top: -3px;\n          left: -6px;\n          cursor: pointer;\n        }\n        @media screen and (max-width: 991px) {\n          .mobile-nav .nav-toggle {\n            width: 100%;\n          }\n          .mobile-nav .nav-toggle .navbar-toggler {\n            float: left;\n            height: 45px;\n          }\n          .mobile-nav .nav-toggle .form-inline {\n            float: right;\n            margin: 4px 0px 0px 0px;\n          }\n          .mobile-nav .form-inline .mobile-search {\n            width: auto;\n          }\n          .sticky-home {\n            display: none;\n          }\n          .dropdown-menu {\n            max-height: 315px;\n            overflow: auto;\n          }\n          ::-webkit-scrollbar {\n            width: 10px;\n          }\n          ::-webkit-scrollbar-thumb {\n            border-radius: 4px;\n            background-color: rgba(214, 214, 214, 0.8);\n            box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n            -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n          }\n          .navbar-expand-lg .show#basic-navbar-sub {\n            display: block;\n          }\n          .navbar .mobile-nav .navbar-collapse.show {\n            padding-bottom: 20px;\n            border-bottom: 0.5px solid white;\n            margin-bottom: 15px;\n          }\n          .navbar .mobile-nav .navbar-collapse .form-inline {\n            display: none;\n          }\n          .navbar .mobile-nav .navbar-collapse {\n            margin-top: 15px;\n          }\n          .navbar .mobile-nav .navbar-collapse:last-child {\n            border-bottom: none;\n            margin-bottom: 0px;\n            padding-bottom: 0px;\n            margin-top: 0px;\n          }\n          .navbar .mobile-nav .navbar-collapse .nav-footer ul {\n            list-style-type: none;\n            padding: inherit;\n            margin-bottom: 0rem;\n          }\n          .navbar .mobile-nav .navbar-collapse .nav-footer .nav-link {\n            text-transform: capitalize !important;\n            font-weight: 300;\n          }\n          .navbar .mobile-nav .dropdown-item:focus {\n            background-color: #696969;\n          }\n          .navbar .mobile-nav .dropdown-menu .dropdown-item {\n            color: white;\n          }\n          .navbar .mobile-nav .dropdown-menu {\n            background: inherit;\n            border: none;\n          }\n          .navbar .mobile-nav .dropdown-menu.show {\n            max-height: 100px;\n          }\n        }\n        @media screen and (min-width: 992px) {\n          #basic-navbar-sub {\n            display: none !important;\n          }\n          .navbar .mobile-nav .dropdown-menu .dropdown-item {\n            color: #696969;\n          }\n          .navbar .mobile-nav .dropdown-menu {\n            background: white;\n            border: 1 px solid #708090;\n          }\n          .mobile-nav .nav-toggle .form-inline {\n            display: none;\n          }\n        }\n\n        @media screen and (max-width: 367px) {\n          .mobile-nav .nav-toggle .form-inline .mobile-search {\n            width: 60%;\n          }\n          .mobile-nav .nav-toggle .form-inline {\n            width: 70%;\n          }\n        }\n        @media screen and (max-width: 328px) {\n          .mobile-nav .nav-toggle .form-inline .mobile-search {\n           margin-right: 5px\n          }\n        }\n      '
+      '\n        .sticky-home {\n          position: relative;\n          top: -3px;\n          left: -6px;\n          cursor: pointer;\n        }\n        @media screen and (max-width: 991px) {\n          .mobile-nav .nav-toggle {\n            width: 100%;\n          }\n          .mobile-nav .nav-toggle .navbar-toggler {\n            float: left;\n            height: 45px;\n          }\n          .mobile-nav .nav-toggle .form-inline {\n            float: right;\n            margin: 4px 0px 0px 0px;\n          }\n          .mobile-nav .form-inline .mobile-search {\n            width: auto;\n          }\n          .sticky-home {\n            display: none;\n          }\n          .dropdown-menu {\n            max-height: 315px;\n            overflow: auto;\n          }\n          ::-webkit-scrollbar {\n            width: 10px;\n          }\n          ::-webkit-scrollbar-thumb {\n            border-radius: 4px;\n            background-color: rgba(214, 214, 214, 0.8);\n            box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n            -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n          }\n          .navbar-expand-lg .show#basic-navbar-sub {\n            display: block;\n          }\n          .navbar .mobile-nav .navbar-collapse.show {\n            padding-bottom: 20px;\n            border-bottom: 0.5px solid white;\n            margin-bottom: 15px;\n          }\n          .navbar .mobile-nav .navbar-collapse .form-inline {\n            display: none;\n          }\n          .navbar .mobile-nav .navbar-collapse {\n            margin-top: 15px;\n          }\n          .navbar .mobile-nav .navbar-collapse:last-child {\n            border-bottom: none;\n            margin-bottom: 0px;\n            padding-bottom: 0px;\n            margin-top: 0px;\n          }\n          .navbar .mobile-nav .navbar-collapse .nav-footer ul {\n            list-style-type: none;\n            padding: inherit;\n            margin-bottom: 0rem;\n          }\n          .navbar .mobile-nav .navbar-collapse .nav-footer .nav-link {\n            text-transform: capitalize !important;\n            font-weight: 300;\n          }\n          .navbar .mobile-nav .dropdown-item:focus {\n            background-color: #696969;\n          }\n          .navbar .mobile-nav .dropdown-menu .dropdown-item {\n            color: white;\n          }\n          .navbar .mobile-nav .dropdown-menu {\n            background: inherit;\n            border: none;\n          }\n          .navbar .mobile-nav .dropdown-menu.show {\n            max-height: 100px;\n          }\n        }\n        @media screen and (min-width: 992px) {\n          #basic-navbar-sub {\n            display: none !important;\n          }\n          .navbar .mobile-nav .dropdown-menu .dropdown-item {\n            color: #696969;\n          }\n          .navbar .mobile-nav .dropdown-menu {\n            background: white;\n            border: 1 px solid #708090;\n          }\n          .mobile-nav .nav-toggle .form-inline {\n            display: none;\n          }\n        }\n\n        @media screen and (max-width: 367px) {\n          .mobile-nav .nav-toggle .form-inline .mobile-search {\n            width: 60%;\n          }\n          .mobile-nav .nav-toggle .form-inline {\n            width: 70%;\n          }\n        }\n        @media screen and (max-width: 328px) {\n          .mobile-nav .nav-toggle .form-inline .mobile-search {\n            margin-right: 5px;\n          }\n        }\n        @media screen and (max-width: 767px) {\n          .logo {\n            width: 100%;\n            padding-left: 10px;\n            padding-right: 10px;\n          }\n        }\n      '
     )
   );
 };
@@ -20132,23 +20138,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 = React.useState(null),
       _useState2 = slicedToArray(_useState, 2),
       selectedChoice = _useState2[0],
       setSelectedChoice = _useState2[1];
 
-  var _useState3 = React.useState(false),
+  var _useState3 = React.useState(showVotes),
       _useState4 = slicedToArray(_useState3, 2),
       showAnswer = _useState4[0],
       setShowAnswer = _useState4[1];
@@ -20158,6 +20162,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;
@@ -20179,7 +20189,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(
@@ -20235,7 +20245,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 = React.useState(1),
+      _useState2 = slicedToArray(_useState, 2),
+      currentPage = _useState2[0],
+      setCurrentPage = _useState2[1];
+
+  var _useState3 = React.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) {
@@ -20300,7 +20397,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: {