Merge branch 'master' into refactor/create-markdown-util

packages/contentful/migrations/0137-update-help-text-image-text-slide.cjs

@@ -0,0 +1,8 @@
+module.exports = function(migration) {
+  const imageTextSlide = migration
+    .editContentType('imageTextSlide');
+
+  imageTextSlide.changeFieldControl('citation', 'builtin', 'singleLine', {
+    helpText: 'When present the text and attribution will be shown as a quote.'
+  });
+};

packages/portal/src/components/story/StoryImageTextSlideScroller.vue

@@ -29,7 +29,7 @@
     >
       <div class="card-wrapper">
         <b-container>
-          <b-row class="justify-content-end">
+          <b-row :class="!slide.citation && 'justify-content-end'">
             <b-col
               cols="12"
               class="col-md-6 col-lg-4"
@@ -39,10 +39,25 @@
                 body-class="p-4"
                 class="border-none"
               >
+                <b-img
+                  v-if="slide.citation"
+                  :src="quotationIconSrc"
+                  class="icon-quotationmark"
+                  data-qa="slide citation icon"
+                />
                 <div
                   class="card-content"
+                  :class="{ 'citation-text': slide.citation }"
+                  data-qa="slide text"
                   v-html="parseMarkdown(slide.text)"
                 />
+                <cite
+                  v-if="slide.citation"
+                  class="citation-attribution"
+                  data-qa="slide citation"
+                >
+                  {{ slide.citation }}
+                </cite>
               </b-card>
               <!-- eslint-enable vue/no-v-html -->
             </b-col>
@@ -74,7 +89,8 @@
 
     data() {
       return {
-        FULL_VIEWPORT_PRESETS
+        FULL_VIEWPORT_PRESETS,
+        quotationIconSrc: require('@europeana/style/img/icons/quotationmark.svg')
       };
     },
 
@@ -156,23 +172,58 @@
           z-index: 3;
         }
       }
-    }
 
-    ::v-deep img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
+      ::v-deep img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
     }
 
     .card {
       box-shadow: $boxshadow-small;
       margin-bottom: 150vh;
       position: relative;
       z-index: 3;
-    }
 
-    .card-content ::v-deep p:last-child {
-      margin-bottom: 0;
+      .icon-quotationmark {
+        width: 64px;
+      }
+
+      ::v-deep blockquote,
+      ::v-deep blockquote p {
+        font-size: 1.125rem;
+        font-style: normal;
+        margin-left: auto;
+        margin-right: auto;
+        margin-bottom: 0.75rem;
+        text-align: left;
+
+        &::before,
+        &::after {
+          content: none;
+        }
+      }
+
+      .card-content ::v-deep p:last-child {
+        margin-bottom: 0;
+      }
+
+      .citation-text {
+        font-weight: 600;
+        line-height: 1.5;
+
+        ::v-deep p:last-child {
+          margin-bottom: 0.75rem;
+        }
+      }
+
+      .citation-attribution {
+        font-size: $font-size-base;
+        margin-left: auto;
+        margin-right: auto;
+        text-align: left;
+      }
     }
   }
 </style>
@@ -200,4 +251,20 @@
       }"
     />
   ```
+StoryImageTextSlideScroller with a quote card:
+  ```jsx
+    <StoryImageTextSlideScroller
+      :section="{
+        hasPartCollection: {
+          items: [
+            {
+              image: imagesWithAttribution[0],
+              text: 'This is a placeholder text for the first slide.',
+              citation: `Author of the quote, 'Title of the quoted work'`
+            }
+          ]
+        }
+      }"
+    />
+  ```
 </docs>

packages/portal/src/modules/contentful/queries/story-page.graphql

@@ -61,6 +61,7 @@ query StoryPage(
                     ...imageWithAttributionFields
                   }
                   text
+                  citation
                 }
               }
             }

packages/portal/tests/size/.size-limit.json

@@ -19,7 +19,7 @@
   {
     "name": "portal.js server",
     "running": false,
-    "limit": "1050 KB",
+    "limit": "1100 KB",
     "path": [
       ".nuxt/dist/server/*.js"
     ]

packages/portal/tests/unit/components/story/StoryImageTextSlideScroller.spec.js

@@ -14,11 +14,16 @@ const baseProps = { section: { hasPartCollection: { items: [
     text: 'This is text' }
 ] } } };
 
+const quoteProps = { section: { hasPartCollection: { items: [
+  { image: { image: { url: 'https://www.europeana.eu/example.jpg', height: 800, contentType: 'image/jpeg' } },
+    text: 'This is a quote text', citation: 'This is attribution' }
+] } } };
+
 const factory = (propsData = baseProps) => shallowMountNuxt(StoryImageTextSlideScroller, {
   localVue,
   attachTo: document.body,
   propsData,
-  stubs: ['b-card', 'b-col', 'b-row', 'b-container']
+  stubs: ['b-card', 'b-col', 'b-row', 'b-container', 'b-img']
 });
 
 describe('components/story/StoryImageTextSlideScroller', () => {
@@ -52,4 +57,14 @@ describe('components/story/StoryImageTextSlideScroller', () => {
       expect(window.removeEventListener.calledWith('scroll', wrapper.vm.appearDisappearSlideImage)).toBe(true);
     });
   });
+
+  describe('when the slide has a citation field populated', () => {
+    it('displays the quote icon, text and citation', () => {
+      const wrapper = factory(quoteProps);
+
+      expect(wrapper.find('[data-qa="slide citation icon"]').exists()).toBe(true);
+      expect(wrapper.find('[data-qa="slide text"]').text()).toEqual('This is a quote text');
+      expect(wrapper.find('[data-qa="slide citation"]').text()).toEqual('This is attribution');
+    });
+  });
 });