feat: completely remove font awesome and refactor accordingly

OUI-1535 BREAKING CHANGE: * Font-Awesome icons are not provided anymore, use Oblique icons instead * Oblique components can't display Font-Awesome icons anymore * `ObUseObliqueIcons` has been removed (solved by schematics)
nxpatterns · Dec 16, 2022 · 2d20bb9 · 2d20bb9
1 parent a434fce
commit 2d20bb9
Show file tree

Hide file tree

Showing 50 changed files with 83 additions and 584 deletions.
diff --git a/DEPENDENCIES.md b/DEPENDENCIES.md
@@ -16,7 +16,6 @@
 | @angular/platform-browser         | Angular            |                 | Supports execution of Angular apps on different supported browsers.                                                                                                                                                                                                                                                                                 | https://www.npmjs.com/package/@angular/platform-browser         | https://angular.io/api/platform-browser                                   |
 | @angular/platform-browser-dynamic | Angular            |                 | Supports JIT compilation and execution of Angular apps on different supported browsers                                                                                                                                                                                                                                                              | https://www.npmjs.com/package/@angular/platform-browser-dynamic | https://angular.io/api/platform-browser-dynamic                           |
 | @angular/router                   | Angular            |                 | Implements the Angular Router service , which enables navigation from one view to the next as users perform application tasks.                                                                                                                                                                                                                      | https://www.npmjs.com/package/@angular/router                   | https://angular.io/api/router                                             |
-| @fortawesome/fontawesome-free     | Oblique icons      |                 |                                                                                                                                                                                                                                                                                                                                                     | https://www.npmjs.com/package/@fortawesome/fontawesome-free     | https://fontawesome.com/                                                  |
 | @ngx-translate/core               | Oblique            |                 | The internationalization (i18n) library for Angular.                                                                                                                                                                                                                                                                                                | https://www.npmjs.com/package/@ngx-translate/core               | https://www.npmjs.com/package/@ngx-translate/core                         |
 | @popperjs/core                    | ObPopover          |                 | Tooltip & Popover Positioning Engine                                                                                                                                                                                                                                                                                                                | https://www.npmjs.com/package/@popperjs/core                    | https://popper.js.org/docs/v2/                                            |
 | ajv                               | ObSchemaValidation |                 | Ajv JSON schema validator                                                                                                                                                                                                                                                                                                                           | https://www.npmjs.com/package/ajv                               | https://ajv.js.org/                                                       |

diff --git a/LICENSE b/LICENSE
@@ -19,39 +19,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE</p>
-
-
-
-Font Awesome Free License
-
-Font Awesome Free is free, open source, and GPL friendly. You can use it for
-commercial projects, open source projects, or really almost whatever you want.
-Full Font Awesome Free license: https://fontawesome.com/license/free.
-
-# Icons: CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/)
-In the Font Awesome Free download, the CC BY 4.0 license applies to all icons
-packaged as SVG and JS file types.
-
-# Fonts: SIL OFL 1.1 License (https://scripts.sil.org/OFL)
-In the Font Awesome Free download, the SIL OFL license applies to all icons
-packaged as web and desktop font files.</p>
-
-# Code: MIT License (https://opensource.org/licenses/MIT)
-In the Font Awesome Free download, the MIT license applies to all non-font and
-non-icon files.
-
-# Attribution
-Attribution is required by MIT, SIL OFL, and CC BY licenses. Downloaded Font
-Awesome Free files already contain embedded comments with sufficient
-attribution, so you shouldn't need to do anything additional when using these
-files normally.
-
-We've kept attribution comments terse, so we ask that you do not actively work
-to remove them from files, especially code. They're a great way for folks to
-learn about Font Awesome.
-
-# Brand Icons
-All brand icons are trademarks of their respective owners. The use of these
-trademarks does not indicate endorsement of the trademark holder by Font
-Awesome, nor vice versa. **Please do not use brand logos for any purpose except
-to represent the company, product, or service to which they refer.**
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -86,7 +86,6 @@
     "@angular/platform-browser": "^14.2.12",
     "@angular/platform-browser-dynamic": "^14.2.12",
     "@angular/router": "^14.2.12",
