@iamproperty/components 1.0.12 → 2.1.0

package/src/components/PropertySearchbar/PropertySearchbar.vue

@@ -0,0 +1,206 @@
+<template>
+  <div class="container" ref="wrapper">
+    <slot></slot>
+    <div class="property-searchbar">
+      <form class="row" :action="formaction" :method="formmethod">
+        <fieldset class="col-12 col-md-3">
+          <Input inputClass="input--locations" v-model="locationSet" label="Location" id="location" :options="locationsList()" required placeholder="i.e. Newcastle or NE1"  @keyupEvent="locationKeyup(...arguments)" ref="search"></Input>
+          <Input class="select--miles" label="Miles" id="miles" type="select" :options="distances"></Input>
+        </fieldset>
+        <fieldset class="col-12 col-md">
+          <span class="form-label d-none d-md-block">Price range</span>
+          <div class="row" data-input-range>
+            <Input class="col-6" label="Minimum price" id="price-min" data-min="true" type="select" :options="pricemin"></Input>
+            <Input class="col-6" label="Maximum price" id="price-max" data-max="true" type="select" :options="pricemax"></Input>
+          </div>
+        </fieldset>
+        <fieldset class="col-12 col-md">
+          <span class="form-label d-none d-md-block">Number of beds</span>
+          <div class="row" data-input-range>
+            <Input class="col-6" label="Minimum beds" id="beds-min" data-min="true" type="select" :options="bedsmin"></Input>
+            <Input class="col-6" label="Maximum beds" id="beds-max" data-max="true" type="select" :options="bedsmax"></Input>
+          </div>
+        </fieldset>
+        <fieldset class="col-12 col-md-2">
+          <Input label="Property type" id="property-type" type="select" :options="propertytypes"></Input>
+        </fieldset>
+        <div class="col-12 col-md mw-md-fit-content d-flex property-searchbar__btn">
+          <button class="btn w-100 me-0" type="submit" value="submit">Search</button>
+        </div>
+      </form>
+    </div>
+    <slot name="after"></slot>
+  </div>
+</template>
+
+<style lang="scss">
+@import "../../../assets/sass/_func.scss";
+@import "../../../assets/sass/components/property-searchbar.scss";
+
+</style>
+
+<script>
+import Input from '../../elements/Input/Input.vue'
+
+export default {
+  components: {
+    Input
+  },
+  name: 'PropertySearchbar',
+  props: {
+    formaction: {
+      type: String,
+      required: false
+    },
+    formmethod: {
+      type: String,
+      required: false
+    },
+    location: {
+      type: String,
+      required: false
+    },
+    locations: {
+      type: Array,
+      required: false
+    },
+    distances: {
+      type: Array,
+      required: false,
+      default() {
+        return [
+          {'value':'0.25','display':'+¼ mi'},
+          {'value':'0.5','display':'+½ mi'},
+          {'value':'1','display':'+1 mi'},
+          {'value':'2','display':'+2 mi'},
+          {'value':'3','display':'+3 mi'},
+          {'value':'4','display':'+4 mi'},
+          {'value':'5','display':'+5 mi'}
+        ];
+      } 
+    },
+    pricemin: {
+      type: Array,
+      required: false,
+      default() {
+        return [
+          {'value':'0','display':'No min'},
+          {'value':'50000','display':'£50k min'},
+          {'value':'75000','display':'£75k min'},
+          {'value':'100000','display':'£100k min'},
+          {'value':'150000','display':'£150k min'},
+          {'value':'200000','display':'£200k min'},
+          {'value':'250000','display':'£250k min'}
+        ];
+      }
+    },
+    pricemax: {
+      type: Array,
+      required: false,
+      default() {
+        return [
+          {'value':'any','display':'No max'},
+          {'value':'50000','display':'£50k max'},
+          {'value':'75000','display':'£75k max'},
+          {'value':'100000','display':'£100k max'},
+          {'value':'150000','display':'£150k max'},
+          {'value':'200000','display':'£200k max'},
+          {'value':'250000','display':'£250k max'}
+        ];
+      }
+    },
+    bedsmin: {
+      type: Array,
+      required: false,
+      default() {
+        return [
+          {'value':'any','display':'No min'},
+          {'value':'0','display':'Studio min'},
+          {'value':'1','display':'1 bed min'},
+          {'value':'2','display':'2 beds min'},
+          {'value':'3','display':'3 beds min'},
+          {'value':'4','display':'4 beds min'},
+          {'value':'5','display':'5 beds min'},
+          {'value':'6','display':'6 beds min'}
+        ];
+      }
+    },
+    bedsmax: {
+      type: Array,
+      required: false,
+      default() {
+        return [
+          {'value':'any','display':'No max'},
+          {'value':'0','display':'Studio max'},
+          {'value':'1','display':'1 bed max'},
+          {'value':'2','display':'2 beds max'},
+          {'value':'3','display':'3 beds max'},
+          {'value':'4','display':'4 beds max'},
+          {'value':'5','display':'5 beds max'},
+          {'value':'6','display':'6 beds max'}
+        ];
+      }
+    },
+    propertytypes: {
+      type: Array,
+      required: false,
+      default() {
+        return [
+          {'value':'all','display':'Show all'},
+          {'value':'Bungalow','display':'Bungalow'},
+          {'value':'Character Property','display':'Character Property'},
+          {'value':'Commercial Property','display':'Commercial Property'},
+          {'value':'Flat / Apartment','display':'Flat / Apartment'},
+          {'value':'Garage / Parking','display':'Garage / Parking'},
+          {'value':'Guest House / Hotel','display':'Guest House / Hotel'},
+          {'value':'House','display':'House'},
+          {'value':'House / Flat Share','display':'House / Flat Share'},
+          {'value':'Land','display':'Land'},
+          {'value':'Mobile / Park Home','display':'Mobile / Park Home'},
+          {'value':'Private Halls','display':'Private Halls'},
+          {'value':'Retirement Property','display':'Retirement Property'}
+        ];
+      }
+    }
+  },
+  data () {
+    return {
+      locationSave: ''
+    }
+  },
+  methods: {
+    locationKeyup: function(event){
+
+      this.$emit('locationKeyup',event);
+    }
+  },
+  computed: {
+    locationSet: {
+      get() {
+
+        if(this.locationSave)
+          return this.locationSave;
+
+        return this.location;
+      },
+      set(val) {
+        
+        this.locationSave = val;
+        this.$emit('input', val);
+      }
+    },
+    locationsList() {
+      return () => {
+
+        if(this.locations){
+          return this.locations
+        }
+
+        return [
+          {'value': 'Newcastle'}
+        ];
+      }
+    }
+  }
+}
+</script>

