@iamproperty/components 2.9.0 → 3.0.0

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

@@ -0,0 +1,45 @@
+@use 'true' as *;
+@import '../../sass/func';
+
+$test_colors: ();
+$test_colors: map-merge((
+  "primary": rgba(0, 49, 60, var(--alpha, 1)),
+  "secondary": rgba(180, 230, 165, var(--alpha, 1)),
+  "success": rgba(180, 230, 165, var(--alpha, 1)),
+  "info": rgba(30, 190, 230, var(--alpha, 1)),
+  "warning":  rgba(255, 165, 0, var(--alpha, 1)),
+  "danger": rgba(220, 53, 69, var(--alpha, 1)),
+  "light": rgba(255, 210, 210, var(--alpha, 1)),
+  "dark": rgba(70, 0, 60, var(--alpha, 1)),
+  "muted-theme": #9d9d9d,
+  "muted": var(--colour-muted-theme),
+  "border-theme": #6f6f6f,
+  "border": var(--colour-border-theme),
+  "link-theme": #00313c,
+  "link": var(--colour-link-theme),
+  "focus-theme": #000000,
+  "focus": var(--colour-focus-theme),
+  "hover-theme": #000000,
+  "hover": var(--colour-hover-theme),
+  "active-theme": #b4e6a5,
+  "active": var(--colour-active-theme),
+  "selected-theme": #b4e6a5,
+  "selected": var(--colour-selected-theme)
+), $test_colors);
+
+
+@include describe('Colour variables are added to the global var array [Variable]') {
+  @each $color, $value in $test_colors {
+
+    @include it($color+' colour variable is added to the global var array with the correct hex code') {
+      @include assert {
+        @include output {
+          color: map-get($vars, --colour-#{$color});
+        }
+        @include expect {
+          color: $value;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,233 @@
+@use 'true' as *;
+@import '../../sass/func';
+
+/*#region em*/
+@include describe('em [func]') {
+  @include it('em function returns the correct em size') {
+    // Assert the expected results
+    @include assert {
+      @include output {
+        font-size: em(16);
+      }
+      @include expect {
+        font-size: 1em;
+      }
+    }
+  }
+}
+/*#endregion*/
+
+/*#region rem*/
+@include describe('rem [func]') {
+  @include it('rem function returns the correct rem size') {
+    // Assert the expected results
+    @include assert {
+      @include output {
+        font-size: rem(16);
+      }
+      @include expect {
+        font-size: 1rem;
+      }
+    }
+  }
+}
+/*#endregion*/
+
+/*#region rem*/
+@include describe('rem [func]') {
+  @include it('rem function returns the correct rem size') {
+    // Assert the expected results
+    @include assert {
+      @include output {
+        font-size: rem(16);
+      }
+      @include expect {
+        font-size: 1rem;
+      }
+    }
+  }
+}
+/*#endregion*/
+
+/*#region vw*/
+@include describe('vw [func]') {
+  @include it('vw function returns the correct vw size') {
+    // Assert the expected results
+    @include assert {
+      @include output {
+        font-size: vw(375);
+      }
+      @include expect {
+        font-size: 4.26667vw;
+      }
+    }
+    @include assert {
+      @include output {
+        font-size: vw(768);
+      }
+      @include expect {
+        font-size: 2.08333vw;
+      }
+    }
+    @include assert {
+      @include output {
+        font-size: vw(1280);
+      }
+      @include expect {
+        font-size: 1.25vw;
+      }
+    }
+  }
+}
+/*#endregion*/
+
+
+/*#region vw*/
+@include describe('vw [func]') {
+  @include it('vw function returns the correct vw size') {
+    // Assert the expected results
+    @include assert {
+      @include output {
+        font-size: vw(375);
+      }
+      @include expect {
+        font-size: 4.26667vw;
+      }
+    }
+    @include assert {
+      @include output {
+        font-size: vw(768);
+      }
+      @include expect {
+        font-size: 2.08333vw;
+      }
+    }
+    @include assert {
+      @include output {
+        font-size: vw(1280);
+      }
+      @include expect {
+        font-size: 1.25vw;
+      }
+    }
+  }
+}
+/*#endregion*/
+
+/*#region boostrap color functions*/
+@include describe('Bootstrap colour functions dont do anything [func]') {
+  @include it('darken function returns the input without change') {
+    // Assert the expected results
+    @include assert {
+      @include output {
+        color: darken(#ffffff, 50);
+      }
+      @include expect {
+        color: #ffffff;
+      }
+    }
+  }
+  @include it('lighten function returns the input without change') {
+    // Assert the expected results
+    @include assert {
+      @include output {
+        color: lighten(#ffffff, 50);
+      }
+      @include expect {
+        color: #ffffff;
+      }
+    }
+  }
+  @include it('saturate function returns the input without change') {
+    // Assert the expected results
+    @include assert {
+      @include output {
+        color: saturate(#ffffff, 50);
+      }
+      @include expect {
+        color: #ffffff;
+      }
+    }
+  }
+  @include it('desaturate function returns the input without change') {
+    // Assert the expected results
+    @include assert {
+      @include output {
+        color: desaturate(#ffffff, 50);
+      }
+      @include expect {
+        color: #ffffff;
+      }
+    }
+  }
+  @include it('adjust-hue function returns the input without change') {
+    // Assert the expected results
+    @include assert {
+      @include output {
+        color: adjust-hue(#ffffff, 50);
+      }
+      @include expect {
+        color: #ffffff;
+      }
+    }
+  }
+  @include it('tint function returns the input without change') {
+    // Assert the expected results
+    @include assert {
+      @include output {
+        color: tint(#ffffff, 50);
+      }
+      @include expect {
+        color: #ffffff;
+      }
+    }
+  }
+  @include it('shade function returns the input without change') {
+    // Assert the expected results
+    @include assert {
+      @include output {
+        color: shade(#ffffff, 50);
+      }
+      @include expect {
+        color: #ffffff;
+      }
+    }
+  }
+}
+/*#endregion*/
+
+/*#region breakpoint-max*/
+@include describe('breakpoint-max [func]') {
+  @include it('breakpoint-max func creates a max-width media query') {
+    // Assert the expected results
+    @include assert {
+      @include output {
+        $name: 'sm';
+        $max: breakpoint-max($name);
+        @media (max-width: $max) {
+          color: red;
+        }
+      }
+      @include expect {
+        @media (max-width: 35.98em) {
+          color: red;
+        }
+      }
+    }
+    @include assert {
+      @include output {
+        $name: 'md';
+        $max: breakpoint-max($name);
+        @media (max-width: $max) {
+          color: red;
+        }
+      }
+      @include expect {
+        @media (max-width: 61.98em) {
+          color: red;
+        }
+      }
+    }
+  }
+}
+/*#endregion*/

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

@@ -0,0 +1,194 @@
+@use 'true' as *;
+@import '../../sass/func';
+
+/*#region prefix*/
+@include describe('prefix [Mixin]') {
+  @include it('prefix mixin duplicates the rule with the assigned prefixes') {
+    // Assert the expected results
+    @include assert {
+      @include output {
+        @include prefix(transform,scale(2));
+      }
+      @include expect {
+        -webkit-transform: scale(2);
+        -ms-transform: scale(2);
+        -o-transform: scale(2);
+        transform: scale(2);
+      }
+    }
+    @include assert {
+      @include output {
+        @include prefix(transform,scale(2),webkit);
+      }
+      @include expect {
+        -webkit-transform: scale(2);
+        transform: scale(2);
+      }
+    }
+  }
+}
+/*#endregion*/
+
+/*#region var*/
+@include describe('var [Mixin]') {
+  @include it('Var mixin returns the colour heading as a CSS variable') {
+    // Assert the expected results
+    @include assert {
+      @include output {
+        @include var(color,--colour-primary);
+      }
+      @include expect {
+        color: var(--colour-primary);
+      }
+    }
+  }
+}
+/*#endregion*/
+
+/*#region inline-text*/
+@include describe('inline-text[Mixin]') {
+  @include it('inline-text returns selecters prefixed with inline element selectors') {
+    // Assert the expected results
+    @include assert {
+      @include output {
+        @include inline-text(){
+          color: purple;
+          background: green;
+        }
+      }
+      @include expect {
+        p,
+        ul,
+        ol,
+        dd,
+        .body,
+        table:not(.table--email) td{
+          color: purple;
+          background: green;
+        }
+      }
+    }
+  }
+}
+/*#endregion */
+
+// #region headers
+@include describe('headers[Mixin]') {
+  @include it('headers returns selecters prefixed with the header selectors') {
+    // Assert the expected results
+    @include assert {
+      @include output {
+        @include headers(){
+          color: purple;
+          background: green;
+        }
+      }
+      @include expect {
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+          color: purple;
+          background: green;
+        }
+      }
+    }
+    @include assert {
+      @include output {
+        @include headers('true'){
+          color: purple;
+          background: green;
+        }
+      }
+      @include expect {
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+          color: purple;
+          background: green;
+        }
+
+        .h1,
+        .h2,
+        .h3,
+        .h4,
+        .h5,
+        .h6 {
+          color: purple;
+          background: green;
+        }
+      }
+    }
+  }
+}
+// #endregion
+
+/*#region bg-variant*/
+@include describe('bg-variant [Mixin]') {
+  @include it('bg-variant returns the correct css variable') {
+    // Assert the expected results
+    @include assert {
+      @include output {
+        $parent: '.bg-primary';
+        $color: 'primary';
+        @include bg-variant($parent,$color);
+      }
+      @include expect {
+        .bg-primary {
+          --bg-colour: var(--colour-primary);
+          --bg-colour-tint: var(--colour-primary-tint);
+          background-color: var(--colour-primary) !important;
+        }
+      }
+    }
+  }
+}
+/*#endregion */
+
+/*#region text-emphasis-variant*/
+@include describe('text-emphasis-variant [Mixin]') {
+  @include it('text-emphasis-variant returns') {
+    // Assert the expected results
+    @include assert {
+      @include output {
+        $parent: '.text-primary';
+        $color: 'primary';
+        @include text-emphasis-variant($parent,$color);
+      }
+      @include expect {
+        .text-primary {
+          color: var(--colour-primary) !important;
+        }
+      }
+    }
+  }
+}
+/*#endregion */
+
+
+/*#region font-size*/
+@include describe('font-size [Mixin]') {
+  @include it('font-size returns') {
+    // Assert the expected results
+    @include assert {
+      @include output {
+        @include font-size($h1-font-size);
+        @include font-size($h1-font-size, 'true');
+      }
+      @include expect {
+        font-size: var(--fs-1);
+        font-size: $h1-font-size;
+      }
+    }
+  }
+}
+/*#endregion */
+
+
+
+

package/assets/sass/_tests/sass.spec.js

@@ -0,0 +1,9 @@
+/**
+ * @jest-environment node
+ */
+
+const path = require('path');
+const sassTrue = require('sass-true');
+
+const sassFile = path.join(__dirname, 'colours.spec.scss');
+sassTrue.runSass({ file: sassFile }, { describe, it });

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

@@ -0,0 +1,36 @@
+@use 'true' as *;
+@import '../../sass/func';
+
+@include describe('Font variables should be defined correctly') {
+
+  @include it('with the body font set to Qanelas Medium') {
+    @include assert {
+      @include output {
+        font-family: map-get($vars, --font-body);
+      }
+      @include expect {
+        font-family: qanelasmedium, arial, sans-serif;
+      }
+    }
+  }
+  @include it('with the header font set to Qanelas Soft') {
+    @include assert {
+      @include output {
+        font-family: map-get($vars, --font-heading);
+      }
+      @include expect {
+        font-family: qanelas_softextrabold, arial, sans-serif;
+      }
+    }
+  }
+  @include it('with the header font weight set to 700') {
+    @include assert {
+      @include output {
+        font-weight: map-get($vars, --heading-weight);
+      }
+      @include expect {
+        font-weight: 700;
+      }
+    }
+  }
+}

package/assets/sass/components/alert.scss

@@ -7,7 +7,7 @@
     padding: 1.5rem;
     margin-bottom: 2rem;
     @include border-radius($alert-border-radius);
-    //--bs-bg-opacity: 0.5;
+    //--bg-opacity: 0.5;
 
     &:not(.bg-primary):not(.bg-dark):not(.bg-danger) {
       --colour-body: black;

package/assets/sass/components/cardDeck.scss

@@ -72,7 +72,7 @@
       display: grid;
       grid-template-columns: 1fr 1fr 41.66666667%; 
       grid-template-rows: auto auto auto; 
-      gap: var(--bs-gutter-y) var(--bs-gutter-x); 
+      gap: var(--gutter-y) var(--gutter-x); 
       grid-template-areas: 
         "featured featured card2"
         "featured featured card3"

package/assets/sass/components/carousel.scss

@@ -11,11 +11,11 @@
 
   .carousel__inner {
 
-    --bs-gutter-x: #{$grid-gutter-width};
+    --gutter-x: #{$grid-gutter-width};
     overflow: auto;
     scroll-snap-type: x mandatory;
-    margin-right: calc(var(--bs-gutter-x) * -.5);
-    margin-left: calc(var(--bs-gutter-x) * -.5);   
+    margin-right: calc(var(--gutter-x) * -.5);
+    margin-left: calc(var(--gutter-x) * -.5);   
 
     > .row {
       flex-wrap: nowrap;
@@ -25,7 +25,7 @@
         padding-top: rem(36);
         padding-bottom: rem(24);
         scroll-snap-align: start;
-        scroll-padding: calc(var(--bs-gutter-x) * -1);
+        scroll-padding: calc(var(--gutter-x) * -1);
       }
     }
   }

package/assets/sass/components/charts.scss

@@ -514,7 +514,7 @@ $chart-colors: map-merge((
   }
 
   .pie foreignObject {
-    background: var(--bs-body-bg);
+    background: var(--body-bg);
     border-radius: 50%;
     z-index: var(--index-focus);
     pointer-events: none;

package/assets/sass/components/nav.scss

@@ -5,6 +5,7 @@
   
   background: var(--colour-primary);
   color: white;
+
   @if $compatible != "true" {
     
     @include invert-colours();
@@ -160,7 +161,7 @@
     font-size: rem(18);
     text-indent: 0;
     overflow: visible;
-    color: var(--colour-primary);
+    color: var(--colour-body);
     height: rem(48);
     line-height: rem(48);
     display: block;
@@ -399,7 +400,7 @@ nav + main > *:first-child {
   position: absolute;
   top: 0;
   left: 100%;
-  background: white;
+  background: var(--body-bg);
   z-index: 2;
   width: 100%;
   overscroll-behavior: contain;
@@ -690,6 +691,8 @@ nav + main > *:first-child {
           
           @include reset-colours();
 
+          --colour-admin: var(--colour-admin-theme);
+
           li {
             
             padding-inline: rem(24);

package/assets/sass/components/stepper.scss

@@ -5,7 +5,7 @@
   display: flex;
   flex-wrap: wrap;
   margin-bottom: 2rem;
-  border: 1px solid var(--bs-body-bg);
+  border: 1px solid var(--body-bg);
   overflow: hidden;
 
   @include media-breakpoint-up(md) {
@@ -17,7 +17,7 @@
   ol {
     margin: 0;
     z-index: 1;
-    background: var(--bs-body-bg);
+    background: var(--body-bg);
     counter-reset: section;
     width: 100%;
     overflow: auto;
@@ -40,7 +40,7 @@
     li {
       width: 100%;
       max-width: 100%;
-      background: var(--bs-body-bg);
+      background: var(--body-bg);
       padding: 1px;
 
       @include media-breakpoint-up(sm) {

package/assets/sass/elements/panel.scss

@@ -3,7 +3,7 @@
 .admin-panel {
   --panel-gutter: 1rem;
   --panel-tab-colour: #fafafa;
-  background: var(--bs-body-bg);
+  background: var(--body-bg);
 
   &.bg-secondary{
 
@@ -113,7 +113,7 @@
   margin-right: calc(var(--panel-gutter) * -1);
   display: flex;
   flex-direction: column;
-  background-color: var(--bs-body-bg);
+  background-color: var(--body-bg);
   border-bottom: 2px solid var(--colour-border-light);
   margin-bottom: var(--panel-gutter);
 
@@ -155,7 +155,7 @@
   .current {
     
     --is-current: 1;
-    --panel-tab-colour: var(--bs-body-bg);;
+    --panel-tab-colour: var(--body-bg);;
     --panel-tab-border: var(--colour-secondary);
     pointer-events: none;
   }

package/assets/sass/elements/tooltips.scss

@@ -25,7 +25,7 @@
   left: 50%;
   min-width: max(120%, #{rem(100)});
   transform: translate(-50%,0);
-  background: var(--bs-body-bg);
+  background: var(--body-bg);
   color: inherit;
   padding: 0.5em;
   border-radius: 3px;

package/assets/sass/foundations/root.scss

@@ -18,10 +18,10 @@
   }
 
   // Extra vars needed
-  --bs-body-bg: white;
+  --body-bg: white;
   --colour-underline: var(--colour-primary);
   --colour-heading: var(--colour-primary);
-  --alpha: var(--bs-bg-opacity,1);
+  --alpha: var(--bg-opacity,1);
   --#{$variable-prefix}gradient: #{$gradient};
   --content-max-width: #{$content-max-width};
   --colour-brand: var(--colour-primary);
@@ -37,7 +37,7 @@
 // Dark mode; functional colours get updated
 @media screen and (prefers-color-scheme: dark) {
   :root {
-    --bs-body-bg: var(--colour-primary);
+    --body-bg: var(--colour-primary);
     --colour-admin: var(--colour-primary);
     @include invert-colours();
   }
@@ -77,7 +77,7 @@
 
   // Slight colour adjustments on the light background to match brand guidelines
   .bg-light[class*="bg-"]:not(.bg-primary):not(.bg-dark):not(.bg-danger):not(.prevent-invert) {
-    --bs-body-bg: var(--colour-light);
+    --body-bg: var(--colour-light);
     --colour-heading: var(--colour-dark);
     color: var(--colour-dark);
   }