Add font toggle to playground (#27)

Author: Matthbo

src/app/app.component.html

@@ -94,6 +94,7 @@ <h2>Datatable</h2>
 </ul>
 
 <div class="options">
+  <ff-button (click)="toggleFont()">Font</ff-button>
   <ff-button (click)="toggleTheme()"
     ><span class="yellow-dark">Dark</span> / <span class="yellow-light">Light</span></ff-button
   >

src/app/app.component.scss

@@ -35,4 +35,8 @@ ul.components-list {
   position: fixed;
   top: 20px;
   right: 20px;
+
+  ff-button {
+    margin-left: 5px;
+  }
 }

src/app/app.component.ts

@@ -28,6 +28,8 @@ export class AppComponent implements OnInit {
     { name: 'something', displayName: 'Something', property: null, html: true },
   ];
 
+  private readonly appRoot: HTMLElement = document.querySelector('app-root')!;
+
   ngOnInit(): void {
     this.datasource.data = [
       {
@@ -57,6 +59,10 @@ export class AppComponent implements OnInit {
     document.body.classList.toggle('ff-dark-theme');
   }
 
+  protected toggleFont(): void {
+    this.appRoot.classList.toggle('no-font');
+  }
+
   protected changeSearchQuery(): void {
     this.searchText = 'Eekum Bokum';
   }

src/styles.scss

@@ -1,5 +1,13 @@
 @use '../dist/angular-components';
 
+app-root {
+  font-family: 'Inter', sans-serif;
+
+  &.no-font {
+    font-family: unset;
+  }
+}
+
 .yellow-dark {
   color: inherit;
 }