@kids-reporter/draft-renderer 0.4.8 → 0.4.12

package/lib/block-render-map.js

@@ -14,30 +14,26 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // @ts-ignore pkg does not contain ts header file
 
-const ParagraphBlock = _styledComponents.default.div`
+const Paragraph = _styledComponents.default.div`
   width: 100%;
   max-width: 700px;
-  margin: 0 auto 27px auto;
   font-size: 18px;
   font-weight: 500;
   color: #3a4f66;
   letter-spacing: 0.9px;
   line-height: 2;
+  margin: 0 auto;
 
   ${_mediaQuery.default.mobileOnly`
     padding-left: 15px;
     padding-right: 15px;
   `}
+
+  > div[data-block="true"] {
+    margin-bottom: 27px;
+  }
 `;
-function Paragraph({
-  className,
-  children
-}) {
-  return /*#__PURE__*/_react.default.createElement(ParagraphBlock, {
-    className: className
-  }, children);
-}
-const HeadingBlock = _styledComponents.default.div`
+const Heading = _styledComponents.default.div`
   font-weight: 700;
   line-height: 1.5;
   color: #232323;
@@ -73,15 +69,7 @@ const HeadingBlock = _styledComponents.default.div`
     padding-right: 15px;
   `}
 `;
-function Heading({
-  className,
-  children
-}) {
-  return /*#__PURE__*/_react.default.createElement(HeadingBlock, {
-    className: className
-  }, children);
-}
-const ListBlock = _styledComponents.default.ol`
+const List = _styledComponents.default.ol`
   width: 100%;
   max-width: 700px;
   margin: 0 auto 27px auto;
@@ -94,26 +82,16 @@ const ListBlock = _styledComponents.default.ol`
     margin-bottom: 6px;
   }
 `;
