@iamproperty/components 2.7.9 → 3.0.0

package/assets/sass/_print.scss

@@ -1,62 +1,62 @@
-@use "_func" as *;
-
-$printMedia: print!default;
-@media #{$printMedia} {
-  :root {
-  --content-max-width: 100%;
-  }
-  html {
-    font-size: 11pt;
-    padding-left: 10px;
-    padding-right: 10px;
-
-    body {
-      background: white;
-      height: auto;
-      min-height: 100%;
-    }
-  }
-  .container {
-    padding-left: 0;
-    padding-right: 0;
-    overflow: hidden;
-  }
-  .print-header {
-    background-image: linear-gradient(45deg, var(--colour-secondary) 0%, transparent 80%) !important;
-  }
-  p a[href^=http]:after,
-  p a[href^=mailto]:after,
-  a.youtube-embed:after {
-    content: " (" attr(href) ")";
-    display: inline!important;
-    color: inherit;
-    mask: none;
-    -webkit-mask: none;
-    background: none;
-  }
-
-  // Nav fixes 
-  .nav {
-    position: relative;
-    box-shadow: none!important;
-  }
-  .nav [class*="col"]:not(.nav__logo){
-    display: none;
-  }
-  nav + main > *:first-child {
-    padding-top: 0;
-  }
-}
-@media print {
-  
-  html {
-    padding: 0;
-  }
-  
-  tr, img, svg, li {
-    break-inside: avoid;
-  }
-  [class*="bg-"]:not(.print-header) {
-    background: none!important;
-  }
+@use "_func" as *;
+
+$printMedia: print!default;
+@media #{$printMedia} {
+  :root {
+  --content-max-width: 100%;
+  }
+  html {
+    font-size: 11pt;
+    padding-left: 10px;
+    padding-right: 10px;
+
+    body {
+      background: white;
+      height: auto;
+      min-height: 100%;
+    }
+  }
+  .container {
+    padding-left: 0;
+    padding-right: 0;
+    overflow: hidden;
+  }
+  .print-header {
+    background-image: linear-gradient(45deg, var(--colour-secondary) 0%, transparent 80%) !important;
+  }
+  p a[href^=http]:after,
+  p a[href^=mailto]:after,
+  a.youtube-embed:after {
+    content: " (" attr(href) ")";
+    display: inline!important;
+    color: inherit;
+    mask: none;
+    -webkit-mask: none;
+    background: none;
+  }
+
+  // Nav fixes 
+  .nav {
+    position: relative;
+    box-shadow: none!important;
+  }
+  .nav [class*="col"]:not(.nav__logo){
+    display: none;
+  }
+  nav + main > *:first-child {
+    padding-top: 0;
+  }
+}
+@media print {
+  
+  html {
+    padding: 0;
+  }
+  
+  tr, img, svg, li {
+    break-inside: avoid;
+  }
+  [class*="bg-"]:not(.print-header) {
+    background: none!important;
+  }
 }

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;
+      }
+    }
+  }
+}