More rules

components/clear-button.ts

@@ -1,13 +1,13 @@
 import customEvent from "./custom-event";
 
 class ClearButton extends HTMLButtonElement {
- constructor() {
+ public constructor() {
  super();
  this.addEventListener("click", this.onClick);
  this.classList.add("clear-button");
  }
 
- onClick() {
+ private onClick(): void {
  this.dispatchEvent(
  customEvent("clear-filter", {
  value: this.value,

components/filter-checkbox.ts

@@ -1,7 +1,7 @@
 import customEvent from "./custom-event";
 
 class FilterCheckbox extends HTMLInputElement {
- constructor() {
+ public constructor() {
  super();
  this.addEventListener("change", this.onChange);
  this.handleInitialValue();
@@ -13,7 +13,7 @@ class FilterCheckbox extends HTMLInputElement {
  });
  }
 
- onChange() {
+ private onChange(): void {
  this.dispatchEvent(
  customEvent("handle-filter", {
  value: this.checked,
@@ -23,7 +23,7 @@ class FilterCheckbox extends HTMLInputElement {
  this.setUrlParam();
  }
 
- setUrlParam() {
+ private setUrlParam(): void {
  const urlParameters = new URLSearchParams(window.location.search);
  // only set variable if it's true
  if (this.checked === false) {
@@ -38,7 +38,7 @@ class FilterCheckbox extends HTMLInputElement {
  );
  }
 
- handleInitialValue() {
+ private handleInitialValue(): void {
  const urlParameters = new URLSearchParams(window.location.search);
  const initialValue = urlParameters.get("variable");
  if (initialValue === "true") {

components/filter-select.ts

@@ -1,7 +1,7 @@
 import customEvent from "./custom-event";
 
 class FilterSelect extends HTMLSelectElement {
- constructor() {
+ public constructor() {
  super();
  this.addEventListener("change", this.onChange);
  this.handleInitialValue();
@@ -22,7 +22,7 @@ class FilterSelect extends HTMLSelectElement {
  });
  }
 
- onChange() {
+ private onChange(): void {
  const { id, value } = this;
  this.dispatchEvent(
  customEvent(
@@ -37,7 +37,7 @@ class FilterSelect extends HTMLSelectElement {
  this.setUrlParam();
  }
 
- setUrlParam() {
+ private setUrlParam(): void {
  const { param } = this.dataset;
  const urlParameters = new URLSearchParams(window.location.search);
  if (this.value) {
@@ -52,7 +52,7 @@ class FilterSelect extends HTMLSelectElement {
  );
  }
 
- handleInitialValue() {
+ private handleInitialValue(): string {
  const urlParameters = new URLSearchParams(window.location.search);
  const initialValue = urlParameters.get(this.dataset.param);
  if (initialValue) {

components/font-call.ts

@@ -62,7 +62,7 @@ export function familyStyle({
  selectedVariant: string;
  previewName: string;
  subset: string;
-}) {
+}): string {
  let style = `font-family: '${family}';`;
  if (rtlSubsets.includes(subset) && family !== previewName) {
  style += "direction: rtl;";

components/font-item.ts

@@ -7,25 +7,25 @@ type SampleSubsets = typeof sampleSubsets;
 type Swaps = typeof swaps;
 
 class FontItem extends HTMLLIElement {
- subset: string;
+ private subset: string;
 
- constructor() {
+ public constructor() {
  super();
  }
 
- get font(): GeneratedData[number] {
+ public get font(): GeneratedData[number] {
  return JSON.parse(this.getAttribute("font"));
  }
 
- get selectedSubset(): string {
+ public get selectedSubset(): string {
  return this.getAttribute("selected-subset") || "";
  }
 
- get selectedVariant(): string {
+ public get selectedVariant(): string {
  return this.getAttribute("selected-variant") || "";
  }
 
- get previewName(): string {
+ public get previewName(): string {
  const { family, subsets } = this.font;
  if (this.selectedSubset && this.selectedSubset in sampleSubsets) {
  return sampleSubsets[this.selectedSubset as keyof SampleSubsets];
@@ -45,15 +45,15 @@ class FontItem extends HTMLLIElement {
  return family;
  }
 
- get id(): string {
+ public get id(): string {
  return this.font.family.toLowerCase().replace(/ /g, "-");
  }
 
- get slug(): string {
+ public get slug(): string {
  return this.font.family.replace(/ /g, "+");
  }
 
- get familyStyle(): string {
+ public get familyStyle(): string {
  const { font, selectedVariant, previewName, subset } = this;
  return familyStyle({
  family: font.family,
@@ -63,7 +63,7 @@ class FontItem extends HTMLLIElement {
  });
  }
 
- connectedCallback() {
+ public connectedCallback(): void {
  const { family, category, variants, subsets, lineNumber, tags, variable } =
  this.font;
  this.subset = this.selectedSubset;
@@ -117,7 +117,7 @@ class FontItem extends HTMLLIElement {
  </div>`;
  }
 
- addFontToHead(): void {
+ public addFontToHead(): void {
  const { slug, selectedVariant, previewName, font } = this;
  const { family, variants } = font;
 
@@ -133,7 +133,7 @@ class FontItem extends HTMLLIElement {
  document.head.append(linkElement);
  }
 
- disconnectedCallback() {
+ public disconnectedCallback(): void {
  const linkElement = document.querySelector(
  `link[data-family="${this.font.family}"]`,
  );

components/font-list.ts

@@ -1,23 +1,23 @@
 import { setAttributes } from "./set-attributes";
 
 class FontList extends HTMLUListElement {
- constructor() {
+ public constructor() {
  super();
  }
 
- get selectedVariant() {
+ public get selectedVariant(): string {
  return this.getAttribute("selected-variant");
  }
 
- get selectedSubset() {
+ public get selectedSubset(): string {
  return this.getAttribute("selected-subset");
  }
 
- get fonts() {
+ public get fonts(): string {
  return JSON.parse(this.getAttribute("fonts"));
  }
 
- connectedCallback() {
+ public connectedCallback(): void {
  if (!this.fonts) return;
  const items = [];
  for (const font of this.fonts) {
@@ -33,12 +33,16 @@ class FontList extends HTMLUListElement {
  this.innerHTML = items.join("\n");
  }
 
- attributeChangedCallback(name: string, oldValue: string, nextValue: string) {
+ public attributeChangedCallback(
+ name: string,
+ oldValue: string,
+ nextValue: string,
+ ): void {
  if (oldValue === nextValue) return;
  this.connectedCallback();
  }
 
- static get observedAttributes() {
+ public static get observedAttributes(): string[] {
  return ["selected-variant", "selected-subset", "fonts"];
  }
 }