@iamproperty/components 2.7.9 → 3.0.0

package/src/components/Chart/Chart.vue

@@ -1,88 +1,88 @@
-<template>
-  <div class="container" ref="wrapper">
-    <slot></slot>
-    <figure class="chart__wrapper" ref="chartWrapper">
-      <figcaption v-html="caption"></figcaption>
-    <div :class="`chart__key chart__key--${type} h5`" role="presentation">
-      <div :key="index" v-for="(item,index) in fields" class="key">{{item.key}}</div>
-    </div>
-
-    <div :class="`chart chart--${type}`" ref="chart">
-      
-      <div class="chart__yaxis" role="presentation">
-        <div :key="index" v-for="(point,index) in yaxis" :style="`--value: ${point.value};--percent:${((point.value-min)/(max-min))*100}%;`" class="axis__point">
-          <span>{{point.display}}</span>
-        </div>
-      </div>
-      <Table v-bind="$props">
-
-        <div class="chart__guidelines" role="presentation">
-          <div :key="index" v-for="(point,index) in yaxis" :data-value="point.value" :style="`--percent:${((point.value-min)/(max-min))*100}%;`" class="guideline">
-          </div>
-        </div>
-        <span class="lines" v-if="type == 'line'"></span>
-      </Table>
-      <div class="pies" v-if="type == 'pie'"></div>
-    </div>
-    </figure>
-  </div>
-</template>
-
-<style lang="scss">
-@import "../../../assets/sass/components/charts.scss";
-</style>
-
-<script>
-import { ucfirst, unsnake } from '../../helpers/strings'
-import Table from '@/elements/Table/Table.vue'
-import chartModule from '../../../assets/js/modules/chart.js'
-
-export default {
-  name: 'Chart',  
-  components: {
-    Table
-  },
-  props: {
-    type: {
-      type: String,
-      required: false,
-      default: 'bar'
-    },
-    caption: {
-      type: String,
-      required: false
-    },
-    max: {
-      type: Number,
-      required: true
-    },
-    min: {
-      type: Number,
-      required: false,
-      default: 0
-    },
-    yaxis: {
-      type: Array,
-      required: false
-    },
-    items: {
-      type: Array,
-      required: true
-    },
-    fields: {
-      type: Array,
-      required: true
-    }
-  },
-  mounted(){
-    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
-      const min = this.min;
-      const max = this.max - min;
-
-      chartModule(this.$refs.chartWrapper, min, max, this.type);
-    })
-  }
-}
-</script>
+<template>
+  <div class="container" ref="wrapper">
+    <slot></slot>
+    <figure class="chart__wrapper" ref="chartWrapper">
+      <figcaption v-html="caption"></figcaption>
+    <div :class="`chart__key chart__key--${type} h5`" role="presentation">
+      <div :key="index" v-for="(item,index) in fields" class="key">{{item.key}}</div>
+    </div>
+
+    <div :class="`chart chart--${type}`" ref="chart">
+
+      <div class="chart__yaxis" role="presentation">
+        <div :key="index" v-for="(point,index) in yaxis" :style="`--value: ${point.value};--percent:${((point.value-min)/(max-min))*100}%;`" class="axis__point">
+          <span>{{point.display}}</span>
+        </div>
+      </div>
+      <Table v-bind="$props">
+
+        <div class="chart__guidelines" role="presentation">
+          <div :key="index" v-for="(point,index) in yaxis" :data-value="point.value" :style="`--percent:${((point.value-min)/(max-min))*100}%;`" class="guideline">
+          </div>
+        </div>
+        <span class="lines" v-if="type == 'line'"></span>
+      </Table>
+      <div class="pies" v-if="type == 'pie'"></div>
+    </div>
+    </figure>
+  </div>
+</template>
+
+<style lang="scss">
+@import "../../../assets/sass/components/charts.scss";
+</style>
+
+<script>
+import { ucfirst, unsnake } from '../../helpers/strings'
+import Table from '../../elements/Table/Table.vue'
+import chartModule from '../../../assets/js/modules/chart.js'
+
+export default {
+  name: 'Chart',
+  components: {
+    Table
+  },
+  props: {
+    type: {
+      type: String,
+      required: false,
+      default: 'bar'
+    },
+    caption: {
+      type: String,
+      required: false
+    },
+    max: {
+      type: Number,
+      required: true
+    },
+    min: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    yaxis: {
+      type: Array,
+      required: false
+    },
+    items: {
+      type: Array,
+      required: true
+    },
+    fields: {
+      type: Array,
+      required: true
+    }
+  },
+  mounted(){
+    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
+      const min = this.min;
+      const max = this.max - min;
+
+      chartModule(this.$refs.chartWrapper, min, max, this.type);
+    })
+  }
+}
+</script>

