@iamproperty/components 7.1.0--beta6 → 7.2.0

package/assets/sass/{foundations/grid.scss → _grid.scss}

@@ -1,87 +1,10 @@
 @use 'sass:math';
 @use 'sass:map';
-@use '../_func' as *;
-
-// #region Main grid setup
-body {
-  --excess-space: calc((100% - var(--max-width, #{$max-width})) / 2);
-  --col-size: calc(
-    (
-        100% - max(0%, var(--excess-space)) - max(0%, var(--excess-space)) - var(--gutter, #{$gutter}) - var(
-            --gutter,
-            #{$gutter}
-          ) -
-          (var(--gap, #{$gap}) * (#{$columns - 1}))
-      ) /
-      #{$columns}
-  );
-  column-gap: var(--gap, #{$gap});
-  display: grid;
-  margin-inline: 0;
-  width: 100%;
-  $templateColumns: '';
-  @for $i from 1 to $columns {
-    $templateColumns: $templateColumns + 'var(--col-size) [col-' + $i + '-end col-'+ ($i + 1)+'-start] ';
-  }
-  grid-template-columns:
-    [full-width-start container-start] calc(var(--gutter, #{$gutter}) - var(--gap, #{$gap}))
-    [content-start col-1-start]
-    #{$templateColumns}
-    var(--col-size) [col-#{$columns}-end content-end] calc(var(--gutter, #{$gutter}) - var(--gap, #{$gap}))
-    [container-end full-width-end];
-
-  @media screen and (min-width: #{em($max-width-px * $max-scale-up)}) {
-    grid-template-columns:
-      [full-width-start] calc(var(--excess-space) - var(--gap, #{$gap}))
-      [container-start] calc(var(--gutter, #{$gutter}) - var(--gap, #{$gap}))
-      [content-start col-1-start]
-      #{$templateColumns}
-      var(--col-size) [col-#{$columns}-end content-end] calc(var(--gutter, #{$gutter}) - var(--gap, #{$gap}))
-      [container-end] calc(var(--excess-space) - var(--gap, #{$gap})) [full-width-end];
-  }
-
-  grid-template-rows: auto;
-  align-content: start;
-  justify-content: center;
-
-  & * {
-    grid-column: content;
-
-    &:where(button):not(:has(.card)) {
-      max-width: fit-content;
-      place-self: start;
-    }
-
-    &:is(div) {
-      align-content: start;
-    }
-  }
-}
-
-div:has(main) {
-  display: contents !important;
-}
+@use '_func' as *;
 
-:is(nav, main, footer) {
-  display: grid;
-  grid-column: full-width !important;
-  grid-template-columns: subgrid;
-}
-
-*:not(.row) > main:not(:has(.container:last-child)):not(:has(iam-collapsible-side:last-child)) {
-  padding-bottom: 1rem;
-}
-
-main > :is(.full-width, [class*='bg-']:has(.container), iam-header, iam-collapsible-side, iam-notification) {
-  grid-column: full-width;
-}
-
-[class*='bg-']:not([class*='col-']):has(.container) {
-  display: grid;
-  grid-column: full-width;
-  grid-template-columns: subgrid;
-}
-// #endregion
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
 
 // #region grid mixins
 @mixin grid-utilities($br: '') {
@@ -179,8 +102,99 @@ main > :is(.full-width, [class*='bg-']:has(.container), iam-header, iam-collapsi
 }
 // #endregion
 
-@if $enable-new-grid == 'true' {
+@include layer('reset', $layers) {
+  // #region Main grid setup
+  body {
+    --excess-space: calc((100% - var(--max-width, #{$max-width})) / 2);
+    --col-size: calc(
+      (
+          100% - max(0%, var(--excess-space)) - max(0%, var(--excess-space)) - var(--gutter, #{$gutter}) - var(
+              --gutter,
+              #{$gutter}
+            ) -
+            (var(--gap, #{$gap}) * (#{$columns - 1}))
+        ) /
+        #{$columns}
+    );
+    column-gap: var(--gap, #{$gap});
+    display: grid;
+    margin-inline: 0;
+    width: 100%;
+    grid-template-rows: auto;
+    align-content: start;
+    justify-content: center;
+
+    $templateColumns: '';
+
+    @for $i from 1 to $columns {
+      $templateColumns: $templateColumns + 'var(--col-size) [col-' + $i + '-end col-'+ ($i + 1)+'-start] ';
+    }
+    grid-template-columns:
+      [full-width-start container-start] calc(var(--gutter, #{$gutter}) - var(--gap, #{$gap}))
+      [content-start col-1-start]
+      #{$templateColumns}
+      var(--col-size) [col-#{$columns}-end content-end] calc(var(--gutter, #{$gutter}) - var(--gap, #{$gap}))
+      [container-end full-width-end];
+
+    @media screen and (min-width: #{em($max-width-px * $max-scale-up)}) {
+      grid-template-columns:
+        [full-width-start] calc(var(--excess-space) - var(--gap, #{$gap}))
+        [container-start] calc(var(--gutter, #{$gutter}) - var(--gap, #{$gap}))
+        [content-start col-1-start]
+        #{$templateColumns}
+        var(--col-size) [col-#{$columns}-end content-end] calc(var(--gutter, #{$gutter}) - var(--gap, #{$gap}))
+        [container-end] calc(var(--excess-space) - var(--gap, #{$gap})) [full-width-end];
+    }
+
+    & * {
+      grid-column: content;
+
+      &:where(button):not(:has(.card)) {
+        max-width: fit-content;
+        place-self: start;
+      }
+
+      &:is(div) {
+        align-content: start;
+      }
+    }
+  }
+
+  div:has(main) {
+    display: contents !important;
+  }
+
+  :is(nav, main, footer) {
+    display: grid;
+    grid-column: full-width !important;
+    grid-template-columns: subgrid;
+  }
+
+  *:not(.row) > main:not(:has(.container:last-child)):not(:has(iam-collapsible-side:last-child)) {
+    padding-bottom: 1rem;
+  }
+
+  main > :is(.full-width, [class*='bg-']:has(.container), iam-header, iam-collapsible-side, iam-notification) {
+    grid-column: full-width;
+  }
+
+  [class*='bg-']:not([class*='col-']):has(.container) {
+    display: grid;
+    grid-column: full-width;
+    grid-template-columns: subgrid;
+  }
+  // #endregion
+
   // #region Grid utility classes
+  .grid:not(.admin-panel) {
+    display: grid !important;
+    grid-template-columns: subgrid !important;
+
+    > * {
+      grid-column: var(--col-start, col-1-start) / var(--col-end, col-#{$columns}-end);
+    }
+  }
+
   *:has([class*='order-']) > *:not([class*='order-']) {
     order: 99;
   }

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

@@ -1,5 +1,5 @@
 @use 'true' as *;
-@import '../../sass/func';
+@use '../../sass/func' as *;
 
 /*#region em*/
 @include describe('em [func]') {
@@ -194,39 +194,3 @@
   }
 }
 /*#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

@@ -1,5 +1,5 @@
 @use 'true' as *;
-@import '../../sass/func';
+@use '../../sass/func' as *;
 
 /*#region prefix*/
 @include describe('prefix [Mixin]') {
@@ -29,22 +29,6 @@
 }
 /*#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') {
@@ -127,63 +111,3 @@
   }
 }
 // #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: 3rem;
-        font-size: $h1-font-size;
-      }
-    }
-  }
-}
-/*#endregion */

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

@@ -1,5 +1,5 @@
 @use 'true' as *;
-@import '../../sass/func';
+@use '../../sass/func' as *;
 
 @include describe('Font variables should be defined correctly') {
   @include it('with the body font set to Qanelas Medium') {

package/assets/sass/_utilities.scss

@@ -1,135 +1,53 @@
-// Helpers
-//@import "../bootstrap/scss/helpers";
-.clearfix {
-  @include clearfix();
-}
-
-//@import "../bootstrap/scss/helpers/colored-links";
-.ratio {
-  position: relative;
-  width: 100%;
+@use 'sass:math';
+@use 'sass:map';
+@use 'sass:meta';
+@use '_func' as *;
 
-  &::before {
-    display: block;
-    padding-top: var(--#{$prefix}aspect-ratio);
-    content: '';
-  }
+$root: ':root' !default;
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
 
-  > * {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-}
-
-@each $key, $ratio in $aspect-ratios {
-  .ratio-#{$key} {
-    --#{$prefix}aspect-ratio: #{$ratio};
-  }
-}
-
-.fixed-top {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  z-index: $zindex-fixed;
-}
+@forward '_functions/variables_old' show $utilities;
+@use '_functions/bs_utilities' as *;
 
-.fixed-bottom {
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: $zindex-fixed;
-}
-
-// Responsive sticky top and bottom
-@each $breakpoint in map-keys($grid-breakpoints) {
-  @include media-breakpoint-up($breakpoint) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-    .sticky#{$infix}-top {
-      position: sticky;
-      top: 0;
-      z-index: $zindex-sticky;
-    }
-
-    .sticky#{$infix}-bottom {
-      position: sticky;
-      bottom: 0;
-      z-index: $zindex-sticky;
-    }
-  }
-}
-
-.visually-hidden,
-.visually-hidden-focusable:not(:focus):not(:focus-within) {
+@include layer('utilities', $layers) {
+  // Missing classes that exist as mixins
+  @include clearfix();
   @include visually-hidden();
-}
-
-//@import "../bootstrap/scss/helpers/stretched-link";
-
-.text-truncate {
   @include text-truncate();
-}
-
-//@import "../bootstrap/scss/helpers/vr";
-
-// Helpers
-@import 'helpers/max-height.scss';
-@import 'helpers/dynamic.scss';
-@import 'helpers/line-clamp.scss';
-@import 'helpers/wider-colours.scss';
-
-// Utilities
-
-// Loop over each breakpoint
-@each $breakpoint in map-keys($grid-breakpoints) {
-  // Generate media query if needed
-  @include media-breakpoint-up($breakpoint) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-    // Loop over each utility property
-    @each $key, $utility in $utilities {
-      // The utility can be disabled with `false`, thus check if the utility is a map first
-      // Only proceed if responsive media queries are enabled or if it's the base media query
-      @if type-of($utility) == 'map' and (map-get($utility, responsive) or $infix == '') {
-        @include generate-utility($utility, $infix);
-      }
-    }
-  }
-}
+  @include ratio();
+  @include fixed();
+  @include sticky();
+  @include max-height();
+  @include js-display();
+  @include line-clamp();
+
+  // Loop over each breakpoint
+  @each $breakpoint in map.keys($grid-breakpoints) {
+    // Generate media query if needed
+    @include media-breakpoint-up($breakpoint, $mobileOnly) {
+      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
-// RFS rescaling
-/*
-@media (min-width: $rfs-mq-value) {
-  @each $breakpoint in map-keys($grid-breakpoints) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-    @if (map-get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
       // Loop over each utility property
       @each $key, $utility in $utilities {
         // The utility can be disabled with `false`, thus check if the utility is a map first
         // Only proceed if responsive media queries are enabled or if it's the base media query
-        @if type-of($utility) == "map" and map-get($utility, rfs) and (map-get($utility, responsive) or $infix == "") {
-          @include generate-utility($utility, $infix, true);
+        @if meta.type-of($utility) == 'map' and (map.get($utility, responsive) or $infix == '') {
+          @include generate-utility($utility, $infix);
         }
       }
     }
   }
-}
-*/
 
-// Print utilities
-@media print {
-  @each $key, $utility in $utilities {
-    // The utility can be disabled with `false`, thus check if the utility is a map first
-    // Then check if the utility needs print styles
-    @if type-of($utility) == 'map' and map-get($utility, print) == true {
-      @include generate-utility($utility, '-print');
+  // Print utilities
+  @media print {
+    @each $key, $utility in $utilities {
+      // The utility can be disabled with `false`, thus check if the utility is a map first
+      // Then check if the utility needs print styles
+      @if meta.type-of($utility) == 'map' and map.get($utility, print) == true {
+        @include generate-utility($utility, '-print');
+      }
     }
   }
 }

package/assets/sass/_utility-mixins.scss

@@ -0,0 +1,37 @@
+@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 wider-colours();
+  @include pointer-events();
+  @include rounded();
+  @include visible();
+}