@iamproperty/components 2.7.9 → 3.0.0

package/src/elements/Table/README.md

@@ -1,62 +1,62 @@
-### Usage
-
-```
-<Table :fields="fields" :items="items"></Table>
-```
-
-### Properties
-
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| items  | Array | - | Table row data passed |
-| fields | Array | - | Table header titles  |
-| sort   | string | - | Choose from ascending or descending |
-| sortBy | string | - | Needs to match a column name and will trigger sorting via that column on page load |
-| show | number | - | Limits the number of results shown and will create pagination controls. |
-| page | number | - | Starting page for the pagination. |
-| reorder | bool | - | Create an order column and allow for the table rows to be reordered |
-| headingclass | string | - | Add a class to the table row within the thead, used to add a background or change test colour. |
-
-### Class modifiers
-
-- **.table-fullwidth** - Prevents the table from stacking on mobile
-- **.table-striped** - Add zebra-striping to the table
-- **.table-hover** - Enable a hover state on table rows within a &lt;tbody&gt;
-
-### Make columns filterable or sortable
-
-To give a column some extra functionality extra values need to be set in the data.
-
-```
-fields: [
-  { 
-    key: 'name',
-    filterable: true,
-    sortable: true
-  },
-  { key: 'address' }
-]
-```
-
-### Custom JavaScript Events
-
-A custom event can be hooked into when the table gets updated by one of it filters.
-
-```
-this.$el.addEventListener('filtered', function (e) { 
-      
-  console.log('Table filtered')
-}, false);
-
-// Sorted
-this.$el.addEventListener('sorted', function (e) { 
-      
-  console.log('Table sorted')
-}, false);
-
-// Re-ordered via drag and drop
-this.$el.addEventListener('reordered', function (e) { 
-      
-  console.log('Table re-ordered')
-}, false);
-```
+### Usage
+
+```
+<Table :fields="fields" :items="items"></Table>
+```
+
+### Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| items  | Array | - | Table row data passed |
+| fields | Array | - | Table header titles  |
+| sort   | string | - | Choose from ascending or descending |
+| sortBy | string | - | Needs to match a column name and will trigger sorting via that column on page load |
+| show | number | - | Limits the number of results shown and will create pagination controls. |
+| page | number | - | Starting page for the pagination. |
+| reorder | bool | - | Create an order column and allow for the table rows to be reordered |
+| headingclass | string | - | Add a class to the table row within the thead, used to add a background or change test colour. |
+
+### Class modifiers
+
+- **.table-fullwidth** - Prevents the table from stacking on mobile
+- **.table-striped** - Add zebra-striping to the table
+- **.table-hover** - Enable a hover state on table rows within a &lt;tbody&gt;
+
+### Make columns filterable or sortable
+
+To give a column some extra functionality extra values need to be set in the data.
+
+```
+fields: [
+  { 
+    key: 'name',
+    filterable: true,
+    sortable: true
+  },
+  { key: 'address' }
+]
+```
+
+### Custom JavaScript Events
+
+A custom event can be hooked into when the table gets updated by one of it filters.
+
+```
+this.$el.addEventListener('filtered', function (e) { 
+      
+  console.log('Table filtered')
+}, false);
+
+// Sorted
+this.$el.addEventListener('sorted', function (e) { 
+      
+  console.log('Table sorted')
+}, false);
+
+// Re-ordered via drag and drop
+this.$el.addEventListener('reordered', function (e) { 
+      
+  console.log('Table re-ordered')
+}, false);
+```

package/src/elements/Table/Table.spec.js

