@iamproperty/components 2.9.0 → 3.1.0

package/src/components/CardDeck/CardDeck.spec.js

@@ -0,0 +1,99 @@
+import { mount } from '@vue/test-utils'
+import CardDeck from './/CardDeck.vue'
+import Card from '../../elements/Card/Card.vue'
+
+describe('Card Deck component', () => {
+
+  const test = mount(CardDeck, {
+    propsData: {
+      items: [
+        {
+          link: '/components/card-deck',
+          title: 'Card 1',
+          content: `<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages..</p>`
+        },
+        {
+          link: '/components/card-deck',
+          title: 'Card 2',
+          content: `<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur, tortor eu faucibus facilisis, felis libero blandit dolor.</p>`
+        },
+        {
+          link: '/components/card-deck',
+          title: 'Card 3',
+          content: `<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur, tortor eu faucibus facilisis, felis libero blandit dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur.</p>`
+        }
+      ]
+    },
+    slots: {
+      default: '<p>Hello</p>',
+      after: '<p>Hello 2</p>'
+    }
+  })
+
+  it('renders the content before the card deck', () => {
+    expect(test.html()).toContain('<p>Hello</p>')
+  })
+
+  it('renders the content after the card deck', () => {
+    expect(test.html()).toContain('<p>Hello 2</p>')
+  })
+
+  it('renders the card title', () => {
+    expect(test.html()).toContain('<span class="card-title d-block h4">Card 1</span>')
+    expect(test.html()).toContain('<span class="card-title d-block h4">Card 2</span>')
+    expect(test.html()).toContain('<span class="card-title d-block h4">Card 3</span>')
+  })
+
+  it('renders the correct number of cards', () => {
+
+    expect(test.findAll('.card').length).toBe(3)
+  })
+})
+
+
+describe('Property Card component', () => {
+
+  const test = mount(CardDeck, {
+    propsData: {
+      items: [
+        {
+          link: '/components/card-deck',
+          content: `<p>Reservation fee applies</p>`,
+          image: 'house.jpg',
+          title: '4 bed semi-detached',
+          subtitle: 'Burt terrace, Newcastle upon tyne',
+          details: {
+            tags: ['Modern method','Freehold'],
+            guideprice: '£90,000.00',
+            auctiontime: '19 days',
+            status: 'Live now',
+            images: 5,
+            videos: 2,
+            logo: 'logo.jpg'
+          }
+        }
+      ]
+    }
+  })
+
+
+  it('renders the property card title', () => {
+    expect(test.html()).toContain('<span class="card-title d-block h4">4 bed semi-detached <span class="d-block fw-normal font-body text-body small">Burt terrace, Newcastle upon tyne</span></span>')
+
+  })
+
+  it('renders the card image', () => {
+
+    expect(test.html()).toContain('<img src="house.jpg" alt="" loading="lazy" class="card-image">')
+  })
+
+  it('renders the card logo', () => {
+
+    expect(test.html()).toContain('<img src="logo.jpg" alt="" loading="lazy" class="card-logo">')
+  })
+
+  it('renders the card tags', () => {
+
+    expect(test.html()).toContain('<span class="badge rounded-pill py-2 px-3 mb-3 me-2 bg-secondary text-primary">Modern method</span>')
+  })
+})

package/src/components/CardDeck/CardDeck.vue

@@ -3,7 +3,7 @@
       <slot></slot>
       <div :class="`row row-cols-${cols} row-cols-sm-${smcols} row-cols-md-${mdcols} ${gap ? `g-${gap}`: ``}`">
         <div class="col" v-for="(value,index) in items" :key="index">
-          <Card v-bind="value" :class="cardclass" :type="cardtype" :btntype="btntype" :titleclass="titleclass" :ctatext="ctatext" :hidectatext="hidectatext"></Card>
+          <Card v-bind="value" :class="cardclass" :type="cardtype" :btntype="(value.btntype ? value.btntype : btntype )" :titleclass="(value.titleclass ? value.titleclass : titleclass)" :ctatext="value.ctatext" :hidectatext="hidectatext"></Card>
         </div>
       </div>
       <slot name="after"></slot>

package/src/components/Carousel/Carousel.spec.js

