fix: fix PR review issues

Legal-and-General · Apr 22, 2024 · 0429c15 · 0429c15
1 parent 843d19d
commit 0429c15
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 109 deletions.
diff --git a/projects/canopy/src/lib/forms/checkbox-group/checkbox-group.component.spec.ts b/projects/canopy/src/lib/forms/checkbox-group/checkbox-group.component.spec.ts
@@ -7,10 +7,7 @@ import {
   FormsModule,
   ReactiveFormsModule,
   Validators,
-  AbstractControl,
-  ɵGetProperty,
-  ɵTypedOrUntyped,
-  ɵFormGroupRawValue,
+  NgControl,
 } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { MockComponents } from 'ng-mocks';
@@ -69,12 +66,7 @@ class TestCheckboxGroupComponent {
     });
   }
 
-  isControlInvalid(
-    control: AbstractControl<
-      ɵGetProperty<ɵTypedOrUntyped<never, ɵFormGroupRawValue<never>, never>, 'color'>
-    >,
-    form: FormGroupDirective,
-  ) {
+  isControlInvalid(control: NgControl, form: FormGroupDirective) {
     return this.errorState.isControlInvalid(control, form);
   }
 

diff --git a/projects/canopy/src/lib/forms/toggle/toggle.component.spec.ts b/projects/canopy/src/lib/forms/toggle/toggle.component.spec.ts
@@ -7,10 +7,7 @@ import {
   FormsModule,
   ReactiveFormsModule,
   Validators,
-  AbstractControl,
-  ɵGetProperty,
-  ɵTypedOrUntyped,
-  ɵFormGroupRawValue,
+  NgControl,
 } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { MockComponents, MockDirective } from 'ng-mocks';
@@ -79,12 +76,7 @@ class TestToggleComponent {
     });
   }
 
-  isControlInvalid(
-    control: AbstractControl<
-      ɵGetProperty<ɵTypedOrUntyped<never, ɵFormGroupRawValue<never>, never>, 'umbrella'>
-    >,
-    form: FormGroupDirective,
-  ) {
+  isControlInvalid(control: NgControl, form: FormGroupDirective) {
     return this.errorState.isControlInvalid(control, form);
   }
 }
@@ -137,12 +129,7 @@ class TestToggleVariantSelectorComponent {
     });
   }
 
-  isControlInvalid(
-    control: AbstractControl<
-      ɵGetProperty<ɵTypedOrUntyped<never, ɵFormGroupRawValue<never>, never>, 'umbrella'>
-    >,
-    form: FormGroupDirective,
-  ) {
+  isControlInvalid(control: NgControl, form: FormGroupDirective) {
     return this.errorState.isControlInvalid(control, form);
   }
 }

