@iamproperty/components 7.6.0 → 7.6.2

package/assets/sass/_example.scss

@@ -1,61 +0,0 @@
-// Include and builtin sass modules
-@use 'sass:map';
-
-// Include any local files needed, the _func file will bring in all functions and variables
-@use '_func.scss' as *;
-
-// Sass variables declared
-$root: ':root' !default;
-$layers: 'true' !default;
-
-// Each file should be added to a layer: legacy, reset, elements, components, templates, overrides or utilities
-@include layer('elements') {
-  // Try to keep the selectors as basic and easy to read as apossible
-  .element {
-    --css-variable: 3rem;
-    --second-variable: 3rem;
-
-    // Rulesets
-    // - Always use relative values with the exception of borders, text-decoration and outlines
-    // - Use globally set CSS variables as much as possible especially for cases like: font sizes and colours
-    width: 1rem;
-    border: 2px solid var(--colour-border);
-
-    // Any expanded queries should be added after all of the root rulesets
-    &:has(> i) {
-      position: relative;
-    }
-
-    // Any media queries should be added after all of the root rulesets
-    @include media-breakpoint-up(sm, $mobileOnly) {
-      min-height: rem(300);
-    }
-
-    @include media-breakpoint-up(md, $mobileOnly) {
-      min-height: rem(470);
-    }
-
-    @container style(--theme: dark) {
-      // Reset the colours of lighter backgrounds to make sure they aren't over written by dark mode. Some other tweaks to colours are applied
-      [class*='bg-']:not(.bg-canvas):not(.bg-canvas-2):not(.bg-light) {
-        color: var(--colour-body);
-      }
-    }
-
-    @media (forced-colors: active) {
-      #{$root} {
-        --contrast-outline-width: 1px;
-      }
-    }
-  }
-
-  // Extends should only be used inside of the same file and used very carefully
-  %heading {
-    font-weight: bold;
-    line-height: var(--line-height);
-  }
-
-  :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
-    @extend %heading;
-  }
-}

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

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

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

@@ -1,32 +0,0 @@
-@use 'true' as *;
-@import '../../sass/func';
-
-$test_colors: ();
-$test_colors: map-merge(
-  (
-    'primary': #00313c,
-    'secondary': #b4e6a5,
-    'success': #b4e6a5,
-    'info': #1ebee6,
-    'warning': #ffa500,
-    'danger': #dc3545,
-    'light': #eeeeee,
-    'dark': #46003c,
-  ),
-  $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.js

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

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

@@ -1,196 +0,0 @@
-@use 'true' as *;
-@use '../../sass/func' as *;
-
-/*#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: white;
-      }
-    }
-  }
-  @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*/

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

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

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

@@ -1,113 +0,0 @@
-@use 'true' as *;
-@use '../../sass/func' as *;
-
-/*#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 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

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

@@ -1,9 +0,0 @@
-/**
- * @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,35 +0,0 @@
-@use 'true' as *;
-@use '../../sass/func' as *;
-
-@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: Qanelas, 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, 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/_utility-mixins.scss

@@ -1,38 +0,0 @@
-@use 'sass:math';
-@use '_func' as *;
-
-$root: ':root' !default;
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
-
-@include layer('utilities', $layers) {
-  @include clearfix();
-  @include visually-hidden();
-  @include text-truncate();
-  @include ratio();
-  @include fixed();
-  @include sticky();
-  @include max-height();
-  @include js-display();
-  @include line-clamp();
-  @include align();
-  @include opacity();
-  @include overflow();
-  @include display();
-  @include position();
-  @include border();
-  @include sizes();
-  @include flex();
-  @include order();
-  @include margins();
-  @include paddings();
-  @include gap();
-  @include text();
-  @include colours();
-  @include gradients();
-  @include wider-colours();
-  @include pointer-events();
-  @include rounded();
-  @include visible();
-}

package/assets/sass/elements/brand.scss

@@ -1,83 +0,0 @@
-@use '../_func' as *;
-
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
-
-@include layer('elements', $layers) {
-  .brand {
-    --svg-width: #{em(380, 130)};
-
-    display: inline-flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    align-items: center;
-    padding-right: rem(16);
-    padding-bottom: rem(16);
-    min-width: 100%;
-    min-width: Min(100%, var(--svg-width));
-    font-size: rem(64);
-    @include var(color, --colour-brand);
-
-    &--sold {
-      --svg-width: #{em(247, 130)};
-    }
-
-    &--key {
-      --svg-width: #{em(228, 130)};
-    }
-
-    &--compliance,
-    &--movebutler {
-      --svg-width: #{em(740, 130)};
-    }
-
-    &--medwaylaw {
-      --svg-width: #{em(465, 130)};
-    }
-
-    &--openview {
-      --svg-width: #{em(475, 89)};
-    }
-
-    &--crm {
-      --svg-width: #{em(250, 89)};
-    }
-
-    /* Restrict the logo colours so that only text-secondary can be defined */
-    &[class*='text-']:not(.text-secondary) {
-      color: inherit !important;
-    }
-
-    svg {
-      fill: currentColor;
-      height: 1em;
-      width: 100%;
-      max-width: var(--svg-width);
-    }
-
-    span {
-      white-space: nowrap;
-      font-size: 1rem;
-      padding-left: rem(16);
-      line-height: 1;
-      font-weight: bold;
-      display: inline-block;
-      text-decoration: none;
-    }
-  }
-
-  a.brand:not(:hover):not(:focus):not(:active),
-  a:not(:hover):not(:focus):not(:active) .brand {
-    @include var(color, --colour-brand);
-  }
-
-  a.brand:hover,
-  a.brand:focus,
-  a.brand:active,
-  a:hover .brand,
-  a:focus .brand,
-  a:active .brand {
-    color: currentColor !important;
-  }
-}

package/assets/sass/elements/media.scss

@@ -1,26 +0,0 @@
-@use '../_func' as *;
-
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
-
-@include layer('elements', $layers) {
-  figure {
-    margin: 0 0 1rem;
-  }
-
-  img,
-  svg {
-    vertical-align: middle;
-  }
-
-  img {
-    max-width: 100%;
-  }
-
-  .ratio {
-    > img:first-child:last-child {
-      object-fit: cover;
-    }
-  }
-}