-    "@fortawesome/fontawesome-free": "^5.15.4",
     "@ngx-translate/core": "^14.0.0",
     "@popperjs/core": "^2.11.6",
     "ajv": "^8.11.2",

diff --git a/projects/oblique/jest.config.prod.js b/projects/oblique/jest.config.prod.js
@@ -46,10 +46,10 @@ module.exports.coverageThreshold = {
 		lines: 100
 	},
 	'projects/oblique/src/lib/column-layout/*.ts': {
-		statements: 55,
-		branches: 47,
+		statements: 52,
+		branches: 35,
 		functions: 27,
-		lines: 58
+		lines: 56
 	},
 	'projects/oblique/src/lib/document-meta/*.ts': {
 		statements: 60,
@@ -107,7 +107,7 @@ module.exports.coverageThreshold = {
 	},
 	'projects/oblique/src/lib/master-layout/master-layout/*.ts': {
 		statements: 87,
-		branches: 58,
+		branches: 56,
 		functions: 74,
 		lines: 86
 	},
@@ -118,10 +118,10 @@ module.exports.coverageThreshold = {
 		lines: 82
 	},
 	'projects/oblique/src/lib/master-layout/master-layout-navigation/*.ts': {
-		statements: 69,
+		statements: 65,
 		branches: 53,
 		functions: 53,
-		lines: 70
+		lines: 65
 	},
 	'projects/oblique/src/lib/multi-translate-loader/*.ts': {
 		statements: 22,
@@ -167,7 +167,7 @@ module.exports.coverageThreshold = {
 	},
 	'projects/oblique/src/lib/scrolling/*.ts': {
 		statements: 66,
-		branches: 90,
+		branches: 83,
 		functions: 0,
 		lines: 63
 	},

diff --git a/projects/oblique/schematics/index/ng-update/update-v9-to-v10.ts b/projects/oblique/schematics/index/ng-update/update-v9-to-v10.ts
@@ -1,6 +1,6 @@
 import {Rule, SchematicContext, Tree, chain} from '@angular-devkit/schematics';
+import {applyInTree, createSafeRule, infoMigration, removeImport, replaceInFile} from '../utils';
 import {ObIMigrations} from './ng-update.model';
-import {applyInTree, createSafeRule, infoMigration, replaceInFile} from '../utils';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface IUpdateV9Schema {}
@@ -10,7 +10,7 @@ export class UpdateV9toV10 implements ObIMigrations {
 
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	applyMigrations(_options: IUpdateV9Schema): Rule {
-		return (tree: Tree, _context: SchematicContext) => chain([this.renameIcons()])(tree, _context);
+		return (tree: Tree, _context: SchematicContext) => chain([this.renameIcons(), this.removeObUseObliqueIcons()])(tree, _context);
 	}
 
 	private renameIcons(): Rule {
@@ -25,4 +25,15 @@ export class UpdateV9toV10 implements ObIMigrations {
 			return applyInTree(tree, toApply, '*.{ts,html}');
 		});
 	}
+
+	private removeObUseObliqueIcons(): Rule {
+		return createSafeRule((tree: Tree, _context: SchematicContext) => {
+			infoMigration(_context, 'Remove ObUseObliqueIcons');
+			const apply = (filePath: string): void => {
+				removeImport(tree, filePath, 'ObUseObliqueIcons', '@oblique/oblique');
+				replaceInFile(tree, filePath, /(?:,\s*)?{\s*provide\s*:\s*ObUseObliqueIcons\s*,\s*useValue\s*:\s*(?:true|false)\s*}/, '');
+			};
+			return applyInTree(tree, apply, '*.ts');
+		});
+	}
 }
diff --git a/projects/oblique/scripts/post-dist/steps/copy-dist-files.ts b/projects/oblique/scripts/post-dist/steps/copy-dist-files.ts
@@ -4,7 +4,6 @@ import path from 'path';
 export class CopyDistFiles {
 	private static readonly SOURCE = path.join('projects', 'oblique', 'src');
 	private static readonly DESTINATION = path.join('dist', 'oblique');
-	private static readonly FONT_AWESOME = path.join('node_modules', '@fortawesome', 'fontawesome-free');
 
 	static perform(): void {
 		CopyDistFiles.copyRootFiles(['README.md', 'CHANGELOG.md', 'LICENSE']);
@@ -16,9 +15,6 @@ export class CopyDistFiles {
 			...CopyDistFiles.listFiles(path.join(CopyDistFiles.SOURCE, 'assets')),
 			...CopyDistFiles.listFiles(path.join(CopyDistFiles.SOURCE, 'styles'))
 		]);
-
-		CopyDistFiles.copyFontAwesomeFiles(path.join(CopyDistFiles.FONT_AWESOME, 'webfonts'), path.join('styles', 'fonts'));
-		CopyDistFiles.copyFontAwesomeFiles(path.join(CopyDistFiles.FONT_AWESOME, 'scss'), path.join('styles', 'scss', 'fontawesome'));
 	}
 
 	private static listFiles(directory: string): string[] {
@@ -39,10 +35,6 @@ export class CopyDistFiles {
 		CopyDistFiles.copyFiles(fileList, CopyDistFiles.SOURCE, CopyDistFiles.DESTINATION);
 	}
 
-	private static copyFontAwesomeFiles(source: string, destination: string): void {
-		CopyDistFiles.copyFiles(CopyDistFiles.listFiles(source), source, path.join(CopyDistFiles.DESTINATION, destination));
-	}
-
 	private static copyFiles(fileList: string[], source: string | RegExp, destination: string): void {
 		fileList
 			.map(filePath => ({

diff --git a/projects/oblique/scripts/post-dist/steps/update-paths.ts b/projects/oblique/scripts/post-dist/steps/update-paths.ts
@@ -3,13 +3,9 @@ import path from 'path';
 
 export class UpdatePaths {
 	private static readonly stylesDirectoryPath: string = path.join('dist', 'oblique', 'styles');
-	private static readonly fontAwesomePath = '~@fortawesome/fontawesome-free';
-	private static readonly obliquePath = '~@oblique/oblique/styles';
 
 	static perform(): void {
 		UpdatePaths.updateBackgroundImagePath();
-		UpdatePaths.updateScssFontAwesomePaths();
-		UpdatePaths.updateCssFontAwesomePaths();
 	}
 
 	private static updateBackgroundImagePath(): void {
@@ -20,20 +16,6 @@ export class UpdatePaths {
 		);
 	}
 
-	private static updateScssFontAwesomePaths(): void {
-		const scssFilePaths = this.listFiles(path.join(UpdatePaths.stylesDirectoryPath, 'scss')).filter(filePath => filePath.endsWith('.scss'));
-		UpdatePaths.replaceInFiles(scssFilePaths, `${UpdatePaths.fontAwesomePath}/webfonts`, `${UpdatePaths.obliquePath}/fonts`);
-		UpdatePaths.replaceInFiles(scssFilePaths, `${UpdatePaths.fontAwesomePath}/scss`, `${UpdatePaths.obliquePath}/scss/fontawesome`);
-	}
-
-	private static updateCssFontAwesomePaths(): void {
-		UpdatePaths.replaceInFiles(
-			[path.join(UpdatePaths.stylesDirectoryPath, 'css', 'oblique-core.css')],
-			/(?<=url\()fa-/,
-			'~@oblique/oblique/styles/fonts/fa-'
-		);
-	}
-
 	private static listFiles(directory: string): string[] {
 		return readdirSync(directory)
 			.map(fileName => path.join(directory, fileName))

diff --git a/projects/oblique/src/lib/alert/alert.component.scss b/projects/oblique/src/lib/alert/alert.component.scss
@@ -62,9 +62,3 @@
 		}
 	}
 }
-
-.ob-alert.ob-font-awesome .ob-alert-icon {
-	font-size: 1.5em;
-	width: variables.$ob-alert-symbol-width;
-	padding: variables.$ob-spacing-default;
-}
diff --git a/projects/oblique/src/lib/alert/alert.component.spec.ts b/projects/oblique/src/lib/alert/alert.component.spec.ts
@@ -4,7 +4,6 @@ import {By} from '@angular/platform-browser';
 import {TranslateService} from '@ngx-translate/core';
 import {ObMockTranslatePipe} from '../_mocks/mock-translate.pipe';
 import {ObMockTranslateService} from '../_mocks/mock-translate.service';
-import {ObUseObliqueIcons} from '../icon/icon.model';
 import {OBLIQUE_HAS_ROLE_ALERT, ObAlertComponent} from './alert.component';
 
 @Component({
@@ -72,10 +71,6 @@ describe('ObAlertComponent', () => {
 			expect(debugElement.nativeElement.classList.contains('ob-angular')).toBe(true);
 		});
 
-		it('should not have ob-font-awesome class', () => {
-			expect(debugElement.nativeElement.classList.contains('ob-font-awesome')).toBe(false);
-		});
-
 		describe('type', () => {
 			describe('with default type', () => {
 				it('should have type info ', () => {
@@ -190,34 +185,6 @@ describe('ObAlertComponent', () => {
 		});
 	});
 
-	describe('with FontAwesome icons', () => {
-		beforeEach(async () => {
-			await TestBed.configureTestingModule({
-				declarations: [DefaultTestComponent, ObMockTranslatePipe, ObAlertComponent],
-				providers: [
-					{provide: TranslateService, useClass: ObMockTranslateService},
-					{provide: ObUseObliqueIcons, useValue: false}
-				],
-				schemas: [CUSTOM_ELEMENTS_SCHEMA]
-			}).compileComponents();
-		});
-
-		beforeEach(() => {
-			fixture = TestBed.createComponent(DefaultTestComponent);
-			testComponent = fixture.componentInstance;
-			fixture.detectChanges();
-			debugElement = fixture.debugElement.query(By.directive(ObAlertComponent));
-		});
-
-		it('should create', () => {
-			expect(testComponent).toBeTruthy();
-		});
-
-		it('should have ob-font-awesome class', () => {
-			expect(debugElement.nativeElement.classList.contains('ob-font-awesome')).toBe(true);
-		});
-	});
-
 	describe('live region role alert', () => {
 		describe('with alert role from user over DOM, undefined token and input', () => {
 			beforeEach(async () => {

diff --git a/projects/oblique/src/lib/alert/alert.component.ts b/projects/oblique/src/lib/alert/alert.component.ts
@@ -1,6 +1,5 @@
 import {Attribute, Component, HostBinding, Inject, InjectionToken, Input, OnInit, Optional, ViewEncapsulation} from '@angular/core';
 import {ObIAlertType} from './alert.model';
-import {ObUseObliqueIcons} from '../icon/icon.model';
 
 export const OBLIQUE_HAS_ROLE_ALERT = new InjectionToken<boolean>(
 	'Flag to globally add role="alert" per default on all ob-alert components'
@@ -18,21 +17,17 @@ export class ObAlertComponent implements OnInit {
 	@HostBinding('class.ob-alert-success') success = false;
 	@HostBinding('class.ob-alert-warning') warning = false;
 	@HostBinding('class.ob-alert-error') error = false;
-	@HostBinding('class.ob-font-awesome') useFontAwesomeIcons: boolean;
 	@HostBinding('attr.role') role: string = this.initialRole;
 	icon = 'info';
 
 	private currentType: ObIAlertType = 'info';
 	private hasAlertRole?: boolean | undefined;
 
 	constructor(
-		@Optional() @Inject(ObUseObliqueIcons) useObliqueIcons: boolean,
 		@Optional() @Inject(OBLIQUE_HAS_ROLE_ALERT) private readonly hasGlobalAlertRole: boolean,
 		// eslint-disable-next-line @angular-eslint/no-attribute-decorator
 		@Attribute('role') private readonly initialRole: string
-	) {
-		this.useFontAwesomeIcons = !(useObliqueIcons ?? true);
-	}
+	) {}
 
 	get hasRoleAlert(): boolean | undefined {
 		return this.hasAlertRole;

diff --git a/projects/oblique/src/lib/alert/alert.description.html b/projects/oblique/src/lib/alert/alert.description.html
@@ -10,5 +10,4 @@
 		needs to be loaded. Then an alert can be displayed by setting both the <code>ob-alert</code> and one of <code>ob-alert-info</code>,
 		<code>ob-alert-success</code>, <code>ob-alert-warning</code> or <code>ob-alert-error</code> classes.
 	</p>
-	<p>Please note that these alerts will be displayed with Oblique's icons instead of FontAwesome ones.</p>
 </div>
diff --git a/projects/oblique/src/lib/autocomplete/autocomplete.component.html b/projects/oblique/src/lib/autocomplete/autocomplete.component.html
@@ -4,7 +4,7 @@
 	<ng-content select="[matPrefix]"></ng-content>
 	<button [obInputClear]="autocompleteInputControl" type="button">
 		<mat-icon class="ob-icon" svgIcon="cancel-circle"></mat-icon>
-		<span class="sr-only">{{ "i18n.common.clear" | translate }}</span>
+		<span class="ob-screen-reader-only">{{ "i18n.common.clear" | translate }}</span>
 	</button>
 	<ng-content select="[matSuffix]"></ng-content>
 </mat-form-field>

diff --git a/projects/oblique/src/lib/column-layout/column-layout.component.scss b/projects/oblique/src/lib/column-layout/column-layout.component.scss
@@ -86,10 +86,6 @@
 			align-items: center;
 			justify-content: center;
 
-			@at-root #{selector.append(".ob-font-awesome", &)} {
-				color: variables.$ob-gray-light;
-			}
-
 			&:hover,
 			&:focus {
 				transform: scale(1.25);

diff --git a/projects/oblique/src/lib/column-layout/column-layout.component.spec.ts b/projects/oblique/src/lib/column-layout/column-layout.component.spec.ts
@@ -8,7 +8,6 @@ import {ObMockTranslatePipe} from '../_mocks/mock-translate.pipe';
 import {ObMockTranslateService} from '../_mocks/mock-translate.service';
 import {WINDOW} from '../utilities';
 import {ObColumnLayoutComponent} from './column-layout.component';
-import {ObUseObliqueIcons} from '../icon/icon.model';
 
 @Component({
 	template: ` <ob-column-layout [left]="left" [right]="right" obColumnPanel>
@@ -37,7 +36,6 @@ class TestComponent {
 describe('ColumnLayoutComponent', () => {
 	let fixture: ComponentFixture<TestComponent>;
 	let testComponent: TestComponent;
-	let component: ObColumnLayoutComponent;
 
 	beforeEach(waitForAsync(() => {
 		TestBed.configureTestingModule({
@@ -51,37 +49,17 @@ describe('ColumnLayoutComponent', () => {
 		}).compileComponents();
 	}));
 
-	describe('Without ObUseObliqueIcons token', () => {
-		beforeEach(waitForAsync(() => {
-			fixture = TestBed.createComponent(TestComponent);
-			testComponent = fixture.componentInstance;
-			component = fixture.debugElement.query(By.css('ob-column-layout')).componentInstance;
-			fixture.detectChanges();
-		}));
-
-		it('should create', () => {
-			expect(testComponent).toBeTruthy();
-		});
-
-		it('should contain columnLayout class', () => {
-			expect(fixture.debugElement.query(By.css('ob-column-layout')).nativeElement.classList).toContain('ob-column-layout');
-		});
+	beforeEach(waitForAsync(() => {
+		fixture = TestBed.createComponent(TestComponent);
+		testComponent = fixture.componentInstance;
+		fixture.detectChanges();
+	}));
 
-		it('should not use FontAwesome', () => {
-			expect(component.useFontAwesomeIcon).toBe(false);
-		});
+	it('should create', () => {
+		expect(testComponent).toBeTruthy();
 	});
 
-	describe.each([true, false])('With ObUseObliqueIcons token set to %s', value => {
-		beforeEach(waitForAsync(() => {
-			TestBed.overrideProvider(ObUseObliqueIcons, {useValue: value});
-			fixture = TestBed.createComponent(TestComponent);
-			component = fixture.debugElement.query(By.css('ob-column-layout')).componentInstance;
-			fixture.detectChanges();
-		}));
-
-		it('should use FontAwesome', () => {
-			expect(component.useFontAwesomeIcon).toBe(!value);
-		});
+	it('should contain columnLayout class', () => {
+		expect(fixture.debugElement.query(By.css('ob-column-layout')).nativeElement.classList).toContain('ob-column-layout');
 	});
 });