[Language Badge, Language Badge Group]: Check for 1.2 release

ngx-fudis/projects/ngx-fudis/src/lib/components/language-badge-group/language-badge-group.component.scss

@@ -2,5 +2,7 @@
 
 .fudis-language-badge-group {
  display: inline-flex;
+ align-items: center;
  margin-left: spacing.$spacing-xxs;
+ height: spacing.$spacing-md;
 }

ngx-fudis/projects/ngx-fudis/src/lib/components/language-badge-group/language-badge-group.component.spec.ts

@@ -1,10 +1,12 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MockComponent } from 'ng-mocks';
 import { By } from '@angular/platform-browser';
 import { FudisLanguageBadgeContent } from '../../types/miscellaneous';
 import { TooltipApiDirective } from '../../directives/tooltip/tooltip-api.directive';
 import { LanguageBadgeGroupComponent } from './language-badge-group.component';
 import { LanguageBadgeComponent } from './language-badge/language-badge.component';
+import { getElement } from '../../utilities/tests/utilities';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TooltipDirective } from '../../directives/tooltip/tooltip.directive';
 
 const providedLanguages: FudisLanguageBadgeContent = { en: 'en', fi: 'fi' };
 
@@ -18,9 +20,11 @@ describe('LanguageBadgeGroupComponent', () => {
  await TestBed.configureTestingModule({
  declarations: [
  LanguageBadgeGroupComponent,
- MockComponent(LanguageBadgeComponent),
+ LanguageBadgeComponent,
  TooltipApiDirective,
+ TooltipDirective,
  ],
+ imports: [MatTooltipModule],
  }).compileComponents();
  });
 
@@ -54,7 +58,21 @@ describe('LanguageBadgeGroupComponent', () => {
 
  expect(missingLanguage).toContain('sv');
  });
+ });
+
+ describe('Interaction', () => {
+ it('should update language and emit output when clicked', () => {
+ jest.spyOn(component.handleBadgeClick, 'emit');
+
+ const fiButton = getElement(fixture, '.fudis-language-badge') as HTMLButtonElement;
+
+ fiButton.click();
 
- // TODO: add test for output emit
+ expect(component.handleBadgeClick.emit).toHaveBeenCalledWith('fi');
+
+ fixture.detectChanges();
+
+ expect(component.selectedLanguage).toEqual('fi');
+ });
  });
 });

ngx-fudis/projects/ngx-fudis/src/lib/components/language-badge-group/language-badge-group.component.ts

@@ -69,9 +69,10 @@ export class LanguageBadgeGroupComponent extends TooltipApiDirective implements
  }
 
  /**
- * Emits clicked badge lang output on click
+ * Set selected language and emits clicked language
  */
  protected _updateLanguage(value: FudisLanguageAbbr) {
+ this.selectedLanguage = value;
  this.handleBadgeClick.emit(value);
  }
 

ngx-fudis/projects/ngx-fudis/src/lib/components/language-badge-group/language-badge/language-badge.component.html

@@ -1,13 +1,16 @@
 <button
  type="button"
  fudisTooltip
- class="fudis-language-badge fudis-language-badge__{{ variant }}"
- [class.fudis-language-badge--selected]="selected"
+ class="fudis-language-badge"
  [tooltip]="_label"
  [tooltipPosition]="tooltipPosition"
  [tooltipToggle]="tooltipToggle"
  [attr.aria-label]="_label"
  (click)="_handleLanguageSelect()"
 >
- {{ language }}
+ <span
+ [class.fudis-language-badge--selected]="selected"
+ class="fudis-language-badge__content fudis-language-badge__{{ variant }}"
+ >{{ language }}</span
+ >
 </button>

ngx-fudis/projects/ngx-fudis/src/lib/components/language-badge-group/language-badge/language-badge.component.scss

@@ -1,13 +1,14 @@
 @use "../../../foundations/colors/mixins.scss" as colors;
 @use "../../../foundations/typography/mixins.scss" as typography;
 @use "../../../foundations/focus/mixins.scss" as focus;
-@use "../../../foundations/colors/mixins.scss" as colorMixin;
 @use "../../../foundations/borders/mixins.scss" as border;
 @use "../../../foundations/utilities/mixins.scss" as utilities;
 @use "../../../foundations/spacing/tokens.scss" as spacing;
 
