@iamproperty/components 7.0.0 → 7.1.0--beta2

package/src/components/Search/Search.vue

@@ -5,21 +5,18 @@
 </template>
 
 <script>
-export default {
-  name: 'Search',
-  mounted(){
-
-    this.$nextTick(function () {
-
-      import(`../../../assets/js/components/search/search.component.min.js`).then(module => {
-        
-        if (!window.customElements.get(`iam-search`))
-          window.customElements.define(`iam-search`, module.default);
-
-      }).catch((err) => {
-        console.log(err.message);
+  export default {
+    name: 'Search',
+    mounted() {
+      this.$nextTick(function () {
+        import(`../../../assets/js/components/search/search.component.min.js`)
+          .then((module) => {
+            if (!window.customElements.get(`iam-search`)) window.customElements.define(`iam-search`, module.default);
+          })
+          .catch((err) => {
+            console.log(err.message);
+          });
       });
-    })
-  }
-}
+    },
+  };
 </script>

package/src/components/Slider/Slider.vue

@@ -5,21 +5,18 @@
 </template>
 
 <script>
-export default {
-  name: 'Slider',
-  mounted(){
-
-    this.$nextTick(function () {
-      
-      import(`../../../assets/js/components/slider/slider.component.min.js`).then(module => {
-
-        if (!window.customElements.get(`iam-slider`))
-          window.customElements.define(`iam-slider`, module.default);
-
-      }).catch((err) => {
-        console.log(err.message);
+  export default {
+    name: 'Slider',
+    mounted() {
+      this.$nextTick(function () {
+        import(`../../../assets/js/components/slider/slider.component.min.js`)
+          .then((module) => {
+            if (!window.customElements.get(`iam-slider`)) window.customElements.define(`iam-slider`, module.default);
+          })
+          .catch((err) => {
+            console.log(err.message);
+          });
       });
-    })
-  }
-}
+    },
+  };
 </script>

package/src/components/Snapshot/README.md

@@ -6,16 +6,15 @@
 
 ### 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.
-
+| 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 |
+| Option  | Default Value | Description                            |
+| ------- | ------------- | -------------------------------------- |
+| default | -             | Will display before the snapshot items |

package/src/components/Snapshot/Snapshot.vue

@@ -2,31 +2,29 @@
   <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="lead snapshot__title">{{value.title}}</span>
-        <span class="stat">{{value.number}}</span>
+      <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="lead snapshot__title">{{ value.title }}</span>
+          <span class="stat">{{ value.number }}</span>
+        </div>
       </div>
     </div>
-    </div>
   </div>
 </template>
 
 <style lang="scss">
-@import "../../../assets/sass/components/snapshot.scss";
+  @import '../../../assets/sass/components/snapshot.scss';
 </style>
 
 <script>
-
-export default {
-  name: 'Snapshot',
-  props: {
-    items: {
-      type: Array,
-      required: true
+  export default {
+    name: 'Snapshot',
+    props: {
+      items: {
+        type: Array,
+        required: true,
+      },
     },
-  }
-}
+  };
 </script>

package/src/components/Stepper/README.md

@@ -12,22 +12,21 @@
 
 ### 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 |
-
+| 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 |
+| 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 |
+| Option  | Default Value | Description                   |
+| ------- | ------------- | ----------------------------- |
+| default | -             | Container for step components |

package/src/components/Stepper/Step.vue

@@ -1,28 +1,32 @@
 <template>
   <li>
-    <a :href="url" :class="`${status?'bg-'+status:''}${typeof current != 'undefined'?'current':''}`" :aria-current="typeof current != 'undefined'?'step':false">
+    <a
+      :href="url"
+      :class="`${status ? 'bg-' + status : ''}${typeof current != 'undefined' ? 'current' : ''}`"
+      :aria-current="typeof current != 'undefined' ? 'step' : false"
+    >
       <span><slot></slot></span>
-      <em class="visually-hidden" v-if="status"> - status: {{status}}</em>
+      <em class="visually-hidden" v-if="status"> - status: {{ status }}</em>
     </a>
   </li>
 </template>
 
 <script>
-export default {
-  name: 'Stepper',
-  props: {
-    url: {
-      type: String,
-      required: false
+  export default {
+    name: 'Stepper',
+    props: {
+      url: {
+        type: String,
+        required: false,
+      },
+      status: {
+        type: String,
+        required: false,
+      },
+      current: {
+        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,94 @@
-import { mount } from '@vue/test-utils'
-import Stepper from './Stepper.vue'
-import Step from './Step.vue'
+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'
+        label: 'Start',
+        endlabel: 'End',
       },
       global: {
         stubs: {
-          'Step': Step
-        }
+          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>`
-      }
-    })
+        <Step url="/step">Surveys</Step>`,
+      },
+    });
 
-    expect(test.findAll('a').length).toBe(4)
-  })
+    expect(test.findAll('a').length).toBe(4);
+  });
 
   it('renders a label when set', () => {
-
     const test = mount(Stepper, {
       propsData: {
-        'label': 'Start',
-        'endlabel': 'End'
+        label: 'Start',
+        endlabel: 'End',
       },
       global: {
         stubs: {
-          'Step': Step
-        }
+          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>`
-      }
-    })
+        <Step url="/step">Surveys</Step>`,
+      },
+    });
 
-    expect(test.find('.stepper__start').html()).toContain('Start')
-  })
+    expect(test.find('.stepper__start').html()).toContain('Start');
+  });
 
   it('renders an end label when set', () => {
-
     const test = mount(Stepper, {
       propsData: {
-        'label': 'Start',
-        'endlabel': 'End'
+        label: 'Start',
+        endlabel: 'End',
       },
       global: {
         stubs: {
-          'Step': Step
-        }
+          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')
-  })
+        <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'
+        label: 'Start',
+        endlabel: 'End',
       },
       global: {
         stubs: {
-          'Step': Step
-        }
+          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>`
-      }
-    })
+        <Step url="/step">Surveys</Step>`,
+      },
+    });
 
-    expect(test.find('.bg-success').exists()).toBe(true)
-    expect(test.find('.current').exists()).toBe(true)
-  })
-})
+    expect(test.find('.bg-success').exists()).toBe(true);
+    expect(test.find('.current').exists()).toBe(true);
+  });
+});