package/src/components/PropertySearchbar/README.md

@@ -0,0 +1,26 @@
+### Usage
+
+```
+<PropertySearchbar></PropertySearchbar>
+```
+
+### Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| formAction | String | - | Set where the property search submit the form to |
+| formAction | String | - | Sets how the form is submitted, i.e. post or get |
+| distances | Array | See documentation example | Override the default (Not recommened) |
+| priceMin | Array | See documentation example | Override the default (Not recommened) |
+| priceMax | Array | See documentation example | Override the default (Not recommened) |
+| bedsMin | Array | See documentation example | Override the default (Not recommened) |
+| bedsMax | Array | See documentation example | Override the default (Not recommened) |
+| propertyTypes | Array | See documentation example | Override the default (Not recommened) |
+
+
+### Slots
+
+| Option | Default Value | Description |
+| ------ | ------------- | ----------- |
+| default | - | Will display before the property searchbar  |
+| after | - | Will display after the property searchbar |

package/src/components/Snapshot/README.md

@@ -0,0 +1,21 @@
+### Usage
+
+```
+<Snapshot :items="items"></Snapshot>
+```
+
+### Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| items  | Array | - | Table row data passed |
+|  - item.title | String | - | Title of the snapshot figure |
+|  - item.bg | String | - | Theme colour to highlight the importance of the figure i.e. danger to indicate a high priority. |
+|  - item.number | String | - | The actual figure, recommended to be a single number but could be more i.e. 10 days.
+
+
+### Slots
+
+| Option | Default Value | Description |
+| ------ | ------------- | ----------- |
+| default | - | Will display before the snapshot items |

package/src/components/Snapshot/Snapshot.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="container snapshot" ref="wrapper">
+    <slot></slot>
+    <div class="row">
+    <div class="col" v-for="(value,index) in items" :key="index">
+
+      <a :href="value.link" v-if="value.link">View {{value.title}}</a>
+      <div :class="`snapshot__item ${value.bg ? 'bg-'+value.bg : ''}`">
+        <span class="h6 snapshot__title">{{value.title}}</span>
+        <span class="stat">{{value.number}}</span>
+      </div>
+    </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@import "../../../assets/sass/_func.scss";
+@import "../../../assets/sass/components/snapshot.scss";
+</style>
+
+<script>
+
+export default {
+  name: 'Snapshot',
+  props: {
+    items: {
+      type: Array,
+      required: true
+    },
+  }
+}
+</script>

package/src/components/Tabs/README.md

@@ -0,0 +1,27 @@
+### Usage
+
+```
+<Tabs class="visualtest">
+  <Tab title="Tab content 1">
+    <h2>Tab content 1</h2>
+  </Tab>
+  <Tab title="Tab content 2">
+    <h2>Tab content 2</h2>
+  </Tab>
+  <Tab title="Tab content 3">
+    <h2>Tab content 3</h2>
+  </Tab>
+</Tabs>
+```
+
+### Tab Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| title  | String | - | Used for the heading of the component |
+
+### Slots
+
+| Option | Default Value | Description |
+| ------ | ------------- | ----------- |
+| default | - | Can be populated with Tab components |

