@iamproperty/components 3.4.6 → 3.4.7

package/assets/js/tests/filterlist.spec.js

@@ -0,0 +1,22 @@
+// @ts-nocheck
+import '@testing-library/jest-dom';
+import { filterTheList } from "../modules/filterlist.js";
+const listHTML = `
+<li class="lead text-primary pb-1">Olivia Anderson</li>
+<li class="lead text-primary pb-1">Ethan Ramirez</li>
+<li class="lead text-primary pb-1">Sophia Patel</li>
+<li class="lead text-primary pb-1">Noah Jenkins</li>
+<li class="lead text-primary pb-1">Ava Thompson</li>
+<li class="lead text-primary pb-1">Lucas Myers</li>
+<li class="lead text-primary pb-1">Mia Carter</li>
+<li class="lead text-primary pb-1">Benjamin Lee</li>
+`;
+describe('addDataAttributes', () => {
+    let list = document.createElement('ul');
+    list.innerHTML = listHTML;
+    filterTheList(list, "Lucas");
+    test('should add a class of d-none to each item except the one containing Lucas Myers', () => {
+        expect(list.querySelectorAll('li:not(.d-none)').length).toEqual(1);
+        expect(list.querySelector('li:not(.d-none').textContent).toEqual('Lucas Myers');
+    });
+});

package/assets/js/tests/pagination.spec.js

@@ -0,0 +1,15 @@
+// @ts-nocheck
+import '@testing-library/jest-dom';
+import createPaginationButttons from "../modules/pagination.js";
+describe('createPaginationButttons', () => {
+    const pagination = document.createElement('div');
+    pagination.setAttribute('data-page', 2);
+    pagination.setAttribute('data-pages', 5);
+    pagination.setAttribute('data-show', 15);
+    pagination.setAttribute('data-total', 150);
+    pagination.setAttribute('data-increment', 15);
+    createPaginationButttons(pagination, pagination);
+    test('should populate the pagination with links to each page', () => {
+        expect(pagination.querySelectorAll('a.page-link').length).toEqual(6);
+    });
+});

package/assets/js/tests/table.spec.js

