From e2b85be69843ee456808d4a2ef849d4c0d94dd6a Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Tue, 14 Nov 2023 09:51:01 +0100
Subject: [PATCH 01/15] fix: #241 - add min-content for alert container

---
 packages/theme/src/alert.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/theme/src/alert.scss b/packages/theme/src/alert.scss
index 76c11090..dbed9c54 100644
--- a/packages/theme/src/alert.scss
+++ b/packages/theme/src/alert.scss
@@ -1,7 +1,7 @@
 @use './common/typography.scss';
 
 .puik-alert {
-  @apply relative flex flex-row p-4 border text-primary-800 items-start;
+  @apply relative min-w-fit flex flex-row items-start p-4 border text-primary-800;
   &--success {
     @apply bg-green-50 border border-green;
     .puik-alert__icon {
@@ -30,7 +30,7 @@
     @apply border-0;
   }
   &__container {
-    @apply flex flex-col md:flex-row w-full;
+    @apply flex flex-col md:flex-row md:items-start w-full;
   }
   &__content {
     @apply flex flex-row flex-grow;
@@ -46,7 +46,7 @@
     @extend .puik-body-default;
   }
   &__button {
-    @apply text-sm px-4 py-3 mt-2 ml-9 md:m-0;
+    @apply text-sm px-4 py-3 mt-2 ml-9 md:m-0 h-auto;
   }
   &__icon {
     @apply mt-0.5 flex-shrink-0;

From e1e18de3a0d60864a20bc99adc061f6be9c1b14a Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Tue, 14 Nov 2023 16:46:15 +0100
Subject: [PATCH 02/15] fix: #241 - min height for button component

---
 packages/tailwind-preset/theme.js | 5 +++++
 packages/theme/src/alert.scss     | 2 +-
 packages/theme/src/button.scss    | 6 +++---
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/tailwind-preset/theme.js b/packages/tailwind-preset/theme.js
index 0d0b162a..bd71ccb2 100644
--- a/packages/tailwind-preset/theme.js
+++ b/packages/tailwind-preset/theme.js
@@ -93,6 +93,11 @@ module.exports = {
     screens: {
       xs: '320px',
     },
+    minHeight: {
+      sm: '1.75rem',
+      md: '2.25rem',
+      lg: '3rem',
+    },
     opacity: {
       overlay: '0.8',
     },
diff --git a/packages/theme/src/alert.scss b/packages/theme/src/alert.scss
index dbed9c54..2d865d51 100644
--- a/packages/theme/src/alert.scss
+++ b/packages/theme/src/alert.scss
@@ -46,7 +46,7 @@
     @extend .puik-body-default;
   }
   &__button {
-    @apply text-sm px-4 py-3 mt-2 ml-9 md:m-0 h-auto;
+    @apply mt-2 ml-9 md:m-0;
   }
   &__icon {
     @apply mt-0.5 flex-shrink-0;
diff --git a/packages/theme/src/button.scss b/packages/theme/src/button.scss
index f9922b2d..7adf1acd 100644
--- a/packages/theme/src/button.scss
+++ b/packages/theme/src/button.scss
@@ -6,16 +6,16 @@
 
   &--sm {
     @extend .puik-text-button-small;
-    @apply py-1 px-2 h-7;
+    @apply py-1 px-2 min-h-sm;
   }
 
   &--md {
-    @apply h-9;
+    @apply min-h-md;
   }
 
   &--lg {
     @extend .puik-text-button-large;
-    @apply py-3.5 px-4 gap-3 h-12;
+    @apply py-3.5 px-4 gap-3 min-h-lg;
   }
 
   &--fluid {

From 0cfc5becf64c9f7dce3ea7ac02d6f6838c84de13 Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Fri, 17 Nov 2023 22:57:33 +0100
Subject: [PATCH 03/15] feat: [table] - sticky columns (wip)

---
 packages/components/table/src/table.ts        | 15 +++++++++
 packages/components/table/src/table.vue       | 31 ++++++++++++++++---
 .../components/table/stories/table.stories.ts | 24 ++++++++++++++
 packages/theme/src/table.scss                 | 21 +++++++++++++
 4 files changed, 87 insertions(+), 4 deletions(-)

diff --git a/packages/components/table/src/table.ts b/packages/components/table/src/table.ts
index 61cce8f3..68a463a5 100644
--- a/packages/components/table/src/table.ts
+++ b/packages/components/table/src/table.ts
@@ -35,6 +35,21 @@ export const tableProps = buildProps({
     required: false,
     default: false,
   },
+  stickyFirstCol: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  stickyLastCol: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  stickyHeader: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 } as const)
 
 export type TableProps = ExtractPropTypes<typeof tableProps>
diff --git a/packages/components/table/src/table.vue b/packages/components/table/src/table.vue
index 7e7af7cf..bf864648 100644
--- a/packages/components/table/src/table.vue
+++ b/packages/components/table/src/table.vue
@@ -5,7 +5,10 @@
         <tr class="puik-table__head__row">
           <th
             v-if="selectable"
-            class="puik-table__head__row__item puik-table__head__row__item--selection"
+            :class="[
+              'puik-table__head__row__item puik-table__head__row__item--selection',
+              { 'puik-table__head__row__item--sticky': stickyFirstCol },
+            ]"
           >
             <puik-checkbox
               :model-value="selectAll"
@@ -20,7 +23,6 @@
             v-for="(header, index) in headers"
             :key="`headers${header.value}`"
             :class="[
-              'puik-table__head__row__item',
               `puik-table__head__row__item puik-table__head__row__item--${
                 header.align ?? 'left'
               }`,
@@ -28,6 +30,7 @@
                 [`puik-table__head__row__item--${header.size}`]:
                   header?.size && !header?.width,
               },
+              { 'puik-table__head__row__item--sticky': isSticky(index) },
             ]"
             :style="{ minWidth: header.width, width: header.width }"
           >
@@ -49,7 +52,10 @@
         >
           <td
             v-if="selectable"
-            class="puik-table__body__row__item puik-table__body__row__item--selection"
+            :class="[
+              'puik-table__body__row__item puik-table__body__row__item--selection',
+              { 'puik-table__body__row__item--sticky': stickyFirstCol },
+            ]"
           >
             <puik-checkbox
               :model-value="getSelected(rowIndex)"
@@ -63,7 +69,10 @@
             v-for="(header, colIndex) in headers"
             :key="`col-${colIndex}`"
             class="puik-table__body__row__item"
-            :class="`puik-table__body__row__item--${header.align ?? 'left'}`"
+            :class="[
+              `puik-table__body__row__item--${header.align ?? 'left'}`,
+              { 'puik-table__body__row__item--sticky': isSticky(colIndex) },
+            ]"
           >
             <slot :name="`item-${header.value}`" :item="item" :index="rowIndex">
               {{ item[header.value] }}
@@ -93,6 +102,20 @@ const emit = defineEmits<{
 const { t } = useLocale()
 const checked = ref<number[]>(props.selection)
 
+const isSticky = (
+  index: number,
+  selectable: boolean = props.selectable
+): boolean => {
+  if (selectable) {
+    return props.stickyLastCol && index === props.headers.length - 1
+  } else {
+    return (
+      (props.stickyFirstCol && index === 0) ||
+      (props.stickyLastCol && index === props.headers.length - 1)
+    )
+  }
+}
+
 const selectAll = computed(() => {
   if (indeterminate.value) return false
   return checked.value.length === props.items.length
diff --git a/packages/components/table/stories/table.stories.ts b/packages/components/table/stories/table.stories.ts
index 3be1d3f0..b51c445d 100644
--- a/packages/components/table/stories/table.stories.ts
+++ b/packages/components/table/stories/table.stories.ts
@@ -88,6 +88,30 @@ export default {
         },
       },
     },
+    stickyFirstCol: {
+      control: 'boolean',
+      description: 'Makes the first column sticky',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    stickyLastCol: {
+      control: 'boolean',
+      description: 'Makes the last column sticky',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    stickyHeader: {
+      control: 'boolean',
+      description: 'Makes the header sticky',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
     '`header-${header.value}`': {
       control: 'none',
       description: 'Slot to replace header',
diff --git a/packages/theme/src/table.scss b/packages/theme/src/table.scss
index 43aa1888..d9833f3e 100644
--- a/packages/theme/src/table.scss
+++ b/packages/theme/src/table.scss
@@ -72,4 +72,25 @@
       }
     }
   }
+  .puik-table__head__row__item--sticky,
+  .puik-table__body__row__item--sticky {
+    @apply sticky bg-white;
+    &::before {
+      @apply content-[''] block absolute top-0 bottom-0 w-1.5 bg-white;
+    }
+  }
+  tr .puik-table__head__row__item--sticky:first-child,
+  tr .puik-table__body__row__item--sticky:first-child {
+    @apply -left-px;
+    &::before {
+      @apply right-0 shadow-[4px_0_7px_-1px_rgba(29,29,27,0.1)];
+    }
+  }
+  tr .puik-table__head__row__item--sticky:last-child,
+  tr .puik-table__body__row__item--sticky:last-child {
+    @apply -right-px;
+    &::before {
+      @apply left-0 shadow-[-4px_0_7px_-1px_rgba(29,29,27,0.1)];
+    }
+  }
 }

From 8da09e6de0e4345c085f5a6de45b1576d3b16ef2 Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Mon, 20 Nov 2023 10:23:46 +0100
Subject: [PATCH 04/15] feat: [table] sticky col - add style on hover

---
 packages/theme/src/table.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/theme/src/table.scss b/packages/theme/src/table.scss
index d9833f3e..79743790 100644
--- a/packages/theme/src/table.scss
+++ b/packages/theme/src/table.scss
@@ -61,7 +61,10 @@
     > tr {
       @apply border-t-[1px];
       &:hover {
-        @apply bg-primary-200;
+        td,
+        td::before {
+          @apply bg-primary-200;
+        }
       }
       &__item,
       > td {
@@ -72,6 +75,7 @@
       }
     }
   }
