@iamproperty/components 3.1.0 → 3.4.4

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

@@ -1,194 +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 */
-
-
-
-
+@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/typography.spec.js

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

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

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