diff --git a/projects/canopy/src/lib/link-menu/link-menu-item/link-menu-item.component.spec.ts b/projects/canopy/src/lib/link-menu/link-menu-item/link-menu-item.component.spec.ts
@@ -9,7 +9,7 @@ import { LgLinkMenuItemTextComponent } from '../link-menu-item-text/link-menu-it
 import { LgLinkMenuItemComponent } from './link-menu-item.component';
 
 @Component({
-  template: ` <lg-link-menu-item>
+  template: `<lg-link-menu-item>
     <lg-link-menu-item-text class="bold">Update my direct debit</lg-link-menu-item-text>
     <lg-link-menu-item-text>Do it online</lg-link-menu-item-text>
   </lg-link-menu-item>`,

diff --git a/projects/canopy/src/lib/page/docs/page.stories.ts b/projects/canopy/src/lib/page/docs/page.stories.ts
@@ -74,50 +74,50 @@ const header = `
 `;
 
 const footer = `
-<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>
-  </lg-footer-nav>
+  <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>
+    </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>
-  </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>
+    </lg-footer-nav>
 
-  <lg-footer-logo [src]="logo" [alt]="logoAlt"></lg-footer-logo>
+    <lg-footer-logo [src]="logo" [alt]="logoAlt"></lg-footer-logo>
 
-  <lg-footer-copyright>{{ copyright }}</lg-footer-copyright>
-</footer>
+    <lg-footer-copyright>{{ copyright }}</lg-footer-copyright>
+  </footer>
 `;
 
 const headerCategory = 'header';
 const footerCategory = 'footer';
 const contentCategory = 'content';
 
 const fullWidthWithHeroTemplate = `
-<lg-page>
-  ${header}
-  <lg-hero [overlap]="overlap">
-    ${productHeroHTML}
-  </lg-hero>
-  <div lgContainer>
-    <div lgRow>
-      <div lgCol="12">
-        <lg-card lgMarginHorizontal="none">
-          <lg-card-content>
-            {{card1}} <br /><br />
-            {{card2}} <br /><br />
-            {{card3}}
-          </lg-card-content>
-        </lg-card>
+  <lg-page>
+    ${header}
+    <lg-hero [overlap]="overlap">
+      ${productHeroHTML}
+    </lg-hero>
+    <div lgContainer>
+      <div lgRow>
+        <div lgCol="12">
+          <lg-card lgMarginHorizontal="none">
+            <lg-card-content>
+              {{card1}} <br /><br />
+              {{card2}} <br /><br />
+              {{card3}}
+            </lg-card-content>
+          </lg-card>
+        </div>
       </div>
     </div>
-  </div>
-  ${footer}
-</lg-page>
+    ${footer}
+  </lg-page>
 `;
 
 @Component({
@@ -265,26 +265,26 @@ export default {
 } as Meta;
 
 const oneColumnTemplate = `
-<lg-page>
-  ${header}
-  <div lgContainer>
-    <div lgRow>
-      <div
-          lgCol="12"
-          lgColSm="10"
-          lgColSmOffset="1"
-          lgColMd="8"
-          lgColMdOffset="2"
-          lgColLg="6"
-          lgColLgOffset="3">
-        <lg-card lgMarginHorizontal="none"><lg-card-content>{{card1}}</lg-card-content></lg-card>
-        <lg-card lgMarginHorizontal="none"><lg-card-content>{{card2}}</lg-card-content></lg-card>
-        <lg-card lgMarginHorizontal="none"><lg-card-content>{{card3}}</lg-card-content></lg-card>
+  <lg-page>
+    ${header}
+    <div lgContainer>
+      <div lgRow>
+        <div
+            lgCol="12"
+            lgColSm="10"
+            lgColSmOffset="1"
+            lgColMd="8"
+            lgColMdOffset="2"
+            lgColLg="6"
+            lgColLgOffset="3">
+          <lg-card lgMarginHorizontal="none"><lg-card-content>{{card1}}</lg-card-content></lg-card>
+          <lg-card lgMarginHorizontal="none"><lg-card-content>{{card2}}</lg-card-content></lg-card>
+          <lg-card lgMarginHorizontal="none"><lg-card-content>{{card3}}</lg-card-content></lg-card>
+        </div>
       </div>
     </div>
-  </div>
-  ${footer}
-</lg-page>
+    ${footer}
+  </lg-page>
 `;
 
 const oneColumnStory: StoryFn<LgPageComponent> = (args: LgPageComponent) => ({
@@ -305,25 +305,25 @@ oneColumn.parameters = {
 };
 
 const twoColumnsTemplate = `
-<lg-page>
-  ${header}
-  <div lgContainer>
-    <div lgRow>
-      <div lgCol="12" lgColMd="8" lgColLg="5" lgColLgOffset="2">
-        <lg-card lgMarginHorizontal="none">
-          <lg-card-content>
-            {{card1}}
-          </lg-card-content>
-        </lg-card>
-      </div>
-      <div lgCol="12" lgColMd="4" lgColLg="3">
-        <lg-card lgMarginHorizontal="none"><lg-card-content>{{card2}}</lg-card-content></lg-card>
-        <lg-card lgMarginHorizontal="none"><lg-card-content>{{card3}}</lg-card-content></lg-card>
+  <lg-page>
+    ${header}
+    <div lgContainer>
+      <div lgRow>
+        <div lgCol="12" lgColMd="8" lgColLg="5" lgColLgOffset="2">
+          <lg-card lgMarginHorizontal="none">
+            <lg-card-content>
+              {{card1}}
+            </lg-card-content>
+          </lg-card>
+        </div>
+        <div lgCol="12" lgColMd="4" lgColLg="3">
+          <lg-card lgMarginHorizontal="none"><lg-card-content>{{card2}}</lg-card-content></lg-card>
+          <lg-card lgMarginHorizontal="none"><lg-card-content>{{card3}}</lg-card-content></lg-card>
+        </div>
       </div>
     </div>
-  </div>
-  ${footer}
-</lg-page>
+    ${footer}
+  </lg-page>
 `;
 
 const twoColumnsStory: StoryFn<LgPageComponent> = (args: LgPageComponent) => ({
@@ -344,23 +344,23 @@ twoColumns.parameters = {
 };
 
 const fullWidthTemplate = `
-<lg-page>
-  ${header}
-  <div lgContainer>
-    <div lgRow>
-      <div lgCol="12">
-        <lg-card lgMarginHorizontal="none">
-          <lg-card-content>
-            {{card1}} <br /><br />
-            {{card2}} <br /><br />
-            {{card3}}
-          </lg-card-content>
-        </lg-card>
+  <lg-page>
+    ${header}
+    <div lgContainer>
+      <div lgRow>
+        <div lgCol="12">
+          <lg-card lgMarginHorizontal="none">
+            <lg-card-content>
+              {{card1}} <br /><br />
+              {{card2}} <br /><br />
+              {{card3}}
+            </lg-card-content>
+          </lg-card>
+        </div>
       </div>
     </div>
-  </div>
-  ${footer}
-</lg-page>
+    ${footer}
+  </lg-page>
 `;
 
 const fullWidthStory: StoryFn<LgPageComponent> = (args: LgPageComponent) => ({