From 419d6a947ac09921d9f247e716c6527131963b58 Mon Sep 17 00:00:00 2001
From: Tobias Messner <tobias@zusor.io>
Date: Tue, 3 Sep 2024 12:54:58 +0200
Subject: [PATCH] chore: Migrate more code to @if

This migrates some more components to Angular 17's new control flow and adds stories for them.
It also deletes a component that was not being used.
---
 .../display-value/display-value.component.css |  4 --
 .../display-value.component.html              | 55 ++++++++++---------
 .../display-value/display-value.component.ts  |  5 +-
 .../display-value/display-value.stories.ts    | 30 ++++++++++
 .../input-dialog/input-dialog.component.html  |  6 +-
 .../input-dialog/input-dialog.component.ts    |  2 -
 .../input-dialog/input-dialog.stories.ts      | 34 ++++++++++++
 .../button-skeleton-loader.component.css      |  4 --
 .../button-skeleton-loader.component.html     |  4 +-
 .../button-skeleton-loader.component.ts       |  4 +-
 .../button-skeleton-loader.stories.ts         | 24 ++++++++
 .../form-field-skeleton-loader.component.html |  5 +-
 .../form-field-skeleton-loader.component.ts   |  3 +-
 .../form-field-skeleton-loader.stories.ts     | 24 ++++++++
 ...t-card-overview-skeleton-loader.stories.ts | 27 +++++++++
 .../mat-list-skeleton-loader.component.css    |  4 --
 .../mat-list-skeleton-loader.component.html   | 18 ------
 .../mat-list-skeleton-loader.component.ts     | 23 --------
 .../text-line-skeleton-loader.component.css   |  4 --
 .../text-line-skeleton-loader.component.ts    |  1 -
 .../text-line-skeleton-loader.stories.ts      | 30 ++++++++++
 21 files changed, 210 insertions(+), 101 deletions(-)
 delete mode 100644 frontend/src/app/helpers/display-value/display-value.component.css
 create mode 100644 frontend/src/app/helpers/display-value/display-value.stories.ts
 create mode 100644 frontend/src/app/helpers/input-dialog/input-dialog.stories.ts
 delete mode 100644 frontend/src/app/helpers/skeleton-loaders/button-skeleton-loader/button-skeleton-loader.component.css
 create mode 100644 frontend/src/app/helpers/skeleton-loaders/button-skeleton-loader/button-skeleton-loader.stories.ts
 create mode 100644 frontend/src/app/helpers/skeleton-loaders/form-field-skeleton-loader/form-field-skeleton-loader.stories.ts
 create mode 100644 frontend/src/app/helpers/skeleton-loaders/mat-card-overview-skeleton-loader/mat-card-overview-skeleton-loader.stories.ts
 delete mode 100644 frontend/src/app/helpers/skeleton-loaders/mat-list-skeleton-loader/mat-list-skeleton-loader.component.css
 delete mode 100644 frontend/src/app/helpers/skeleton-loaders/mat-list-skeleton-loader/mat-list-skeleton-loader.component.html
 delete mode 100644 frontend/src/app/helpers/skeleton-loaders/mat-list-skeleton-loader/mat-list-skeleton-loader.component.ts
 delete mode 100644 frontend/src/app/helpers/skeleton-loaders/text-line-skeleton-loader/text-line-skeleton-loader.component.css
 create mode 100644 frontend/src/app/helpers/skeleton-loaders/text-line-skeleton-loader/text-line-skeleton-loader.stories.ts

diff --git a/frontend/src/app/helpers/display-value/display-value.component.css b/frontend/src/app/helpers/display-value/display-value.component.css
deleted file mode 100644
index 8535c6938..000000000
--- a/frontend/src/app/helpers/display-value/display-value.component.css
+++ /dev/null
@@ -1,4 +0,0 @@
-/*
- * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
- * SPDX-License-Identifier: Apache-2.0
- */
diff --git a/frontend/src/app/helpers/display-value/display-value.component.html b/frontend/src/app/helpers/display-value/display-value.component.html
index 03ac187ff..6c0697c75 100644
--- a/frontend/src/app/helpers/display-value/display-value.component.html
+++ b/frontend/src/app/helpers/display-value/display-value.component.html
@@ -9,29 +9,34 @@
       value
     }}</span></span
   >