@@ -0,0 +1,45 @@
+import { mount } from '@vue/test-utils'
+import Carousel from './Carousel.vue'
+
+describe('Carousel component', () => {
+
+  const test = mount(Carousel, {
+    propsData: {
+      items: [
+        {
+          link: '/components/card-deck',
+          title: 'Card 1',
+          content: `<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages..</p>`
+        },
+        {
+          link: '/components/card-deck',
+          title: 'Card 2',
+          content: `<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur, tortor eu faucibus facilisis, felis libero blandit dolor.</p>`
+        },
+        {
+          link: '/components/card-deck',
+          title: 'Card 3',
+          content: `<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur, tortor eu faucibus facilisis, felis libero blandit dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur.</p>`
+        }
+      ]
+    },
+    slots: {
+      default: '<p>Hello</p>'
+    }
+  })
+
+  it('renders the content before the carousel', () => {
+    expect(test.html()).toContain('<p>Hello</p>')
+  })
+
+
+  it('renders the correct number of columns', () => {
+
+    expect(test.findAll('.col').length).toBe(3)
+  })
+
+  it('renders the correct number of pips', () => {
+
+    expect(test.findAll('.carousel__controls a').length).toBe(3)
+  })
+})

package/src/components/Chart/Chart.spec.js

@@ -0,0 +1,201 @@
+import { mount } from '@vue/test-utils'
+import Chart from './Chart.vue'
+
+describe('Chart component', () => {
+
+  const test = mount(Chart, {
+    propsData: {
+      max: 100,
+      min: 0,
+      yaxis: [
+        {
+          value: 0,
+          display: '£0'
+        },
+        {
+          value: 50,
+          display: '£50'
+        },
+        {
+          value: 100,
+          display: '£100'
+        }
+      ],
+      fields: [
+        { key: 'year' },
+        { key: 'Growth' },
+        { key: 'Growth2' }
+      ],
+      items: [
+        {
+          year: '2011',
+          growth: '£50.0',
+          growth2: '£50.10'
+        },
+        {
+          year: '2012',
+          growth: '£75.00',
+          growth2: '£50.10'
+        },
+        {
+          year: '2013',
+          growth: '£45.00',
+          growth2: '£57.10'
+        },
+        {
+          year: '2014',
+          growth: '£35.00',
+          growth2: '£80.10'
+        }
+      ]
+    }
+  })
+
+  // On load render a table
+  it('renders a thead', () => {
+
+    expect(test.find('thead').exists()).toBe(true)
+  })
+
+  it('renders a tbody', () => {
+
+    expect(test.find('tbody').exists()).toBe(true)
+  })
+
+  // Render a bar chart
+  it('renders a y-axis', () => {
+
+    expect(test.find('.chart__yaxis').exists()).toBe(true)
+  })
+
+  it('renders guidelines', () => {
+
+    expect(test.find('.chart__guidelines').exists()).toBe(true)
+  })
+
+
+  it('Numeric value and percent value is added to the table cells', () => {
+
+    expect(test.html()).toContain('<td data-label="Growth" data-numeric="50" style="--bottom:0%;--percent:50%;"><span data-group="2011" data-label="Growth">£50.0</span></td>')
+  })
+
+})
+
+
+describe('Line Chart component', () => {
+
+  const test = mount(Chart, {
+    propsData: {
+      type: 'line',
+      max: 100,
+      min: 0,
+      yaxis: [
+        {
+          value: 0,
+          display: '£0'
+        },
+        {
+          value: 50,
+          display: '£50'
+        },
+        {
+          value: 100,
+          display: '£100'
+        }
+      ],
+      fields: [
+        { key: 'year' },
+        { key: 'Growth' },
+        { key: 'Growth2' }
+      ],
+      items: [
+        {
+          year: '2011',
+          growth: '£50.0',
+          growth2: '£50.10'
+        },
+        {
+          year: '2012',
+          growth: '£75.00',
+          growth2: '£50.10'
+        },
+        {
+          year: '2013',
+          growth: '£45.00',
+          growth2: '£57.10'
+        },
+        {
+          year: '2014',
+          growth: '£35.00',
+          growth2: '£80.10'
+        }
+      ]
+    }
+  })
+
+  it('SVG line is created ', () => {
+
+    expect(test.html()).toContain('<path fill="none" d="M 0 50 L 66.66666666666667 25 L 133.33333333333334 55 L 200 65 "></path>')
+  })
+
+
+})
+
+describe('Pie Chart component', () => {
+
+  const test = mount(Chart, {
+    propsData: {
+      type: 'pie',
+      max: 100,
+      min: 0,
+      yaxis: [
+        {
+          value: 0,
+          display: '£0'
+        },
+        {
+          value: 50,
+          display: '£50'
+        },
+        {
+          value: 100,
+          display: '£100'
+        }
+      ],
+      fields: [
+        { key: 'year' },
+        { key: 'Growth' },
+        { key: 'Growth2' }
+      ],
+      items: [
+        {
+          year: '2011',
+          growth: '£50.0',
+          growth2: '£50.10'
+        },
+        {
+          year: '2012',
+          growth: '£75.00',
+          growth2: '£50.10'
+        },
+        {
+          year: '2013',
+          growth: '£45.00',
+          growth2: '£57.10'
+        },
+        {
+          year: '2014',
+          growth: '£35.00',
+          growth2: '£80.10'
+        }
+      ]
+    }
+  })
+
+  it('SVG pie section is created ', () => {
+
+    expect(test.html()).toContain('<path d="M -100 1.2246467991473532e-14 A 100 100 0 0 1 100 -2.4492935982947064e-14 L 0 0"></path>')
+  })
+
+
+})

