@iamproperty/components 2.9.0 → 3.1.0

package/src/components/Testimonial/Testimonial.spec.js

@@ -0,0 +1,57 @@
+import { shallowMount } from '@vue/test-utils'
+import Header from './Testimonial.vue'
+
+describe('Testimonial component', () => {
+
+  const test = shallowMount(Header, {
+    propsData: {
+      items: [
+        {
+          cite: 'Name goes here',
+          quote: `<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>`,
+          image: '/img/src/img.png'
+        },
+        {
+          cite: 'Name goes here 2',
+          quote: `<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>`,
+          image: '/img/src/img.png'
+        },
+        {
+          cite: 'Name goes here 3',
+          quote: `<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p><p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>`,
+          class: 'largest',
+          image: '/img/src/img.png'
+        }
+      ]
+    },
+    slots: {
+      default: '<p>Hello</p>'
+    }
+  })
+
+  it('renders the testimonials title', () => {
+    expect(test.html()).toContain('<h2>What our customers think…</h2>')
+  })
+
+  it('renders the content after the quotes', () => {
+    expect(test.html()).toContain('<p>Hello</p>')
+  })
+
+  it('renders the correct number of blockquotes', () => {
+
+    expect(test.findAll('blockquote').length).toBe(3)
+  })
+
+  it('adds the largest class on the defined blockquote', () => {
+
+    const quotes = test.findAll('blockquote');
+    const largestQuote = quotes.at(2)
+
+    expect(largestQuote.classes()).toContain('largest')
+  })
+
+  it('adds the testimonial--multi class on load', () => {
+
+    expect(test.classes()).toContain('testimonial--multi')
+  })
+})

package/src/components/Timeline/Timeline.spec.js

@@ -0,0 +1,17 @@
+import { shallowMount } from '@vue/test-utils'
+import Header from './Timeline.vue'
+
+describe('Timeline component', () => {
+
+  const test = shallowMount(Header, {
+    propsData: {
+    },
+    slots: {
+      default: '<p>Hello</p>'
+    }
+  })
+
+  it('renders the content after', () => {
+    expect(test.html()).toContain('<p>Hello</p>')
+  })
+})

package/src/elements/Card/Card.vue

@@ -1,5 +1,5 @@
 <template>
-  <a :href="link" :class="'card'+(type?' card--'+type:'')" :title="'Find out more: '+title+(subtitle ? ' - '+subtitle:'')">
+  <a :href="link" :class="'card'+(type?' card--'+type:'')+' '+cardClass" :title="ctatext+': '+title+(subtitle ? ' - '+subtitle:'')" :target="target">
     <div class="card-header__wrapper" v-if="image">
       <img :src="image" alt="" loading="lazy" class="card-image" />
       <div class="card-header">
@@ -10,7 +10,7 @@
     </div>
     <div class="card-body" v-html="cardContent()"></div>
     <div class="card-footer" v-if="hidectatext == false">
-      <span :class="`${btntype == 'link' ? `link` : `btn btn-${btntype}`} mb-0`">{{ctatext}}<span class="visually-hidden"> about {{title}}</span></span>
+      <span :class="`${btntype == 'link' ? `link` : `btn btn-${btntype}`} mb-0`">{{ctatext}}<span class="visually-hidden">: {{title}}</span></span>
     </div>
   </a>
 </template>
@@ -27,6 +27,11 @@ export default {
       type: String,
       required: false
     },