-.fudis-language-badge-host {
+.fudis-language-badge {
  @include colors.bg-color("transparent");
+ @include border.border-none;
+ @include utilities.box-reset;
 
  display: inline-flex;
  align-items: center;
@@ -18,23 +19,21 @@
  &:focus-within {
  @include focus.focus-generic;
  }
-}
-
-.fudis-language-badge {
- @include typography.body-text-sm-regular;
- @include colorMixin.bg-color("white");
- @include border.border("1px", "solid", "gray-dark");
- @include utilities.box-reset;
-
- border-radius: 50%;
- width: spacing.$spacing-md;
- height: spacing.$spacing-md;
- text-align: center;
- /* stylelint-disable-next-line unit-disallowed-list */
- letter-spacing: 0.02rem;
 
- &:focus-visible {
- @include border.outline-none;
+ &__content {
+ @include typography.body-text-sm-regular;
+ @include colors.bg-color("white");
+ @include border.border("1px", "solid", "gray-dark");
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ min-width: spacing.$spacing-md;
+ min-height: spacing.$spacing-md;
+ text-align: center;
+ /* stylelint-disable-next-line unit-disallowed-list */
+ letter-spacing: calc(0.02rem / var(--fudis-rem-multiplier));
  }
 
  &__missing {

ngx-fudis/projects/ngx-fudis/src/lib/components/language-badge-group/language-badge/language-badge.component.spec.ts

@@ -3,6 +3,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { By } from '@angular/platform-browser';
 import { LanguageBadgeComponent } from './language-badge.component';
 import { TooltipDirective } from '../../../directives/tooltip/tooltip.directive';
+import { getElement } from '../../../utilities/tests/utilities';
 
 describe('LanguageBadgeComponent', () => {
  let component: LanguageBadgeComponent;
@@ -20,50 +21,56 @@ describe('LanguageBadgeComponent', () => {
  component = fixture.componentInstance;
  component.language = 'en';
  component.variant = 'standard';
+ component.label = 'This is test label';
+ component.ngOnChanges({
+ label: { firstChange: true, currentValue: 'This is test label', previousValue: '' },
+ });
  fixture.detectChanges();
  });
 
- function assertLanguageBadgeHasClasses(classes: string): void {
- const childSpan = fixture.nativeElement.childNodes;
- const componentClasses = childSpan[0].className.split(' ').sort();
-
- expect(componentClasses).toEqual(classes.split(' ').sort());
- }
-
  it('should create', () => {
  expect(component).toBeTruthy();
  });
 
  describe('Contents', () => {
  it('should always have class name missing if language badge variant is a type missing', () => {
  component.variant = 'missing';
+ component.ngOnChanges({
+ variant: { firstChange: false, currentValue: 'missing', previousValue: 'standard' },
+ });
  fixture.detectChanges();
- assertLanguageBadgeHasClasses('fudis-language-badge fudis-language-badge__missing');
+
+ const classes = getElement(fixture, '.fudis-language-badge__content').className;
+
+ expect(classes).toEqual('fudis-language-badge__content fudis-language-badge__missing');
  });
 
  it('should always have class name selected if language badge is selected', () => {
  component.selected = true;
+ component.ngOnChanges({
+ selected: { firstChange: false, currentValue: true, previousValue: false },
+ });
  fixture.detectChanges();
- assertLanguageBadgeHasClasses(
- 'fudis-language-badge fudis-language-badge__standard fudis-language-badge--selected',
+
+ const classes = getElement(fixture, '.fudis-language-badge__content').className;
+
+ expect(classes).toEqual(
+ 'fudis-language-badge__content fudis-language-badge__standard fudis-language-badge--selected',
  );
  });
 
  it('should have given label matching to aria-label', () => {
- component.label = 'This is test label';
- component.ngOnChanges();
  fixture.detectChanges();
- const LanguageBadgeLabel = fixture.debugElement.query(By.css('.fudis-language-badge'));
+ const label = fixture.debugElement.query(By.css('.fudis-language-badge'));
 
- expect(LanguageBadgeLabel.nativeElement.getAttribute('aria-label')).toEqual(
- 'This is test label',
- );
+ expect(label.nativeElement.getAttribute('aria-label')).toEqual('This is test label');
  });
 
  it('should have given label and selected text matching to aria-label', () => {
- component.label = 'This is test label';
  component.selected = true;
- component.ngOnChanges();
+ component.ngOnChanges({
+ selected: { firstChange: false, currentValue: true, previousValue: false },
+ });
  fixture.detectChanges();
  const LanguageBadgeLabel = fixture.debugElement.query(By.css('.fudis-language-badge'));
 
@@ -73,17 +80,28 @@ describe('LanguageBadgeComponent', () => {
  });
 
  it('should have given label and missing text matching to aria-label', () => {
- component.label = 'This is test label';
  component.variant = 'missing';
- component.ngOnChanges();
+ component.ngOnChanges({
+ variant: { firstChange: false, currentValue: 'missing', previousValue: 'standard' },
+ });
  fixture.detectChanges();
  const LanguageBadgeLabel = fixture.debugElement.query(By.css('.fudis-language-badge'));
 
  expect(LanguageBadgeLabel.nativeElement.getAttribute('aria-label')).toEqual(
  'This is test label (Missing translation)',
  );
  });
+ });
+
+ describe('Interaction', () => {
+ it('should emit output when clicked', () => {
+ jest.spyOn(component.handleClick, 'emit');
 
- // TODO: Add test for output event
+ const button = getElement(fixture, '.fudis-language-badge') as HTMLButtonElement;
+
+ button.click();
+
+ expect(component.handleClick.emit).toHaveBeenCalledWith(component.language);
+ });
  });
 });

ngx-fudis/projects/ngx-fudis/src/lib/components/language-badge-group/language-badge/language-badge.component.ts

@@ -1,36 +1,27 @@
+import { Component, EventEmitter, Input, OnChanges, Output, Signal, effect } from '@angular/core';
 import {
- Component,
- EventEmitter,
- HostBinding,
- Input,
- OnChanges,
- OnInit,
- Output,
- Signal,
- ViewEncapsulation,
-} from '@angular/core';
-import { FudisLanguageAbbr, FudisTranslationConfig } from '../../../types/miscellaneous';
+ FudisComponentChanges,
+ FudisLanguageAbbr,
+ FudisTranslationConfig,
+} from '../../../types/miscellaneous';
 import { TooltipApiDirective } from '../../../directives/tooltip/tooltip-api.directive';
 import { FudisTranslationService } from '../../../services/translation/translation.service';
 
 @Component({
  selector: 'fudis-language-badge',
  styleUrls: ['./language-badge.component.scss'],
  templateUrl: './language-badge.component.html',
- encapsulation: ViewEncapsulation.None,
 })
-export class LanguageBadgeComponent extends TooltipApiDirective implements OnInit, OnChanges {
+export class LanguageBadgeComponent extends TooltipApiDirective implements OnChanges {
  constructor(private _translationService: FudisTranslationService) {
  super();
- this._translations = this._translationService.getTranslations();
- this._selectedLabel = this._translations().LANGUAGE_BADGE.ARIA_LABEL.SELECTED;
- this._missingTranslation = this._translations().LANGUAGE_BADGE.ARIA_LABEL.MISSING_TRANSLATION;
- }
 
- /**
- * Binding host CSS class to component wrapper
- */
- @HostBinding('class') private _classes = 'fudis-language-badge-host';
+ effect(() => {
+ this._translations = this._translationService.getTranslations();
+ this._selectedLabel = this._translations().LANGUAGE_BADGE.ARIA_LABEL.SELECTED;
+ this._missingTranslation = this._translations().LANGUAGE_BADGE.ARIA_LABEL.MISSING_TRANSLATION;
+ });
+ }
 
  /*
  * Language abbreviation for Language Badge
@@ -82,12 +73,10 @@ export class LanguageBadgeComponent extends TooltipApiDirective implements OnIni
  */
  protected _translations: Signal<FudisTranslationConfig>;
 
- ngOnInit(): void {
- this._setLabel();
- }
-
- ngOnChanges(): void {
- this._setLabel();
+ ngOnChanges(changes: FudisComponentChanges<LanguageBadgeComponent>): void {
+ if (changes.selected || changes.variant || changes.label) {
+ this._setLabel();
+ }
  }
 
  /**