@@ -0,0 +1,90 @@
+import { mount } from '@vue/test-utils'
+import Table from './Table.vue'
+
+describe('Table component', () => {
+
+  const test = mount(Table, {
+    propsData: {
+      fields: [
+        { key: 'name', filterable: true, sortable: true },
+        { key: 'job', filterable: true, sortable: true },
+        { key: 'address' },
+        { key: 'emergency_contact', filterable: true, sortable: true },
+        { 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>'
+        },
+        {
+          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>'
+        },
+        {
+          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>'
+        }
+      ],
+      show: 2
+    }
+  })
+
+  // On load
+  it('renders a div with the class of table wrapper', () => {
+
+    expect(test.classes()).toContain('table__wrapper')
+  })
+
+  it('renders a thead', () => {
+
+    expect(test.find('thead').exists()).toBe(true)
+  })
+
+  it('renders a tbody', () => {
+
+    expect(test.find('tbody').exists()).toBe(true)
+  })
+
+  it('renders a filters form when needed', () => {
+
+    expect(test.find('.table__filters').exists()).toBe(true)
+  })
+
+  it('renders a pagination form when needed', () => {
+
+    expect(test.find('.table__pagination').exists()).toBe(true)
+  })
+
+  // Events
+  it('can be sorted by name', async () => {
+
+    const firstCol = test.find('[data-sortable]')
+    expect(firstCol.html()).toContain('Name')
+
+    await firstCol.trigger('click')
+
+    let firstRowCol = test.find('tbody tr:first-child [data-label="Name"]')
+    expect(firstRowCol.html()).toContain('Andrew')
+  })
+
+  it('can be filtered by name', async () => {
+
+    const searchField = test.find('[type="search"]')
+
+    await searchField.setValue('Andrew')
+    await searchField.trigger('change')
+
+    expect(test.findAll('tbody tr').length).toBe(1)
+  })
+
+})

package/src/elements/Table/Table.vue

