Update angular

lib/angular-ui/src/lib/atoms/radio-input/radio-input.component.spec.ts

@@ -13,6 +13,7 @@ describe('RadioInputComponent', () => {
 
     fixture = TestBed.createComponent(RadioInputComponent);
     component = fixture.componentInstance;
+    fixture.componentRef.setInput('value', 1);
     fixture.detectChanges();
   });
 

lib/angular-ui/src/lib/molecules/copy-to-clipboard/copy-to-clipboard.component.spec.ts

@@ -13,6 +13,7 @@ describe('CopyToClipboardComponent', () => {
 
     fixture = TestBed.createComponent(CopyToClipboardComponent);
     component = fixture.componentInstance;
+    fixture.componentRef.setInput('value', 'https://example.com');
     fixture.detectChanges();
   });
 

lib/angular-ui/src/lib/organisms/footer/footer.component.spec.ts

@@ -13,6 +13,7 @@ describe('FooterComponent', () => {
 
     fixture = TestBed.createComponent(FooterComponent);
     component = fixture.componentInstance;
+    fixture.componentRef.setInput('links', []);
     fixture.detectChanges();
   });
 

lib/angular-ui/src/lib/organisms/navbar/navbar.component.spec.ts

@@ -13,6 +13,8 @@ describe('NavbarComponent', () => {
 
     fixture = TestBed.createComponent(NavbarComponent);
     component = fixture.componentInstance;
+    fixture.componentRef.setInput('homeUrl', 'https://example.com');
+    fixture.componentRef.setInput('links', []);
     fixture.detectChanges();
   });
 

lib/angular-ui/src/lib/organisms/sidenav/sidenav.component.spec.ts

@@ -13,6 +13,8 @@ describe('SidenavComponent', () => {
 
     fixture = TestBed.createComponent(SidenavComponent);
     component = fixture.componentInstance;
+    fixture.componentRef.setInput('links', []);
+    fixture.componentRef.setInput('homeUrl', 'https://example.com');
     fixture.detectChanges();
   });
 

lib/styles/common.scss

@@ -1,11 +1,11 @@
-@import 'common/buttons';
-@import 'common/colors';
-@import 'common/dark-mode';
-@import 'common/dropdown';
-@import 'common/effects';
-@import 'common/elevation';
-@import 'common/icons';
-@import 'common/responsiveness';
-@import 'common/sizing';
-@import 'common/typography';
-@import 'common/utils';
+@forward 'common/buttons';
+@forward 'common/colors';
+@forward 'common/dark-mode';
+@forward 'common/dropdown';
+@forward 'common/effects';
+@forward 'common/elevation';
+@forward 'common/icons';
+@forward 'common/responsiveness';
+@forward 'common/sizing';
+@forward 'common/typography';
+@forward 'common/utils';

lib/styles/common/buttons.scss