@@ -0,0 +1,147 @@
+// @ts-nocheck
+import '@testing-library/jest-dom';
+import * as tableModule from "../modules/table.js";
+import "expect-puppeteer";
+const basicTable = `<thead>
+  <tr>
+    <th>Heading 1</th>
+    <th>Heading 2</th>
+    <th>Heading 3</th>
+  </tr>
+</thead>
+<tbody
+  <tr>
+    <td>Cell 1</td>
+    <td>Low</td>
+    <td>Cell 3</td>
+  </tr>
+  <tr>
+    <td>Cell 1</td>
+    <td>Low</td>
+    <td><a href="/link">View information</a></td>
+  </tr>
+  <tr>
+    <td>Different Cell 1</td>
+    <td>Medium</td>
+    <td><a href="/link">View information</a></td>
+  </tr>
+  <tr>
+    <td>Different Cell 1</td>
+    <td>High</td>
+    <td><a href="/link">View information</a></td>
+  </tr>
+</tbody>`;
+describe('addDataAttributes', () => {
+    const table = document.createElement('table');
+    table.innerHTML = basicTable;
+    tableModule.addDataAttributes(table);
+    test('should add data-label attribute to the table cells', () => {
+        expect(table.querySelector('tbody td').getAttribute('data-label')).toEqual('Heading 1');
+        expect(table.querySelector('tbody td:nth-child(2)').getAttribute('data-label')).toEqual('Heading 2');
+    });
+    test('should add data-content attribute to the table cells if the content matches a pre-defined list', () => {
+        expect(table.querySelector('tbody tr:nth-child(2) td:nth-child(2)').getAttribute('data-content')).toEqual('Low');
+        expect(table.querySelector('tbody tr:nth-child(3) td:nth-child(2)').getAttribute('data-content')).toEqual('Medium');
+    });
+});
+/* TODO: This unit test doesn't work as puppeteer seems to have an issue with query selector all
+describe('getLargestLastColWidth', () => {
+
+  test('should return the width of the largest last column content', async() => {
+
+    const browser = await puppeteer.launch({});
+    try {
+        const page = await browser.newPage();
+        await page.exposeFunction("getLargestLastColWidth", tableModule.getLargestLastColWidth);
+        await page.setContent(`<table id="table">${basicTable}</table>`);
+        await page.waitForSelector('#table tr');
+
+        const largestWidth = await page.evaluate(`getLargestLastColWidth(document.querySelector("#table"))`);
+
+        //const links = await page.$$eval('#table', e=>getLargestLastColWidth(e))
+      console.log(await largestWidth)
+
+
+    } catch (e) {
+        console.error(e);
+    } finally {
+        await browser.close();
+    }
+
+    
+  });
+
+});
+*/
+describe('createMobileButton', () => {
+    const table = document.createElement('table');
+    table.innerHTML = basicTable;
+    tableModule.createMobileButton(table);
+    test('should add a button to the first cell in a column', () => {
+        expect(table.querySelector('tbody td:nth-child(1) button').textContent).toEqual('Cell 1');
+        expect(table.querySelector('tbody td:nth-child(1) span').textContent).toEqual('Cell 1');
+    });
+});
+describe('createSearchDataList', () => {
+    const table = document.createElement('table');
+    table.innerHTML = basicTable;
+    const form = document.createElement('form');
+    form.innerHTML += `<div><input name="search" id="search" type="text" class="form-control" data-search="Heading 1"></div>`;
+    tableModule.addDataAttributes(table);
+    tableModule.createSearchDataList(table, form);
+    test('should create a datalist populated by the defined columns in the data-search ', () => {
+        expect(form.querySelectorAll('datalist').length).toEqual(1);
+        expect(form.querySelectorAll('datalist option').length).toEqual(2);
+        expect(form.querySelector('datalist option:nth-child(1)').value).toEqual('Cell 1');
+        expect(form.querySelector('datalist option:nth-child(2)').value).toEqual('Different Cell 1');
+    });
+    test('should set the autocomplete attribute to off', () => {
+        expect(form.querySelectorAll('datalist').length).toEqual(1);
+        expect(form.querySelectorAll('datalist option').length).toEqual(2);
+        expect(form.querySelector('datalist option:nth-child(1)').value).toEqual('Cell 1');
+        expect(form.querySelector('input').getAttribute('autocomplete')).toEqual('off');
+    });
+});
+describe('sortTable', () => {
+    const table = document.createElement('table');
+    table.innerHTML = basicTable;
+    const form = document.createElement('form');
+    form.innerHTML += `<div><select type="select" name="sort" id="sort" class="form-select" data-sort=""><option value="-1">Sort by</option><option value="high" data-sort="Heading 2" data-order="High,Medium,Low" selected="selected">high to low</option></select></div>`;
+    const savedTableBody = table.querySelector('tbody');
+    tableModule.addDataAttributes(table);
+    tableModule.sortTable(table, form, savedTableBody);
+    test('should sort the table from high to low', () => {
+        expect(table.querySelector('tbody tr:nth-child(1) td:nth-child(2)').textContent).toEqual('High');
+        expect(table.querySelector('tbody tr:nth-child(2) td:nth-child(2)').textContent).toEqual('Medium');
+        expect(table.querySelector('tbody tr:nth-child(3) td:nth-child(2)').textContent).toEqual('Low');
+    });
+});
+describe('filterTable', () => {
+    const table = document.createElement('table');
+    table.innerHTML = basicTable;
+    const form = document.createElement('form');
+    form.innerHTML += `<div><input type="text" name="filter" id="filter" data-filter="Heading 2" value="High" /></div>`;
+    tableModule.addDataAttributes(table);
+    tableModule.filterTable(table, form, document.createElement('div'));
+    test('should filter the table to only show high values', () => {
+        expect(table.querySelectorAll('tbody tr.filtered--matched').length).toEqual(1);
+    });
+});
+describe('populateDataQueries', () => {
+    const table = document.createElement('table');
+    table.innerHTML = basicTable;
+    const form = document.createElement('form');
+    form.innerHTML += `<div><span data-query="total"></span><span data-query="Heading 2 == Low"></span></div>`;
+    tableModule.addDataAttributes(table);
+    tableModule.populateDataQueries(table, form);
+    test('should populate elements with the data-query attribute with the result of the corresponding query', () => {
+        expect(form.querySelector('[data-query="total"]').textContent).toEqual('4');
+        expect(form.querySelector('[data-query="Heading 2 == Low"]').textContent).toEqual('2');
+    });
+});
+describe('formatCell', () => {
+    test('should format the text correctly', () => {
+        expect(tableModule.formatCell('date', '2023-05-15 12:10:45.000000')).toEqual('15 May 23');
+        expect(tableModule.formatCell('capitalise', 'low')).toEqual('Low');
+    });
+});

