@kids-reporter/draft-renderer 0.4.22 → 0.4.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/lib/block-render-maps/annotation.js +9 -2
  2. package/lib/block-render-maps/article-brief.js +1 -0
  3. package/lib/block-render-maps/article-content.js +18 -6
  4. package/lib/block-render-maps/info-box.js +19 -4
  5. package/lib/block-renderers/blockquote.js +8 -2
  6. package/lib/block-renderers/embedded-code-block.js +3 -1
  7. package/lib/block-renderers/image-block.js +3 -1
  8. package/lib/block-renderers/info-box-block.js +2 -2
  9. package/lib/block-renderers/multimedia.js +3 -1
  10. package/lib/custom-style-fn.js +3 -1
  11. package/lib/draft-renderer.js +17 -6
  12. package/package.json +1 -1
package/lib/block-render-maps/annotation.js CHANGED
@@ -14,15 +14,22 @@ const HeadingForAnnotation = (0, _styledComponents.default)(_articleContent.Head
14
14
  margin: 0 auto 27px auto;
15
15
  `;
16
16
  const ListForAnnotation = (0, _styledComponents.default)(_articleContent.List)`
17
+ color: #494949;
18
+
17
19
  li {
18
- font-size: 16px;
20
+ font-size: ${({
21
+ theme
22
+ }) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '20px' : '16px'};
19
23
  }
20
24
  `;
21
25
  const ParagraphForAnnotation = (0, _styledComponents.default)(_articleContent.Paragraph)`
22
26
  /* overwrite css */
23
- font-size: 16px;
27
+ font-size: ${({
28
+ theme
29
+ }) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '20px' : '16px'};
24
30
  font-weight: 400;
25
31
  margin-bottom: 20px;
32
+ color: #494949;
26
33
  `;
27
34
  const _blockRenderMapForAnnotation = _immutable.default.Map({
28
35
  atomic: {
package/lib/block-render-maps/article-brief.js CHANGED
@@ -11,6 +11,7 @@ var _draftJs = require("draft-js");
11
11
  var _articleContent = require("./article-content");
12
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
13
  const ParagraphForIntroduction = (0, _styledComponents.default)(_articleContent.Paragraph)`
14
+ font-size: 20px;
14
15
  color: #575757;
15
16
  `;
16
17
  const ListForIntroduction = (0, _styledComponents.default)(_articleContent.List)`
package/lib/block-render-maps/article-content.js CHANGED
@@ -13,7 +13,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
13
13
  const Paragraph = _styledComponents.default.div`
14
14
  width: 100%;
15
15
  max-width: 700px;
16
- font-size: 18px;
16
+ font-size: ${({
17
+ theme
18
+ }) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '22px' : '18px'};
17
19
  font-weight: 400;
18
20
  color: #3a4f66;
19
21
  letter-spacing: 0.9px;
@@ -46,19 +48,27 @@ const Heading = _styledComponents.default.div`
46
48
  }
47
49
 
48
50
  h2 {
49
- font-size: 35px;
51
+ font-size: ${({
52
+ theme
53
+ }) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '39px' : '35px'};
50
54
  }
51
55
 
52
56
  h3 {
53
- font-size: 30px;
57
+ font-size: ${({
58
+ theme
59
+ }) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '34px' : '30px'};
54
60
  }
55
61
 
56
62
  h4 {
57
- font-size: 25px;
63
+ font-size: ${({
64
+ theme
65
+ }) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '29px' : '25px'};
58
66
  }
59
67
 
60
68
  h5 {
61
- font-size: 20px;
69
+ font-size: ${({
70
+ theme
71
+ }) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '24px' : '20px'};
62
72
  }
63
73
 
