@iamproperty/components 3.6.0 → 3.7.1

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

@@ -7,6 +7,9 @@ const basicTable = `<thead>
     <th>Heading 1</th>
     <th>Heading 2</th>
     <th>Heading 3</th>
+    <th>Heading 4</th>
+    <th>Heading 5</th>
+    <th>Heading 6</th>
   </tr>
 </thead>
 <tbody>
@@ -14,21 +17,33 @@ const basicTable = `<thead>
     <td>Cell 1</td>
     <td>Low</td>
     <td>Cell 3</td>
+    <td>Cell 4</td>
+    <td>Cell 5</td>
+    <td>Cell 6</td>
   </tr>
   <tr>
     <td>Cell 1</td>
     <td>Low</td>
     <td><a href="/link">View information</a></td>
+    <td>Cell 4</td>
+    <td>Cell 5</td>
+    <td>Cell 6</td>
   </tr>
   <tr>
     <td>Different Cell 1</td>
     <td>Medium</td>
     <td><a href="/link">View information</a></td>
+    <td>Cell 4</td>
+    <td>Cell 5</td>
+    <td>Cell 6</td>
   </tr>
   <tr>
     <td>Different Cell 1</td>
     <td>High</td>
     <td><a href="/link">View information</a></td>
+    <td>Cell 4</td>
+    <td>Cell 5</td>
+    <td>Cell 6</td>
   </tr>
 </tbody>`;
 describe('addDataAttributes', () => {
@@ -40,8 +55,8 @@ describe('addDataAttributes', () => {
         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');
+        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
@@ -127,19 +142,25 @@ describe('filterTable', () => {
         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><input name="heading" value="Low" data-filter="Heading 2" /><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);
-    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');
-    });
+
+  const table = document.createElement('table');
+  table.innerHTML = basicTable;
+  const form = document.createElement('form');
+  form.innerHTML += `<div><input name="heading" value="Low" data-filter="Heading 2" /><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);
+
+  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');

package/assets/sass/_functions/variables.scss

