@iamproperty/components 2.7.9 → 3.0.0

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

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

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,26 +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
-    }
-  }
-}
-</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>

package/src/components/Tabs/Tabs.vue

@@ -1,75 +1,77 @@
-<template>
-  <div class="container tabs__container" ref="wrapper">
-
-    <input type="radio" class="tab__input" 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" v-on:click="openTab(index)">
-        {{value.tabTitle}}
-      </label>
-    </div>
-    <div class="tabs">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<style lang="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)) {
-          
-          // Check if the value in the object is actually a tab and has the correct data
-          if(value.componentOptions && value.componentOptions.propsData && value.componentOptions.propsData.title){
-            
-            let tabTitle = value.componentOptions.propsData.title;
-            
-            let tab = {
-              name: this.tabsID,
-              id: this.tabsID+"_tab"+i++,
-              tabTitle: tabTitle
-            }
-
-            tabLinks.push(tab);
-          }
-        }
-
-        return tabLinks;
-      }
-    }
-  },
-  methods: {
-    openTab: function (index) {
-      
-      let i = 0;
-      for (const [key, value] of Object.entries(this.$slots.default)) {
-          
-        if(value.componentOptions && value.componentOptions.propsData && value.componentOptions.propsData.title){
-          
-          if(i == index){
-            value.componentInstance._data.show = true;
-          }
-
-          i++;
-        }
-      }
-    }
-  }
-}
-</script>
+<template>
+  <div class="container tabs__container" ref="wrapper">
+
+    <input type="radio" class="tab__input" v-for="(value,index) in tabLinks()" :key="index" :data-key="index" :name="value.name" :id="value.id" :checked="(index == 0 ? true:false)" />
+
+    <div class="tabs__links">
+      <label v-for="(value,index) in tabLinks()" :key="index" :for="value.id" class="link" v-on:click="openTab(index)">
+        {{value.tabTitle}}
+      </label>
+    </div>
+    <div class="tabs">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style lang="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())) {
+
+          // Check if the value in the object is actually a tab and has the correct data
+          if(value.props && value.props.title){
+
+            let tabTitle = value.props.title;
+
+            let tab = {
+              name: this.tabsID,
+              id: this.tabsID+"_tab"+i++,
+              tabTitle: tabTitle
+            }
+
+            tabLinks.push(tab);
+          }
+        }
+
+        return tabLinks;
+      }
+    }
+  },
+  methods: {
+    openTab: function (index) {
+
+      let i = 0;
+      for (const [key, value] of Object.entries(this.$slots.default())) {
+
+        if(value.props && value.props.title){
+
+          if(i == index){
+
+            console.log(value)
+            value.type.data().show = true;
+          }
+
+          i++;
+        }
+      }
+    }
+  }
+}
+</script>