@iamproperty/components 3.0.0 → 3.2.0

package/src/components/PropertySearchbar/README.md

@@ -1,26 +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  |
+### 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

@@ -1,21 +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 |
-| ------ | ------------- | ----------- |
+### 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

@@ -1,32 +1,32 @@
-<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/components/snapshot.scss";
-</style>
-
-<script>
-
-export default {
-  name: 'Snapshot',
-  props: {
-    items: {
-      type: Array,
-      required: true
-    },
-  }
-}
-</script>
+<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/components/snapshot.scss";
+</style>
+
+<script>
+
+export default {
+  name: 'Snapshot',
+  props: {
+    items: {
+      type: Array,
+      required: true
+    },
+  }
+}
+</script>

package/src/components/Stepper/README.md

@@ -1,33 +1,33 @@
-### Usage
-
-```
-<Stepper class="visualtest">
-  <Step status="warning">Warning status</Step>
-  <Step url="/step" status="danger">Danger status</Step>
-  <Step url="/step" status="success">Success status</Step>
-  <Step href="/step" current>Current step</Step>
-  <Step href="/step">Future step</Step>
-</Stepper>
-```
-
-### Properties
-
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| label  | String | - | Optional label to title the component |
-| endlabel  | String | Complete | End label to signify the end of the process |
-
-
-### Step Properties
-
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| url  | String | - | Add a url to take the user back to or ahead to said step, if a url is not passed the link is disabled. |
-| status  | String | - | Each step can have a status to highlight to the user whether the step was completed correctly. |
-| current  | String | - | Indicate whether this is the current step |
-
-### Slots
-
-| Option | Default Value | Description |
-| ------ | ------------- | ----------- |
+### Usage
+
+```
+<Stepper class="visualtest">
+  <Step status="warning">Warning status</Step>
+  <Step url="/step" status="danger">Danger status</Step>
+  <Step url="/step" status="success">Success status</Step>
+  <Step href="/step" current>Current step</Step>
+  <Step href="/step">Future step</Step>
+</Stepper>
+```
+
+### Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| label  | String | - | Optional label to title the component |
+| endlabel  | String | Complete | End label to signify the end of the process |
+
+
+### Step Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| url  | String | - | Add a url to take the user back to or ahead to said step, if a url is not passed the link is disabled. |
+| status  | String | - | Each step can have a status to highlight to the user whether the step was completed correctly. |
+| current  | String | - | Indicate whether this is the current step |
+
+### Slots
+
+| Option | Default Value | Description |
+| ------ | ------------- | ----------- |
 | default | - | Container for step components |

package/src/components/Stepper/Step.vue

@@ -1,28 +1,28 @@
-<template>
-  <li>
-    <a :href="url" :class="`${status?'bg-'+status:''}${typeof current != 'undefined'?'current':''}`" :aria-current="typeof current != 'undefined'?true:false">
-      <span><slot></slot></span>
-      <em class="visually-hidden" v-if="status"> - status: {{status}}</em>
-    </a>
-  </li>
-</template>
-
-<script>
-export default {
-  name: 'Stepper',
-  props: {
-    url: {
-      type: String,
-      required: false
-    },
-    status: {
-      type: String,
-      required: false
-    },
-    current: {
-      type: String,
-      required: false
-    }
-  }
-}
-</script>
+<template>
+  <li>
+    <a :href="url" :class="`${status?'bg-'+status:''}${typeof current != 'undefined'?'current':''}`" :aria-current="typeof current != 'undefined'?true:false">
+      <span><slot></slot></span>
+      <em class="visually-hidden" v-if="status"> - status: {{status}}</em>
+    </a>
+  </li>
+</template>
+
+<script>
+export default {
+  name: 'Stepper',
+  props: {
+    url: {
+      type: String,
+      required: false
+    },
+    status: {
+      type: String,
+      required: false
+    },
+    current: {
+      type: String,
+      required: false
+    }
+  }
+}
+</script>

package/src/components/Stepper/Stepper.spec.js