package/assets/sass/_components.scss

@@ -1,13 +1,12 @@
+@use "components/card.scss";
 @use "components/nav.scss";
 @use "components/header.scss";
 @use "components/testimonial.scss";
-@use "components/cardDeck.scss";
 @use "components/accordion.scss";
 @use "components/alert";
 @use "components/carousel.scss";
 @use "components/property-searchbar.scss";
 @use "components/tabs.scss";
-@use "components/modal.scss";
 @use "components/charts.scss";
 @use "components/timeline.scss";
 @use "components/snapshot.scss";

package/assets/sass/_corefiles.scss

@@ -13,15 +13,16 @@
 @use "components/lists.scss";
 @use "components/tooltips.scss";
 @use "components/container.scss";
-@use "components/tables.scss";
-@use "components/links.scss";
+@use "components/table.scss";
+@use "foundations/links.scss";
 @use "components/buttons";
-@use "components/card.scss";
 @use "components/panel.scss";
+@use "components/dialog.scss";
+
+@use "components/pagination.scss";
 
 // Bootstrap elements
 @import "../../node_modules/bootstrap/scss/_transitions.scss";
-@import "../../node_modules/bootstrap/scss/_pagination.scss";
 @import "../../node_modules/bootstrap/scss/_badge.scss";
 
 // Helpers

package/assets/sass/_functions/utilities.scss

@@ -120,6 +120,22 @@ $utilities: map-merge(
         "primary": linear-gradient(var(--gradient-direction), var(--colour-primary) 0, transparent 100%),
         "info": linear-gradient(var(--gradient-direction), var(--colour-info) 0, transparent 100%)
       )
+    ),
+    "colour": (
+      property: --colour,
+      class: colour,
+      values:
+      (
+        "primary": var(--colour-primary),
+        "secondary": var(--colour-secondary),
+        "info": var(--colour-info),
+        "success": var(--colour-success),
+        "warning": var(--colour-warning),
+        "danger": var(--colour-danger),
+        "light": var(--colour-light),
+        "dark": var(--colour-dark),
+        "admin": var(--colour-admin)
+      )
     )
   )
 );

package/assets/sass/_functions/variables.scss

@@ -89,7 +89,7 @@ $dark:          #46003c;
 // Functional/state variables 
 $colour-body: #595959;
 $colour-muted: #9d9d9d;
-$colour-border: #6f6f6f;
+$colour-border: #D8D8D8;
 $colour-link: $primary;
 $colour-focus: #000000;
 $colour-hover: #000000;
@@ -331,7 +331,8 @@ $input-line-height: 1.5;
 $input-padding-y: 0.75em;
 $input-padding-x: 1em;
 $input-border-radius: rem(10);
-$input-border-color: var(--colour-border);
+$input-border-color: var(--colour-primary);
+$input-border-width: 2px;
 
 // sm
 $input-height-sm: null;
