@iamproperty/components 3.1.0 → 3.2.0

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

@@ -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. |

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

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

package/src/components/Modal/README.md

@@ -1,20 +1,20 @@
-### Usage
-
-```
-<Modal id="modal">
-  <!-- content -->
-</Modal>
-```
-
-### Properties
-
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| id | String | - | Required |
-| returnid | String | close | Override the default id so that it will anchor to a specific location on the page. |
-
-### Slots
-
-| Option | Default Value | Description |
-| ------ | ------------- | ----------- |
+### Usage
+
+```
+<Modal id="modal">
+  <!-- content -->
+</Modal>
+```
+
+### Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| id | String | - | Required |
+| returnid | String | close | Override the default id so that it will anchor to a specific location on the page. |
+
+### Slots
+
+| Option | Default Value | Description |
+| ------ | ------------- | ----------- |
 | default | - | Will display within the modal |

package/src/components/Nav/Nav.spec.js

@@ -1,35 +1,35 @@
-import { shallowMount } from '@vue/test-utils'
-import Nav from './Nav.vue'
-
-describe('Nav component', () => {
-  /* Logo */
-  it('renders the iam property logo by default', () => {
-    const test = shallowMount(Nav, {
-      propsData: { }
-    })
-
-    expect(test.html()).toContain('<logo-stub id="property" path=\"/svg/logo.svg\" class=\"pb-0\"></logo-stub>')
-  })
-
-  it('renders the correct logo when a logo id is passed', () => {
-    const test = shallowMount(Nav, {
-      propsData: {
-        logo: 'sold'
-      }
-    })
-
-    expect(test.html()).toContain('<logo-stub id="sold" path=\"/svg/logo.svg\" class=\"pb-0\"></logo-stub>')
-  })
-
-  /* Menu button */
-  it('renders the iam property logo by default', () => {
-    const test = shallowMount(Nav, {
-      propsData: { }
-    })
-
-    expect(test.html()).toContain('<label for="showMenu">Menu</label>')
-    expect(test.html()).toContain('<input type="checkbox" name="showSearch" id="showSearch" class="d-none">')
-  })
-
-
-})
+import { shallowMount } from '@vue/test-utils'
+import Nav from './Nav.vue'
+
+describe('Nav component', () => {
+  /* Logo */
+  it('renders the iam property logo by default', () => {
+    const test = shallowMount(Nav, {
+      propsData: { }
+    })
+
+    expect(test.html()).toContain('<logo-stub id="property" path=\"/svg/logo.svg\" class=\"pb-0\"></logo-stub>')
+  })
+
+  it('renders the correct logo when a logo id is passed', () => {
+    const test = shallowMount(Nav, {
+      propsData: {
+        logo: 'sold'
+      }
+    })
+
+    expect(test.html()).toContain('<logo-stub id="sold" path=\"/svg/logo.svg\" class=\"pb-0\"></logo-stub>')
+  })
+
+  /* Menu button */
+  it('renders the iam property logo by default', () => {
+    const test = shallowMount(Nav, {
+      propsData: { }
+    })
+
+    expect(test.html()).toContain('<label for="showMenu">Menu</label>')
+    expect(test.html()).toContain('<input type="checkbox" name="showSearch" id="showSearch" class="d-none">')
+  })
+
+
+})