package/src/components/Stepper/Stepper.vue

@@ -1,33 +1,32 @@
 <template>
   <div class="container">
-    <nav class="stepper" :aria-label="label?label:'Progress'">
-      <span class="h6 stepper__start" v-if="label">{{label}}</span>
+    <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>
+      <span class="h6 stepper__end">{{ endlabel }}</span>
     </nav>
   </div>
 </template>
 
-
 <style lang="scss">
-@import "../../../assets/sass/components/stepper.scss";
+  @import '../../../assets/sass/components/stepper.scss';
 </style>
 
 <script>
-export default {
-  name: 'Stepper',
-  props: {
-    label: {
-      type: String,
-      required: false
+  export default {
+    name: 'Stepper',
+    props: {
+      label: {
+        type: String,
+        required: false,
+      },
+      endlabel: {
+        type: String,
+        required: false,
+        default: 'Complete',
+      },
     },
-    endlabel: {
-      type: String,
-      required: false,
-      default: "Complete"
-    }
-  }
-}
+  };
 </script>

package/src/components/Table/README.md

@@ -4,23 +4,23 @@
 
 **Properties**
 
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| items  | Array | - | Table row data passed |
-| fields | Array | - | Table header titles |
-| data-show | int | 15 | Update how many rows can be shown per page |
-| data-filterby | string (form ID) | | Give an optional form ID to connect a form to the table and make it act like a filtering system |
-| data-no-scroll | flag | - | Stops the page from scrolling up to the top of the table |
-| data-expandable | flag | - | Adds expandable buttons to rows with will allow for larger paragraphs to be shown correctly |
+| Option          | Type             | Default Value | Description                                                                                     |
+| --------------- | ---------------- | ------------- | ----------------------------------------------------------------------------------------------- |
+| items           | Array            | -             | Table row data passed                                                                           |
+| fields          | Array            | -             | Table header titles                                                                             |
+| data-show       | int              | 15            | Update how many rows can be shown per page                                                      |
+| data-filterby   | string (form ID) |               | Give an optional form ID to connect a form to the table and make it act like a filtering system |
+| data-no-scroll  | flag             | -             | Stops the page from scrolling up to the top of the table                                        |
+| data-expandable | flag             | -             | Adds expandable buttons to rows with will allow for larger paragraphs to be shown correctly     |
 
-*Pagination properties can also be added to the table component so that they can be passed down to the child pagination element.*
+_Pagination properties can also be added to the table component so that they can be passed down to the child pagination element._
 
 **Class modifiers**
 
 - Adding a class of **.table--cta** to the table component will fix the last column of the table in place (While on tablet or desktop).
 - Adding a class of **.table--fullwidth** to the table component will prevent it from becoming a stacked view on mobile.
 - Adding a class of **.table--mh-small**,**.table--mh-medium** or **.table--mh-large** to the table component will give the table container a max height and the ability to scroll.
-**Example of items and fields**
+  **Example of items and fields**
 
 **fields**
 
@@ -34,6 +34,7 @@
   }
 ]
 ```
+
 **items**
 
 ```
