From e3a3ba9c1aca977df8b2d6003d568a27933da28c Mon Sep 17 00:00:00 2001
From: Aleksandr Beliaev <cioe@posteo.si>
Date: Mon, 26 Feb 2024 18:50:33 +0200
Subject: [PATCH] docs(storybook): added a story for cvi-ng-responsive-table
 with translations to reproduce an issue where header labels would not get
 translated on mobile (#223)

Co-authored-by: Aleksandr Beliaev <aleksandr.beliaev@nortal.com>
---
 libs/storybook/src/assets/i18n/en.json        |  3 ++
 libs/storybook/src/assets/i18n/et.json        |  3 ++
 .../table-responsive.component.stories.ts     | 34 +++++++++++++++++++
 3 files changed, 40 insertions(+)

diff --git a/libs/storybook/src/assets/i18n/en.json b/libs/storybook/src/assets/i18n/en.json
index 755ead748..6e8ea0153 100644
--- a/libs/storybook/src/assets/i18n/en.json
+++ b/libs/storybook/src/assets/i18n/en.json
@@ -4,6 +4,9 @@
       "title": "Abiellumine (English translation)",
       "step1": "This is an English translation provided via @ngx-translate",
       "step2": "This is another English thing provided via @ngx-translate"
+    },
+    "tableResponsive": {
+      "headerLabels": ["Monday", "Tuesday"]
     }
   }
 }
diff --git a/libs/storybook/src/assets/i18n/et.json b/libs/storybook/src/assets/i18n/et.json
index 158829d48..09ab0e306 100644
--- a/libs/storybook/src/assets/i18n/et.json
+++ b/libs/storybook/src/assets/i18n/et.json
@@ -4,6 +4,9 @@
       "title": "Abiellumine (Eesti keeles)",
       "step1": "Esimene samm",
       "step2": "Teine samm"
+    },
+    "tableResponsive": {
+      "headerLabels": ["Esmaspäev", "Teisipäev"]
     }
   }
 }
diff --git a/libs/ui/src/lib/table-responsive/table-responsive.component.stories.ts b/libs/ui/src/lib/table-responsive/table-responsive.component.stories.ts
index d05c465d1..2dc8581ac 100644
--- a/libs/ui/src/lib/table-responsive/table-responsive.component.stories.ts
+++ b/libs/ui/src/lib/table-responsive/table-responsive.component.stories.ts
@@ -162,3 +162,37 @@ WithCustomHeaderAndBodyMobile.parameters = {
     defaultViewport: 'iphone12mini',
   },
 };
+
+
+const TemplateWithTranslations: Story<TableResponsiveComponent> = (
+  args: TableResponsiveComponent
+) => ({
+  props: {
+    ...args,
+    data: [
+      {
+        who: "Monkey",
+        what: "see-do"
+      },
+      {
+        "who": "Bear",
+        "what": "drink-drank-drunk"
+      }
+    ]
+  },
+  /* template */
+  template: `
+    <cvi-ng-table-responsive [data]="data" [headerLabels]="'common.tableResponsive.headerLabels' | translate"></cvi-ng-table-responsive>
+  `,
+});
+
+export const WithTranslations = TemplateWithTranslations.bind({});
+WithTranslations.parameters = {
+  layout: 'fullscreen',
+  backgrounds: {
+    default: 'light',
+  },
+  viewport: {
+    defaultViewport: 'iphone12mini',
+  },
+};