From 06116f033ef131feda60f145aa63dfd8f0f87834 Mon Sep 17 00:00:00 2001
From: Zuza <zuzanna.szymanda@snow.dog>
Date: Fri, 31 Jul 2020 14:09:14 +0200
Subject: [PATCH 1/7] update image

---
 src/atoms/image/Image.css        |  5 +++
 src/atoms/image/Image.html       |  7 ++++
 src/atoms/image/Image.js         | 12 ++++++
 src/atoms/image/Image.spec.js    | 27 ++++++++++++++
 src/atoms/image/Image.stories.js | 64 ++++++++++++++++++++++++++++++++
 src/atoms/image/Image.vue        | 12 ++++++
 6 files changed, 127 insertions(+)
 create mode 100644 src/atoms/image/Image.css
 create mode 100644 src/atoms/image/Image.html
 create mode 100644 src/atoms/image/Image.js
 create mode 100644 src/atoms/image/Image.spec.js
 create mode 100644 src/atoms/image/Image.stories.js
 create mode 100644 src/atoms/image/Image.vue

diff --git a/src/atoms/image/Image.css b/src/atoms/image/Image.css
new file mode 100644
index 000000000..bfac73e5b
--- /dev/null
+++ b/src/atoms/image/Image.css
@@ -0,0 +1,5 @@
+.a-image {
+  @apply block;
+  @apply w-full max-w-full;
+  @apply transition-opacity duration-300 ease-linear;
+}
diff --git a/src/atoms/image/Image.html b/src/atoms/image/Image.html
new file mode 100644
index 000000000..da56c59aa
--- /dev/null
+++ b/src/atoms/image/Image.html
@@ -0,0 +1,7 @@
+<component
+  :is="tag"
+  class="a-image"
+>
+  <!-- @slot Slot for badge content -->
+  <slot />
+</component>
diff --git a/src/atoms/image/Image.js b/src/atoms/image/Image.js
new file mode 100644
index 000000000..caf41eff4
--- /dev/null
+++ b/src/atoms/image/Image.js
@@ -0,0 +1,12 @@
+// @vue/component
+export default {
+  props: {
+    /**
+     * To use another tag instead of `img`, e.g. `picture`
+     */
+    tag: {
+      type: String,
+      default: 'img'
+    }
+  }
+}
diff --git a/src/atoms/image/Image.spec.js b/src/atoms/image/Image.spec.js
new file mode 100644
index 000000000..d5c793658
--- /dev/null
+++ b/src/atoms/image/Image.spec.js
@@ -0,0 +1,27 @@
+import { mount } from '@vue/test-utils'
+import AImage from './Image.vue'
+
+describe('Image', () => {
+  it('has default structure', () => {
+    const wrapper = mount(AImage, {
+      propsData: {
+        src: '/sample/link/to/image.jpg'
+      }
+    })
+
+    expect(wrapper.is('img')).toBe(true)
+    expect(wrapper.classes()).toContain('a-image')
+    expect(wrapper.classes().length).toBe(1)
+  })
+
+  it('should be generated with the `alt` passed as attributes', () => {
+    const wrapper = mount(AImage, {
+      attrs: {
+        alt: 'Sample Image'
+      }
+    })
+
+    expect(wrapper.attributes().alt).toBeDefined()
+    expect(wrapper.attributes().alt).toEqual('Sample Image')
+  })
+})
diff --git a/src/atoms/image/Image.stories.js b/src/atoms/image/Image.stories.js
new file mode 100644
index 000000000..5f4b9f2b9
--- /dev/null
+++ b/src/atoms/image/Image.stories.js
@@ -0,0 +1,64 @@
+import { text } from '@storybook/addon-knobs'
+
+import AImage from './Image.vue'
+
+export default {
+  title: 'Atoms/Image',
+  components: AImage
+}
+
+export const Default = () => ({
+  components: { AImage },
+  props: {
+    srcKnob: {
+      default: text('Image src', 'images/image/banner-480_480.png')
+    }
+  },
+  template: `
+    <a-image
+      :src="srcKnob"
+      alt="alt image text"
+    />
+  `
+})
+
+export const Picture = () => ({
+  components: { AImage },
+  props: {
+    srcKnob: {
+      default: text('Default src', 'images/image/banner-480_480.png')
+    },
+    srcKnob1: {
+      default: text('Image src 1', 'images/image/banner-480_480.png')
+    },
+    srcKnob2: {
+      default: text('Image src 2', 'images/image/banner-768_402.png')
+    },
+    srcKnob3: {
+      default: text('Image src 3', 'images/image/banner-992_254.png')
+    },
+    tagKnob: {
+      default: text('Html tag', 'picture')
+    }
+  },
+  template: `
+    <a-image
+      :tag="tagKnob"
+      alt="alt image text"
+    >
+      <source
+        :srcset="srcKnob1"
+        media="(max-width: 480px)"
+      />
+      <source
+        :srcset="srcKnob2"
+        media="(max-width: 768px)"
+      />
+      <source
+        :srcset="srcKnob3"
+        media="(max-width: 1024px)"
+      />
+      <img :src="srcKnob" alt="alt text"/>
+    </a-image>
+  `
+})
diff --git a/src/atoms/image/Image.vue b/src/atoms/image/Image.vue
new file mode 100644
index 000000000..a8c603cd5
--- /dev/null
+++ b/src/atoms/image/Image.vue
@@ -0,0 +1,12 @@
+<template src="./Image.html" />
+
+<script>
+import AImage from './Image.js'
+
+export default {
+  name: 'AlpacaImage',
+  mixins: [AImage]
+}
+</script>
+
+<style src="./Image.css" />

