@iamproperty/components 3.1.0 → 3.2.0

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="(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>
+<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)
+  })
+})

package/src/components/Carousel/Carousel.vue

@@ -1,85 +1,85 @@
-<template>
-  <div class="container carousel" :id="'carousel'+id" ref="wrapper" :data-cols="cols" :data-sm-cols="smcols" :data-md-cols="mdcols">
-    <slot><!-- Use for titles etc --></slot>
-    <div class="carousel__wrapper">
-      <div class="carousel__inner">
-
-        <div v-if="type == 'card'" :class="`row row-cols-${cols} row-cols-sm-${smcols} row-cols-md-${mdcols} ${gap ? `g-${gap}`: ``}`">
-          <div :class="`col carousel__item${colclass?` ${colclass}`:''}`" v-for="(value,index) in items" :key="index" :id="'carousel'+id+'slide'+(index+1)">
-            <Card v-bind="value" :class="cardclass" :type="cardtype" :btnyype="btntype" :titleclass="titleclass" :ctatext="ctatext" :hidectatext="hidectatext"></Card>
-          </div>
-        </div>
-        <div v-if="type != 'card'" :class="`row row-cols-${cols} row-cols-sm-${smcols} row-cols-md-${mdcols} ${gap ? `g-${gap}`: ``}`">
-          <div :class="`col carousel__item${colclass?` ${colclass}`:''}`" v-for="(value,index) in items" :key="index" v-html="content(value)" :id="'carousel'+id+'slide'+(index+1)"></div>
-        </div>
-        
-      </div>
-
-      <div :class="`carousel__controls cols-${cols} cols-sm-${smcols} cols-md-${mdcols}`">
-        <a v-for="(value,index) in items" :key="index" :href="'\#carousel'+id+'slide'+(index+1)" :class="`control-${index+1}`">Slide {{index+1}}</a>
-      </div>
-      <button class="btn btn-prev" data-go="0" disabled>Prev</button>
-      <button class="btn btn-next" data-go="2">Next</button>
-    </div>
-  </div>
-</template>
-
-
-<style lang="scss">
-@import "../../../assets/sass/components/carousel.scss";
-</style>
-
-
-<script>
-import Card from '../../elements/Card/Card.vue'
-import CardDeck from '../CardDeck/CardDeck.vue'
-import carousel from '../../../assets/js/modules/carousel.js'
-
-// Inherit the card deck props
-let cardDeckProps = CardDeck.props;
-// Update the default values
-cardDeckProps.gap.default = 0
-cardDeckProps.cols.default = 1
-cardDeckProps.smcols.default = 2
-cardDeckProps.mdcols.default = 4
-
-
-export default {
-  components: {
-    Card
-  },
-  name: 'Carousel',
-  data () {
-    return {
-      id: null
-    }
-  },
-  props: {
-    ...cardDeckProps,
-    colclass: {
-      type: String,
-      required: false
-    },
-    type: {
-      type: String,
-      required: false
-    }
-  },
-  computed: {
-    content (){
-      return (value) => {
-        return `${value.image ? `<img src="${value.image}" alt="" />` : ''}${value.content?value.content:''}`;
-      }
-    }
-  },
-  mounted(){
-
-    this.id = this._uid
-
-    this.$nextTick(function () {
-      
-      carousel(this.$refs.wrapper);
-    })
-  }
-}
-</script>
+<template>
+  <div class="container carousel" :id="'carousel'+id" ref="wrapper" :data-cols="cols" :data-sm-cols="smcols" :data-md-cols="mdcols">
+    <slot><!-- Use for titles etc --></slot>
+    <div class="carousel__wrapper">
+      <div class="carousel__inner">
+
+        <div v-if="type == 'card'" :class="`row row-cols-${cols} row-cols-sm-${smcols} row-cols-md-${mdcols} ${gap ? `g-${gap}`: ``}`">
+          <div :class="`col carousel__item${colclass?` ${colclass}`:''}`" v-for="(value,index) in items" :key="index" :id="'carousel'+id+'slide'+(index+1)">
+            <Card v-bind="value" :class="cardclass" :type="cardtype" :btnyype="btntype" :titleclass="titleclass" :ctatext="ctatext" :hidectatext="hidectatext"></Card>
+          </div>
+        </div>
+        <div v-if="type != 'card'" :class="`row row-cols-${cols} row-cols-sm-${smcols} row-cols-md-${mdcols} ${gap ? `g-${gap}`: ``}`">
+          <div :class="`col carousel__item${colclass?` ${colclass}`:''}`" v-for="(value,index) in items" :key="index" v-html="content(value)" :id="'carousel'+id+'slide'+(index+1)"></div>
+        </div>
+        
+      </div>
+
+      <div :class="`carousel__controls cols-${cols} cols-sm-${smcols} cols-md-${mdcols}`">
+        <a v-for="(value,index) in items" :key="index" :href="'\#carousel'+id+'slide'+(index+1)" :class="`control-${index+1}`">Slide {{index+1}}</a>
+      </div>
+      <button class="btn btn-prev" data-go="0" disabled>Prev</button>
+      <button class="btn btn-next" data-go="2">Next</button>
+    </div>
+  </div>
+</template>
+
+
+<style lang="scss">
+@import "../../../assets/sass/components/carousel.scss";
+</style>
+
+
+<script>
+import Card from '../../elements/Card/Card.vue'
+import CardDeck from '../CardDeck/CardDeck.vue'
+import carousel from '../../../assets/js/modules/carousel.js'
+
+// Inherit the card deck props
+let cardDeckProps = CardDeck.props;
+// Update the default values
+cardDeckProps.gap.default = 0
+cardDeckProps.cols.default = 1
+cardDeckProps.smcols.default = 2
+cardDeckProps.mdcols.default = 4
+
+
+export default {
+  components: {
+    Card
+  },
+  name: 'Carousel',
+  data () {
+    return {
+      id: null
+    }
+  },
+  props: {
+    ...cardDeckProps,
+    colclass: {
+      type: String,
+      required: false
+    },
+    type: {
+      type: String,
+      required: false
+    }
+  },
+  computed: {
+    content (){
+      return (value) => {
+        return `${value.image ? `<img src="${value.image}" alt="" />` : ''}${value.content?value.content:''}`;
+      }
+    }
+  },
+  mounted(){
+
+    this.id = this._uid
+
+    this.$nextTick(function () {
+      
+      carousel(this.$refs.wrapper);
+    })
+  }
+}
+</script>