Prettier write

.github/release.yml

@@ -14,4 +14,4 @@ changelog:
         - bug
     - title: Other 🗄
       labels:
-        - "*"
+        - "*"

.github/workflows/check_build.yml

@@ -13,7 +13,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version-file: '.node-version'
+          node-version-file: ".node-version"
       - name: Build
         env:
           NODE_OPTIONS: "--max_old_space_size=4096"

.github/workflows/check_formatting.yml

@@ -1,34 +1,34 @@
-name: Check formatting
-
-on:
-  push:
-    branches:
-      - main
-  pull_request:
-
-permissions:
-  contents: read
-
-# This allows a subsequently queued workflow run to interrupt previous runs
-concurrency:
-  group: '${{ github.workflow }} @ ${{ github.event.pull_request.head.label || github.head_ref || github.ref }}'
-  cancel-in-progress: true
-
-jobs:
-  format:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Setup Node.JS
-        uses: actions/setup-node@v4
-        with:
-          node-version-file: '.node-version'
-          cache: npm
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Verify formatting
-        run: npm run format:check
+name: Check formatting
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+permissions:
+  contents: read
+
+# This allows a subsequently queued workflow run to interrupt previous runs
+concurrency:
+  group: "${{ github.workflow }} @ ${{ github.event.pull_request.head.label || github.head_ref || github.ref }}"
+  cancel-in-progress: true
+
+jobs:
+  format:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.JS
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: ".node-version"
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Verify formatting
+        run: npm run format:check

.github/workflows/check_linting.yml

@@ -1,34 +1,34 @@
-name: Check linting
-
-on:
-  push:
-    branches:
-      - main
-  pull_request:
-
-permissions:
-  contents: read
-
-# This allows a subsequently queued workflow run to interrupt previous runs
-concurrency:
-  group: '${{ github.workflow }} @ ${{ github.event.pull_request.head.label || github.head_ref || github.ref }}'
-  cancel-in-progress: true
-
-jobs:
-  lint:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Setup Node.JS
-        uses: actions/setup-node@v4
-        with:
-          node-version-file: '.node-version'
-          cache: npm
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Verify linter
-        run: npm run lint:check
+name: Check linting
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+permissions:
+  contents: read
+
+# This allows a subsequently queued workflow run to interrupt previous runs
+concurrency:
+  group: "${{ github.workflow }} @ ${{ github.event.pull_request.head.label || github.head_ref || github.ref }}"
+  cancel-in-progress: true
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.JS
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: ".node-version"
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Verify linter
+        run: npm run lint:check

.github/workflows/deploy_gh_pages.yml

@@ -14,7 +14,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version-file: '.node-version'
+          node-version-file: ".node-version"
       - name: Build component
         env:
           NODE_OPTIONS: "--max_old_space_size=4096"

.github/workflows/release.yml

@@ -2,7 +2,7 @@ name: Release to GitHub Pages
 
 on:
   push:
-    tags: ['*']
+    tags: ["*"]
 
 jobs:
   release:
@@ -12,7 +12,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version-file: '.node-version'
+          node-version-file: ".node-version"
       - name: Build component
         env:
           NODE_OPTIONS: "--max_old_space_size=4096"

.github/workflows/test.yml

@@ -1,29 +1,29 @@
-name: Run tests
-
-on:
-  push:
-    branches:
-      - main
-  pull_request:
-
-permissions:
-  contents: read
-
-jobs:
-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Setup Node.JS
-        uses: actions/setup-node@v4
-        with:
-          node-version-file: '.node-version'
-          cache: npm
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Run tests
-        run: npm run test
+name: Run tests
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+permissions:
+  contents: read
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.JS
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: ".node-version"
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests
+        run: npm run test

README.md

@@ -13,7 +13,9 @@ To use the component, include the following script in your HTML file. Replace `<
 Then, add the `<self-assessment>` tag to your HTML file.
 
 ```html
-<self-assessment dataurl="https://pkic.github.io/self-assessment/<version>/assessment-data.yaml"></self-assessment>
+<self-assessment
+  dataurl="https://pkic.github.io/self-assessment/<version>/assessment-data.yaml"
+></self-assessment>
 ```
 
 ## Development
@@ -71,4 +73,4 @@ You can customize the styles of the component by adding the following CSS to you
 
 ## License
 
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

src/App.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Assessment } from './components/Assessment/Assessment';
+import React from "react";
+import { Assessment } from "./components/Assessment/Assessment";
 
 interface AppProps {
   dataUrl: string | null;

src/SelfAssessmentComponent.tsx

@@ -1,30 +1,30 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './App';
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
 
 class SelfAssessmentComponent extends HTMLElement {
-    private root: ReturnType<typeof createRoot> | null = null;
+  private root: ReturnType<typeof createRoot> | null = null;
 
-    constructor() {
-        super();
-    }
+  constructor() {
+    super();
+  }
 
-    connectedCallback() {
-        const dataUrl = this.getAttribute('dataUrl');
-        if (!this.root) {
-            this.root = createRoot(this);
-        }
-        this.root.render(<App dataUrl={dataUrl} />);
+  connectedCallback() {
+    const dataUrl = this.getAttribute("dataUrl");
+    if (!this.root) {
+      this.root = createRoot(this);
     }
+    this.root.render(<App dataUrl={dataUrl} />);
+  }
 
-    disconnectedCallback() {
-        if (this.root) {
-            this.root.unmount();
-        }
+  disconnectedCallback() {
+    if (this.root) {
+      this.root.unmount();
     }
+  }
 }
 
 // Register the custom element only once
-if (!customElements.get('self-assessment')) {
-    customElements.define('self-assessment', SelfAssessmentComponent);
+if (!customElements.get("self-assessment")) {
+  customElements.define("self-assessment", SelfAssessmentComponent);
 }

src/components/Assessment/Assessment.module.scss

@@ -1,7 +1,7 @@
 .pkimm-assessment-container {
   display: flex;
   flex-direction: column;
-  font-family: 'Roboto', sans-serif;
+  font-family: "Roboto", sans-serif;
   text-align: left;
 }
 
@@ -30,7 +30,6 @@
       background-color: var(--pkimm-primary-color-hover);
     }
   }
-
 }
 
 .pkimm-chart-container {