@iamproperty/components 2.7.9 → 3.0.0

package/src/components/CardDeck/CardDeck.vue

@@ -1,77 +1,77 @@
-<template>
-  <div class="container card-deck prevent-invert" :data-card-type="cardtype">
-      <slot></slot>
-      <div :class="`row row-cols-${cols} row-cols-sm-${smcols} row-cols-md-${mdcols} ${gap ? `g-${gap}`: ``}`">
-        <div class="col" v-for="(value,index) in items" :key="index">
-          <Card v-bind="value" :class="cardclass" :type="cardtype" :btntype="btntype" :titleclass="titleclass" :ctatext="ctatext" :hidectatext="hidectatext"></Card>
-        </div>
-      </div>
-      <slot name="after"></slot>
-  </div>
-</template>
-
-<style lang="scss">
-@import "../../../assets/sass/components/cardDeck.scss";
-</style>
-
-<script>
-import Card from '../../elements/Card/Card.vue'
-
-export default {
-  components: {
-    Card
-  },
-  name: 'CardDeck',
-  props: {
-    items: {
-      type: Array,
-      required: false
-    },
-    cols: {
-      type: Number,
-      required: false,
-      default: 1
-    },
-    smcols: {
-      type: Number,
-      required: false,
-      default: 1
-    },
-    mdcols: {
-      type: Number,
-      required: false,
-      default: 3
-    },
-    gap: {
-      type: Number,
-      required: false,
-      default: 4
-    },
-    cardtype: {
-      type: String,
-      required: false
-    },
-    cardclass: {
-      type: String,
-      required: false
-    },
-    btntype: {
-      type: String,
-      required: false
-    },
-    titleclass: {
-      type: String,
-      required: false
-    },
-    ctatext: {
-      type: String,
-      required: false
-    },
-    hidectatext: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  }
-}
-</script>
+<template>
+  <div class="container card-deck prevent-invert" :data-card-type="cardtype">
+      <slot></slot>
+      <div :class="`row row-cols-${cols} row-cols-sm-${smcols} row-cols-md-${mdcols} ${gap ? `g-${gap}`: ``}`">
+        <div class="col" v-for="(value,index) in items" :key="index">
+          <Card v-bind="value" :class="cardclass" :type="cardtype" :btntype="btntype" :titleclass="titleclass" :ctatext="ctatext" :hidectatext="hidectatext"></Card>
+        </div>
+      </div>
+      <slot name="after"></slot>
+  </div>
+</template>
+
+<style lang="scss">
+@import "../../../assets/sass/components/cardDeck.scss";
+</style>
+
+<script>
+import Card from '../../elements/Card/Card.vue'
+
+export default {
+  components: {
+    Card
+  },
+  name: 'CardDeck',
+  props: {
+    items: {
+      type: Array,
+      required: false
+    },
+    cols: {
+      type: Number,
+      required: false,
+      default: 1
+    },
+    smcols: {
+      type: Number,
+      required: false,
+      default: 1
+    },
+    mdcols: {
+      type: Number,
+      required: false,
+      default: 3
+    },
+    gap: {
+      type: Number,
+      required: false,
+      default: 4
+    },
+    cardtype: {
+      type: String,
+      required: false
+    },
+    cardclass: {
+      type: String,
+      required: false
+    },
+    btntype: {
+      type: String,
+      required: false
+    },
+    titleclass: {
+      type: String,
+      required: false
+    },
+    ctatext: {
+      type: String,
+      required: false
+    },
+    hidectatext: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  }
+}
+</script>

package/src/components/CardDeck/README.md

@@ -1,25 +1,25 @@
-### Usage
-
-```
-<CardDeck :items="items"></CardDeck>
-```
-
-### Properties
-
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| cols  | Number | 1 | Number of columns on mobile |
-| smcols  | Number | 1 | Number of columns on tablet |
-| mdcols  | Number | 3 | Number of columns on desktop |
-| items  | Array | - | Card data passed (See card component) |
-| cardtype | String | - | Change the type of card (simple,quick) |
-| btntype | String | (See card) | Change the type of button at the bottom of the card (primary,secondary,tertairy, link) |
-| ctatext | String | (See card) | Update the cta text within the button at the bottom of the card |
-| titleclass | String | (See card) | Update the class of the title from being a h2 |
-
-### Slots
-
-| Option | Default Value | Description |
-| ------ | ------------- | ----------- |
-| default | - | Will display before the cards |
+### Usage
+
+```
+<CardDeck :items="items"></CardDeck>
+```
+
+### Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| cols  | Number | 1 | Number of columns on mobile |
+| smcols  | Number | 1 | Number of columns on tablet |
+| mdcols  | Number | 3 | Number of columns on desktop |
+| items  | Array | - | Card data passed (See card component) |
+| cardtype | String | - | Change the type of card (simple,quick) |
+| btntype | String | (See card) | Change the type of button at the bottom of the card (primary,secondary,tertairy, link) |
+| ctatext | String | (See card) | Update the cta text within the button at the bottom of the card |
+| titleclass | String | (See card) | Update the class of the title from being a h2 |
+
+### Slots
+
+| Option | Default Value | Description |
+| ------ | ------------- | ----------- |
+| default | - | Will display before the cards |
 | after | - | Will display underneath the cards |