@@ -1,99 +1,99 @@
-import { mount } from '@vue/test-utils'
-import Stepper from './Stepper.vue'
-import Step from './Step.vue'
-
-describe('Stepper component', () => {
-  it('renders 4 steps', () => {
-
-    const test = mount(Stepper, {
-      propsData: {
-        'label': 'Start',
-        'endlabel': 'End'
-      },
-      global: {
-        stubs: {
-          'Step': Step
-        }
-      },
-      slots: {
-        default: `<Step status="success">Customer due diligence</Step>
-        <Step url="/step" status="success">Legal Preperation</Step>
-        <Step url="/step" current>Financial Preparation</Step>
-        <Step url="/step">Surveys</Step>`
-      }
-    })
-
-    expect(test.findAll('a').length).toBe(4)
-  })
-
-  it('renders a label when set', () => {
-
-    const test = mount(Stepper, {
-      propsData: {
-        'label': 'Start',
-        'endlabel': 'End'
-      },
-      global: {
-        stubs: {
-          'Step': Step
-        }
-      },
-      slots: {
-        default: `<Step status="success">Customer due diligence</Step>
-        <Step url="/step" status="success">Legal Preperation</Step>
-        <Step url="/step" current>Financial Preparation</Step>
-        <Step url="/step">Surveys</Step>`
-      }
-    })
-
-    expect(test.find('.stepper__start').html()).toContain('Start')
-  })
-
-  it('renders an end label when set', () => {
-
-    const test = mount(Stepper, {
-      propsData: {
-        'label': 'Start',
-        'endlabel': 'End'
-      },
-      global: {
-        stubs: {
-          'Step': Step
-        }
-      },
-      slots: {
-        default: `<Step status="success">Customer due diligence</Step>
-        <Step url="/step" status="success">Legal Preperation</Step>
-        <Step url="/step" current>Financial Preparation</Step>
-        <Step url="/step">Surveys</Step>`
-      }
-    })
-
-    expect(test.find('.stepper__end').html()).toContain('End')
-  })
-
-
-  it('sets status on steps', () => {
-
-    const test = mount(Stepper, {
-      propsData: {
-        'label': 'Start',
-        'endlabel': 'End'
-      },
-      global: {
-        stubs: {
-          'Step': Step
-        }
-      },
-      slots: {
-        default: `<Step status="success">Customer due diligence</Step>
-        <Step url="/step" status="success">Legal Preperation</Step>
-        <Step url="/step" current>Financial Preparation</Step>
-        <Step url="/step">Surveys</Step>`
-      }
-    })
-
-    expect(test.find('.bg-success').exists()).toBe(true)
-    expect(test.find('.current').exists()).toBe(true)
-  })
-})
+import { mount } from '@vue/test-utils'
+import Stepper from './Stepper.vue'
+import Step from './Step.vue'
+
+describe('Stepper component', () => {
+  it('renders 4 steps', () => {
+
+    const test = mount(Stepper, {
+      propsData: {
+        'label': 'Start',
+        'endlabel': 'End'
+      },
+      global: {
+        stubs: {
+          'Step': Step
+        }
+      },
+      slots: {
+        default: `<Step status="success">Customer due diligence</Step>
+        <Step url="/step" status="success">Legal Preperation</Step>
+        <Step url="/step" current>Financial Preparation</Step>
+        <Step url="/step">Surveys</Step>`
+      }
+    })
+
+    expect(test.findAll('a').length).toBe(4)
+  })
+
+  it('renders a label when set', () => {
+
+    const test = mount(Stepper, {
+      propsData: {
+        'label': 'Start',
+        'endlabel': 'End'
+      },
+      global: {
+        stubs: {
+          'Step': Step
+        }
+      },
+      slots: {
+        default: `<Step status="success">Customer due diligence</Step>
+        <Step url="/step" status="success">Legal Preperation</Step>
+        <Step url="/step" current>Financial Preparation</Step>
+        <Step url="/step">Surveys</Step>`
+      }
+    })
+
+    expect(test.find('.stepper__start').html()).toContain('Start')
+  })
+
+  it('renders an end label when set', () => {
+
+    const test = mount(Stepper, {
+      propsData: {
+        'label': 'Start',
+        'endlabel': 'End'
+      },
+      global: {
+        stubs: {
+          'Step': Step
+        }
+      },
+      slots: {
+        default: `<Step status="success">Customer due diligence</Step>
+        <Step url="/step" status="success">Legal Preperation</Step>
+        <Step url="/step" current>Financial Preparation</Step>
+        <Step url="/step">Surveys</Step>`
+      }
+    })
+
+    expect(test.find('.stepper__end').html()).toContain('End')
+  })
+
+
+  it('sets status on steps', () => {
+
+    const test = mount(Stepper, {
+      propsData: {
+        'label': 'Start',
+        'endlabel': 'End'
+      },
+      global: {
+        stubs: {
+          'Step': Step
+        }
+      },
+      slots: {
+        default: `<Step status="success">Customer due diligence</Step>
+        <Step url="/step" status="success">Legal Preperation</Step>
+        <Step url="/step" current>Financial Preparation</Step>
+        <Step url="/step">Surveys</Step>`
+      }
+    })
+
+    expect(test.find('.bg-success').exists()).toBe(true)
+    expect(test.find('.current').exists()).toBe(true)
+  })
+})