package/src/components/Chart/README.md

@@ -1,18 +1,18 @@
-### Usage
-
-```
-<Chart :max="100" :min="0" :fields="fields" :items="items" :yaxis="yaxis"></Chart>
-```
-
-###  Properties
-
-**The charts props inherit the table props** - As charts are an extension of the tables.
-
-
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| type  | String | bar | Changes the type of chart shown (bar, line or pie) or by passing none a table is shown. |
-| caption  | String | - | Optional but recommended for accessibility concerns. Describes and summarizes the chart and the data inside it. |
-| max  | Number | - | Required numeric value to be used to work out the size/position of the chart elements. |
-| min  | Number | 0 | Optional (deaults to 0) numeric value to be used to work out the size/position of the chart elements. |
+### Usage
+
+```
+<Chart :max="100" :min="0" :fields="fields" :items="items" :yaxis="yaxis"></Chart>
+```
+
+###  Properties
+
+**The charts props inherit the table props** - As charts are an extension of the tables.
+
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| type  | String | bar | Changes the type of chart shown (bar, line or pie) or by passing none a table is shown. |
+| caption  | String | - | Optional but recommended for accessibility concerns. Describes and summarizes the chart and the data inside it. |
+| max  | Number | - | Required numeric value to be used to work out the size/position of the chart elements. |
+| min  | Number | 0 | Optional (deaults to 0) numeric value to be used to work out the size/position of the chart elements. |
 | yaxis  | Array | - | Array of labels to be shown along the y-axis |

package/src/components/Drawer/Drawer.vue

@@ -1,53 +1,53 @@
-<template>
-  <div ref="wrapper">
-    <input type="checkbox" name="showDrawer" id="showDrawer" class="d-none">
-      <div class="drawer__btn pb-0">
-        <div class="container text-end pb-0">
-          <label for="showDrawer" class="btn btn-secondary me-0">{{label}}</label>
-        </div>
-      </div>
-      <div class="drawer" id="drawer" ref="drawer">
-        <div class="container text-end pb-0">
-          <label for="showDrawer" class="btn btn-tertiary mb-0 me-0 py-1 px-2"><span class="visually-hidden">Close</span>&#x2715;</label>
-        </div>
-        <slot></slot>
-      </div>
-      <hr id="drawer-end" />
-  </div>
-</template>
-
-
-<style lang="scss">
-@import "../../../assets/sass/components/drawer.scss";
-</style>
-
-<script>
-import drawer from '../../../assets/js/modules/drawer.js'
-
-export default {
-  name: 'Header',
-  props: {
-    label: {
-      type: String,
-      required: true
-    }
-  },
-  mounted(){
-
-    this.$nextTick(function () {
-      
-      let element = this.$refs.wrapper;
-      
-      const fragment = document.createDocumentFragment();
-      Array.from(element.childNodes).forEach(child => fragment.appendChild(child));
-      element.parentNode.insertBefore(fragment, element);
-      element.parentNode.removeChild(element);
-    
-      this.$nextTick(function () {
-        
-        drawer(this.$refs.drawer);
-      })
-    })
-  },
-}
-</script>
+<template>
+  <div ref="wrapper">
+    <input type="checkbox" name="showDrawer" id="showDrawer" class="d-none">
+      <div class="drawer__btn pb-0">
+        <div class="container text-end pb-0">
+          <label for="showDrawer" class="btn btn-secondary me-0">{{label}}</label>
+        </div>
+      </div>
+      <div class="drawer" id="drawer" ref="drawer">
+        <div class="container text-end pb-0">
+          <label for="showDrawer" class="btn btn-tertiary mb-0 me-0 py-1 px-2"><span class="visually-hidden">Close</span>&#x2715;</label>
+        </div>
+        <slot></slot>
+      </div>
+      <hr id="drawer-end" />
+  </div>
+</template>
+
+
+<style lang="scss">
+@import "../../../assets/sass/components/drawer.scss";
+</style>
+
+<script>
+import drawer from '../../../assets/js/modules/drawer.js'
+
+export default {
+  name: 'Header',
+  props: {
+    label: {
+      type: String,
+      required: true
+    }
+  },
+  mounted(){
+
+    this.$nextTick(function () {
+      
+      let element = this.$refs.wrapper;
+      
+      const fragment = document.createDocumentFragment();
+      Array.from(element.childNodes).forEach(child => fragment.appendChild(child));
+      element.parentNode.insertBefore(fragment, element);
+      element.parentNode.removeChild(element);
+    
+      this.$nextTick(function () {
+        
+        drawer(this.$refs.drawer);
+      })
+    })
+  },
+}
+</script>