-  <button
-    *ngIf="blurValue && !valueRevealed"
-    (click)="valueRevealed = true"
-    matTooltip="Show value"
-    class="flex"
-  >
-    <mat-icon>blur_off</mat-icon>
-  </button>
-  <button
-    *ngIf="blurValue && valueRevealed"
-    (click)="valueRevealed = false"
-    matTooltip="Hide value"
-    class="flex"
-  >
-    <mat-icon>blur_on</mat-icon>
-  </button>
-  <button
-    *ngIf="value"
-    [cdkCopyToClipboard]="value!"
-    matTooltip="Copy value to clipboard"
-    (click)="showClipboardMessage()"
-    class="flex"
-  >
-    <mat-icon>content_copy</mat-icon>
-  </button>
+  @if (blurValue) {
+    @if (valueRevealed) {
+      <button
+        (click)="valueRevealed = false"
+        matTooltip="Hide value"
+        class="flex"
+      >
+        <mat-icon>blur_on</mat-icon>
+      </button>
+    } @else {
+      <button
+        (click)="valueRevealed = true"
+        matTooltip="Show value"
+        class="flex"
+      >
+        <mat-icon>blur_off</mat-icon>
+      </button>
+    }
+  }
+
+  @if (value) {
+    <button
+      [cdkCopyToClipboard]="value!"
+      matTooltip="Copy value to clipboard"
+      (click)="showClipboardMessage()"
+      class="flex"
+    >
+      <mat-icon>content_copy</mat-icon>
+    </button>
+  }
 </div>
diff --git a/frontend/src/app/helpers/display-value/display-value.component.ts b/frontend/src/app/helpers/display-value/display-value.component.ts
index 816bc7b69..3b1854517 100644
--- a/frontend/src/app/helpers/display-value/display-value.component.ts
+++ b/frontend/src/app/helpers/display-value/display-value.component.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { CdkCopyToClipboard } from '@angular/cdk/clipboard';
-import { NgClass, NgIf } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { Component, Input } from '@angular/core';
 import { MatIcon } from '@angular/material/icon';
 import { MatTooltip } from '@angular/material/tooltip';