package/src/components/Chart/Chart.vue

@@ -8,7 +8,7 @@
     </div>
 
     <div :class="`chart chart--${type}`" ref="chart">
-      
+
       <div class="chart__yaxis" role="presentation">
         <div :key="index" v-for="(point,index) in yaxis" :style="`--value: ${point.value};--percent:${((point.value-min)/(max-min))*100}%;`" class="axis__point">
           <span>{{point.display}}</span>
@@ -34,11 +34,11 @@
 
 <script>
 import { ucfirst, unsnake } from '../../helpers/strings'
-import Table from '@/elements/Table/Table.vue'
+import Table from '../../elements/Table/Table.vue'
 import chartModule from '../../../assets/js/modules/chart.js'
 
 export default {
-  name: 'Chart',  
+  name: 'Chart',
   components: {
     Table
   },

package/src/components/Header/Header.spec.js

@@ -0,0 +1,33 @@
+import { shallowMount } from '@vue/test-utils'
+import Header from './Header.vue'
+
+describe('Header component', () => {
+
+  const test = shallowMount(Header, {
+    propsData: {
+      title: 'Page title',
+      image: '/img/src/img.png'
+    },
+    slots: {
+      default: '<p>Hello</p>',
+      breadcrumb: '<ul class="breadcrumb"></ul>'
+    }
+  })
+
+  it('renders the page title', () => {
+    expect(test.html()).toContain('<h1>Page title</h1>')
+  })
+
+  it('renders the page description', () => {
+    expect(test.html()).toContain('<p>Hello</p>')
+  })
+
+  it('renders the breadcrumb trail', () => {
+    expect(test.html()).toContain('<ul class="breadcrumb"></ul>')
+  })
+
+  it('renders the image', () => {
+    expect(test.html()).toContain('<source srcset="/img/src/img.png" media="(min-width: 62em)">')
+    expect(test.html()).toContain('<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="">')
+  })
+})

package/src/components/Modal/Modal.spec.js

@@ -0,0 +1,22 @@
+import { shallowMount } from '@vue/test-utils'
+import Modal from './Modal.vue'
+
+describe('Modal component', () => {
+
+  const test = shallowMount(Modal, {
+    propsData: {
+      id: 'modal'
+    },
+    slots: {
+      default: '<p>Hello</p>'
+    }
+  })
+
+  it('renders the close button', () => {
+    expect(test.html()).toContain('<a href="#close" class="btn btn-tertiary py-1 px-2"><span class="visually-hidden">Close</span>✕</a>')
+  })
+
+  it('renders the modal content', () => {
+    expect(test.html()).toContain('<p>Hello</p>')
+  })
+})

package/src/components/Nav/Nav.spec.js

@@ -0,0 +1,35 @@
+import { shallowMount } from '@vue/test-utils'
+import Nav from './Nav.vue'
+
+describe('Nav component', () => {
+  /* Logo */
+  it('renders the iam property logo by default', () => {
+    const test = shallowMount(Nav, {
+      propsData: { }
+    })
+
+    expect(test.html()).toContain('<logo-stub id="property" path=\"/svg/logo.svg\" class=\"pb-0\"></logo-stub>')
+  })
+
+  it('renders the correct logo when a logo id is passed', () => {
+    const test = shallowMount(Nav, {
+      propsData: {
+        logo: 'sold'
+      }
+    })
+
+    expect(test.html()).toContain('<logo-stub id="sold" path=\"/svg/logo.svg\" class=\"pb-0\"></logo-stub>')
+  })
+
+  /* Menu button */
+  it('renders the iam property logo by default', () => {
+    const test = shallowMount(Nav, {
+      propsData: { }
+    })
+
+    expect(test.html()).toContain('<label for="showMenu">Menu</label>')
+    expect(test.html()).toContain('<input type="checkbox" name="showSearch" id="showSearch" class="d-none">')
+  })
+
+
+})

package/src/components/Nav/Nav.vue

@@ -58,8 +58,11 @@
 
           <div class="col nav__account-btn flex-row align-items-center" v-if="hasAccountSlot">
             <label for="showAccount">
+
               <svg class="icon" viewBox="0 0 28 28">
-                <use xlink:href="/svg/icons.svg#icon-account"></use>
+                <path d="M14,28a13.861,13.861,0,0,1-9.268-3.533l-.023.047-.721-.738L3.62,23.4l.012-.023a14,14,0,1,1,20.735,0l.012.023-.367.377-.722.738-.024-.045A13.855,13.855,0,0,1,14,28Zm0-9.58a10.5,10.5,0,0,0-1.368.092c-.085.012-.17.03-.252.047-.061.013-.124.026-.187.037l-.077.013c-.266.047-.54.095-.8.165-.108.029-.215.065-.318.1-.063.022-.125.043-.188.063l-.08.026c-.223.071-.454.144-.671.234-.125.05-.245.11-.362.168l-.146.072-.045.021c-.208.1-.423.2-.623.312-.131.074-.257.158-.379.239l-.106.07-.068.044c-.176.114-.359.232-.528.359-.137.1-.267.218-.393.327l-.054.047c-.174.15-.355.306-.519.47-.132.134-.258.277-.38.416l-.018.021c-.16.184-.3.35-.437.527-.12.161-.23.33-.337.494-.076.117-.146.238-.214.356a12.495,12.495,0,0,0,17.109,0l-.022-.037c-.061-.1-.125-.212-.192-.315-.1-.156-.214-.333-.338-.5-.141-.188-.293-.363-.436-.526-.113-.13-.253-.292-.4-.438-.161-.162-.337-.314-.517-.468l-.08-.069c-.118-.1-.24-.209-.368-.307-.183-.137-.379-.264-.568-.387l-.026-.017-.106-.07c-.125-.083-.251-.166-.381-.24-.207-.118-.429-.222-.643-.322l-.024-.011-.152-.074c-.116-.057-.235-.116-.356-.165-.214-.087-.438-.159-.656-.229l-.1-.031c-.066-.021-.132-.043-.2-.066-.1-.035-.2-.07-.309-.1-.264-.07-.538-.118-.8-.165l-.078-.014c-.063-.011-.126-.024-.187-.037-.082-.017-.167-.035-.252-.047A10.483,10.483,0,0,0,14,18.421Zm0-1.473a11.871,11.871,0,0,1,1.54.1c.1.013.192.033.284.052.069.014.139.028.209.04.34.058.672.118,1,.2.14.036.278.082.412.127l.151.05c.309.1.587.188.859.3.148.059.293.127.433.194l.13.061c.306.142.553.266.775.389.188.107.368.22.535.328.26.166.489.322.7.478.156.117.316.244.49.389.209.176.412.361.622.567.156.154.3.293.43.443.209.23.4.472.542.657l.051.066c.1.134.21.272.308.416.021.031.045.061.068.09a1.267,1.267,0,0,1,.085.117,12.525,12.525,0,1,0-19.24,0c.026-.04.056-.078.084-.114s.05-.064.073-.1c.1-.141.2-.278.3-.409l.046-.059c.2-.264.378-.478.555-.672.137-.152.281-.3.417-.43.215-.21.422-.4.635-.578.18-.15.332-.271.479-.381.208-.155.433-.31.709-.486.174-.111.346-.219.526-.319.274-.153.55-.285.783-.393l.112-.053c.144-.069.293-.14.445-.2.282-.113.578-.208.864-.3l.159-.052c.132-.044.265-.088.4-.124.331-.087.675-.148,1-.2.068-.012.137-.026.2-.039.094-.019.191-.039.288-.052A11.827,11.827,0,0,1,14,16.948Z" transform="translate(0 -0.001)" />
+  	<path d="M5.2,10.4a5.2,5.2,0,1,1,5.2-5.2A5.206,5.206,0,0,1,5.2,10.4Zm0-8.915A3.714,3.714,0,1,0,8.915,5.2,3.719,3.719,0,0,0,5.2,1.486Z" transform="translate(8.8 4.8)" />
+
               </svg>
               <span>My account</span>
             </label>
@@ -198,7 +201,7 @@ export default {
       return !!this.$slots.account
     },
     isMarketplace() {
-      return this.$vnode.data.staticClass && this.$vnode.data.staticClass.includes('nav--marketplace') ? true : false;
+      return false;
     }
   },
   mounted(){

package/src/components/Stepper/Stepper.spec.js

@@ -0,0 +1,99 @@
+import { mount } from '@vue/test-utils'
+import Stepper from './Stepper.vue'
+import Step from './Step.vue'
+
+describe('Stepper component', () => {
+  it('renders 4 steps', () => {
+
+    const test = mount(Stepper, {
+      propsData: {
+        'label': 'Start',
+        'endlabel': 'End'
+      },
+      global: {
+        stubs: {
+          'Step': Step
+        }
+      },
+      slots: {
+        default: `<Step status="success">Customer due diligence</Step>
+        <Step url="/step" status="success">Legal Preperation</Step>
+        <Step url="/step" current>Financial Preparation</Step>
+        <Step url="/step">Surveys</Step>`
+      }
+    })
+
+    expect(test.findAll('a').length).toBe(4)
+  })
+
+  it('renders a label when set', () => {
+
+    const test = mount(Stepper, {
+      propsData: {
+        'label': 'Start',
+        'endlabel': 'End'
+      },
+      global: {
+        stubs: {
+          'Step': Step
+        }
+      },
+      slots: {
+        default: `<Step status="success">Customer due diligence</Step>
+        <Step url="/step" status="success">Legal Preperation</Step>
+        <Step url="/step" current>Financial Preparation</Step>
+        <Step url="/step">Surveys</Step>`
+      }
+    })
+
+    expect(test.find('.stepper__start').html()).toContain('Start')
+  })
+
+  it('renders an end label when set', () => {
+
+    const test = mount(Stepper, {
+      propsData: {
+        'label': 'Start',
+        'endlabel': 'End'
+      },
+      global: {
+        stubs: {
+          'Step': Step
+        }
+      },
+      slots: {
+        default: `<Step status="success">Customer due diligence</Step>
+        <Step url="/step" status="success">Legal Preperation</Step>
+        <Step url="/step" current>Financial Preparation</Step>
+        <Step url="/step">Surveys</Step>`
+      }
+    })
+
+    expect(test.find('.stepper__end').html()).toContain('End')
+  })
+
+
+  it('sets status on steps', () => {
+
+    const test = mount(Stepper, {
+      propsData: {
+        'label': 'Start',
+        'endlabel': 'End'
+      },
+      global: {
+        stubs: {
+          'Step': Step
+        }
+      },
+      slots: {
+        default: `<Step status="success">Customer due diligence</Step>
+        <Step url="/step" status="success">Legal Preperation</Step>
+        <Step url="/step" current>Financial Preparation</Step>
+        <Step url="/step">Surveys</Step>`
+      }
+    })
+
+    expect(test.find('.bg-success').exists()).toBe(true)
+    expect(test.find('.current').exists()).toBe(true)
+  })
+})

package/src/components/Tabs/Tab.vue

@@ -21,6 +21,12 @@ export default {
     return {
       show: this.lazy ? false : true
     }
+  },
+  watch: {
+
+    show(newVal, oldVal) {
+      console.log(newVal)
+    }
   }
 }
 </script>