package/src/components/Drawer/README.md

@@ -1,23 +1,23 @@
-### Usage
-
-```
-<Drawer label="Open drawer">
-  <div class="container">
-    <h2>Drawer contentent</h2>
-  </div>
-</Drawer>
-```
-
-### Properties
-
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| label | String | - | Required text for the button |
-
-
-
-### Slots
-
-| Option | Default Value | Description |
-| ------ | ------------- | ----------- |
+### Usage
+
+```
+<Drawer label="Open drawer">
+  <div class="container">
+    <h2>Drawer contentent</h2>
+  </div>
+</Drawer>
+```
+
+### Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| label | String | - | Required text for the button |
+
+
+
+### Slots
+
+| Option | Default Value | Description |
+| ------ | ------------- | ----------- |
 | default | - | Will display within the drawer |

package/src/components/Header/Header.spec.js

@@ -0,0 +1,33 @@
+import { shallowMount } from '@vue/test-utils'
+import Header from './Header.vue'
+
+describe('Header component', () => {
+
+  const test = shallowMount(Header, {
+    propsData: {
+      title: 'Page title',
+      image: '/img/src/img.png'
+    },
+    slots: {
+      default: '<p>Hello</p>',
+      breadcrumb: '<ul class="breadcrumb"></ul>'
+    }
+  })
+
+  it('renders the page title', () => {
+    expect(test.html()).toContain('<h1>Page title</h1>')
+  })
+
+  it('renders the page description', () => {
+    expect(test.html()).toContain('<p>Hello</p>')
+  })
+
+  it('renders the breadcrumb trail', () => {
+    expect(test.html()).toContain('<ul class="breadcrumb"></ul>')
+  })
+
+  it('renders the image', () => {
+    expect(test.html()).toContain('<source srcset="/img/src/img.png" media="(min-width: 62em)">')
+    expect(test.html()).toContain('<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="">')
+  })
+})

package/src/components/Header/Header.vue

@@ -1,38 +1,38 @@
-<template>
-  <header class="header-banner">
-    <div class="container">
-      <!-- Space for a breadcrumb trail -->
-      <slot name="breadcrumb"></slot>
-      <div class="header-banner__inner">
-        <h1 v-html="title"></h1>
-        <slot></slot>
-      </div>
-    </div>
-    <picture v-if="image">
-      <!-- Actual image only loaded on desktops -->
-      <source :srcset="image" media="(min-width: 62em)">
-      <!-- Placeholder image -->
-      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" />
-    </picture>
-  </header>
-</template>
-
-<style lang="scss">
-@import "../../../assets/sass/components/header.scss";
-</style>
-
-<script>
-export default {
-  name: 'Header',
-  props: {
-    title: {
-      type: String,
-      required: true
-    },
-    image: {
-      type: String,
-      required: false
-    }
-  }
-}
-</script>
+<template>
+  <header class="header-banner">
+    <div class="container">
+      <!-- Space for a breadcrumb trail -->
+      <slot name="breadcrumb"></slot>
+      <div class="header-banner__inner">
+        <h1 v-html="title"></h1>
+        <slot></slot>
+      </div>
+    </div>
+    <picture v-if="image">
+      <!-- Actual image only loaded on desktops -->
+      <source :srcset="image" media="(min-width: 62em)">
+      <!-- Placeholder image -->
+      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" />
+    </picture>
+  </header>
+</template>
+
+<style lang="scss">
+@import "../../../assets/sass/components/header.scss";
+</style>
+
+<script>
+export default {
+  name: 'Header',
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    image: {
+      type: String,
+      required: false
+    }
+  }
+}
+</script>

package/src/components/Header/README.md

