@iamproperty/components 3.7.9-beta-2 → 3.8.0

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

@@ -12,7 +12,7 @@ const listHTML = `
 <li class="lead text-primary pb-1">Benjamin Lee</li>
 `;
 describe('addDataAttributes', () => {
-    let list = document.createElement('ul');
+    let list = document.createElement('div');
     list.innerHTML = listHTML;
     filterTheList(list, "Lucas");
     test('should add a class of d-none to each item except the one containing Lucas Myers', () => {

package/assets/sass/_functions/variables.scss

@@ -178,7 +178,8 @@ $non-theme-colors: map-merge((
   "btn-secondary-bg": transparent,
   "btn-secondary-bg-hover": var(--colour-primary-theme),
   "btn-secondary-hover": var(--colour-inverted),
-  "canvas-2":     var(--colour-canvas)
+  "canvas-2":     var(--colour-canvas),
+  "btn-action-hover-bg": var(--colour-light)
 ), $non-theme-colors);
 
 @each $color, $value in $non-theme-colors {
@@ -219,7 +220,8 @@ $dark-mode-functional-colors: (
   "btn-secondary-border": var(--colour-white),
   "btn-secondary-bg": transparent,
   "btn-secondary-bg-hover": var(--colour-white),
-  "btn-secondary-hover": var(--colour-primary-theme)
+  "btn-secondary-hover": var(--colour-primary-theme),
+  "btn-action-hover-bg": var(--colour-canvas-2)
 );
 
 

package/assets/sass/components/dialog.scss

@@ -183,6 +183,7 @@ dialog::backdrop {
 
   text-align: center;
 
+
   &:before {
     content: "\f05a";
     font-weight: 300;
@@ -205,6 +206,38 @@ dialog::backdrop {
     clear: both;
   }
 
+  &:has(> i):before{
+
+    display: none;
+  }
+
+  &:has(> i) > i{
+
+    display: var(--fa-display,inline-block);
+    line-height: 1;
+    font-size: 3rem;
+    @include media-breakpoint-up(md) {
+      font-size: 4rem;
+    }
+    margin-top: 0;
+    margin-bottom: rem(24);
+    line-height: 1;
+    color: var(--colour-heading);
+    clear: both;
+
+    &:has(> i){
+      position: relative;
+    }
+
+    > i:before {
+      content: "\f2ed";
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: scale(0.5) translate(-100%,0);
+    }
+  }
+
   > form:first-child button,
   > button:first-child {
     display: none;
@@ -279,7 +312,7 @@ dialog::backdrop {
       height: 2px;
       background: currentColor;
       z-index: 1;
-      opacity: 0.5;
+      background: linear-gradient(90deg, var(--colour-success) 0%, var(--colour-success) var(--progress, 0%), rgba(255,255,255,0.5) var(--progress, 0%), rgba(255,255,255,0.5) 100%);
     }
 
     button {
@@ -287,7 +320,7 @@ dialog::backdrop {
       position: relative;
       background: transparent;
       border: none;
-      color: inherit;
+      color: rgba($color: #ffffff, $alpha: 0.5);
       height: rem(24);
       line-height: rem(24);
       width: rem(24);
@@ -314,8 +347,35 @@ dialog::backdrop {
         border-radius: 50%;
       }
 
-      &:not(.active):before {
-        opacity: 0.5;
+      &:not(.active):not(.valid) {
+        
+        pointer-events: none;
+
+        &:before {
+          opacity: 0.5;
+        }
+      }
+
+      &.active {
+        color: var(--colour-white);
+      }
+      &.valid {
+        color: var(--colour-success);
+      }
+    }
+
+    @media screen and (prefers-color-scheme: dark) {
+
+      button {
+        
+        color: rgba($color: #000000, $alpha: 0.5);
+
+        &.active {
+          color: black;
+        }
+        &.valid {
+          color: var(--colour-complete);
+        }
       }
     }
   }
@@ -481,7 +541,7 @@ dialog::backdrop {
     z-index: var(--index-floating);
     min-width: rem(320);
     border-radius: rem(16);
-    width: rem(319);
+    width: rem(320);
     padding: rem(24);
 
     @include media-breakpoint-up(sm) {
@@ -490,6 +550,61 @@ dialog::backdrop {
     @include media-breakpoint-up(md) {
       width: rem(360);
     }
+
+
+    &.dialog--list {
+      
+      width: fit-content!important;
+      min-width: rem(140)!important;
+      max-width: rem(280)!important;
+      padding: rem(16);
+      margin: 0;
+
+      .btn-action {
+        border: none;
+        padding: 0;
+        margin: 0;
+        padding-block: rem(6);
+        line-height: rem(20);
+        background: none;
+        white-space: inherit;
+        max-width: 100%;
+        min-width: 100%;
+
+        &:before {
+          min-width: rem(20);
+          display: inline-block;
+        }
+
+        &::after {
+          float: right;
+        }
+      }
+
+      hr {
+        height: 2px;
+        background: var(--colour-border);
+        margin-left: -#{rem(16)};
+        margin-right: -#{rem(16)};
+        margin-block: 0.25rem;
+      }
+
+      .radio--tick {
+        margin-right: 0;
+        padding-left: 1.5rem;
+          margin-bottom: 0;
+
+        &:before {
+          left: 0;
+          font-size: 1em;
+          top: 0.75rem;
+        }
+      }
+    }
+
+    dialog[open] {
+      display: contents;
+    }
   }
 
   &.dialog__wrapper--right > dialog[open]{
@@ -569,3 +684,39 @@ dialog::backdrop {
   display: none;
 }
 // #endregion
+
+// #region mobile fullwidth view 
+@media screen and (max-width: 36em) {
+
+  dialog[open].dialog--sm-fullpage,
+  .js-enabled *:not(.dialog__wrapper) > dialog[open].dialog--multi {
+
+    min-width: 100%;
+    min-height: 100%;
+    border-radius: 0;
+    overflow-y: auto;
+
+    .btn--wrapper {
+      padding-top: rem(64);
+    }
+  }
+
+  dialog[open].dialog--sm-fullpage {
+    
+    .mh-lg {
+      max-height: none!important;
+      overflow: visible;
+    }
+
+    &:before,
+    *:first-child {
+      margin-top: auto!important;
+    }
+
+    *:last-child {
+
+      margin-bottom: auto!important;
+    }
+  }
+}
+// #endregion

package/assets/sass/components/forms.scss

@@ -9,7 +9,7 @@ label {
   color: var(--colour-heading);
   display: block;
 
-  &:has(+ input:not(:disabled):not([readonly]):not(:required):not([type='radio']):not([type='file'])):after {
+  &:has(+ input:not(:disabled):not([readonly]):not(:required):not([type='radio']):not([type='checkbox']):not([type='file'])):after {
     content: " (Optional)";
   }
 }
@@ -66,6 +66,29 @@ textarea {
 // #endregion
 
 
+// #region legend
+fieldset {
+  width: 100%;
+}
+legend {
+  font-family: $headings-font-family;
+  font-style: $headings-font-style;
+  font-weight: $headings-font-weight;
+  line-height: $headings-line-height;
+  color: $headings-color;
+  margin: 0;
+  clear: both;
+  display: block;
+  float: none;
+  font-size: rem(map-get($heading-sizes,"h4_fs"));
+  line-height: rem(map-get($heading-sizes,"h4_lh"));
+  padding-bottom: 0.5rem;
+  max-width: var(--content-max-width);
+  min-width: 100%;
+}
+
+// #endregion
+
 // #region wrappers
 div:has(> label:first-child):has(> input) {
   position: relative;
@@ -304,27 +327,38 @@ $icon-error: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' vie
 $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d='M441 103c9.4 9.4 9.4 24.6 0 33.9L177 401c-9.4 9.4-24.6 9.4-33.9 0L7 265c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l119 119L407 103c9.4-9.4 24.6-9.4 33.9 0z' fill='#0f9d58' /></svg>");
 
 
-.was-validated input:is(:invalid, .is-invalid) {
+.was-validated *:not(button):is(:invalid, .is-invalid):not(.is-valid) {
 
+  --colour-check-border: var(--colour-danger);
   border-color: var(--colour-danger);
+}
+
+.was-validated *:not(button):is(:invalid, .is-invalid):not(.is-valid) + label {
+
+  --colour-check-border: var(--colour-danger);
+  --colour-check-bg: #FCEBEC;
+}
+
+.was-validated input:is(:invalid, .is-invalid) {
 
   background-image: escape-svg($icon-error);
   background-repeat: no-repeat;
   background-position: right var(--input-padding-inline, #{rem(16)}) center;
   background-size: var(--input-lh, #{rem(20)}) var(--input-lh, #{rem(20)});;
-  
   padding-right: calc(var(--input-lh, #{rem(20)}) + var(--input-padding-inline, #{rem(16)}) + var(--input-padding-inline, #{rem(16)}));
 }
 
-.was-validated input:is(:valid, .is-valid) {
+.was-validated *:not(button):is(:valid, .is-valid):not(.is-invalid) {
 
   border-color: var(--colour-complete);
+}
+
+.was-validated input:is(:valid, .is-valid) {
 
   background-image: escape-svg($icon-tick);
   background-repeat: no-repeat;
   background-position: right var(--input-padding-inline, #{rem(16)}) center;
   background-size: var(--input-lh, #{rem(20)}) var(--input-lh, #{rem(20)});;
-  
   padding-right: calc(var(--input-lh, #{rem(20)}) + var(--input-padding-inline, #{rem(16)}) + var(--input-padding-inline, #{rem(16)}));
 }
 
@@ -339,12 +373,12 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
   display: none;
 }
 
-.was-validated:has(input:is(:invalid, .is-invalid)) .invalid-feedback {
+.was-validated:has(*:is(:invalid, .is-invalid)) .invalid-feedback {
   display: block;
 }
 // #endregion
 
-// #region radio field 
+// #region radio/checkbox field 
 input:is([type="radio"],[type="checkbox"]) {
   position: absolute;
   top: 0;
@@ -355,18 +389,21 @@ input:is([type="radio"],[type="checkbox"]) {
   margin: 0;
 }
 
-div:has(> input:is([type="radio"],[type="checkbox"])) {
+:is(div,fieldset):has(> input:is([type="radio"],[type="checkbox"])) {
   position: relative;
+
+  padding-bottom: rem(24);
 }
 
-div:has( > input[type="radio"]){
+:is(div,fieldset):has( > input[type="radio"]){
 
   --border-radius: 50%;
   --outline-width: #{rem(8)};
 }
-div:has( > input[type="checkbox"]) {
 
-  --border-radius: #{rem(6)};
+:is(div,fieldset):has( > input[type="checkbox"]) {
+
+  --border-radius: #{rem(4)};
   --outline-width: #{rem(4)};
 }
 
@@ -385,16 +422,30 @@ input:is([type="radio"],[type="checkbox"]) + label:not(:has(> iam-card)) {
   margin-right: rem(24);
   cursor: pointer;
 
+  &:has(+ span){
+    margin-bottom: 0;
+  }
+
+  &:has(+ input){
+    margin-bottom: 0;
+  }
+  
+  &:last-child {
+    
+    margin-bottom: rem(24);
+  }
+
   &:before {
     content: "";
-    border: 2px solid var(--colour-primary);
+    border: 2px solid var(--colour-check-border, var(--colour-primary));
+    background: var(--colour-check-bg, transparent);
     border-radius: var(--border-radius);
     height: rem(24);
     width: rem(24);
     display: inline-block;
     position: absolute;
     top: rem(10 - 2);
-    left: 0;
+    left: var(--outline-width);
   }
 }
 
@@ -490,7 +541,7 @@ input[type="checkbox"]:checked + label {
     border: none!important;
     outline: none!important;
     top: rem(10 - 2);
-    left: 0;
+    left: var(--outline-width);
     text-align: center;
   }
 }
@@ -504,7 +555,7 @@ input:is([type="radio"],[type="checkbox"]):is(:focus,:hover,.focus) + label {
   --tick-colour: var(--colour-muted);
 
   &:before {
-    background: var(--colour-light);
+    background: var(--colour-check-bg, var(--colour-light));
     outline: var(--outline-width) solid var(--colour-light);
   }
 }
@@ -513,7 +564,7 @@ input:is([type="radio"],[type="checkbox"]):is(:active,.active) + label {
   --tick-colour: var(--colour-light);
 
   &:before {
-    background: #E0E0E0;
+    background: var(--colour-check-bg, #E0E0E0);
     outline: var(--outline-width) solid #E0E0E0;
   }
 }
@@ -551,11 +602,6 @@ input[type="checkbox"][disabled]:checked + label {
 }
 // #endregion
 
-// #region checkbox
-
-
-// #endregion
-
 // #region Conditional reveal
 .conditional {
   display: none;

package/assets/sass/foundations/buttons.scss

@@ -90,6 +90,38 @@ a:is(:hover, :focus, .hover, :active, .active):not([disabled]) .btn-secondary,
 }
 // #endregion
 
+// #region Action button
+.btn-action {
+  background-color: var(--colour-canvas-2);
+  border: 1px solid var(--colour-muted);
+  border-radius: rem(4)!important;
+  font-weight: 400!important;
+  font-size: 1rem;
+  line-height: rem(20);
+  padding: rem(6);
+  color: var(--colour-heading);
+
+  &.btn[class*=fa-]:before {
+    margin-right: rem(6);
+  }
+
+  
+  a:is(:hover, :focus, .hover, :focus-within):not([disabled],:active, .active) &,
+  &:is(:hover, :focus, .hover, :focus-within):not([disabled],:active, .active) {
+    background: var(--colour-btn-action-hover-bg);
+  }
+
+  
+  a:is(:active, .active):not([disabled]) &,
+  &:is(:active, .active):not([disabled]) {
+    
+    filter: brightness(85%);
+    transition: background .1s, color .1s;
+    color: var(--colour-heading);
+  }
+}
+// #endregion
+
 // #region button with icon
 .btn {
   &[class*="fa-"]:before {
@@ -166,6 +198,22 @@ a:is(:hover, :focus, .hover, :active, .active):not([disabled]) .btn-secondary,
   position: relative;
   font-size: rem(20);
 
+  &.btn-sm {
+
+    font-size: 1rem; 
+    padding: rem(6)!important;
+    height: auto!important;
+    line-height: rem(20);
+    height: rem(20 + 6 + 6);
+    width: rem(20 + 6 + 6);
+    min-width: rem(20 + 6 + 6);
+
+    &:before {
+      line-height: rem(20 + 6 + 6);
+    }
+  }
+
+
   &:before {
     position: absolute;
     top: 0;