@@ -45,4 +46,4 @@
     col_4: 'Row content 4',
   }
 ]
-```
+```

package/src/components/Table/Table.spec.js

@@ -1,58 +1,47 @@
-import { mount } from '@vue/test-utils'
-import Table from './Table.vue'
+import { mount } from '@vue/test-utils';
+import Table from './Table.vue';
 
 describe('Table component', () => {
-
   const test = mount(Table, {
     propsData: {
-      fields: [
-        { key: 'name' },
-        { key: 'job' },
-        { key: 'address' },
-        { key: 'emergency_contact' },
-        { key: 'actions' }
-      ],
+      fields: [{ key: 'name' }, { key: 'job' }, { key: 'address' }, { key: 'emergency_contact' }, { key: 'actions' }],
       items: [
         {
           name: 'Derrick',
           job: 'Electrician',
           address: '5 King Street<br> London<br> London<br> SW20 0AL<br> United Kingdom',
           emergency_contact: 'Susan',
-          actions: '<a href="#">View</a><br><a href="#">Point of Contact</a>'
+          actions: '<a href="#">View</a><br><a href="#">Point of Contact</a>',
         },
         {
           name: 'Andrew',
           job: 'Electrician',
           address: '5 King Street<br> London<br> London<br> SW20 0AL<br> United Kingdom',
           emergency_contact: 'Susan',
-          actions: '<a href="#">View</a><br><a href="#">Point of Contact</a>'
+          actions: '<a href="#">View</a><br><a href="#">Point of Contact</a>',
         },
         {
           name: 'Rachel',
           job: 'Electrician',
           address: '5 King Street<br> London<br> London<br> SW20 0AL<br> United Kingdom',
           emergency_contact: 'Susan',
-          actions: '<a href="#">View</a><br><a href="#">Point of Contact</a>'
-        }
+          actions: '<a href="#">View</a><br><a href="#">Point of Contact</a>',
+        },
       ],
-      show: 2
-    }
-  })
+      show: 2,
+    },
+  });
 
   // On load
   it('renders a thead', () => {
-
-    expect(test.find('thead').exists()).toBe(true)
-  })
+    expect(test.find('thead').exists()).toBe(true);
+  });
 
   it('renders a tbody', () => {
-
-    expect(test.find('tbody').exists()).toBe(true)
-  })
+    expect(test.find('tbody').exists()).toBe(true);
+  });
 
   it('renders a table heading', () => {
-
-    expect(test.find('thead th').exists()).toBe(true)
-  })
-
-})
+    expect(test.find('thead th').exists()).toBe(true);
+  });
+});