article-json-html-render - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

dist/components/embed.js

@@ -17,7 +17,12 @@ 'use strict';
 
-var defaultRenderCaption = function defaultRenderCaption(text) {
+var defaultRenderCaption = function defaultRenderCaption(text, attribution) {
+  var attributionEl = attribution.length > 0 ? (0, _magicVirtualElement2.default)(
+    'cite',
+    null,
+    attribution
+  ) : '';
   return (0, _magicVirtualElement2.default)(
     'figcaption',
     null,
-    text
+    text.concat([attributionEl])
   );
@@ -41,2 +46,3 @@ };
       var caption = props.caption;
+      var attribution = props.attribution;
       var figureProps = props.figureProps;
@@ -46,4 +52,5 @@
       var captionText = (0, _text2.default)(caption || []);
+      var attributionText = (0, _text2.default)(attribution || []);
 
-      var captionElm = captionText.length > 0 ? renderCaption(captionText) : '';
+      var captionElm = captionText.length > 0 || attributionText.length > 0 ? renderCaption(captionText, attributionText) : '';
 
@@ -50,0 +57,0 @@ return (0, _magicVirtualElement2.default)(

lib/components/embed.js

 import element from 'magic-virtual-element';
 import renderText from '../text';
 
-const defaultRenderCaption = text => <figcaption>{text}</figcaption>;
+const defaultRenderCaption = (text, attribution) => {
+  const attributionEl = attribution.length > 0 ? <cite>{attribution}</cite> : '';
+  return (<figcaption>
+    {text.concat([attributionEl])}
+  </figcaption>);
+};
 
@@ -12,8 +17,9 @@ const setup = ({embeds, customCaption}) => {
     render: ({props}) => {
-      const {embedType, caption, figureProps} = props;
+      const {embedType, caption, attribution, figureProps} = props;
       const embed = embeds[embedType] && embeds[embedType](props);
       const captionText = renderText(caption || []);
+      const attributionText = renderText(attribution || []);
 
-      const captionElm = (captionText.length > 0)
-        ? renderCaption(captionText)
+      const captionElm = (captionText.length > 0 || attributionText.length > 0)
+        ? renderCaption(captionText, attributionText)
         : '';
@@ -20,0 +26,0 @@

package.json

 {
   "name": "article-json-html-render",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Base for html-based article-json renderer, such as [article-json-to-amp](https://www.npmjs.com/package/article-json-to-amp)",
@@ -33,3 +33,3 @@ "main": "dist/index.js",
     "semistandard-deku": "micnews/semistandard#deku",
-    "snazzy": "^3.0.0",
+    "snazzy": "^4.0.0",
     "tape": "^4.4.0"
@@ -36,0 +36,0 @@ },

test.js

@@ -355,1 +355,88 @@ import test from 'tape';
 });
+
+test('embed with caption and attribution', t => {
+  const Article = setupArticle({
+    embeds: {
+      image: ({src}) => <img src={src} />
+    }
+  });
+
+  const items = [{
+    type: 'embed',
+    embedType: 'image',
+    src: 'http://example.com/image.jpg',
+    width: 600,
+    height: 200,
+    caption: [{
+      type: 'text',
+      content: 'Image description',
+      href: null,
+      italic: false,
+      bold: false
+    }],
+    attribution: [{
+      type: 'text',
+      content: 'Source: ',
+      href: null,
+      italic: false,
+      bold: false
+    }, {
+      type: 'text',
+      content: 'author',
+      href: 'http://example.com',
+      italic: false,
+      bold: false
+    }]
+  }];
+
+  const actual = renderString(tree(<Article items={items} />));
+  const expected = renderString(tree(<article>
+    <figure>
+      <img src='http://example.com/image.jpg'></img>
+      <figcaption>
+        Image description
+        <cite>Source: <a href='http://example.com'>author</a></cite>
+      </figcaption>
+    </figure>
+  </article>));
+
+  t.equal(actual, expected);
+  t.end();
+});
+
+test('embed with attribution without link', t => {
+  const Article = setupArticle({
+    embeds: {
+      image: ({src}) => <img src={src} />
+    }
+  });
+
+  const items = [{
+    type: 'embed',
+    embedType: 'image',
+    src: 'http://example.com/image.jpg',
+    width: 600,
+    height: 200,
+    caption: [],
+    attribution: [{
+      type: 'text',
+      content: 'Source',
+      href: null,
+      italic: false,
+      bold: false
+    }]
+  }];
+
+  const actual = renderString(tree(<Article items={items} />));
+  const expected = renderString(tree(<article>
+    <figure>
+      <img src='http://example.com/image.jpg'></img>
+      <figcaption>
+        <cite>Source</cite>
+      </figcaption>
+    </figure>
+  </article>));
+
+  t.equal(actual, expected);
+  t.end();
+});

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

29912

increased by6.86%

Lines of code

836

increased by9.86%

Worsened metrics

Number of package files

25

decreased by-3.85%

No dependency changes