+    cardClass: {
+      type: String,
+      required: false,
+      default: ''
+    },
     titleclass: {
       type: String,
       required: false,
@@ -67,6 +72,10 @@ export default {
       type: String,
       required: false
     },
+    target: {
+      type: String,
+      required: false
+    },
     details: {
       type: Object,
       required: false

package/src/elements/Input/Input.vue

@@ -1,34 +1,34 @@
 <template>
   <div :class="wrapperClass()" ref="wrapper">
     <label v-if="needsLabel()" :class="`form-label${labelclass?` ${labelclass}`:''}`" :for="id" v-html="displayLabel()" :title="title"></label>
-    
+
     <!-- Prefix and Suffix -->
     <span :class="`prefix ${this.prefixClass} ${size?`prefix-${size}`:''}`" v-html="prefix" v-if="prefix" role="presentation"></span>
     <span :class="`suffix ${this.suffixClass} ${size?`suffix-${size}`:''}`" v-html="suffix" v-if="suffix" role="presentation"></span>
 
     <!-- Standard input field -->
     <input v-if="isInput()" v-model="inputVal" :class="`form-control${size?` form-control-${size}`:``}${inputclass?` ${inputclass}`:``}`" :type="type" :name="name?name:id" :id="id" :pattern="needPattern()" :list="hasOptions()" v-bind="$attrs" v-on:keyup="inputKeyup" />
-    
+
     <!-- Textarea -->
     <textarea v-if="type=='textarea'" v-model="inputVal" :class="`form-control${size?` form-control-${size}`:``}${inputclass?` ${inputclass}`:``}`" :type="type" :name="name?name:id" :id="id" :pattern="needPattern()" v-bind="$attrs"></textarea>
-    
+
     <!-- Range -->
     <div class="input-group" v-if="type=='range'">
       <input v-model="inputVal" :class="`form-range${inputclass?` ${inputclass}`:``}`" :type="type" :name="name?name:id" :id="id" :pattern="needPattern()" :list="hasOptions()" v-bind="$attrs" oninput="this.nextElementSibling.value=this.value;" />
       <output class="input-group-text border-0 col-2 col-sm-1 px-0">{{value}}</output>
     </div>
-    
+
     <!-- Color picker -->
     <div class="input-group" v-if="type=='color'">
       <input v-model="inputVal" :class="`form-control form-control-color${inputclass?` ${inputclass}`:``}`" :type="type" :name="name?name:id" :id="id" :pattern="needPattern()" :list="hasOptions()" v-bind="$attrs" oninput="this.nextElementSibling.value=this.value;" />
       <output class="input-group-text flex-fill">{{value?vale:'#000000'}}</output>
     </div>
-    
+
     <!-- Select/dropdown -->
     <select v-if="type=='select'" v-model="inputVal" :class="`form-select${size?` form-select-${size}`:``}${inputclass?` ${inputclass}`:``}`" :type="type" :name="id" :id="id" :pattern="needPattern()" v-bind="$attrs">
       <option v-for="(value,index) in options" :key="index" :value="value.value">{{value.display ? value.display : value.value}}</option>
     </select>
-    
+
     <datalist v-if="allowDatalist()" :id="id+'-list'">
       <option v-for="(value,index) in options" :key="index" :value="value.value">{{value.value}}</option>
     </datalist>
@@ -120,6 +120,10 @@ export default {
     hint: {
       type: String,
       required: false
+    },
+    multiple: {
+      type: String,
+      required: false
     }
   },
   computed: {
@@ -129,7 +133,7 @@ export default {
         if(this.$attrs.multiple){
           return this.label+`<span class="small d-block text-body font-body fw-normal">Hold down the Ctrl (windows) or Command (Mac) button to select multiple options.</span>`
         }
-        
+
         if(this.hint){
           return this.label+`<span class="small d-block text-body font-body fw-normal">${this.hint}</span>`
         }
@@ -162,7 +166,7 @@ export default {
           case 'datetime-local':
             return '[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}'
         }
-        
+
         return false
       }
     },
@@ -236,7 +240,7 @@ export default {
         return this.value;
       },
       set(val) {
-        
+
         this.$emit('input', val);
       }
     }
@@ -244,7 +248,7 @@ export default {
   mounted(){
 
     this.$nextTick(function () {
-      
+
       let element = this.$refs.wrapper;
       // Remove unnecessary divs that may get in the way of our CSS sibling selectors working
       if(element.parentNode && element.parentNode.classList.contains('form-check') || element.classList.length == 0){

package/src/elements/Table/Table.spec.js

@@ -0,0 +1,90 @@
+import { mount } from '@vue/test-utils'
+import Table from './Table.vue'
+
+describe('Table component', () => {
+
+  const test = mount(Table, {
+    propsData: {
+      fields: [
+        { key: 'name', filterable: true, sortable: true },
+        { key: 'job', filterable: true, sortable: true },
+        { key: 'address' },
+        { key: 'emergency_contact', filterable: true, sortable: true },
+        { key: 'actions' }
+      ],
+      items: [
+        {
+          name: 'Derrick',
+          job: 'Electrician',
+          address: '5 King Street<br> London<br> London<br> SW20 0AL<br> United Kingdom',
+          emergency_contact: 'Susan',
+          actions: '<a href="#">View</a><br><a href="#">Point of Contact</a>'
+        },
+        {
+          name: 'Andrew',
+          job: 'Electrician',
+          address: '5 King Street<br> London<br> London<br> SW20 0AL<br> United Kingdom',
+          emergency_contact: 'Susan',
+          actions: '<a href="#">View</a><br><a href="#">Point of Contact</a>'
+        },
+        {
+          name: 'Rachel',
+          job: 'Electrician',
+          address: '5 King Street<br> London<br> London<br> SW20 0AL<br> United Kingdom',
+          emergency_contact: 'Susan',
+          actions: '<a href="#">View</a><br><a href="#">Point of Contact</a>'
+        }
+      ],
+      show: 2
+    }
+  })
+
+  // On load
+  it('renders a div with the class of table wrapper', () => {
+
+    expect(test.classes()).toContain('table__wrapper')
+  })
+
+  it('renders a thead', () => {
+
+    expect(test.find('thead').exists()).toBe(true)
+  })
+
+  it('renders a tbody', () => {
+
+    expect(test.find('tbody').exists()).toBe(true)
+  })
+
+  it('renders a filters form when needed', () => {
+
+    expect(test.find('.table__filters').exists()).toBe(true)
+  })
+
+  it('renders a pagination form when needed', () => {
+
+    expect(test.find('.table__pagination').exists()).toBe(true)
+  })
+
+  // Events
+  it('can be sorted by name', async () => {
+
+    const firstCol = test.find('[data-sortable]')
+    expect(firstCol.html()).toContain('Name')
+
+    await firstCol.trigger('click')
+
+    let firstRowCol = test.find('tbody tr:first-child [data-label="Name"]')
+    expect(firstRowCol.html()).toContain('Andrew')
+  })
+
+  it('can be filtered by name', async () => {
+
+    const searchField = test.find('[type="search"]')
+
+    await searchField.setValue('Andrew')
+    await searchField.trigger('change')
+
+    expect(test.findAll('tbody tr').length).toBe(1)
+  })
+
+})

package/src/elements/Table/Table.vue

@@ -22,6 +22,9 @@ import table from '../../../assets/js/modules/table.js'
 
 let numericValue = function(value) {
 
+  if(typeof(value) != "string")
+    return value;
+
   value = value.replace('£','')
   value = value.replace('%','')
 
@@ -85,17 +88,17 @@ export default {
   mounted(){
 
     this.$nextTick(function () {
-      
+
       table(this.$refs.wrapper);
 
       // Listen for the event.
-      this.$el.addEventListener('sorted', function (e) { 
-        
+      this.$el.addEventListener('sorted', function (e) {
+
         console.log('Table sorted')
       }, false);
 
-      this.$el.addEventListener('filtered', function (e) { 
-        
+      this.$el.addEventListener('filtered', function (e) {
+
         console.log('Table filtered')
       }, false);
 

package/src/foundations/Icon/Icon.spec.js

@@ -0,0 +1,24 @@
+import { shallowMount } from '@vue/test-utils'
+import Icon from './Icon.vue'
+
+describe('Icon component', () => {
+  it('renders the email Icon by default', () => {
+    const test = shallowMount(Icon, {
+      propsData: { }
+    })
+
+    expect(test.html()).toContain('<title>email</title>')
+    expect(test.html()).toContain('<use xlink:href="/svg/icons.svg#icon-email"></use>')
+  })
+
+  it('renders the correct logo when an ID is passed', () => {
+    const test = shallowMount(Icon, {
+      propsData: {
+        id: 'pin'
+      }
+    })
+
+    expect(test.html()).toContain('<title>pin</title>')
+    expect(test.html()).toContain('<use xlink:href="/svg/icons.svg#icon-pin"></use>')
+  })
+})

package/src/foundations/Logo/Logo.spec.js

@@ -0,0 +1,56 @@
+import { shallowMount } from '@vue/test-utils'
+import Logo from './Logo.vue'
+
+describe('Logo component', () => {
+  it('renders the iam property logo by default', () => {
+    const test = shallowMount(Logo, {
+      propsData: { }
+    })
+
+    expect(test.html()).toContain('<title>iam property</title>')
+    expect(test.html()).toContain('<use xlink:href="/svg/logo.svg#logo-property"></use>')
+  })
+
+  it('renders the correct logo when an ID is passed', () => {
+    const test = shallowMount(Logo, {
+      propsData: {
+        id: 'sold'
+      }
+    })
+
+    expect(test.html()).toContain('<title>iam sold</title>')
+    expect(test.html()).toContain('<use xlink:href="/svg/logo.svg#logo-sold"></use>')
+  })
+
+  it('renders a description when passed', () => {
+    const test = shallowMount(Logo, {
+      propsData: { }
+    })
+
+    expect(test.html()).not.toContain('<span></span>')
+
+    const test2 = shallowMount(Logo, {
+      propsData: {
+        desc: 'description'
+      }
+    })
+
+    expect(test2.html()).toContain('<span>description</span>')
+  })
+
+  it('background can be modified', () => {
+    const test = shallowMount(Logo, {
+      propsData: { }
+    })
+
+    expect(test.html()).not.toContain('<span></span>')
+
+    const test2 = shallowMount(Logo, {
+      propsData: {
+        desc: 'description'
+      }
+    })
+
+    expect(test2.html()).toContain('<span>description</span>')
+  })
+})

package/src/vue-shim.d.ts

@@ -0,0 +1,6 @@
+declare module "*.vue" {
+  import { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}