From 4520f3e41231fa6e3d978d894d404df46a71259b Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Tue, 5 Dec 2023 10:27:39 +0100
Subject: [PATCH] docs: [table] related #262 - update storybook

---
 packages/components/table/src/table.vue       |  2 +-
 .../components/table/stories/table.stories.ts | 26 ++++++++++---------
 packages/theme/src/table.scss                 |  2 +-
 3 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/packages/components/table/src/table.vue b/packages/components/table/src/table.vue
index ae747f7a..be76e713 100644
--- a/packages/components/table/src/table.vue
+++ b/packages/components/table/src/table.vue
@@ -145,7 +145,7 @@
                   header.align ?? 'left'
                 }`,
                 {
-                  'puik-table__body__row__item--expandable':
+                  'puik-table__body__row__item--expand-row':
                     expandable && !header?.preventExpand,
                 },
                 { 'puik-table__body__row__item--sticky': isSticky(colIndex) },
diff --git a/packages/components/table/stories/table.stories.ts b/packages/components/table/stories/table.stories.ts
index a21b1c64..1783411e 100644
--- a/packages/components/table/stories/table.stories.ts
+++ b/packages/components/table/stories/table.stories.ts
@@ -242,6 +242,7 @@ const Template: StoryFn = (args: Args) => ({
       {
         value: 'actions',
         size: 'sm',
+        preventExpand: true,
       },
     ]
     return { args, headers, items, selection }
@@ -657,6 +658,7 @@ export const Expandable: StoryObj = {
     {
       value: 'actions',
       size: 'sm',
+      preventExpand: true,
     },
   ]
 
@@ -689,10 +691,10 @@ export const Expandable: StoryObj = {
                     <div class="puik-icon" style="font-size: 24px;">keyboard_arrow_down</div>
                 </div>
             </td>
-            <td class="puik-table__body__row__item puik-table__body__row__item--left">lastname0</td>
-            <td class="puik-table__body__row__item puik-table__body__row__item--left">firstname0</td>
-            <td class="puik-table__body__row__item puik-table__body__row__item--center">40</td>
-            <td class="puik-table__body__row__item puik-table__body__row__item--right">lastname0.firstname0@email.com</td>
+            <td class="puik-table__body__row__item puik-table__body__row__item--left puik-table__body__row__item--expand-row">lastname0</td>
+            <td class="puik-table__body__row__item puik-table__body__row__item--left puik-table__body__row__item--expand-row">firstname0</td>
+            <td class="puik-table__body__row__item puik-table__body__row__item--center puik-table__body__row__item--expand-row">40</td>
+            <td class="puik-table__body__row__item puik-table__body__row__item--right puik-table__body__row__item--expand-row">lastname0.firstname0@email.com</td>
             <td class="puik-table__body__row__item puik-table__body__row__item--left">
                 <button class="puik-button puik-button--text puik-button--md" aria-label="Delete item">
                     <div class="puik-icon puik-button__right-icon" style="font-size: 1.25rem;">delete</div>
@@ -706,10 +708,10 @@ export const Expandable: StoryObj = {
                     <div class="puik-icon" style="font-size: 24px;">keyboard_arrow_down</div>
                 </div>
             </td>
-            <td class="puik-table__body__row__item puik-table__body__row__item--left">lastname1</td>
-            <td class="puik-table__body__row__item puik-table__body__row__item--left">firstname1</td>
-            <td class="puik-table__body__row__item puik-table__body__row__item--center">40</td>
-            <td class="puik-table__body__row__item puik-table__body__row__item--right">lastname1.firstname1@email.com</td>
+            <td class="puik-table__body__row__item puik-table__body__row__item--left puik-table__body__row__item--expand-row">lastname1</td>
+            <td class="puik-table__body__row__item puik-table__body__row__item--left puik-table__body__row__item--expand-row">firstname1</td>
+            <td class="puik-table__body__row__item puik-table__body__row__item--center puik-table__body__row__item--expand-row">40</td>
+            <td class="puik-table__body__row__item puik-table__body__row__item--right puik-table__body__row__item--expand-row">lastname1.firstname1@email.com</td>
             <td class="puik-table__body__row__item puik-table__body__row__item--left">
                 <button class="puik-button puik-button--text puik-button--md" aria-label="Delete item">
                     <div class="puik-icon puik-button__right-icon" style="font-size: 1.25rem;">delete</div>
@@ -722,10 +724,10 @@ export const Expandable: StoryObj = {
                     <div class="puik-icon" style="font-size: 24px;">keyboard_arrow_down</div>
                 </div>
             </td>
-            <td class="puik-table__body__row__item puik-table__body__row__item--left">lastname2</td>
-            <td class="puik-table__body__row__item puik-table__body__row__item--left">firstname2</td>
-            <td class="puik-table__body__row__item puik-table__body__row__item--center">40</td>
-            <td class="puik-table__body__row__item puik-table__body__row__item--right">lastname2.firstname2@email.com</td>
+            <td class="puik-table__body__row__item puik-table__body__row__item--left puik-table__body__row__item--expand-row">lastname2</td>
+            <td class="puik-table__body__row__item puik-table__body__row__item--left puik-table__body__row__item--expand-row">firstname2</td>
+            <td class="puik-table__body__row__item puik-table__body__row__item--center puik-table__body__row__item--expand-row">40</td>
+            <td class="puik-table__body__row__item puik-table__body__row__item--right puik-table__body__row__item--expand-row">lastname2.firstname2@email.com</td>
             <td class="puik-table__body__row__item puik-table__body__row__item--left">
                 <button class="puik-button puik-button--text puik-button--md" aria-label="Delete item">
                     <div class="puik-icon puik-button__right-icon" style="font-size: 1.25rem;">delete</div>
diff --git a/packages/theme/src/table.scss b/packages/theme/src/table.scss
index 1df9c50f..5c9999c4 100644
--- a/packages/theme/src/table.scss
+++ b/packages/theme/src/table.scss
@@ -175,7 +175,7 @@
     @apply pr-2;
   }
 
-  .puik-table__body__row__item--expandable {
+  .puik-table__body__row__item--expand-row {
     @apply cursor-pointer;
   }
 }