package/src/components/Tabs/Tabs.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container tabs__container" ref="wrapper">
 
-    <input type="radio" class="tab__input" v-for="(value,index) in tabLinks()" :key="index" :name="value.name" :id="value.id" :checked="index == 0? 'checked':''" />
+    <input type="radio" class="tab__input" v-for="(value,index) in tabLinks()" :key="index" :data-key="index" :name="value.name" :id="value.id" :checked="(index == 0 ? true:false)" />
 
     <div class="tabs__links">
       <label v-for="(value,index) in tabLinks()" :key="index" :for="value.id" class="link" v-on:click="openTab(index)">
@@ -33,13 +33,13 @@ export default {
         const tabLinks = [];
         let i = 1;
 
-        for (const [key, value] of Object.entries(this.$slots.default)) {
-          
+        for (const [key, value] of Object.entries(this.$slots.default())) {
+
           // Check if the value in the object is actually a tab and has the correct data
-          if(value.componentOptions && value.componentOptions.propsData && value.componentOptions.propsData.title){
-            
-            let tabTitle = value.componentOptions.propsData.title;
-            
+          if(value.props && value.props.title){
+
+            let tabTitle = value.props.title;
+
             let tab = {
               name: this.tabsID,
               id: this.tabsID+"_tab"+i++,
@@ -56,14 +56,16 @@ export default {
   },
   methods: {
     openTab: function (index) {
-      
+
       let i = 0;
-      for (const [key, value] of Object.entries(this.$slots.default)) {
-          
-        if(value.componentOptions && value.componentOptions.propsData && value.componentOptions.propsData.title){
-          
+      for (const [key, value] of Object.entries(this.$slots.default())) {
+
+        if(value.props && value.props.title){
+
           if(i == index){
-            value.componentInstance._data.show = true;
+
+            console.log(value)
+            value.type.data().show = true;
           }
 
           i++;