package/src/components/Tabs/Tab.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="tab">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Tab',
+  props: {
+    title: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>

package/src/components/Tabs/Tabs.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="container tabs__container" ref="wrapper">
+
+    <input type="radio" class="d-none" v-for="(value,index) in tabLinks()" :key="index" :name="value.name" :id="value.id" :checked="index == 0? 'checked':''" />
+
+    <div class="tabs__links">
+      <label v-for="(value,index) in tabLinks()" :key="index" :for="value.id" class="link">
+        {{value.tabTitle}}
+      </label>
+    </div>
+    <div class="tabs">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@import "../../../assets/sass/_func.scss";
+@import "../../../assets/sass/components/tabs.scss";
+</style>
+
+<script>
+export default {
+  name: 'Tabs',
+  data () {
+    return {
+      tabsID: 'tabs_'+Math.random().toString(36).substr(2, 9)
+    }
+  },
+  computed: {
+    tabLinks (){
+      return () => {
+
+        const tabLinks = [];
+        let i = 1;
+
+        for (const [key, value] of Object.entries(this.$slots.default)) {
+          
+          let tabTitle = value.componentOptions.propsData.title;
+
+          let tab = {
+            name: this.tabsID,
+            id: this.tabsID+"_tab"+i++,
+            tabTitle: tabTitle
+          }
+
+          tabLinks.push(tab);
+        }
+
+        return tabLinks;
+      }
+    }
+  }
+}
+</script>

package/src/components/Testimonial/README.md

@@ -0,0 +1,26 @@
+### Usage
+
+```
+<Testimonial :items="items">
+  <a href="/buying-stories" class="btn">Buying stories</a>
+  <a href="/selling-stories" class="btn">Selling stories</a>
+</Testimonial>
+```
+
+### Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| title  | String | What our customers think… | Used for the heading of the component |
+| items  | Array | - | Testimonial data passed |
+| - item.class | String | - | Optional, this should be used to define the largest testimonial by setting it to 'largest' |
+| - item.cite | String | - | The person who made the quote |
+| - item.quote | HTML | - | The quote content |
+| - item.image | Image | - | The image that sits to the left of the quote. |
+
+
+### Slots
+
+| Option | Default Value | Description |
+| ------ | ------------- | ----------- |
+| default | - | Will display underneath the quotes |

package/src/components/Testimonial/Testimonial.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="container testimonial mb-5" data-show="1" ref="wrapper">
+    <div :class="'bg-'+background">
+      <div class="row">
+        <div class="col-md-5 position-relative">
+          <div class="testimonial__images">
+            <img v-for="(value,index) in items" :key="index" :src="value.image ? value.image : 'data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=='" alt="" :class="'h-100 w-100 object-cover' + (value.image ? '' : ' opacity-0')" />
+          </div>
+          <div class="testimonial__controls">
+            <button data-go="0" disabled class="btn-prev">Previous</button>
+            <button data-go="2" class="btn-next">Next</button>
+          </div>
+        </div>
+        <div class="col-md-7">
+          <h2>What our customers think…</h2>
+          <div class="testimonial__content">
+
+            <blockquote v-for="(value,index) in items" :key="index" :class="value.class">
+              <div v-html="value.quote"></div>
+              <cite v-html="value.cite"></cite>
+            </blockquote>
+          </div>
+          <div class="testimonial__after">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+      <span class="circle circle--dots d-none d-md-block"></span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@import "../../../assets/sass/_func.scss";
+@import "../../../assets/sass/components/testimonial.scss";
+</style>
+
+<script>
+import testimonial from '../../../assets/js/modules/testimonial.js'
+
+
+export default {
+  name: 'Testimonial',
+  props: {
+    items: {
+      type: Array,
+      required: true
+    },
+    background: {
+      type: String,
+      default: 'light',
+      required: false
+    }
+  },
+  mounted(){
+
+    testimonial(this.$refs.wrapper);
+
+  }
+}
+</script>

package/src/components/Timeline/README.md

@@ -0,0 +1,18 @@
+<p class="note">The Timeline component represents an individual item within the timeline and not the full timeline itself. These Vue components need to be inside of a div with the class of 'timeline__container'.</p>
+
+### Usage
+
+```
+<div class="timeline__container container">
+  <Timeline :image="require('../../assets/shutterstock_1229155495.webp')">
+    <h2>01 Search</h2>
+    <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>
+  </Timeline>
+</div>
+```
+
+### Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| image | String | - | Optional image url to display in the background |

package/src/components/Timeline/Timeline.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="timeline">
+    <div class="timeline__content">
+      <slot></slot>
+    </div>
+    <img v-if="image" :src="image" alt="" />
+  </div>
+</template>
+
+<style lang="scss">
+@import "../../../assets/sass/_func.scss";
+@import "../../../assets/sass/components/timeline.scss";
+</style>
+
+<script>
+export default {
+  name: 'Timeline',
+  props: {
+    image: {
+      type: String,
+      required: false
+    }
+  }
+}
+</script>