refactor(profile): add prefix to child comps (#116)

src/app/about/profile/_profile-theme.scss

@@ -1,21 +1,21 @@
 @use 'animations';
 @use 'profile-picture/profile-picture-theme';
-@use 'contact-social-icons/contact-social-icons-theme';
-@use 'contact-traditional-icons/contact-traditional-icons-theme';
+@use 'profile-contact-social-icons/profile-contact-social-icons-theme';
+@use 'profile-contact-traditional-icons/profile-contact-traditional-icons-theme';
 
 @mixin color($theme) {
   app-profile {
     @include profile-picture-theme.color($theme);
-    @include contact-traditional-icons-theme.color($theme);
-    @include contact-social-icons-theme.color($theme);
+    @include profile-contact-traditional-icons-theme.color($theme);
+    @include profile-contact-social-icons-theme.color($theme);
   }
 }
 
 @mixin motion() {
   app-profile {
     @include profile-picture-theme.motion();
-    @include contact-traditional-icons-theme.motion;
-    @include contact-social-icons-theme.motion;
+    @include profile-contact-traditional-icons-theme.motion;
+    @include profile-contact-social-icons-theme.motion;
   }
 }
 

src/app/about/profile/contact-social-icons/_contact-social-icons-theme.scss → src/app/about/profile/profile-contact-social-icons/_profile-contact-social-icons-theme.scss

@@ -3,7 +3,7 @@
 @mixin color($theme) {
   $text-palette: map-get($theme, text);
 
-  app-contact-social-icons {
+  app-profile-contact-social-icons {
     color: map-get($theme, icon);
 
     li:hover {
@@ -12,7 +12,7 @@
   }
 }
 @mixin motion {
-  app-contact-social-icons {
+  app-profile-contact-social-icons {
     @include animations.single-transition(color, animations.$emphasized-style);
   }
 }

src/app/about/profile/contact-social-icons/contact-social-icons.component.scss → src/app/about/profile/profile-contact-social-icons/profile-contact-social-icons.component.scss

@@ -7,7 +7,7 @@
       margin-left: 0;
     }
 
-    // Position in same place as Material Symbols from app-contact-traditional-icons
+    // Position in same place as Material Symbols from app-profile-contact-traditional-icons
     margin-left: 2px;
     display: flex;
     flex-direction: row;

src/app/about/profile/contact-social-icons/contact-social-icons.component.spec.ts → src/app/about/profile/profile-contact-social-icons/profile-contact-social-icons.component.spec.ts

@@ -6,25 +6,25 @@ import { MockProvider } from 'ng-mocks'
 import { METADATA } from '../../../common/injection-tokens'
 import { Metadata } from '../../../metadata'
 
-import { ContactSocialIconsComponent } from './contact-social-icons.component'
+import { ProfileContactSocialIconsComponent } from './profile-contact-social-icons.component'
 import { byComponent } from '../../../../test/helpers/component-query-predicates'
 
 describe('ContactSocialIconsComponent', () => {
-  let component: ContactSocialIconsComponent
-  let fixture: ComponentFixture<ContactSocialIconsComponent>
+  let component: ProfileContactSocialIconsComponent
+  let fixture: ComponentFixture<ProfileContactSocialIconsComponent>
   const nickname = 'foo'
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [ContactSocialIconsComponent, FaIconComponent],
+      declarations: [ProfileContactSocialIconsComponent, FaIconComponent],
       providers: [
         MockProvider(METADATA, { nickname: nickname } as Pick<
           Metadata,
           'nickname'
         > as Metadata),
       ],
     })
-    fixture = TestBed.createComponent(ContactSocialIconsComponent)
+    fixture = TestBed.createComponent(ProfileContactSocialIconsComponent)
     component = fixture.componentInstance
     fixture.detectChanges()
   })

src/app/about/profile/contact-social-icons/contact-social-icons.component.ts → src/app/about/profile/profile-contact-social-icons/profile-contact-social-icons.component.ts

@@ -10,11 +10,11 @@ import { METADATA } from '../../../common/injection-tokens'
 import { Metadata } from '../../../metadata'
 
 @Component({
-  selector: 'app-contact-social-icons',
-  templateUrl: './contact-social-icons.component.html',
-  styleUrls: ['./contact-social-icons.component.scss'],
+  selector: 'app-profile-contact-social-icons',
+  templateUrl: './profile-contact-social-icons.component.html',
+  styleUrls: ['./profile-contact-social-icons.component.scss'],
 })
-export class ContactSocialIconsComponent {
+export class ProfileContactSocialIconsComponent {
   public items: ReadonlyArray<{
     name: string
     icon: IconDefinition

src/app/about/profile/contact-traditional-icons/_contact-traditional-icons-theme.scss → src/app/about/profile/profile-contact-traditional-icons/_profile-contact-traditional-icons-theme.scss

@@ -3,7 +3,7 @@
 @mixin color($theme) {
   $text-palette: map-get($theme, text);
 
-  app-contact-traditional-icons {
+  app-profile-contact-traditional-icons {
     color: map-get($theme, icon);
 
     li:hover {
@@ -12,7 +12,7 @@
   }
 }
 @mixin motion {
-  app-contact-traditional-icons {
+  app-profile-contact-traditional-icons {
     @include animations.single-transition(color, animations.$emphasized-style);
   }
 }

src/app/about/profile/contact-traditional-icons/contact-traditional-icons.component.spec.ts → src/app/about/profile/profile-contact-traditional-icons/profile-contact-traditional-icons.component.spec.ts

@@ -1,17 +1,17 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { By } from '@angular/platform-browser'
 
-import { ContactTraditionalIconsComponent } from './contact-traditional-icons.component'
+import { ProfileContactTraditionalIconsComponent } from './profile-contact-traditional-icons.component'
 
 describe('ContactTraditionalIconsComponent', () => {
-  let component: ContactTraditionalIconsComponent
-  let fixture: ComponentFixture<ContactTraditionalIconsComponent>
+  let component: ProfileContactTraditionalIconsComponent
+  let fixture: ComponentFixture<ProfileContactTraditionalIconsComponent>
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [ContactTraditionalIconsComponent],
+      declarations: [ProfileContactTraditionalIconsComponent],
     })
-    fixture = TestBed.createComponent(ContactTraditionalIconsComponent)
+    fixture = TestBed.createComponent(ProfileContactTraditionalIconsComponent)
     component = fixture.componentInstance
     fixture.detectChanges()
   })

src/app/about/profile/contact-traditional-icons/contact-traditional-icons.component.ts → src/app/about/profile/profile-contact-traditional-icons/profile-contact-traditional-icons.component.ts

@@ -2,11 +2,11 @@ import { Component } from '@angular/core'
 import { Call, Email, MyLocation } from '../../../material-symbols'
 
 @Component({
-  selector: 'app-contact-traditional-icons',
-  templateUrl: './contact-traditional-icons.component.html',
-  styleUrls: ['./contact-traditional-icons.component.scss'],
+  selector: 'app-profile-contact-traditional-icons',
+  templateUrl: './profile-contact-traditional-icons.component.html',
+  styleUrls: ['./profile-contact-traditional-icons.component.scss'],
 })
-export class ContactTraditionalIconsComponent {
+export class ProfileContactTraditionalIconsComponent {
   public readonly items: ReadonlyArray<{
     name: string
     materialSymbol: string

src/app/about/profile/description/description.component.html → src/app/about/profile/profile-description/profile-description.component.html

@@ -34,7 +34,7 @@
   [@expanded]="isCollapsible ? isExpanded : true"
 >
   <li *ngFor="let line of line.children">
-    <app-description [line]="line" [depth]="depth + 1" [parent]="this">
-    </app-description>
+    <app-profile-description [line]="line" [depth]="depth + 1" [parent]="this">
+    </app-profile-description>
   </li>
 </ul>

src/app/about/profile/description/description.component.spec.ts → src/app/about/profile/profile-description/profile-description.component.spec.ts

@@ -22,15 +22,15 @@ import { DescriptionLine, DescriptionLineData } from '../../../metadata'
 import {
   COLLAPSIBLE_CONFIG,
   CollapsibleConfiguration,
-  DescriptionComponent,
-} from './description.component'
+  ProfileDescriptionComponent,
+} from './profile-description.component'
 import { MaterialSymbolDirective } from '../../../common/material-symbol.directive'
 import { byComponent } from '../../../../test/helpers/component-query-predicates'
 import { getReflectedAttribute } from '../../../../test/helpers/get-reflected-attribute'
 
 describe('DescriptionComponent', () => {
-  let component: DescriptionComponent
-  let fixture: ComponentFixture<DescriptionComponent>
+  let component: ProfileDescriptionComponent
+  let fixture: ComponentFixture<ProfileDescriptionComponent>
   const DATA_CLASS_SELECTOR = By.css('.data')
   const LIST_SELECTOR = By.css('ul')
   const CARET_SELECTOR = By.css('.caret')
@@ -133,7 +133,7 @@ describe('DescriptionComponent', () => {
         childrenElements.forEach((childElement, index) => {
           // Contains line element
           const childLineElement = childElement.query(
-            byComponent(DescriptionComponent),
+            byComponent(ProfileDescriptionComponent),
           )
           expect(childLineElement)
             .withContext(`child ${index} line element`)
@@ -205,7 +205,7 @@ describe('DescriptionComponent', () => {
       })
       describe('when depth is set to configured depth to start a collapsible', () => {
         function configureToBeCollapsible(
-          component: DescriptionComponent,
+          component: ProfileDescriptionComponent,
           line?: DescriptionLine,
         ) {
           component.depth = fakeConfig.collapsibleStartAtDepth
@@ -430,16 +430,19 @@ function setup({
   platformId,
 }: {
   platformId?: typeof PLATFORM_BROWSER_ID | typeof PLATFORM_SERVER_ID
-} = {}): [ComponentFixture<DescriptionComponent>, DescriptionComponent] {
+} = {}): [
+  ComponentFixture<ProfileDescriptionComponent>,
+  ProfileDescriptionComponent,
+] {
   TestBed.configureTestingModule({
-    declarations: [DescriptionComponent, MaterialSymbolDirective],
+    declarations: [ProfileDescriptionComponent, MaterialSymbolDirective],
     providers: [
       MockProvider(COLLAPSIBLE_CONFIG, fakeConfig),
       MockProvider(PLATFORM_ID, platformId ?? PLATFORM_BROWSER_ID),
     ],
     imports: [NoopAnimationsModule],
   })
-  const fixture = TestBed.createComponent(DescriptionComponent)
+  const fixture = TestBed.createComponent(ProfileDescriptionComponent)
   return [fixture, fixture.componentInstance]
 }
 

src/app/about/profile/description/description.component.ts → src/app/about/profile/profile-description/profile-description.component.ts

@@ -26,9 +26,9 @@ import { DescriptionLine } from '../../../metadata'
 import { SlugGeneratorService } from '../../../common/slug-generator.service'
 
 @Component({
-  selector: 'app-description',
-  templateUrl: './description.component.html',
-  styleUrls: ['./description.component.scss'],
+  selector: 'app-profile-description',
+  templateUrl: './profile-description.component.html',
+  styleUrls: ['./profile-description.component.scss'],
   animations: [
     trigger('expanded', [
       // TODO: Investigate how to set display in state without triggering Angular warning
@@ -55,10 +55,10 @@ import { SlugGeneratorService } from '../../../common/slug-generator.service'
     ]),
   ],
 })
-export class DescriptionComponent {
+export class ProfileDescriptionComponent {
   @Input({ required: true }) public line!: DescriptionLine
   @Input() public depth: number = 0
-  @Input() protected parent?: DescriptionComponent
+  @Input() protected parent?: ProfileDescriptionComponent
 
   // 👇 Using `protected` to avoid being marked as unused
   @HostBinding('class.displayBlockIfNoScript')
@@ -70,8 +70,8 @@ export class DescriptionComponent {
   public isExpanded = this.isRenderingOnBrowser
     ? this.EXPANDED_DEFAULT_JS_ENABLED
     : this.EXPANDED_DEFAULT_NO_JS
-  @ViewChildren(DescriptionComponent)
-  private children!: QueryList<DescriptionComponent>
+  @ViewChildren(ProfileDescriptionComponent)
+  private children!: QueryList<ProfileDescriptionComponent>
 
   constructor(
     protected readonly sanitizer: DomSanitizer,
@@ -115,7 +115,9 @@ export class DescriptionComponent {
     this.parent?.collapseAllChildren({ except: this })
   }
 
-  collapseAllChildren({ except }: { except?: DescriptionComponent } = {}) {
+  collapseAllChildren({
+    except,
+  }: { except?: ProfileDescriptionComponent } = {}) {
     const childrenToCollapse = this.children.filter((child) => child !== except)
     for (const child of childrenToCollapse) {
       child.collapse()

src/app/about/profile/profile.component.html

@@ -9,10 +9,10 @@
       </div>
       <span class="headline">{{ title }}</span>
       <div class="contacts">
-        <app-contact-traditional-icons></app-contact-traditional-icons>
-        <app-contact-social-icons></app-contact-social-icons>
+        <app-profile-contact-traditional-icons></app-profile-contact-traditional-icons>
+        <app-profile-contact-social-icons></app-profile-contact-social-icons>
       </div>
     </div>
-    <app-description [line]="rootLine"></app-description>
+    <app-profile-description [line]="rootLine"></app-profile-description>
   </div>
 </div>

src/app/about/profile/profile.component.spec.ts

@@ -4,9 +4,9 @@ import { ProfileComponent } from './profile.component'
 import { Metadata } from '../../metadata'
 import { MockComponents, MockProvider } from 'ng-mocks'
 import { ProfilePictureComponent } from './profile-picture/profile-picture.component'
-import { ContactTraditionalIconsComponent } from './contact-traditional-icons/contact-traditional-icons.component'
-import { ContactSocialIconsComponent } from './contact-social-icons/contact-social-icons.component'
-import { DescriptionComponent } from './description/description.component'
+import { ProfileContactTraditionalIconsComponent } from './profile-contact-traditional-icons/profile-contact-traditional-icons.component'
+import { ProfileContactSocialIconsComponent } from './profile-contact-social-icons/profile-contact-social-icons.component'
+import { ProfileDescriptionComponent } from './profile-description/profile-description.component'
 import { METADATA } from '../../common/injection-tokens'
 import { By } from '@angular/platform-browser'
 import { ensureHasComponents } from '../../../test/helpers/component-testers'
@@ -28,9 +28,9 @@ describe('ProfileComponent', () => {
         MockComponents(
           H2Component,
           ProfilePictureComponent,
-          ContactTraditionalIconsComponent,
-          ContactSocialIconsComponent,
-          DescriptionComponent,
+          ProfileContactTraditionalIconsComponent,
+          ProfileContactSocialIconsComponent,
+          ProfileDescriptionComponent,
         ),
       ],
       providers: [MockProvider(METADATA, fakeMetadata)],
@@ -67,8 +67,8 @@ describe('ProfileComponent', () => {
     () => fixture,
     H2Component,
     ProfilePictureComponent,
-    ContactTraditionalIconsComponent,
-    ContactSocialIconsComponent,
-    DescriptionComponent,
+    ProfileContactTraditionalIconsComponent,
+    ProfileContactSocialIconsComponent,
+    ProfileDescriptionComponent,
   )
 })

src/app/app.module.ts

@@ -6,9 +6,9 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'
 import { SeoModule } from '@ngaox/seo'
 import { environment } from '../environments'
 import { AboutComponent } from './about/about.component'
-import { ContactSocialIconsComponent } from './about/profile/contact-social-icons/contact-social-icons.component'
-import { ContactTraditionalIconsComponent } from './about/profile/contact-traditional-icons/contact-traditional-icons.component'
-import { DescriptionComponent } from './about/profile/description/description.component'
+import { ProfileContactSocialIconsComponent } from './about/profile/profile-contact-social-icons/profile-contact-social-icons.component'
+import { ProfileContactTraditionalIconsComponent } from './about/profile/profile-contact-traditional-icons/profile-contact-traditional-icons.component'
+import { ProfileDescriptionComponent } from './about/profile/profile-description/profile-description.component'
 import { ProfilePictureComponent } from './about/profile/profile-picture/profile-picture.component'
 
 import { AppRoutingModule } from './app-routing.module'
@@ -56,9 +56,9 @@ import { EducationItemCoursesComponent } from './about/education/education-item/
     JsonldMetadataComponent,
     ReleaseInfoComponent,
     ProfilePictureComponent,
-    ContactTraditionalIconsComponent,
-    ContactSocialIconsComponent,
-    DescriptionComponent,
+    ProfileContactTraditionalIconsComponent,
+    ProfileContactSocialIconsComponent,
+    ProfileDescriptionComponent,
     NotFoundComponent,
     ProfileComponent,
     ExperienceComponent,