@@ -1,28 +1,28 @@
-### Usage
-
-```
-<Header title="Page title" :image="require('../../assets/code.jpeg')">
-  <template v-slot:breadcrumb>
-    <ul class="breadcrumb">
-      <li><a href="/">Home</a></li>
-      <li><a href="/top">Top level</a></li>
-    </ul>
-  </template>
-  <p>Page description</p>
-</Header>
-```
-
-### Properties
-
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| title | String | - | Required |
-| image | String | - | Optional image url to display in the background |
-
-
-### Slots
-
-| Option | Default Value | Description |
-| ------ | ------------- | ----------- |
-| default | - | Will display underneath the heading inside of the white box |
+### Usage
+
+```
+<Header title="Page title" :image="require('../../assets/code.jpeg')">
+  <template v-slot:breadcrumb>
+    <ul class="breadcrumb">
+      <li><a href="/">Home</a></li>
+      <li><a href="/top">Top level</a></li>
+    </ul>
+  </template>
+  <p>Page description</p>
+</Header>
+```
+
+### Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| title | String | - | Required |
+| image | String | - | Optional image url to display in the background |
+
+
+### Slots
+
+| Option | Default Value | Description |
+| ------ | ------------- | ----------- |
+| default | - | Will display underneath the heading inside of the white box |
 | breadcrumb | - | An optional space to add a breadcrumb trail list. |

package/src/components/Modal/Modal.spec.js

@@ -0,0 +1,22 @@
+import { shallowMount } from '@vue/test-utils'
+import Modal from './Modal.vue'
+
+describe('Modal component', () => {
+
+  const test = shallowMount(Modal, {
+    propsData: {
+      id: 'modal'
+    },
+    slots: {
+      default: '<p>Hello</p>'
+    }
+  })
+
+  it('renders the close button', () => {
+    expect(test.html()).toContain('<a href="#close" class="btn btn-tertiary py-1 px-2"><span class="visually-hidden">Close</span>✕</a>')
+  })
+
+  it('renders the modal content', () => {
+    expect(test.html()).toContain('<p>Hello</p>')
+  })
+})

package/src/components/Modal/Modal.vue

@@ -1,43 +1,43 @@
-<template>
-  <div class="modal" :id="id" role="dialog" modal="true" ref="modal">
-    <a :href="`#${returnid?returnid:''}`" tabindex="-1"><span class="visually-hidden">Close</span></a>
-    <div class="modal__outer">
-      <a :href="`#${returnid?returnid:''}`" class="btn btn-tertiary py-1 px-2"><span class="visually-hidden">Close</span>✕</a>
-      <div class="modal__inner">
-        <slot></slot>
-      </div>
-    </div>
-    <button class="modal__dock--left btn btn-prev" tabindex="-1">Left</button>
-    <button class="modal__dock--right btn btn-next" tabindex="-1">Right</button>
-  </div>
-</template>
-
-<style lang="scss">
-@import "../../../assets/sass/components/modal.scss";
-</style>
-
-<script>
-import modal from '../../../assets/js/modules/modal.js'
-
-export default {
-  name: 'Modal',
-  props: {
-    id: {
-      type: String,
-      required: true
-    },
-    returnid: {
-      type: String,
-      default: 'close',
-      required: false
-    }
-  },
-  mounted(){
-
-    this.$nextTick(function () {
-      
-      modal(this.$refs.modal);
-    })
-  }
-}
-</script>
+<template>
+  <div class="modal" :id="id" role="dialog" modal="true" ref="modal">
+    <a :href="`#${returnid?returnid:''}`" tabindex="-1"><span class="visually-hidden">Close</span></a>
+    <div class="modal__outer">
+      <a :href="`#${returnid?returnid:''}`" class="btn btn-tertiary py-1 px-2"><span class="visually-hidden">Close</span>✕</a>
+      <div class="modal__inner">
+        <slot></slot>
+      </div>
+    </div>
+    <button class="modal__dock--left btn btn-prev" tabindex="-1">Left</button>
+    <button class="modal__dock--right btn btn-next" tabindex="-1">Right</button>
+  </div>
+</template>
+
+<style lang="scss">
+@import "../../../assets/sass/components/modal.scss";
+</style>
+
+<script>
+import modal from '../../../assets/js/modules/modal.js'
+
+export default {
+  name: 'Modal',
+  props: {
+    id: {
+      type: String,
+      required: true
+    },
+    returnid: {
+      type: String,
+      default: 'close',
+      required: false
+    }
+  },
+  mounted(){
+
+    this.$nextTick(function () {
+      
+      modal(this.$refs.modal);
+    })
+  }
+}
+</script>