Feature/update image

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",

src/atoms/image/Image.html

@@ -0,0 +1,13 @@
+<img
+  v-if="!usePicture"
+  v-bind="$attrs"
+  :class="getClass('image')"
+>
+<picture v-else>
+  <!-- @slot List of sources inside picture -->
+  <slot />
+  <img
+    v-bind="$attrs"
+    :class="getClass('image')"
+  >
+</picture>

src/atoms/image/Image.js

@@ -0,0 +1,33 @@
+import getClass from '../../../utils/helpers/get-class.js'
+
+export default {
+  mixins: [getClass],
+  inheritAttrs: false,
+  props: {
+    /**
+     * To use another tag instead of `img`, e.g. `picture`
+     */
+    tag: {
+      type: String,
+      default: 'img',
+      validator: tag => tag === 'img' || tag === 'picture'
+    }
+  },
+  data () {
+    return {
+      config: {
+        base: {
+          image: [
+            'block',
+            'max-w-full'
+          ]
+        }
+      }
+    }
+  },
+  computed: {
+    usePicture () {
+      return this.tag === 'picture'
+    }
+  }
+}

src/atoms/image/Image.spec.js

@@ -0,0 +1,25 @@
+import { mount } from '@vue/test-utils'
+import AImage from './Image.vue'
+
+describe('Image', () => {
+  it('has default structure', () => {
+    const wrapper = mount(AImage, {
+      propsData: {
+        src: '/images/image/banner.jpg'
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('IMG')
+  })
+
+  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')
+  })
+})

src/atoms/image/Image.stories.js

@@ -0,0 +1,160 @@
+import AImage from './Image.vue'
+import ALazyImage from './LazyImage.vue'
+
+export default {
+  title: 'Atoms/Image',
+  components: {
+    AImage,
+    ALazyImage
+  },
+  argTypes: {
+    src: {
+      control: {
+        type: 'text'
+      }
+    },
+    tag: {
+      control: {
+        type: 'text'
+      }
+    },
+    alt: {
+      control: {
+        type: 'text'
+      }
+    },
+    placeholderSrc: {
+      control: {
+        type: 'text'
+      }
+    }
+  }
+}
+
+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
+      v-bind="$props"
+    />
+  `
+})
+
+const TemplatePicture = (args, { argTypes }) => ({
+  components: { AImage },
+  props: Object.keys(argTypes),
+  template: `
+    <a-image
+      v-bind="$props"
+    >
+      <source
+        srcset="${sources[0].src}"
+        media="(max-width: ${sources[0].width})"
+      >
+      <source
+        srcset="${sources[1].src}"
+        media="(max-width: ${sources[1].width})"
+      >
+      <source
+        srcset="${sources[2].src}"
+        media="(max-width: ${sources[2].width})"
+      >
+    </a-image>
+  `
+})
+
+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: Object.keys(argTypes),
+  template: `
+    <a-lazy-image
+      v-bind="$props"
+      class="mt-80"
+    />
+  `
+})
+
+export const LazyImage = TemplateLazyImage.bind({})
+LazyImage.args = {
+  tag: 'img',
+  src: 'images/image/banner.jpg',
+  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),
+  template: `
+    <a-lazy-image
+      v-bind="$props"
+      class="mt-80"
+    >
+      <source
+        srcset="${sources[0].src}"
+        media="(max-width: ${sources[0].width})"
+      >
+      <source
+        srcset="${sources[1].src}"
+        media="(max-width: ${sources[1].width})"
+      >
+      <source
+        srcset="${sources[2].src}"
+        media="(max-width: ${sources[2].width})"
+      >
+      <template v-slot:placeholder>
+        <span>Placeholder slot</span>
+      </template>
+    </a-lazy-image>
+  `
+})
+export const LazyPicture = TemplateLazyPicture.bind({})
+LazyPicture.args = {
+  tag: 'picture',
+  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'
+}

src/atoms/image/Image.vue

@@ -0,0 +1,10 @@
+<template src="./Image.html" />
+
+<script>
+import AImage from './Image.js'
+
+export default {
+  name: 'AlpacaImage',
+  mixins: [AImage]
+}
+</script>

src/atoms/image/LazyImage.html

@@ -0,0 +1,24 @@
+<img
+  v-if="!usePicture"
+  v-bind="$attrs"
+  :class="[loaded && imgLoadedClass, getClass('image')]"
+  :src="src"
+  :srcset="srcset"
+  @load="load"
+  @error="error"
+>
+<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 -->
+  <slot v-else name="placeholder" />
+  <img
+    v-bind="$attrs"
+    ref="pictureImg"
+    :class="[loaded && imgLoadedClass, getClass('image')]"
+    :src="src"
+    :srcset="srcset"
+    @load="loadPicture"
+    @error="error"
+  >
+</picture>

src/atoms/image/LazyImage.js

@@ -0,0 +1,106 @@
+import getClass from '../../../utils/helpers/get-class.js'
+
+export default {
+  mixins: [getClass],
+  inheritAttrs: false,
+  props: {
+    /**
+     * To use another tag instead of `img`, e.g. `picture`
+     */
+    tag: {
+      type: String,
+      default: 'img',
+      validator: tag => tag === 'img' || tag === 'picture'
+    },
+    placeholderSrc: {
+      type: String,
+      default: null
+    },
+    imgLoadedClass: {
+      type: String,
+      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'
+          ]
+        }
+      }
+    }
+  },
+  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')
+      }
+    }
+  }
+}