@kids-reporter/draft-renderer 1.0.21 → 1.0.23

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 (8) hide show
  1. package/lib/block-render-maps/article-content.js +48 -9
  2. package/lib/block-render-maps/image-link.js +13 -7
  3. package/lib/block-renderers/blockquote.js +1 -0
  4. package/lib/block-renderers/image-block.js +3 -5
  5. package/lib/block-renderers/image-link.js +7 -8
  6. package/lib/block-renderers/slideshow-block.js +2 -2
  7. package/lib/entity-decorators/link-decorator.js +14 -0
  8. package/package.json +1 -1
package/lib/block-render-maps/article-content.js CHANGED
@@ -28,6 +28,13 @@ const Paragraph = exports.Paragraph = _styledComponents.default.div`
28
28
  > div[data-block='true'] {
29
29
  margin-bottom: 38px;
30
30
  }
31
+
32
+ &:has(+ div:not([data-paragraph-block='true'])) {
33
+ margin-bottom: 40px;
34
+ ${_mediaQuery.mediaQuery.mediumAbove} {
35
+ margin-bottom: 60px;
36
+ }
37
+ }
31
38
  `;
32
39
  const Heading = exports.Heading = _styledComponents.default.div`
33
40
  width: 100%;
@@ -53,6 +60,14 @@ const Heading = exports.Heading = _styledComponents.default.div`
53
60
  padding-left: 24px;
54
61
  padding-right: 24px;
55
62
  }
63
+
64
+ /* when the next sibling div contains a blockquote */
65
+ & + div:has(blockquote) {
66
+ margin-top: 0px;
67
+ ${_mediaQuery.mediaQuery.desktopAbove} {
68
+ margin-top: 0px;
69
+ }
70
+ }
56
71
  `;
57
72
  const List = exports.List = _styledComponents.default.ol`
58
73
  width: 100%;
@@ -77,6 +92,13 @@ const List = exports.List = _styledComponents.default.ol`
77
92
  > li {
78
93
  margin-bottom: 6px;
79
94
  }
95
+
96
+ &:has(+ div:not([data-paragraph-block='true'])) {
97
+ margin-bottom: 40px;
98
+ ${_mediaQuery.mediaQuery.mediumAbove} {
99
+ margin-bottom: 60px;
100
+ }
101
+ }
80
102
  `;
81
103
  const Atomic = exports.Atomic = _styledComponents.default.div`
82
104
  /* reset browser default styles */
@@ -84,17 +106,29 @@ const Atomic = exports.Atomic = _styledComponents.default.div`
84
106
  margin: 0;
85
107
  }
86
108
 
