@iamproperty/components 3.4.6 → 3.5.0

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,149 @@
+// @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.filterTable(table, form, document.createElement('div'));
+    tableModule.populateDataQueries(table, form);
+    console.log(table.outerHTML);
+    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,28 +13,29 @@
 @use "components/lists.scss";
 @use "components/tooltips.scss";
 @use "components/container.scss";
-@use "components/tables.scss";
-@use "components/links.scss";
-@use "components/buttons";
-@use "components/card.scss";
-@use "components/panel.scss";
+@use "components/table.scss";
+@use "foundations/links.scss";
+@use "foundations/buttons";
+@use "components/admin-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";
+@import "../bootstrap/scss/_transitions.scss";
+@import "../bootstrap/scss/_badge.scss";
 
 // Helpers
-//@import "../../node_modules/bootstrap/scss/helpers";
-@import "../../node_modules/bootstrap/scss/helpers/clearfix";
-//@import "../../node_modules/bootstrap/scss/helpers/colored-links";
-@import "../../node_modules/bootstrap/scss/helpers/ratio";
-@import "../../node_modules/bootstrap/scss/helpers/position";
-@import "../../node_modules/bootstrap/scss/helpers/stacks";
-@import "../../node_modules/bootstrap/scss/helpers/visually-hidden";
-//@import "../../node_modules/bootstrap/scss/helpers/stretched-link";
-@import "../../node_modules/bootstrap/scss/helpers/text-truncation";
-//@import "../../node_modules/bootstrap/scss/helpers/vr";
+//@import "../bootstrap/scss/helpers";
+@import "../bootstrap/scss/helpers/clearfix";
+//@import "../bootstrap/scss/helpers/colored-links";
+@import "../bootstrap/scss/helpers/ratio";
+@import "../bootstrap/scss/helpers/position";
+@import "../bootstrap/scss/helpers/stacks";
+@import "../bootstrap/scss/helpers/visually-hidden";
+//@import "../bootstrap/scss/helpers/stretched-link";
+@import "../bootstrap/scss/helpers/text-truncation";
+//@import "../bootstrap/scss/helpers/vr";
 
 // Utilities
-@import "../../node_modules/bootstrap/scss/utilities/_api.scss";
+@import "../bootstrap/scss/utilities/_api.scss";

package/assets/sass/_forms.scss

@@ -1,10 +1,10 @@
 @use "_func" as *;
 
-@import "../../node_modules/bootstrap/scss/forms/labels";
-@import "../../node_modules/bootstrap/scss/forms/form-control";
-@import "../../node_modules/bootstrap/scss/forms/form-select";
-@import "../../node_modules/bootstrap/scss/forms/form-check";
-@import "../../node_modules/bootstrap/scss/forms/form-range";
-@import "../../node_modules/bootstrap/scss/forms/input-group";
-@import "../../node_modules/bootstrap/scss/forms/validation";
+@import "../bootstrap/scss/forms/_labels";
+@import "../bootstrap/scss/forms/_form-control";
+@import "../bootstrap/scss/forms/_form-select";
+@import "../bootstrap/scss/forms/_form-check";
+@import "../bootstrap/scss/forms/_form-range";
+@import "../bootstrap/scss/forms/_input-group";
+@import "../bootstrap/scss/forms/_validation";
 @import "components/forms.scss";

package/assets/sass/_functions/functions.scss

@@ -1,7 +1,7 @@
 @use "sass:math";
 @use "sass:map";
 