@@ -1,5 +1,11 @@
+@use 'colors';
+@use 'dark-mode';
+@use 'effects';
+@use 'sizing';
+@use 'utils';
+
 @mixin btn-common {
-  @include no-underline;
+  @include utils.no-underline;
 
   display: inline-block;
   width: inherit;
@@ -9,32 +15,32 @@
 }
 
 @mixin transparent-btn {
-  color: $slate-900;
-  @include dark {
-    color: $slate-300;
+  color: colors.$slate-900;
+  @include dark-mode.dark {
+    color: colors.$slate-300;
   }
 
-  @include quick-transition(background-color);
+  @include effects.quick-transition(background-color);
 
   &:hover {
-    background-color: $slate-200;
+    background-color: colors.$slate-200;
 
-    @include dark {
-      background-color: $slate-800;
+    @include dark-mode.dark {
+      background-color: colors.$slate-800;
     }
   }
 
   &:active {
-    background-color: $slate-300;
+    background-color: colors.$slate-300;
 
-    @include dark {
-      background-color: $slate-700;
+    @include dark-mode.dark {
+      background-color: colors.$slate-700;
     }
   }
 }
 
 @mixin rectangular-btn {
-  @include px(4);
-  @include py(1.5);
-  border-radius: $border-radius;
+  @include sizing.px(4);
+  @include sizing.py(1.5);
+  border-radius: sizing.$border-radius;
 }

lib/styles/common/dropdown.scss

@@ -1,29 +1,35 @@
+@use 'colors';
+@use 'dark-mode';
+@use 'sizing';
+@use 'typography';
+@use 'utils';
+
 @mixin dropdown-menu-item {
   position: relative;
   display: block;
   text-align: left;
   width: 100%;
   white-space: nowrap;
 
-  @include px(4);
-  @include py(1);
-  font-weight: $font-weight-normal;
+  @include sizing.px(4);
+  @include sizing.py(1);
+  font-weight: typography.$font-weight-normal;
 
-  @include no-underline;
+  @include utils.no-underline;
 
-  color: $slate-900;
-  @include dark {
-    color: $slate-300;
+  color: colors.$slate-900;
+  @include dark-mode.dark {
+    color: colors.$slate-300;
   }
 
   &:hover {
-    color: $white;
-    background-color: $primary-800;
+    color: colors.$white;
+    background-color: colors.$primary-800;
     cursor: pointer;
 
-    @include dark {
-      color: $slate-900;
-      background-color: $slate-200;
+    @include dark-mode.dark {
+      color: colors.$slate-900;
+      background-color: colors.$slate-200;
     }
   }
 }

lib/styles/common/effects.scss

@@ -1,11 +1,14 @@
+@use 'sass:string';
+@use 'dark-mode';
+
 $ring-width: 2px;
 $ring-blur: 2px;
 $dark-ring-blur: 5px;
 
 @mixin ring($color) {
   box-shadow: 0 0 $ring-blur $ring-width $color;
 
-  @include dark {
+  @include dark-mode.dark {
     box-shadow: 0 0 $dark-ring-blur $ring-width $color;
   }
 }
@@ -19,7 +22,8 @@ $transition-timing-function: cubic-bezier(0, 0, 1, 1);
     $transition-properties: $transition-properties + $property + ', ';
   }
   // Remove the last comma and space
-  $transition-properties: str-slice($transition-properties, 1, -3);
+  $transition-properties: string.slice($transition-properties, 1, -3);
 
-  transition: #{$transition-properties} $transition-duration $transition-timing-function;
+  transition: #{$transition-properties} $transition-duration
+    $transition-timing-function;
 }

lib/styles/common/elevation.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'colors';
 
 $umbra-map: (
   0: '0px 0px 0px 0px',
@@ -84,7 +85,7 @@ $ambient-map: (
   24: '0px 9px 46px 8px',
 );
 
-$baseline-color: $black;
+$baseline-color: colors.$black;
 $umbra-opacity: 0.2;
 $penumbra-opacity: 0.14;
 $ambient-opacity: 0.12;

lib/styles/common/icons.scss

@@ -1,7 +1,9 @@
+@use 'sizing';
+
 @mixin icon($size) {
   display: inline-block;
-  height: size($size);
-  width: size($size);
+  height: sizing.size($size);
+  width: sizing.size($size);
 }
 
 @mixin icon-xs {

lib/styles/common/typography.scss

@@ -1,3 +1,5 @@
+@use 'responsiveness';
+
 $font-family-base:
   system-ui,
   -apple-system,
@@ -45,7 +47,7 @@ $font-weight-bolder: 800;
   line-height: $line-height-base * 1.1;
 
   font-size: $font-size-base * 1.1;
-  @include sm {
+  @include responsiveness.sm {
     font-size: $font-size-base * 1.3;
   }
 }
@@ -54,7 +56,7 @@ $font-weight-bolder: 800;
   line-height: $line-height-base * 1.3;
 
   font-size: $font-size-base * 1.3;
-  @include sm {
+  @include responsiveness.sm {
     font-size: $font-size-base * 1.5;
   }
 }
@@ -63,7 +65,7 @@ $font-weight-bolder: 800;
   line-height: $line-height-base * 1.5;
 
   font-size: $font-size-base * 1.5;
-  @include sm {
+  @include responsiveness.sm {
     font-size: $font-size-base * 1.7;
   }
 }
@@ -72,7 +74,7 @@ $font-weight-bolder: 800;
   line-height: $line-height-base * 1.7;
 
   font-size: $font-size-base * 1.7;
-  @include sm {
+  @include responsiveness.sm {
     font-size: $font-size-base * 1.9;
   }
 }
@@ -81,7 +83,7 @@ $font-weight-bolder: 800;
   line-height: $line-height-base * 2;
 
   font-size: $font-size-base * 2;
-  @include sm {
+  @include responsiveness.sm {
     font-size: $font-size-base * 2.2;
   }
 }

lib/styles/global.scss

@@ -1,12 +1,12 @@
-@import 'common';
+@use 'common';
 
-@import 'resets';
+@use 'resets';
 
-@import 'global/buttons';
-@import 'global/forms';
-@import 'global/icons';
-@import 'global/overlays';
-@import 'global/typography';
+@use 'global/buttons';
+@use 'global/forms';
+@use 'global/icons';
+@use 'global/overlays';
+@use 'global/typography';
 
 .sr-only {
   position: absolute;

lib/styles/global/buttons.scss

@@ -1,17 +1,24 @@
-$btn-color: $primary;
-$bn-hover-color: $primary-600;
-$btn-disabled-color: rgba($primary, 0.45);
+@use '../common/colors';
+@use '../common/dark-mode';
+@use '../common/effects';
+@use '../common/icons';
+@use '../common/sizing';
+@use '../common/utils';
+
+$btn-color: colors.$primary;
+$bn-hover-color: colors.$primary-600;
+$btn-disabled-color: rgba(colors.$primary, 0.45);
 
 .btn {
-  @include px(4);
-  @include py(1);
-  @include no-underline;
+  @include sizing.px(4);
+  @include sizing.py(1);
+  @include utils.no-underline;
 
-  border: $border-size solid transparent;
-  border-radius: $border-radius;
+  border: sizing.$border-size solid transparent;
+  border-radius: sizing.$border-radius;
   outline: none;
 
-  color: $white;
+  color: colors.$white;
   background-color: $btn-color;
   position: relative;
 
@@ -21,10 +28,10 @@ $btn-disabled-color: rgba($primary, 0.45);
   }
 
   &:focus:not(:disabled) {
-    @include ring($primary-400);
+    @include effects.ring(colors.$primary-400);
 
-    @include dark {
-      @include ring($primary-800);
+    @include dark-mode.dark {
+      @include effects.ring(colors.$primary-800);
     }
   }
 
@@ -43,7 +50,7 @@ $btn-disabled-color: rgba($primary, 0.45);
   background-color: transparent;
 
   &:hover:not(:disabled) {
-    color: $white;
+    color: colors.$white;
   }
 
   &:disabled {
@@ -60,14 +67,14 @@ $btn-disabled-color: rgba($primary, 0.45);
   align-items: center;
 
   > :not(:last-child) {
-    margin-right: size(2);
+    margin-right: sizing.size(2);
   }
 }
 
 .btn--loading {
   position: absolute;
   left: 50%;
   top: 50%;
-  @include icon-xxl;
+  @include icons.icon-xxl;
   transform: translate(-50%, -50%);
 }