@iamproperty/components 1.0.12 → 2.1.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/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>