CN-235: remove placeholder from date-field and sort-code

projects/canopy-test-app/src/app/app.component.html

@@ -403,7 +403,6 @@ <h3>Carousel item 3</h3>
                     <lg-filter-container-panel-body>
                       <lg-date-field>
                         Date of birth
-                        <lg-hint>e.g. 05 12 1980</lg-hint>
                       </lg-date-field>
 
                       <lg-checkbox-group>
@@ -505,7 +504,6 @@ <h3>Carousel item 3</h3>
 
                   <lg-date-field formControlName="date">
                     Date of birth
-                    <lg-hint>e.g. 05 12 1980</lg-hint>
                   </lg-date-field>
 
                   <lg-checkbox-group formControlName="colors" lgMarginBottom="none">
@@ -556,7 +554,7 @@ <h3>Carousel item 3</h3>
 
                   <lg-input-field>
                     Sort Code
-                    <lg-hint>Must be 6 digits long</lg-hint>
+                    <lg-hint>Must be 6 digits long, for example 00-00-00</lg-hint>
                     <input lgInput lgSortCode formControlName="sortCode" />
                   </lg-input-field>
 

projects/canopy/src/lib/accordion/docs/accordion.stories.ts

@@ -14,15 +14,25 @@ const accordionItems = `
 <lg-accordion-item [isActive]="itemOneActive"
                    (opened)="toggle('Item 1 opened')"
                    (closed)="toggle('Item 1 closed')">
-  <lg-accordion-panel-heading><lg-icon *ngIf="iconForFirstAccordionItem" [name]="iconForFirstAccordionItem"></lg-icon>Item 1</lg-accordion-panel-heading>
+  <lg-accordion-panel-heading>
+    @if (iconForFirstAccordionItem) {
+      <lg-icon [name]="iconForFirstAccordionItem"></lg-icon>
+    }
+    Item 1
+  </lg-accordion-panel-heading>
 
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
     tempor incididunt ut labore et dolore magna aliqua.</p>
 </lg-accordion-item>
 <lg-accordion-item [isActive]="itemTwoActive"
                    (opened)="toggle('Item 3 opened')"
                    (closed)="toggle('Item 2 closed')">
-  <lg-accordion-panel-heading><lg-icon *ngIf="iconForSecondAccordionItem" [name]="iconForSecondAccordionItem"></lg-icon>Item 2</lg-accordion-panel-heading>
+  <lg-accordion-panel-heading>
+    @if (iconForSecondAccordionItem) {
+      <lg-icon [name]="iconForSecondAccordionItem"></lg-icon>
+    }
+    Item 2
+  </lg-accordion-panel-heading>
 
   <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
     ut aliquip ex ea commodo consequat. Duis aute irure dolor in
@@ -33,7 +43,12 @@ const accordionItems = `
   </button>
 </lg-accordion-item>
 <lg-accordion-item [isActive]="itemThreeActive">
-  <lg-accordion-panel-heading><lg-icon *ngIf="iconForThirdAccordionItem" [name]="iconForThirdAccordionItem"></lg-icon>Item 3 is Lazy</lg-accordion-panel-heading>
+  <lg-accordion-panel-heading>
+    @if (iconForThirdAccordionItem) {
+      <lg-icon [name]="iconForThirdAccordionItem"></lg-icon>
+    }
+    Item 3 is Lazy
+  </lg-accordion-panel-heading>
 
   <ng-template lgAccordionItemContent>
     <p>This panel content is only initialised when opened</p>

projects/canopy/src/lib/card/docs/card/card.stories.ts

@@ -71,7 +71,9 @@ const formJourneyTemplate = `
 
                     <lg-input-field [block]="true">
                       {{label}}
-                      <lg-hint *ngIf="hint">{{hint}}</lg-hint>
+                      @if (hint) {
+                        <lg-hint>{{hint}}</lg-hint>
+                      }
                       <input lgInput formControlName="accountNumber" size="8" />
                     </lg-input-field>
                   </div>
@@ -177,12 +179,12 @@ const showMoreCardTemplate = `
       <div lgMarginTop="5">
         <button lg-button type="button" variant="link" lgButtonToggle (toggleActive)="toggleActive($event)"
                 lgMarginBottom="none">
-          <ng-container *ngIf="isToggleActive">
+          @if (isToggleActive) {
             Show less
-          </ng-container>
-          <ng-container *ngIf="!isToggleActive">
+          }
+          @if (!isToggleActive) {
             Show more
-          </ng-container>
+          }
         </button>
       </div>
     </lg-card-content>