+
   .puik-table__head__row__item--sticky,
   .puik-table__body__row__item--sticky {
     @apply sticky bg-white;

From 52403d6fcf0edc243282f6e3911b6144f419300b Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Mon, 20 Nov 2023 14:42:08 +0100
Subject: [PATCH 05/15] test: [table] - test sticky behavior

---
 packages/components/table/test/table.spec.ts | 74 +++++++++++++++++---
 1 file changed, 64 insertions(+), 10 deletions(-)

diff --git a/packages/components/table/test/table.spec.ts b/packages/components/table/test/table.spec.ts
index c2b41532..bb22d4b4 100644
--- a/packages/components/table/test/table.spec.ts
+++ b/packages/components/table/test/table.spec.ts
@@ -10,8 +10,8 @@ const defaultItems = Array(5)
   .fill(null)
   .map(() => {
     return {
-      firstname: faker.name.firstName(),
-      lastname: faker.name.lastName(),
+      firstname: faker.person.firstName(),
+      lastname: faker.person.lastName(),
     }
   })
 
@@ -23,20 +23,40 @@ describe('Table tests', () => {
   const getTable = () => wrapper.find('.puik-table')
   const getHeaders = () => wrapper.findAll(`.${headerColClass}`)
   const getRows = () => wrapper.findAll('.puik-table__body__row')
-  const getCols = (rowIndex) => getRows()[rowIndex].findAll(`.${colClass}`)
-  const getRowCheckbox = (rowIndex) =>
+  const getCols = (rowIndex: number): HTMLElement =>
+    getRows()[rowIndex].findAll(`.${colClass}`)
+  const getAllItemsOfCol = (colIndex: number) => {
+    const allItems: Array<HTMLElement> = []
+    getRows().map((row, rowIndex) => {
+      const Item: HTMLElement = getCols(rowIndex)[colIndex]
+      allItems.push(Item)
+    })
+    return allItems
+  }
+  const getRowCheckbox = (rowIndex: number) =>
     getRows()[rowIndex].find(`.${colClass}--selection__checkbox`)
   const getAllRowCheckbox = () =>
     wrapper.findAll(`.${colClass}--selection__checkbox`)
   const getHeaderCheckbox = () =>
     wrapper.find(`.${headerColClass}--selection__checkbox`)
 
-  const isCheckboxChecked = (checkbox) =>
-    checkbox.find('.puik-checkbox__input:checked').exists()
-  const isCheckboxInderminate = (checkbox) =>
-    checkbox.find('.puik-checkbox__input:indeterminate').exists()
+  const isCheckboxChecked = (checkbox: {
+    find: (arg0: string) => {
+      (): any
+      new (): any
+      exists: { (): any; new (): any }
+    }
+  }) => checkbox.find('.puik-checkbox__input:checked').exists()
+  const isCheckboxInderminate = (checkbox: {
+    find: (arg0: string) => {
+      (): any
+      new (): any
+      exists: { (): any; new (): any }
+    }
+  }) => checkbox.find('.puik-checkbox__input:indeterminate').exists()
 
-  const getCheckboxLabel = (checkbox) => checkbox.find('.puik-checkbox__label')
+  const getCheckboxLabel = (checkbox: { find: (arg0: string) => any }) =>
+    checkbox.find('.puik-checkbox__label')
 
   const factory = (
     propsData: Record<string, any> = {},
@@ -83,7 +103,8 @@ describe('Table tests', () => {
     expect(displayedItems[1].text()).toBe(defaultItems[0].lastname)
   })
   it('should display item using slot', () => {
-    const getIinitials = (item) => item.firstname[0] + item.lastname[0]
+    const getIinitials = (item: { firstname: any; lastname: any }) =>
+      item.firstname[0] + item.lastname[0]
     const headers: PuikTableHeader[] = [{ value: 'initials' }]
     factory(
       { headers },
@@ -248,4 +269,37 @@ describe('Table tests', () => {
     const table = getTable()
     expect(table.classes()).toContain('puik-table--full-width')
   })
+
+  it('should have selectable column sticky', () => {
+    const headers: PuikTableHeader[] = [
+      { value: 'firstname' },
+      { value: 'lastname' },
+    ]
+    factory({ headers, selectable: true, stickyFirstCol: true })
+    const header = getHeaders()[0]
+    const allFirstItems = getAllItemsOfCol(0)
+    expect(header.classes()).toContain('puik-table__head__row__item--selection')
+    expect(header.classes()).toContain('puik-table__head__row__item--sticky')
+    allFirstItems.map((firstItemRow) => {
+      expect(firstItemRow.classes()).toContain(
+        'puik-table__body__row__item--sticky'
+      )
+    })
+  })
+
+  it('should have last column sticky', () => {
+    const headers: PuikTableHeader[] = [
+      { value: 'firstname' },
+      { value: 'lastname' },
+    ]
+    factory({ headers, stickyLastCol: true })
+    const header = getHeaders()[1]
+    const allLastItems = getAllItemsOfCol(1)
+    expect(header.classes()).toContain('puik-table__head__row__item--sticky')
+    allLastItems.map((lastItemRow) => {
+      expect(lastItemRow.classes()).toContain(
+        'puik-table__body__row__item--sticky'
+      )
+    })
+  })
 })

From 5bcc50f5e38a6d2f954d5afd1b8b7a9b18f019dc Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Mon, 20 Nov 2023 15:10:19 +0100
Subject: [PATCH 06/15] docs: [table] update storybook (sticky cols)

---
 packages/components/table/src/table.ts        |   5 -
 .../components/table/stories/table.stories.ts | 154 +++++++++++++++++-
 2 files changed, 146 insertions(+), 13 deletions(-)

diff --git a/packages/components/table/src/table.ts b/packages/components/table/src/table.ts
index 68a463a5..80c93839 100644
--- a/packages/components/table/src/table.ts
+++ b/packages/components/table/src/table.ts
@@ -45,11 +45,6 @@ export const tableProps = buildProps({
     required: false,
     default: false,
   },
-  stickyHeader: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
 } as const)
 
 export type TableProps = ExtractPropTypes<typeof tableProps>
diff --git a/packages/components/table/stories/table.stories.ts b/packages/components/table/stories/table.stories.ts
index b51c445d..3a82638c 100644
--- a/packages/components/table/stories/table.stories.ts
+++ b/packages/components/table/stories/table.stories.ts
@@ -104,14 +104,6 @@ export default {
         defaultValue: { summary: 'false' },
       },
     },
-    stickyHeader: {
-      control: 'boolean',
-      description: 'Makes the header sticky',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-      },
-    },
     '`header-${header.value}`': {
       control: 'none',
       description: 'Slot to replace header',
@@ -528,6 +520,7 @@ export const Selectable: StoryObj = {
     },
   },
 }
+
 export const FullWidth: StoryObj = {
   render: Template,
   args: {
@@ -599,6 +592,151 @@ export const FullWidth: StoryObj = {
   },
 }
 
+export const stickyColumns: StoryObj = {
+  render: Template,
+  args: {
+    selectable: true,
+    stickyFirstCol: true,
+    stickyLastCol: true,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+  <!--VueJS Snippet-->
+  const headers: PuikTableHeader[] = [
+    {
+      text: 'Nom',
+      value: 'lastname',
+      size: 'md',
+    },
+    {
+      text: 'Prénom',
+      value: 'firstname',
+      size: 'md',
+    },
+    {
+      text: 'Age',
+      value: 'age',
+      size: 'sm',
+      align: 'center',
+    },
+    {
+      text: 'Email',
+      value: 'email',
+      align: 'right',
+    },
+    {
+      value: 'actions',
+      size: 'sm',
+    },
+  ]
+
+  <puik-table
+    v-model:selection="selection"
+    :headers="headers"
+    :items="items"
+    :stickyFirstCol="true"
+    :stickyLastCol="true"
+  >
+    <template #item-actions="{ item }">
+      <puik-button
+        variant="text"
+        right-icon="delete"
+        aria-label="Delete item"
+      ></puik-button>
+    </template>
+  </puik-table>
+
+  <!--HTML/CSS Snippet-->
+  <table class="puik-table">
+  <thead class="puik-table__head">
+     <tr class="puik-table__head__row">
+        <th class="puik-table__head__row__item puik-table__head__row__item--selection puik-table__head__row__item--sticky">
+          <div class="puik-checkbox puik-table__head__row__item--selection__checkbox">
+            <input id="puik-checkbox-9803" class="puik-checkbox__input" type="checkbox">
+            <label for="puik-checkbox-9803" class="puik-checkbox__label">
+              Select all items
+            </label>
+          </div>
+        </th>
+        <th class="puik-table__head__row__item puik-table__head__row__item--left puik-table__head__row__item--md">Nom</th>
+        <th class="puik-table__head__row__item puik-table__head__row__item--left puik-table__head__row__item--md">Prénom</th>
+        <th class="puik-table__head__row__item puik-table__head__row__item--center puik-table__head__row__item--sm">Age</th>
+        <th class="puik-table__head__row__item puik-table__head__row__item--right">Email</th>
+        <th class="puik-table__head__row__item puik-table__head__row__item--left puik-table__head__row__item--sm puik-table__head__row__item--sticky"></th>
+     </tr>
+  </thead>
+  <tbody class="puik-table__body">
+     <tr class="puik-table__body__row">
+        <td class="puik-table__body__row__item puik-table__body__row__item--selection puik-table__body__row__item--sticky">
+          <div class="puik-checkbox puik-table__body__row__item--selection__checkbox">
+            <input id="puik-checkbox-3764" class="puik-checkbox__input" type="checkbox">
+            <label for="puik-checkbox-3764" class="puik-checkbox__label">
+              Select item
+            </label>
+          </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--sticky">
+           <button class="puik-button puik-button--text puik-button--md" aria-label="Delete item">
+              <!--v-if-->
+              <div class="puik-icon puik-button__right-icon" style="font-size: 1.25rem;">delete</div>
+           </button>
+        </td>
+     </tr>
+     <tr class="puik-table__body__row">
+        <td class="puik-table__body__row__item puik-table__body__row__item--selection puik-table__body__row__item--sticky">
+          <div class="puik-checkbox puik-table__body__row__item--selection__checkbox">
+            <input id="puik-checkbox-4045" class="puik-checkbox__input" type="checkbox">
+            <label for="puik-checkbox-4045" class="puik-checkbox__label">
+              Select item
+            </label>
+          </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--sticky">
+           <button class="puik-button puik-button--text puik-button--md" aria-label="Delete item">
+              <!--v-if-->
+              <div class="puik-icon puik-button__right-icon" style="font-size: 1.25rem;">delete</div>
+           </button>
+        </td>
+     </tr>
+     <tr class="puik-table__body__row">
+        <td class="puik-table__body__row__item puik-table__body__row__item--selection puik-table__body__row__item--sticky">
+          <div class="puik-checkbox puik-table__body__row__item--selection__checkbox">
+            <input id="puik-checkbox-468" class="puik-checkbox__input" type="checkbox">
+            <label for="puik-checkbox-468" class="puik-checkbox__label">
+              Select item
+            </label>
+          </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--sticky">
+           <button class="puik-button puik-button--text puik-button--md" aria-label="Delete item">
+              <!--v-if-->
+              <div class="puik-icon puik-button__right-icon" style="font-size: 1.25rem;">delete</div>
+           </button>
+        </td>
+     </tr>
+  </tbody>
+</table>
+        `,
+        language: 'html',
+      },
+    },
+  },
+}
+
 const ColSizesTemplate: StoryFn = (args: Args) => ({
   components: {
     PuikTable,

From 56200925192827033e7b86bedbefcf1e533a89fb Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Mon, 20 Nov 2023 15:50:14 +0100
Subject: [PATCH 07/15] fix: #250 [table] sticky cols

---
 .../components/table/stories/table.stories.ts | 160 +++++++++---------
 1 file changed, 80 insertions(+), 80 deletions(-)

diff --git a/packages/components/table/stories/table.stories.ts b/packages/components/table/stories/table.stories.ts
index 3a82638c..ff3361f5 100644
--- a/packages/components/table/stories/table.stories.ts
+++ b/packages/components/table/stories/table.stories.ts
@@ -650,86 +650,86 @@ export const stickyColumns: StoryObj = {
 
   <!--HTML/CSS Snippet-->
   <table class="puik-table">
-  <thead class="puik-table__head">
-     <tr class="puik-table__head__row">
-        <th class="puik-table__head__row__item puik-table__head__row__item--selection puik-table__head__row__item--sticky">
-          <div class="puik-checkbox puik-table__head__row__item--selection__checkbox">
-            <input id="puik-checkbox-9803" class="puik-checkbox__input" type="checkbox">
-            <label for="puik-checkbox-9803" class="puik-checkbox__label">
-              Select all items
-            </label>
-          </div>
-        </th>
-        <th class="puik-table__head__row__item puik-table__head__row__item--left puik-table__head__row__item--md">Nom</th>
-        <th class="puik-table__head__row__item puik-table__head__row__item--left puik-table__head__row__item--md">Prénom</th>
-        <th class="puik-table__head__row__item puik-table__head__row__item--center puik-table__head__row__item--sm">Age</th>
-        <th class="puik-table__head__row__item puik-table__head__row__item--right">Email</th>
-        <th class="puik-table__head__row__item puik-table__head__row__item--left puik-table__head__row__item--sm puik-table__head__row__item--sticky"></th>
-     </tr>
-  </thead>
-  <tbody class="puik-table__body">
-     <tr class="puik-table__body__row">
-        <td class="puik-table__body__row__item puik-table__body__row__item--selection puik-table__body__row__item--sticky">
-          <div class="puik-checkbox puik-table__body__row__item--selection__checkbox">
-            <input id="puik-checkbox-3764" class="puik-checkbox__input" type="checkbox">
-            <label for="puik-checkbox-3764" class="puik-checkbox__label">
-              Select item
-            </label>
-          </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--sticky">
-           <button class="puik-button puik-button--text puik-button--md" aria-label="Delete item">
-              <!--v-if-->
-              <div class="puik-icon puik-button__right-icon" style="font-size: 1.25rem;">delete</div>
-           </button>
-        </td>
-     </tr>
-     <tr class="puik-table__body__row">
-        <td class="puik-table__body__row__item puik-table__body__row__item--selection puik-table__body__row__item--sticky">
-          <div class="puik-checkbox puik-table__body__row__item--selection__checkbox">
-            <input id="puik-checkbox-4045" class="puik-checkbox__input" type="checkbox">
-            <label for="puik-checkbox-4045" class="puik-checkbox__label">
-              Select item
-            </label>
-          </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--sticky">
-           <button class="puik-button puik-button--text puik-button--md" aria-label="Delete item">
-              <!--v-if-->
-              <div class="puik-icon puik-button__right-icon" style="font-size: 1.25rem;">delete</div>
-           </button>
-        </td>
-     </tr>
-     <tr class="puik-table__body__row">
-        <td class="puik-table__body__row__item puik-table__body__row__item--selection puik-table__body__row__item--sticky">
-          <div class="puik-checkbox puik-table__body__row__item--selection__checkbox">
-            <input id="puik-checkbox-468" class="puik-checkbox__input" type="checkbox">
-            <label for="puik-checkbox-468" class="puik-checkbox__label">
-              Select item
-            </label>
-          </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--sticky">
-           <button class="puik-button puik-button--text puik-button--md" aria-label="Delete item">
-              <!--v-if-->
-              <div class="puik-icon puik-button__right-icon" style="font-size: 1.25rem;">delete</div>
-           </button>
-        </td>
-     </tr>
-  </tbody>
-</table>
+    <thead class="puik-table__head">
+      <tr class="puik-table__head__row">
+          <th class="puik-table__head__row__item puik-table__head__row__item--selection puik-table__head__row__item--sticky">
+            <div class="puik-checkbox puik-table__head__row__item--selection__checkbox">
+              <input id="puik-checkbox-9803" class="puik-checkbox__input" type="checkbox">
+              <label for="puik-checkbox-9803" class="puik-checkbox__label">
+                Select all items
+              </label>
+            </div>
+          </th>
+          <th class="puik-table__head__row__item puik-table__head__row__item--left puik-table__head__row__item--md">Nom</th>
+          <th class="puik-table__head__row__item puik-table__head__row__item--left puik-table__head__row__item--md">Prénom</th>
+          <th class="puik-table__head__row__item puik-table__head__row__item--center puik-table__head__row__item--sm">Age</th>
+          <th class="puik-table__head__row__item puik-table__head__row__item--right">Email</th>
+          <th class="puik-table__head__row__item puik-table__head__row__item--left puik-table__head__row__item--sm puik-table__head__row__item--sticky"></th>
+      </tr>
+    </thead>
+    <tbody class="puik-table__body">
+      <tr class="puik-table__body__row">
+          <td class="puik-table__body__row__item puik-table__body__row__item--selection puik-table__body__row__item--sticky">
+            <div class="puik-checkbox puik-table__body__row__item--selection__checkbox">
+              <input id="puik-checkbox-3764" class="puik-checkbox__input" type="checkbox">
+              <label for="puik-checkbox-3764" class="puik-checkbox__label">
+                Select item
+              </label>
+            </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--sticky">
+            <button class="puik-button puik-button--text puik-button--md" aria-label="Delete item">
+                <!--v-if-->
+                <div class="puik-icon puik-button__right-icon" style="font-size: 1.25rem;">delete</div>
+            </button>
+          </td>
+      </tr>
+      <tr class="puik-table__body__row">
+          <td class="puik-table__body__row__item puik-table__body__row__item--selection puik-table__body__row__item--sticky">
+            <div class="puik-checkbox puik-table__body__row__item--selection__checkbox">
+              <input id="puik-checkbox-4045" class="puik-checkbox__input" type="checkbox">
+              <label for="puik-checkbox-4045" class="puik-checkbox__label">
+                Select item
+              </label>
+            </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--sticky">
+            <button class="puik-button puik-button--text puik-button--md" aria-label="Delete item">
+                <!--v-if-->
+                <div class="puik-icon puik-button__right-icon" style="font-size: 1.25rem;">delete</div>
+            </button>
+          </td>
+      </tr>
+      <tr class="puik-table__body__row">
+          <td class="puik-table__body__row__item puik-table__body__row__item--selection puik-table__body__row__item--sticky">
+            <div class="puik-checkbox puik-table__body__row__item--selection__checkbox">
+              <input id="puik-checkbox-468" class="puik-checkbox__input" type="checkbox">
+              <label for="puik-checkbox-468" class="puik-checkbox__label">
+                Select item
+              </label>
+            </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--sticky">
+            <button class="puik-button puik-button--text puik-button--md" aria-label="Delete item">
+                <!--v-if-->
+                <div class="puik-icon puik-button__right-icon" style="font-size: 1.25rem;">delete</div>
+            </button>
+          </td>
+      </tr>
+    </tbody>
+  </table>
         `,
         language: 'html',
       },

From 0affd2c9166aad9b3c937a3e9fb02477e6a6c7ee Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Mon, 20 Nov 2023 18:32:58 +0100
Subject: [PATCH 08/15] feat: [table] expanded cell (wip)

---
 packages/components/table/src/table.vue | 85 +++++++++++++++----------
 packages/theme/src/table.scss           |  4 +-
 2 files changed, 54 insertions(+), 35 deletions(-)

diff --git a/packages/components/table/src/table.vue b/packages/components/table/src/table.vue
index bf864648..b1cdd1de 100644
--- a/packages/components/table/src/table.vue
+++ b/packages/components/table/src/table.vue
@@ -45,40 +45,51 @@
         </tr>
       </thead>
       <tbody class="puik-table__body">
-        <tr
-          v-for="(item, rowIndex) in items"
-          :key="`row-${rowIndex}`"
-          class="puik-table__body__row"
-        >
-          <td
-            v-if="selectable"
-            :class="[
-              'puik-table__body__row__item puik-table__body__row__item--selection',
-              { 'puik-table__body__row__item--sticky': stickyFirstCol },
-            ]"
-          >
-            <puik-checkbox
-              :model-value="getSelected(rowIndex)"
-              class="puik-table__body__row__item--selection__checkbox"
-              @click="handleClick(rowIndex)"
+        <template v-for="(item, rowIndex) in items" :key="`row-${rowIndex}`">
+          <tr class="puik-table__body__row">
+            <td
+              v-if="selectable"
+              :class="[
+                'puik-table__body__row__item puik-table__body__row__item--selection',
+                { 'puik-table__body__row__item--sticky': stickyFirstCol },
+              ]"
             >
-              {{ getSelectLabel(rowIndex) }}
-            </puik-checkbox>
-          </td>
-          <td
-            v-for="(header, colIndex) in headers"
-            :key="`col-${colIndex}`"
-            class="puik-table__body__row__item"
-            :class="[
-              `puik-table__body__row__item--${header.align ?? 'left'}`,
-              { 'puik-table__body__row__item--sticky': isSticky(colIndex) },
-            ]"
-          >
-            <slot :name="`item-${header.value}`" :item="item" :index="rowIndex">
-              {{ item[header.value] }}
-            </slot>
-          </td>
-        </tr>
+              <puik-checkbox
+                :model-value="getSelected(rowIndex)"
+                class="puik-table__body__row__item--selection__checkbox"
+                @click="handleClick(rowIndex)"
+              >
+                {{ getSelectLabel(rowIndex) }}
+              </puik-checkbox>
+            </td>
+
+            <td
+              v-for="(header, colIndex) in headers"
+              :key="`col-${colIndex}`"
+              :class="[
+                `puik-table__body__row__item puik-table__body__row__item--${
+                  header.align ?? 'left'
+                }`,
+                { 'puik-table__body__row__item--sticky': isSticky(colIndex) },
+              ]"
+            >
+              <slot
+                :name="`item-${header.value}`"
+                :item="item"
+                :index="rowIndex"
+              >
+                {{ item[header.value] }}
+              </slot>
+            </td>
+          </tr>
+          <slot :name="`puik-table__body__row__item`" :item="item">
+            <tr>
+              <td :colspan="headers.length" class="expanded-cell">
+                {{ item }}
+              </td>
+            </tr>
+          </slot>
+        </template>
       </tbody>
     </table>
   </div>
