chore: update packages (#34)

Signed-off-by: Dave Skender <[email protected]>
facioquo · Jun 21, 2023 · 180fb5d · 180fb5d
1 parent 2a0573a
commit 180fb5d
Show file tree

Hide file tree

Showing 9 changed files with 1,096 additions and 1,719 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "learn-uswds",
+  "name": "uswds-design-patterns",
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
@@ -8,25 +8,24 @@
     "build.prod": "ng build --configuration=production",
     "watch": "ng build --watch --configuration development"
   },
-  "private": true,
   "dependencies": {
-    "@angular/animations": "16.0.5",
-    "@angular/common": "16.0.5",
-    "@angular/compiler": "16.0.5",
-    "@angular/core": "16.0.5",
-    "@angular/forms": "16.0.5",
-    "@angular/platform-browser": "16.0.5",
-    "@angular/platform-browser-dynamic": "16.0.5",
-    "@angular/router": "16.0.5",
+    "@angular/animations": "16.1.1",
+    "@angular/common": "16.1.1",
+    "@angular/compiler": "16.1.1",
+    "@angular/core": "16.1.1",
+    "@angular/forms": "16.1.1",
+    "@angular/platform-browser": "16.1.1",
+    "@angular/platform-browser-dynamic": "16.1.1",
+    "@angular/router": "16.1.1",
     "@uswds/uswds": "3.5.0",
     "rxjs": "7.8.1",
     "tslib": "2.5.3",
-    "zone.js": "0.13.0"
+    "zone.js": "0.13.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "16.0.5",
-    "@angular/cli": "16.0.5",
-    "@angular/compiler-cli": "16.0.5",
+    "@angular-devkit/build-angular": "16.1.0",
+    "@angular/cli": "16.1.0",
+    "@angular/compiler-cli": "16.1.1",
     "typescript": "5.0.4"
   }
 }
diff --git a/sass/_site.scss b/sass/_site.scss
@@ -40,10 +40,11 @@
   }
 
   h4 {
-    @include u-font-size("sans", 8);
+    @include u-font-size("sans", 7);
+    margin-top: 1.5rem;
 
     @include at-media-max("mobile-lg") {
-      @include u-font-size("sans", 7);
+      @include u-font-size("sans", 6);
     }
   }
 

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { ExtraOptions, RouterModule, Routes } from '@angular/router';
 
 // define app module routes here, e.g., to lazily load a page module
 // do not place feature module routes here
@@ -19,8 +19,13 @@ const routes: Routes = [
   }
 ];
 
+const routerOptions: ExtraOptions = {
+  useHash: false,
+  anchorScrolling: 'enabled'
+};
+
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [RouterModule.forRoot(routes, routerOptions)],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,8 +1,22 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent { }
+export class AppComponent implements OnInit {
+
+
+  ngOnInit(): void {
+
+    // remove after 2023
+    // unregister our prior PWA service worker
+    navigator.serviceWorker.getRegistration()
+      .then((registration) => {
+        if (registration) {
+          registration.unregister();
+        }
+      });
+  }
+}
diff --git a/src/app/components/site-identifier/site-identifier.component.scss b/src/app/components/site-identifier/site-identifier.component.scss
@@ -3,6 +3,10 @@
 
 // IDENTIFIER
 