-function OrderdedList({
-  children,
-  className
-}) {
-  return /*#__PURE__*/_react.default.createElement(ListBlock, {
-    className: className
-  }, children);
-}
-function UnorderdedList({
-  children,
-  className
-}) {
-  return /*#__PURE__*/_react.default.createElement(ListBlock, {
-    as: "ul",
-    className: className
-  }, children);
-}
+const Atomic = _styledComponents.default.div`
+  /* hide empty block which immediately follows atomic block */
+  & + ${Paragraph} {
+    display: none;
+  }
+`;
 const _blockRenderMap = _immutable.default.Map({
   atomic: {
-    element: 'div'
+    element: 'div',
+    wrapper: /*#__PURE__*/_react.default.createElement(Atomic, null)
   },
   'header-two': {
     element: 'h2',
@@ -133,11 +111,13 @@ const _blockRenderMap = _immutable.default.Map({
   },
   'ordered-list-item': {
     element: 'li',
-    wrapper: /*#__PURE__*/_react.default.createElement(OrderdedList, null)
+    wrapper: /*#__PURE__*/_react.default.createElement(List, null)
   },
   'unordered-list-item': {
     element: 'li',
-    wrapper: /*#__PURE__*/_react.default.createElement(UnorderdedList, null)
+    wrapper: /*#__PURE__*/_react.default.createElement(List, {
+      as: "ul"
+    })
   },
   unstyled: {
     element: 'div',
@@ -149,20 +129,19 @@ exports.blockRenderMap = blockRenderMap;
 const ParagraphForIntroduction = (0, _styledComponents.default)(Paragraph)`
   color: #575757;
 `;
-const OrderdedListForIntroduction = (0, _styledComponents.default)(OrderdedList)`
-  color: #575757;
-`;
-const UnorderdedListForIntroduction = (0, _styledComponents.default)(UnorderdedList)`
+const ListForIntroduction = (0, _styledComponents.default)(List)`
   color: #575757;
 `;
 const blockRenderMapForIntroduction = _draftJs.DefaultDraftBlockRenderMap.merge(_immutable.default.Map({
   'ordered-list-item': {
     element: 'li',
-    wrapper: /*#__PURE__*/_react.default.createElement(OrderdedListForIntroduction, null)
+    wrapper: /*#__PURE__*/_react.default.createElement(ListForIntroduction, null)
   },
   'unordered-list-item': {
     element: 'li',
-    wrapper: /*#__PURE__*/_react.default.createElement(UnorderdedListForIntroduction, null)
+    wrapper: /*#__PURE__*/_react.default.createElement(ListForIntroduction, {
+      as: "ul"
+    })
   },
   unstyled: {
     element: 'div',
@@ -173,12 +152,7 @@ exports.blockRenderMapForIntroduction = blockRenderMapForIntroduction;
 const HeadingForAnnotation = (0, _styledComponents.default)(Heading)`
   margin: 0 auto 27px auto;
 `;
-const OrderdedListForAnnotation = (0, _styledComponents.default)(OrderdedList)`
-  li {
-    font-size: 16px;
-  }
-`;
-const UnorderdedListForAnnotation = (0, _styledComponents.default)(UnorderdedList)`
+const ListForAnnotation = (0, _styledComponents.default)(List)`
   li {
     font-size: 16px;
   }
@@ -203,11 +177,13 @@ const _blockRenderMapForAnnotation = _immutable.default.Map({
   },
   'ordered-list-item': {
     element: 'li',
-    wrapper: /*#__PURE__*/_react.default.createElement(OrderdedListForAnnotation, null)
+    wrapper: /*#__PURE__*/_react.default.createElement(ListForAnnotation, null)
   },
   'unordered-list-item': {
     element: 'li',
-    wrapper: /*#__PURE__*/_react.default.createElement(UnorderdedListForAnnotation, null)
+    wrapper: /*#__PURE__*/_react.default.createElement(ListForAnnotation, {
+      as: "ul"
+    })
   },
   unstyled: {
     element: 'div',

package/lib/block-renderers/dropdown.js

@@ -36,7 +36,6 @@ const DropdownOption = _styledComponents.default.li`
 const Container = _styledComponents.default.div`
   width: 100%;
   overflow: hidden;
-  cursor: pointer;
 
   font-size: 18px;
   font-weight: 400;
@@ -54,13 +53,14 @@ const Input = _styledComponents.default.input`
   padding: 12px 0;
   outline: none;
   border: none;
-  cursor: pointer;
 `;
-const More = _styledComponents.default.span`
+const Label = _styledComponents.default.span`
   margin-left: 10px;
   font-size: 14px;
+  cursor: pointer;
 `;
 const Arrow = _styledComponents.default.span`
+  cursor: pointer;
   margin-left: auto;
 
   width: 20px;
@@ -93,6 +93,9 @@ const Dropdown = function ({
   const [isListOpen, setIsListOpen] = (0, _react.useState)(false);
   const [selectedOption, setSelectedOption] = (0, _react.useState)(options === null || options === void 0 ? void 0 : options[0]);
   const toggleList = () => {
+    if (options.length <= 1) {
+      return;
+    }
     setIsListOpen(!isListOpen);
   };
   const selectOption = option => {
@@ -115,6 +118,6 @@ const Dropdown = function ({
     value: selectedOption.name
   }), options.length > 1 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Arrow, {
     $isListOpen: isListOpen
-  }), labelForMore && /*#__PURE__*/_react.default.createElement(More, null, labelForMore))), isListOpen && /*#__PURE__*/_react.default.createElement(DropdownOptionList, null, optionItem));
+  }), labelForMore && /*#__PURE__*/_react.default.createElement(Label, null, labelForMore))), isListOpen && /*#__PURE__*/_react.default.createElement(DropdownOptionList, null, optionItem));
 };
 exports.Dropdown = Dropdown;

package/lib/block-renderers/image-block.js

@@ -59,12 +59,6 @@ const ArticleBodyContainer = _styledComponents.default.div`
     margin: 0;
   }
 
-  &::after {
-    content: '';
-    display: table;
-    clear: both;
-  }
-
   max-width: 100%;
   margin: 0 auto 27px auto;
 
@@ -81,31 +75,23 @@ const ArticleBodyContainer = _styledComponents.default.div`
     case 'paragraph-width':
       return `
           ${_index.theme.breakpoint.xl} {
-            figure {
-              width: 700px;
-              margin-left: auto;
-              margin-right: auto;
-            }
+            max-width: 700px;
           }
         `;
     case 'right':
       return `
           ${_index.theme.breakpoint.xl} {
-            figure {
-              width: 361px;
-              float: right;
-              margin: 5px 0px 5px 27px;
-            }
+            width: 361px;
+            float: right;
+            margin: 5px 0px 5px 27px;
           }
         `;
     case 'left':
       return `
           ${_index.theme.breakpoint.xl} {
-            figure {
-              width: 361px;
-              float: left;
-              margin: 5px 27px 5px 0px;
-            }
+            width: 361px;
+            float: left;
+            margin: 5px 27px 5px 0px;
           }
         `;
   }
@@ -130,40 +116,15 @@ const InfoBoxContainer = _styledComponents.default.div`
   margin-bottom: 30px;
   width: fit-content;
 
-  &::after {
-    content: '';
-    display: table;
-    clear: both;
-  }
-
   ${props => {
   switch (props.$alignment) {
-    case 'paragraph-width':
-      {
-        return `
-          figure {
-            margin-left: auto;
-            margin-right: auto;
-          }
-          `;
-      }
-    case 'left':
+    case 'center':
       {
-        return `
-          figure {
-            max-width: 50%; 
-            margin-right: auto;
-          }
-          `;
+        return `margin-left: auto; margin-right: auto;`;
       }
     case 'right':
       {
-        return `
-          figure {
-            max-width: 50%;
-            margin-left: auto;
-          }
-        `;
+        return `margin-left: auto`;
       }
   }
 }}

package/lib/block-renderers/news-reading.js

@@ -40,6 +40,9 @@ const NewsReading = function ({
   }), [readings]);
   const [selectedOption, setSelectedOption] = (0, _react.useState)(options[0]);
   const selectedReading = readings.find(r => r.name === selectedOption.value);
+  if (readings.length === 0) {
+    return null;
+  }
   return /*#__PURE__*/_react.default.createElement(ArticleBodyContainer, {
     className: className
   }, /*#__PURE__*/_react.default.createElement(_dropdown.Dropdown, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kids-reporter/draft-renderer",
-  "version": "0.4.8",
+  "version": "0.4.12",
   "description": "",
   "main": "lib/index.js",
   "scripts": {