@iamproperty/components 3.0.0 → 3.2.0

package/src/components/Banner/Banner.vue

@@ -1,38 +1,38 @@
-<template>
-  <div class="container">
-    <div :class="'bg-'+background+' mb-4'">
-      <div class="row">
-        <div class="col-sm-6">
-          <div class="pt-5 pb-3 px-4">
-            <h2>{{title}}</h2>
-            <slot></slot>
-          </div>
-        </div>
-        <div class="col-sm-6 col-md-5 ms-auto">
-          <img v-if="image" :src="image" alt="" class="h-100 w-100 object-cover" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Header',
-  props: {
-    title: {
-      type: String,
-      required: true
-    },
-    image: {
-      type: String,
-      required: false
-    },
-    background: {
-      type: String,
-      default: 'light',
-      required: false
-    }
-  }
-}
-</script>
+<template>
+  <div class="container">
+    <div :class="'bg-'+background+' mb-4'">
+      <div class="row">
+        <div class="col-sm-6">
+          <div class="pt-5 pb-3 px-4">
+            <h2>{{title}}</h2>
+            <slot></slot>
+          </div>
+        </div>
+        <div class="col-sm-6 col-md-5 ms-auto">
+          <img v-if="image" :src="image" alt="" class="h-100 w-100 object-cover" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Header',
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    image: {
+      type: String,
+      required: false
+    },
+    background: {
+      type: String,
+      default: 'light',
+      required: false
+    }
+  }
+}
+</script>

package/src/components/Banner/README.md

@@ -1,24 +1,24 @@
-### Usage
-
-```
-<Banner title="The benefits of buying through auction" :image="require('../../assets/shutterstock_1229155495.webp')">
-  <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,</p>
-  <a href="/buyers-guide" class="btn">Download our buyers guide</a>
-</Banner>
-```
-
-### Properties
-
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| title | String | - | Required |
-| image | String | - | Optional image url to display in the background |
-| background | String | light | The background colour can be overwritten if need be |
-
-
-
-### Slots
-
-| Option | Default Value | Description |
-| ------ | ------------- | ----------- |
+### Usage
+
+```
+<Banner title="The benefits of buying through auction" :image="require('../../assets/shutterstock_1229155495.webp')">
+  <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,</p>
+  <a href="/buyers-guide" class="btn">Download our buyers guide</a>
+</Banner>
+```
+
+### Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| title | String | - | Required |
+| image | String | - | Optional image url to display in the background |
+| background | String | light | The background colour can be overwritten if need be |
+
+
+
+### Slots
+
+| Option | Default Value | Description |
+| ------ | ------------- | ----------- |
 | default | - | Will display underneath the heading |

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

@@ -1,99 +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>')
-  })
-})
+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

@@ -1,77 +1,77 @@
-<template>
-  <div class="container card-deck prevent-invert" :data-card-type="cardtype">
-      <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>
-        </div>
-      </div>
-      <slot name="after"></slot>
-  </div>
-</template>
-
-<style lang="scss">
-@import "../../../assets/sass/components/cardDeck.scss";
-</style>
-
-<script>
-import Card from '../../elements/Card/Card.vue'
-
-export default {
-  components: {
-    Card
-  },
-  name: 'CardDeck',
-  props: {
-    items: {
-      type: Array,
-      required: false
-    },
-    cols: {
-      type: Number,
-      required: false,
-      default: 1
-    },
-    smcols: {
-      type: Number,
-      required: false,
-      default: 1
-    },
-    mdcols: {
-      type: Number,
-      required: false,
-      default: 3
-    },
-    gap: {
-      type: Number,
-      required: false,
-      default: 4
-    },
-    cardtype: {
-      type: String,
-      required: false
-    },
-    cardclass: {
-      type: String,
-      required: false
-    },
-    btntype: {
-      type: String,
-      required: false
-    },
-    titleclass: {
-      type: String,
-      required: false
-    },
-    ctatext: {
-      type: String,
-      required: false
-    },
-    hidectatext: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  }
-}
-</script>
+<template>
+  <div class="container card-deck prevent-invert" :data-card-type="cardtype">
+      <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="(value.btntype ? value.btntype : btntype )" :titleclass="(value.titleclass ? value.titleclass : titleclass)" :ctatext="value.ctatext" :hidectatext="hidectatext"></Card>
+        </div>
+      </div>
+      <slot name="after"></slot>
+  </div>
+</template>
+
+<style lang="scss">
+@import "../../../assets/sass/components/cardDeck.scss";
+</style>
+
+<script>
+import Card from '../../elements/Card/Card.vue'
+
+export default {
+  components: {
+    Card
+  },
+  name: 'CardDeck',
+  props: {
+    items: {
+      type: Array,
+      required: false
+    },
+    cols: {
+      type: Number,
+      required: false,
+      default: 1
+    },
+    smcols: {
+      type: Number,
+      required: false,
+      default: 1
+    },
+    mdcols: {
+      type: Number,
+      required: false,
+      default: 3
+    },
+    gap: {
+      type: Number,
+      required: false,
+      default: 4
+    },
+    cardtype: {
+      type: String,
+      required: false
+    },
+    cardclass: {
+      type: String,
+      required: false
+    },
+    btntype: {
+      type: String,
+      required: false
+    },
+    titleclass: {
+      type: String,
+      required: false
+    },
+    ctatext: {
+      type: String,
+      required: false
+    },
+    hidectatext: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  }
+}
+</script>

package/src/components/CardDeck/README.md

@@ -1,25 +1,25 @@
-### Usage
-
-```
-<CardDeck :items="items"></CardDeck>
-```
-
-### Properties
-
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| cols  | Number | 1 | Number of columns on mobile |
-| smcols  | Number | 1 | Number of columns on tablet |
-| mdcols  | Number | 3 | Number of columns on desktop |
-| items  | Array | - | Card data passed (See card component) |
-| cardtype | String | - | Change the type of card (simple,quick) |
-| btntype | String | (See card) | Change the type of button at the bottom of the card (primary,secondary,tertairy, link) |
-| ctatext | String | (See card) | Update the cta text within the button at the bottom of the card |
-| titleclass | String | (See card) | Update the class of the title from being a h2 |
-
-### Slots
-
-| Option | Default Value | Description |
-| ------ | ------------- | ----------- |
-| default | - | Will display before the cards |
+### Usage
+
+```
+<CardDeck :items="items"></CardDeck>
+```
+
+### Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| cols  | Number | 1 | Number of columns on mobile |
+| smcols  | Number | 1 | Number of columns on tablet |
+| mdcols  | Number | 3 | Number of columns on desktop |
+| items  | Array | - | Card data passed (See card component) |
+| cardtype | String | - | Change the type of card (simple,quick) |
+| btntype | String | (See card) | Change the type of button at the bottom of the card (primary,secondary,tertairy, link) |
+| ctatext | String | (See card) | Update the cta text within the button at the bottom of the card |
+| titleclass | String | (See card) | Update the class of the title from being a h2 |
+
+### Slots
+
+| Option | Default Value | Description |
+| ------ | ------------- | ----------- |
+| default | - | Will display before the cards |
 | after | - | Will display underneath the cards |

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

@@ -1,45 +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)
-  })
-})
+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)
+  })
+})