@@ -357,8 +358,9 @@ $input-group-addon-border-color: var(--colour-border);
 $form-select-padding-y: $input-padding-y;
 //$form-select-indicator-padding
 $form-select-padding-x: #{$input-padding-x};
-$form-select-border-color: var(--colour-border);
+$form-select-border-color: var(--colour-primary);
 $form-select-border-radius: $input-border-radius;
+$form-select-border-width: 2px;
 
 // Checkbox
 $form-check-input-width: 1.5rem;
@@ -369,13 +371,13 @@ $form-check-margin-bottom: #{rem(16)};
 $form-check-input-border: 1px solid var(--colour-border);
 
 $form-check-input-checked-color:          $primary;
-$form-check-input-checked-bg-color:       var(--colour-success);
+$form-check-input-checked-bg-color:       var(--colour-info);
 $form-check-input-checked-border-color:   var(--colour-border);
 $form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10l3 3l6-6'/></svg>");
 
 $form-check-input-indeterminate-color:          $primary;
-$form-check-input-indeterminate-bg-color:       var(--colour-success);
-$form-check-input-indeterminate-border-color:   var(--colour-success);
+$form-check-input-indeterminate-bg-color:       var(--colour-info);
+$form-check-input-indeterminate-border-color:   var(--colour-info);
 $form-check-input-indeterminate-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10h8'/></svg>");
 
 $form-switch-bg-image:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$colour-border}'/></svg>");
@@ -403,7 +405,7 @@ $card-cap-bg: transparent;
 // #endregion card-variables
 
 // #region Icons
-$icon-blank: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M17 13v6c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-11c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-11c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h6c0.552 0 1-0.448 1-1s-0.448-1-1-1h-6c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v11c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h11c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1zM10.707 14.707l9.293-9.293v3.586c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.136-0.027-0.265-0.076-0.383s-0.121-0.228-0.216-0.323c-0.001-0.001-0.001-0.001-0.002-0.002-0.092-0.092-0.202-0.166-0.323-0.216-0.118-0.049-0.247-0.076-0.383-0.076h-6c-0.552 0-1 0.448-1 1s0.448 1 1 1h3.586l-9.293 9.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z' stroke-width='2px'></path></svg>");
+$icon-blank: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M17 13v6c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-11c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-11c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h6c0.552 0 1-0.448 1-1s-0.448-1-1-1h-6c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v11c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h11c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1zM10.707 14.707l9.293-9.293v3.586c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.136-0.027-0.265-0.076-0.383s-0.121-0.228-0.216-0.323c-0.001-0.001-0.001-0.001-0.002-0.002-0.092-0.092-0.202-0.166-0.323-0.216-0.118-0.049-0.247-0.076-0.383-0.076h-6c-0.552 0-1 0.448-1 1s0.448 1 1 1h3.586l-9.293 9.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z' stroke-width='4px'></path></svg>");
 $icon-sort: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' preserveAspectRatio='none'%3E%3Cpath opacity='.3' d='M51 1l25 23 24 22H1l25-22zm0 100l25-23 24-22H1l25 22z'/%3E%3C/svg%3E");
 $icon-arrow: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M6.5,2l9,9-9,9' style='fill:none;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px'/></svg>");
 $icon-close: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