package/src/components/Carousel/Carousel.spec.js

@@ -0,0 +1,45 @@
+import { mount } from '@vue/test-utils'
+import Carousel from './Carousel.vue'
+
+describe('Carousel component', () => {
+
+  const test = mount(Carousel, {
+    propsData: {
+      items: [
+        {
+          link: '/components/card-deck',
+          title: 'Card 1',
+          content: `<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages..</p>`
+        },
+        {
+          link: '/components/card-deck',
+          title: 'Card 2',
+          content: `<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur, tortor eu faucibus facilisis, felis libero blandit dolor.</p>`
+        },
+        {
+          link: '/components/card-deck',
+          title: 'Card 3',
+          content: `<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur, tortor eu faucibus facilisis, felis libero blandit dolor.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur.</p>`
+        }
+      ]
+    },
+    slots: {
+      default: '<p>Hello</p>'
+    }
+  })
+
+  it('renders the content before the carousel', () => {
+    expect(test.html()).toContain('<p>Hello</p>')
+  })
+
+
+  it('renders the correct number of columns', () => {
+
+    expect(test.findAll('.col').length).toBe(3)
+  })
+
+  it('renders the correct number of pips', () => {
+
+    expect(test.findAll('.carousel__controls a').length).toBe(3)
+  })
+})

package/src/components/Carousel/Carousel.vue

