Merge pull request #114 from CodeGov-org/nathan/update-angular

Update angular

Author: nathanosdev

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;