@iamproperty/components 3.0.0 → 3.2.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

@@ -1,45 +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;
-        }
-      }
-    }
-  }
+@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

@@ -1,233 +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;
-        }
-      }
-    }
-  }
-}
+@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*/