@@ -425,26 +427,25 @@ $vars: map-merge((
 // #region pagination
 // Default
 $pagination-color: var(--colour-heading);
-$pagination-disabled-color: var(--colour-muted);
+$pagination-disabled-color: var(--colour-border);
 $pagination-bg: transparent;
 $pagination-border-width: 1px;
-$pagination-border-color: var(--colour-border);
+$pagination-border-color: var(--colour-primary);
 
 // Hover and focus
 $pagination-hover-color: var(--colour-heading);
-$pagination-hover-bg: var(--colour-muted);
-$pagination-hover-border-color: var(--colour-border);
-$pagination-focus-color: var(--colour-hover);
-$pagination-focus-bg: var(--colour-muted);
+$pagination-hover-bg: var(--colour-info);
+$pagination-hover-border-color: var(--colour-info);
+$pagination-focus-color: var(--colour-heading);
+$pagination-focus-bg: var(--colour-info);
 
 // Active
-$pagination-active-color: var(--body-bg);
-$pagination-active-bg: var(--colour-heading);
-$pagination-active-border-color: var(--colour-heading);
-
+$pagination-active-color: var(--colour-primary);
+$pagination-active-bg: var(--colour-info);
+$pagination-active-border-color: var(--colour-info);
 // Disabled
 $pagination-disabled-bg: $pagination-bg;
-$pagination-disabled-border-color: $pagination-border-color;
+$pagination-disabled-border-color: var(--colour-border);
 // #endregion
 
 // #region Accordion
@@ -493,4 +494,17 @@ $zindex-modal-backdrop:             var(--index-overlay);
 $zindex-modal:                      var(--index-overlay);
 $zindex-popover:                    var(--index-above);
 $zindex-tooltip:                    var(--index-above);
+// #endregion
+
+// #region Table
+$td-mw-px: 120;
+$td-mw: #{rem($td-mw-px)};
+$table-padding-px: 32;
+$table-padding: #{rem($table-padding-px)};
+$table-mh-sm-px: 200;
+$table-mh-sm: #{rem($table-mh-sm-px)};
+$table-mh-md-px: 400;
+$table-mh-md: #{rem($table-mh-md-px)};
+$table-mh-lg-px: 600;
+$table-mh-lg: #{rem($table-mh-lg-px)};
 // #endregion

package/assets/sass/_tests/colours.spec.scss

@@ -13,7 +13,7 @@ $test_colors: map-merge((
   "dark": rgba(70, 0, 60, var(--alpha, 1)),
   "muted-theme": #9d9d9d,
   "muted": var(--colour-muted-theme),
-  "border-theme": #6f6f6f,
+  "border-theme": #D8D8D8,
   "border": var(--colour-border-theme),
   "link-theme": #00313c,
   "link": var(--colour-link-theme),

package/assets/sass/components/applied-filters.scss

@@ -0,0 +1,65 @@
+@use "../_func.scss" as *;
+
+.applied-filters {
+
+  &:not(.applied-filters--compact):not(:empty):before {
+    content: "Applied filters";
+    font-weight: bold;
+    font-size: rem(18);
+    line-height: rem(22);
+    color: var(--colour-header);
+    margin-bottom: rem(16);
+    display: block;
+  }
+
+  &:not(:empty) {
+    margin-bottom: 1rem;
+  }
+}
+
+.applied-filters .filter {
+  
+  border: 1px solid var(--colour-border);
+  padding: 1rem rem(24) 1rem rem(24);
+  background: transparent;
+  margin-right: 0.5rem!important;
+  margin-bottom: 0.5rem!important;
+  line-height: rem(24);
+  white-space: nowrap;
+
+  &:after {
+    content: "";
+    display: inline-block;
+    height: rem(20);
+    width: rem(20);
+    padding:0;
+    margin-left: rem(24);
+    margin-bottom: -0.25rem;
+    border: none;
+    z-index: var(--index-focus);
+    background: currentColor;
+    mask-image: var(--icon-close);
+    mask-size: 100%;
+    mask-repeat: no-repeat;
+    mask-position: 50% 50%;
+    -webkit-mask-image: var(--icon-close);
+    -webkit-mask-size: 100%;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: 50% 50%;
+  }
+}
+
+.applied-filters--compact .filter {
+  background-color: var(--colour-light);
+  border: none;
+  padding: rem(10);
+  line-height: rem(16);
+    border-radius: rem(5);
+
+  &:after {
+    margin-left: rem(10);
+    height: rem(16);
+    width: rem(16);
+    margin-bottom: -0.1rem;
+  }
+}