64
74
  ${_mediaQuery.mediaQuery.smallOnly} {
@@ -71,7 +81,9 @@ const List = _styledComponents.default.ol`
71
81
  width: 100%;
72
82
  max-width: 700px;
73
83
  margin: 0 auto 27px auto;
74
- font-size: 18px;
84
+ font-size: ${({
85
+ theme
86
+ }) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '22px' : '18px'};
75
87
  line-height: 2;
76
88
  letter-spacing: 0.9px;
77
89
  color: #3a4f66;
package/lib/block-render-maps/info-box.js CHANGED
@@ -13,19 +13,34 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
13
13
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
14
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
15
  const HeadingForInfoBox = (0, _styledComponents.default)(_articleContent.Heading)`
16
- margin-top: 30px;
17
- margin-bottom: 30px;
16
+ margin-top: 0px;
17
+ margin-bottom: 20px;
18
+
19
+ h4 {
20
+ font-size: 24px;
21
+ }
18
22
  `;
19
23
  const ListForInfoBox = (0, _styledComponents.default)(_articleContent.List)`
24
+ padding-left: 2rem;
25
+ margin-bottom: 20px;
26
+
27
+ color: #232323;
20
28
  li {
21
- font-size: 16px;
29
+ font-size: ${({
30
+ theme
31
+ }) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '20px' : '16px'};
32
+ line-height: 1.5;
22
33
  }
23
34
  `;
24
35
  const ParagraphForInfoBox = (0, _styledComponents.default)(_articleContent.Paragraph)`
25
36
  /* overwrite css */
26
- font-size: 16px;
37
+ font-size: ${({
38
+ theme
39
+ }) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '20px' : '16px'};
27
40
  font-weight: 400;
28
41
  margin-bottom: 20px;
42
+ line-height: 1.5;
43
+ color: #232323;
29
44
  `;
30
45
  const Atomic = _styledComponents.default.div`
31
46
  /* reset figure default styles */
package/lib/block-renderers/blockquote.js CHANGED
@@ -29,15 +29,21 @@ const QuoteLeftContainer = _styledComponents.default.blockquote`
29
29
  background-color: #f4f4f4;
30
30
  display: flex;
31
31
  border-radius: 20px;
32
+
33
+ ${_mediaQuery.mediaQuery.smallOnly} {
34
+ padding: 20px;
35
+ }
32
36
  `;
33
37
  const QuoteText = _styledComponents.default.p`
34
38
  margin: 0;
35
39
  word-break: break-word;
36
- font-size: 18px;
40
+ font-size: ${({
41
+ theme
42
+ }) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '22px' : '18px'};
37
43
  font-weight: 500;
38
44
  letter-spacing: 0.9px;
39
45
  line-height: 2;
40
- color: #3a4f66;
46
+ color: #232323;
41
47
  `;
42
48
  const SvgBlock = _styledComponents.default.div`
43
49
  margin-right: 16px;
package/lib/block-renderers/embedded-code-block.js CHANGED
@@ -25,7 +25,9 @@ const Block = _styledComponents.default.div`
25
25
  `;
26
26
  exports.Block = Block;
27
27
  const Caption = _styledComponents.default.div`
28
- font-size: 14px;
28
+ font-size: ${({
29
+ theme
30
+ }) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '18px' : '14px'};
29
31
  line-height: 1.43;
30
32
  letter-spacing: 0.4px;
31
33
  color: #808080;
package/lib/block-renderers/image-block.js CHANGED
@@ -16,7 +16,9 @@ const Figure = _styledComponents.default.figure`
16
16
  const FigureCaption = _styledComponents.default.figcaption`
17
17
  width: fit-content;
18
18
  max-width: 100%;
19
- font-size: 14px;
19
+ font-size: ${({
20
+ theme
21
+ }) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '18px' : '14px'};
20
22
  margin-left: auto;
21
23
  margin-right: auto;
22
24
  margin-top: 0.5em;
package/lib/block-renderers/info-box-block.js CHANGED
@@ -22,12 +22,12 @@ var InfoBoxTypeEnum = /*#__PURE__*/function (InfoBoxTypeEnum) {
22
22
  return InfoBoxTypeEnum;
23
23
  }(InfoBoxTypeEnum || {});
24
24
  const containerStyles = (0, _styledComponents.css)`
25
- padding: 40px;
25
+ padding: 40px 40px 20px 40px;
26
26
  border-radius: 30px;
27
27
  position: relative;
28
28
 
29
29
  ${_mediaQuery.mediaQuery.smallOnly} {
30
- padding: 20px;
30
+ padding: 20px 20px 0px 20px;
31
31
  }
32
32
  `;
33
33
  const NewsChargeStationContainer = _styledComponents.default.div`
package/lib/block-renderers/multimedia.js CHANGED
@@ -67,7 +67,9 @@ const Caption = _styledComponents.default.figcaption`
67
67
  line-height: 1.36;
68
68
  letter-spacing: 0.5px;
69
69
  font-weight: normal;
70
- font-size: 14px;
70
+ font-size: ${({
71
+ theme
72
+ }) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '18px' : '14px'};
71
73
  margin-bottom: 30px;
72
74
 
73
75
  /* border-bottom of caption */
package/lib/custom-style-fn.js CHANGED
@@ -3,9 +3,11 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = exports.customStyleFn = void 0;
6
+ exports.fontColorPrefix = exports.default = exports.customStyleFn = exports.bgColorPrefix = void 0;
7
7
  const bgColorPrefix = 'BACKGROUND_COLOR_';
8
+ exports.bgColorPrefix = bgColorPrefix;
8
9
  const fontColorPrefix = 'FONT_COLOR_';
10
+ exports.fontColorPrefix = fontColorPrefix;
9
11
  const customStyleFn = style => {
10
12
  return style.reduce((cssObject = {}, styleName) => {
11
13
  if (styleName !== null && styleName !== void 0 && styleName.startsWith(bgColorPrefix)) {
package/lib/draft-renderer.js CHANGED
@@ -20,15 +20,22 @@ const blockRendererFn = block => {
20
20
  const atomicBlockObj = (0, _blockRendererFn.atomicBlockRenderer)(block);
21
21
  return atomicBlockObj;
22
22
  };
23
+ var FontSizeLevel = /*#__PURE__*/function (FontSizeLevel) {
24
+ FontSizeLevel["NORMAL"] = "normal";
25
+ FontSizeLevel["LARGE"] = "large";
26
+ return FontSizeLevel;
27
+ }(FontSizeLevel || {});
23
28
  function DraftRenderer({
24
29
  rawContentState,
25
- themeColor = _index2.ThemeColorEnum.RED
30
+ themeColor = _index2.ThemeColorEnum.RED,
31
+ fontSizeLevel = FontSizeLevel.NORMAL
26
32
  }) {
27
33
  const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
28
34
  const editorState = _draftJs.EditorState.createWithContent(contentState, _index3.decorator);
29
35
  return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
30
36
  theme: {
31
- themeColor
37
+ themeColor,
38
+ fontSizeLevel
32
39
  }
33
40
  }, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
34
41
  editorState: editorState,
@@ -45,13 +52,15 @@ const ArticleBodyDraftRenderer = DraftRenderer;
45
52
  exports.ArticleBodyDraftRenderer = ArticleBodyDraftRenderer;
46
53
  function ArticleIntroductionDraftRenderer({
47
54
  rawContentState,
48
- themeColor = _index2.ThemeColorEnum.RED
55
+ themeColor = _index2.ThemeColorEnum.RED,
56
+ fontSizeLevel = FontSizeLevel.NORMAL
49
57
  }) {
50
58
  const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
51
59
  const editorState = _draftJs.EditorState.createWithContent(contentState, _index3.decorator);
52
60
  return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
53
61
  theme: {
54
- themeColor
62
+ themeColor,
63
+ fontSizeLevel
55
64
  }
56
65
  }, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
57
66
  editorState: editorState,
@@ -65,13 +74,15 @@ function ArticleIntroductionDraftRenderer({
65
74
  }
66
75
  function ProjectContentDraftRenderer({
67
76
  rawContentState,
68
- themeColor = _index2.ThemeColorEnum.BLUE
77
+ themeColor = _index2.ThemeColorEnum.BLUE,
78
+ fontSizeLevel = FontSizeLevel.NORMAL
69
79
  }) {
70
80
  const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
71
81
  const editorState = _draftJs.EditorState.createWithContent(contentState, _index3.decorator);
72
82
  return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
73
83
  theme: {
74
- themeColor
84
+ themeColor,
85
+ fontSizeLevel
75
86
  }
76
87
  }, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
77
88
  editorState: editorState,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kids-reporter/draft-renderer",
3
- "version": "0.4.22",
3
+ "version": "0.4.24",
4
4
  "description": "",
5
5
  "main": "lib/index.js",
6
6
  "scripts": {