Introducing absoluteStrokeWidth option on Lucide Components (#939)

* Add more music icons and another mic icon (#746)

* Revert "Add more music icons and another mic icon (#746)" (#750)

This reverts commit 57cba6ae0e.

* add scale Stroke width

* Added scaleStrokeWidth prop to all packages

* Add scaleStrokeWidth to types

* Rename scaleStrokeWidth to absoluteStrokeWidth

* Adds common API elements to the Angular package (#949)

* Almost complete rewrite of the Angular package

* Update tsconfig.spec.json

* fixes icon build export file name

* Updates Angular documentation with the new properties + provider injection

* Update lucide-angular.md

* refactored scaleStrokeWidth to be absoluteStrokeWidth to match other packages

* removed codelyzer from devDeps + added flexible angular core dependencies

* Deprecates createElement helper in favour of Renderer2 to support SSR

---------

Co-authored-by: Karsa <karsa@karsa.org>

* Add absoluteStrokeWidth in docs

* update snapshots

* Manual merge of main

* Fixed incorrectly merged pnpm-lock.yaml

* Fixes lucide-angular build

* [lucide-angular] Global configuration for properties + bugfix for legacy icon provider   (#1012)

* Almost complete rewrite of the Angular package

* Update tsconfig.spec.json

* fixes icon build export file name

* Updates Angular documentation with the new properties + provider injection

* Update lucide-angular.md

* refactored scaleStrokeWidth to be absoluteStrokeWidth to match other packages

* removed codelyzer from devDeps + added flexible angular core dependencies

* Deprecates createElement helper in favour of Renderer2 to support SSR

* Added global configuration and fixed undefined bug in legacy icon provider. Also updated README.md

* Replaces removed line in README.md

* Fixes merge error

* Updates export template to use the non-deprecated type

* downgrade building to ng-cli@13

* downgrade to es2020

---------

Co-authored-by: Karsa <karsa@karsa.org>

* rename scaleStrokeWidth to absoluteStrokeWidth in readme

---------

Co-authored-by: it-is-not <72697755+it-is-not@users.noreply.github.com>
Co-authored-by: Karsa <contact@karsa.org>
Co-authored-by: Eric Fennis <eric@dreamteam.nl>
Co-authored-by: Karsa <karsa@karsa.org>
Co-authored-by: Eric Fennis <eric.fennis@nac41112.nedap.local>
This commit is contained in:
Eric Fennis
2023-04-20 16:08:34 +02:00
committed by GitHub
parent f35f45c7b3
commit a87ae2a92b
63 changed files with 7480 additions and 6627 deletions

View File

@@ -1,28 +1,103 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { LucideAngularModule } from './lucide-angular.module';
import { LucideAngularComponent } from './lucide-angular.component';
import {Component} from '@angular/core';
import {ComponentFixture, TestBed} from '@angular/core/testing';
import {LucideAngularModule} from './lucide-angular.module';
import {formatFixed, LucideAngularComponent} from './lucide-angular.component';
import defaultAttributes from '../icons/constants/default-attributes';
import {LucideIcons} from '../icons/types';
describe('LucideAngularComponent', () => {
let component: LucideAngularComponent;
let fixture: ComponentFixture<LucideAngularComponent>;
let testHostComponent: TestHostComponent;
let testHostFixture: ComponentFixture<TestHostComponent>;
const getSvgAttribute = (attr: string) =>
testHostFixture.nativeElement.querySelector('svg').getAttribute(attr);
const testIcons: LucideIcons = {
Demo: [
'svg',
defaultAttributes,
[['polyline', {points: '1 1 22 22'}]],
],
};
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ LucideAngularComponent ],
imports: [
LucideAngularModule.pick({ })
],
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [LucideAngularComponent, TestHostComponent],
imports: [
LucideAngularModule.pick(testIcons),
]
}).compileComponents();
testHostFixture = TestBed.createComponent(TestHostComponent);
testHostComponent = testHostFixture.componentInstance;
});
it('should create', () => {
testHostFixture.detectChanges();
expect(testHostComponent).toBeTruthy();
});
it('should set color', () => {
const color = 'red';
testHostComponent.setColor(color);
testHostFixture.detectChanges();
expect(getSvgAttribute('stroke')).toBe(color);
});
it('should set size', () => {
const size = 12;
testHostComponent.setSize(size);
testHostFixture.detectChanges();
expect(getSvgAttribute('width')).toBe(size.toString(10));
});
it('should set stroke width', () => {
const strokeWidth = 1.41;
testHostComponent.setStrokeWidth(strokeWidth);
testHostFixture.detectChanges();
expect(getSvgAttribute('stroke-width')).toBe(strokeWidth.toString(10));
});
it('should adjust stroke width', () => {
const strokeWidth = 2;
const size = 12;
testHostComponent.setStrokeWidth(strokeWidth);
testHostComponent.setSize(12);
testHostComponent.setAbsoluteStrokeWidth(true);
testHostFixture.detectChanges();
expect(getSvgAttribute('stroke-width')).toBe(
formatFixed(strokeWidth / (size / defaultAttributes.height))
);
});
@Component({
selector: 'lucide-spec-host-component',
template: `
<i-lucide
name="demo"
[color]="color"
[size]="size"
[strokeWidth]="strokeWidth"
[absoluteStrokeWidth]="absoluteStrokeWidth"
></i-lucide>`,
})
.compileComponents();
});
class TestHostComponent {
color?: string;
size?: number;
strokeWidth?: number;
absoluteStrokeWidth = true;
beforeEach(() => {
fixture = TestBed.createComponent(LucideAngularComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
setColor(color: string): void {
this.color = color;
}
it('should create', () => {
expect(component).toBeTruthy();
});
setSize(size: number): void {
this.size = size;
}
setStrokeWidth(strokeWidth: number): void {
this.strokeWidth = strokeWidth;
}
setAbsoluteStrokeWidth(absoluteStrokeWidth: boolean): void {
this.absoluteStrokeWidth = absoluteStrokeWidth;
}
}
});