From cf49ab8c1cf7d58858494a8f784407c25012cd5c Mon Sep 17 00:00:00 2001
From: Dave Skender <8432125+DaveSkender@users.noreply.github.com>
Date: Sat, 11 Nov 2023 06:27:28 -0500
Subject: [PATCH] refactor: control flow syntax (#102)

---
 .../site-card/site-card.component.html        | 11 ++--
 src/app/pages/bubbles/bubbles.component.html  | 26 +++++-----
 .../card-catalog/card-catalog.component.html  | 52 +++++++++++++------
 src/app/pages/home/home.component.html        |  8 ++-
 4 files changed, 62 insertions(+), 35 deletions(-)

diff --git a/src/app/components/site-card/site-card.component.html b/src/app/components/site-card/site-card.component.html
index aae1711..16bc09b 100644
--- a/src/app/components/site-card/site-card.component.html
+++ b/src/app/components/site-card/site-card.component.html
@@ -7,15 +7,18 @@ <h2 class="usa-card__heading">{{ card.title }}</h2>
       <div class="usa-card__img">
 
         <!-- design pattern thumbnails -->
-        <img *ngIf="!card.imageType" class="easeload" onload="this.style.opacity=1"
-          ngSrc="{{ card.image }}" width="605" height="454" priority="{{(i<6)?true:false}}" alt="" />
+        @if (!card.imageType) {
+        <img class="easeload" onload="this.style.opacity=1" ngSrc="{{ card.image }}" width="605" height="454" priority="{{(i<6)?true:false}}" alt="" />
+        }
 
         <!-- if icon is used instead (and for suggestion card) -->
-        <div *ngIf="card.imageType==='usa-icon'" class="icon-container">
-          <svg  class="usa-icon" alt="">
+        @if (card.imageType === 'usa-icon') {
+        <div class="icon-container">
+          <svg class="usa-icon" alt="">
             <use [attr.href]="'/assets/uswds/img/sprite.svg#'+card.image"></use>
           </svg>
         </div>
+        }
       </div>
     </div>
     <div class="usa-card__body">
diff --git a/src/app/pages/bubbles/bubbles.component.html b/src/app/pages/bubbles/bubbles.component.html
index 0e4d282..a994bf6 100644
--- a/src/app/pages/bubbles/bubbles.component.html
+++ b/src/app/pages/bubbles/bubbles.component.html
@@ -18,15 +18,17 @@
 <!-- FLOATING BUBBLES DESIGN PATTERN -->
 <section class="usa-section bubbles-section">
 
-    <div class="bubble" *ngFor="let card of cards; index as i">
-      <a type=button class="usa-button" href="{{ card.link }}" aria-label=""
-         [attr.style]="'background-image: url(' + card.image + ');'"
-         target="_blank" rel="noopener noreferrer nofollow">
-        <div class="bubble-overlay">
-          <div class="bubble-label">{{ card.title }}</div>
-        </div>
-      </a>
-    </div>
+  @for (card of cards; track card; let i = $index) {
+  <div class="bubble">
+    <a type=button class="usa-button" href="{{ card.link }}" aria-label=""
+      [attr.style]="'background-image: url(' + card.image + ');'"
+      target="_blank" rel="noopener noreferrer nofollow">
+      <div class="bubble-overlay">
+        <div class="bubble-label">{{ card.title }}</div>
+      </div>
+    </a>
+  </div>
+  }
 
 </section>
 
@@ -40,8 +42,8 @@
 
     It'd be difficult to do this using the standard
     <a class="usa-link usa-link--external"
-        href="https://designsystem.digital.gov/utilities/layout-grid/"
-        target="_blank"
-        rel="noopener noreferrer nofollow">Layout grid</a>.
+       href="https://designsystem.digital.gov/utilities/layout-grid/"
+       target="_blank"
+       rel="noopener noreferrer nofollow">Layout grid</a>.
   </p>
 </app-pattern-footer>
diff --git a/src/app/pages/card-catalog/card-catalog.component.html b/src/app/pages/card-catalog/card-catalog.component.html
index f6c0661..7662de0 100644
--- a/src/app/pages/card-catalog/card-catalog.component.html
+++ b/src/app/pages/card-catalog/card-catalog.component.html
@@ -21,7 +21,8 @@
   <div class="grid-container">
 
     <ul class="usa-card-group">
-      <li class="usa-card tablet:grid-col-6 tablet-lg:grid-col-4" *ngFor="let card of cards; index as i">
+      @for (card of cards; track card; let i = $index) {
+      <li class="usa-card tablet:grid-col-6 tablet-lg:grid-col-4">
         <a class="usa-card__container" id="{{ card.id }}" href="{{ card.link }}" type="button" target="_blank"
           rel="noreferrer">
           <div class="usa-card__header">
@@ -38,13 +39,16 @@ <h2 class="usa-card__heading">{{ card.title }}</h2>
           </div>
         </a>
       </li>
+      }
     </ul>
   </div>
 
   <!-- "See more" pagination in standard button group -->
-  <div class="grid-container" *ngIf="!classic">
+  @if (!classic) {
+  <div class="grid-container">
     <p class="text-center">Showing {{ cards.length }} of {{ totalCards }} cards</p>
-    <ul class="usa-button-group" *ngIf="cards.length < totalCards">
+    @if (cards.length < totalCards) {
+    <ul class="usa-button-group">
       <li class="usa-button-group__item">
         <button class="usa-button" (click)="showPage(page+1)">
           Show {{ pageSize }} more
@@ -56,17 +60,21 @@ <h2 class="usa-card__heading">{{ card.title }}</h2>
         </button>
       </li>
     </ul>
+    }
   </div>
+  }
 
   <!-- "Classic" pagination numbered index -->
   <!-- https://designsystem.digital.gov/components/pagination/ -->
-  <div class="grid-container" *ngIf="classic">
+  @if (classic) {
+  <div class="grid-container">
 
     <p class="text-center">Showing {{cardStart}}-{{cardEnd}} of {{totalCards}} cards</p>
 
     <nav aria-label="Pagination" class="usa-pagination">
       <ul class="usa-pagination__list">
-        <li class="usa-pagination__item usa-pagination__arrow" *ngIf="pages>3 && page>1">
+        @if (pages>3 && page>1) {
+        <li class="usa-pagination__item usa-pagination__arrow">
           <a role="button" class="usa-pagination__link usa-pagination__previous-page" aria-label="Previous page"
             (click)="showPage(page-1)">
             <svg class="usa-icon" aria-hidden="true" role="img">
@@ -75,34 +83,42 @@ <h2 class="usa-card__heading">{{ card.title }}</h2>
             <span class="usa-pagination__link-text">Previous</span>
           </a>
         </li>
-        <li class="usa-pagination__item usa-pagination__page-no" *ngIf="pages>3 && page>=3">
+        }
+        @if (pages>3 && page>=3) {
+        <li class="usa-pagination__item usa-pagination__page-no">
           <a role="button" class="usa-pagination__button" aria-label="First page, page 1" (click)="showPage(1)">1</a>
         </li>
-        <li class="usa-pagination__item usa-pagination__overflow" aria-label="ellipsis indicating non-visible pages"
-          *ngIf="pages>3 && page>=3">
+        <li class="usa-pagination__item usa-pagination__overflow" aria-label="ellipsis indicating non-visible pages">
           <span>…</span>
         </li>
-        <li class="usa-pagination__item usa-pagination__page-no" *ngIf="page>1">
+        }
+        @if (page>1) {
+        <li class="usa-pagination__item usa-pagination__page-no">
           <a role="button" class="usa-pagination__button" attr.aria-label="Page {{page-1}}"
             (click)="showPage(page-1)">{{page-1}}</a>
         </li>
+        }
         <li class="usa-pagination__item usa-pagination__page-no">
           <a role="button" class="usa-pagination__button usa-current" attr.aria-label="Page {{page}}"
             aria-current="page" (click)="u.scrollToStart('top')">{{page}}</a>
         </li>
-        <li class="usa-pagination__item usa-pagination__page-no" *ngIf="page+1<=pages">
-          <a role="button" class="usa-pagination__button" attr.aria-label="Page {{page+1}}"
-            (click)="showPage(page+1)">{{page+1}}</a>
+        @if (page+1<=pages) {
+        <li class="usa-pagination__item usa-pagination__page-no">
+        <a role="button" class="usa-pagination__button" attr.aria-label="Page {{page+1}}"
+          (click)="showPage(page+1)">{{page+1}}</a>
         </li>
-        <li class="usa-pagination__item usa-pagination__overflow" aria-label="ellipsis indicating non-visible pages"
-          *ngIf="pages>3 && page<=pages-2">
-          <span>…</span>
+        }
+        @if (pages>3 && page<=pages-2) {
+        <li class="usa-pagination__item usa-pagination__overflow" aria-label="ellipsis indicating non-visible pages">
+        <span>…</span>
         </li>
-        <li class="usa-pagination__item usa-pagination__page-no" *ngIf="pages>3 && page<=pages-2">
+        <li class="usa-pagination__item usa-pagination__page-no">
           <a role="button" class="usa-pagination__button" attr.aria-label="Last page, page {{pages}}"
             (click)="showPage(pages)">{{pages}}</a>
         </li>
-        <li class="usa-pagination__item usa-pagination__arrow" *ngIf="pages>3 && page!=pages">
+        }
+        @if (pages>3 && page!=pages) {
+        <li class="usa-pagination__item usa-pagination__arrow">
           <a role="button" class="usa-pagination__link usa-pagination__next-page" aria-label="Next page"
             (click)="showPage(page+1)">
             <span class="usa-pagination__link-text">Next </span>
@@ -111,9 +127,11 @@ <h2 class="usa-card__heading">{{ card.title }}</h2>
             </svg>
           </a>
         </li>
+        }
       </ul>
     </nav>
   </div>
+  }
 
 </section>
 
diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
index d50592c..ff9540e 100644
--- a/src/app/pages/home/home.component.html
+++ b/src/app/pages/home/home.component.html
@@ -23,9 +23,11 @@ <h1>
     <ul class="usa-card-group padding-top-4" id="design-patterns">
 
       <!-- cards -->
-      <li class="tablet:grid-col-6 tablet-lg:grid-col-4" *ngFor="let card of cards; index as i">
+      @for (card of cards; track card; let i = $index) {
+      <li class="tablet:grid-col-6 tablet-lg:grid-col-4">
         <app-site-card [card]="card" [i]=i />
       </li>
+      }
 
       <!-- suggest more -->
       <li class="tablet:grid-col-6 tablet-lg:grid-col-4">
@@ -40,7 +42,8 @@ <h1>
 <section class="usa-section usa-dark-background site-dark padding-top-2">
   <div class="grid-container">
 
-    <ul class="usa-button-group padding-left-2 margin-bottom-4" *ngIf="cards.length>9">
+    @if (cards.length > 9) {
+    <ul class="usa-button-group padding-left-2 margin-bottom-4">
       <li class="usa-button-group__item">
         <button class="usa-button usa-button--outline usa-button--inverse usa-button--unstyled"
           (click)="u.scrollToStart('top')">
@@ -48,6 +51,7 @@ <h1>
         </button>
       </li>
     </ul>
+    }
 
     <!-- about us -->
     <h2 class="margin-top-8">About us</h2>