@@ -1,85 +1,85 @@
-<template>
-  <div class="container carousel" :id="'carousel'+id" ref="wrapper" :data-cols="cols" :data-sm-cols="smcols" :data-md-cols="mdcols">
-    <slot><!-- Use for titles etc --></slot>
-    <div class="carousel__wrapper">
-      <div class="carousel__inner">
-
-        <div v-if="type == 'card'" :class="`row row-cols-${cols} row-cols-sm-${smcols} row-cols-md-${mdcols} ${gap ? `g-${gap}`: ``}`">
-          <div :class="`col carousel__item${colclass?` ${colclass}`:''}`" v-for="(value,index) in items" :key="index" :id="'carousel'+id+'slide'+(index+1)">
-            <Card v-bind="value" :class="cardclass" :type="cardtype" :btnyype="btntype" :titleclass="titleclass" :ctatext="ctatext" :hidectatext="hidectatext"></Card>
-          </div>
-        </div>
-        <div v-if="type != 'card'" :class="`row row-cols-${cols} row-cols-sm-${smcols} row-cols-md-${mdcols} ${gap ? `g-${gap}`: ``}`">
-          <div :class="`col carousel__item${colclass?` ${colclass}`:''}`" v-for="(value,index) in items" :key="index" v-html="content(value)" :id="'carousel'+id+'slide'+(index+1)"></div>
-        </div>
-        
-      </div>
-
-      <div :class="`carousel__controls cols-${cols} cols-sm-${smcols} cols-md-${mdcols}`">
-        <a v-for="(value,index) in items" :key="index" :href="'\#carousel'+id+'slide'+(index+1)" :class="`control-${index+1}`">Slide {{index+1}}</a>
-      </div>
-      <button class="btn btn-prev" data-go="0" disabled>Prev</button>
-      <button class="btn btn-next" data-go="2">Next</button>
-    </div>
-  </div>
-</template>
-
-
-<style lang="scss">
-@import "../../../assets/sass/components/carousel.scss";
-</style>
-
-
-<script>
-import Card from '../../elements/Card/Card.vue'
-import CardDeck from '../CardDeck/CardDeck.vue'
-import carousel from '../../../assets/js/modules/carousel.js'
-
-// Inherit the card deck props
-let cardDeckProps = CardDeck.props;
-// Update the default values
-cardDeckProps.gap.default = 0
-cardDeckProps.cols.default = 1
-cardDeckProps.smcols.default = 2
-cardDeckProps.mdcols.default = 4
-
-
-export default {
-  components: {
-    Card
-  },
-  name: 'Carousel',
-  data () {
-    return {
-      id: null
-    }
-  },
-  props: {
-    ...cardDeckProps,
-    colclass: {
-      type: String,
-      required: false
-    },
-    type: {
-      type: String,
-      required: false
-    }
-  },
-  computed: {
-    content (){
-      return (value) => {
-        return `${value.image ? `<img src="${value.image}" alt="" />` : ''}${value.content?value.content:''}`;
-      }
-    }
-  },
-  mounted(){
-
-    this.id = this._uid
-
-    this.$nextTick(function () {
-      
-      carousel(this.$refs.wrapper);
-    })
-  }
-}
-</script>
+<template>
+  <div class="container carousel" :id="'carousel'+id" ref="wrapper" :data-cols="cols" :data-sm-cols="smcols" :data-md-cols="mdcols">
+    <slot><!-- Use for titles etc --></slot>
+    <div class="carousel__wrapper">
+      <div class="carousel__inner">
+
+        <div v-if="type == 'card'" :class="`row row-cols-${cols} row-cols-sm-${smcols} row-cols-md-${mdcols} ${gap ? `g-${gap}`: ``}`">
+          <div :class="`col carousel__item${colclass?` ${colclass}`:''}`" v-for="(value,index) in items" :key="index" :id="'carousel'+id+'slide'+(index+1)">
+            <Card v-bind="value" :class="cardclass" :type="cardtype" :btnyype="btntype" :titleclass="titleclass" :ctatext="ctatext" :hidectatext="hidectatext"></Card>
+          </div>
+        </div>
+        <div v-if="type != 'card'" :class="`row row-cols-${cols} row-cols-sm-${smcols} row-cols-md-${mdcols} ${gap ? `g-${gap}`: ``}`">
+          <div :class="`col carousel__item${colclass?` ${colclass}`:''}`" v-for="(value,index) in items" :key="index" v-html="content(value)" :id="'carousel'+id+'slide'+(index+1)"></div>
+        </div>
+        
+      </div>
+
+      <div :class="`carousel__controls cols-${cols} cols-sm-${smcols} cols-md-${mdcols}`">
+        <a v-for="(value,index) in items" :key="index" :href="'\#carousel'+id+'slide'+(index+1)" :class="`control-${index+1}`">Slide {{index+1}}</a>
+      </div>
+      <button class="btn btn-prev" data-go="0" disabled>Prev</button>
+      <button class="btn btn-next" data-go="2">Next</button>
+    </div>
+  </div>
+</template>
+
+
+<style lang="scss">
+@import "../../../assets/sass/components/carousel.scss";
+</style>
+
+
+<script>
+import Card from '../../elements/Card/Card.vue'
+import CardDeck from '../CardDeck/CardDeck.vue'
+import carousel from '../../../assets/js/modules/carousel.js'
+
+// Inherit the card deck props
+let cardDeckProps = CardDeck.props;
+// Update the default values
+cardDeckProps.gap.default = 0
+cardDeckProps.cols.default = 1
+cardDeckProps.smcols.default = 2
+cardDeckProps.mdcols.default = 4
+
+
+export default {
+  components: {
+    Card
+  },
+  name: 'Carousel',
+  data () {
+    return {
+      id: null
+    }
+  },
+  props: {
+    ...cardDeckProps,
+    colclass: {
+      type: String,
+      required: false
+    },
+    type: {
+      type: String,
+      required: false
+    }
+  },
+  computed: {
+    content (){
+      return (value) => {
+        return `${value.image ? `<img src="${value.image}" alt="" />` : ''}${value.content?value.content:''}`;
+      }
+    }
+  },
+  mounted(){
+
+    this.id = this._uid
+
+    this.$nextTick(function () {
+      
+      carousel(this.$refs.wrapper);
+    })
+  }
+}
+</script>

package/src/components/Carousel/README.md

@@ -1,20 +1,20 @@
-### Usage
-
-```
-<Carousel :items="items" type="card"></Carousel>
-```
-
-### Properties
-
-**The carousel props inherit the card deck props** - this is so that when we use cards in the carousel we can still pass the same options.
-
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| type  | String | - | Can be used to indicate that cards should be displayed in the carousel by giving the value 'card'  |
-| colclass  | String | - | Pass utility classes to the columns in the carousel. For example 'd-flex align-items-center' will align the items n the middle. |
-
-### Slots
-
-| Option | Default Value | Description |
-| ------ | ------------- | ----------- |
+### Usage
+
+```
+<Carousel :items="items" type="card"></Carousel>
+```
+
+### Properties
+
+**The carousel props inherit the card deck props** - this is so that when we use cards in the carousel we can still pass the same options.
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| type  | String | - | Can be used to indicate that cards should be displayed in the carousel by giving the value 'card'  |
+| colclass  | String | - | Pass utility classes to the columns in the carousel. For example 'd-flex align-items-center' will align the items n the middle. |
+
+### Slots
+
+| Option | Default Value | Description |
+| ------ | ------------- | ----------- |
 | default | - | Will display before the carousel |