package/src/components/Stepper/Stepper.vue

@@ -1,33 +1,33 @@
-<template>
-  <div class="container">
-    <nav class="stepper" :aria-label="label?label:'Progress'">
-      <span class="h6 stepper__start" v-if="label">{{label}}</span>
-      <ol class="list-unstyled">
-        <slot><!-- Use for titles etc --></slot>
-      </ol>
-      <span class="h6 stepper__end">{{endlabel}}</span>
-    </nav>
-  </div>
-</template>
-
-
-<style lang="scss">
-@import "../../../assets/sass/components/stepper.scss";
-</style>
-
-<script>
-export default {
-  name: 'Stepper',
-  props: {
-    label: {
-      type: String,
-      required: false
-    },
-    endlabel: {
-      type: String,
-      required: false,
-      default: "Complete"
-    }
-  }
-}
-</script>
+<template>
+  <div class="container">
+    <nav class="stepper" :aria-label="label?label:'Progress'">
+      <span class="h6 stepper__start" v-if="label">{{label}}</span>
+      <ol class="list-unstyled">
+        <slot><!-- Use for titles etc --></slot>
+      </ol>
+      <span class="h6 stepper__end">{{endlabel}}</span>
+    </nav>
+  </div>
+</template>
+
+
+<style lang="scss">
+@import "../../../assets/sass/components/stepper.scss";
+</style>
+
+<script>
+export default {
+  name: 'Stepper',
+  props: {
+    label: {
+      type: String,
+      required: false
+    },
+    endlabel: {
+      type: String,
+      required: false,
+      default: "Complete"
+    }
+  }
+}
+</script>

package/src/components/Tabs/README.md

@@ -1,28 +1,28 @@
-### 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 |
-| lazy  | Boolean | - | If set the content of the tab will not loaded intially and will be loaded after the user has clicked on the tab link. |
-
-### Slots
-
-| Option | Default Value | Description |
-| ------ | ------------- | ----------- |
+### 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 |
+| lazy  | Boolean | - | If set the content of the tab will not loaded intially and will be loaded after the user has clicked on the tab link. |
+
+### Slots
+
+| Option | Default Value | Description |
+| ------ | ------------- | ----------- |
 | default | - | Can be populated with Tab components |

package/src/components/Tabs/Tab.vue

@@ -1,32 +1,32 @@
-<template>
-  <div class="tab" v-if="show">
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Tab',
-  props: {
-    title: {
-      type: String,
-      required: true
-    },
-    lazy: {
-      type: Boolean,
-      required: false
-    }
-  },
-  data() {
-    return {
-      show: this.lazy ? false : true
-    }
-  },
-  watch: {
-
-    show(newVal, oldVal) {
-      console.log(newVal)
-    }
-  }
-}
-</script>
+<template>
+  <div class="tab" v-if="show">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Tab',
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    lazy: {
+      type: Boolean,
+      required: false
+    }
+  },
+  data() {
+    return {
+      show: this.lazy ? false : true
+    }
+  },
+  watch: {
+
+    show(newVal, oldVal) {
+      console.log(newVal)
+    }
+  }
+}
+</script>