diff --git a/apps/interinnl/src/app/footer/footer.html b/apps/interinnl/src/app/footer/footer.html index 8e6073f..b6ab8ab 100644 --- a/apps/interinnl/src/app/footer/footer.html +++ b/apps/interinnl/src/app/footer/footer.html @@ -43,42 +43,68 @@

Projects

Connect

+ GitHub + @if (content.links.linkedinGroup) { + LinkedIn group + } + {{ content.links.contactEmail }} + Community feed (coming)
@if (content.links.linkedinGroup) { }
- {{ content.links.contactEmail }} - Community feed (coming)
diff --git a/apps/interinnl/src/app/footer/footer.scss b/apps/interinnl/src/app/footer/footer.scss index 99348b2..9b0742e 100644 --- a/apps/interinnl/src/app/footer/footer.scss +++ b/apps/interinnl/src/app/footer/footer.scss @@ -42,55 +42,6 @@ margin-bottom: 0.85rem !important; } -.innl-footer__connect h3 { - margin-bottom: 0.85rem; -} - -.innl-footer__social { - display: flex; - gap: 0.75rem; - margin: 0 0 1rem; -} - -.innl-footer__social-link { - display: inline-flex; - align-items: center; - justify-content: center; - width: 2.75rem; - height: 2.75rem; - border-radius: 50%; - color: #fff; - border: 1px solid rgb(255 255 255 / 28%); - background: transparent; - transition: - color 0.2s ease, - background 0.2s ease, - border-color 0.2s ease, - transform 0.2s ease; -} - -.innl-footer__social-link svg { - width: 1.25rem; - height: 1.25rem; -} - -.innl-footer__social-link:hover { - text-decoration: none; - transform: translateY(-2px); -} - -.innl-footer__social-link--github:hover { - color: var(--innl-navy); - background: #fff; - border-color: #fff; -} - -.innl-footer__social-link--linkedin:hover { - color: #fff; - background: #0a66c2; - border-color: #0a66c2; -} - .innl-footer h3 { margin: 0 0 0.75rem; font-size: 0.8rem; @@ -117,6 +68,37 @@ opacity: 0.55; } +.innl-footer__social { + display: flex; + align-items: center; + gap: 0.75rem; + margin: 1rem 0 0; +} + +.innl-footer a.innl-footer__social-link { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2.75rem; + height: 2.75rem; + margin: 0; + border-radius: 0.5rem; + color: #fff; + background: rgb(255 255 255 / 14%); + flex-shrink: 0; +} + +.innl-footer a.innl-footer__social-link:hover { + background: rgb(255 255 255 / 26%); + text-decoration: none; +} + +.innl-footer a.innl-footer__social-link svg { + display: block; + width: 1.35rem; + height: 1.35rem; +} + .innl-footer__bar { max-width: var(--innl-max); margin: 2.5rem auto 0; diff --git a/apps/interinnl/src/app/footer/footer.spec.ts b/apps/interinnl/src/app/footer/footer.spec.ts index 79399b0..0fd8a64 100644 --- a/apps/interinnl/src/app/footer/footer.spec.ts +++ b/apps/interinnl/src/app/footer/footer.spec.ts @@ -18,24 +18,36 @@ describe('Footer', () => { expect(fixture.componentInstance).toBeTruthy(); }); - it('should show social icons under Connect with correct links', () => { + it('keeps Connect text links and adds icons below them', () => { const root = fixture.nativeElement as HTMLElement; const connect = root.querySelector('.innl-footer__connect'); expect(connect).toBeTruthy(); + const text = connect?.textContent ?? ''; + expect(text).toContain('GitHub'); + expect(text).toContain('LinkedIn group'); + expect(text).toContain(interinnlContent.links.contactEmail); + const social = connect?.querySelector('.innl-footer__social'); expect(social).toBeTruthy(); - const github = social?.querySelector( - 'a.innl-footer__social-link--github', - ) as HTMLAnchorElement | null; - expect(github?.href).toBe(interinnlContent.links.githubOrg); - expect(github?.getAttribute('aria-label')).toBe('InterINNL on GitHub'); - - const linkedin = social?.querySelector( - 'a.innl-footer__social-link--linkedin', - ) as HTMLAnchorElement | null; - expect(linkedin?.href).toBe(interinnlContent.links.linkedinGroup); - expect(linkedin?.getAttribute('aria-label')).toBe('InterINNL on LinkedIn'); + const icons = social?.querySelectorAll( + 'a.innl-footer__social-link', + ) as NodeListOf; + expect(icons.length).toBe(2); + expect(icons[0].href).toBe(interinnlContent.links.githubOrg); + expect(icons[0].getAttribute('aria-label')).toBe('InterINNL on GitHub'); + expect(icons[1].href).toBe(interinnlContent.links.linkedinGroup); + expect(icons[1].getAttribute('aria-label')).toBe('InterINNL on LinkedIn'); + + const soon = connect?.querySelector('.innl-footer__soon'); + expect(soon).toBeTruthy(); + expect(social).toBeTruthy(); + if (!soon || !social) { + return; + } + expect( + soon.compareDocumentPosition(social) & Node.DOCUMENT_POSITION_FOLLOWING, + ).toBeTruthy(); }); });