@iamproperty/components 7.0.0 → 7.1.0--beta2

package/assets/sass/_print.scss

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

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

@@ -2,22 +2,23 @@
 @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);
-
+$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 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});
@@ -28,4 +29,4 @@ $test_colors: map-merge((
       }
     }
   }
-}
+}

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

@@ -81,7 +81,6 @@
 }
 /*#endregion*/
 
-
 /*#region vw*/
 @include describe('vw [func]') {
   @include it('vw function returns the correct vw size') {
@@ -230,4 +229,4 @@
     }
   }
 }
-/*#endregion*/
+/*#endregion*/

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

@@ -7,7 +7,7 @@
     // Assert the expected results
     @include assert {
       @include output {
-        @include prefix(transform,scale(2));
+        @include prefix(transform, scale(2));
       }
       @include expect {
         -webkit-transform: scale(2);
@@ -18,7 +18,7 @@
     }
     @include assert {
       @include output {
-        @include prefix(transform,scale(2),webkit);
+        @include prefix(transform, scale(2), webkit);
       }
       @include expect {
         -webkit-transform: scale(2);
@@ -35,7 +35,7 @@
     // Assert the expected results
     @include assert {
       @include output {
-        @include var(color,--colour-primary);
+        @include var(color, --colour-primary);
       }
       @include expect {
         color: var(--colour-primary);
@@ -51,7 +51,7 @@
     // Assert the expected results
     @include assert {
       @include output {
-        @include inline-text(){
+        @include inline-text() {
           color: purple;
           background: green;
         }
@@ -62,7 +62,7 @@
         ol,
         dd,
         .body,
-        table:not(.table--email) td{
+        table:not(.table--email) td {
           color: purple;
           background: green;
         }
@@ -78,7 +78,7 @@
     // Assert the expected results
     @include assert {
       @include output {
-        @include headers(){
+        @include headers() {
           color: purple;
           background: green;
         }
@@ -97,7 +97,7 @@
     }
     @include assert {
       @include output {
-        @include headers('true'){
+        @include headers('true') {
           color: purple;
           background: green;
         }
@@ -136,7 +136,7 @@
       @include output {
         $parent: '.bg-primary';
         $color: 'primary';
-        @include bg-variant($parent,$color);
+        @include bg-variant($parent, $color);
       }
       @include expect {
         .bg-primary {
@@ -158,7 +158,7 @@
       @include output {
         $parent: '.text-primary';
         $color: 'primary';
-        @include text-emphasis-variant($parent,$color);
+        @include text-emphasis-variant($parent, $color);
       }
       @include expect {
         .text-primary {
@@ -170,7 +170,6 @@
 }
 /*#endregion */
 
-
 /*#region font-size*/
 @include describe('font-size [Mixin]') {
   @include it('font-size returns') {
@@ -188,7 +187,3 @@
   }
 }
 /*#endregion */
-
-
-
-

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

@@ -2,7 +2,6 @@
 @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 {
@@ -33,4 +32,4 @@
       }
     }
   }
-}
+}

package/assets/sass/_utilities.scss

@@ -12,7 +12,7 @@
   &::before {
     display: block;
     padding-top: var(--#{$prefix}aspect-ratio);
-    content: "";
+    content: '';
   }
 
   > * {
@@ -30,7 +30,6 @@
   }
 }
 
-
 .fixed-top {
   position: fixed;
   top: 0;
@@ -71,7 +70,6 @@
   @include visually-hidden();
 }
 
-
 //@import "../bootstrap/scss/helpers/stretched-link";
 
 .text-truncate {
@@ -81,16 +79,15 @@
 //@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";
+@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);
@@ -99,7 +96,7 @@
     @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 == "") {
+      @if type-of($utility) == 'map' and (map-get($utility, responsive) or $infix == '') {
         @include generate-utility($utility, $infix);
       }
     }
@@ -131,9 +128,8 @@
   @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");
+    @if type-of($utility) == 'map' and map-get($utility, print) == true {
+      @include generate-utility($utility, '-print');
     }
   }
 }
-

package/assets/sass/components/actionbar.global.scss

@@ -1,13 +1,10 @@
-@use "../_func.scss" as *;
+@use '../_func.scss' as *;
 
 // #region Default view
 iam-actionbar {
+  background-color: #fcfcfc;
 
-  background-color: #FCFCFC;
-
-
-  @include dark-mode(){
-    
+  @include dark-mode() {
     background-color: var(--colour-canvas);
   }
 
@@ -21,17 +18,15 @@ iam-actionbar {
 
 // #region at the top
 main > .actionbar__sticky-wrapper > .actionbar__sticky > iam-actionbar {
-
-  @include light-mode(){
+  @include light-mode() {
     background-color: #e6eaec;
   }
   border-radius: rem(8);
   margin: var(--container-padding);
   margin-bottom: 2rem;
-  box-shadow: 2px 6px 12px rgba(0,0,0,0.2);
+  box-shadow: 2px 6px 12px rgba(0, 0, 0, 0.2);
 
   &:first-child {
-      
     padding-top: 0;
   }
 
@@ -42,7 +37,6 @@ main > .actionbar__sticky-wrapper > .actionbar__sticky > iam-actionbar {
   }
 
   @include media-breakpoint-up(md) {
-
     padding-inline: calc(50% - #{rem(556)} - 2rem);
   }
 }
@@ -50,25 +44,20 @@ main > .actionbar__sticky-wrapper > .actionbar__sticky > iam-actionbar {
 
 // #region As part of the iam-table component
 iam-table iam-actionbar {
-
   margin-left: 1.5rem;
   margin-right: 1.5rem;
 }
 
 .actionbar__sticky-wrapper {
-  
   container-type: inline-size;
 
   @include media-breakpoint-up(sm) {
-
-    padding: 0!important;
+    padding: 0 !important;
   }
 }
 
 @container (width < 23.4375em) {
-
   :is(iam-table, .actionbar__sticky-wrapper) > .actionbar__sticky {
-
     display: block;
     position: sticky;
     left: 0;
@@ -77,7 +66,7 @@ iam-table iam-actionbar {
     pointer-events: none;
 
     &:after {
-      content: "";
+      content: '';
       display: block;
       width: 100%;
       height: calc(100vh - #{rem(68 + 24 + 16)});
@@ -90,21 +79,18 @@ iam-table iam-actionbar {
   }
 
   :is(iam-table, .actionbar__sticky) > iam-actionbar {
-
-    pointer-events: all!important;
+    pointer-events: all !important;
     display: block;
     border: none;
     background: var(--colour-canvas-2);
     box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
     border-radius: 0.5rem;
     margin-bottom: rem(24);
-  }  
+  }
 }
 
 @include container-up(sm) {
-
   iam-table iam-actionbar {
-
     margin-left: -2rem;
     margin-right: -2rem;
     margin-top: -2rem;
@@ -114,69 +100,64 @@ iam-table iam-actionbar {
 // #endregion
 
 // #region Switchview
-iam-actionbar ~ :is([data-view="square"],[data-view="list"],[data-view="small"]) {
+iam-actionbar ~ :is([data-view='square'], [data-view='list'], [data-view='small']) {
   display: none;
 }
 
-iam-actionbar[data-view="square"] ~ [data-view="square"] {
+iam-actionbar[data-view='square'] ~ [data-view='square'] {
   display: block;
 }
-iam-actionbar[data-view="list"] ~ [data-view="list"] {
+iam-actionbar[data-view='list'] ~ [data-view='list'] {
   display: block;
 }
-iam-actionbar[data-view="small"] ~ [data-view="small"] {
+iam-actionbar[data-view='small'] ~ [data-view='small'] {
   display: block;
 }
-// #endregion 
+// #endregion
 
 // #region Child elements
 iam-actionbar {
-.actionbar__text {
-
-  font-size: rem(18);
-  line-height: rem(40);
-  color: var(--colour-heading);
-  display: inline-block;
-}
-
-// Dialog wrapper
-.dialog__wrapper[slot="selected-overflow"] > button,
-.dialog__wrapper[slot="overflow"] > button {
+  .actionbar__text {
+    font-size: rem(18);
+    line-height: rem(40);
+    color: var(--colour-heading);
+    display: inline-block;
+  }
 
-  background: none;
-  border: none;
-  text-indent: 0;
-  width: 100%;
-  display: block;
-  max-width: 100%;
-  text-align: left;
-  padding: 0;
+  // Dialog wrapper
+  .dialog__wrapper[slot='selected-overflow'] > button,
+  .dialog__wrapper[slot='overflow'] > button {
+    background: none;
+    border: none;
+    text-indent: 0;
+    width: 100%;
+    display: block;
+    max-width: 100%;
+    text-align: left;
+    padding: 0;
 
-  &:before {
-    position: static;
+    &:before {
+      position: static;
+    }
+  }
+  button[slot='overflow'],
+  button[slot='selected-overflow'] {
+    background: none;
+    border: none;
+    margin: 0 !important;
+  }
+  .dialog__wrapper[slot='selected-overflow'] dialog[open],
+  .dialog__wrapper[slot='overflow'] dialog[open] {
+    display: contents;
   }
-}
-button[slot="overflow"],
-button[slot="selected-overflow"] {
-  
-  background: none;
-  border: none;
-  margin: 0!important;
-}
-.dialog__wrapper[slot="selected-overflow"] dialog[open],
-.dialog__wrapper[slot="overflow"] dialog[open] {
-
-  display: contents;
-}
 }
 // #endregion
 
 // Select all done with vue
 
-
 iam-actionbar:has(.selectall input:checked) {
   --selectall-opacity: 1;
   --selectall-pe: all;
   --selectall-actionbar-opactiy: 0;
   --selectall-action-pe: none;
-}
+}