109
+ &:has(blockquote) {
110
+ margin-top: -2px;
111
+ ${_mediaQuery.mediaQuery.mediumAbove} {
112
+ margin-top: -22px;
113
+ }
114
+ }
115
+
87
116
  ${_mediaQuery.mediaQuery.desktopAbove} {
88
117
  div:has(+ div [data-image-block-caption-alignment='default'])
89
- [data-image-block-caption-alignment='default'],
90
- [data-image-slideshow-caption-alignment='default'] {
118
+ [data-image-block-caption-alignment='default'] {
91
119
  position: relative !important;
92
120
  }
93
- }
94
- ${_mediaQuery.mediaQuery.largeOnly} {
95
121
  div:has(+ div [data-image-block-caption-alignment='default'])
96
- [data-image-block-caption-alignment='default'],
97
- [data-image-slideshow-caption-alignment='default'] {
122
+ [data-image-slideshow-caption-alignment='default'] {
123
+ position: relative !important;
124
+ }
125
+
126
+ div:has(+ div [data-image-slideshow-caption-alignment='default'])
127
+ [data-image-block-caption-alignment='default'] {
128
+ position: relative !important;
129
+ }
130
+ div:has(+ div [data-image-slideshow-caption-alignment='default'])
131
+ [data-image-slideshow-caption-alignment='default'] {
98
132
  position: relative !important;
99
133
  }
100
134
  }
@@ -122,17 +156,22 @@ const _blockRenderMap = _immutable.default.Map({
122
156
  },
123
157
  'ordered-list-item': {
124
158
  element: 'li',
125
- wrapper: /*#__PURE__*/(0, _jsxRuntime.jsx)(List, {})
159
+ wrapper: /*#__PURE__*/(0, _jsxRuntime.jsx)(List, {
160
+ "data-paragraph-block": "true"
161
+ })
126
162
  },
127
163
  'unordered-list-item': {
128
164
  element: 'li',
129
165
  wrapper: /*#__PURE__*/(0, _jsxRuntime.jsx)(List, {
130
- as: "ul"
166
+ as: "ul",
167
+ "data-paragraph-block": "true"
131
168
  })
132
169
  },
133
170
  unstyled: {
134
171
  element: 'div',
135
- wrapper: /*#__PURE__*/(0, _jsxRuntime.jsx)(Paragraph, {})
172
+ wrapper: /*#__PURE__*/(0, _jsxRuntime.jsx)(Paragraph, {
173
+ "data-paragraph-block": "true"
174
+ })
136
175
  }
137
176
  });
138
177
  const blockRenderMap = exports.blockRenderMap = _draftJs.DefaultDraftBlockRenderMap.merge(_blockRenderMap);
package/lib/block-render-maps/image-link.js CHANGED
@@ -8,6 +8,7 @@ var _draftJs = require("draft-js");
8
8
  var _immutable = _interopRequireDefault(require("immutable"));
9
9
  var _react = _interopRequireDefault(require("react"));
10
10
  var _styledComponents = _interopRequireDefault(require("styled-components"));
11
+ var _mediaQuery = require("../utils/media-query");
11
12
  var _articleContent = require("./article-content");
12
13
  var _jsxRuntime = require("react/jsx-runtime");
13
14
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -16,13 +17,18 @@ const ParagraphForImageLink = (0, _styledComponents.default)(_articleContent.Par
16
17
  font-size: ${({
17
18
  theme
18
19
  }) => (theme === null || theme === void 0 ? void 0 : theme.fontSizeLevel) === 'large' ? '18px' : '14px'};
19
- margin-left: auto;
20
- margin-right: auto;
21
- margin-top: 0.5em;
22
- color: rgb(58, 79, 102);
23
- letter-spacing: 0.7px;
24
- line-height: 28px;
25
- text-align: center;
20
+ margin: 0;
21
+ text-align: left;
22
+ max-width: 100%;
23
+
24
+ ${_mediaQuery.mediaQuery.smallOnly} {
25
+ padding-left: 0px;
26
+ padding-right: 0px;
27
+ }
28
+
29
+ > div[data-block='true'] {
30
+ margin-bottom: 0px;
31
+ }
26
32
  `;
27
33
  const _blockRenderMapForAnnotation = _immutable.default.Map({
28
34
  atomic: {
package/lib/block-renderers/blockquote.js CHANGED
@@ -19,6 +19,7 @@ const BorderLeftLine = _styledComponents.default.div`
19
19
  border-radius: 10px;
20
20
  background-color: #c6c6c6;
21
21
  align-self: stretch;
22
+ flex-shrink: 0;
22
23
  `;
23
24
  function BorderLeftBlockquote({
24
25
  text
package/lib/block-renderers/image-block.js CHANGED
@@ -122,7 +122,6 @@ const FigureCaption = _styledComponents.default.figcaption`
122
122
  }
123
123
 
124
124
  ${_mediaQuery.mediaQuery.mediumAbove} {
125
- max-width: 340px;
126
125
  margin-left: 0px;
127
126
  margin-right: 0px;
128
127
  }
@@ -230,10 +229,10 @@ const ArticleBodyContainer = _styledComponents.default.div`
230
229
  margin: 0;
231
230
  }
232
231
 
233
- margin: 40px auto;
232
+ margin: 0 auto 40px auto;
234
233
 
235
234
  ${_mediaQuery.mediaQuery.mediumAbove} {
236
- margin: 60px auto;
235
+ margin: 0 auto 60px auto;
237
236
  }
238
237
 
239
238
  ${_mediaQuery.mediaQuery.smallOnly} {
@@ -260,8 +259,7 @@ const ArticleBodyContainer = _styledComponents.default.div`
260
259
  return `
261
260
  ${_mediaQuery.mediaQuery.smallOnly} {
262
261
  max-width: 512px;
263
- padding-left: 24px;
264
- padding-right: 24px;
262
+ padding: 0 24px;
265
263
  }
266
264
 
267
265
  ${_mediaQuery.mediaQuery.mediumAbove} {
package/lib/block-renderers/image-link.js CHANGED
@@ -39,7 +39,7 @@ const Figure = _styledComponents.default.figure`
39
39
  }}
40
40
  `;
41
41
  const FigureCaption = _styledComponents.default.figcaption`
