@iamproperty/components 1.0.13 → 2.2.0

package/src/components/KeyFacts/KeyFact.vue

@@ -1,45 +0,0 @@
-<template functional>
-    <div class="key-fact col-6 col-sm-4 col-lg-2">
-        <ul>
-            <li :class="{nil: props.keyfact.value == 0}" class="fact-value">{{ props.keyfact.value }}</li>
-            <li class="fact-label">{{ props.keyfact.label }}</li>
-        </ul>
-    </div>
-</template>
-
-<script>
-export default {
-  name: 'KeyFact',
-  props: {
-    keyfact: {
-      type: Object,
-      required: true
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-    .key-fact {
-        text-align: center;
-        padding: 10px;
-        width:100%;
-
-        ul {
-            padding: 0;
-            margin: 0;
-        }
-
-        li {
-            list-style: none;
-        }
-
-        .fact-value {
-            font-size:2.4rem;
-            padding-bottom: 5px;
-        }
-    }
-    .nil {
-        color: red;
-    }
-</style>

package/src/components/KeyFacts/KeyFactGroup.vue

@@ -1,44 +0,0 @@
-<template>
-    <div>
-        <div>
-            <div class="key-fact-group">
-                <div class="row">
-                    <key-fact
-                            v-for="keyfact in keyfacts"
-                            :key="keyfact.id"
-                            :keyfact="keyfact">
-                    </key-fact>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-
-import KeyFact from '@/components/KeyFacts/KeyFact.vue'
-
-export default {
-  name: 'KeyFactGroup',
-  props: {
-    keyfacts: {
-      type: Array,
-      required: true
-    }
-  },
-  components: {
-    KeyFact
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-
-    .key-fact-group {
-        background-color: #46003C;
-        color:white;
-        padding: 10px;
-        border-radius:3px;
-    }
-
-</style>

package/src/components/KeyFacts/README.md

@@ -1,23 +0,0 @@
-# Key Facts
-```
-<key-fact-group></key-fact-group>
-```
-## Key Fact Item
-...
-
-<key-fact
-    v-for="keyfact in keyfacts"
-    :key="keyfact.id"
-    :keyfact="keyfact">
-</key-fact>
-...
-
-## Component Reference
-
-### Properties
-
-| Property  | Type  | Default Value  | Description  |
-| --------- | ----- | -------------- | -------------- |
-| keyfacts     | Object | `{}`           | Up to 6 keyfact objects can be displayed |
-| value     | Number | ``           | This value is passed into the key fact component from the keyfacts object |
-| label     | String | ``           | This value is passed into the key fact component from the keyfacts object |

package/src/components/KeyInformation/KeyInformation.vue

@@ -1,23 +0,0 @@
-<template>
-    <div>
-        <div class="row mb-2" :key="name" v-for="(value, name) in items">
-            <div class="col-md-3 font-weight-bold">
-                {{ name }}:
-            </div>
-            <div class="col-md-9">
-                <span v-html="value"></span>
-            </div>
-        </div>
-    </div>
-</template>
-<script>
-export default {
-  name: 'KeyInformation',
-  props: {
-    items: {
-      type: Object,
-      required: true
-    }
-  }
-}
-</script>

package/src/components/KeyInformation/README.md

@@ -1,32 +0,0 @@
-# Key Information
-
-```
-<key-information :items='items'></key-information>
-```
-
-Example data passed into the key information component:
-
-```
-{
-    "Full Name": "Mr Richard Branson",
-    "Legal Capacity": "Legal Owner",
-    "Mobile Number": "07411882800",
-    "Full Address": "Branson Towers<br> London<br> London<br> SW20 0AL<br> United Kingdom",
-    "Website Link": "<a href=\"https://www.branson-towers.co.uk\" target=\"_blank\">Branson Towers</a>"
-}
-```
-
-## Component Reference
-
-### Properties
-
-| Property  | Type  | Default Value  | Description  |
-| --------- | ----- | -------------- | -------------- |
-| items     | Object | `{}`           | Required. Takes a basic json object of key/value pairs |
-
-### Component Description
-The key information component is a way of displaying text in neat rows and columns in key/value pairs
-
-The key information component accepts html tags so links, buttons etc will display correctly.
-
-The columns will stack on smaller viewports.

package/src/components/PropertyTaskIntro/PropertyTaskIntro.vue

@@ -1,74 +0,0 @@
-<template>
-  <div class="property-task-intro">
-    <div class="row">
-      <div class="col-12">
-        <h2>{{ property.address }}</h2>&nbsp;<a :href="property.url" target="_blank">View details</a>
-      </div>
-      <div class="col-12" v-if="branch">
-        <ul class="branch-info d-sm-flex">
-          <li><strong>{{property.branchName}}</strong></li>
-          <li>Telephone: <a :href="`tel: ${property.branchTelephone}`">{{property.branchTelephone}}</a></li>
-          <li>Email: <a :href="`mailto:  ${property.branchEmail}`">{{property.branchEmail}}</a></li>
-        </ul>
-      </div>
-      <div class="col-12" v-if="bid">
-        <ul class="bid-info d-sm-flex" >
-          <li>Starting Bid: £{{property.startingBid}}</li>
-          <li>Contract signed: {{property.contractSigned}} <span>{{ property.contractTime }}</span></li>
-        </ul>
-      </div>
-      <div class="col-12" v-if="auction">
-        <ul class="auction-info d-sm-flex">
-          <li>Auction start date: {{property.auctionStartDate}}</li>
-          <li>Auction end date: {{property.auctionEndDate}}</li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: 'PropertTaskIntro',
-  props: {
-    property: {
-      type: Object,
-      required: true
-    },
-    auction: {
-      type: Boolean,
-      default: false
-    },
-    bid: {
-      type: Boolean,
-      default: false
-    },
-    branch: {
-      type: Boolean,
-      default: false
-    }
-  }
-}
-</script>
-<style lang="scss">
-.property-task-intro {
-  span {
-    color:red;
-    padding-left: 10px;
-  }
-}
-
-ul.auction-info, ul.bid-info, ul.branch-info {
-  list-style: none;
-  li {
-    padding-left: 15px;
-
-    &:first-of-type {
-      padding-left: 0;
-    }
-
-    @media only screen and (max-width: 576px) {
-      padding-left: 0;
-    }
-  }
-}
-</style>

package/src/components/PropertyTaskIntro/README.md

@@ -1,27 +0,0 @@
-# Property Task Intro
-```
-<property-task-intro
-        v-for="property in properties"
-        :key="property.id"
-        :property="property"
-      />
-```
-
-## Component Reference
-
-### Properties
-
-| Property  | Type  | Default Value  | Description  |
-| --------- | ----- | -------------- | -------------- |
-| property     | Object | ``         | An object of property values|
-| url     | String | ``         | property url link|
-| address     | String | ``         | property address|
-| startingBid     | Number | ``         | property starting bid|
-| contractSigned     | String | ``         | property contract signed|
-| contractTime     | String | ``         | property contract time|
-| auctionStartDate     | String | ``         | auction start date|
-| auctionEndDate     | String | ``         | auction end date|
-| branchName     | String | ``         | branch name|
-| branchTelephone     | String | ``         | branch telephone number|
-| branchEmail     | String | ``         | branch email address|
-

package/src/components/TaskTitle/README.md

@@ -1,24 +0,0 @@
-# Task Title
-```
-<task-title variant="task-soft-green">Task title goes here</task-title>
-```
-
-## Component Reference
-
-### Properties
-
-| Property  | Type  | Default Value  | Description  |
-| --------- | ----- | -------------- | -------------- |
-| variant     | String | `task-punchy-mustard`           | Applies one of the theme colour variants to the component |
-
-
-### Variant Options
-
-- task-punchy-mustard 
-- task-homely-aubergine 
-- task-fresh-blue
-- task-deep-slate 
-- task-soft-green 
-- task-soft-pink 
-- task-grey-50
-- task-grey-70

package/src/components/TaskTitle/TaskTitle.vue

@@ -1,68 +0,0 @@
-<template>
-  <div class="task-title" :class="variant">
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'TaskTitle',
-  props: {
-    variant: {
-      required: false,
-      type: String,
-      default: 'task-punchy-mustard'
-    }
-  }
-}
-</script>
-<style lang="scss">
-
-    $deep-slate: #00313C;
-    $soft-green: /*#b4e6a5*/ #9CCD86;
-    $homely-aubergine: #46003C;
-    $soft-pink: #ffd2d2;
-    $grey-70: #6f6f6f;
-    $grey-50: #9d9d9d;
-    $fresh-blue: #1ebee6;
-    $punchy-mustard: #ffa500;
-
-    /* Define the Sass Map $brand-colors */
-    $brand-colors: (
-        punchy-mustard: $punchy-mustard,
-        homely-aubergine: $homely-aubergine,
-        fresh-blue: $fresh-blue,
-        deep-slate: $deep-slate,
-        soft-green: $soft-green,
-        soft-pink: $soft-pink,
-        grey-50: $grey-50,
-        grey-70: $grey-70,
-    );
-    /* For each key in the map, create it's own class */
-    @each $name, $value in $brand-colors {
-        @if $value == $homely-aubergine or $value == $deep-slate or $value == $grey-70 {
-            .task-#{$name} {
-                background-color: $value;
-                h4 {
-                    color: #fff;
-                }
-            }
-        }
-        @else {
-            .task-#{$name} {
-                background-color: $value;
-                h4 {
-                    color:#000;
-                }
-            }
-        }
-    }
-
-    .task-title {
-        border-radius: 0.5rem;
-        h4 {
-            padding: 0.8rem;
-            font-weight:normal;
-        }
-    }
-</style>

package/src/components/VendorTable/README.md

@@ -1,63 +0,0 @@
-# Vendor Table
-
-```
-<vendor-table :items="items" :fields="fields"></vendor-table>
-```
-
-Example data passed for the vendor profile table:
-
-```
-data () {
-    return {
-      fields: [
-        { key: 'basic_details' },
-        { key: 'capacity' },
-        { key: 'contact_details' },
-        { key: 'address' },
-        { key: 'point_of_contact' },
-        { key: 'actions' }
-      ],
-      items: [
-        {
-          basic_details: 'mr Richard Branson<br> (Mr Richard Branson)',
-          capacity: 'Legal owner',
-          contact_details: '07411882800 (Mobile)<br> 07411882800 (Main)',
-          address: 'Branson Towers<br> London<br> London<br> SW20 0AL<br> United Kingdom',
-          point_of_contact: 'None set',
-          actions: '<a href="#">View</a><br><a href="#">Point of Contact</a>'
-        },
-        {
-          basic_details: 'mrs Laura Branson<br> (Mrs Laura Branson)',
-          capacity: 'Legal owner',
-          contact_details: '07729797870 (Main)<br> 07729797870 (Mobile)',
-          address: 'Branson Towers<br> London<br> London<br> SW20 0AL<br> United Kingdom',
-          point_of_contact: 'None set',
-          actions: '<a href="#">View</a><br><a href="#">Point of Contact</a>'
-        }
-      ]      
-    }
-  }
-```
-
-## Component Reference
-
-### Properties
-
-| Property  | Type  | Default Value  | Description  |
-| --------- | ----- | -------------- | -------------- |
-| items     | Array | `[]`           | Table row data passed |
-| fields | Array| `[]`     | Table header titles  |
-| small | Boolean | `false` | Removes cell padding |
-
-### Component Description
-The vendor table component is a flexible table based on `<b-table>` from the bootstrap vue component library.
-
-The table adapts to however many column items are needed to show various vendor information. fields define the order of the columns, and which columns to display.
-
-The vendor table component accepts html tags so links, buttons etc will display correctly.
-
-Table columns will stack on smaller viewports.
-
-More information on the `<b-table>` component can be found at:
-
-https://bootstrap-vue.org/docs/components/table

package/src/components/VendorTable/VendorTable.vue

@@ -1,49 +0,0 @@
-<template>
-  <div class="vendor-table">
-    <b-table stacked="sm" :small="small" :items="items" :fields="fields">
-      <template #cell()="data">
-        <span v-html="data.value"></span>
-      </template>
-    </b-table>
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: 'VendorTable',
-  props: {
-    items: {
-      type: Array,
-      required: true
-    },
-    fields: {
-      type: Array,
-      required: true
-    },
-    small: {
-      type: Boolean,
-      required: false
-    }
-  }
-}
-</script>
-<style lang="scss">
-
-  .vendor-table {
-    font-size: 1.4rem;
-
-    .table {
-      thead {
-        background-color: #f7f7f7;
-        text-transform: lowercase;
-        div::first-letter {
-          text-transform: uppercase;
-        }
-      }
-      tbody {
-        background-color: #f4f4f4;
-      }
-    }
-  }
-</style>