@@ -101,6 +112,7 @@ const emit = defineEmits<{
 }>()
 const { t } = useLocale()
 const checked = ref<number[]>(props.selection)
+const expandedCell = ref(null)
 
 const isSticky = (
   index: number,
@@ -116,6 +128,13 @@ const isSticky = (
   }
 }
 
+// const expandCell = (rowIndex: number, cellIndex: number) => {
+//   expandedCell.value = {
+//     content: rows.value[rowIndex][cellIndex],
+//     rowIndex,
+//   }
+// }
+
 const selectAll = computed(() => {
   if (indeterminate.value) return false
   return checked.value.length === props.items.length
diff --git a/packages/theme/src/table.scss b/packages/theme/src/table.scss
index 79743790..39fe27b0 100644
--- a/packages/theme/src/table.scss
+++ b/packages/theme/src/table.scss
@@ -61,8 +61,8 @@
     > tr {
       @apply border-t-[1px];
       &:hover {
-        td,
-        td::before {
+        .puik-table__body__row__item,
+        .puik-table__body__row__item::before {
           @apply bg-primary-200;
         }
       }

From 8e063b368c59c4a85e7bf281bb4cee3208f3fb3b Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Tue, 21 Nov 2023 18:10:35 +0100
Subject: [PATCH 09/15] feat: [table] expandable rows (wip)

---
 packages/components/table/src/table.ts        |  5 ++
 packages/components/table/src/table.vue       | 81 +++++++++++++------
 .../components/table/stories/table.stories.ts |  8 ++
 packages/theme/src/table.scss                 | 18 ++++-
 4 files changed, 86 insertions(+), 26 deletions(-)

diff --git a/packages/components/table/src/table.ts b/packages/components/table/src/table.ts
index 80c93839..12274792 100644
--- a/packages/components/table/src/table.ts
+++ b/packages/components/table/src/table.ts
@@ -20,6 +20,11 @@ export const tableProps = buildProps({
     required: false,
     default: () => [],
   },
+  expandable: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
   selectable: {
     type: Boolean,
     required: false,
diff --git a/packages/components/table/src/table.vue b/packages/components/table/src/table.vue
index b1cdd1de..cef9b884 100644
--- a/packages/components/table/src/table.vue
+++ b/packages/components/table/src/table.vue
@@ -4,13 +4,16 @@
       <thead class="puik-table__head">
         <tr class="puik-table__head__row">
           <th
-            v-if="selectable"
+            v-if="selectable || expandable"
             :class="[
-              'puik-table__head__row__item puik-table__head__row__item--selection',
+              'puik-table__head__row__item',
               { 'puik-table__head__row__item--sticky': stickyFirstCol },
+              { 'puik-table__head__row__item--selection': selectable },
+              { 'puik-table__head__row__item--expandable': expandable },
             ]"
           >
             <puik-checkbox
+              v-if="selectable"
               :model-value="selectAll"
               :indeterminate="indeterminate"
               class="puik-table__head__row__item--selection__checkbox"
@@ -19,6 +22,7 @@
               {{ selectAllLabel }}
             </puik-checkbox>
           </th>
+
           <th
             v-for="(header, index) in headers"
             :key="`headers${header.value}`"
@@ -48,19 +52,31 @@
         <template v-for="(item, rowIndex) in items" :key="`row-${rowIndex}`">
           <tr class="puik-table__body__row">
             <td
-              v-if="selectable"
+              v-if="selectable || expandable"
               :class="[
                 'puik-table__body__row__item puik-table__body__row__item--selection',
                 { 'puik-table__body__row__item--sticky': stickyFirstCol },
               ]"
             >
-              <puik-checkbox
-                :model-value="getSelected(rowIndex)"
-                class="puik-table__body__row__item--selection__checkbox"
-                @click="handleClick(rowIndex)"
-              >
-                {{ getSelectLabel(rowIndex) }}
-              </puik-checkbox>
+              <div class="puik-table__body__row__item__container">
+                <puik-checkbox
+                  v-if="selectable"
+                  :model-value="getSelected(rowIndex)"
+                  class="puik-table__body__row__item--selection__checkbox"
+                  @click="handleClick(rowIndex)"
+                >
+                  {{ getSelectLabel(rowIndex) }}
+                </puik-checkbox>
+                <PuikIcon
+                  v-if="expandable"
+                  :class="[
+                    { 'puik-icon__expand': expandedRows.includes(rowIndex) },
+                  ]"
+                  icon="keyboard_arrow_down"
+                  font-size="24"
+                  @click="expandRow(rowIndex)"
+                />
+              </div>
             </td>
 
             <td
@@ -82,13 +98,20 @@
               </slot>
             </td>
           </tr>
-          <slot :name="`puik-table__body__row__item`" :item="item">
-            <tr>
-              <td :colspan="headers.length" class="expanded-cell">
+          <tr
+            v-if="expandedRows.includes(rowIndex)"
+            :key="`expanded-row-${rowIndex}`"
+            class="puik-table__body__row--expanded"
+          >
+            <td
+              :colspan="headers.length"
+              class="puik-table__body__row__item--expanded"
+            >
+              <slot :name="`expanded-row-${rowIndex}`" :item="item">
                 {{ item }}
-              </td>
-            </tr>
-          </slot>
+              </slot>
+            </td>
+          </tr>
         </template>
       </tbody>
     </table>
@@ -99,6 +122,7 @@
 import { computed, ref, watch } from 'vue'
 import { useLocale } from '@puik/hooks'
 import PuikCheckbox from '../../checkbox/src/checkbox.vue'
+import PuikIcon from '../../icon/src/icon.vue'
 import { tableProps } from './table'
 defineOptions({
   name: 'PuikTable',
@@ -112,13 +136,14 @@ const emit = defineEmits<{
 }>()
 const { t } = useLocale()
 const checked = ref<number[]>(props.selection)
-const expandedCell = ref(null)
+const expandedRows = ref<number[]>([])
 
 const isSticky = (
   index: number,
-  selectable: boolean = props.selectable
+  selectable: boolean = props.selectable,
+  expandable: boolean = props.expandable
 ): boolean => {
-  if (selectable) {
+  if (selectable || expandable) {
     return props.stickyLastCol && index === props.headers.length - 1
   } else {
     return (
@@ -128,13 +153,23 @@ const isSticky = (
   }
 }
 
-// const expandCell = (rowIndex: number, cellIndex: number) => {
-//   expandedCell.value = {
-//     content: rows.value[rowIndex][cellIndex],
-//     rowIndex,
+// const expandRow = (rowIndex: number) => {
+//   if (expandedRow.value === rowIndex) {
+//     return (expandedRow.value = null)
+//   } else {
+//     return (expandedRow.value = rowIndex)
 //   }
 // }
 
+const expandRow = (rowIndex: number) => {
+  const position = expandedRows.value.indexOf(rowIndex)
+  if (position !== -1) {
+    expandedRows.value.splice(position, 1)
+  } else {
+    expandedRows.value.push(rowIndex)
+  }
+}
+
 const selectAll = computed(() => {
   if (indeterminate.value) return false
   return checked.value.length === props.items.length
diff --git a/packages/components/table/stories/table.stories.ts b/packages/components/table/stories/table.stories.ts
index ff3361f5..49efb633 100644
--- a/packages/components/table/stories/table.stories.ts
+++ b/packages/components/table/stories/table.stories.ts
@@ -56,6 +56,14 @@ export default {
         },
       },
     },
+    expandable: {
+      control: 'boolean',
+      description: 'Makes rows expandable',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
     selectable: {
       control: 'boolean',
       description: 'Add col with checkbox',
diff --git a/packages/theme/src/table.scss b/packages/theme/src/table.scss
index 39fe27b0..4735b6b2 100644
--- a/packages/theme/src/table.scss
+++ b/packages/theme/src/table.scss
@@ -58,7 +58,8 @@
   &__body,
   > tbody {
     &__row,
-    > tr {
+    > .puik-table__head__row,
+    .puik-table__body__row {
       @apply border-t-[1px];
       &:hover {
         .puik-table__body__row__item,
@@ -66,8 +67,7 @@
           @apply bg-primary-200;
         }
       }
-      &__item,
-      > td {
+      &__item {
         @extend .puik-body-default;
         @apply text-primary-800;
         @include puik-table-item();
@@ -97,4 +97,16 @@
       @apply left-0 shadow-[-4px_0_7px_-1px_rgba(29,29,27,0.1)];
     }
   }
+  .puik-table__body__row__item--expanded {
+    @apply p-0;
+  }
+  .puik-table__body__row__item__container {
+    @apply flex items-center space-x-4;
+    .puik-icon {
+      @apply select-none cursor-pointer -rotate-0 transform transition-transform duration-150 ease-in-out;
+    }
+    .puik-icon__expand {
+      @apply -rotate-180 transform transition-transform duration-100 ease-in-out;
+    }
+  }
 }

From e343f4964f25f4e2e93cbbbf2fb70c1e90d2385a Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Wed, 22 Nov 2023 10:58:31 +0100
Subject: [PATCH 10/15] feat: [table] related  #250 - refacto style for sticky
 cols

---
 packages/components/table/src/table.vue       | 73 ++++++++++++++++---
 .../components/table/stories/table.stories.ts |  3 +
 packages/theme/src/table.scss                 | 65 ++++++++++++-----
 3 files changed, 113 insertions(+), 28 deletions(-)

diff --git a/packages/components/table/src/table.vue b/packages/components/table/src/table.vue
index cef9b884..a77e42b5 100644
--- a/packages/components/table/src/table.vue
+++ b/packages/components/table/src/table.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="puik-table__container">
+  <div class="puik-table__container" @scroll="getScrollBarPosition">
     <table class="puik-table" :class="{ 'puik-table--full-width': fullWidth }">
       <thead class="puik-table__head">
         <tr class="puik-table__head__row">
@@ -8,6 +8,12 @@
             :class="[
               'puik-table__head__row__item',
               { 'puik-table__head__row__item--sticky': stickyFirstCol },
+              {
+                'puik-table__head__row__item--sticky-scroll':
+                  stickyFirstCol &&
+                  (ScrollBarPosition === 'isScrolling' ||
+                    ScrollBarPosition === 'right'),
+              },
               { 'puik-table__head__row__item--selection': selectable },
               { 'puik-table__head__row__item--expandable': expandable },
             ]"
@@ -35,6 +41,18 @@
                   header?.size && !header?.width,
               },
               { 'puik-table__head__row__item--sticky': isSticky(index) },
+              {
+                'puik-table__head__row__item--sticky-scroll':
+                  isSticky(index) && ScrollBarPosition === 'isScrolling',
+              },
+              {
+                'puik-table__head__row__item--sticky-left':
+                  isSticky(index) && ScrollBarPosition === 'left',
+              },
+              {
+                'puik-table__head__row__item--sticky-right':
+                  isSticky(index) && ScrollBarPosition === 'right',
+              },
             ]"
             :style="{ minWidth: header.width, width: header.width }"
           >
@@ -55,7 +73,21 @@
               v-if="selectable || expandable"
               :class="[
                 'puik-table__body__row__item puik-table__body__row__item--selection',
-                { 'puik-table__body__row__item--sticky': stickyFirstCol },
+                {
+                  'puik-table__body__row__item--sticky': stickyFirstCol,
+                },
+                {
+                  'puik-table__body__row__item--sticky-scroll':
+                    stickyFirstCol && ScrollBarPosition === 'isScrolling',
+                },
+                {
+                  'puik-table__body__row__item--sticky-left':
+                    stickyFirstCol && ScrollBarPosition === 'left',
+                },
+                {
+                  'puik-table__body__row__item--sticky-right':
+                    stickyFirstCol && ScrollBarPosition === 'right',
+                },
               ]"
             >
               <div class="puik-table__body__row__item__container">
@@ -87,6 +119,18 @@
                   header.align ?? 'left'
                 }`,
                 { 'puik-table__body__row__item--sticky': isSticky(colIndex) },
+                {
+                  'puik-table__body__row__item--sticky-scroll':
+                    isSticky(colIndex) && ScrollBarPosition == 'isScrolling',
+                },
+                {
+                  'puik-table__body__row__item--sticky-left':
+                    isSticky(colIndex) && ScrollBarPosition == 'left',
+                },
+                {
+                  'puik-table__body__row__item--sticky-right':
+                    isSticky(colIndex) && ScrollBarPosition == 'right',
+                },
               ]"
             >
               <slot
@@ -137,6 +181,23 @@ const emit = defineEmits<{
 const { t } = useLocale()
 const checked = ref<number[]>(props.selection)
 const expandedRows = ref<number[]>([])
+const ScrollBarPosition = ref<string>('left')
+let lastScrollLeft = 0
+
+const getScrollBarPosition = async (event: Event) => {
+  const target = event.target as HTMLElement
+  if (target.scrollLeft === 0) {
+    ScrollBarPosition.value = 'left'
+  } else if (
+    Math.abs(target.scrollLeft + target.offsetWidth - target.scrollWidth) < 10
+  ) {
+    ScrollBarPosition.value = 'right'
+  } else {
+    ScrollBarPosition.value = 'isScrolling'
+  }
+
+  lastScrollLeft = target.scrollLeft
+}
 
 const isSticky = (
   index: number,
@@ -153,14 +214,6 @@ const isSticky = (
   }
 }
 
-// const expandRow = (rowIndex: number) => {
-//   if (expandedRow.value === rowIndex) {
-//     return (expandedRow.value = null)
-//   } else {
-//     return (expandedRow.value = rowIndex)
-//   }
-// }
-
 const expandRow = (rowIndex: number) => {
   const position = expandedRows.value.indexOf(rowIndex)
   if (position !== -1) {
diff --git a/packages/components/table/stories/table.stories.ts b/packages/components/table/stories/table.stories.ts
index 49efb633..f95337ed 100644
--- a/packages/components/table/stories/table.stories.ts
+++ b/packages/components/table/stories/table.stories.ts
@@ -166,8 +166,11 @@ export default {
     },
   },
   args: {
+    expandable: false,
     selectable: false,
     fullWidth: false,
+    stickyFirstCol: false,
+    stickyLastCol: false,
   },
 } as Meta
 
diff --git a/packages/theme/src/table.scss b/packages/theme/src/table.scss
index 4735b6b2..e22be884 100644
--- a/packages/theme/src/table.scss
+++ b/packages/theme/src/table.scss
@@ -76,32 +76,61 @@
     }
   }
 
-  .puik-table__head__row__item--sticky,
-  .puik-table__body__row__item--sticky {
-    @apply sticky bg-white;
-    &::before {
-      @apply content-[''] block absolute top-0 bottom-0 w-1.5 bg-white;
+  tr {
+    .puik-table__head__row__item--sticky,
+    .puik-table__body__row__item--sticky {
+      @apply sticky bg-white;
     }
-  }
-  tr .puik-table__head__row__item--sticky:first-child,
-  tr .puik-table__body__row__item--sticky:first-child {
-    @apply -left-px;
-    &::before {
-      @apply right-0 shadow-[4px_0_7px_-1px_rgba(29,29,27,0.1)];
+
+    .puik-table__head__row__item--sticky-scroll,
+    .puik-table__body__row__item--sticky-scroll,
+    .puik-table__head__row__item--sticky-right:first-child,
+    .puik-table__body__row__item--sticky-right:first-child,
+    .puik-table__head__row__item--sticky-left:last-child,
+    .puik-table__body__row__item--sticky-left:last-child {
+      &::before {
+        @apply content-[''] block absolute top-0 bottom-0 w-1.5 bg-white;
+      }
     }
-  }
-  tr .puik-table__head__row__item--sticky:last-child,
-  tr .puik-table__body__row__item--sticky:last-child {
-    @apply -right-px;
-    &::before {
-      @apply left-0 shadow-[-4px_0_7px_-1px_rgba(29,29,27,0.1)];
+
+    .puik-table__head__row__item--sticky:first-child,
+    .puik-table__body__row__item--sticky:first-child,
+    .puik-table__head__row__item--sticky-right:first-child,
+    .puik-table__body__row__item--sticky-right:first-child {
+      @apply -left-px;
+    }
+
+    .puik-table__head__row__item--sticky:last-child,
+    .puik-table__body__row__item--sticky:last-child,
+    .puik-table__head__row__item--sticky-left:last-child,
+    .puik-table__body__row__item--sticky-left:last-child {
+      @apply -right-px;
+    }
+
+    .puik-table__head__row__item--sticky-scroll:first-child,
+    .puik-table__body__row__item--sticky-scroll:first-child,
+    .puik-table__head__row__item--sticky-right:first-child,
+    .puik-table__body__row__item--sticky-right:first-child {
+      &::before {
+        @apply right-0 shadow-[4px_0_7px_-1px_rgba(29,29,27,0.1)];
+      }
+    }
+
+    .puik-table__head__row__item--sticky-scroll:last-child,
+    .puik-table__body__row__item--sticky-scroll:last-child,
+    .puik-table__head__row__item--sticky-left:last-child,
+    .puik-table__body__row__item--sticky-left:last-child {
+      &::before {
+        @apply left-0 shadow-[-4px_0_7px_-1px_rgba(29,29,27,0.1)];
+      }
     }
   }
+
   .puik-table__body__row__item--expanded {
     @apply p-0;
   }
   .puik-table__body__row__item__container {
-    @apply flex items-center space-x-4;
+    @apply flex items-center space-x-3;
     .puik-icon {
       @apply select-none cursor-pointer -rotate-0 transform transition-transform duration-150 ease-in-out;
     }

From 3b8721eddd076b9d55a908ea9da0edcd6fa77835 Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Wed, 22 Nov 2023 12:05:15 +0100
Subject: [PATCH 11/15] docs: [table] related #249 #250 - update storybook

---
 packages/components/table/src/table.vue       |   6 +-
 .../components/table/stories/table.stories.ts | 145 +++++++++++++++++-
 2 files changed, 145 insertions(+), 6 deletions(-)

diff --git a/packages/components/table/src/table.vue b/packages/components/table/src/table.vue
index a77e42b5..396bf713 100644
--- a/packages/components/table/src/table.vue
+++ b/packages/components/table/src/table.vue
@@ -151,7 +151,11 @@
               :colspan="headers.length"
               class="puik-table__body__row__item--expanded"
             >
-              <slot :name="`expanded-row-${rowIndex}`" :item="item">
+              <slot
+                :name="`expanded-row-${rowIndex}`"
+                :item="item"
+                :index="rowIndex"
+              >
                 {{ item }}
               </slot>
             </td>
diff --git a/packages/components/table/stories/table.stories.ts b/packages/components/table/stories/table.stories.ts
index f95337ed..9052f774 100644
--- a/packages/components/table/stories/table.stories.ts
+++ b/packages/components/table/stories/table.stories.ts
@@ -56,17 +56,17 @@ export default {
         },
       },
     },
-    expandable: {
+    selectable: {
       control: 'boolean',
-      description: 'Makes rows expandable',
+      description: 'Makes rows selectable',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: 'false' },
       },
     },
-    selectable: {
+    expandable: {
       control: 'boolean',
-      description: 'Add col with checkbox',
+      description: 'Makes rows expandable',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: 'false' },
@@ -137,6 +137,21 @@ export default {
 {
   item: any
   index: number
+}
+          `,
+        },
+      },
+    },
+    '`expanded-row-${rowIndex}`': {
+      control: 'none',
+      description: 'slot for expanded row content',
+      table: {
+        type: {
+          summary: 'SlotProps',
+          detail: `
+{
+  item: any
+  index: number
 }
           `,
         },
@@ -166,8 +181,8 @@ export default {
     },
   },
   args: {
-    expandable: false,
     selectable: false,
+    expandable: false,
     fullWidth: false,
     stickyFirstCol: false,
     stickyLastCol: false,
@@ -442,6 +457,7 @@ export const Selectable: StoryObj = {
     v-model:selection="selection"
     :headers="headers"
     :items="items"
+    :selectable="true"
   >
     <template #item-actions="{ item }">
       <puik-button
@@ -532,6 +548,125 @@ export const Selectable: StoryObj = {
   },
 }
 
+export const Expandable: StoryObj = {
+  render: Template,
+  args: {
+    expandable: true,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+  <!--VueJS Snippet-->
+  const headers: PuikTableHeader[] = [
+    {
+      text: 'Nom',
+      value: 'lastname',
+      size: 'md',
+    },
+    {
+      text: 'Prénom',
+      value: 'firstname',
+      size: 'md',
+    },
+    {
+      text: 'Age',
+      value: 'age',
+      size: 'sm',
+      align: 'center',
+    },
+    {
+      text: 'Email',
+      value: 'email',
+      align: 'right',
+    },
+    {
+      value: 'actions',
+      size: 'sm',
+    },
+  ]
+
+  <puik-table :expandable="true">
+    <template #item-actions="{ item }">
+      <puik-button
+        variant="text"
+        right-icon="delete"
+        aria-label="Delete item"
+      ></puik-button>
+    </template>
+  </puik-table>
+
+  <!--HTML/CSS Snippet-->
+  <table class="puik-table">
+    <thead class="puik-table__head">
+        <tr class="puik-table__head__row">
+            <th class="puik-table__head__row__item puik-table__head__row__item--expandable"></th>
+            <th class="puik-table__head__row__item puik-table__head__row__item--left puik-table__head__row__item--md">Nom</th>
+            <th class="puik-table__head__row__item puik-table__head__row__item--left puik-table__head__row__item--md">Prénom</th>
+            <th class="puik-table__head__row__item puik-table__head__row__item--center puik-table__head__row__item--sm">Age</th>
+            <th class="puik-table__head__row__item puik-table__head__row__item--right">Email</th>
+            <th class="puik-table__head__row__item puik-table__head__row__item--left puik-table__head__row__item--sm"></th>
+        </tr>
+    </thead>
+    <tbody class="puik-table__body">
+        <tr class="puik-table__body__row">
+            <td class="puik-table__body__row__item puik-table__body__row__item--selection">
+                <div class="puik-table__body__row__item__container">  
+                    <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">
+                <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>
+                </button>
+            </td>
+        </tr>
+      
+        <tr class="puik-table__body__row">
+            <td class="puik-table__body__row__item puik-table__body__row__item--selection">
+                <div class="puik-table__body__row__item__container">
+                    <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">
+                <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>
+                </button>
+            </td>
+        </tr>
+        <tr class="puik-table__body__row">
+            <td class="puik-table__body__row__item puik-table__body__row__item--selection">
+                <div class="puik-table__body__row__item__container">
+                    <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">
+                <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>
+                </button>
+            </td>
+        </tr>
+    </tbody>
+</table>
+        `,
+        language: 'html',
+      },
+    },
+  },
+}
+
 export const FullWidth: StoryObj = {
   render: Template,
   args: {

From 92d76aa99647f625f290ec29dc70cd0c7c11765c Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Wed, 22 Nov 2023 12:19:41 +0100
Subject: [PATCH 12/15] test: [table] fix #249 - expandable rows test

---
 packages/components/table/test/table.spec.ts | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/components/table/test/table.spec.ts b/packages/components/table/test/table.spec.ts
index bb22d4b4..1c2a7ac9 100644
--- a/packages/components/table/test/table.spec.ts
+++ b/packages/components/table/test/table.spec.ts
@@ -302,4 +302,16 @@ describe('Table tests', () => {
       )
     })
   })
+
+  it('should have expandable rows', () => {
+    const headers: PuikTableHeader[] = [
+      { value: 'firstname' },
+      { value: 'lastname' },
+    ]
+    factory({ headers, expandable: true })
+    const header = getHeaders()[0]
+    expect(header.classes()).toContain(
+      'puik-table__head__row__item--expandable'
+    )
+  })
 })

From d28c6b63241211b457322f7c9faf07df4526af35 Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Tue, 28 Nov 2023 13:42:22 +0100
Subject: [PATCH 13/15] feat: [button/alert] add button label wrap prop

---
 packages/components/alert/src/alert.ts        |  5 ++
 packages/components/alert/src/alert.vue       |  1 +
 .../components/alert/stories/alert.stories.ts | 73 +++++++++++++++++++
 packages/components/alert/test/alert.spec.ts  |  5 ++
 packages/components/button/src/button.ts      |  5 ++
 packages/components/button/src/button.vue     |  1 +
 .../button/stories/button.stories.ts          | 10 +++
 .../components/button/test/button.spec.ts     |  5 ++
 packages/theme/src/button.scss                |  4 +
 9 files changed, 109 insertions(+)

diff --git a/packages/components/alert/src/alert.ts b/packages/components/alert/src/alert.ts
index f179699e..d86d1a7f 100644
--- a/packages/components/alert/src/alert.ts
+++ b/packages/components/alert/src/alert.ts
@@ -37,6 +37,11 @@ export const alertProps = buildProps({
     required: false,
     default: undefined,
   },
+  buttonWrapLabel: {
+    type: Boolean,
+    required: false,
+    default: true,
+  },
   isClosable: {
     type: Boolean,
     required: false,
diff --git a/packages/components/alert/src/alert.vue b/packages/components/alert/src/alert.vue
index 4992e0e4..cfcd3495 100644
--- a/packages/components/alert/src/alert.vue
+++ b/packages/components/alert/src/alert.vue
@@ -31,6 +31,7 @@
       <PuikButton
         v-if="buttonLabel"
         :variant="variant"
+        :wrap-label="buttonWrapLabel"
         class="puik-alert__button"
         :data-test="dataTest != undefined ? `button-${dataTest}` : undefined"
         @click="click"
diff --git a/packages/components/alert/stories/alert.stories.ts b/packages/components/alert/stories/alert.stories.ts
index c405d565..0f261fa6 100644
--- a/packages/components/alert/stories/alert.stories.ts
+++ b/packages/components/alert/stories/alert.stories.ts
@@ -40,6 +40,14 @@ export default {
     buttonLabel: {
       description: 'Label of the button',
     },
+    buttonWrapLabel: {
+      description: 'Set the carriage return of the button label',
+      table: {
+        defaultValue: {
+          summary: true,
+        },
+      },
+    },
     isClosable: {
       description: 'Display a close button',
     },
@@ -59,6 +67,7 @@ export default {
     variant: 'success',
     disableBorders: false,
     buttonLabel: 'Button',
+    buttonWrapLabel: true,
     isClosable: false,
   },
 } as Meta
@@ -125,6 +134,70 @@ export const Default = {
   },
 }
 
+export const buttonWrapLabelToFalse: StoryObj = {
+  render: () => ({
+    components: {
+      PuikAlert,
+    },
+    template: `
+      <div class="flex flex-col space-y-4">
+       <puik-alert title="Title" button-label="Button with a very long label" :button-wrap-Label="false">
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+       </puik-alert>
+      </div>
+    `,
+  }),
+
+  parameters: {
+    docs: {
+      source: {
+        code: `
+  <!--VueJS Snippet-->
+  <puik-alert
+    title="Title"
+    button-label="No wrap button with a very long label"
+    :button-wrap-Label="false"
+    @click="click"
+  >
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+  </puik-alert>
+
+  <!--HTML/CSS Snippet-->
+<div class="puik-alert__container">
+  <div class="puik-alert__content">
+      <div class="puik-icon puik-alert__icon" style="font-size: 1.25rem;">check_circle</div>
+      <div class="puik-alert__text">
+          <p class="puik-alert__title">Title</p>
+          <span class="puik-alert__description"> This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. </span>
+      </div>
+  </div>
+  <button class="puik-button puik-button--success puik-button--md puik-button--no-wrap puik-alert__button">
+      Button with a very long label
+  </button>
+</div>
+        `,
+        language: 'html',
+      },
+    },
+  },
+}
+
 export const Success: StoryObj = {
   render: () => ({
     components: {
diff --git a/packages/components/alert/test/alert.spec.ts b/packages/components/alert/test/alert.spec.ts
index d2bdcb6f..e45df80e 100644
--- a/packages/components/alert/test/alert.spec.ts
+++ b/packages/components/alert/test/alert.spec.ts
@@ -40,6 +40,11 @@ describe('Alert tests', () => {
     expect(findAlert().classes()).toContain('puik-alert--warning')
   })
 
+  it('should set the button label wrap to false', () => {
+    factory({ buttonLabel: 'Button', buttonWrapLabel: false })
+    expect(findButton().classes()).toContain('puik-button--no-wrap')
+  })
+
   it('should display a button which emits the click event on click', () => {
     factory({ buttonLabel: 'Button' })
     expect(findButton().exists()).toBeTruthy()
diff --git a/packages/components/button/src/button.ts b/packages/components/button/src/button.ts
index a6885676..441abe9f 100644
--- a/packages/components/button/src/button.ts
+++ b/packages/components/button/src/button.ts
@@ -38,6 +38,11 @@ export const buttonProps = buildProps({
     required: false,
     default: false,
   },
+  wrapLabel: {
+    type: Boolean,
+    required: false,
+    default: true,
+  },
   disabled: {
     type: Boolean,
     required: false,
diff --git a/packages/components/button/src/button.vue b/packages/components/button/src/button.vue
index 5c095584..4f667329 100644
--- a/packages/components/button/src/button.vue
+++ b/packages/components/button/src/button.vue
@@ -8,6 +8,7 @@
       `puik-button--${size}`,
       { 'puik-button--disabled': disabled },
       { 'puik-button--fluid': fluid },
+      { 'puik-button--no-wrap': !wrapLabel },
     ]"
     :disabled="disabled"
     :data-test="dataTest"
diff --git a/packages/components/button/stories/button.stories.ts b/packages/components/button/stories/button.stories.ts
index a71e84a2..b815c931 100644
--- a/packages/components/button/stories/button.stories.ts
+++ b/packages/components/button/stories/button.stories.ts
@@ -44,6 +44,14 @@ export default {
         },
       },
     },
+    wrapLabel: {
+      description: 'Set the carriage return of the button label',
+      table: {
+        defaultValue: {
+          summary: true,
+        },
+      },
+    },
     disabled: {
       description: 'Set the button as disabled',
       table: {
@@ -81,6 +89,7 @@ export default {
     variant: 'primary',
     size: 'md',
     fluid: false,
+    wrapLabel: true,
     disabled: false,
     leftIcon: '',
     rightIcon: '',
@@ -117,6 +126,7 @@ export const Default = {
     :size="$sizes"
     :variant="$variants"
     :fluid="true|false"
+    :wrap-label="true|false"
     :disabled="true|false"
     :left-icon="leftIcon"
     :right-icon="rightIcon"
diff --git a/packages/components/button/test/button.spec.ts b/packages/components/button/test/button.spec.ts
index a209f85c..da319d3e 100644
--- a/packages/components/button/test/button.spec.ts
+++ b/packages/components/button/test/button.spec.ts
@@ -91,6 +91,11 @@ describe('Button tests', () => {
     expect(findButton().classes()).toContain('puik-button--fluid')
   })
 
+  it('should set the button label wrap to false', () => {
+    factory({ wrapLabel: false })
+    expect(findButton().classes()).toContain('puik-button--no-wrap')
+  })
+
   it('should be a router-link if to prop is defined', () => {
     factory({ to: '/test' })
     expect(findButton().element.tagName).toBe('ROUTER-LINK')
diff --git a/packages/theme/src/button.scss b/packages/theme/src/button.scss
index 7adf1acd..f567b69d 100644
--- a/packages/theme/src/button.scss
+++ b/packages/theme/src/button.scss
@@ -22,6 +22,10 @@
     @apply w-full;
   }
 
+  &--no-wrap {
+    @apply whitespace-nowrap;
+  }
+
   &:focus-visible {
     @apply outline-none ring ring-offset-2 ring-blue;
   }

From 912ad53b4d005a3deb3064d2d4d43ead0f402620 Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Tue, 28 Nov 2023 14:13:14 +0100
Subject: [PATCH 14/15] feat: [button/alert] - wrap button label set tofalse by
 default

---
 packages/components/alert/src/alert.ts        |  2 +-
 .../components/alert/stories/alert.stories.ts | 56 ++++++++++++++++---
 packages/components/button/src/button.ts      |  2 +-
 .../button/stories/button.stories.ts          |  2 +-
 4 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/packages/components/alert/src/alert.ts b/packages/components/alert/src/alert.ts
index d86d1a7f..abe388d4 100644
--- a/packages/components/alert/src/alert.ts
+++ b/packages/components/alert/src/alert.ts
@@ -40,7 +40,7 @@ export const alertProps = buildProps({
   buttonWrapLabel: {
     type: Boolean,
     required: false,
-    default: true,
+    default: false,
   },
   isClosable: {
     type: Boolean,
diff --git a/packages/components/alert/stories/alert.stories.ts b/packages/components/alert/stories/alert.stories.ts
index 0f261fa6..6df21f4b 100644
--- a/packages/components/alert/stories/alert.stories.ts
+++ b/packages/components/alert/stories/alert.stories.ts
@@ -44,7 +44,7 @@ export default {
       description: 'Set the carriage return of the button label',
       table: {
         defaultValue: {
-          summary: true,
+          summary: false,
         },
       },
     },
@@ -67,7 +67,7 @@ export default {
     variant: 'success',
     disableBorders: false,
     buttonLabel: 'Button',
-    buttonWrapLabel: true,
+    buttonWrapLabel: false,
     isClosable: false,
   },
 } as Meta
@@ -134,14 +134,25 @@ export const Default = {
   },
 }
 
-export const buttonWrapLabelToFalse: StoryObj = {
+export const buttonWrapLabel: StoryObj = {
   render: () => ({
     components: {
       PuikAlert,
     },
     template: `
       <div class="flex flex-col space-y-4">
-       <puik-alert title="Title" button-label="Button with a very long label" :button-wrap-Label="false">
+       <puik-alert title="buttonWrapLabel to true" button-label="Button with a very long label" button-wrap-Label>
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+        This an alert with a very long description.
+       </puik-alert>
+       <puik-alert title="buttonWrapLabel to false (by default)" button-label="Button with a very long label">
         This an alert with a very long description.
         This an alert with a very long description.
         This an alert with a very long description.
@@ -162,9 +173,25 @@ export const buttonWrapLabelToFalse: StoryObj = {
         code: `
   <!--VueJS Snippet-->
   <puik-alert
-    title="Title"
-    button-label="No wrap button with a very long label"
-    :button-wrap-Label="false"
+    title="buttonWrapLabel to true"
+    button-label="Button with a very long label"
+    button-wrap-Label
+    @click="click"
+  >
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+    This an alert with a very long description.
+  </puik-alert>
+
+  <puik-alert
+    title="buttonWrapLabel to false (by default)"
+    button-label="Button with a very long label"
     @click="click"
   >
     This an alert with a very long description.
@@ -183,7 +210,20 @@ export const buttonWrapLabelToFalse: StoryObj = {
   <div class="puik-alert__content">
       <div class="puik-icon puik-alert__icon" style="font-size: 1.25rem;">check_circle</div>
       <div class="puik-alert__text">
-          <p class="puik-alert__title">Title</p>
+          <p class="puik-alert__title">buttonWrapLabel to true</p>
+          <span class="puik-alert__description"> This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. </span>
+      </div>
+  </div>
+  <button class="puik-button puik-button--success puik-button--md puik-button--no-wrap puik-alert__button">
+      Button with a very long label
+  </button>
+</div>
+
+<div class="puik-alert__container">
+  <div class="puik-alert__content">
+      <div class="puik-icon puik-alert__icon" style="font-size: 1.25rem;">check_circle</div>
+      <div class="puik-alert__text">
+          <p class="puik-alert__title">buttonWrapLabel to false (by default)</p>
           <span class="puik-alert__description"> This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. </span>
       </div>
   </div>
diff --git a/packages/components/button/src/button.ts b/packages/components/button/src/button.ts
index 441abe9f..f0158d3f 100644
--- a/packages/components/button/src/button.ts
+++ b/packages/components/button/src/button.ts
@@ -41,7 +41,7 @@ export const buttonProps = buildProps({
   wrapLabel: {
     type: Boolean,
     required: false,
-    default: true,
+    default: false,
   },
   disabled: {
     type: Boolean,
diff --git a/packages/components/button/stories/button.stories.ts b/packages/components/button/stories/button.stories.ts
index b815c931..728cbcdb 100644
--- a/packages/components/button/stories/button.stories.ts
+++ b/packages/components/button/stories/button.stories.ts
@@ -48,7 +48,7 @@ export default {
       description: 'Set the carriage return of the button label',
       table: {
         defaultValue: {
-          summary: true,
+          summary: false,
         },
       },
     },

From df78e26cb1f08123d35b3b06d9103c002e5dff3d Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Tue, 28 Nov 2023 14:16:16 +0100
Subject: [PATCH 15/15] docs: [alert] update storybook

---
 packages/components/alert/stories/alert.stories.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/alert/stories/alert.stories.ts b/packages/components/alert/stories/alert.stories.ts
index 6df21f4b..5abf29c6 100644
--- a/packages/components/alert/stories/alert.stories.ts
+++ b/packages/components/alert/stories/alert.stories.ts
@@ -214,7 +214,7 @@ export const buttonWrapLabel: StoryObj = {
           <span class="puik-alert__description"> This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. </span>
       </div>
   </div>
-  <button class="puik-button puik-button--success puik-button--md puik-button--no-wrap puik-alert__button">
+  <button class="puik-button puik-button--success puik-button--md puik-alert__button">
       Button with a very long label
   </button>
 </div>