@@ -12,9 +12,8 @@ import { ToastService } from 'src/app/helpers/toast/toast.service';
 @Component({
   selector: 'app-display-value',
   templateUrl: './display-value.component.html',
-  styleUrls: ['./display-value.component.css'],
   standalone: true,
-  imports: [NgClass, NgIf, MatTooltip, MatIcon, CdkCopyToClipboard],
+  imports: [NgClass, MatTooltip, MatIcon, CdkCopyToClipboard],
 })
 export class DisplayValueComponent {
   constructor(private toastService: ToastService) {}
diff --git a/frontend/src/app/helpers/display-value/display-value.stories.ts b/frontend/src/app/helpers/display-value/display-value.stories.ts
new file mode 100644
index 000000000..828ad34d9
--- /dev/null
+++ b/frontend/src/app/helpers/display-value/display-value.stories.ts
@@ -0,0 +1,30 @@
+/*
+ * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Meta, StoryObj } from '@storybook/angular';
+import { DisplayValueComponent } from './display-value.component';
+
+const meta: Meta<DisplayValueComponent> = {
+  title: 'Helpers / Display Value',
+  component: DisplayValueComponent,
+};
+
+export default meta;
+type Story = StoryObj<DisplayValueComponent>;
+
+export const Normal: Story = {
+  args: {
+    valueName: 'Normal Value',
+    value: 'value',
+    blurValue: false,
+  },
+};
+
+export const Blurred: Story = {
+  args: {
+    valueName: 'Blurred Value',
+    value: 'blurred value',
+    blurValue: true,
+  },
+};
diff --git a/frontend/src/app/helpers/input-dialog/input-dialog.component.html b/frontend/src/app/helpers/input-dialog/input-dialog.component.html
index e828df0d6..ac3f64313 100644
--- a/frontend/src/app/helpers/input-dialog/input-dialog.component.html
+++ b/frontend/src/app/helpers/input-dialog/input-dialog.component.html
@@ -11,9 +11,9 @@ <h2>{{ data.title }}</h2>
     <mat-form-field class="my-2 w-full" appearance="fill">
       <mat-label>Reason</mat-label>
       <textarea rows="6" matInput formControlName="result"></textarea>
-      <mat-error *ngIf="form.controls.result.errors?.required">
-        Please provide a reason.
-      </mat-error>
+      @if (form.controls.result.errors?.required) {
+        <mat-error> Please provide a reason. </mat-error>
+      }
     </mat-form-field>
     <div class="flex justify-between">
       <button mat-flat-button type="button" (click)="onCancel()">Cancel</button>
diff --git a/frontend/src/app/helpers/input-dialog/input-dialog.component.ts b/frontend/src/app/helpers/input-dialog/input-dialog.component.ts
index 712d06203..a455c2b52 100644
--- a/frontend/src/app/helpers/input-dialog/input-dialog.component.ts
+++ b/frontend/src/app/helpers/input-dialog/input-dialog.component.ts
@@ -2,7 +2,6 @@
  * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-import { NgIf } from '@angular/common';
 import { Component, Inject, OnInit } from '@angular/core';
 import {
   FormControl,
@@ -36,7 +35,6 @@ export interface InputDialogResult {
     MatFormField,
     MatLabel,
     MatInput,
-    NgIf,
     MatError,
     MatButton,
   ],
diff --git a/frontend/src/app/helpers/input-dialog/input-dialog.stories.ts b/frontend/src/app/helpers/input-dialog/input-dialog.stories.ts
new file mode 100644
index 000000000..2c4ed9d6a
--- /dev/null
+++ b/frontend/src/app/helpers/input-dialog/input-dialog.stories.ts
@@ -0,0 +1,34 @@
+/*
+ * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { dialogWrapper } from 'src/storybook/decorators';
+import { InputDialogComponent } from './input-dialog.component';
+
+const meta: Meta<InputDialogComponent> = {
+  title: 'Helpers / Input Dialog',
+  component: InputDialogComponent,
+};
+
+export default meta;
+type Story = StoryObj<InputDialogComponent>;
+
+export const General: Story = {
+  args: {},
+  decorators: [
+    moduleMetadata({
+      providers: [
+        {
+          provide: MAT_DIALOG_DATA,
+          useValue: {
+            title: 'This is the title of the Input Dialog',
+            text: 'This is the text of the Input Dialog',
+          },
+        },
+      ],
+    }),
+    dialogWrapper,
+  ],
+};
diff --git a/frontend/src/app/helpers/skeleton-loaders/button-skeleton-loader/button-skeleton-loader.component.css b/frontend/src/app/helpers/skeleton-loaders/button-skeleton-loader/button-skeleton-loader.component.css
deleted file mode 100644
index 8535c6938..000000000
--- a/frontend/src/app/helpers/skeleton-loaders/button-skeleton-loader/button-skeleton-loader.component.css
+++ /dev/null
@@ -1,4 +0,0 @@
-/*
- * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
- * SPDX-License-Identifier: Apache-2.0
- */
diff --git a/frontend/src/app/helpers/skeleton-loaders/button-skeleton-loader/button-skeleton-loader.component.html b/frontend/src/app/helpers/skeleton-loaders/button-skeleton-loader/button-skeleton-loader.component.html
index 7859bc67c..89fd16656 100644
--- a/frontend/src/app/helpers/skeleton-loaders/button-skeleton-loader/button-skeleton-loader.component.html
+++ b/frontend/src/app/helpers/skeleton-loaders/button-skeleton-loader/button-skeleton-loader.component.html
@@ -3,7 +3,7 @@
  ~ SPDX-License-Identifier: Apache-2.0
  -->
 
-<ng-container *ngIf="loading">
+@if (loading) {
   <ngx-skeleton-loader
     appearance="circle"
     [theme]="{
@@ -13,4 +13,4 @@
       border: '1px solid white',
     }"
   ></ngx-skeleton-loader>
-</ng-container>
+}
diff --git a/frontend/src/app/helpers/skeleton-loaders/button-skeleton-loader/button-skeleton-loader.component.ts b/frontend/src/app/helpers/skeleton-loaders/button-skeleton-loader/button-skeleton-loader.component.ts
index d63dcc229..e40990d9e 100644
--- a/frontend/src/app/helpers/skeleton-loaders/button-skeleton-loader/button-skeleton-loader.component.ts
+++ b/frontend/src/app/helpers/skeleton-loaders/button-skeleton-loader/button-skeleton-loader.component.ts
@@ -2,16 +2,14 @@
  * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-import { NgIf } from '@angular/common';
 import { Component, Input } from '@angular/core';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 @Component({
   selector: 'app-button-skeleton-loader',
   templateUrl: './button-skeleton-loader.component.html',
-  styleUrls: ['./button-skeleton-loader.component.css'],
   standalone: true,
-  imports: [NgIf, NgxSkeletonLoaderModule],
+  imports: [NgxSkeletonLoaderModule],
 })
 export class ButtonSkeletonLoaderComponent {
   @Input() loading = true;
diff --git a/frontend/src/app/helpers/skeleton-loaders/button-skeleton-loader/button-skeleton-loader.stories.ts b/frontend/src/app/helpers/skeleton-loaders/button-skeleton-loader/button-skeleton-loader.stories.ts
new file mode 100644
index 000000000..7cfecec29
--- /dev/null
+++ b/frontend/src/app/helpers/skeleton-loaders/button-skeleton-loader/button-skeleton-loader.stories.ts
@@ -0,0 +1,24 @@
+/*
+ * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Meta, StoryObj } from '@storybook/angular';
+import { ButtonSkeletonLoaderComponent } from './button-skeleton-loader.component';
+
+const meta: Meta<ButtonSkeletonLoaderComponent> = {
+  title: 'Helpers / Skeleton Loaders / Button',
+  component: ButtonSkeletonLoaderComponent,
+};
+
+export default meta;
+type Story = StoryObj<ButtonSkeletonLoaderComponent>;
+
+export const Loading: Story = {
+  args: {},
+};
+
+export const DoneLoading: Story = {
+  args: {
+    loading: false,
+  },
+};
diff --git a/frontend/src/app/helpers/skeleton-loaders/form-field-skeleton-loader/form-field-skeleton-loader.component.html b/frontend/src/app/helpers/skeleton-loaders/form-field-skeleton-loader/form-field-skeleton-loader.component.html
index 02bba49a8..69934a0a6 100644
--- a/frontend/src/app/helpers/skeleton-loaders/form-field-skeleton-loader/form-field-skeleton-loader.component.html
+++ b/frontend/src/app/helpers/skeleton-loaders/form-field-skeleton-loader/form-field-skeleton-loader.component.html
@@ -2,8 +2,7 @@
  ~ SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
  ~ SPDX-License-Identifier: Apache-2.0
  -->
-
-<ng-container *ngIf="loading">
+@if (loading) {
   <div class="margin">
     <ngx-skeleton-loader
       appearance="circle"
@@ -15,4 +14,4 @@
       }"
     ></ngx-skeleton-loader>
   </div>
-</ng-container>
+}
diff --git a/frontend/src/app/helpers/skeleton-loaders/form-field-skeleton-loader/form-field-skeleton-loader.component.ts b/frontend/src/app/helpers/skeleton-loaders/form-field-skeleton-loader/form-field-skeleton-loader.component.ts
index 6c3a7ac5b..fa88c203d 100644
--- a/frontend/src/app/helpers/skeleton-loaders/form-field-skeleton-loader/form-field-skeleton-loader.component.ts
+++ b/frontend/src/app/helpers/skeleton-loaders/form-field-skeleton-loader/form-field-skeleton-loader.component.ts
@@ -2,7 +2,6 @@
  * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-import { NgIf } from '@angular/common';
 import { Component, Input } from '@angular/core';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
@@ -11,7 +10,7 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
   templateUrl: './form-field-skeleton-loader.component.html',
   styleUrls: ['./form-field-skeleton-loader.component.css'],
   standalone: true,
-  imports: [NgIf, NgxSkeletonLoaderModule],
+  imports: [NgxSkeletonLoaderModule],
 })
 export class FormFieldSkeletonLoaderComponent {
   @Input() loading = true;
diff --git a/frontend/src/app/helpers/skeleton-loaders/form-field-skeleton-loader/form-field-skeleton-loader.stories.ts b/frontend/src/app/helpers/skeleton-loaders/form-field-skeleton-loader/form-field-skeleton-loader.stories.ts
new file mode 100644
index 000000000..d1165316f
--- /dev/null
+++ b/frontend/src/app/helpers/skeleton-loaders/form-field-skeleton-loader/form-field-skeleton-loader.stories.ts
@@ -0,0 +1,24 @@
+/*
+ * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Meta, StoryObj } from '@storybook/angular';
+import { FormFieldSkeletonLoaderComponent } from './form-field-skeleton-loader.component';
+
+const meta: Meta<FormFieldSkeletonLoaderComponent> = {
+  title: 'Helpers / Skeleton Loaders / Form Field',
+  component: FormFieldSkeletonLoaderComponent,
+};
+
+export default meta;
+type Story = StoryObj<FormFieldSkeletonLoaderComponent>;
+
+export const Loading: Story = {
+  args: {},
+};
+
+export const DoneLoading: Story = {
+  args: {
+    loading: false,
+  },
+};
diff --git a/frontend/src/app/helpers/skeleton-loaders/mat-card-overview-skeleton-loader/mat-card-overview-skeleton-loader.stories.ts b/frontend/src/app/helpers/skeleton-loaders/mat-card-overview-skeleton-loader/mat-card-overview-skeleton-loader.stories.ts
new file mode 100644
index 000000000..e1c940cde
--- /dev/null
+++ b/frontend/src/app/helpers/skeleton-loaders/mat-card-overview-skeleton-loader/mat-card-overview-skeleton-loader.stories.ts
@@ -0,0 +1,27 @@
+/*
+ * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { componentWrapperDecorator, Meta, StoryObj } from '@storybook/angular';
+import { MatCardOverviewSkeletonLoaderComponent } from './mat-card-overview-skeleton-loader.component';
+
+const meta: Meta<MatCardOverviewSkeletonLoaderComponent> = {
+  title: 'Helpers / Skeleton Loaders / Mat Card Overview',
+  component: MatCardOverviewSkeletonLoaderComponent,
+};
+
+export default meta;
+type Story = StoryObj<MatCardOverviewSkeletonLoaderComponent>;
+
+export const General: Story = {
+  args: {
+    rows: 3,
+    reservedCards: 0,
+  },
+  decorators: [
+    componentWrapperDecorator(
+      (story) =>
+        `<div class="flex flex-wrap gap-5 [&>*]:contents">${story}</div>`,
+    ),
+  ],
+};
diff --git a/frontend/src/app/helpers/skeleton-loaders/mat-list-skeleton-loader/mat-list-skeleton-loader.component.css b/frontend/src/app/helpers/skeleton-loaders/mat-list-skeleton-loader/mat-list-skeleton-loader.component.css
deleted file mode 100644
index 8535c6938..000000000
--- a/frontend/src/app/helpers/skeleton-loaders/mat-list-skeleton-loader/mat-list-skeleton-loader.component.css
+++ /dev/null
@@ -1,4 +0,0 @@
-/*
- * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
- * SPDX-License-Identifier: Apache-2.0
- */
diff --git a/frontend/src/app/helpers/skeleton-loaders/mat-list-skeleton-loader/mat-list-skeleton-loader.component.html b/frontend/src/app/helpers/skeleton-loaders/mat-list-skeleton-loader/mat-list-skeleton-loader.component.html
deleted file mode 100644
index 576a6402a..000000000
--- a/frontend/src/app/helpers/skeleton-loaders/mat-list-skeleton-loader/mat-list-skeleton-loader.component.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<!--
- ~ SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
- ~ SPDX-License-Identifier: Apache-2.0
- -->
-
-<ng-container>
-  <div class="margin" *ngFor="let _ of _listNumberArray">
-    <ngx-skeleton-loader
-      appearance="circle"
-      [theme]="{
-        'border-radius': '5px',
-        width: 'calc(100% - 10px)',
-        height: '51px',
-        border: '1px solid white',
-      }"
-    ></ngx-skeleton-loader>
-  </div>
-</ng-container>
diff --git a/frontend/src/app/helpers/skeleton-loaders/mat-list-skeleton-loader/mat-list-skeleton-loader.component.ts b/frontend/src/app/helpers/skeleton-loaders/mat-list-skeleton-loader/mat-list-skeleton-loader.component.ts
deleted file mode 100644
index 8fb686712..000000000
--- a/frontend/src/app/helpers/skeleton-loaders/mat-list-skeleton-loader/mat-list-skeleton-loader.component.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
- * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-import { NgFor } from '@angular/common';
-import { Component, Input } from '@angular/core';
-import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-
-@Component({
-  selector: 'app-mat-list-skeleton-loader',
-  templateUrl: './mat-list-skeleton-loader.component.html',
-  styleUrls: ['./mat-list-skeleton-loader.component.css'],
-  standalone: true,
-  imports: [NgFor, NgxSkeletonLoaderModule],
-})
-export class MatListSkeletonLoaderComponent {
-  _listNumberArray: number[] = [];
-
-  @Input()
-  set listNumber(value: number) {
-    this._listNumberArray = [...Array(value).keys()];
-  }
-}
diff --git a/frontend/src/app/helpers/skeleton-loaders/text-line-skeleton-loader/text-line-skeleton-loader.component.css b/frontend/src/app/helpers/skeleton-loaders/text-line-skeleton-loader/text-line-skeleton-loader.component.css
deleted file mode 100644
index 8535c6938..000000000
--- a/frontend/src/app/helpers/skeleton-loaders/text-line-skeleton-loader/text-line-skeleton-loader.component.css
+++ /dev/null
@@ -1,4 +0,0 @@
-/*
- * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
- * SPDX-License-Identifier: Apache-2.0
- */
diff --git a/frontend/src/app/helpers/skeleton-loaders/text-line-skeleton-loader/text-line-skeleton-loader.component.ts b/frontend/src/app/helpers/skeleton-loaders/text-line-skeleton-loader/text-line-skeleton-loader.component.ts
index 5afa9ba81..ce894e4b5 100644
--- a/frontend/src/app/helpers/skeleton-loaders/text-line-skeleton-loader/text-line-skeleton-loader.component.ts
+++ b/frontend/src/app/helpers/skeleton-loaders/text-line-skeleton-loader/text-line-skeleton-loader.component.ts
@@ -8,7 +8,6 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 @Component({
   selector: 'app-text-line-skeleton-loader',
   templateUrl: './text-line-skeleton-loader.component.html',
-  styleUrls: ['./text-line-skeleton-loader.component.css'],
   standalone: true,
   imports: [NgxSkeletonLoaderModule],
 })
diff --git a/frontend/src/app/helpers/skeleton-loaders/text-line-skeleton-loader/text-line-skeleton-loader.stories.ts b/frontend/src/app/helpers/skeleton-loaders/text-line-skeleton-loader/text-line-skeleton-loader.stories.ts
new file mode 100644
index 000000000..27477b521
--- /dev/null
+++ b/frontend/src/app/helpers/skeleton-loaders/text-line-skeleton-loader/text-line-skeleton-loader.stories.ts
@@ -0,0 +1,30 @@
+/*
+ * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Meta, StoryObj } from '@storybook/angular';
+import { TextLineSkeletonLoaderComponent } from './text-line-skeleton-loader.component';
+
+const meta: Meta<TextLineSkeletonLoaderComponent> = {
+  title: 'Helpers / Skeleton Loaders / Text Line',
+  component: TextLineSkeletonLoaderComponent,
+};
+
+export default meta;
+type Story = StoryObj<TextLineSkeletonLoaderComponent>;
+
+export const FullLine: Story = {
+  args: {
+    width: '100%',
+  },
+};
+
+export const DefaultLine: Story = {
+  args: {},
+};
+
+export const ShortLine: Story = {
+  args: {
+    width: '30%',
+  },
+};