@@ -1,129 +1,129 @@
-<template>
-  <div class="table__wrapper" ref="wrapper" :data-sortby="sortby" :data-sort="sort" :data-show="show" :data-page="page" :data-reorder="reorder">
-    <table>
-      <thead v-if="fields">
-        <tr :class="headingclass">
-          <th v-for="(field) in fields" :key="field.key" :data-sortable="field.sortable" :data-filterable="field.filterable">{{ cellHeading(field.key) }}</th>
-        </tr>
-      </thead>
-      <tbody v-if="items">
-        <tr v-for="(value,index) in items" :key="index" :data-row-id="value['rowid']">
-          <td :key="cellIndex" v-for="(cellValue,cellIndex) in Object.fromEntries(Object.entries(value).filter(([key]) => key !== 'rowid'))" v-html="cellValue" :data-label="cellHeading(cellIndex)" :data-numeric="numericValue(cellValue)"></td>
-        </tr>
-      </tbody>
-    </table>
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-import { ucfirst, unsnake } from '../../helpers/strings'
-import table from '../../../assets/js/modules/table.js'
-
-let numericValue = function(value) {
-
-
-console.log(value);
-
-  value = value.replace('£','')
-  value = value.replace('%','')
-
-  if (Number.isNaN(Number.parseFloat(value))) {
-    return 0;
-  }
-
-  return Number.parseFloat(value)
-}
-
-export default {
-  name: 'Table',
-  props: {
-    reorder: {
-      type: Boolean,
-      required: false
-    },
-    page: {
-      type: Number,
-      required: false
-    },
-    show: {
-      type: Number,
-      required: false
-    },
-    sortby: {
-      type: String,
-      required: false
-    },
-    sort: {
-      type: String,
-      required: false
-    },
-    headingclass: {
-      type: String,
-      required: false
-    },
-    items: {
-      type: Array,
-      required: true
-    },
-    fields: {
-      type: Array,
-      required: true
-    }
-  },
-  computed: {
-    cellHeading () {
-      return (heading) => {
-        return `${ucfirst(unsnake(heading))}`
-      }
-    },
-    numericValue () {
-      return (value) => {
-
-        value = numericValue(value);
-        return value;
-      }
-    }
-  },
-  mounted(){
-
-    this.$nextTick(function () {
-      
-      table(this.$refs.wrapper);
-
-      // Listen for the event.
-      this.$el.addEventListener('sorted', function (e) { 
-        
-        console.log('Table sorted')
-      }, false);
-
-      this.$el.addEventListener('filtered', function (e) { 
-        
-        console.log('Table filtered')
-      }, false);
-
-    })
-  },
-  updated(){
-    this.$nextTick(function () {
-
-      // If the data gets updated we may need to recreate the tbody as it get detached when sorted in the table.js
-      let tbody = this.$refs.wrapper.querySelector('tbody');
-
-      let tbodyHTML = '';
-      this.items.forEach((row, index) => {
-
-        let rowID = row['rowid'] ? row['rowid'] : '';
-        row = Object.fromEntries(Object.entries(row).filter(([key]) => key !== 'rowid'));
-
-        tbodyHTML += `<tr data-row-id="${rowID}">${ Object.keys(row).map(col =>  `<td data-label="${ucfirst(unsnake(col))}" data-numeric="${numericValue(row[col])}">${row[col]}</td>` ).join("") }</tr>`;
-      });
-      tbody.innerHTML = tbodyHTML;
-
-      // Tell the framework that the table has been filtered so that it can re-sort it etc
-      const updatedEvent = new Event('filtered');
-      this.$refs.wrapper.dispatchEvent(updatedEvent);
-    })
-  }
-}
-</script>
+<template>
+  <div class="table__wrapper" ref="wrapper" :data-sortby="sortby" :data-sort="sort" :data-show="show" :data-page="page" :data-reorder="reorder">
+    <table>
+      <thead v-if="fields">
+        <tr :class="headingclass">
+          <th v-for="(field) in fields" :key="field.key" :data-sortable="field.sortable" :data-filterable="field.filterable">{{ cellHeading(field.key) }}</th>
+        </tr>
+      </thead>
+      <tbody v-if="items">
+        <tr v-for="(value,index) in items" :key="index" :data-row-id="value['rowid']">
+          <td :key="cellIndex" v-for="(cellValue,cellIndex) in Object.fromEntries(Object.entries(value).filter(([key]) => key !== 'rowid'))" v-html="cellValue" :data-label="cellHeading(cellIndex)" :data-numeric="numericValue(cellValue)"></td>
+        </tr>
+      </tbody>
+    </table>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import { ucfirst, unsnake } from '../../helpers/strings'
+import table from '../../../assets/js/modules/table.js'
+
+let numericValue = function(value) {
+
+  if(typeof(value) != "string")
+    return value;
+
+  value = value.replace('£','')
+  value = value.replace('%','')
+
+  if (Number.isNaN(Number.parseFloat(value))) {
+    return 0;
+  }
+
+  return Number.parseFloat(value)
+}
+
+export default {
+  name: 'Table',
+  props: {
+    reorder: {
+      type: Boolean,
+      required: false
+    },
+    page: {
+      type: Number,
+      required: false
+    },
+    show: {
+      type: Number,
+      required: false
+    },
+    sortby: {
+      type: String,
+      required: false
+    },
+    sort: {
+      type: String,
+      required: false
+    },
+    headingclass: {
+      type: String,
+      required: false
+    },
+    items: {
+      type: Array,
+      required: true
+    },
+    fields: {
+      type: Array,
+      required: true
+    }
+  },
+  computed: {
+    cellHeading () {
+      return (heading) => {
+        return `${ucfirst(unsnake(heading))}`
+      }
+    },
+    numericValue () {
+      return (value) => {
+
+        value = numericValue(value);
+        return value;
+      }
+    }
+  },
+  mounted(){
+
+    this.$nextTick(function () {
+
+      table(this.$refs.wrapper);
+
+      // Listen for the event.
+      this.$el.addEventListener('sorted', function (e) {
+
+        console.log('Table sorted')
+      }, false);
+
+      this.$el.addEventListener('filtered', function (e) {
+
+        console.log('Table filtered')
+      }, false);
+
+    })
+  },
+  updated(){
+    this.$nextTick(function () {
+
+      // If the data gets updated we may need to recreate the tbody as it get detached when sorted in the table.js
+      let tbody = this.$refs.wrapper.querySelector('tbody');
+
+      let tbodyHTML = '';
+      this.items.forEach((row, index) => {
+
+        let rowID = row['rowid'] ? row['rowid'] : '';
+        row = Object.fromEntries(Object.entries(row).filter(([key]) => key !== 'rowid'));
+
+        tbodyHTML += `<tr data-row-id="${rowID}">${ Object.keys(row).map(col =>  `<td data-label="${ucfirst(unsnake(col))}" data-numeric="${numericValue(row[col])}">${row[col]}</td>` ).join("") }</tr>`;
+      });
+      tbody.innerHTML = tbodyHTML;
+
+      // Tell the framework that the table has been filtered so that it can re-sort it etc
+      const updatedEvent = new Event('filtered');
+      this.$refs.wrapper.dispatchEvent(updatedEvent);
+    })
+  }
+}
+</script>

