@iamproperty/components 2.7.9 → 3.0.0

package/src/components/Accordion/AccordionItem.vue

@@ -1,52 +1,52 @@
-<template>
-
-  <details class="accordion-item" :id="createID(title)">
-    <summary :class="`${titlecolour?`bg-${titlecolour}`:''}`" v-on:click="show = true"><span class="accordion-header accordion-button h4">{{title}}<span v-if="badge" :class="`badge bg-${badgecolour}`">{{badge}}</span></span></summary>
-    <div class="accordion-body" v-if="show">
-      <slot></slot>
-    </div>
-  </details>
-</template>
-
-<script>
-import { safeID } from '../../helpers/strings'
-
-export default {
-  name: 'AccordionItem',
-  props: {
-    title: {
-      type: String,
-      required: true
-    },
-    titlecolour: {
-      type: String,
-      required: false
-    },
-    badge: {
-      type: [Number, String],
-      required: false
-    },
-    badgecolour: {
-      type: String,
-      required: false,
-      default: 'light'
-    },
-    lazy: {
-      type: Boolean,
-      required: false
-    }
-  },
-  computed: {
-    createID () {
-      return (summary) => {
-        return `${safeID(summary)}`
-      }
-    }
-  },
-  data() {
-    return {
-      show: this.lazy ? false : true
-    }
-  }
-}
-</script>
+<template>
+
+  <details class="accordion-item" :id="createID(title)">
+    <summary :class="`${titlecolour?`bg-${titlecolour}`:''}`" v-on:click="show = true"><span class="accordion-header accordion-button h4">{{title}}<span v-if="badge" :class="`badge bg-${badgecolour}`">{{badge}}</span></span></summary>
+    <div class="accordion-body" v-if="show">
+      <slot></slot>
+    </div>
+  </details>
+</template>
+
+<script>
+import { safeID } from '../../helpers/strings.js'
+
+export default {
+  name: 'AccordionItem',
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    titlecolour: {
+      type: String,
+      required: false
+    },
+    badge: {
+      type: [Number, String],
+      required: false
+    },
+    badgecolour: {
+      type: String,
+      required: false,
+      default: 'light'
+    },
+    lazy: {
+      type: Boolean,
+      required: false
+    }
+  },
+  computed: {
+    createID () {
+      return (summary) => {
+        return `${safeID(summary)}`
+      }
+    }
+  },
+  data() {
+    return {
+      show: this.lazy ? false : true
+    }
+  }
+}
+</script>

package/src/components/Accordion/README.md

@@ -1,35 +1,35 @@
-### Usage
-
-```
-<Accordion>
-  <AccordionItem title="Question 1">
-    <p>Accordion item content</p>
-  </AccordionItem>
-  <AccordionItem title="Question 2">
-    <p>Accordion item content</p>
-  </AccordionItem>
-</Accordion>
-```
-
-### Class modifiers
-
-- Adding a class of **.accordion--keep-open** to the accordion will stop the items from closing when another one is opened.
-- Adding a class of **.accordion--straight** to the accordion will remove the slight indentation of the accordion.
-
-
-### Accordion item Properties
-
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| title | String | - | A question or statement |
-| titlecolour | String | - | Apply a colour the the accordion item title |
-| badge | String | - | Add a highlighted badge/tag to the accordion item title |
-| badgecolour | String | light | Apply a colour the badge |
-| lazy  | Boolean | - | If set the content of the tab will not loaded intially and will be loaded after the user has clicked on the accordion link. |
-
-
-### Accordion item Slots
-
-| Option | Default Value | Description |
-| ------ | ------------- | ----------- |
+### Usage
+
+```
+<Accordion>
+  <AccordionItem title="Question 1">
+    <p>Accordion item content</p>
+  </AccordionItem>
+  <AccordionItem title="Question 2">
+    <p>Accordion item content</p>
+  </AccordionItem>
+</Accordion>
+```
+
+### Class modifiers
+
+- Adding a class of **.accordion--keep-open** to the accordion will stop the items from closing when another one is opened.
+- Adding a class of **.accordion--straight** to the accordion will remove the slight indentation of the accordion.
+
+
+### Accordion item Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| title | String | - | A question or statement |
+| titlecolour | String | - | Apply a colour the the accordion item title |
+| badge | String | - | Add a highlighted badge/tag to the accordion item title |
+| badgecolour | String | light | Apply a colour the badge |
+| lazy  | Boolean | - | If set the content of the tab will not loaded intially and will be loaded after the user has clicked on the accordion link. |
+
+
+### Accordion item Slots
+
+| Option | Default Value | Description |
+| ------ | ------------- | ----------- |
 | default | - | This is the content of the accordion item |

package/src/components/Alert/Alert.spec.js

