From 2a7e23a91d909d6d73e0491686284aa62193a3d6 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Fri, 28 Jun 2024 13:06:44 +0200
Subject: [PATCH] chore: Improve Tabs story (#1275)

Co-authored-by: Ruben Sibon <r.sibon@amsterdam.nl>
---
 .../src/components/Tabs/Tabs.stories.tsx      | 31 ++++++++++---------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/storybook/src/components/Tabs/Tabs.stories.tsx b/storybook/src/components/Tabs/Tabs.stories.tsx
index 445be865c3..32b46227bd 100644
--- a/storybook/src/components/Tabs/Tabs.stories.tsx
+++ b/storybook/src/components/Tabs/Tabs.stories.tsx
@@ -22,14 +22,16 @@ const SlowPanel = ({ children }: PropsWithChildren) => {
 }
 
 type TabContent = {
+  id: number
   label: string
   body: ReactNode
 }
 
 const tabsContent: Array<TabContent> = [
-  { label: 'Gegevens', body: exampleParagraph() },
-  { label: 'Aanslagen', body: exampleParagraph() },
+  { id: 0, label: 'Gegevens', body: exampleParagraph() },
+  { id: 1, label: 'Aanslagen', body: exampleParagraph() },
   {
+    id: 2,
     label: 'Documenten',
     body: (
       <>
@@ -38,26 +40,25 @@ const tabsContent: Array<TabContent> = [
       </>
     ),
   },
-  { label: 'Acties', body: exampleParagraph() },
+  { id: 3, label: 'Acties', body: exampleParagraph() },
 ]
 
 const defaultTabs = [
   <Tabs.List key="tabsList">
-    {tabsContent.map((content, index) => (
-      <Tabs.Button key={content.label} tab={index}>
-        {content.label}
+    {tabsContent.map(({ id, label }) => (
+      <Tabs.Button key={label} tab={id}>
+        {label}
       </Tabs.Button>
     ))}
   </Tabs.List>,
-  ...(() =>
-    tabsContent.map((content, index) => (
-      <Tabs.Panel tab={index} key={content.label}>
-        <div style={{ paddingTop: '2rem' }}>
-          <Heading level={3}>{content.label}</Heading>
-          <Paragraph>{content.body}</Paragraph>
-        </div>
-      </Tabs.Panel>
-    )))(),
+  tabsContent.map(({ id, body, label }) => (
+    <Tabs.Panel key={label} tab={id}>
+      <div style={{ paddingTop: '2rem' }}>
+        <Heading level={3}>{label}</Heading>
+        <Paragraph>{body}</Paragraph>
+      </div>
+    </Tabs.Panel>
+  )),
 ]
 
 const meta = {