package/src/foundations/Icon/Icon.spec.js

@@ -0,0 +1,24 @@
+import { shallowMount } from '@vue/test-utils'
+import Icon from './Icon.vue'
+
+describe('Icon component', () => {
+  it('renders the email Icon by default', () => {
+    const test = shallowMount(Icon, {
+      propsData: { }
+    })
+
+    expect(test.html()).toContain('<title>email</title>')
+    expect(test.html()).toContain('<use xlink:href="/svg/icons.svg#icon-email"></use>')
+  })
+
+  it('renders the correct logo when an ID is passed', () => {
+    const test = shallowMount(Icon, {
+      propsData: {
+        id: 'pin'
+      }
+    })
+
+    expect(test.html()).toContain('<title>pin</title>')
+    expect(test.html()).toContain('<use xlink:href="/svg/icons.svg#icon-pin"></use>')
+  })
+})

package/src/foundations/Icon/Icon.vue

@@ -1,24 +1,24 @@
-<template>
-  <svg class="icon">
-    <title>{{id}}</title>
-    <use :xlink:href="path+'#icon-'+id"></use>
-  </svg>
-</template>
-
-<script>
-export default {
-  name: 'Icon',
-  props: {
-    id: {
-      type: String,
-      required: false,
-      default: 'email'
-    },
-    path: {
-      type: String,
-      required: false,
-      default: '/svg/icons.svg'
-    }
-  }
-}
-</script>
+<template>
+  <svg class="icon">
+    <title>{{id}}</title>
+    <use :xlink:href="path+'#icon-'+id"></use>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'Icon',
+  props: {
+    id: {
+      type: String,
+      required: false,
+      default: 'email'
+    },
+    path: {
+      type: String,
+      required: false,
+      default: '/svg/icons.svg'
+    }
+  }
+}
+</script>

package/src/foundations/Icon/README.md

@@ -1,11 +1,11 @@
-### Usage
-
-```
-<Icon id="email"></Logo>
-```
-
-### Properties
-
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| id | String | property | This property declares which icon to choose from. See icon listing. |
+### Usage
+
+```
+<Icon id="email"></Logo>
+```
+
+### Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| id | String | property | This property declares which icon to choose from. See icon listing. |

package/src/foundations/Logo/Logo.spec.js

@@ -0,0 +1,56 @@
+import { shallowMount } from '@vue/test-utils'
+import Logo from './Logo.vue'
+
+describe('Logo component', () => {
+  it('renders the iam property logo by default', () => {
+    const test = shallowMount(Logo, {
+      propsData: { }
+    })
+
+    expect(test.html()).toContain('<title>iam property</title>')
+    expect(test.html()).toContain('<use xlink:href="/svg/logo.svg#logo-property"></use>')
+  })
+
+  it('renders the correct logo when an ID is passed', () => {
+    const test = shallowMount(Logo, {
+      propsData: {
+        id: 'sold'
+      }
+    })
+
+    expect(test.html()).toContain('<title>iam sold</title>')
+    expect(test.html()).toContain('<use xlink:href="/svg/logo.svg#logo-sold"></use>')
+  })
+
+  it('renders a description when passed', () => {
+    const test = shallowMount(Logo, {
+      propsData: { }
+    })
+
+    expect(test.html()).not.toContain('<span></span>')
+
+    const test2 = shallowMount(Logo, {
+      propsData: {
+        desc: 'description'
+      }
+    })
+
+    expect(test2.html()).toContain('<span>description</span>')
+  })
+
+  it('background can be modified', () => {
+    const test = shallowMount(Logo, {
+      propsData: { }
+    })
+
+    expect(test.html()).not.toContain('<span></span>')
+
+    const test2 = shallowMount(Logo, {
+      propsData: {
+        desc: 'description'
+      }
+    })
+
+    expect(test2.html()).toContain('<span>description</span>')
+  })
+})