From 84aeff82b4dd0ba180f4f9a9ba56813e6b8b7f38 Mon Sep 17 00:00:00 2001 From: lucasferreiralimax Date: Fri, 18 Oct 2024 03:00:47 -0300 Subject: [PATCH] update with hiddelabel --- .../src/lib/darkmode-angular.component.html | 6 ++- .../src/lib/darkmode-angular.component.scss | 13 +++-- .../lib/darkmode-angular.component.spec.ts | 47 +++++++++---------- .../src/lib/darkmode-angular.component.ts | 13 +++-- 4 files changed, 46 insertions(+), 33 deletions(-) diff --git a/projects/darkmode-angular/src/lib/darkmode-angular.component.html b/projects/darkmode-angular/src/lib/darkmode-angular.component.html index 6d5f710..5c8e9a9 100644 --- a/projects/darkmode-angular/src/lib/darkmode-angular.component.html +++ b/projects/darkmode-angular/src/lib/darkmode-angular.component.html @@ -1,4 +1,4 @@ - diff --git a/projects/darkmode-angular/src/lib/darkmode-angular.component.scss b/projects/darkmode-angular/src/lib/darkmode-angular.component.scss index f1eb1b3..b1934c1 100644 --- a/projects/darkmode-angular/src/lib/darkmode-angular.component.scss +++ b/projects/darkmode-angular/src/lib/darkmode-angular.component.scss @@ -1,7 +1,6 @@ .btn-mode { - background: var(--color-primary); + background: var(--primary); color: #fff; - padding: 1rem; border-radius: 50px; box-shadow: inset 0 0 0 3px rgba(255,255,255,.2), 0 0 0 5px rgba(0,0,0,.1); border: 0; @@ -9,7 +8,15 @@ display: flex; justify-content: center; align-items: center; - margin: 2rem auto; + margin: 2rem 1rem; + position: fixed; + top: 0; + right: 0; + padding: .6rem; + z-index: 11; + &.hiddenLabel svg { + margin-right: 0; + } } .btn-mode svg { margin-right: .5rem; diff --git a/projects/darkmode-angular/src/lib/darkmode-angular.component.spec.ts b/projects/darkmode-angular/src/lib/darkmode-angular.component.spec.ts index ee779b1..34c1e36 100644 --- a/projects/darkmode-angular/src/lib/darkmode-angular.component.spec.ts +++ b/projects/darkmode-angular/src/lib/darkmode-angular.component.spec.ts @@ -1,6 +1,5 @@ import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; - import { DarkmodeComponent } from './darkmode-angular.component'; describe('DarkmodeComponent', () => { @@ -9,51 +8,51 @@ describe('DarkmodeComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ DarkmodeComponent ] - }) - .compileComponents(); + imports: [DarkmodeComponent] + }).compileComponents(); fixture = TestBed.createComponent(DarkmodeComponent); component = fixture.componentInstance; fixture.detectChanges(); }); - it('should create', async () => { + it('should create', () => { expect(component).toBeTruthy(); }); - it('should light and dark mode', fakeAsync(() => { - const btnMode = fixture.debugElement.query(By.css('.btn-mode')).nativeElement - expect(modeButton()).toBe('LightMode'); + it('should toggle light and dark mode', fakeAsync(() => { + const btnMode = fixture.debugElement.query(By.css('.btn-mode')).nativeElement; + + // Check initial state (LightMode) + expect(modeButtonText()).toBe('LightMode'); expect(buttonIcon('[aria-label="Icon Light Mode"]')).toBeTruthy(); - btnMode.dispatchEvent(new Event('click')); + // Toggle to DarkMode + btnMode.click(); + fixture.detectChanges(); + tick(); - expect(modeButton()).toBe('DarkMode'); + expect(modeButtonText()).toBe('DarkMode'); expect(buttonIcon('[aria-label="Icon Dark Mode"]')).toBeTruthy(); - })); - function modeButton() { + // Toggle back to LightMode + btnMode.click(); fixture.detectChanges(); tick(); - let result = fixture.debugElement.query( - By.css('.btn-mode') - ).nativeElement.textContent.trim(); + expect(modeButtonText()).toBe('LightMode'); + expect(buttonIcon('[aria-label="Icon Light Mode"]')).toBeTruthy(); + })); + function modeButtonText(): string { + fixture.detectChanges(); tick(); - return result; + return fixture.debugElement.query(By.css('.btn-mode')).nativeElement.textContent.trim(); } - function buttonIcon(value: string) { + function buttonIcon(selector: string): HTMLElement | null { fixture.detectChanges(); tick(); - - let result = fixture.debugElement.query( - By.css(value) - ).nativeElement; - - tick(); - return result; + return fixture.debugElement.query(By.css(selector))?.nativeElement || null; } }); diff --git a/projects/darkmode-angular/src/lib/darkmode-angular.component.ts b/projects/darkmode-angular/src/lib/darkmode-angular.component.ts index 8a8e098..ba3472d 100644 --- a/projects/darkmode-angular/src/lib/darkmode-angular.component.ts +++ b/projects/darkmode-angular/src/lib/darkmode-angular.component.ts @@ -1,13 +1,18 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core'; +import { CommonModule } from '@angular/common'; @Component({ - selector: 'darkmode-angular', + selector: 'app-darkmode', standalone: true, - templateUrl: './darkmode-angular.component.html', - styleUrls: ['./darkmode-angular.component.scss'] + imports: [CommonModule], + templateUrl: './darkmode.component.html', + styleUrls: ['./darkmode.component.scss'], + encapsulation: ViewEncapsulation.None }) export class DarkmodeComponent implements OnInit { + @Input() hiddenLabel: boolean | undefined; + constructor() { } modeLocal = localStorage.getItem('darkmode')