@iamproperty/components 2.0.1 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iamproperty/components",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "private": false,
   "description": "Component library for iamproperty",
   "author": {
@@ -26,58 +26,61 @@
   "main": "dist/components.umd.js",
   "dependencies": {
     "@vue/eslint-config-standard": "^6.1.0",
-    "bootstrap": "^5.1.0",
-    "glob": "^7.1.7",
-    "sass": "^1.37.5",
+    "bootstrap": "^5.1.3",
+    "glob": "^7.2.0",
+    "glob-parent": "^6.0.2",
+    "puppeteer-core": "^11.0.0",
+    "sass": "^1.43.4",
     "sass-loader": "^10.2.0",
     "vue": "^2.6.14",
-    "vue-markdown-loader": "^2.4.1",
-    "vue-router": "^3.5.2"
+    "vue-markdown-loader": "^2.5.0",
+    "vue-router": "^3.5.3"
   },
   "devDependencies": {
-    "@babel/cli": "^7.14.5",
-    "@babel/core": "^7.14.8",
-    "@babel/eslint-parser": "^7.14.9",
-    "@babel/preset-env": "^7.14.7",
-    "@popperjs/core": "^2.9.2",
+    "@babel/cli": "^7.16.0",
+    "@babel/core": "^7.16.0",
+    "@babel/eslint-parser": "^7.16.3",
+    "@babel/preset-env": "^7.16.4",
+    "@popperjs/core": "^2.10.2",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^19.0.0",
-    "@rollup/plugin-node-resolve": "^13.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.6",
     "@rollup/plugin-replace": "^2.4.2",
-    "@vue/cli-plugin-babel": "^4.5.13",
-    "@vue/cli-plugin-eslint": "^4.5.13",
-    "@vue/cli-plugin-router": "^4.5.13",
-    "@vue/cli-plugin-unit-jest": "^4.5.13",
-    "@vue/cli-service": "^4.5.13",
-    "@vue/test-utils": "^1.2.2",
-    "babel-jest": "^27.0.6",
+    "@vue/cli-plugin-babel": "^4.5.15",
+    "@vue/cli-plugin-eslint": "^4.5.15",
+    "@vue/cli-plugin-router": "^4.5.15",
+    "@vue/cli-plugin-unit-jest": "^4.5.15",
+    "@vue/cli-service": "^4.5.15",
+    "@vue/test-utils": "^1.3.0",
+    "babel-jest": "^27.3.1",
     "cross-env": "^7.0.3",
-    "eslint": "^7.32.0",
-    "eslint-plugin-import": "^2.23.4",
+    "eslint": "^8.2.0",
+    "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^5.1.0",
+    "eslint-plugin-promise": "^5.1.1",
     "eslint-plugin-standard": "^4.1.0",
-    "eslint-plugin-vue": "^7.15.1",
-    "html-loader": "^2.1.2",
+    "eslint-plugin-vue": "^7.20.0",
+    "html-loader": "^3.0.1",
     "jest-environment-puppeteer": "^5.0.4",
     "jest-image-snapshot": "^4.5.1",
-    "jest-puppeteer": "^5.0.4",
-    "jest-puppeteer-preset": "^5.0.4",
+    "jest-puppeteer": "^6.0.0",
+    "jest-puppeteer-preset": "^6.0.0",
     "markdown-loader": "^6.0.0",
     "puppeteer": "^10.2.0",
-    "rollup": "^2.52.2",
+    "rollup": "^2.60.0",
     "rollup-plugin-istanbul": "^3.0.0",
     "sass-true": "^6.0.1",
-    "serve": "^12.0.0",
+    "serve": "^13.0.2",
     "terser": "5.1.0",
     "vue-loader": "^15.9.8",
     "vue-svg-loader": "^0.16.0",
-    "vue-template-compiler": "^2.6.14"
+    "vue-template-compiler": "^2.6.14",
+    "webpack": "^4.46.0"
   },
-  "_id": "iamp-component-library@2.0.0",
+  "registry-url": "https://registry.npmjs.com",
   "repository": {
     "type": "git",
-    "url": "git@codebasehq.com:isg/isg-marketplace-intelligent-compliance/iamp-component-library.git"
+    "url": "git://github.com/iamproperty/iamproperty-vue-component-library.git"
   },
   "files": [
     "assets/*",

package/src/components/Accordion/Accordion.vue

@@ -1,11 +1,6 @@
 <template>
   <div class="container accordion" ref="wrapper">
     <slot></slot>
-    <details class="accordion-item" v-for="(value,index) in items" :key="index" :open="value.open" :id="createID(value.summary)">
-      <summary><span class="accordion-header accordion-button h4">{{value.summary}}</span></summary>
-      <div class="accordion-body" v-html="value.detail"></div>
-    </details>
-    <slot name="after"></slot>
   </div>
 </template>
 
@@ -16,26 +11,13 @@
 </style>
 
 <script>
-import { safeID } from '../../helpers/strings'
 import accordion from '../../../assets/js/modules/accordion.js'
 
 export default {
   name: 'Accordion',
   props: {
-    items: {
-      type: Array,
-      required: true
-    },
-  },
-  computed: {
-    createID () {
-      return (summary) => {
-        return `${safeID(summary)}`
-      }
-    }
   },
   mounted(){
-    
     accordion(this.$refs.wrapper);
   }
 }

package/src/components/Accordion/AccordionItem.vue

@@ -0,0 +1,43 @@
+<template>
+
+  <details class="accordion-item" :id="createID(title)">
+    <summary :class="`${titlecolour?`bg-${titlecolour}`:''}`"><span class="accordion-header accordion-button h4">{{title}}<span v-if="badge" :class="`badge bg-${badgecolour}`">{{badge}}</span></span></summary>
+    <div class="accordion-body">
+      <slot></slot>
+    </div>
+  </details>
+</template>
+
+<script>
+import { safeID } from '../../helpers/strings'
+
+export default {
+  name: 'Accordion',
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    titlecolour: {
+      type: String,
+      required: false
+    },
+    badge: {
+      type: String,
+      required: false
+    },
+    badgecolour: {
+      type: String,
+      required: false,
+      default: 'light'
+    }
+  },
+  computed: {
+    createID () {
+      return (summary) => {
+        return `${safeID(summary)}`
+      }
+    }
+  }
+}
+</script>

package/src/components/Accordion/README.md

@@ -1,21 +1,34 @@
 ### Usage
 
 ```
-<Accordion :items="items"></Accordion>
+<Accordion>
+  <AccordionItem title="Question 1">
+    <p>Accordion item content</p>
+  </AccordionItem>
+  <AccordionItem title="Question 2">
+    <p>Accordion item content</p>
+  </AccordionItem>
+</Accordion>
 ```
 
-### Properties
+### Class modifiers
+
+- Adding a class of **.accordion--keep-open** to the accordion will stop the items from closing when another one is opened.
+- Adding a class of **.accordion--straight** to the accordion will remove the slight indentation of the accordion.
+
+
+### Accordion item Properties
 
 | Option | Type | Default Value | Description |
 | ------ | ---- | ------------- | ----------- |
-| items  | Array | - | Table row data passed |
-|  - item.summary | String | - | A question or statement |
-|  - item.detail | HTML | - | An answer to a question or a detailed explanation of a statement.
+| title | String | - | A question or statement |
+| titlecolour | String | - | Apply a colour the the accordion item title |
+| badge | String | - | Add a highlighted badge/tag to the accordion item title |
+| badgecolour | String | light | Apply a colour the badge |
 
 
-### Slots
+### Accordion item Slots
 
 | Option | Default Value | Description |
 | ------ | ------------- | ----------- |
-| default | - | Will display before the accordion items |
-| after | - | Will display after the accordion items |
+| default | - | This is the content of the accordion item |

package/src/components/Card/Card.vue

@@ -1,5 +1,5 @@
 <template>
-  <a :href="link" :class="'card'+(type?' card--'+type:'')" :title="'Find out more: '+title+(subTitle ? ' - '+subTitle:'')">
+  <a :href="link" :class="'card'+(type?' card--'+type:'')" :title="'Find out more: '+title+(subtitle ? ' - '+subtitle:'')">
     <div class="card-header__wrapper" v-if="image">
       <img :src="image" alt="" loading="lazy" class="card-image" />
       <div class="card-header">
@@ -9,8 +9,8 @@
       <img v-if="details && details.logo" :src="details.logo" alt="" loading="lazy" class="card-logo" />
     </div>
     <div class="card-body" v-html="cardContent()"></div>
-    <div class="card-footer" v-if="hideCtaText == false">
-      <span :class="`${btnType == 'link' ? `link` : `btn btn-${btnType}`} mb-0`">{{ctaText}}<span class="visually-hidden"> about {{title}}</span></span>
+    <div class="card-footer" v-if="hidectatext == false">
+      <span :class="`${btntype == 'link' ? `link` : `btn btn-${btntype}`} mb-0`">{{ctatext}}<span class="visually-hidden"> about {{title}}</span></span>
     </div>
   </a>
 </template>
@@ -29,7 +29,7 @@ export default {
       type: String,
       required: false
     },
-    titleClass: {
+    titleclass: {
       type: String,
       required: false,
       default: 'h2'
@@ -38,7 +38,7 @@ export default {
       type: String,
       required: false
     },
-    subTitle: {
+    subtitle: {
       type: String,
       required: false
     },
@@ -50,17 +50,17 @@ export default {
       type: String,
       required: false
     },
-    btnType: {
+    btntype: {
       type: String,
       required: false,
       default: 'secondary'
     },
-    ctaText: {
+    ctatext: {
       type: String,
       required: false,
       default: 'Find out more'
     },
-    hideCtaText: {
+    hidectatext: {
       type: Boolean,
       required: false,
       default: false
@@ -99,12 +99,12 @@ export default {
         }
 
         const tags = this.details && this.details.tags ? this.details.tags.map(tag =>  `<span class="badge rounded-pill py-2 px-3 mb-3 me-2 ${tagClass(tag)}">${tag}</span>` ).join(""): '';
-        const title = this.title ? `<span class="card-title d-block ${this.titleClass}">${this.title}${this.subTitle ? ` <span class="d-block fw-normal font-body text-body small">${this.subTitle}</span>` : ''}</span>` : ``;
+        const title = this.title ? `<span class="card-title d-block ${this.titleclass}">${this.title}${this.subtitle ? ` <span class="d-block fw-normal font-body text-body small">${this.subtitle}</span>` : ''}</span>` : ``;
 
         const details = `
-        ${this.details && this.details.guidePrice ? `<span class="d-block h6 text-dark mb-1">Price guide: ${this.details.guidePrice}</span>` : ``}
-        ${this.details && this.details.auctionTime ? `<span class="d-block h6 text-primary mb-4">Auction time left: ${this.details.auctionTime}</span>` : ``}
-        ${this.details && this.details.readTime ? `<span class="d-block h6 text-primary mb-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="22" height="23" viewBox="0 0 22 23" class="icon ms-0 me-2"><path d="M11 1.63c-5.176 0-9.37 4.194-9.37 9.37 0 5.176 4.194 9.37 9.37 9.37 5.176 0 9.37-4.194 9.37-9.37 0-5.176-4.194-9.37-9.37-9.37M11 0c6.075 0 11 4.925 11 11s-4.925 11-11 11S0 17.075 0 11 4.925 0 11 0" fill="var(--colour-secondary)" /><path d="M9.62 5.39c0-.473.368-.856.82-.856.454 0 .822.383.822.855v6.27l3.25 1.898c.395.23.536.75.314 1.16-.22.412-.72.558-1.115.328l-4.09-2.39V5.39z" fill="var(--colour-primary)"/></svg>${this.details.readTime}</span>` : ``}
+        ${this.details && this.details.guideprice ? `<span class="d-block h6 text-dark mb-1">Price guide: ${this.details.guideprice}</span>` : ``}
+        ${this.details && this.details.auctiontime ? `<span class="d-block h6 text-primary mb-4">Auction time left: ${this.details.auctiontime}</span>` : ``}
+        ${this.details && this.details.readtime ? `<span class="d-block h6 text-primary mb-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="22" height="23" viewBox="0 0 22 23" class="icon ms-0 me-2"><path d="M11 1.63c-5.176 0-9.37 4.194-9.37 9.37 0 5.176 4.194 9.37 9.37 9.37 5.176 0 9.37-4.194 9.37-9.37 0-5.176-4.194-9.37-9.37-9.37M11 0c6.075 0 11 4.925 11 11s-4.925 11-11 11S0 17.075 0 11 4.925 0 11 0" fill="var(--colour-secondary)" /><path d="M9.62 5.39c0-.473.368-.856.82-.856.454 0 .822.383.822.855v6.27l3.25 1.898c.395.23.536.75.314 1.16-.22.412-.72.558-1.115.328l-4.09-2.39V5.39z" fill="var(--colour-primary)"/></svg>${this.details.readtime}</span>` : ``}
         `;
 
         return `${tags}${title}${details}${this.content}`;

package/src/components/Card/README.md

@@ -9,16 +9,16 @@
 | Option | Type | Default Value | Description |
 | ------ | ---- | ------------- | ----------- |
 | title | String | - | Used for the card heading |
-| titleClass | String | h2 | Update the class of the title from being a h2 |
-| subTitle | String | - | Optional sub heading |
+| titleclass | String | h2 | Update the class of the title from being a h2 |
+| subtitle | String | - | Optional sub heading |
 | content | HTML | - | Card content |
 | link | String | - | Card link |
 | type | String | - | Change the type of card (simple,quick)|
-| btnType | String | secondary | Change the type of button at the bottom of the card (primary,secondary,tertairy, link) |
-| ctaText | String | Find out more | Update the cta text within the button at the bottom of the card |
+| btntype | String | secondary | Change the type of button at the bottom of the card (primary,secondary,tertairy, link) |
+| ctatext | String | Find out more | Update the cta text within the button at the bottom of the card |
 | details | Object | - | Build up the card content with pre-defined bits of data |
 | - detail.tags | Array of strings | - | Add tags above the card header |
-| - detail.guidePrice | String | - | Property guide price |
-| - detail.auctionTime | String | - | Auction time left |
-| - detail.readTime | String | - | How long it will take to read |
+| - detail.guideprice | String | - | Property guide price |
+| - detail.auctiontime | String | - | Auction time left |
+| - detail.readtime | String | - | How long it will take to read |
 | - detail.status | String | - | Display a status badge at the top of the card |

package/src/components/CardDeck/CardDeck.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="container card-deck prevent-invert" :data-card-type="cardType">
+  <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="`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>
+          <Card v-bind="value" :class="cardclass" :type="cardtype" :btntype="btntype" :titleclass="titleclass" :ctatext="ctatext" :hidectatext="hidectatext"></Card>
         </div>
       </div>
       <slot name="after"></slot>
@@ -33,12 +33,12 @@ export default {
       required: false,
       default: 1
     },
-    smCols: {
+    smcols: {
       type: Number,
       required: false,
       default: 1
     },
-    mdCols: {
+    mdcols: {
       type: Number,
       required: false,
       default: 3
@@ -48,27 +48,27 @@ export default {
       required: false,
       default: 4
     },
-    cardType: {
+    cardtype: {
       type: String,
       required: false
     },
-    cardClass: {
+    cardclass: {
       type: String,
       required: false
     },
-    btnType: {
+    btntype: {
       type: String,
       required: false
     },
-    titleClass: {
+    titleclass: {
       type: String,
       required: false
     },
-    ctaText: {
+    ctatext: {
       type: String,
       required: false
     },
-    hideCtaText: {
+    hidectatext: {
       type: Boolean,
       required: false,
       default: false

package/src/components/CardDeck/README.md

@@ -9,13 +9,13 @@
 | 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 |
+| 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 |
+| 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
 

package/src/components/Carousel/Carousel.vue

@@ -1,21 +1,21 @@
 <template>
-  <div class="container carousel" :id="'carousel'+id" ref="wrapper" :data-cols="cols" :data-sm-cols="smCols" :data-md-cols="mdCols">
+  <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" :btnType="btnType" :titleClass="titleClass" :ctaText="ctaText" :hideCtaText="hideCtaText"></Card>
+        <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 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}`">
+      <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>
@@ -41,8 +41,8 @@ let cardDeckProps = CardDeck.props;
 // Update the default values
 cardDeckProps.gap.default = 0
 cardDeckProps.cols.default = 1
-cardDeckProps.smCols.default = 2
-cardDeckProps.mdCols.default = 4
+cardDeckProps.smcols.default = 2
+cardDeckProps.mdcols.default = 4
 
 
 export default {
@@ -57,7 +57,7 @@ export default {
   },
   props: {
     ...cardDeckProps,
-    colClass: {
+    colclass: {
       type: String,
       required: false
     },

package/src/components/Carousel/README.md

@@ -11,7 +11,7 @@
 | 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. |
+| 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