refactor(footer): update variable name for secondary logo

BREAKING CHANGE: the input for the second logo has been changed from `secondLogo` to `secondaryLogo`. fix: Legal-and-General#670
elenagarrone · Feb 3, 2022 · 86ed35d · 86ed35d
1 parent 095c0ed
commit 86ed35d
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 23 deletions.
diff --git a/projects/canopy/src/lib/footer/footer.component.html b/projects/canopy/src/lib/footer/footer.component.html
@@ -60,10 +60,10 @@ <h2 class="lg-visually-hidden" id="secondary-links">Secondary links</h2>
   <div class="lg-footer__logos-wrapper">
     <img [attr.alt]="logoAlt" [attr.src]="logo" class="lg-footer__logo" *ngIf="logo" />
     <img
-      [attr.alt]="secondLogoAlt"
-      [attr.src]="secondLogo"
+      [attr.alt]="secondaryLogoAlt"
+      [attr.src]="secondaryLogo"
       class="lg-footer__logo lg-footer__second-logo"
-      *ngIf="secondLogo"
+      *ngIf="secondaryLogo"
     />
   </div>
   <span class="lg-footer__copyright">

diff --git a/projects/canopy/src/lib/footer/footer.component.spec.ts b/projects/canopy/src/lib/footer/footer.component.spec.ts
@@ -83,33 +83,33 @@ describe('FooterComponent', () => {
     });
   });
 
-  describe('second logo', () => {
+  describe('secondary logo', () => {
     it('renders the logo when the property is set', () => {
-      component.secondLogo = logo;
+      component.secondaryLogo = logo;
       fixture.detectChanges();
       const image = fixture.debugElement.query(By.css('.lg-footer__second-logo'));
       expect(image).toBeTruthy();
       expect(image.attributes.src).toBe(logo);
     });
 
     it('does not render a logo when the property is not set', () => {
-      component.secondLogo = null;
+      component.secondaryLogo = null;
       fixture.detectChanges();
       const image = fixture.debugElement.query(By.css('.lg-footer__second-logo'));
       expect(image).toBeFalsy();
     });
 
     it('adds a silent alt when there is a logo', () => {
-      component.secondLogo = logo;
+      component.secondaryLogo = logo;
       fixture.detectChanges();
       const image = fixture.debugElement.query(By.css('.lg-footer__second-logo'));
       expect(image).toBeTruthy();
       expect(image.attributes.alt).toBe('');
     });
 
     it('adds a standard alt when alt and logo are set', () => {
-      component.secondLogo = logo;
-      component.secondLogoAlt = logoAlt;
+      component.secondaryLogo = logo;
+      component.secondaryLogoAlt = logoAlt;
       fixture.detectChanges();
       const image = fixture.debugElement.query(By.css('.lg-footer__second-logo'));
       expect(image).toBeTruthy();

diff --git a/projects/canopy/src/lib/footer/footer.component.ts b/projects/canopy/src/lib/footer/footer.component.ts
@@ -34,20 +34,20 @@ export class LgFooterComponent {
     }
   }
 
-  private _secondLogo: string;
+  private _secondaryLogo: string;
   @Input()
-  get secondLogo(): string | null {
-    return this._secondLogo;
+  get secondaryLogo(): string | null {
+    return this._secondaryLogo;
   }
-  set secondLogo(secondLogo) {
-    this._secondLogo = secondLogo;
-    if (!this.secondLogoAlt) {
-      this.secondLogoAlt = '';
+  set secondaryLogo(secondaryLogo) {
+    this._secondaryLogo = secondaryLogo;
+    if (!this.secondaryLogoAlt) {
+      this.secondaryLogoAlt = '';
     }
   }
 
   @Input() logoAlt: string | null;
-  @Input() secondLogoAlt: string | null;
+  @Input() secondaryLogoAlt: string | null;
   @Input() copyright: string;
   @Input() primaryLinks: Array<Link> | null;
   @Input() secondaryLinks: Array<SecondaryLink> | null;

diff --git a/projects/canopy/src/lib/footer/footer.notes.ts b/projects/canopy/src/lib/footer/footer.notes.ts
@@ -34,8 +34,8 @@ and in your HTML:
 |------|-------------|:----:|:-----:|:-----:|
 | \`\`logo\`\` | A url link to the logo | string | null | Yes |
 | \`\`logoAlt\`\` | alt text to display alongside the logo | string | '' | Yes |
-| \`\`secondLogo\`\` | A url link to the second logo | string | null | No |
-| \`\`secondLogoAlt\`\` | alt text to display alongside the second logo | string | '' | No |
+| \`\`secondaryLogo\`\` | A url link to the secondary logo | string | null | No |
+| \`\`secondaryLogoAlt\`\` | alt text to display alongside the secondary logo | string | '' | No |
 | \`\`copyright\`\` | Copyright text to display in footer | string | undefined | No |
 | \`\`primaryLinks\`\` | The primary footer links | \`[{ text: string, href: string, id?: string, target?: string }]\` | null | No |
 | \`\`secondaryLinks\`\` | The secondary footer links | \`[{ text: string, href: string, id?: string, class?: string, target?: string, type?: 'button' }]\` | null | No |

diff --git a/projects/canopy/src/lib/footer/footer.stories.ts b/projects/canopy/src/lib/footer/footer.stories.ts
@@ -101,8 +101,8 @@ export const coBranded = () => ({
       [copyright]="copyright"
       [logo]="logo"
       [logoAlt]="logoAlt"
-      [secondLogo]="secondLogo"
-      [secondLogoAlt]="secondLogoAlt"
+      [secondaryLogo]="secondaryLogo"
+      [secondaryLogoAlt]="secondaryLogoAlt"
       [primaryLinks]="primaryLinks"
       [secondaryLinks]="secondaryLinks"
       (primaryLinkClicked)="primaryLinkClicked($event)"
@@ -112,8 +112,8 @@ export const coBranded = () => ({
   props: {
     logo: text('logo', 'legal-and-general-logo.svg', groupId),
     logoAlt: text('logoAlt', 'Company name', groupId),
-    secondLogo: text('secondLogo', 'dummy-logo.svg', groupId),
-    secondLogoAlt: text('secondLogoAlt', 'Second company name', groupId),
+    secondaryLogo: text('secondaryLogo', 'dummy-logo.svg', groupId),
+    secondaryLogoAlt: text('secondaryLogoAlt', 'Second company name', groupId),
     copyright: text('copyright', '© Some Company plc 2018', groupId),
     secondaryLinks: object('secondaryLinks', secondaryLinks, groupId),
     primaryLinks: object('primaryLinks', primaryLinks, groupId),