💄 add new carouselObjectFit prop for HDGallery (#806)

* 💄 remove fixed width of HdGalleryCarousel image * 💄 Introduce new objectFit prop for HdGallery * 📸 Update HdGallery and HdGalleryCarousel snapshots * 💄 rename objectFit props for HdGallery * 💄 add object fit property field to Story book Co-authored-by: Maja Komel <[email protected]>
homeday-de · Aug 27, 2021 · 95a7fb2 · 95a7fb2
1 parent f3a3ed8
commit 95a7fb2
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 49 deletions.
diff --git a/src/components/gallery/HdGallery.vue b/src/components/gallery/HdGallery.vue
@@ -67,6 +67,7 @@
       :pager-inside="pagerInside"
       :aspect-ratio="aspectRatio"
       :disable-key-events="disableKeyEvents"
+      :object-fit="carouselObjectFit"
       class="gallery__carousel"
       @itemClick="onCarouselItemClick"
     />
@@ -122,6 +123,11 @@ export default {
       type: String,
       default: '',
     },
+    carouselObjectFit: {
+      type: String,
+      default: 'cover',
+      validator: (value) => ['cover', 'contain', 'fill', 'scale-down', 'none'].includes(value),
+    },
   },
   data() {
     return {

diff --git a/src/components/gallery/HdGalleryCarousel.vue b/src/components/gallery/HdGalleryCarousel.vue
@@ -27,11 +27,11 @@
           <!-- the item.thumbnail field is used as default value for the item image -->
           <!-- IE11 uses this value only because do not support the picture element -->
           <picture class="gallery-carousel__picture">
-              <source v-for="(source, media) in item.thumbnailPictureSources"
-                :key="media"
-                :media="`(${media})`" :srcset="source"
-              >
-            <img :src="item.thumbnail" :alt="item.caption" :srcset="item.thumbnailSrcSet">
+            <source v-for="(source, media) in item.thumbnailPictureSources"
+                    :key="media"
+                    :media="`(${media})`" :srcset="source"
+            >
+            <img :src="item.thumbnail" :alt="item.caption" :srcset="item.thumbnailSrcSet" :style="{objectFit}">
           </picture>
         </div>
       </flickity>
@@ -80,6 +80,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    objectFit: {
+      type: String,
+      default: 'cover',
+    },
   },
   data() {
     return {
@@ -280,23 +284,22 @@ export default {
       width: calc(100% / 7);
       margin-right: $sp-m;
     }
-    }
+  }
 
   &__picture {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: 1;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
 
     img {
       width: 100%;
       height: 100%;
-      object-fit: cover;
     }
   }
 }

diff --git a/src/stories/HdGallery.stories.js b/src/stories/HdGallery.stories.js
@@ -54,24 +54,28 @@ const Template = (args, { argTypes }) => ({
   components: { HdGallery },
   template: `
     <div style="max-width: 800px; padding-left: 16px; padding-right: 16px; margin: auto;">
-      <HdGallery
-        :items="items"
-        :pager-inside="pagerInside"
-        :aspect-ratio="aspectRatio"
-        :disable-key-events="disableKeyEvents"
-        :start-index="startIndex"
-        :show-caption="showCaption"
-        :placeholder-icon="placeholderIcon"
-        :placeholder-text="placeholderText"
-        @carouselItemClick="carouselItemClick"
-        @currentItemClick="currentItemClick"
-        @input="input"
-      />
+    <HdGallery
+      :items="items"
+      :pager-inside="pagerInside"
+      :aspect-ratio="aspectRatio"
+      :disable-key-events="disableKeyEvents"
+      :start-index="startIndex"
+      :show-caption="showCaption"
+      :placeholder-icon="placeholderIcon"
+      :placeholder-text="placeholderText"
+      :carousel-object-fit="carouselObjectFit"
+      @carouselItemClick="carouselItemClick"
+      @currentItemClick="currentItemClick"
+      @input="input"
+    />
     </div>
   `,
 });
 
 export const Default = Template.bind({});
