@iamproperty/components 3.0.0 → 3.2.0

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

@@ -1,201 +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>')
-  })
-
-
-})
+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>')
+  })
+
+
+})