@@ -257,14 +259,16 @@ const dataPointsCardTemplate = `
   </lg-card-header>
   <lg-card-content>
     <lg-card-content-inner-data-points>
-      <lg-data-point *ngFor="let number of [].constructor(dataPoints); let i = index;">
-        <lg-data-point-label [headingLevel]="3">
-          {{data[i].label}}
-        </lg-data-point-label>
-        <lg-data-point-value>
-          {{data[i].value}}
-        </lg-data-point-value>
-      </lg-data-point>
+      @for (number of [].constructor(dataPoints); track $index; let i = $index) {
+        <lg-data-point>
+          <lg-data-point-label [headingLevel]="3">
+            {{data[i].label}}
+          </lg-data-point-label>
+          <lg-data-point-value>
+            {{data[i].value}}
+          </lg-data-point-value>
+        </lg-data-point>
+      }
     </lg-card-content-inner-data-points>
   </lg-card-content>
   <lg-card-footer lgPaddingTop="none">
@@ -328,15 +332,16 @@ const cardGroupTemplate = `
             explicabo.
           </lg-card-content>
         </lg-card>
-        <lg-card *ngFor="let i of [].constructor(additionalCards)">
-          <lg-card-header>
-            <lg-card-navigation-title title="External link title" link="https://www.landg.com"
-                                      headingLevel="2"></lg-card-navigation-title>
-          </lg-card-header>
-          <lg-card-content>
-            {{ cardContent }} <a href="#">Test link</a>.
-          </lg-card-content>
-          <lg-card-footer lgMarginTop="5" lgPaddingTop="none">
+        @for (i of [].constructor(additionalCards); track $index) {
+          <lg-card>
+            <lg-card-header>
+              <lg-card-navigation-title title="External link title" link="https://www.landg.com"
+                                        headingLevel="2"></lg-card-navigation-title>
+            </lg-card-header>
+            <lg-card-content>
+              {{ cardContent }} <a href="#">Test link</a>.
+            </lg-card-content>
+            <lg-card-footer lgMarginTop="5" lgPaddingTop="none">
             <lg-link-menu>
               <a href="" target="_blank">
                 <lg-link-menu-item>

projects/canopy/src/lib/card/docs/promotions/promotions.stories.ts

@@ -26,7 +26,9 @@ const promotionsGeneralCardTemplate = `
   <lg-card-hero-img
     [cover]="true"
     [src]="hasIcon ? '' : imgUrl">
-    <lg-brand-icon *ngIf="hasIcon" [name]="iconName" size="xs"></lg-brand-icon>
+    @if (hasIcon) {
+      <lg-brand-icon [name]="iconName" size="xs"></lg-brand-icon>
+    }
   </lg-card-hero-img>
   <lg-card-content>
     <h3 lgMarginBottom="2" class="lg-font--expressive">{{ title }}</h3>

projects/canopy/src/lib/footer/docs/footer.stories.ts

@@ -1,5 +1,4 @@
 import { Meta, moduleMetadata } from '@storybook/angular';
-import { NgFor, NgIf } from '@angular/common';
 
 import { LgFooterComponent } from '../footer.component';
 import { LgFooterNavComponent } from '../footer-nav/footer-nav.component';
@@ -51,8 +50,6 @@ export default {
         LgFooterNavItemComponent,
         LgFooterLogoComponent,
         LgFooterCopyrightComponent,
-        NgIf,
-        NgFor,
       ],
     }),
   ],
@@ -96,19 +93,23 @@ export default {
 const template = `
 <footer lg-footer>
   <lg-footer-nav variant="primary">
-    <lg-footer-nav-item *ngFor="let primaryLink of primaryLinks">
-      <a [href]="primaryLink.href" [id]="primaryLink.id" target="_blank">{{ primaryLink.text }}</a>
-    </lg-footer-nav-item>
+    @for (primaryLink of primaryLinks; track primaryLink.id) {
+      <lg-footer-nav-item>
+        <a [href]="primaryLink.href" [id]="primaryLink.id" target="_blank">{{ primaryLink.text }}</a>
+      </lg-footer-nav-item>
+    }
   </lg-footer-nav>
 
   <lg-footer-nav variant="secondary">
-    <lg-footer-nav-item *ngFor="let secondaryLink of secondaryLinks">
-      <a *ngIf="!secondaryLink.isButton; else button" [href]="secondaryLink.href" [id]="secondaryLink.id" target="_blank">{{ secondaryLink.text }}</a>
-
-      <ng-template #button>
-        <button [class]="secondaryLink.class" [id]="secondaryLink.id">{{ secondaryLink.text }}</button>
-      </ng-template>
-    </lg-footer-nav-item>
+    @for (secondaryLink of secondaryLinks; track secondaryLink.id) {
+      <lg-footer-nav-item>
+        @if (!secondaryLink.isButton) {
+          <a [href]="secondaryLink.href" [id]="secondaryLink.id" target="_blank">{{ secondaryLink.text }}</a>
+        } @else {
+          <button [class]="secondaryLink.class" [id]="secondaryLink.id">{{ secondaryLink.text }}</button>
+        }
+      </lg-footer-nav-item>
+    }
   </lg-footer-nav>
 
   <lg-footer-logo [src]="logo" [alt]="logoAlt"></lg-footer-logo>
@@ -154,9 +155,11 @@ export const StandardFooter = {
 const compactTemplate = `
 <footer lg-footer>
   <lg-footer-nav variant="secondary">
-    <lg-footer-nav-item *ngFor="let secondaryLink of secondaryLinks">
-      <a [href]="secondaryLink.href" [id]="secondaryLink.id" target="_blank">{{ secondaryLink.text }}</a>
-    </lg-footer-nav-item>
+    @for (secondaryLink of secondaryLinks; track secondaryLink.id) {
+      <lg-footer-nav-item>
+        <a [href]="secondaryLink.href" [id]="secondaryLink.id" target="_blank">{{ secondaryLink.text }}</a>
+      </lg-footer-nav-item>
+    }
   </lg-footer-nav>
 
   <lg-footer-copyright>{{ copyright }}</lg-footer-copyright>
@@ -212,15 +215,19 @@ export const CompactFooter = {
 const coBrandedTemplate = `
 <footer lg-footer>
   <lg-footer-nav variant="primary">
-    <lg-footer-nav-item *ngFor="let primaryLink of primaryLinks">
-      <a [href]="primaryLink.href" [id]="primaryLink.id" target="_blank">{{ primaryLink.text }}</a>
-    </lg-footer-nav-item>
+    @for (primaryLink of primaryLinks; track primaryLink.id) {
+      <lg-footer-nav-item>
+        <a [href]="primaryLink.href" [id]="primaryLink.id" target="_blank">{{ primaryLink.text }}</a>
+      </lg-footer-nav-item>
+    }
   </lg-footer-nav>
 
   <lg-footer-nav variant="secondary">
-    <lg-footer-nav-item *ngFor="let secondaryLink of secondaryLinks">
-      <a [href]="secondaryLink.href" [id]="secondaryLink.id" target="_blank">{{ secondaryLink.text }}</a>
-    </lg-footer-nav-item>
+    @for (secondaryLink of secondaryLinks; track secondaryLink.id) {
+      <lg-footer-nav-item>
+        <a [href]="secondaryLink.href" [id]="secondaryLink.id" target="_blank">{{ secondaryLink.text }}</a>
+      </lg-footer-nav-item>
+    }
   </lg-footer-nav>
 
   <lg-footer-logo [src]="logo" [alt]="logoAlt"></lg-footer-logo>

projects/canopy/src/lib/forms/checkbox-group/checkbox-group.component.spec.ts

@@ -11,7 +11,6 @@ import {
 } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { MockComponents } from 'ng-mocks';
-import { NgIf } from '@angular/common';
 
 import { LgHintComponent } from '../hint';
 import { LgErrorStateMatcher } from '../validation';
@@ -99,7 +98,6 @@ describe('LgCheckboxGroupComponent', () => {
         LgToggleComponent,
         LgValidationComponent,
         LgHintComponent,
-        NgIf,
         MockComponents(LgIconComponent),
       ],
       providers: [

projects/canopy/src/lib/forms/date/date-field.component.html

@@ -6,7 +6,7 @@
   <legend lg-label>
     <ng-content />
   </legend>
-  <ng-content select="lg-hint" />
+  <lg-hint>For example, 27 12 1977</lg-hint>
   <div
     class="lg-date-field__fields"
     [formGroup]="dateFormGroup"
@@ -22,7 +22,6 @@
           formControlName="date"
           inputmode="numeric"
           maxlength="2"
-          placeholder="DD"
           size="2"
           type="text"
         />
@@ -39,7 +38,6 @@
           formControlName="month"
           inputmode="numeric"
           maxlength="2"
-          placeholder="MM"
           size="3"
           type="text"
         />
@@ -56,7 +54,6 @@
           formControlName="year"
           inputmode="numeric"
           maxlength="4"
-          placeholder="YYYY"
           size="4"
           type="text"
         />