@kids-reporter/draft-renderer 1.0.25 → 1.0.27

package/lib/block-render-maps/annotation.js

@@ -24,13 +24,8 @@ const HeadingForAnnotation = (0, _styledComponents.default)(_articleContent.Head
   }
 `;
 const ListForAnnotation = (0, _styledComponents.default)(_articleContent.List)`
-  color: #494949;
+  color: #575757;
 
-  li {
-    font-size: ${({
-  theme
-}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '20px' : '16px'};
-  }
   margin-bottom: 0px;
 
   ${_mediaQuery.mediaQuery.smallOnly} {
@@ -40,12 +35,7 @@ const ListForAnnotation = (0, _styledComponents.default)(_articleContent.List)`
   }
 `;
 const ParagraphForAnnotation = (0, _styledComponents.default)(_articleContent.Paragraph)`
-  /* overwrite css */
-  font-size: ${({
-  theme
-}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '20px' : '16px'};
-  font-weight: 400;
-  color: #494949;
+  color: #575757;
 
   > div[data-block='true'] {
     margin-bottom: 0px;

package/lib/block-render-maps/image-link.js

@@ -13,10 +13,6 @@ var _articleContent = require("./article-content");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const ParagraphForImageLink = (0, _styledComponents.default)(_articleContent.Paragraph)`
-  /* overwrite css */
-  font-size: ${({
-  theme
-}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '18px' : '14px'};
   margin: 0;
   text-align: left;
   max-width: 100%;

package/lib/block-render-maps/info-box.js

@@ -44,21 +44,11 @@ const ListForInfoBox = (0, _styledComponents.default)(_articleContent.List)`
 
   color: #232323;
   li {
-    font-size: ${({
-  theme
-}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '20px' : '16px'};
     line-height: 1.5;
   }
 `;
 const ParagraphForInfoBox = (0, _styledComponents.default)(_articleContent.Paragraph)`
-  /* overwrite css */
-  font-size: ${({
-  theme
-}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '20px' : '16px'};
-  font-weight: 400;
   margin-bottom: 16px;
-  line-height: 1.5;
-  color: #232323;
 
   &:last-child {
     margin-bottom: 0px;

package/lib/block-render-maps/project-content.js

@@ -3,20 +3,27 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.blockRenderMap = exports.Paragraph = exports.Heading = void 0;
+exports.blockRenderMap = exports.Paragraph = void 0;
 var _draftJs = require("draft-js");
 var _immutable = _interopRequireDefault(require("immutable"));
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _mediaQuery = require("../utils/media-query");
 var _articleContent = require("./article-content");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Paragraph = exports.Paragraph = (0, _styledComponents.default)(_articleContent.Paragraph)`
-  text-align: center;
-  max-width: 750px;
-`;
-const Heading = exports.Heading = (0, _styledComponents.default)(_articleContent.Heading)`
-  text-align: center;
+  width: 100%;
+  max-width: 582px;
+  margin: 0 auto;
+
+  ${_mediaQuery.mediaQuery.desktopAbove} {
+    max-width: 608px;
+  }
+
+  ${_mediaQuery.mediaQuery.largeOnly} {
+    max-width: 648px;
+  }
 `;
 const _blockRenderMap = _immutable.default.Map({
   atomic: {
@@ -25,19 +32,19 @@ const _blockRenderMap = _immutable.default.Map({
   },
   'header-two': {
     element: 'h2',
-    wrapper: /*#__PURE__*/(0, _jsxRuntime.jsx)(Heading, {})
+    wrapper: /*#__PURE__*/(0, _jsxRuntime.jsx)(_articleContent.Heading, {})
   },
   'header-three': {
     element: 'h3',
-    wrapper: /*#__PURE__*/(0, _jsxRuntime.jsx)(Heading, {})
+    wrapper: /*#__PURE__*/(0, _jsxRuntime.jsx)(_articleContent.Heading, {})
   },
   'header-four': {
     element: 'h4',
-    wrapper: /*#__PURE__*/(0, _jsxRuntime.jsx)(Heading, {})
+    wrapper: /*#__PURE__*/(0, _jsxRuntime.jsx)(_articleContent.Heading, {})
   },
   'header-five': {
     element: 'h5',
-    wrapper: /*#__PURE__*/(0, _jsxRuntime.jsx)(Heading, {})
+    wrapper: /*#__PURE__*/(0, _jsxRuntime.jsx)(_articleContent.Heading, {})
   },
   'ordered-list-item': {
     element: 'li',

package/lib/block-renderers/blockquote.js

@@ -44,13 +44,9 @@ const QuoteLeftContainer = _styledComponents.default.blockquote`
 const QuoteText = _styledComponents.default.p`
   margin: 0;
   word-break: break-word;
-  font-size: ${({
-  theme
-}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '22px' : '18px'};
   font-weight: 700;
   letter-spacing: 0.9px;
-  line-height: 2;
-  color: #232323;
+  font-size: inherit;
 `;
 const SvgBlock = _styledComponents.default.div`
   svg {

package/lib/block-renderers/dropdown.js

@@ -35,10 +35,6 @@ const DropdownOption = _styledComponents.default.li`
 const Container = _styledComponents.default.div`
   width: 100%;
   overflow: hidden;
-
-  font-size: 18px;
-  font-weight: 400;
-  line-height: 1.5;
 `;
 const InputBlock = _styledComponents.default.div`
   display: flex;
@@ -48,14 +44,12 @@ const InputBlock = _styledComponents.default.div`
 `;
 const Input = _styledComponents.default.input`
   background: #ffffff;
-  font-size: 18px;
   padding: 12px 0;
   outline: none;
   border: none;
 `;
 const Label = _styledComponents.default.span`
   margin-left: 10px;
-  font-size: 14px;
   cursor: pointer;
 `;
 const Arrow = _styledComponents.default.span`

package/lib/block-renderers/embedded-code-block.js

@@ -21,13 +21,9 @@ const Block = exports.Block = _styledComponents.default.div`
     display: block;
   }
 `;
-const Caption = exports.Caption = _styledComponents.default.div`
-  font-size: ${({
-  theme
-}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '18px' : '14px'};
+const Caption = exports.Caption = _styledComponents.default.p`
   padding: 10px 0 0 0;
   margin-top: 5px;
-  line-height: 28px;
   text-align: center;
   color: var(--paletteColor3, #808080);
 `;

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

@@ -39,14 +39,10 @@ const Figure = _styledComponents.default.figure`
 const FigureCaption = _styledComponents.default.figcaption`
   width: fit-content;
   max-width: 100%;
-  font-size: ${({
-  theme
-}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '18px' : '14px'};
   margin-left: auto;
   margin-right: auto;
   color: #575757;
   letter-spacing: 0.7px;
-  line-height: 28px;
   text-align: center;
   padding: 16px 0 20px 0;
   border-bottom: 2px solid #c6c6c6;

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

@@ -41,14 +41,10 @@ const Figure = _styledComponents.default.figure`
 const FigureCaption = _styledComponents.default.figcaption`
   width: 100%;
   max-width: 100%;
-  font-size: ${({
-  theme
-}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '18px' : '14px'};
   margin-left: auto;
   margin-right: auto;
   color: #575757;
   letter-spacing: 0.7px;
-  line-height: 28px;
   text-align: left;
   padding: 16px 0 20px 0;
   border-bottom: 2px solid #c6c6c6;

package/lib/block-renderers/multimedia.js

@@ -50,17 +50,12 @@ const mockup = {
   }
 };
 const Caption = _styledComponents.default.figcaption`
-  color: #494949;
+  color: #575757;
   &::after {
     border-color: #c6c6c6;
   }
 
-  line-height: 1.36;
   letter-spacing: 0.5px;
-  font-weight: normal;
-  font-size: ${({
-  theme
-}) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '18px' : '14px'};
   margin-bottom: 30px;
   padding: 0 0 20px 0;
 

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

@@ -153,6 +153,7 @@ const ImageNumber = _styledComponents.default.span`
   font-size: 18px;
   font-weight: 700;
   line-height: 1.6;
+  letter-spacing: 0.9px;
   color: #232323;
 `;
 const ImageTotal = (0, _styledComponents.default)(ImageNumber)`

package/lib/utils/media-query.js

@@ -5,18 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.mediaQuery = exports.breakpoints = void 0;
 const breakpoints = exports.breakpoints = {
-  small: 375,
-  medium: 768,
+  mobile: 375,
+  tablet: 768,
   desktop: 1024,
-  // TODO: unify breakpoints in twreporter/kids reporter
-  large: 1440
+  hd: 1440
 };
 const mediaQuery = exports.mediaQuery = {
-  smallOnly: `@media (max-width: ${breakpoints.medium - 1}px)`,
-  mediumAndDesktopOnly: `@media (min-width: ${breakpoints.medium}px) and (max-width: ${breakpoints.large - 1}px)`,
-  mediumOnly: `@media (min-width: ${breakpoints.medium}px) and (max-width: ${breakpoints.desktop - 1}px)`,
+  smallOnly: `@media (max-width: ${breakpoints.tablet - 1}px)`,
+  mediumAndDesktopOnly: `@media (min-width: ${breakpoints.tablet}px) and (max-width: ${breakpoints.hd - 1}px)`,
+  mediumOnly: `@media (min-width: ${breakpoints.tablet}px) and (max-width: ${breakpoints.desktop - 1}px)`,
   desktopAbove: `@media (min-width: ${breakpoints.desktop}px)`,
-  mediumAbove: `@media (min-width: ${breakpoints.medium}px)`,
-  largeBelow: `@media (max-width: ${breakpoints.large - 1}px)`,
-  largeOnly: `@media (min-width: ${breakpoints.large}px)`
+  mediumAbove: `@media (min-width: ${breakpoints.tablet}px)`,
+  largeBelow: `@media (max-width: ${breakpoints.hd - 1}px)`,
+  largeOnly: `@media (min-width: ${breakpoints.hd}px)`
 };

package/package.json

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