+Default.args = {
+  carouselObjectFit: 'cover',
+};
 
 export const OnePhoto = Template.bind({});
 OnePhoto.args = {

diff --git a/tests/unit/components/gallery/__snapshots__/HDGallery.spec.js.snap b/tests/unit/components/gallery/__snapshots__/HDGallery.spec.js.snap
@@ -34,44 +34,44 @@ exports[`HdGallery renders the component 1`] = `
             <div class="gallery-carousel__item is-selected" style="position: absolute;">
               <div style="padding-top: 56.25%;"></div>
               <picture class="gallery-carousel__picture">
-                <source media="(max-width: 900px)" srcset="https://dummyimage.com/768x432?text=1+thumb+mw+900px"> <img src="https://dummyimage.com/154x86?text=1+thumb" alt="Image 1">
+                <source media="(max-width: 900px)" srcset="https://dummyimage.com/768x432?text=1+thumb+mw+900px"> <img src="https://dummyimage.com/154x86?text=1+thumb" alt="Image 1" style="object-fit: cover;">
               </picture>
             </div>
             <div class="gallery-carousel__item is-selected" style="position: absolute;">
               <div style="padding-top: 56.25%;"></div>
-              <picture class="gallery-carousel__picture"> <img src="https://dummyimage.com/154x86?text=2+thumb" alt="Image 2" srcset="https://dummyimage.com/308x172?text=2+thumb+DPR2x 2x, https://dummyimage.com/462x258?text=2+thumb+DPR3x 3x"></picture>
+              <picture class="gallery-carousel__picture"> <img src="https://dummyimage.com/154x86?text=2+thumb" alt="Image 2" srcset="https://dummyimage.com/308x172?text=2+thumb+DPR2x 2x, https://dummyimage.com/462x258?text=2+thumb+DPR3x 3x" style="object-fit: cover;"></picture>
             </div>
             <div class="gallery-carousel__item is-selected" style="position: absolute;">
               <div style="padding-top: 56.25%;"></div>
-              <picture class="gallery-carousel__picture"> <img src="https://dummyimage.com/154x86?text=3+thumb" alt="Image 3"></picture>
+              <picture class="gallery-carousel__picture"> <img src="https://dummyimage.com/154x86?text=3+thumb" alt="Image 3" style="object-fit: cover;"></picture>
             </div>
             <div class="gallery-carousel__item is-selected" style="position: absolute;">
               <div style="padding-top: 56.25%;"></div>
-              <picture class="gallery-carousel__picture"> <img src="https://dummyimage.com/154x86?text=4+thumb" alt="Image 4"></picture>
+              <picture class="gallery-carousel__picture"> <img src="https://dummyimage.com/154x86?text=4+thumb" alt="Image 4" style="object-fit: cover;"></picture>
             </div>
             <div class="gallery-carousel__item is-selected" style="position: absolute;">
               <div style="padding-top: 56.25%;"></div>
-              <picture class="gallery-carousel__picture"> <img src="https://dummyimage.com/154x86?text=5+thumb" alt="Image 5"></picture>
+              <picture class="gallery-carousel__picture"> <img src="https://dummyimage.com/154x86?text=5+thumb" alt="Image 5" style="object-fit: cover;"></picture>
             </div>
             <div class="gallery-carousel__item is-selected" style="position: absolute;">
               <div style="padding-top: 56.25%;"></div>
-              <picture class="gallery-carousel__picture"> <img src="https://dummyimage.com/154x86?text=6+thumb" alt="Image 6"></picture>
+              <picture class="gallery-carousel__picture"> <img src="https://dummyimage.com/154x86?text=6+thumb" alt="Image 6" style="object-fit: cover;"></picture>
             </div>
             <div class="gallery-carousel__item is-selected" style="position: absolute;">
               <div style="padding-top: 56.25%;"></div>
-              <picture class="gallery-carousel__picture"> <img src="https://dummyimage.com/154x86?text=7+thumb" alt="Image 7"></picture>
+              <picture class="gallery-carousel__picture"> <img src="https://dummyimage.com/154x86?text=7+thumb" alt="Image 7" style="object-fit: cover;"></picture>
             </div>
             <div class="gallery-carousel__item is-selected" style="position: absolute;">
               <div style="padding-top: 56.25%;"></div>
-              <picture class="gallery-carousel__picture"> <img src="https://dummyimage.com/154x86?text=8+thumb" alt="Image 8"></picture>
+              <picture class="gallery-carousel__picture"> <img src="https://dummyimage.com/154x86?text=8+thumb" alt="Image 8" style="object-fit: cover;"></picture>
             </div>
             <div class="gallery-carousel__item is-selected" style="position: absolute;">
               <div style="padding-top: 56.25%;"></div>
-              <picture class="gallery-carousel__picture"> <img src="https://dummyimage.com/154x86?text=9+thumb" alt="Image 9"></picture>
+              <picture class="gallery-carousel__picture"> <img src="https://dummyimage.com/154x86?text=9+thumb" alt="Image 9" style="object-fit: cover;"></picture>
             </div>
             <div class="gallery-carousel__item is-selected" style="position: absolute;">
               <div style="padding-top: 56.25%;"></div>
-              <picture class="gallery-carousel__picture"> <img src="https://dummyimage.com/154x86?text=10+thumb" alt="Image 10"></picture>
+              <picture class="gallery-carousel__picture"> <img src="https://dummyimage.com/154x86?text=10+thumb" alt="Image 10" style="object-fit: cover;"></picture>
             </div>
           </div>
         </div>

diff --git a/tests/unit/components/gallery/__snapshots__/HdGalleryCarousel.spec.js.snap b/tests/unit/components/gallery/__snapshots__/HdGalleryCarousel.spec.js.snap
@@ -9,44 +9,44 @@ exports[`HdGalleryCarousel should render as expected 1`] = `
           <div class="gallery-carousel__item is-selected" style="position: absolute;">
             <div style="padding-top: 56.25%;"></div>
             <picture class="gallery-carousel__picture">
-              <source media="(max-width: 900px)" srcset="https://dummyimage.com/768x432?text=1+thumb+mw+900px"> <img src="https://dummyimage.com/154x86?text=1+thumb" alt="Image 1">
+              <source media="(max-width: 900px)" srcset="https://dummyimage.com/768x432?text=1+thumb+mw+900px"> <img src="https://dummyimage.com/154x86?text=1+thumb" alt="Image 1" style="object-fit: cover;">
             </picture>
           </div>
           <div class="gallery-carousel__item is-selected" style="position: absolute;">
             <div style="padding-top: 56.25%;"></div>
-            <picture class="gallery-carousel__picture"> <img src="https://dummyimage.com/154x86?text=2+thumb" alt="Image 2" srcset="https://dummyimage.com/308x172?text=2+thumb+DPR2x 2x, https://dummyimage.com/462x258?text=2+thumb+DPR3x 3x"></picture>
+            <picture class="gallery-carousel__picture"> <img src="https://dummyimage.com/154x86?text=2+thumb" alt="Image 2" srcset="https://dummyimage.com/308x172?text=2+thumb+DPR2x 2x, https://dummyimage.com/462x258?text=2+thumb+DPR3x 3x" style="object-fit: cover;"></picture>
           </div>
           <div class="gallery-carousel__item is-selected" style="position: absolute;">
             <div style="padding-top: 56.25%;"></div>
-            <picture class="gallery-carousel__picture"> <img src="https://dummyimage.com/154x86?text=3+thumb" alt="Image 3"></picture>
+            <picture class="gallery-carousel__picture"> <img src="https://dummyimage.com/154x86?text=3+thumb" alt="Image 3" style="object-fit: cover;"></picture>
           </div>
           <div class="gallery-carousel__item is-selected" style="position: absolute;">
             <div style="padding-top: 56.25%;"></div>
-            <picture class="gallery-carousel__picture"> <img src="https://dummyimage.com/154x86?text=4+thumb" alt="Image 4"></picture>
+            <picture class="gallery-carousel__picture"> <img src="https://dummyimage.com/154x86?text=4+thumb" alt="Image 4" style="object-fit: cover;"></picture>
           </div>
           <div class="gallery-carousel__item is-selected" style="position: absolute;">
             <div style="padding-top: 56.25%;"></div>
-            <picture class="gallery-carousel__picture"> <img src="https://dummyimage.com/154x86?text=5+thumb" alt="Image 5"></picture>
+            <picture class="gallery-carousel__picture"> <img src="https://dummyimage.com/154x86?text=5+thumb" alt="Image 5" style="object-fit: cover;"></picture>
           </div>
           <div class="gallery-carousel__item is-selected" style="position: absolute;">
             <div style="padding-top: 56.25%;"></div>
-            <picture class="gallery-carousel__picture"> <img src="https://dummyimage.com/154x86?text=6+thumb" alt="Image 6"></picture>
+            <picture class="gallery-carousel__picture"> <img src="https://dummyimage.com/154x86?text=6+thumb" alt="Image 6" style="object-fit: cover;"></picture>
           </div>
           <div class="gallery-carousel__item is-selected" style="position: absolute;">
             <div style="padding-top: 56.25%;"></div>
-            <picture class="gallery-carousel__picture"> <img src="https://dummyimage.com/154x86?text=7+thumb" alt="Image 7"></picture>
+            <picture class="gallery-carousel__picture"> <img src="https://dummyimage.com/154x86?text=7+thumb" alt="Image 7" style="object-fit: cover;"></picture>
           </div>
           <div class="gallery-carousel__item is-selected" style="position: absolute;">
             <div style="padding-top: 56.25%;"></div>
-            <picture class="gallery-carousel__picture"> <img src="https://dummyimage.com/154x86?text=8+thumb" alt="Image 8"></picture>
+            <picture class="gallery-carousel__picture"> <img src="https://dummyimage.com/154x86?text=8+thumb" alt="Image 8" style="object-fit: cover;"></picture>
           </div>
           <div class="gallery-carousel__item is-selected" style="position: absolute;">
             <div style="padding-top: 56.25%;"></div>
-            <picture class="gallery-carousel__picture"> <img src="https://dummyimage.com/154x86?text=9+thumb" alt="Image 9"></picture>
+            <picture class="gallery-carousel__picture"> <img src="https://dummyimage.com/154x86?text=9+thumb" alt="Image 9" style="object-fit: cover;"></picture>
           </div>
           <div class="gallery-carousel__item is-selected" style="position: absolute;">
             <div style="padding-top: 56.25%;"></div>
-            <picture class="gallery-carousel__picture"> <img src="https://dummyimage.com/154x86?text=10+thumb" alt="Image 10"></picture>
+            <picture class="gallery-carousel__picture"> <img src="https://dummyimage.com/154x86?text=10+thumb" alt="Image 10" style="object-fit: cover;"></picture>
           </div>
         </div>
       </div>