42
- width: fit-content;
42
+ width: 100%;
43
43
  max-width: 100%;
44
44
  font-size: ${({
45
45
  theme
@@ -49,7 +49,7 @@ const FigureCaption = _styledComponents.default.figcaption`
49
49
  color: #575757;
50
50
  letter-spacing: 0.7px;
51
51
  line-height: 28px;
52
- text-align: center;
52
+ text-align: left;
53
53
  padding: 16px 0 20px 0;
54
54
  border-bottom: 2px solid #c6c6c6;
55
55
 
@@ -70,7 +70,7 @@ const FigureCaption = _styledComponents.default.figcaption`
70
70
  ${_mediaQuery.mediaQuery.mediumAbove} {
71
71
  max-width: 340px;
72
72
  margin-left: auto;
73
- margin-right: 0px;
73
+ margin-right: 32px;
74
74
  }
75
75
 
76
76
  ${_mediaQuery.mediaQuery.desktopAbove} {
@@ -116,7 +116,6 @@ const FigureCaption = _styledComponents.default.figcaption`
116
116
  }
117
117
 
118
118
  ${_mediaQuery.mediaQuery.mediumAbove} {
119
- max-width: 340px;
120
119
  margin-left: 0px;
121
120
  margin-right: 0px;
122
121
  }
@@ -215,10 +214,10 @@ const ArticleBodyContainer = _styledComponents.default.div`
215
214
  margin: 0;
216
215
  }
217
216
 
218
- margin: 40px auto;
217
+ margin: 0 auto 40px auto;
219
218
 
220
219
  ${_mediaQuery.mediaQuery.mediumAbove} {
221
- margin: 60px auto;
220
+ margin: 0 auto 60px auto;
222
221
  }
223
222
 
224
223
  ${_mediaQuery.mediaQuery.smallOnly} {
@@ -244,8 +243,7 @@ const ArticleBodyContainer = _styledComponents.default.div`
244
243
  return `
245
244
  ${_mediaQuery.mediaQuery.smallOnly} {
246
245
  max-width: 512px;
247
- padding-left: 24px;
248
- padding-right: 24px;
246
+ padding: 0 24px;
249
247
  }
250
248
 
251
249
  ${_mediaQuery.mediaQuery.mediumAbove} {
@@ -292,6 +290,7 @@ const ImageLinkInArticleBody = ({
292
290
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ArticleBodyContainer, {
293
291
  $alignment: data.alignment,
294
292
  className: className,
293
+ "data-image-link-block": "true",
295
294
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageLinkBlock, {
296
295
  data: data
297
296
  })
package/lib/block-renderers/slideshow-block.js CHANGED
@@ -550,11 +550,11 @@ function SlideshowBlock({
550
550
  }
551
551
  const ArticleBodyContainer = _styledComponents.default.div`
552
552
  ${_mediaQuery.mediaQuery.smallOnly} {
553
- margin: 40px auto;
553
+ margin: 0 auto 40px auto;
554
554
  }
555
555
 
556
556
  ${_mediaQuery.mediaQuery.mediumAbove} {
557
- margin: 60px auto;
557
+ margin: 0 auto 60px auto;
558
558
  }
559
559
  `;
560
560
  function SlideshowInArticleBody({
package/lib/entity-decorators/link-decorator.js CHANGED
@@ -17,10 +17,24 @@ const LinkWrapper = _styledComponents.default.a`
17
17
  cursor: pointer;
18
18
  text-decoration-color: #c6c6c6;
19
19
  text-underline-offset: 3px;
20
+ text-decoration-thickness: 1px;
20
21
 
21
22
  &:hover {
22
23
  text-decoration-color: #27b3f5;
23
24
  }
25
+
26
+ & > span {
27
+ color: #27b3f5 !important;
28
+ text-decoration: underline !important;
29
+ text-decoration-color: #c6c6c6 !important;
30
+ text-underline-offset: 3px !important;
31
+ text-decoration-thickness: 1px !important;
32
+ transition: text-decoration-color 0.1s ease-in !important;
33
+
34
+ &:hover {
35
+ text-decoration-color: #27b3f5 !important;
36
+ }
37
+ }
24
38
  `;
25
39
  const LinkInner = props => {
26
40
  const {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kids-reporter/draft-renderer",
3
- "version": "1.0.21",
3
+ "version": "1.0.23",
4
4
  "description": "",
5
5
  "main": "lib/index.js",
6
6
  "scripts": {