@@ -0,0 +1,49 @@
+import { mount } from '@vue/test-utils'
+import Alert from './Alert.vue'
+
+describe('Alert component', () => {
+  it('renders correctly', () => {
+
+    const test = mount(Alert, {
+      propsData: {
+      },
+      slots: {
+        default: `<p>Content</p>`
+      }
+    })
+
+    expect(test.html()).toContain('bg-primary')
+    expect(test.html()).toContain('<p>Content</p>')
+  })
+
+  it('renders correct background', () => {
+
+    const test = mount(Alert, {
+      propsData: {
+        colour: 'info'
+      },
+      slots: {
+        default: `<p>Content</p>`
+      }
+    })
+
+    expect(test.html()).toContain('bg-info')
+    expect(test.html()).toContain('<p>Content</p>')
+  })
+
+  it('renders a close button', () => {
+
+    const test = mount(Alert, {
+      propsData: {
+        dismissible: 'true'
+      },
+      slots: {
+        default: `<p>Content</p>`
+      }
+    })
+
+    expect(test.html()).toContain('<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"></button>')
+  })
+
+
+})

package/src/components/Alert/Alert.vue

@@ -1,39 +1,39 @@
-<template>
-  <div :class="`container alert pb-0 ${dismissible?'alert--dismissible fade show':''}`" ref="wrapper" :data-timeout="timeout" :style="timeout?`--animation-length: ${timeout}ms`:''">
-    <div :class="`alert__inner bg-${colour}`" role="alert">
-      <button v-if="dismissible" type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-@import "../../../assets/sass/components/alert.scss";
-</style>
-
-<script>
-import alert from '../../../assets/js/modules/alert.js'
-
-export default {
-  name: 'Alert',
-  props: {
-    dismissible: {
-      type: String|Boolean,
-      required: false,
-      default: false
-    },
-    colour: {
-      type: String,
-      required: false,
-      default: 'primary'
-    },
-    timeout: {
-      type: String|Number,
-      required: false
-    }
-  },
-  mounted(){
-    alert(this.$refs.wrapper);
-  }
-}
-</script>
+<template>
+  <div :class="`container alert pb-0 ${dismissible?'alert--dismissible fade show':''}`" ref="wrapper" :data-timeout="timeout" :style="(timeout?`--animation-length: ${timeout}ms`:'')">
+    <div :class="`alert__inner bg-${colour}`" role="alert">
+      <button v-if="dismissible" type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@import "../../../assets/sass/components/alert.scss";
+</style>
+
+<script>
+import alert from '../../../assets/js/modules/alert.js'
+
+export default {
+  name: 'Alert',
+  props: {
+    dismissible: {
+      type: [String,Boolean],
+      required: false,
+      default: false
+    },
+    colour: {
+      type: String,
+      required: false,
+      default: 'primary'
+    },
+    timeout: {
+      type: [String,Number],
+      required: false
+    }
+  },
+  mounted(){
+    alert(this.$refs.wrapper);
+  }
+}
+</script>

package/src/components/Alert/README.md

@@ -1,29 +1,29 @@
-### Usage
-
-```
-<Alert class="alert--fixed" colour="info" dismissible timeout="6000">
-  <h2 class="h6">Self dismissing alert</h2>
-  <p>Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p>
-</Alert>
-```
-
-### Class and data modifiers
-
-- Adding a class of **.alert--fixed** stick the alert box to the bottom of the page.
-- Adding a class of **.alert--dismissible** will add the correct padding for the having a btn to the right.
-
-
-### Properties
-
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| dismissible | Boolean | - | Adds a close button which will remove the alert box after clicking it. |
-| colour | String | primary | Apply a background colour the alert box, any of the theme colours can be used. |
-| timeout | String or Number | - | Sets a timeout to remove the alert box. |
-
-
-### Slots
-
-| Option | Default Value | Description |
-| ------ | ------------- | ----------- |
+### Usage
+
+```
+<Alert class="alert--fixed" colour="info" dismissible timeout="6000">
+  <h2 class="h6">Self dismissing alert</h2>
+  <p>Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p>
+</Alert>
+```
+
+### Class and data modifiers
+
+- Adding a class of **.alert--fixed** stick the alert box to the bottom of the page.
+- Adding a class of **.alert--dismissible** will add the correct padding for the having a btn to the right.
+
+
+### Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| dismissible | Boolean | - | Adds a close button which will remove the alert box after clicking it. |
+| colour | String | primary | Apply a background colour the alert box, any of the theme colours can be used. |
+| timeout | String or Number | - | Sets a timeout to remove the alert box. |
+
+
+### Slots
+
+| Option | Default Value | Description |
+| ------ | ------------- | ----------- |
 | default | - | This is the content of the alert box |

package/src/components/Banner/Banner.spec.js

@@ -0,0 +1,28 @@
+import { shallowMount } from '@vue/test-utils'
+import Header from './Banner.vue'
+
+describe('Banner component', () => {
+
+  const test = shallowMount(Header, {
+    propsData: {
+      title: 'Banner title',
+      image: '/img/src/img.png'
+    },
+    slots: {
+      default: '<p>Hello</p>'
+    }
+  })
+
+  it('renders the banner title', () => {
+    expect(test.html()).toContain('<h2>Banner title</h2>')
+  })
+
+  it('renders the banner content', () => {
+    expect(test.html()).toContain('<p>Hello</p>')
+  })
+
+
+  it('renders the image', () => {
+    expect(test.html()).toContain('<img src="/img/src/img.png" alt="" class="h-100 w-100 object-cover">')
+  })
+})

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

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