@kids-reporter/draft-renderer 0.1.0 → 0.2.0

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 (51) hide show
  1. package/lib/block-render-map.js +183 -0
  2. package/lib/block-renderer-fn.js +15 -74
  3. package/lib/block-renderers/embedded-code-block.js +16 -20
  4. package/lib/block-renderers/image-block.js +90 -46
  5. package/lib/block-renderers/index.js +2 -31
  6. package/lib/block-renderers/info-box-block.js +2 -115
  7. package/lib/block-renderers/multimedia.js +127 -0
  8. package/lib/block-renderers/slideshow-block.js +574 -199
  9. package/lib/draft-renderer.js +10 -194
  10. package/lib/entity-decorators/annotation-decorator.js +58 -100
  11. package/lib/entity-decorators/index.js +17 -6
  12. package/lib/entity-decorators/link-decorator.js +4 -7
  13. package/lib/index.js +39 -14
  14. package/lib/theme/index.js +0 -11
  15. package/package.json +10 -6
  16. package/lib/assets/annotation-arrow.png +0 -0
  17. package/lib/assets/audio-pause.png +0 -0
  18. package/lib/assets/audio-play.png +0 -0
  19. package/lib/assets/citation-download.png +0 -0
  20. package/lib/assets/default-og-img.png +0 -0
  21. package/lib/assets/slideshow-arrow-down-dark.png +0 -0
  22. package/lib/assets/slideshow-arrow-down.png +0 -0
  23. package/lib/assets/slideshow-arrow-up.png +0 -0
  24. package/lib/assets/slideshow-close-cross.png +0 -0
  25. package/lib/block-renderers/audio-block.js +0 -162
  26. package/lib/block-renderers/background-image-block.js +0 -257
  27. package/lib/block-renderers/background-video-block.js +0 -272
  28. package/lib/block-renderers/color-box-block.js +0 -94
  29. package/lib/block-renderers/divider-block.js +0 -27
  30. package/lib/block-renderers/media-block.js +0 -65
  31. package/lib/block-renderers/related-post-block.js +0 -73
  32. package/lib/block-renderers/side-index-block.js +0 -49
  33. package/lib/block-renderers/table-block.js +0 -455
  34. package/lib/block-renderers/video-block.js +0 -37
  35. package/lib/components/slideshow-lightbox.js +0 -134
  36. package/lib/components/slideshow-sidebar.js +0 -148
  37. package/lib/const.js +0 -10
  38. package/lib/entity-decorator.js +0 -18
  39. package/lib/public/07d1287fd390346af0c15b930148a5e4.png +0 -0
  40. package/lib/public/5b3cb1a908786c8750f1041860699cc1.png +0 -0
  41. package/lib/public/679d63b1846e81ada28c2f76edbd2931.png +0 -0
  42. package/lib/public/722f90c535fa64c27555ec6ee5f22393.png +0 -0
  43. package/lib/public/903cf84ef5c5ad76634c30bdc0ff8c49.png +0 -0
  44. package/lib/public/dc249b3412c5af890a004508287a3c3d.png +0 -0
  45. package/lib/public/dd45f0788d9c70cabe72430bf08e7413.png +0 -0
  46. package/lib/public/f96d4b486ba2061c460962ae694f4670.png +0 -0
  47. package/lib/shared-style/content-type.js +0 -163
  48. package/lib/shared-style/index.js +0 -108
  49. package/lib/types/index.js +0 -32
  50. package/lib/utils/common.js +0 -44
  51. package/lib/utils/post.js +0 -147
package/lib/block-renderers/multimedia.js ADDED
@@ -0,0 +1,127 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
9
+
10
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
11
+
12
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
+
14
+ // @ts-ignore @twreporter/core does not provide ts header file
15
+ const mockup = {
16
+ mobile: {
17
+ figure: {
18
+ width: '100%'
19
+ },
20
+ caption: {
21
+ width: 250 // px
22
+
23
+ }
24
+ },
25
+ tablet: {
26
+ figure: {
27
+ width: '100%'
28
+ },
29
+ caption: {
30
+ width: 512 // px
31
+
32
+ }
33
+ },
34
+ desktop: {
35
+ figure: {
36
+ width: {
37
+ normal: 100,
38
+ // %
39
+ small: 403 // px
40
+
41
+ }
42
+ },
43
+ caption: {
44
+ width: 180 // px
45
+
46
+ }
47
+ },
48
+ hd: {
49
+ figure: {
50
+ width: {
51
+ normal: 100,
52
+ // %
53
+ small: 532 // px
54
+
55
+ }
56
+ },
57
+ caption: {
58
+ width: 265 // px
59
+
60
+ }
61
+ }
62
+ };
63
+ const Caption = _styledComponents.default.figcaption`
64
+ color: #494949;
65
+ &::after {
66
+ border-color: #d0a67d;
67
+ }
68
+
69
+ line-height: 1.36;
70
+ letter-spacing: 0.5px;
71
+ font-weight: normal;
72
+ font-size: 14px;
73
+ margin-bottom: 30px;
74
+
75
+ /* border-bottom of caption */
76
+ &::after {
77
+ content: '';
78
+ height: 1px;
79
+ position: absolute;
80
+ bottom: 0;
81
+ left: 0;
82
+ border-width: 0 0 1px 0;
83
+ border-style: solid;
84
+ }
85
+
86
+ ${_mediaQuery.default.tabletAndBelow`
87
+ position: relative;
88
+ margin-left: auto;
89
+ padding: 15px 15px 15px 0;
90
+ &:after {
91
+ width: calc(100% - 15px);
92
+ }
93
+ `}
94
+
95
+ ${_mediaQuery.default.mobileOnly`
96
+ max-width: ${mockup.mobile.caption.width}px;
97
+ `}
98
+
99
+ ${_mediaQuery.default.tabletOnly`
100
+ max-width: ${mockup.tablet.caption.width}px;
101
+ `}
102
+
103
+ ${_mediaQuery.default.desktopAndAbove`
104
+ /* clear float */
105
+ clear: both;
106
+
107
+ position: relative;
108
+ float: right;
109
+
110
+ &:after {
111
+ width: 100%;
112
+ }
113
+ `}
114
+
115
+ ${_mediaQuery.default.desktopOnly`
116
+ width: ${mockup.desktop.caption.width}px;
117
+ padding: 15px 0 15px 0;
118
+ `}
119
+ ${_mediaQuery.default.hdOnly`
120
+ width: ${mockup.hd.caption.width}px;
121
+ padding: 25px 0 20px 0;
122
+ `}
123
+ `;
124
+ var _default = {
125
+ Caption
126
+ };
127
+ exports.default = _default;