From a837b5eb7407c222e5974907c89c30b7bb05a503 Mon Sep 17 00:00:00 2001
From: Zuza <zuzanna.szymanda@snow.dog>
Date: Fri, 31 Jul 2020 14:23:57 +0200
Subject: [PATCH 2/7] update story

---
 src/atoms/image/Image.stories.js | 29 +++++++++++++++++++----------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/atoms/image/Image.stories.js b/src/atoms/image/Image.stories.js
index 5f4b9f2b9..3bda3d953 100644
--- a/src/atoms/image/Image.stories.js
+++ b/src/atoms/image/Image.stories.js
@@ -1,4 +1,4 @@
-import { text } from '@storybook/addon-knobs'
+import { text, object } from '@storybook/addon-knobs'
 
 import AImage from './Image.vue'
 
@@ -29,13 +29,22 @@ export const Picture = () => ({
       default: text('Default src', 'images/image/banner-480_480.png')
     },
     srcKnob1: {
-      default: text('Image src 1', 'images/image/banner-480_480.png')
+      default: object('Image src 1', {
+        src: 'images/image/banner-480_480.png',
+        width: '480px'
+      })
     },
     srcKnob2: {
-      default: text('Image src 2', 'images/image/banner-768_402.png')
+      default: object('Image src 2', {
+        src: 'images/image/banner-768_402.png',
+        width: '768px'
+      })
     },
     srcKnob3: {
-      default: text('Image src 3', 'images/image/banner-992_254.png')
+      default: object('Image src 3', {
+        src: 'images/image/banner-992_254.png',
+        width: '1024px'
+      })
     },
     tagKnob: {
       default: text('Html tag', 'picture')
@@ -47,16 +56,16 @@ export const Picture = () => ({
       alt="alt image text"
     >
       <source
-        :srcset="srcKnob1"
-        media="(max-width: 480px)"
+        :srcset="srcKnob1.src"
+        :media="'(max-width: ' + srcKnob1.width + ')'"
       />
       <source
-        :srcset="srcKnob2"
-        media="(max-width: 768px)"
+        :srcset="srcKnob2.src"
+        :media="'(max-width: ' + srcKnob2.width + ')'"
       />
       <source
-        :srcset="srcKnob3"
-        media="(max-width: 1024px)"
+        :srcset="srcKnob3.src"
+        :media="'(max-width: ' + srcKnob3.width + ')'"
       />
       <img :src="srcKnob" alt="alt text"/>
     </a-image>

From d87ccb2b95949e4f659f1be81636f820bee1ac41 Mon Sep 17 00:00:00 2001
From: Zuza <zuzanna.szymanda@snow.dog>
Date: Fri, 14 Aug 2020 14:10:19 +0200
Subject: [PATCH 3/7] add lazy loaded image/picture

---
 src/atoms/image/Image.html       |  2 +-
 src/atoms/image/Image.stories.js | 74 +++++++++++++++++++++++++-
 src/atoms/image/LazyImage.html   | 26 +++++++++
 src/atoms/image/LazyImage.js     | 91 ++++++++++++++++++++++++++++++++
 src/atoms/image/LazyImage.vue    | 12 +++++
 5 files changed, 203 insertions(+), 2 deletions(-)
 create mode 100644 src/atoms/image/LazyImage.html
 create mode 100644 src/atoms/image/LazyImage.js
 create mode 100644 src/atoms/image/LazyImage.vue

diff --git a/src/atoms/image/Image.html b/src/atoms/image/Image.html
index da56c59aa..4596c1b69 100644
--- a/src/atoms/image/Image.html
+++ b/src/atoms/image/Image.html
@@ -2,6 +2,6 @@
   :is="tag"
   class="a-image"
 >
-  <!-- @slot Slot for badge content -->
+  <!-- @slot Slot for image content -->
   <slot />
 </component>
diff --git a/src/atoms/image/Image.stories.js b/src/atoms/image/Image.stories.js
index 3bda3d953..ebb2085de 100644
--- a/src/atoms/image/Image.stories.js
+++ b/src/atoms/image/Image.stories.js
@@ -1,10 +1,14 @@
 import { text, object } from '@storybook/addon-knobs'
 
 import AImage from './Image.vue'
+import ALazyImage from './LazyImage.vue'
 
 export default {
   title: 'Atoms/Image',
-  components: AImage
+  components: {
+    AImage,
+    ALazyImage
+  }
 }
 
 export const Default = () => ({
@@ -71,3 +75,71 @@ export const Picture = () => ({
     </a-image>
   `
 })
+
+export const LazyImage = () => ({
+  components: { ALazyImage },
+  props: {
+    srcKnob: {
+      default: text('Image src', 'images/image/banner-480_480.png')
+    }
+  },
+  template: `
+      <a-lazy-image
+        :src="srcKnob"
+        style="margin-top: 2000px;"
+        alt="alt text"
+      />
+    `
+})
+
+export const LazyPicture = () => ({
+  components: { ALazyImage },
+  props: {
+    srcKnob: {
+      default: text('Image src', 'images/image/banner-480_480.png')
+    },
+    srcKnob1: {
+      default: object('Image src 1', {
+        src: 'images/image/banner-480_480.png',
+        width: '480px'
+      })
+    },
+    srcKnob2: {
+      default: object('Image src 2', {
+        src: 'images/image/banner-768_402.png',
+        width: '768px'
+      })
+    },
+    srcKnob3: {
+      default: object('Image src 3', {
+        src: 'images/image/banner-992_254.png',
+        width: '1024px'
+      })
+    },
+    tagKnob: {
+      default: text('Html tag', 'picture')
+    }
+  },
+  template: `
+    <div style="margin-top: 2000px;">
+      <a-lazy-image
+        :tag="tagKnob"
+        alt="alt text"
+        :src="srcKnob"
+      >
+        <source
+          :srcset="srcKnob1.src"
+          :media="'(max-width: ' + srcKnob1.width + ')'"
+        />
+        <source
+          :srcset="srcKnob2.src"
+          :media="'(max-width: ' + srcKnob2.width + ')'"
+        />
+        <source
+          :srcset="srcKnob3.src"
+          :media="'(max-width: ' + srcKnob3.width + ')'"
+        />
+      </a-lazy-image>
+    </div>
+  `
+})
diff --git a/src/atoms/image/LazyImage.html b/src/atoms/image/LazyImage.html
new file mode 100644
index 000000000..95a59f416
--- /dev/null
+++ b/src/atoms/image/LazyImage.html
@@ -0,0 +1,26 @@
+<img
+  v-if="!usePicture"
+  v-bind="$attrs"
+  class="a-image"
+  :class="[loaded && imgLoadedClass]"
+  :src="src"
+  :srcset="srcset"
+  @load="load"
+  @error="error"
+>
+<picture v-else>
+  <!-- @slot List of sources inside picture -->
+  <slot v-if="intersected" />
+  <!-- @slot List of sources inside picture tag - with placeholder src -->
+  <slot v-else name="placeholder" />
+  <img
+    v-bind="$attrs"
+    ref="pictureImg"
+    class="a-image"
+    :class="[loaded && imgLoadedClass]"
+    :src="src"
+    :srcset="srcset"
+    @load="loadPicture"
+    @error="error"
+  >
+</picture>
diff --git a/src/atoms/image/LazyImage.js b/src/atoms/image/LazyImage.js
new file mode 100644
index 000000000..43ce7d703
--- /dev/null
+++ b/src/atoms/image/LazyImage.js
@@ -0,0 +1,91 @@
+// @vue/component
+export default {
+  inheritAttrs: false,
+  props: {
+    /**
+     * To use another tag instead of `img`, e.g. `picture`
+     */
+    tag: {
+      type: String,
+      default: 'img'
+    },
+    placeholderSrc: {
+      type: String,
+      default: null
+    },
+    imgLoadedClass: {
+      type: String,
+      default: 'a-image--loaded'
+    }
+  },
+  data: () => ({
+    observer: null,
+    intersected: false,
+    loaded: false
+  }),
+  computed: {
+    usePicture () {
+      return this.tag === 'picture'
+    },
+    src () {
+      return this.intersected && this.$attrs.src
+        ? this.$attrs.src
+        : this.placeholderSrc
+    },
+    srcset () {
+      return this.intersected && this.$attrs.srcset
+        ? this.$attrs.srcset
+        : false
+    }
+  },
+  mounted () {
+    if ('IntersectionObserver' in window) {
+      this.observer = new IntersectionObserver(entries => {
+        const image = entries[0]
+        if (image.isIntersecting) {
+          this.intersected = true
+          this.observer.disconnect()
+          /**
+           * Triggered when image intersects the viewport
+           * @type {Event}
+           */
+          this.$emit('intersect')
+        }
+      }, this.intersectionOptions)
+      this.observer.observe(this.$el)
+    }
+  },
+  destroyed () {
+    if ('IntersectionObserver' in window) {
+      this.observer.disconnect()
+    }
+  },
+  methods: {
+    error (event) {
+      /**
+       * Triggered when failed to load an image
+       * @type {Event}
+       */
+      this.$emit('imageError', event)
+    },
+    load () {
+      if (this.$el.getAttribute('src') !== this.srcPlaceholder) {
+        this.loaded = true
+        /**
+         * Triggered when image defined in src is loaded
+         * @type {Event}
+         */
+        this.$emit('load')
+      }
+    },
+    loadPicture () {
+      if (
+        this.$refs.pictureImg &&
+        this.$refs.pictureImg.getAttribute('src') !== this.srcPlaceholder
+      ) {
+        this.loaded = true
+        this.$emit('load')
+      }
+    }
+  }
+}
diff --git a/src/atoms/image/LazyImage.vue b/src/atoms/image/LazyImage.vue
new file mode 100644
index 000000000..bf909f6a4
--- /dev/null
+++ b/src/atoms/image/LazyImage.vue
@@ -0,0 +1,12 @@
+<template src="./LazyImage.html" />
+
+<script>
+import ALazyImage from './LazyImage.js'
+
+export default {
+  name: 'AlpacaLazyImage',
+  mixins: [ALazyImage]
+}
+</script>
+
+<style src="./Image.css" />

From 5a74a93643508b8d65067c0fad7bdf54f6c33832 Mon Sep 17 00:00:00 2001
From: Zuza <zuzanna.szymanda@snow.dog>
Date: Fri, 14 Aug 2020 14:37:19 +0200
Subject: [PATCH 4/7] add tags validation, change image template

---
 src/atoms/image/Image.html       | 14 ++++++++++----
 src/atoms/image/Image.js         |  9 ++++++++-
 src/atoms/image/Image.stories.js |  2 +-
 src/atoms/image/LazyImage.js     |  3 ++-
 4 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/atoms/image/Image.html b/src/atoms/image/Image.html
index 4596c1b69..74f4f4ceb 100644
--- a/src/atoms/image/Image.html
+++ b/src/atoms/image/Image.html
@@ -1,7 +1,13 @@
-<component
-  :is="tag"
+<img
+  v-if="!usePicture"
+  v-bind="$attrs"
   class="a-image"
 >
-  <!-- @slot Slot for image content -->
+<picture v-else>
+  <!-- @slot List of sources inside picture -->
   <slot />
-</component>
+  <img
+    v-bind="$attrs"
+    class="a-image"
+  >
+</picture>
diff --git a/src/atoms/image/Image.js b/src/atoms/image/Image.js
index caf41eff4..600b25cff 100644
--- a/src/atoms/image/Image.js
+++ b/src/atoms/image/Image.js
@@ -1,12 +1,19 @@
 // @vue/component
 export default {
+  inheritAttrs: false,
   props: {
     /**
      * To use another tag instead of `img`, e.g. `picture`
      */
     tag: {
       type: String,
-      default: 'img'
+      default: 'img',
+      validator: tag => tag === 'img' || tag === 'picture'
+    }
+  },
+  computed: {
+    usePicture () {
+      return this.tag === 'picture'
     }
   }
 }
diff --git a/src/atoms/image/Image.stories.js b/src/atoms/image/Image.stories.js
index ebb2085de..cbe4d752e 100644
--- a/src/atoms/image/Image.stories.js
+++ b/src/atoms/image/Image.stories.js
@@ -57,6 +57,7 @@ export const Picture = () => ({
   template: `
     <a-image
       :tag="tagKnob"
+      :src="srcKnob"
       alt="alt image text"
     >
       <source
@@ -71,7 +72,6 @@ export const Picture = () => ({
         :srcset="srcKnob3.src"
         :media="'(max-width: ' + srcKnob3.width + ')'"
       />
-      <img :src="srcKnob" alt="alt text"/>
     </a-image>
   `
 })
diff --git a/src/atoms/image/LazyImage.js b/src/atoms/image/LazyImage.js
index 43ce7d703..ec56a8456 100644
--- a/src/atoms/image/LazyImage.js
+++ b/src/atoms/image/LazyImage.js
@@ -7,7 +7,8 @@ export default {
      */
     tag: {
       type: String,
-      default: 'img'
+      default: 'img',
+      validator: tag => tag === 'img' || tag === 'picture'
     },
     placeholderSrc: {
       type: String,

From 66b151448ec3490dfd741211b479eef413d2e660 Mon Sep 17 00:00:00 2001
From: Zuza <zuzanna.szymanda@snow.dog>
Date: Fri, 28 Aug 2020 16:38:50 +0200
Subject: [PATCH 5/7] update tests

---
 src/atoms/image/Image.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/atoms/image/Image.spec.js b/src/atoms/image/Image.spec.js
index d5c793658..b55ed6312 100644
--- a/src/atoms/image/Image.spec.js
+++ b/src/atoms/image/Image.spec.js
@@ -9,7 +9,7 @@ describe('Image', () => {
       }
     })
 
-    expect(wrapper.is('img')).toBe(true)
+    expect(wrapper.element.tagName).toBe('IMG')
     expect(wrapper.classes()).toContain('a-image')
     expect(wrapper.classes().length).toBe(1)
   })

From 26da34a5c9eb3f56a6a9569af1f0a3f9846da77a Mon Sep 17 00:00:00 2001
From: Ania <anna.karon@snow.dog>
Date: Fri, 21 May 2021 15:03:29 +0200
Subject: [PATCH 6/7] update image component

---
 package.json                      |   1 +
 src/atoms/image/Image.css         |   5 -
 src/atoms/image/Image.html        |   4 +-
 src/atoms/image/Image.js          |  16 ++-
 src/atoms/image/Image.spec.js     |   4 +-
 src/atoms/image/Image.stories.js  | 206 ++++++++++++++----------------
 src/atoms/image/Image.vue         |   2 -
 src/atoms/image/LazyImage.html    |   8 +-
 src/atoms/image/LazyImage.js      |  28 +++-
 src/atoms/image/LazyImage.spec.js | 129 +++++++++++++++++++
 src/atoms/image/LazyImage.vue     |   7 +-
 tailwind.config.js                |   8 +-
 yarn.lock                         |   5 +
 13 files changed, 285 insertions(+), 138 deletions(-)
 delete mode 100644 src/atoms/image/Image.css
 create mode 100644 src/atoms/image/LazyImage.spec.js

diff --git a/package.json b/package.json
index 5ad3fc6ed..d4a12866b 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "glob": "^7.1.4",
     "jest": "^24.9.0",
     "jest-vue-preprocessor": "^1.5.0",
+    "lodash.merge": "^4.6.2",
     "storybook-addon-vue-info": "1.4.2",
     "storybook-vue-router": "^1.0.7",
     "stylelint": "^11.0.0",
diff --git a/src/atoms/image/Image.css b/src/atoms/image/Image.css
deleted file mode 100644
index bfac73e5b..000000000
--- a/src/atoms/image/Image.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.a-image {
-  @apply block;
-  @apply w-full max-w-full;
-  @apply transition-opacity duration-300 ease-linear;
-}
diff --git a/src/atoms/image/Image.html b/src/atoms/image/Image.html
index 74f4f4ceb..dacc7c403 100644
--- a/src/atoms/image/Image.html
+++ b/src/atoms/image/Image.html
@@ -1,13 +1,13 @@
 <img
   v-if="!usePicture"
   v-bind="$attrs"
-  class="a-image"
+  :class="getClass('image')"
 >
 <picture v-else>
   <!-- @slot List of sources inside picture -->
   <slot />
   <img
     v-bind="$attrs"
-    class="a-image"
+    :class="getClass('image')"
   >
 </picture>
diff --git a/src/atoms/image/Image.js b/src/atoms/image/Image.js
index 600b25cff..90c9f0de4 100644
--- a/src/atoms/image/Image.js
+++ b/src/atoms/image/Image.js
@@ -1,5 +1,7 @@
-// @vue/component
+import getClass from '../../../utils/helpers/get-class.js'
+
 export default {
+  mixins: [getClass],
   inheritAttrs: false,
   props: {
     /**
@@ -11,6 +13,18 @@ export default {
       validator: tag => tag === 'img' || tag === 'picture'
     }
   },
+  data () {
+    return {
+      config: {
+        base: {
+          image: [
+            'block',
+            'max-w-full'
+          ]
+        }
+      }
+    }
+  },
   computed: {
     usePicture () {
       return this.tag === 'picture'
diff --git a/src/atoms/image/Image.spec.js b/src/atoms/image/Image.spec.js
index b55ed6312..1845f4cf3 100644
--- a/src/atoms/image/Image.spec.js
+++ b/src/atoms/image/Image.spec.js
@@ -5,13 +5,11 @@ describe('Image', () => {
   it('has default structure', () => {
     const wrapper = mount(AImage, {
       propsData: {
-        src: '/sample/link/to/image.jpg'
+        src: '/images/image/banner.jpg'
       }
     })
 
     expect(wrapper.element.tagName).toBe('IMG')
-    expect(wrapper.classes()).toContain('a-image')
-    expect(wrapper.classes().length).toBe(1)
   })
 
   it('should be generated with the `alt` passed as attributes', () => {
diff --git a/src/atoms/image/Image.stories.js b/src/atoms/image/Image.stories.js
index cbe4d752e..23cd9602c 100644
--- a/src/atoms/image/Image.stories.js
+++ b/src/atoms/image/Image.stories.js
@@ -1,5 +1,3 @@
-import { text, object } from '@storybook/addon-knobs'
-
 import AImage from './Image.vue'
 import ALazyImage from './LazyImage.vue'
 
@@ -8,138 +6,132 @@ export default {
   components: {
     AImage,
     ALazyImage
+  },
+  argTypes: {
+    src: {
+      control: {
+        type: 'text'
+      }
+    },
+    tag: {
+      control: {
+        type: 'text'
+      }
+    },
+    alt: {
+      control: {
+        type: 'text'
+      }
+    }
   }
 }
 
-export const Default = () => ({
-  components: { AImage },
-  props: {
-    srcKnob: {
-      default: text('Image src', 'images/image/banner-480_480.png')
-    }
+const sources = [
+  {
+    src: 'images/image/banner-480_480.png',
+    width: '480px'
+  },
+  {
+    src: 'images/image/banner-768_402.png',
+    width: '768px'
   },
+  {
+    src: 'images/image/banner-992_254.png',
+    width: '992px'
+  }
+]
+
+const TemplateImage = (args, { argTypes }) => ({
+  components: { AImage },
+  props: Object.keys(argTypes),
   template: `
     <a-image
-      :src="srcKnob"
-      alt="alt image text"
+      v-bind="$props"
     />
   `
 })
 
-export const Picture = () => ({
+const TemplatePicture = (args, { argTypes }) => ({
   components: { AImage },
-  props: {
-    srcKnob: {
-      default: text('Default src', 'images/image/banner-480_480.png')
-    },
-    srcKnob1: {
-      default: object('Image src 1', {
-        src: 'images/image/banner-480_480.png',
-        width: '480px'
-      })
-    },
-    srcKnob2: {
-      default: object('Image src 2', {
-        src: 'images/image/banner-768_402.png',
-        width: '768px'
-      })
-    },
-    srcKnob3: {
-      default: object('Image src 3', {
-        src: 'images/image/banner-992_254.png',
-        width: '1024px'
-      })
-    },
-    tagKnob: {
-      default: text('Html tag', 'picture')
-    }
-  },
+  props: Object.keys(argTypes),
   template: `
     <a-image
-      :tag="tagKnob"
-      :src="srcKnob"
-      alt="alt image text"
+      v-bind="$props"
     >
       <source
-        :srcset="srcKnob1.src"
-        :media="'(max-width: ' + srcKnob1.width + ')'"
-      />
+        srcset="${sources[0].src}"
+        media="(max-width: ${sources[0].width})"
+      >
       <source
-        :srcset="srcKnob2.src"
-        :media="'(max-width: ' + srcKnob2.width + ')'"
-      />
+        srcset="${sources[1].src}"
+        media="(max-width: ${sources[1].width})"
+      >
       <source
-        :srcset="srcKnob3.src"
-        :media="'(max-width: ' + srcKnob3.width + ')'"
-      />
+        srcset="${sources[2].src}"
+        media="(max-width: ${sources[2].width})"
+      >
     </a-image>
   `
 })
 
-export const LazyImage = () => ({
+export const Image = TemplateImage.bind({})
+Image.args = {
+  tag: 'img',
+  src: 'images/image/banner.jpg',
+  alt: 'alt text goes here'
+}
+
+export const Picture = TemplatePicture.bind({})
+Picture.args = {
+  tag: 'picture',
+  src: 'images/image/banner.jpg',
+  alt: 'alt text goes here'
+}
+
+const TemplateLazyImage = (args, { argTypes }) => ({
   components: { ALazyImage },
-  props: {
-    srcKnob: {
-      default: text('Image src', 'images/image/banner-480_480.png')
-    }
-  },
+  props: Object.keys(argTypes),
   template: `
-      <a-lazy-image
-        :src="srcKnob"
-        style="margin-top: 2000px;"
-        alt="alt text"
-      />
-    `
+    <a-lazy-image
+      v-bind="$props"
+      class="mt-80"
+    />
+  `
 })
 
-export const LazyPicture = () => ({
+export const LazyImage = TemplateLazyImage.bind({})
+LazyImage.args = {
+  tag: 'img',
+  src: 'images/image/banner.jpg',
+  alt: 'alt text goes here'
+}
+
+const TemplateLazyPicture = (args, { argTypes }) => ({
   components: { ALazyImage },
-  props: {
-    srcKnob: {
-      default: text('Image src', 'images/image/banner-480_480.png')
-    },
-    srcKnob1: {
-      default: object('Image src 1', {
-        src: 'images/image/banner-480_480.png',
-        width: '480px'
-      })
-    },
-    srcKnob2: {
-      default: object('Image src 2', {
-        src: 'images/image/banner-768_402.png',
-        width: '768px'
-      })
-    },
-    srcKnob3: {
-      default: object('Image src 3', {
-        src: 'images/image/banner-992_254.png',
-        width: '1024px'
-      })
-    },
-    tagKnob: {
-      default: text('Html tag', 'picture')
-    }
-  },
+  props: Object.keys(argTypes),
   template: `
-    <div style="margin-top: 2000px;">
-      <a-lazy-image
-        :tag="tagKnob"
-        alt="alt text"
-        :src="srcKnob"
+    <a-lazy-image
+      v-bind="$props"
+      class="mt-80"
+    >
+      <source
+        srcset="${sources[0].src}"
+        media="(max-width: ${sources[0].width})"
       >
-        <source
-          :srcset="srcKnob1.src"
-          :media="'(max-width: ' + srcKnob1.width + ')'"
-        />
-        <source
-          :srcset="srcKnob2.src"
-          :media="'(max-width: ' + srcKnob2.width + ')'"
-        />
-        <source
-          :srcset="srcKnob3.src"
-          :media="'(max-width: ' + srcKnob3.width + ')'"
-        />
-      </a-lazy-image>
-    </div>
+      <source
+        srcset="${sources[1].src}"
+        media="(max-width: ${sources[1].width})"
+      >
+      <source
+        srcset="${sources[2].src}"
+        media="(max-width: ${sources[2].width})"
+      >
+    </a-lazy-image>
   `
 })
+export const LazyPicture = TemplateLazyPicture.bind({})
+LazyPicture.args = {
+  tag: 'picture',
+  src: 'images/image/banner.jpg',
+  alt: 'alt text goes here'
+}
diff --git a/src/atoms/image/Image.vue b/src/atoms/image/Image.vue
index a8c603cd5..ad1067cf9 100644
--- a/src/atoms/image/Image.vue
+++ b/src/atoms/image/Image.vue
@@ -8,5 +8,3 @@ export default {
   mixins: [AImage]
 }
 </script>
-
-<style src="./Image.css" />
diff --git a/src/atoms/image/LazyImage.html b/src/atoms/image/LazyImage.html
index 95a59f416..4b0272a92 100644
--- a/src/atoms/image/LazyImage.html
+++ b/src/atoms/image/LazyImage.html
@@ -1,14 +1,13 @@
 <img
   v-if="!usePicture"
   v-bind="$attrs"
-  class="a-image"
-  :class="[loaded && imgLoadedClass]"
+  :class="[loaded && imgLoadedClass, getClass('image')]"
   :src="src"
   :srcset="srcset"
   @load="load"
   @error="error"
 >
-<picture v-else>
+<picture v-else class="block">
   <!-- @slot List of sources inside picture -->
   <slot v-if="intersected" />
   <!-- @slot List of sources inside picture tag - with placeholder src -->
@@ -16,8 +15,7 @@
   <img
     v-bind="$attrs"
     ref="pictureImg"
-    class="a-image"
-    :class="[loaded && imgLoadedClass]"
+    :class="[loaded && imgLoadedClass, getClass('image')]"
     :src="src"
     :srcset="srcset"
     @load="loadPicture"
diff --git a/src/atoms/image/LazyImage.js b/src/atoms/image/LazyImage.js
index ec56a8456..662d00fc4 100644
--- a/src/atoms/image/LazyImage.js
+++ b/src/atoms/image/LazyImage.js
@@ -1,5 +1,7 @@
-// @vue/component
+import getClass from '../../../utils/helpers/get-class.js'
+
 export default {
+  mixins: [getClass],
   inheritAttrs: false,
   props: {
     /**
@@ -16,14 +18,26 @@ export default {
     },
     imgLoadedClass: {
       type: String,
-      default: 'a-image--loaded'
+      default: 'image--loaded'
+    }
+  },
+  data () {
+    return {
+      observer: null,
+      intersected: false,
+      loaded: false,
+      config: {
+        base: {
+          image: [
+            'block',
+            'max-w-full',
+            'opacity-0',
+            'transition-opacity', 'duration-300', 'ease-linear'
+          ]
+        }
+      }
     }
   },
-  data: () => ({
-    observer: null,
-    intersected: false,
-    loaded: false
-  }),
   computed: {
     usePicture () {
       return this.tag === 'picture'
diff --git a/src/atoms/image/LazyImage.spec.js b/src/atoms/image/LazyImage.spec.js
new file mode 100644
index 000000000..b83fc34e4
--- /dev/null
+++ b/src/atoms/image/LazyImage.spec.js
@@ -0,0 +1,129 @@
+import { mount } from '@vue/test-utils'
+import merge from 'lodash.merge'
+import LazyImage from './LazyImage.vue'
+
+const slotContent = 'This is a placeholder'
+const factory = (overrideData = {}) => {
+  const defaultData = {
+    propsData: {
+      src: '/images/image/banner.jpg'
+    }
+  }
+
+  return mount(LazyImage, merge(defaultData, overrideData))
+}
+
+describe('atoms/LazyImage.vue', () => {
+  it('has default structure', () => {
+    const wrapper = factory()
+
+    expect(wrapper.element.tagName).toBe('IMG')
+  })
+
+  it('contains image src when intersected', async () => {
+    const wrapper = factory()
+
+    expect(wrapper.find('img').attributes().src).toBeUndefined()
+
+    await wrapper.setData({ intersected: true })
+
+    expect(wrapper.find('img').attributes().src).toBe(wrapper.vm.src)
+  })
+
+  it('@load event emitted when image loaded', async () => {
+    const wrapper = factory()
+
+    expect(wrapper.emitted('load')).toBeUndefined()
+
+    await wrapper.setData({ intersected: true })
+    wrapper.find('img').trigger('load')
+
+    expect(wrapper.emitted('load')).toBeDefined()
+    expect(wrapper.emitted('load').length).toBe(1)
+  })
+
+  it('placeholder slot data showed before standard image in picture tag', () => {
+    const wrapper = factory({
+      propsData: {
+        usePicture: true,
+        placeholderSrc: 'data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII&#x3D;'
+      },
+      slots: {
+        placeholder: `<span class="placeholder-slot">${slotContent}</span>`
+      }
+    })
+    wrapper.setData({ intersected: false })
+
+    expect(wrapper.find('.placeholder-slot').exists()).toBe(true)
+    expect(wrapper.find('.placeholder-slot').text()).toBe(slotContent)
+  })
+
+  it('default slot data showed if intersected', async () => {
+    const wrapper = factory({
+      propsData: {
+        usePicture: true
+      },
+      slots: {
+        default: `<span class="default-slot">${slotContent}</span>`
+      }
+    })
+
+    await wrapper.setData({ intersected: true })
+
+    expect(wrapper.find('.default-slot').exists()).toBe(true)
+    expect(wrapper.find('.default-slot').text()).toBe(slotContent)
+  })
+
+  it('@load event emitted when picture tag loaded', async () => {
+    const wrapper = factory({
+      propsData: {
+        usePicture: true
+      }
+    })
+
+    expect(wrapper.emitted('load')).toBeUndefined()
+
+    await wrapper.setData({ intersected: true })
+    wrapper.find('img').trigger('load')
+
+    expect(wrapper.emitted('load')).toBeDefined()
+    expect(wrapper.emitted('load').length).toBe(1)
+  })
+
+  it('@error event emitted when image is broken', () => {
+    const wrapper = factory()
+
+    expect(wrapper.emitted('image-error')).toBeUndefined()
+
+    wrapper.find('img').trigger('error')
+
+    expect(wrapper.emitted('image-error')).toBeDefined()
+    expect(wrapper.emitted('image-error').length).toBe(1)
+  })
+
+  it('@error event emitted when picture is broken', () => {
+    const wrapper = factory({
+      propsData: {
+        usePicture: true
+      }
+    })
+
+    expect(wrapper.emitted('image-error')).toBeUndefined()
+
+    wrapper.find('img').trigger('error')
+
+    expect(wrapper.emitted('image-error')).toBeDefined()
+    expect(wrapper.emitted('image-error').length).toBe(1)
+  })
+
+  it('should be generated with the `alt` passed as attributes', () => {
+    const wrapper = factory({
+      propsData: {
+        alt: 'Sample Image'
+      }
+    })
+
+    expect(wrapper.find('img').attributes().alt).toBeDefined()
+    expect(wrapper.find('img').attributes().alt).toEqual('Sample Image')
+  })
+})
diff --git a/src/atoms/image/LazyImage.vue b/src/atoms/image/LazyImage.vue
index bf909f6a4..ecf560638 100644
--- a/src/atoms/image/LazyImage.vue
+++ b/src/atoms/image/LazyImage.vue
@@ -8,5 +8,8 @@ export default {
   mixins: [ALazyImage]
 }
 </script>
-
-<style src="./Image.css" />
+<style>
+.image--loaded {
+  @apply opacity-100;
+}
+</style>
diff --git a/tailwind.config.js b/tailwind.config.js
index 9dd79059c..105fc8a00 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,6 +6,9 @@ module.exports = {
     extend: {
       minHeight: {
         24: '24px'
+      },
+      maxWidth: {
+        content: '1328px'
       }
     },
     screens: {
@@ -71,10 +74,7 @@ module.exports = {
     }),
     outline: theme => ({
       focus: [`2px solid ${theme('colors.bright-sky-blue')}`, '-1px']
-    }),
-    maxWidth: {
-      content: '1328px'
-    }
+    })
   },
   variants: {},
   plugins: [],
diff --git a/yarn.lock b/yarn.lock
index acdcf737d..20faa516f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9932,6 +9932,11 @@ lodash.kebabcase@^4.1.1:
   resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36"
   integrity sha1-hImxyw0p/4gZXM7KRI/21swpXDY=
 
+lodash.merge@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
+  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
+
 lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"

From a1a7343c683d3ceb69ecefd3ae0ecbe92e4ad973 Mon Sep 17 00:00:00 2001
From: Ania <anna.karon@snow.dog>
Date: Fri, 21 May 2021 15:57:36 +0200
Subject: [PATCH 7/7] update tests

---
 src/atoms/image/Image.stories.js  | 23 +++++++++++++++++++++++
 src/atoms/image/LazyImage.spec.js | 17 +++++++++--------
 2 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/src/atoms/image/Image.stories.js b/src/atoms/image/Image.stories.js
index 23cd9602c..648ffd873 100644
--- a/src/atoms/image/Image.stories.js
+++ b/src/atoms/image/Image.stories.js
@@ -22,6 +22,11 @@ export default {
       control: {
         type: 'text'
       }
+    },
+    placeholderSrc: {
+      control: {
+        type: 'text'
+      }
     }
   }
 }
@@ -106,6 +111,14 @@ LazyImage.args = {
   alt: 'alt text goes here'
 }
 
+export const LazyImageWithPlaceholder = TemplateLazyImage.bind({})
+LazyImageWithPlaceholder.args = {
+  tag: 'img',
+  src: 'images/image/banner.jpg',
+  alt: 'alt text goes here',
+  placeholderSrc: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAG0lEQVQYV2M8c+bMfwZGRgbGs2fO/v/P8J8BAFA1CMsVPhxYAAAAAElFTkSuQmCC'
+}
+
 const TemplateLazyPicture = (args, { argTypes }) => ({
   components: { ALazyImage },
   props: Object.keys(argTypes),
@@ -126,6 +139,9 @@ const TemplateLazyPicture = (args, { argTypes }) => ({
         srcset="${sources[2].src}"
         media="(max-width: ${sources[2].width})"
       >
+      <template v-slot:placeholder>
+        <span>Placeholder slot</span>
+      </template>
     </a-lazy-image>
   `
 })
@@ -135,3 +151,10 @@ LazyPicture.args = {
   src: 'images/image/banner.jpg',
   alt: 'alt text goes here'
 }
+export const LazyPictureWithPlaceholder = TemplateLazyPicture.bind({})
+LazyPictureWithPlaceholder.args = {
+  tag: 'picture',
+  src: 'images/image/banner.jpg',
+  alt: 'alt text goes here',
+  placeholderSrc: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAG0lEQVQYV2M8c+bMfwZGRgbGs2fO/v/P8J8BAFA1CMsVPhxYAAAAAElFTkSuQmCC'
+}
diff --git a/src/atoms/image/LazyImage.spec.js b/src/atoms/image/LazyImage.spec.js
index b83fc34e4..321d23226 100644
--- a/src/atoms/image/LazyImage.spec.js
+++ b/src/atoms/image/LazyImage.spec.js
@@ -6,6 +6,7 @@ const slotContent = 'This is a placeholder'
 const factory = (overrideData = {}) => {
   const defaultData = {
     propsData: {
+      tag: 'img',
       src: '/images/image/banner.jpg'
     }
   }
@@ -45,7 +46,7 @@ describe('atoms/LazyImage.vue', () => {
   it('placeholder slot data showed before standard image in picture tag', () => {
     const wrapper = factory({
       propsData: {
-        usePicture: true,
+        tag: 'picture',
         placeholderSrc: 'data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII&#x3D;'
       },
       slots: {
@@ -61,7 +62,7 @@ describe('atoms/LazyImage.vue', () => {
   it('default slot data showed if intersected', async () => {
     const wrapper = factory({
       propsData: {
-        usePicture: true
+        tag: 'picture'
       },
       slots: {
         default: `<span class="default-slot">${slotContent}</span>`
@@ -77,7 +78,7 @@ describe('atoms/LazyImage.vue', () => {
   it('@load event emitted when picture tag loaded', async () => {
     const wrapper = factory({
       propsData: {
-        usePicture: true
+        tag: 'picture'
       }
     })
 
@@ -97,14 +98,14 @@ describe('atoms/LazyImage.vue', () => {
 
     wrapper.find('img').trigger('error')
 
-    expect(wrapper.emitted('image-error')).toBeDefined()
-    expect(wrapper.emitted('image-error').length).toBe(1)
+    expect(wrapper.emitted('imageError')).toBeDefined()
+    expect(wrapper.emitted('imageError').length).toBe(1)
   })
 
   it('@error event emitted when picture is broken', () => {
     const wrapper = factory({
       propsData: {
-        usePicture: true
+        tag: 'picture'
       }
     })
 
@@ -112,8 +113,8 @@ describe('atoms/LazyImage.vue', () => {
 
     wrapper.find('img').trigger('error')
 
-    expect(wrapper.emitted('image-error')).toBeDefined()
-    expect(wrapper.emitted('image-error').length).toBe(1)
+    expect(wrapper.emitted('imageError')).toBeDefined()
+    expect(wrapper.emitted('imageError').length).toBe(1)
   })
 
   it('should be generated with the `alt` passed as attributes', () => {