@iamproperty/components 1.0.13 → 2.2.0

package/README.md

@@ -1,29 +1,137 @@
-# iamp-component-library
+# Getting started
+
+## Using the component library or assets
+
+### Install
+```
+npm install @iamproperty/components --save
+```
+
+### Usage
+
+#### Static assets
+
+The assets folder can be used independently from the Vue components so that they can be used with other frameworks. With the compiled files available to use out of the box alongside the source files that can be configured. 
 
-## Project setup
 ```
-npm install --save @iamproperty/components
+<link href="./node_modules/@iamproperty/components/assets/css/style.min.css" as="style" />
+<script src="./node_modules/@iamproperty/components/assets/js/scripts.bundle.min.js"></script>
 ```
 
-### Compiles and hot-reloads for development
+##### Sass files
+```
+@import './node_modules/@iamproperty/components/assets/sass/_func.scss';
+@import './node_modules/@iamproperty/components/assets/sass/_corefiles_.scss';
+```
+##### JS modules
+```
+import navbar from @iamproperty/components/assets/js/modules/navbar.js
+```
+
+
+#### Vue application
+
+```
+import '@iamproperty/components/assets/css/core.min.css'
+import '@iamproperty/components/dist/components.css'
+
+import * as iamkey from '@iamproperty/components'
+for (const [key, value] of Object.entries(iamkey)) {
+  Vue.component(key, value)
+}
+```
+
+Components then can be used as described in the design system documentation.
+
+```
+<Header title="Page title" image="../../assets/image.jpeg"><p>Page description</p></Header>
+```
+
+#### NUXT
+
+To use the components in NUXT you firstly need to add create a plugin file called plugins/iamkey.js and add the below code.
+
+```
+import Vue from 'vue'
+
+import '@iamproperty/components/assets/css/core.min.css'
+import '@iamproperty/components/dist/components.css'
+
+import * as iamkey from '@iamproperty/components'
+for (const [key, value] of Object.entries(iamkey)) {
+  Vue.component(key, value)
+}
+```
+
+Then add the plugin to the nuxt.config.js file.
+
+```
+export default {
+  plugins: [
+    'plugins/iamkey.js'
+  ],
+}
+```
+
+
+## Contributing to iam key
+
+### Create code branch
+
+Firstly the clone the [repo](https://github.com/iamproperty/iamproperty-vue-component-library) from GitHub and create a new branch using the agreed naming conventention. 
+
+### Commands
+
+#### Install node packages
+
+```
+npm install
+```
+
+#### Development local web server
+
+Setup a local web server to run the documentation site this will allow you to modify the code and check it.
+
 ```
 npm run serve
 ```
 
-### Compiles and minifies for production
+#### Run your unit tests
+
+**This command should be ran while the local web server is still running.**
+
+Unit tests should be ran after changing any code to make sure it has no unwanted side effects.
+
+The visual regression tests may differ greatly if the tests are running on a windows when the the snapshots where created on Mac.
+
 ```
-npm run build
+npm run test
 ```
 
-### Run your unit tests
+#### Prepare for pull request
+
+**This command should be ran while the local web server is still running.**
+
+Before creating a pull request we want to make sure assets get re-compiled and audited so that we can keep an eye on file sizes. We also want to recreate visual regression snapshots. This will create a number of files that will be added to the pull request to help the reviewers make judgement on the changes.
+
 ```
-npm run test:unit
+npm run pull-request
 ```
 
-### Lints and fixes files
+### Pull request
+
+You will not have the ability to commit changes directly to the main branch and a pull request will have to be created. This pull request should follow the format dictated in the .github/pull_request_template.md file.
+
+## Create release
+
+Before creating a release you will need to make sure you are logged into the npm registry by running the below command. You will also need to make sure you have access to create releases to the <a href="https://www.npmjs.com/package/@iamproperty/components" target="_blank">npm registry package</a>.
+
 ```
-npm run lint
+npm login
 ```
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+After you are logged in then can publish but remember to increase the package version if the package.json file.
+
+```
+npm publish
+```

package/assets/js/main.js

@@ -0,0 +1,62 @@
+// Bootstrap modules
+//import Alert from '../../node_modules/bootstrap/js/src/alert'
+//import Button from '../../node_modules/bootstrap/js/src/button'
+//import Carousel from '../../node_modules/bootstrap/js/src/carousel'
+//import Collapse from '../../node_modules/bootstrap/js/src/collapse'
+//import Dropdown from '../../node_modules/bootstrap/js/src/dropdown'
+//import Modal from '../../node_modules/bootstrap/js/src/modal'
+//import Offcanvas from '../../node_modules/bootstrap/js/src/offcanvas'
+//import Popover from '../../node_modules/bootstrap/js/src/popover'
+//import ScrollSpy from '../../node_modules/bootstrap/js/src/scrollspy'
+//import Tab from '../../node_modules/bootstrap/js/src/tab'
+//import Toast from '../../node_modules/bootstrap/js/src/toast'
+//import Tooltip from '../../node_modules/bootstrap/js/src/tooltip'
+
+// Modules
+import * as helpers from './modules/helpers'
+import nav from './modules/nav'
+import table from './modules/table'
+import accordion from './modules/accordion'
+import testimonial from './modules/testimonial'
+import carousel from './modules/carousel'
+import form from './modules/form'
+
+// Attach classes to dom elements
+document.addEventListener("DOMContentLoaded", function() {
+
+  helpers.addBodyClasses(document.body);
+  helpers.checkElements(document.body);
+  console.log('test.js');
+
+  // ANav
+  Array.from(document.querySelectorAll('.nav')).forEach((arrayElement, index) => {
+    nav(arrayElement);
+  });
+
+  // Advanced tables
+  Array.from(document.querySelectorAll('.table__wrapper')).forEach((arrayElement, index) => {
+    table(arrayElement);
+  });
+
+  // Accordions
+  Array.from(document.querySelectorAll('.accordion')).forEach((arrayElement, index) => {
+    accordion(arrayElement);
+  });
+  
+  // Testimonial
+  Array.from(document.querySelectorAll('.testimonial')).forEach((arrayElement, index) => {
+    testimonial(arrayElement);
+  });
+  // Carousel
+  Array.from(document.querySelectorAll('.carousel')).forEach((arrayElement, index) => {
+    carousel(arrayElement);
+  });
+  // Form
+  Array.from(document.querySelectorAll('form')).forEach((arrayElement, index) => {
+    form(arrayElement);
+  });
+  // Modal
+  Array.from(document.querySelectorAll('.modal')).forEach((arrayElement, index) => {
+    modal(arrayElement);
+  });
+});

package/assets/js/modules/accordion.js

@@ -0,0 +1,36 @@
+function accordion(accordionElement) {
+  
+  // Fetch all the details element.
+  if(!accordionElement.classList.contains('accordion--keep-open')){
+
+    const details = accordionElement.querySelectorAll(":scope > details");
+
+    // Add the onclick listeners.
+    details.forEach((targetDetail) => {
+      targetDetail.addEventListener("click", () => {
+        // Close all the details that are not targetDetail.
+        details.forEach((detail) => {
+          if (detail !== targetDetail) {
+            detail.removeAttribute("open");
+          }
+        });
+      });
+    });
+  }
+
+  if(window.location.hash && document.querySelector(window.location.hash+':not([open]) summary')) {
+
+    const detail = document.querySelector(window.location.hash+' summary');
+    detail.click();
+  }
+
+  window.addEventListener('hashchange', function(){
+    if(window.location.hash && document.querySelector(window.location.hash+' summary')) {
+
+      const detail = document.querySelector(window.location.hash+' summary');
+      detail.click();
+    }
+  });
+}
+
+export default accordion

package/assets/js/modules/carousel.js

@@ -0,0 +1,102 @@
+function carousel(carouselElement) {
+
+  var scrollTimeout;
+
+  let carouselInner = carouselElement.querySelector('.carousel__inner');
+  let itemCount = carouselElement.querySelectorAll('.carousel__item').length;
+  let cols = carouselElement.getAttribute('data-cols');
+  let smCols = carouselElement.getAttribute('data-sm-cols');
+  let mdCols = carouselElement.getAttribute('data-md-cols');
+
+  carouselElement.querySelector('.carousel__controls a').classList.add('active');
+
+  // On scroll we need to make sure the buttons get corrected and the next testimonial is shown
+  carouselInner.addEventListener('scroll', function(e){
+    clearTimeout(scrollTimeout);
+    scrollTimeout = setTimeout(function(){ 
+
+      let scrollArea = carouselInner.clientWidth;
+      let scrollWidth = carouselInner.scrollWidth;
+      let scrollLeft = carouselInner.scrollLeft;
+      let targetSlide = Math.round((scrollLeft / scrollWidth) * itemCount) + 1;
+      let lastItemOffset = carouselElement.querySelector('.carousel__item:last-child').offsetLeft;
+
+      Array.from(carouselElement.querySelectorAll('.carousel__controls a')).forEach((link, index) => {
+        link.classList.remove('active');
+      });
+
+      carouselElement.querySelector('.control-'+targetSlide).classList.add('active');
+      
+      // Disable the previous button
+      if(targetSlide == 1)
+        carouselElement.querySelector('.btn-prev').setAttribute('disabled','disabled');
+      else
+        carouselElement.querySelector('.btn-prev').removeAttribute('disabled');
+
+      // Disable the next button if the last item is in view
+      if(carouselInner.scrollLeft + scrollArea > lastItemOffset)
+        carouselElement.querySelector('.btn-next').setAttribute('disabled','disabled');
+      else
+        carouselElement.querySelector('.btn-next').removeAttribute('disabled');
+
+    }, 100); 
+
+  }, false);
+
+  // when the buttons are used we need to make sure the carousel scrolls to the correct place
+  carouselElement.addEventListener('click', function(e){
+
+    for (var target = e.target; target && target != this; target = target.parentNode) {
+      if (target.matches('.carousel__controls a')) {
+        
+        e.preventDefault();
+
+        Array.from(carouselElement.querySelectorAll('.carousel__controls a')).forEach((link, index) => {
+          link.classList.remove('active');
+        });
+        target.classList.add('active');
+
+        const el = document.querySelector(target.getAttribute('href'));
+
+        carouselInner.scroll({
+          top: 0,
+          left: el.offsetLeft, 
+          behavior: 'smooth'
+        });
+
+        break;
+      }
+    }
+  }, false);
+
+  carouselElement.addEventListener('click', function(e){
+
+    for (var target = e.target; target && target != this; target = target.parentNode) {
+      if (target.matches('.btn-next, .btn-prev')) {
+        
+        e.preventDefault();
+        let scrollTo = target.classList.contains('btn-prev') ? carouselInner.scrollLeft - carouselInner.clientWidth : carouselInner.scrollLeft + carouselInner.clientWidth;
+        
+        carouselInner.scroll({
+          top: 0,
+          left: scrollTo, 
+          behavior: 'smooth'
+        });
+        break;
+      }
+    }
+  }, false);
+
+
+  // Add responsive hide button classes
+  if(itemCount == 1)
+    carouselElement.classList.add('hide-btns');
+
+  if(smCols >= itemCount)
+    carouselElement.classList.add('hide-sm-btns');
+
+  if(mdCols >= itemCount)
+    carouselElement.classList.add('hide-md-btns');
+}
+
+export default carousel

package/assets/js/modules/drawer.js

@@ -0,0 +1,16 @@
+const drawer = (element) => {
+
+  const observer = new IntersectionObserver( 
+
+    function([e]){
+      e.target.classList.toggle("in-view", e.intersectionRatio > 0)
+      document.getElementById('showDrawer').checked = false
+    },
+    { threshold: [1] }
+  );
+
+  const el = document.getElementById('drawer-end')
+  observer.observe(el);
+}
+
+export default drawer

package/assets/js/modules/form.js

@@ -0,0 +1,49 @@
+// Create a link between two input/selects with one acting as setting a minimum value and the second a maximum
+// The link between the two will prevent the max input field form setting a lower value than the min and vice versa
+function inputRange(inputWrapper){
+
+  inputWrapper.addEventListener('change', function(e){
+
+    var min = parseInt(inputWrapper.querySelector('[data-min] select,[data-min] input').value);
+    var max = parseInt(inputWrapper.querySelector('[data-max] select,[data-max] input').value);
+
+    // Set attributes for input fields
+    Array.from(inputWrapper.querySelectorAll('[data-min] input')).forEach((input, index) => {
+      
+      input.setAttribute('max',max);
+    });
+
+    Array.from(inputWrapper.querySelectorAll('[data-max] input')).forEach((input, index) => {
+      
+      input.setAttribute('min',min);
+    });
+
+    // Hide select options if they are higher or lower than the min and max values
+    Array.from(inputWrapper.querySelectorAll('[data-min] select option')).forEach((option, index) => {
+      
+      if(parseInt(option.getAttribute('value')) > max)
+        option.classList.add('d-none');
+      else 
+        option.classList.remove('d-none');
+    });
+
+    Array.from(inputWrapper.querySelectorAll('[data-max] select option')).forEach((option, index) => {
+      
+      if(parseInt(option.getAttribute('value')) < min)
+        option.classList.add('d-none');
+      else 
+        option.classList.remove('d-none');
+    });
+  }, false);
+}
+
+// Acts as an overall initialise function to trigger other functions.
+function form(formElement) {
+
+  // Check for input range groups
+  Array.from(formElement.querySelectorAll('[data-input-range]')).forEach((arrayElement, index) => {
+    inputRange(arrayElement);
+  });
+}
+
+export default form

package/assets/js/modules/helpers.js

@@ -0,0 +1,93 @@
+/** 
+ * Global helper functions to help maintain and enhance framework elements.
+ * @module Helpers 
+ */
+
+/**
+ * Add global classes used by the CSS and later JavaScript.
+ * @param {HTMLElement} body Dom element, this doesn't have to be the body but it is recommended.
+ */
+ const addBodyClasses = (body) => {
+  
+  body.classList.add("js-enabled");
+
+  if(navigator.userAgent.indexOf('MSIE')!==-1 || navigator.appVersion.indexOf('Trident/') > 0){
+    
+    body.classList.add("ie");
+  }
+
+  return null
+}
+
+/**
+ * Check if an element contains certain elements that needs enhancing with the JavaScript helpers, it is recommended to do this on the page body after the dom is loaded. Elements that are loaded via ajax should also run this function. 
+ * @param {HTMLElement} element Dom element, this doesn't have to be the body but it is recommended.
+ */
+const checkElements = (element) => {
+
+  // Tables
+  Array.from(element.querySelectorAll('table')).forEach((table, index) => {
+
+    tableStacked(table);
+    tableWrap(table);
+  });
+}
+
+/**
+ * Wrap tables with a table wrapper div to help maintain its responsive design.
+ * @param {HTMLElement} table Dom table element
+ */
+const tableWrap = (table) => {
+  
+  if(!table.parentNode.classList.contains('table__wrapper')){
+
+    const tableHTML = table.outerHTML;
+
+    table.outerHTML = `<div class="table__wrapper">${tableHTML}</div>`;
+  }
+}
+
+/**
+ * Creates data attributes to be used by the CSS for mobile views.
+ * @param {HTMLElement} table Dom table element
+ */
+const tableStacked = (table) => {
+
+  const colHeadings = Array.from(table.querySelectorAll('thead th'));
+  const colRows = Array.from(table.querySelectorAll('tbody tr'));
+
+  colRows.forEach((row, index) => {
+
+    const cells = Array.from(row.querySelectorAll('th, td'));
+    
+    cells.forEach((cell, cellIndex) => {
+
+      const heading = colHeadings[cellIndex];
+      if(typeof heading != "undefined"){
+
+        let tempDiv = document.createElement("div");
+        tempDiv.innerHTML = heading.innerHTML;
+        let headingText = tempDiv.textContent || tempDiv.innerText || "";
+        cell.setAttribute('data-label',headingText);
+      }
+    });
+  });
+}
+
+
+const isNumeric = function(str) {
+  if (typeof str != "string") return false // we only process strings!  
+  return !isNaN(str) && // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...
+         !isNaN(parseFloat(str)) // ...and ensure strings of whitespace fail
+}
+
+const zeroPad = (num, places) => String(num).padStart(places, '0')
+
+export {
+  addBodyClasses,
+  checkElements,
+  tableWrap,
+  tableStacked,
+  isNumeric,
+  zeroPad
+}

package/assets/js/modules/modal.js

@@ -0,0 +1,72 @@
+const modal = (element) => {
+
+  const links = element.querySelectorAll('.modal__outer a, .modal__outer button');
+  const firstLink = links[0]
+  const lastLink = links[links.length - 1]
+
+  const closeModal = function(){
+    const button = document.querySelector('[href="'+window.location.hash+'"]');
+    button.focus();
+    window.location.hash = "close";
+    history.replaceState("", document.title, window.location.pathname + window.location.search);
+  }
+
+  // Trap the tab focus inside
+  element.addEventListener('keydown', function(e){
+
+    if(e.key === "Tab" && e.shiftKey && document.activeElement == firstLink){
+
+      e.preventDefault();
+      lastLink.focus();
+    }
+    else if(e.key === "Tab" && !e.shiftKey && document.activeElement == lastLink) {
+
+      e.preventDefault();
+      firstLink.focus();
+    }
+  });
+
+  // ESC will close the open modal
+  document.addEventListener("keydown", function(e){
+    if (e.key === "Escape" && document.querySelector('.modal:target'))
+      closeModal();
+  });
+
+  element.addEventListener('click', function(e){
+    for (var target = e.target; target && target != this; target = target.parentNode) {
+
+      // Close links will close the model by default but we wont to remove the hash link
+      if (target.matches('[href="#close"]')) {
+        
+        e.preventDefault();
+        closeModal();
+        break;
+      }
+      // Dock the modal to the right or left to make the content behind readable
+      else if (target.matches('.modal__dock--right')) {
+        
+        e.preventDefault();
+        if(!element.classList.contains('modal--left'))
+          element.classList.add('modal--right');
+
+        element.classList.remove('modal--left');
+
+        break;
+      }   
+      else if (target.matches('.modal__dock--left')) {
+        
+        e.preventDefault();
+
+        if(!element.classList.contains('modal--right'))
+          element.classList.add('modal--left');
+
+        element.classList.remove('modal--right');
+
+        break;
+      }
+    }
+  });
+
+}
+
+export default modal

package/assets/js/modules/nav.js

@@ -0,0 +1,27 @@
+const navbar = (element) => {
+
+  Array.from(element.querySelectorAll('details')).forEach((detail, index) => {
+    
+    detail.addEventListener('mouseenter', function(e){
+
+      if(window.matchMedia('(min-width: 62em)').matches)
+        detail.setAttribute('open','true')
+    }, false);
+
+    detail.addEventListener('mouseleave', function(e){
+
+      if(window.matchMedia('(min-width: 62em)').matches)
+        detail.removeAttribute('open')
+    }, false);
+  });
+
+
+  const observer = new IntersectionObserver( 
+    ([e]) => e.target.classList.toggle("is-stuck", e.intersectionRatio < 1),
+    { threshold: [1] }
+  );
+
+  observer.observe(element);
+}
+
+export default navbar