docs: [table] related #262 - update storybook

PrestaShopCorp · Dec 5, 2023 · 4520f3e · 4520f3e
1 parent 9d90972
commit 4520f3e
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 14 deletions.
diff --git 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
@@ -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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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
@@ -175,7 +175,7 @@
     @apply pr-2;
   }
 
-  .puik-table__body__row__item--expandable {
+  .puik-table__body__row__item--expand-row {
     @apply cursor-pointer;
   }
 }