@happeouikit/content-renderer 3.0.14 → 3.1.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.
- package/dist/ContentRenderer.js +2 -12
- package/package.json +1 -1
package/dist/ContentRenderer.js
CHANGED
|
@@ -33,8 +33,6 @@ var ContentRenderer = function ContentRenderer(_ref) {
|
|
|
33
33
|
type = _ref.type,
|
|
34
34
|
_ref$widgetType = _ref.widgetType,
|
|
35
35
|
widgetType = _ref$widgetType === void 0 ? "post" : _ref$widgetType,
|
|
36
|
-
headerFont = _ref.headerFont,
|
|
37
|
-
bodyFont = _ref.bodyFont,
|
|
38
36
|
createAnchors = _ref.createAnchors,
|
|
39
37
|
useHashAutoscroll = _ref.useHashAutoscroll,
|
|
40
38
|
_ref$hashAutoscrollTo = _ref.hashAutoscrollTopMargin,
|
|
@@ -163,8 +161,6 @@ var ContentRenderer = function ContentRenderer(_ref) {
|
|
|
163
161
|
className: "content-renderer ".concat(widgetType === "page" ? "fr-view pages-text" : ""),
|
|
164
162
|
ref: element,
|
|
165
163
|
widgetType: widgetType,
|
|
166
|
-
headerFont: headerFont,
|
|
167
|
-
bodyFont: bodyFont,
|
|
168
164
|
createAnchors: createAnchors,
|
|
169
165
|
dangerouslySetInnerHTML: {
|
|
170
166
|
__html: safeText
|
|
@@ -204,13 +200,11 @@ var Wrapper = styled(BodyUI).attrs({
|
|
|
204
200
|
}, lighten(warn, 0.8), gray09, padding200, function (_ref3) {
|
|
205
201
|
var widgetType = _ref3.widgetType,
|
|
206
202
|
inheritBrandingStyles = _ref3.inheritBrandingStyles;
|
|
207
|
-
return widgetType === "page" ? "" : "\n * {\n font-family: ".concat(sansFamily, ";\n }\n\n h1 {\n font-family: ").concat(inheritBrandingStyles ? "var(--channels-h1-font-family, revert)" : "revert", "; \n font-weight: ").concat(inheritBrandingStyles ? "var(--channels-h1-font-weight, 500)" : "500", ";\n font-size: 24px;\n letter-spacing: -0.5px;\n line-height: 32px;\n + h1,\n + h2,\n + h3,\n + h4,\n + p {\n margin-top: 16px;\n }\n & * {\n font-family: ").concat(inheritBrandingStyles ? "var(--channels-h1-font-family, revert)" : "revert", "; \n }\n }\n h2 {\n font-family: ").concat(inheritBrandingStyles ? "var(--channels-h2-font-family, revert)" : "revert", "; \n font-weight: ").concat(inheritBrandingStyles ? "var(--channels-h2-font-weight, 500)" : "500", ";\n font-size: 20px;\n line-height: 28px;\n + h1,\n + h2,\n + h3,\n + h4,\n + p {\n margin-top: 14px;\n }\n & * {\n font-family: ").concat(inheritBrandingStyles ? "var(--channels-h2-font-family, revert)" : "revert", "; \n }\n }\n h3 {\n font-family: ").concat(inheritBrandingStyles ? "var(--channels-h3-font-family, revert)" : "revert", "; \n font-weight: ").concat(inheritBrandingStyles ? "var(--channels-h3-font-weight, 500)" : "500", ";\n font-size: 16px;\n line-height: 24px;\n + h1,\n + h2,\n + h3,\n + h4,\n + p {\n margin-top: 12px;\n }\n & * {\n font-family: ").concat(inheritBrandingStyles ? "var(--channels-h3-font-family, revert);" : "revert", " \n }\n }\n h4 {\n font-size: 16px;\n line-height: 24px;\n + h1,\n + h2,\n + h3,\n + h4,\n + p {\n margin-top: 12px;\n }\n }\n p {\n font-family: ").concat(inheritBrandingStyles ? "var(--channels-body-font-family, revert)" : "revert", "; \n font-weight: ").concat(inheritBrandingStyles ? "var(--channels-body-font-weight,
|
|
203
|
+
return widgetType === "page" ? "" : "\n * {\n font-family: ".concat(sansFamily, ";\n }\n\n h1 {\n font-family: ").concat(inheritBrandingStyles ? "var(--channels-h1-font-family, revert)" : "revert", "; \n font-weight: ").concat(inheritBrandingStyles ? "var(--channels-h1-font-weight, 500)" : "500", ";\n font-size: 24px;\n letter-spacing: -0.5px;\n line-height: 32px;\n + h1,\n + h2,\n + h3,\n + h4,\n + p {\n margin-top: 16px;\n }\n & * {\n font-family: ").concat(inheritBrandingStyles ? "var(--channels-h1-font-family, revert)" : "revert", "; \n }\n }\n h2 {\n font-family: ").concat(inheritBrandingStyles ? "var(--channels-h2-font-family, revert)" : "revert", "; \n font-weight: ").concat(inheritBrandingStyles ? "var(--channels-h2-font-weight, 500)" : "500", ";\n font-size: 20px;\n line-height: 28px;\n + h1,\n + h2,\n + h3,\n + h4,\n + p {\n margin-top: 14px;\n }\n & * {\n font-family: ").concat(inheritBrandingStyles ? "var(--channels-h2-font-family, revert)" : "revert", "; \n }\n }\n h3 {\n font-family: ").concat(inheritBrandingStyles ? "var(--channels-h3-font-family, revert)" : "revert", "; \n font-weight: ").concat(inheritBrandingStyles ? "var(--channels-h3-font-weight, 500)" : "500", ";\n font-size: 16px;\n line-height: 24px;\n + h1,\n + h2,\n + h3,\n + h4,\n + p {\n margin-top: 12px;\n }\n & * {\n font-family: ").concat(inheritBrandingStyles ? "var(--channels-h3-font-family, revert);" : "revert", " \n }\n }\n h4 {\n font-size: 16px;\n line-height: 24px;\n + h1,\n + h2,\n + h3,\n + h4,\n + p {\n margin-top: 12px;\n }\n }\n p {\n font-family: ").concat(inheritBrandingStyles ? "var(--channels-body-font-family, revert)" : "revert", "; \n font-weight: ").concat(inheritBrandingStyles ? "var(--channels-body-font-weight, revert)" : "revert", ";\n font-size: 16px;\n line-height: 24px;\n letter-spacing: 0px;\n + h1,\n + h2,\n + h3,\n + h4,\n + p {\n margin-top: 12px;\n }\n\n & * {\n font-family: ").concat(inheritBrandingStyles ? "var(--channels-body-font-family, revert)" : "revert", "; \n }\n }\n }\n a {\n color: ").concat(active, ";\n text-decoration: none;\n :hover {\n text-decoration: underline;\n }\n }\n ul {\n list-style-type: disc;\n }\n ol {\n list-style-type: decimal;\n counter-reset: item;\n li {\n padding-left: 12px;\n text-indent: -33px;\n list-style-type: none;\n counter-increment: item;\n &:before {\n display: inline-block;\n width: 13px;\n padding-right: 15px;\n padding-left: 5px;\n font-weight: bold;\n text-align: right;\n content: counter(item) \".\";\n }\n font-family: ").concat(inheritBrandingStyles ? "var(--channels-body-font-family, revert)" : "revert", "; \n font-weight: ").concat(inheritBrandingStyles ? "var(--channels-body-font-weight, revert)" : "revert", ";\n }\n }\n ol,\n ul {\n font-size: 16px;\n line-height: 24px;\n margin: 18px 16px;\n display: block;\n -webkit-margin-before: 0.5em;\n -webkit-margin-after: 0.5em;\n -webkit-padding-start: 0.5em;\n li,\n li {\n margin-bottom: 5px;\n padding-left: 10px;\n > ul,\n > ol {\n -webkit-margin-before: 8px !important;\n -webkit-margin-after: 8px !important;\n }\n\n font-family: ").concat(inheritBrandingStyles ? "var(--channels-body-font-family, revert);" : "revert", ";\n font-weight: ").concat(inheritBrandingStyles ? "var(--channels-body-font-weight, revert)" : "revert", ";\n }\n\n &:first-child,\n &:first-child {\n -webkit-margin-before: 0;\n }\n &:last-child,\n &:last-child {\n -webkit-margin-after: 0;\n }\n }\n hr {\n -webkit-margin-before: 16px;\n -webkit-margin-after: 13px;\n border-color: @border-color;\n border-style: solid;\n height: 0px;\n border-width: 1px 0 0 0;\n }\n table {\n width: 100%;\n margin: 15px 0;\n text-align: left;\n thead th {\n background: @white;\n }\n th,\n td {\n border-width: 1px;\n border-style: solid;\n border-color: @border-color;\n padding: 0.5em;\n }\n tr:nth-child(even) {\n background: @almost-white;\n }\n tr:nth-child(odd) {\n background: @white;\n }\n }\n table.no-borders {\n th,\n td {\n border: none;\n }\n }\n table.padded-2 {\n th,\n td {\n padding: 2em;\n }\n }\n table.padded-1 {\n th,\n td {\n padding: 1em;\n }\n }\n img {\n max-width: 100%;\n margin: 15px 0;\n & + img {\n margin-top: 0;\n }\n }\n .xl-emoji * {\n font-size: 40px;\n line-height: 1.2;\n }\n \n blockquote {\n border-top: 2px solid ").concat(gray07, ";\n border-bottom: 2px solid ").concat(gray07, ";\n font-size: 18px;\n padding: 24px 48px;\n position: relative;\n text-align: center;\n margin: 48px 0;\n }\n ");
|
|
208
204
|
}, function (_ref4) {
|
|
209
205
|
var widgetType = _ref4.widgetType,
|
|
210
|
-
bodyFont = _ref4.bodyFont,
|
|
211
|
-
headerFont = _ref4.headerFont,
|
|
212
206
|
inheritBrandingStyles = _ref4.inheritBrandingStyles;
|
|
213
|
-
return widgetType === "article" && css(["h1{font-family:", ";& *{font-family:", ";}}h2{font-family:", ";& *{font-family:", ";}}h3{font-family:", ";& *{font-family:", ";}}h4,h5,h6,p,ul,ol,li,table{font-family:", ";& *{font-family:", ";}}h1{font-size:32px;line-height:1.13;margin:0 0 20px;letter-spacing:-0.75px;}h2{font-size:24px;line-height:1.17;margin:0 0 16px;letter-spacing:-0.5px;}h3{font-size:20px;line-height:1.2;margin:0 0 14px;}h4,h5,h6,p,ul,ol,li{font-size:18px;line-height:1.56;margin-bottom:13px;margin-top:0;}hr{border-color:", ";}table{width:100% !important;margin:15px 0;font-size:18px !important;text-align:left;border-collapse:collapse;border-spacing:0;thead th{background:@white;}th,td{border-width:1px;border-style:solid;border-color:", ";padding:0.5em;word-wrap:break-word;}tr:nth-child(odd){background:", ";}tr:nth-child(even){background:@white;}}table.no-borders{th,td{border:none;}tr:nth-child(odd){background:", ";}tr:nth-child(even){background:@white;}}pre{position:relative;background-color:", ";padding:1em;margin:1em 0;border-radius:4px;white-space:pre;}img,span.fr-img-caption,span.fr-video{display:block;margin:30px 0;", ";&.article-align-left{margin:30px auto;display:block;max-width:100%;", "}&.article-align-center{margin:30px auto;display:block;}&.article-align-right{margin:30px auto;display:block;max-width:100%;", "}&.article-align-overflow{margin:30px auto;display:block;max-width:100%;", " img{width:100%;}}}img{&.image-border-radius{border-radius:6px;}&.image-box-shadow{box-shadow:0 4px 16px 0 #bacad5;}}span.fr-img-caption{&.image-border-radius img{border-radius:6px;}&.image-box-shadow img{box-shadow:0 4px 16px 0 #bacad5;}}p{img:first-child,span.fr-img-caption:first-child{&.article-align-left,&.article-align-right{", "}}}span.fr-img-caption{text-align:center;img{margin:0;}.fr-inner{font-weight:400;font-size:16px;margin:8px auto 0 auto;padding:0 8px;color:", ";display:block;max-width:671px;}}span.fr-video{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden;border-radius:6px;&.article-align-overflow{padding-top:170px;}iframe{position:absolute;top:0;left:0;width:100% !important;height:100% !important;}}blockquote{border-left:0 !important;padding-left:0 !important;margin:0 !important;color:inherit !important;p{line-height:30px;font-size:26px;text-align:center;margin:0 auto;}}.content-attachments{width:100%;}"],
|
|
207
|
+
return widgetType === "article" && css(["h1{font-family:", ";& *{font-family:", ";}}h2{font-family:", ";& *{font-family:", ";}}h3{font-family:", ";& *{font-family:", ";}}h4,h5,h6,p,ul,ol,li,table{font-family:", ";& *{font-family:", ";}}h1{font-size:32px;line-height:1.13;margin:0 0 20px;letter-spacing:-0.75px;}h2{font-size:24px;line-height:1.17;margin:0 0 16px;letter-spacing:-0.5px;}h3{font-size:20px;line-height:1.2;margin:0 0 14px;}h4,h5,h6,p,ul,ol,li{font-size:18px;line-height:1.56;margin-bottom:13px;margin-top:0;}hr{border-color:", ";}table{width:100% !important;margin:15px 0;font-size:18px !important;text-align:left;border-collapse:collapse;border-spacing:0;thead th{background:@white;}th,td{border-width:1px;border-style:solid;border-color:", ";padding:0.5em;word-wrap:break-word;}tr:nth-child(odd){background:", ";}tr:nth-child(even){background:@white;}}table.no-borders{th,td{border:none;}tr:nth-child(odd){background:", ";}tr:nth-child(even){background:@white;}}pre{position:relative;background-color:", ";padding:1em;margin:1em 0;border-radius:4px;white-space:pre;}img,span.fr-img-caption,span.fr-video{display:block;margin:30px 0;", ";&.article-align-left{margin:30px auto;display:block;max-width:100%;", "}&.article-align-center{margin:30px auto;display:block;}&.article-align-right{margin:30px auto;display:block;max-width:100%;", "}&.article-align-overflow{margin:30px auto;display:block;max-width:100%;", " img{width:100%;}}}img{&.image-border-radius{border-radius:6px;}&.image-box-shadow{box-shadow:0 4px 16px 0 #bacad5;}}span.fr-img-caption{&.image-border-radius img{border-radius:6px;}&.image-box-shadow img{box-shadow:0 4px 16px 0 #bacad5;}}p{img:first-child,span.fr-img-caption:first-child{&.article-align-left,&.article-align-right{", "}}}span.fr-img-caption{text-align:center;img{margin:0;}.fr-inner{font-weight:400;font-size:16px;margin:8px auto 0 auto;padding:0 8px;color:", ";display:block;max-width:671px;}}span.fr-video{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden;border-radius:6px;&.article-align-overflow{padding-top:170px;}iframe{position:absolute;top:0;left:0;width:100% !important;height:100% !important;}}blockquote{border-left:0 !important;padding-left:0 !important;margin:0 !important;color:inherit !important;p{line-height:30px;font-size:26px;text-align:center;margin:0 auto;}}.content-attachments{width:100%;}"], inheritBrandingStyles ? "var(--channels-h1-font-family, revert)" : "revert", inheritBrandingStyles ? "var(--channels-h1-font-family, revert)" : "revert", inheritBrandingStyles ? "var(--channels-h2-font-family, revert)" : "revert", inheritBrandingStyles ? "var(--channels-h2-font-family, revert)" : "revert", inheritBrandingStyles ? "var(--channels-h3-font-family, revert)" : "revert", inheritBrandingStyles ? "var(--channels-h3-font-family, revert)" : "revert", inheritBrandingStyles ? "var(--channels-body-font-family, revert)" : "revert", inheritBrandingStyles ? "var(--channels-body-font-family, revert)" : "revert", gray07, gray07, gray09, gray09, gray09, media.only.xs(_templateObject || (_templateObject = _taggedTemplateLiteral([" \n max-width: 100%;\n "]))), media.min.md(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n margin: 30px 30px 10px -150px;\n float: left;\n max-width: 75%;\n "]))), media.min.md(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n margin: 30px -150px 10px 30px;\n float: right;\n max-width: 75%;\n "]))), media.min.md(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n margin: 30px -150px;\n width: calc(100% + 300px) !important;\n max-width: none;\n "]))), media.min.md(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n margin-top: 8px;\n "]))), gray04);
|
|
214
208
|
});
|
|
215
209
|
ContentRenderer.propTypes = {
|
|
216
210
|
content: PropTypes.string,
|
|
@@ -225,8 +219,6 @@ ContentRenderer.propTypes = {
|
|
|
225
219
|
}
|
|
226
220
|
},
|
|
227
221
|
widgetType: PropTypes.oneOf(["post", "article", "page"]),
|
|
228
|
-
bodyFont: PropTypes.string,
|
|
229
|
-
headerFont: PropTypes.string,
|
|
230
222
|
decodeHtmlEntitiesOnRender: PropTypes.bool,
|
|
231
223
|
createAnchors: PropTypes.bool,
|
|
232
224
|
forceDefaultLinkTarget: PropTypes.bool,
|
|
@@ -237,8 +229,6 @@ ContentRenderer.defaultProps = {
|
|
|
237
229
|
content: "",
|
|
238
230
|
type: "html",
|
|
239
231
|
widgetType: "post",
|
|
240
|
-
bodyFont: "",
|
|
241
|
-
headerFont: "",
|
|
242
232
|
decodeHtmlEntitiesOnRender: false,
|
|
243
233
|
createAnchors: false,
|
|
244
234
|
useHashAutoscroll: true,
|