@iamproperty/components 2.9.0 → 3.1.0

package/assets/sass/_functions/utilities.scss

@@ -87,113 +87,6 @@ $utilities: map-merge(
 );
 // #endregion
 
-// #region Remove the responsive classes for the spacing utilities
-/*
-The spacing utilities are useful but could be mis-used. The spacing of elements should be defined via the elements/components CSS.
-But at times tweaks/fixes to spacing needs to be made and can prevent the need of duplicate CSS to be created.
-However our spacing rules should be consistant across devices and we shouldn't allow device specific 'fixes' to be made
-Removing the resposive classes aves around 8kbs
-*/
-$utilities: map-merge(
-  $utilities,
-  (
-    // Padding
-    "padding": map-merge(
-      map-get($utilities, "padding"),
-      (
-        responsive: false
-      ),
-    ),
-    "padding-x": map-merge(
-      map-get($utilities, "padding-x"),
-      (
-        responsive: false
-      ),
-    ),
-    "padding-y": map-merge(
-      map-get($utilities, "padding-y"),
-      (
-        responsive: false
-      ),
-    ),
-    "padding-top": map-merge(
-      map-get($utilities, "padding-top"),
-      (
-        responsive: false
-      ),
-    ),
-    "padding-end": map-merge(
-      map-get($utilities, "padding-end"),
-      (
-        responsive: false
-      ),
-    ),
-    "padding-bottom": map-merge(
-      map-get($utilities, "padding-bottom"),
-      (
-        responsive: false
-      ),
-    ),
-    "padding-start": map-merge(
-      map-get($utilities, "padding-start"),
-      (
-        responsive: false
-      ),
-    ),
-    // Margin
-    "margin": map-merge(
-      map-get($utilities, "margin"),
-      (
-        responsive: false
-      ),
-    ),
-    "margin-x": map-merge(
-      map-get($utilities, "margin-x"),
-      (
-        responsive: false
-      ),
-    ),
-    "margin-y": map-merge(
-      map-get($utilities, "margin-y"),
-      (
-        responsive: false
-      ),
-    ),
-    "margin-top": map-merge(
-      map-get($utilities, "margin-top"),
-      (
-        responsive: false
-      ),
-    ),
-    "margin-end": map-merge(
-      map-get($utilities, "margin-end"),
-      (
-        responsive: false
-      ),
-    ),
-    "margin-bottom": map-merge(
-      map-get($utilities, "margin-bottom"),
-      (
-        responsive: false
-      ),
-    ),
-    "margin-start": map-merge(
-      map-get($utilities, "margin-start"),
-      (
-        responsive: false
-      ),
-    ),
-    // Gap
-    "gap": map-merge(
-      map-get($utilities, "gap"),
-      (
-        responsive: false
-      ),
-    ),
-  )
-);
-// #endregion
-
 // #region Fonts
 $utilities: map-merge(
   $utilities,
@@ -223,9 +116,9 @@ $utilities: map-merge(
       ),
       values:
       (
-        "secondary": linear-gradient(var(--bs-gradient-direction), var(--colour-secondary) 0, transparent 100%),
-        "primary": linear-gradient(var(--bs-gradient-direction), var(--colour-primary) 0, transparent 100%),
-        "info": linear-gradient(var(--bs-gradient-direction), var(--colour-info) 0, transparent 100%)
+        "secondary": linear-gradient(var(--gradient-direction), var(--colour-secondary) 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%)
       )
     )
   )

package/assets/sass/_functions/variables.scss

@@ -159,7 +159,8 @@ $vars: map-merge((
   "--colour-black-theme": rgba(to-rgb(#000000),var(--alpha,1)),
   "--colour-body":  rgba(to-rgb($colour-body),var(--alpha,1)),
   "--colour-white": rgba(to-rgb(#ffffff),var(--alpha,1)),
-  "--colour-black": rgba(to-rgb(#000000),var(--alpha,1))
+  "--colour-black": rgba(to-rgb(#000000),var(--alpha,1)),
+  "--colour-admin-theme":      #f0f0f0
 ), $vars);
 
 $gradient: linear-gradient(180deg, var(--colour-secondary) 0, var(--colour-info) 100%);
@@ -409,7 +410,7 @@ $pagination-focus-color: var(--colour-hover);
 $pagination-focus-bg: var(--colour-muted);
 
 // Active
-$pagination-active-color: var(--bs-body-bg);
+$pagination-active-color: var(--body-bg);
 $pagination-active-bg: var(--colour-heading);
 $pagination-active-border-color: var(--colour-heading);
 

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": #1ebee6,
+  "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"