refactor: center captions that are below figures

Author: Dobromir Hristov

src/components/ContentNode.vue

@@ -197,7 +197,9 @@ function renderNode(createElement, references) {
     if ((title && abstract.length) || abstract.length) {
       // if there is a `title`, it should be above, otherwise below
       figureContent.splice(title ? 0 : 1, 0,
-        createElement(FigureCaption, { props: { title } }, renderChildren(abstract)));
+        createElement(FigureCaption, {
+          props: { title, centered: !title },
+        }, renderChildren(abstract)));
     }
     return createElement(Figure, { props: { anchor } }, figureContent);
   };

src/components/ContentNode/FigureCaption.vue

@@ -9,7 +9,7 @@
 -->
 
 <template>
-  <figcaption class="caption">
+  <figcaption class="caption" :class="{ centered }">
     <strong v-if="title">{{ title }}</strong>&nbsp;<slot />
   </figcaption>
 </template>
@@ -22,6 +22,10 @@ export default {
       type: String,
       required: false,
     },
+    centered: {
+      type: Boolean,
+      default: false,
+    },
   },
 };
 </script>
@@ -35,6 +39,10 @@ export default {
   &:last-child {
     margin-top: $stacked-margin-xlarge;
   }
+
+  &.centered {
+    text-align: center;
+  }
 }
 
 /deep/ p {

tests/unit/components/ContentNode.spec.js

@@ -455,12 +455,13 @@ describe('ContentNode', () => {
       expect(caption.exists()).toBe(true);
       expect(caption.contains('p')).toBe(true);
       expect(caption.props('title')).toBeFalsy();
+      expect(caption.props('centered')).toBe(true);
       expect(caption.text()).toContain('blah');
       // assert figurerecaption is below the image
       expect(figure.html()).toMatchInlineSnapshot(`
         <figure-stub>
           <inlineimage-stub alt="" variants="[object Object],[object Object]"></inlineimage-stub>
-          <figurecaption-stub>
+          <figurecaption-stub centered="true">
             <p>blah</p>
           </figurecaption-stub>
         </figure-stub>
@@ -567,6 +568,7 @@ describe('ContentNode', () => {
       expect(caption.exists()).toBe(true);
       expect(caption.contains('p')).toBe(true);
       expect(caption.props('title')).toBe(metadata.title);
+      expect(caption.props('centered')).toBe(true);
       expect(caption.text()).toContain('blah');
     });
 
@@ -592,12 +594,13 @@ describe('ContentNode', () => {
       expect(caption.exists()).toBe(true);
       expect(caption.contains('p')).toBe(true);
       expect(caption.props('title')).toBeFalsy();
+      expect(caption.props('centered')).toBe(true);
       expect(caption.text()).toContain('blah');
       // assert figurerecaption is below the image
       expect(figure.html()).toMatchInlineSnapshot(`
         <figure-stub>
           <inlinevideo-stub identifier="video.mp4"></inlinevideo-stub>
-          <figurecaption-stub>
+          <figurecaption-stub centered="true">
             <p>blah</p>
           </figurecaption-stub>
         </figure-stub>
@@ -1043,6 +1046,7 @@ describe('ContentNode', () => {
       const caption = figure.find(FigureCaption);
       expect(caption.exists()).toBe(true);
       expect(caption.props('title')).toBe(metadata.title);
+      expect(caption.props('centered')).toBe(false);
       expect(caption.contains('p')).toBe(true);
       expect(caption.text()).toContain('blah');
     });

tests/unit/components/ContentNode/FigureCaption.spec.js

@@ -27,4 +27,10 @@ describe('FigureCaption', () => {
     expect(wrapper.is('figcaption')).toBe(true);
     expect(wrapper.text()).toBe('Blah');
   });
+
+  it('renders a <figcaption> centered', () => {
+    const slots = { default: '<p>Blah</p>' };
+    const wrapper = shallowMount(FigureCaption, { slots, propsData: { centered: true } });
+    expect(wrapper.classes()).toContain('centered');
+  });
 });