@@ -109,6 +109,7 @@ $theme-colors: map-merge((
   "info":       $info,
   "warning":    $warning,
   "success":    $success,
+  "complete":   #0F9D58,
   "danger":     $danger,
   "dark":       $dark,
   "light":      $light,
@@ -136,7 +137,7 @@ $theme-colors: map-merge((
   @return var(--colour-#{$identifier});
 }
 
-$utilities-colors: $theme-colors-rgb;
+$utilities-colors: $theme-colors;
 
 $utilities-text: map-merge(
   $utilities-colors,
@@ -436,41 +437,15 @@ $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='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>");
-$icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16 0c-8.836 0-16 7.164-16 16s7.164 16 16 16 16-7.164 16-16-7.164-16-16-16zM13.52 23.383l-7.362-7.363 2.828-2.828 4.533 4.535 9.617-9.617 2.828 2.828-12.444 12.445z'/></svg>");
 $icon-question: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'><path d='M14 21.5v-3c0-0.281-0.219-0.5-0.5-0.5h-3c-0.281 0-0.5 0.219-0.5 0.5v3c0 0.281 0.219 0.5 0.5 0.5h3c0.281 0 0.5-0.219 0.5-0.5zM18 11c0-2.859-3-5-5.688-5-2.547 0-4.453 1.094-5.797 3.328-0.141 0.219-0.078 0.5 0.125 0.656l2.063 1.563c0.078 0.063 0.187 0.094 0.297 0.094 0.141 0 0.297-0.063 0.391-0.187 0.734-0.938 1.047-1.219 1.344-1.437 0.266-0.187 0.781-0.375 1.344-0.375 1 0 1.922 0.641 1.922 1.328 0 0.812-0.422 1.219-1.375 1.656-1.109 0.5-2.625 1.797-2.625 3.313v0.562c0 0.281 0.219 0.5 0.5 0.5h3c0.281 0 0.5-0.219 0.5-0.5v0c0-0.359 0.453-1.125 1.188-1.547 1.188-0.672 2.812-1.578 2.812-3.953zM24 14c0 6.625-5.375 12-12 12s-12-5.375-12-12 5.375-12 12-12 12 5.375 12 12z'/></svg>");
 
-$icon-warning: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-13.3 0-24 10.7-24 24V264c0 13.3 10.7 24 24 24s24-10.7 24-24V152c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/></svg>");
-
-$icon-filter: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 15'><path d='M0,28.5a.5.5,0,0,0,.5.5H2.55a2.5,2.5,0,0,0,4.9,0H15.5a.5.5,0,0,0,0-1H7.45a2.5,2.5,0,0,0-4.9,0H.5A.5.5,0,0,0,0,28.5Zm3.5,0A1.5,1.5,0,1,1,5,30,1.5,1.5,0,0,1,3.5,28.5Zm6-5A1.5,1.5,0,1,1,11,25a1.5,1.5,0,0,1-1.5-1.5ZM11,21a2.5,2.5,0,0,0-2.45,2H.5a.5.5,0,0,0,0,1H8.55a2.5,2.5,0,0,0,4.9,0H15.5a.5.5,0,0,0,0-1H13.45A2.5,2.5,0,0,0,11,21ZM6,20a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,6,20Zm2.45-2a2.5,2.5,0,0,0-4.9,0H.5a.5.5,0,0,0,0,1H3.55a2.5,2.5,0,0,0,4.9,0H15.5a.5.5,0,0,0,0-1Z' transform='translate(0 -16)'/></svg>");
-
-$icon-low: url("data:image/svg+xml,<svg viewBox='0 0 22 22' xmlns='http://www.w3.org/2000/svg'><path d='M20 12.1429H2C1.42857 12.1429 1 11.5714 1 11C1 10.4286 1.42857 9.85715 2.14286 9.85715H20C20.5714 9.85715 21 10.4286 21 11C21 11.5714 20.5714 12.1429 20 12.1429Z' /></svg>");
-
-$icon-medium: url("data:image/svg+xml,<svg viewBox='0 0 20 8' xmlns='http://www.w3.org/2000/svg'><path d='M19.0001 2.28572H1.14286C0.428573 2.28572 0 1.71429 0 1.14286C0 0.571431 0.428573 0 1.14286 0H19.0001C19.5715 0 20.0001 0.571431 20.0001 1.14286C20.0001 1.71429 19.5715 2.28572 19.0001 2.28572ZM20.0001 6.85716C20.0001 6.28573 19.5715 5.7143 18.8572 5.7143H1.14286C0.428573 5.7143 0 6.28573 0 6.85716C0 7.42859 0.428573 8.00002 1.14286 8.00002H19.0001C19.5715 8.00002 20.0001 7.42859 20.0001 6.85716Z'/></svg>");
-
-$icon-high: url("data:image/svg+xml,<svg viewBox='0 0 20 22' xmlns='http://www.w3.org/2000/svg'><path d='M17.4648 11.7747L10 4.30985L2.53522 11.7747C1.97184 12.338 0.985918 12.338 0.422536 11.7747C-0.140845 11.2113 -0.140845 10.3662 0.422536 9.80282L8.87326 1.3521C9.43664 0.78872 10.2817 0.78872 10.8451 1.3521L19.4367 9.94367C20 10.5071 20 11.3521 19.4367 11.9155C19.0141 12.338 18.0282 12.338 17.4648 11.7747Z' /><path d='M17.4649 20.6479L10 13.0422L2.53524 20.5071C1.97186 21.0704 1.12679 21.0704 0.563405 20.5071C2.37375e-05 19.9437 2.37375e-05 19.0986 0.563405 18.5352L9.01413 10.0845C9.57751 9.52111 10.4226 9.52111 10.986 10.0845L19.5775 18.6761C20.1409 19.2394 20.1409 20.0845 19.5775 20.6479C19.0142 21.2113 18.0282 21.2113 17.4649 20.6479Z' /></svg>");
-
-
-$icon-flag: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M15.578.242a1.287,1.287,0,0,0-1.3-.034,8.118,8.118,0,0,1-3.369.873A7.341,7.341,0,0,1,8.537.609,7.826,7.826,0,0,0,5.788.057,11.873,11.873,0,0,0,1,1.261V.548A.477.477,0,0,0,.5.076.477.477,0,0,0,0,.548v15a.5.5,0,0,0,1,0V12.269a11.324,11.324,0,0,1,4.65-1.217,11.982,11.982,0,0,1,3.1.5,12.171,12.171,0,0,0,3.1.5,9.326,9.326,0,0,0,3.472-.722,1,1,0,0,0,.637-.931L16,1.058A.943.943,0,0,0,15.578.242Zm-.587,10.149a8.588,8.588,0,0,1-3.134.653A11.219,11.219,0,0,1,9,10.579a12.948,12.948,0,0,0-3.35-.525,11.152,11.152,0,0,0-4.559,1.081L1,11.175V2.34l.875-.355a10.676,10.676,0,0,1,3.912-.928,7.465,7.465,0,0,1,2.444.476,8.261,8.261,0,0,0,2.678.519A9.943,9.943,0,0,0,15,1.048Z'/></svg>");
-
-
 
 $vars: map-merge((
-  --icon-blank: #{escape-svg($icon-blank)},
-  --icon-sort: #{$icon-sort},
   --icon-arrow: #{escape-svg($icon-arrow)},
   --icon-close: #{escape-svg($icon-close)},
-  --icon-tick: #{escape-svg($icon-tick)},
-  --icon-question: #{escape-svg($icon-question)},
-  --icon-warning: #{escape-svg($icon-warning)},
-  --icon-filter: #{escape-svg($icon-filter)},
-  --icon-high: #{escape-svg($icon-high)},
-  --icon-medium: #{escape-svg($icon-medium)},
-  --icon-low: #{escape-svg($icon-low)},
-  --icon-flag: #{escape-svg($icon-flag)}
+  --icon-question: #{escape-svg($icon-question)}
 ), $vars);
 // #endregion
 

package/assets/sass/components/admin-panel.scss

@@ -68,17 +68,7 @@
     margin: 0 calc(var(--padding-x) * -1) rem(24) calc(var(--padding-x) * -1);
 
     &:before {
-      content: "";
       top: 100%;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      height: 1.5rem;
-      position: sticky;
-      display: block;
-      background: linear-gradient(180deg, transparent 0%, var(--colour-canvas-2) 100%);
-      z-index: 2;
-      margin-bottom: -1.5rem;
     }
   }
 

package/assets/sass/components/card.scss

@@ -2,15 +2,10 @@
 
 // #region Default card
 .card {
-  --top-padding: 2rem;
-  --right-padding: #{rem(16+16+24)};
-  --bottom-padding: 2rem;
-  --left-padding: 1rem;
-  --icon-right: 1rem;
-
+  --card-icon-right: 1rem;
+  box-shadow: var(--card-box-shadow);
+  border-radius: var(--card-border-radius);
   position: relative;
-  box-shadow: 2px 6px 12px rgba(0,0,0,0.2);
-  border-radius: rem(8);
   font-weight: bold;
   font-size: rem(18);
   line-height: rem(24);
@@ -27,13 +22,13 @@
 
   &.border-0 {
     box-shadow: none;
-    --left-padding: 0rem;
+    --card-left-padding: 0rem;
     outline-offset: 1px!important;
   }
 
   &__body {
     position: relative;
-    padding: var(--top-padding) var(--right-padding) var(--bottom-padding) var(--left-padding);
+    padding: var(--card-top-padding) var(--card-right-padding) var(--card-bottom-padding) var(--card-left-padding);
     z-index: -1;
   }
 
@@ -41,8 +36,8 @@
   &:after {
     content: "";
     position: absolute;
-    right: var(--icon-right);
-    bottom: var(--bottom-padding);
+    right: var(--card-icon-right);
+    bottom: var(--card-bottom-padding);
     height: rem(24);
     width: rem(24);
     background: var(--colour-warning);
@@ -64,11 +59,16 @@
 
   &:is(:hover,:focus,.hover) {
     --icon-right: 0.5rem;
-    outline: 2px solid var(--colour-primary);
+    outline: 2px solid var(--colour, var(--colour-primary));
     outline-offset: -2px;
 
+  }
+  
+  // Update arrow cololur
+  &:not([class*="colour-"]):is(:hover,:focus,.hover) {
+
     &:before {
-      background: var(--colour-primary);
+      background: var(--colour-primary-theme);
     }
     &:after {
       background: #ffffff;
@@ -123,20 +123,13 @@
   }
 }
 
-
 ::slotted(i){
   font-size: rem(24);
-  margin: -3px var(--icon-right) 0 0;
+  margin: -3px var(--card-icon-right) 0 0;
   font-weight: 400;
   vertical-align: middle;
 }
 
-.card--filter ::slotted(i) {
-  display: block !important;
-  height: rem(18)!important;
-  margin: 0 0 0.5rem 0!important;
-}
-
 ::slotted(span){
   display: block;
   font-weight: normal;
@@ -145,6 +138,14 @@
 }
 // #endregion
 
+// #region border left
+.card[class*="colour-"],
+.card--filter {
+  
+  border-left: rem(12) solid var(--colour,var(--colour-primary));
+}
+// #endregion
+
 //#region Filter card
 .card--filter {
   --top-padding: #{rem(24)};
@@ -152,7 +153,7 @@
   --bottom-padding: #{rem(24)};
   --left-padding: 1rem;
 
-  border-left: rem(12) solid var(--colour,var(--colour-primary));
+  //border-left: rem(12) solid var(--colour,var(--colour-primary));
 
   &:has(.card__total) .card__body{
 
@@ -202,13 +203,19 @@
     padding-right: rem(16);
   }
 }
+
+.card--filter ::slotted(i) {
+  display: block !important;
+  font-size: rem(18)!important;
+  margin: 0 0 0.5rem 0!important;
+}
 // #endregion
 
 // #region card with an image
 .card:has(.card__head) {
   .card__head {
     padding-bottom: 0;
-    padding-top: 55%;
+    padding-top: 27%;
     position: relative;
     overflow: hidden;
     background: rgba(0,0,0,0.1);
@@ -236,7 +243,7 @@
   .card__footer {
     position: relative;
     background: #ffffff;
-    padding: var(--top-padding) var(--right-padding) var(--bottom-padding) var(--left-padding);
+    padding: var(--card-top-padding) var(--card-right-padding) var(--card-bottom-padding) var(--card-left-padding);
     z-index: -1;
     display: block;
   }