package/src/components/Chart/Chart.spec.js

@@ -0,0 +1,201 @@
+import { mount } from '@vue/test-utils'
+import Chart from './Chart.vue'
+
+describe('Chart component', () => {
+
+  const test = mount(Chart, {
+    propsData: {
+      max: 100,
+      min: 0,
+      yaxis: [
+        {
+          value: 0,
+          display: '£0'
+        },
+        {
+          value: 50,
+          display: '£50'
+        },
+        {
+          value: 100,
+          display: '£100'
+        }
+      ],
+      fields: [
+        { key: 'year' },
+        { key: 'Growth' },
+        { key: 'Growth2' }
+      ],
+      items: [
+        {
+          year: '2011',
+          growth: '£50.0',
+          growth2: '£50.10'
+        },
+        {
+          year: '2012',
+          growth: '£75.00',
+          growth2: '£50.10'
+        },
+        {
+          year: '2013',
+          growth: '£45.00',
+          growth2: '£57.10'
+        },
+        {
+          year: '2014',
+          growth: '£35.00',
+          growth2: '£80.10'
+        }
+      ]
+    }
+  })
+
+  // On load render a table
+  it('renders a thead', () => {
+
+    expect(test.find('thead').exists()).toBe(true)
+  })
+
+  it('renders a tbody', () => {
+
+    expect(test.find('tbody').exists()).toBe(true)
+  })
+
+  // Render a bar chart
+  it('renders a y-axis', () => {
+
+    expect(test.find('.chart__yaxis').exists()).toBe(true)
+  })
+
+  it('renders guidelines', () => {
+
+    expect(test.find('.chart__guidelines').exists()).toBe(true)
+  })
+
+
+  it('Numeric value and percent value is added to the table cells', () => {
+
+    expect(test.html()).toContain('<td data-label="Growth" data-numeric="50" style="--bottom:0%;--percent:50%;"><span data-group="2011" data-label="Growth">£50.0</span></td>')
+  })
+
+})
+
+
+describe('Line Chart component', () => {
+
+  const test = mount(Chart, {
+    propsData: {
+      type: 'line',
+      max: 100,
+      min: 0,
+      yaxis: [
+        {
+          value: 0,
+          display: '£0'
+        },
+        {
+          value: 50,
+          display: '£50'
+        },
+        {
+          value: 100,
+          display: '£100'
+        }
+      ],
+      fields: [
+        { key: 'year' },
+        { key: 'Growth' },
+        { key: 'Growth2' }
+      ],
+      items: [
+        {
+          year: '2011',
+          growth: '£50.0',
+          growth2: '£50.10'
+        },
+        {
+          year: '2012',
+          growth: '£75.00',
+          growth2: '£50.10'
+        },
+        {
+          year: '2013',
+          growth: '£45.00',
+          growth2: '£57.10'
+        },
+        {
+          year: '2014',
+          growth: '£35.00',
+          growth2: '£80.10'
+        }
+      ]
+    }
+  })
+
+  it('SVG line is created ', () => {
+
+    expect(test.html()).toContain('<path fill="none" d="M 0 50 L 66.66666666666667 25 L 133.33333333333334 55 L 200 65 "></path>')
+  })
+
+
+})
+
+describe('Pie Chart component', () => {
+
+  const test = mount(Chart, {
+    propsData: {
+      type: 'pie',
+      max: 100,
+      min: 0,
+      yaxis: [
+        {
+          value: 0,
+          display: '£0'
+        },
+        {
+          value: 50,
+          display: '£50'
+        },
+        {
+          value: 100,
+          display: '£100'
+        }
+      ],
+      fields: [
+        { key: 'year' },
+        { key: 'Growth' },
+        { key: 'Growth2' }
+      ],
+      items: [
+        {
+          year: '2011',
+          growth: '£50.0',
+          growth2: '£50.10'
+        },
+        {
+          year: '2012',
+          growth: '£75.00',
+          growth2: '£50.10'
+        },
+        {
+          year: '2013',
+          growth: '£45.00',
+          growth2: '£57.10'
+        },
+        {
+          year: '2014',
+          growth: '£35.00',
+          growth2: '£80.10'
+        }
+      ]
+    }
+  })
+
+  it('SVG pie section is created ', () => {
+
+    expect(test.html()).toContain('<path d="M -100 1.2246467991473532e-14 A 100 100 0 0 1 100 -2.4492935982947064e-14 L 0 0"></path>')
+  })
+
+
+})