#53149 - Update banner commpoonent (#247)

Author: Joanna Szczęch

src/04-views/home/Home.vue

@@ -3,7 +3,7 @@
 <script>
 import AHeading from '../../atoms/heading/Heading.vue'
 import AImage from '../../atoms/image/Image.vue'
-import ABanner from '../../atoms/banner/Banner.vue'
+import ABanner from '../../molecules/banner/Banner.vue'
 import AList from '../../atoms/list/List.vue'
 import AListItem from '../../atoms/list-item/ListItem.vue'
 

src/atoms/banner/Banner.html renamed to src/molecules/banner/Banner.html

@@ -10,8 +10,8 @@
       :media="item.media"
     >
     <a-image
-      :src="image.src"
-      :alt="image.alt"
+      :src="imageSrc"
+      :alt="imageAlt"
     />
   </picture>
     <div

src/atoms/banner/Banner.js renamed to src/molecules/banner/Banner.js

@@ -9,10 +9,17 @@ export default {
       default: 'a'
     },
     /**
-     * Props for image should have keys: src, alt
+     *  Image alt
      */
-    image: {
-      type: Object,
+    imageAlt: {
+      type: String,
+      required: true
+    },
+    /**
+     *  Image src
+     */
+    imageSrc: {
+      type: String,
       required: true
     },
     /**

src/atoms/banner/Banner.scss renamed to src/molecules/banner/Banner.scss

@@ -1,4 +1,4 @@
-@import '../../../assets/styles/_globals.scss';
+@import '../../../assets/styles/globals';
 
 $banner-width          : 100% !default;
 $banner-text-decoration: none !default;

src/atoms/banner/Banner.spec.js renamed to src/molecules/banner/Banner.spec.js

@@ -5,7 +5,8 @@ describe('Banner', () => {
   it('has default structure', () => {
     const wrapper = mount(ABanner, {
       propsData: {
-        image: { key: 'key', src: 'src' }
+        imageAlt: 'alt',
+        imageSrc: 'src'
       }
     })
 
@@ -17,7 +18,8 @@ describe('Banner', () => {
   it('renders named slot text when passed', () => {
     const wrapper = mount(ABanner, {
       propsData: {
-        image: { key: 'key', src: 'src' },
+        imageAlt: 'alt',
+        imageSrc: 'src',
         text: 'Title'
       },
       slots: {
@@ -32,13 +34,15 @@ describe('Banner', () => {
   it('should be generated with correct props', () => {
     const wrapper = mount(ABanner, {
       propsData: {
-        image: { key: 'key', src: 'src' },
+        imageAlt: 'alt',
+        imageSrc: 'src',
         sources: [{ srcset: 'srcset', media: 'media' }],
         text: 'Text'
       }
     })
 
-    expect(wrapper.props().image.key).toBe('key')
+    expect(wrapper.props().imageSrc).toBe('src')
+    expect(wrapper.props().imageAlt).toBe('alt')
     expect(wrapper.props().sources[0].media).toBe('media')
     expect(wrapper.props().text).toBe('Text')
   })

src/atoms/banner/Banner.stories.js renamed to src/molecules/banner/Banner.stories.js

@@ -3,9 +3,7 @@ import { object, text } from '@storybook/addon-knobs'
 
 import ABanner from './Banner.vue'
 
-const info = `
-  <p>Check <b>Knobs</b> tab to edit component properties dynamically.</p>
-`
+const info = `<p>Check <b>Knobs</b> tab to edit component properties dynamically.</p>`
 
 const sources = [
   {
@@ -30,18 +28,16 @@ const sources = [
   }
 ]
 
-const image = {
-  src: '/images/banner/banner-320_176.jpg',
-  alt: 'Banner image'
-}
-
-storiesOf('Atoms/Banner', module)
+storiesOf('Molecules/Banner', module)
   .addParameters({ info })
   .add('Default', () => ({
     components: { ABanner },
     props: {
       imageKnobs: {
-        default: object('Image', image)
+        default: object('Image', '/images/banner/banner-320_176.jpg')
+      },
+      altKnobs: {
+        default: object('Alt', 'Banner image')
       },
       sourcesKnobs: {
         default: object('Sources', sources)
@@ -57,7 +53,8 @@ storiesOf('Atoms/Banner', module)
       <a-banner
         :href="hrefKnobs"
         :aria-label="ariaLabelKnobs"
-        :image="imageKnobs"
+        :image-src="imageKnobs"
+        :image-alt="altKnobs"
         :sources="sourcesKnobs"
       />
     `
@@ -66,7 +63,10 @@ storiesOf('Atoms/Banner', module)
     components: { ABanner },
     props: {
       imageKnobs: {
-        default: object('Image', { src: '/images/image/banner.jpg', alt: 'Banner' })
+        default: object('Image', '/images/image/banner.jpg')
+      },
+      altKnobs: {
+        default: object('Alt', 'Banner image')
       },
       textKnobs: {
         default: text('Text', 'Banner')
@@ -82,7 +82,8 @@ storiesOf('Atoms/Banner', module)
       <a-banner
         :href="hrefKnobs"
         :aria-label="ariaLabelKnobs"
-        :image="imageKnobs"
+        :image-src="imageKnobs"
+        :image-alt="altKnobs"
         tag="div"
       >
         <span style="color: white; font-size: 48px; font-weight: bold;">

src/atoms/banner/Banner.vue renamed to src/molecules/banner/Banner.vue

@@ -1,7 +1,7 @@
 <template src="./Banner.html" />
 
 <script>
-import AImage from '../image/Image.vue'
+import AImage from '../../atoms/image/Image.vue'
 
 import ABanner from './Banner.js'