+.usa-identifier {
+  @include typeset($theme-identifier-font-family, "sm", 2);
+}
+
 .usa-identifier__logo-img {
   opacity: 0.8;
   height: 48px;

diff --git a/src/app/pages/card-catalog/catalog.component.html b/src/app/pages/card-catalog/catalog.component.html
@@ -20,7 +20,7 @@ <h1>Card catalog</h1>
     <p class="usa-prose">
       A card catalog using the U.S. Web Design System <a class="usa-link usa-link--external"
         href="https://designsystem.digital.gov/components/card/" target="_blank">Card</a> component with "see more"
-      pagination. Learn more about <a class="usa-link" routerLink="./" fragment="info">our modifications</a> at the
+      pagination. Learn more about <a class="usa-link" routerLink="./" fragment="info">this design pattern</a> at the
       bottom of this page.
     </p>
 
@@ -87,16 +87,16 @@ <h3>Cards</h3>
         alignment of its elements when sizes for images, card titles, and descriptions vary.
       </p>
 
-      <p>What we changed:</p>
+      <h4>What we changed:</h4>
 
       <ul class="usa-list">
         <li>Card image box uses a <a class="usa-link usa-link--external"
             href="https://web.dev/patterns/layout/aspect-ratio-image-card/">fixed aspect ratio</a> to ensure a
           consistent size.</li>
         <li>Card title and summary sections are fixed to 2 and 3 lines to ensure a consistent size. We limited the max
           allowable raw text, so overflow is rare. Ellipses indicate overflows ...</li>
-        <li>Full card is clickable to maximize the size of click/touch target surface (we also removed the button).</li>
-        <li>A hover shadow effect is applied to emphasize and clarify clickability and to give haptic response.</li>
+        <li>Full card is clickable to maximize the click/touch target (we also removed the button).</li>
+        <li>A hover shadow effect provides a haptic response to emphasize clickability.</li>
         <li>Images ease in on load to reduce the visual "pop" that occurs on late arrival.</li>
       </ul>
 
@@ -108,21 +108,29 @@ <h3>Pagination</h3>
           href="https://designsystem.digital.gov/components/pagination/" target="_blank">Pagination</a>.
       </p>
 
-      <p>What we changed:</p>
+      <h4>What we changed:</h4>
 
       <ul class="usa-list">
-        <li><strong>See more</strong> and <strong>Show all</strong> pagination uses JavaScript to add the next page(s)
-          data to the card collection.</li>
-        <li>Smooth scroll to position first new items added to the card collection.</li>
+        <li><strong>See more</strong> and <strong>Show all</strong> pagination adds next page(s) cards
+          to the collection.</li>
         <li>Lazy load images so only nearby images download and render.</li>
+        <li>Optionally, auto-scroll to reposition page to new cards.</li>
+
+        <!-- enable auto-scroll -->
+        <div class="enable-scroll">
+          <div class="usa-checkbox">
+            <input class="usa-checkbox__input" id="enable-autoscroll" type="checkbox" name="auto-scroll"
+              [checked]="autoScroll" (change)="autoScroll = !autoScroll" />
+            <label class="usa-checkbox__label" for="enable-autoscroll">Turn on auto-scroll</label>
+          </div>
+        </div>
       </ul>
 
-      <p>Use caution with large catalogs:</p>
+      <h4>Use caution with large catalogs:</h4>
 
       <ul class="usa-list">
-        <li><strong>Show all</strong> should not be used with massive catalogs where showing all would impact page
-          performance.</li>
-        <li>For massive data collections, offload initial cards that exceed your limit with each subsequent <strong>Show
+        <li><strong>Show all</strong> should not be used with large catalogs that impact page performance.</li>
+        <li>For large data collections, offload initial cards that exceed a max limit with each subsequent <strong>Show
             more</strong> command. A <strong>See previous</strong> button can be used at the top of your catalog to
           similarly restore.</li>
       </ul>

diff --git a/src/app/pages/card-catalog/catalog.component.scss b/src/app/pages/card-catalog/catalog.component.scss
@@ -5,6 +5,7 @@
 @forward "usa-card";
 @forward "usa-button";
 @forward "usa-button-group";
+@forward "usa-checkbox";
 
 .catalog-section {
 
@@ -91,9 +92,23 @@
 // that does not have a performant caching approach
 .easeload {
   opacity: 0;
-  -webkit-transition: all 1s ease;
-  -moz-transition: all 1s ease;
-  -ms-transition: all 1s ease;
-  -o-transition: all 1s ease;
-  transition: all 1s ease;
+  -webkit-transition: all 0.8s ease;
+  -moz-transition: all 0.8s ease;
+  -ms-transition: all 0.8s ease;
+  -o-transition: all 0.8s ease;
+  transition: all 0.8s ease;
+}
+
+// enable auto-scroll
+.enable-scroll {
+
+  .usa-checkbox {
+    background-color: unset;
+    width: fit-content;
+  }
+
+  .usa-checkbox__label {
+    margin: 0;
+    color: color($theme-color-base-light);
+  }
 }
diff --git a/src/app/pages/card-catalog/catalog.component.ts b/src/app/pages/card-catalog/catalog.component.ts
@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { Meta } from '@angular/platform-browser';
 import { UtilityService } from 'src/app/services/utility.service';
 import { Card } from 'src/app/components/site-card/card.model';
@@ -15,10 +14,10 @@ import { Image } from './image.model';
 export class CatalogComponent implements OnInit {
 
   images: Image[] = picList;
+  autoScroll = false;
 
   constructor(
     public readonly u: UtilityService,
-    private readonly http: HttpClient,
     private meta: Meta
   ) {
     this.meta.addTags([
@@ -38,7 +37,6 @@ export class CatalogComponent implements OnInit {
 
     // show first page
     this.showMore(false);
-    console.log("images", this.images);
   }
 
   showMore(doScroll: boolean): void {
@@ -75,7 +73,7 @@ export class CatalogComponent implements OnInit {
       }
     }
 
-    if (doScroll) this.u.scrollToStart(scrollId, 500);
+    if (doScroll && this.autoScroll) this.u.scrollToStart(scrollId, 500);
   }
 
   showAll(): void {
@@ -90,6 +88,7 @@ export class CatalogComponent implements OnInit {
     }
 
     // scroll to first new card
-    this.u.scrollToStart(`card-${nextCard.id}`, 500);
+    if (this.autoScroll)
+      this.u.scrollToStart(`card-${nextCard.id}`, 500);
   }
 }