@iamproperty/components 3.1.0 → 3.4.4

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/ts/modules/drawer'
+
+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/{elements → components}/FileUploads/FileUploads.vue

@@ -1,48 +1,48 @@
-<template>
-  <div class="multiple-file-uploads mb-4">
-
-    <div class="row">
-      <div :class="`${inputcolclass ? inputcolclass : 'col-12 col-sm-4'}`">
-        <Input type="file" :id="id" :name="`${id}[]`" label="Add new file" labelclass="d-none" class="form-control-inline col" required :data-filesize="maxfilesize"></Input>
-      </div>
-      <div class="col-12 col-md me-auto">
-        <slot></slot>
-      </div>
-      <div class="col mw-fit-content">
-        <button type="button" class="btn btn-tertiary me-0" data-delete>Delete</button>
-      </div>
-    </div>
-
-    <button type="button" class="btn btn-secondary me-0" data-add :data-maxfiles="maxfiles">+ Add file</button>
-    
-  </div>
-</template>
-
-<script>
-import Input from '../../elements/Input/Input.vue'
-
-export default {
-  components: {
-    Input
-  },
-  name: 'FileUploads',
-  props: {
-    id: {
-      type: String,
-      required: true
-    },
-    inputcolclass: {
-      type: String,
-      required: false
-    },
-    maxfilesize: {
-      type: Number,
-      required: false
-    },
-    maxfiles: {
-      type: Number,
-      required: false
-    }
-  }
-}
-</script>
+<template>
+  <div class="multiple-file-uploads mb-4">
+
+    <div class="row">
+      <div :class="`${inputcolclass ? inputcolclass : 'col-12 col-sm-4'}`">
+        <Input type="file" :id="id" :name="`${id}[]`" label="Add new file" labelclass="d-none" class="form-control-inline col" required :data-filesize="maxfilesize"></Input>
+      </div>
+      <div class="col-12 col-md me-auto">
+        <slot></slot>
+      </div>
+      <div class="col mw-fit-content">
+        <button type="button" class="btn btn-tertiary me-0" data-delete>Delete</button>
+      </div>
+    </div>
+
+    <button type="button" class="btn btn-secondary me-0" data-add :data-maxfiles="maxfiles">+ Add file</button>
+    
+  </div>
+</template>
+
+<script>
+import Input from '../../components/Input/Input.vue'
+
+export default {
+  components: {
+    Input
+  },
+  name: 'FileUploads',
+  props: {
+    id: {
+      type: String,
+      required: true
+    },
+    inputcolclass: {
+      type: String,
+      required: false
+    },
+    maxfilesize: {
+      type: Number,
+      required: false
+    },
+    maxfiles: {
+      type: Number,
+      required: false
+    }
+  }
+}
+</script>

package/src/{elements/Card → components/FileUploads}/README.md

@@ -1,24 +1,24 @@
-### Usage
-
-```
-<Card :title="value.title" :content="value.content" :link="value.link"></Card>
-```
-
-### Properties
-
-| 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 |
-| 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 |
-| 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.status | String | - | Display a status badge at the top of the card |
+### Usage
+
+```
+<Card :title="value.title" :content="value.content" :link="value.link"></Card>
+```
+
+### Properties
+
+| 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 |
+| 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 |
+| 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.status | String | - | Display a status badge at the top of the card |

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

@@ -1,33 +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="">')
-  })
-})
+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. |