-@import "../../../node_modules/bootstrap/scss/_functions.scss";
+@import "../../bootstrap/scss/_functions";
 
 @function spacing($int){
   @return map.get($spacers, $int);

package/assets/sass/_functions/mixins.scss

@@ -1,4 +1,4 @@
-@import "../../../node_modules/bootstrap/scss/mixins";
+@import "../../bootstrap/scss/_mixins";
 
 @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
   
@@ -134,20 +134,12 @@
 
 @mixin reset-colours($compatible:$compatible) {
   
-  --colour-body: var(--colour-body-theme);
-  --colour-heading: var(--colour-primary);
-  --colour-link: var(--colour-link-theme);
-  --colour-hover: var(--colour-hover-theme);
-  --colour-active: var(--colour-active-theme);
-  //--colour-underline: var(--colour-underline);
-  --colour-border: var(--colour-border-theme);
-  --colour-brand: var(--colour-primary);
-
-  --btn-bg: var(--colour-warning);
-  --btn-text: var(--colour-primary);
-  --btn-hover-text: var(--colour-primary);
-  --btn-tertiary-bg: var(--colour-primary);
-  --btn-tertiary-hover-text: white;
+  @each $color, $value in $non-theme-colors {
+
+    --colour-#{$color}: #{$value};
+  }
+
+
 
   .text-primary {
     color: var(--colour-primary)!important;
@@ -156,16 +148,22 @@
 
 @mixin invert-colours($compatible:$compatible) {
   
+  @each $color, $value in $dark-mode-colors {
+
+    --colour-#{$color}: #{$value};
+  }
+
+  --btn-bg: var(--colour-inverted);
+  --btn-text: var(--colour-primary);
+  --btn-hover-text: var(--colour-heading);
+  --btn-tertiary-bg: var(--colour-inverted);;
+  --btn-tertiary-hover-text: var(--colour-primary);
+
+  
   --colour-body: #{$colour-inverted};
   --colour-heading: #{$colour-inverted};
   --colour-link: #{$colour-inverted};
   --colour-hover: #{$colour-inverted};
   --colour-border: #{$colour-inverted};
   --colour-brand: #{$colour-inverted};
-
-  --btn-bg: #{$colour-inverted};
-  --btn-text: var(--colour-primary);
-  --btn-hover-text: var(--colour-heading);
-  --btn-tertiary-bg: #{$colour-inverted};
-  --btn-tertiary-hover-text: var(--colour-primary);
 }

package/assets/sass/_functions/utilities.scss

@@ -1,6 +1,6 @@
 @use "functions" as *;
 
-@import "../../../node_modules/bootstrap/scss/utilities";
+@import "../../bootstrap/scss/_utilities";
 
 // #region Sizing
 /* Enhance the max width utility to include fit-content which can come in handy for flex-box based layouts. */
@@ -104,7 +104,6 @@ $utilities: map-merge(
 //  #endregion
 
 // #region Gradient colours 
-
 $utilities: map-merge(
   $utilities,
   (
@@ -116,29 +115,88 @@ $utilities: map-merge(
       ),
       values:
       (
-        "secondary": linear-gradient(var(--gradient-direction), var(--colour-secondary) 0, transparent 100%),
+        "success": linear-gradient(var(--gradient-direction), var(--colour-success) 0, transparent 100%),
         "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)
+      )
     )
   )
 );
 $utilities: map-merge(
   $utilities,
-  (
+  ( 
     "gradient-direction": (
       css-var: true,
       class: gradient-direction,
       values:
       (
         "left": 90deg,
-        "right": -90deg,
-        "up": 360deg
+        "angle": 135deg
       )
     )
   )
 );
+// #endregion
 
-
-
-// #endregion
+// #region Tint helper classes
+$utilities: map-merge(
+  $utilities,
+  (
+    "bg-opacity": (
+      css-var: true,
+      class: bg-opacity,
+      values:
+      (
+        "10": 0.1,
+        "20": 0.2,
+        "30": 0.3,
+        "40": 0.4,
+        "50": 0.5,
+        "60": 0.6,
+        "70": 0.7,
+        "80": 0.8,
+        "90": 0.9,
+        "100": 1
+      )
+    )
+  )
+);
+$utilities: map-merge(
+  $utilities,
+  (
+    "text-opacity": (
+      css-var: true,
+      class: text-opacity,
+      values:
+      (
+        "10": 0.1,
+        "20": 0.2,
+        "30": 0.3,
+        "40": 0.4,
+        "50": 0.5,
+        "60": 0.6,
+        "70": 0.7,
+        "80": 0.8,
+        "90": 0.9,
+        "100": 1
+      )
+    )
+  )
+);
+// #endregion