@kids-reporter/draft-renderer 0.1.0 → 0.2.1

package/lib/block-renderers/info-box-block.js

@@ -5,120 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.InfoBoxBlock = InfoBoxBlock;
 
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _sharedStyle = require("../shared-style");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const infoboxDefaultSpacing = 8;
-const InfoBoxRenderWrapper = _styledComponents.default.div`
-  background: #f6f6fb;
-  position: relative;
-  padding: 24px 0px;
-  width: calc(100% + 40px);
-  transform: translateX(-20px);
-  ${({
-  theme
-}) => theme.margin.default};
-
-  ${({
-  theme
-}) => theme.breakpoint.md} {
-    max-width: 560px;
-    transform: none;
-  }
-`;
-const InfoTitle = _styledComponents.default.div`
-  width: 100%;
-  font-style: normal;
-  font-weight: 700;
-  ${({
-  theme
-}) => theme.fontSize.md};
-  line-height: 1.5;
-  letter-spacing: 0.03em;
-  color: #000928;
-  border-left: 8px solid #04295e;
-  padding: 0 32px 0 24px;
-  margin-bottom: ${infoboxDefaultSpacing}px;
-`;
-const InfoContent = _styledComponents.default.div`
-  padding: 0px 32px;
-  font-style: normal;
-  font-weight: 400;
-  ${({
-  theme
-}) => theme.fontSize.sm};
-  line-height: 1.6;
-  color: rgba(0, 9, 40, 0.87);
-
-  > div > * + * {
-    margin: ${infoboxDefaultSpacing}px 0 0;
-    min-height: 0.01px; //to make margins between paragraphs effective
-  }
-
-  h2 {
-    ${_sharedStyle.defaultH2Style}
-  }
-
-  ul {
-    ${_sharedStyle.defaultUlStyle}
-    margin-top: ${infoboxDefaultSpacing}px;
-
-    > li {
-      ${_sharedStyle.defaultUnorderedListStyle}
-
-      & + li {
-        margin: ${infoboxDefaultSpacing / 2}px 0 0;
-      }
-    }
-  }
-
-  ol {
-    ${_sharedStyle.defaultOlStyle}
-    margin-top: ${infoboxDefaultSpacing}px;
-
-    > li {
-      ${_sharedStyle.defaultOrderedListStyle}
-
-      & + li {
-        margin: ${infoboxDefaultSpacing / 2}px 0 0;
-      }
-    }
-  }
-
-  a {
-    ${_sharedStyle.defaultLinkStyle}
-  }
-
-  blockquote {
-    ${_sharedStyle.defaultBlockQuoteStyle}
-  }
-`;
-
+/* eslint-disable */
 function InfoBoxBlock(props) {
-  const {
-    block,
-    contentState
-  } = props;
-  const entityKey = block.getEntityAt(0);
-  const entity = contentState.getEntity(entityKey);
-  const {
-    title,
-    body
-  } = entity.getData();
-  return /*#__PURE__*/_react.default.createElement(InfoBoxRenderWrapper, {
-    className: "infobox-wrapper"
-  }, /*#__PURE__*/_react.default.createElement(InfoTitle, {
-    className: "infobox-title"
-  }, title), /*#__PURE__*/_react.default.createElement(InfoContent, {
-    className: "infobox-content"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    dangerouslySetInnerHTML: {
-      __html: body
-    }
-  })));
+  return null;
 }

package/lib/block-renderers/multimedia.js

@@ -0,0 +1,127 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// @ts-ignore @twreporter/core does not provide ts header file
+const mockup = {
+  mobile: {
+    figure: {
+      width: '100%'
+    },
+    caption: {
+      width: 250 // px
+
+    }
+  },
+  tablet: {
+    figure: {
+      width: '100%'
+    },
+    caption: {
+      width: 512 // px
+
+    }
+  },
+  desktop: {
+    figure: {
+      width: {
+        normal: 100,
+        // %
+        small: 403 // px
+
+      }
+    },
+    caption: {
+      width: 180 // px
+
+    }
+  },
+  hd: {
+    figure: {
+      width: {
+        normal: 100,
+        // %
+        small: 532 // px
+
+      }
+    },
+    caption: {
+      width: 265 // px
+
+    }
+  }
+};
+const Caption = _styledComponents.default.figcaption`
+  color: #494949;
+  &::after {
+    border-color: #d0a67d;
+  }
+
+  line-height: 1.36;
+  letter-spacing: 0.5px;
+  font-weight: normal;
+  font-size: 14px;
+  margin-bottom: 30px;
+
+  /* border-bottom of caption */
+  &::after {
+    content: '';
+    height: 1px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    border-width: 0 0 1px 0;
+    border-style: solid;
+  }
+
+  ${_mediaQuery.default.tabletAndBelow`
+    position: relative;
+    margin-left: auto;
+    padding: 15px 15px 15px 0;
+    &:after {
+      width: calc(100% - 15px);
+    }
+  `}
+
+  ${_mediaQuery.default.mobileOnly`
+    max-width: ${mockup.mobile.caption.width}px;
+  `}
+
+  ${_mediaQuery.default.tabletOnly`
+    max-width: ${mockup.tablet.caption.width}px;
+  `}
+
+  ${_mediaQuery.default.desktopAndAbove`
+    /* clear float */
+    clear: both;
+
+    position: relative;
+    float: right;
+
+    &:after {
+      width: 100%;
+    }
+  `}
+
+  ${_mediaQuery.default.desktopOnly`
+    width: ${mockup.desktop.caption.width}px;
+    padding: 15px 0 15px 0;
+  `}
+  ${_mediaQuery.default.hdOnly`
+    width: ${mockup.hd.caption.width}px;
+    padding: 25px 0 20px 0;
+  `}
+`;
+var _default = {
+  Caption
+};
+exports.default = _default;