From 7b99f7e738ce65a65d8d03a653c00f9a4256e16b Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Wed, 19 Jun 2024 16:58:24 +0200
Subject: [PATCH 1/4] feat: related #275 - add items-per-page label, add news
 props to display results and items-per-page feature (label and select), fix
 somes translations

---
 .../pagination/src/pagination-large.ts        |  2 ++
 .../pagination/src/pagination-large.vue       | 11 ++++++-
 .../pagination/src/pagination-medium.ts       |  1 +
 .../pagination/src/pagination-medium.vue      |  1 +
 .../pagination/src/pagination-small.ts        |  1 +
 .../pagination/src/pagination-small.vue       |  1 +
 .../components/pagination/src/pagination.ts   |  2 ++
 .../components/pagination/src/pagination.vue  | 29 ++++++++++++-------
 packages/locale/lang/en.ts                    | 11 +++----
 packages/locale/lang/fr.ts                    | 13 +++++----
 packages/theme/src/puik-pagination.scss       |  4 +++
 11 files changed, 53 insertions(+), 23 deletions(-)

diff --git a/packages/components/pagination/src/pagination-large.ts b/packages/components/pagination/src/pagination-large.ts
index e1cf8280..05d633a7 100644
--- a/packages/components/pagination/src/pagination-large.ts
+++ b/packages/components/pagination/src/pagination-large.ts
@@ -9,6 +9,8 @@ export interface PaginationLargeProps {
   maxPage: number
   label?: string
   dataTest?: string
+  displayItemsPerPage?: boolean
+  displayResults?: boolean
 }
 
 export type PaginationInstance = InstanceType<typeof PaginationLarge>;
diff --git a/packages/components/pagination/src/pagination-large.vue b/packages/components/pagination/src/pagination-large.vue
index 0f5cf0c6..abf28ba8 100644
--- a/packages/components/pagination/src/pagination-large.vue
+++ b/packages/components/pagination/src/pagination-large.vue
@@ -1,5 +1,6 @@
 <template>
   <span
+    v-if="displayResults"
     class="puik-pagination__label"
     :data-test="dataTest != undefined ? `label-${dataTest}` : undefined"
   >
@@ -60,8 +61,14 @@
       </span>
     </puik-button>
   </div>
-
+  <span
+    v-if="displayItemsPerPage"
+    class="puik-pagination__items-per-page-label"
+  >
+    {{ t('puik.pagination.itemPerPageLabel', { maxPage }) }}
+  </span>
   <puik-select
+    v-if="displayItemsPerPage"
     v-model="currentItemsPerPage"
     class="puik-pagination__items-per-page-select"
   >
@@ -85,7 +92,9 @@ import { type PaginationLargeProps } from './pagination-large';
 defineOptions({
   name: 'PuikPaginationLarge'
 });
+
 const props = defineProps<PaginationLargeProps>();
+
 const emit = defineEmits<{
   'update:page': [value: number];
   'update:itemsPerPage': [value: number];
diff --git a/packages/components/pagination/src/pagination-medium.ts b/packages/components/pagination/src/pagination-medium.ts
index 8a7143bd..a596c59e 100644
--- a/packages/components/pagination/src/pagination-medium.ts
+++ b/packages/components/pagination/src/pagination-medium.ts
@@ -7,6 +7,7 @@ export interface PaginationMediumProps {
   maxPage: number
   label?: string
   dataTest?: string
+  displayResults?: boolean
 }
 
 export type PaginationInstance = InstanceType<typeof PaginationMedium>;
diff --git a/packages/components/pagination/src/pagination-medium.vue b/packages/components/pagination/src/pagination-medium.vue
index b9b86954..ff19970c 100644
--- a/packages/components/pagination/src/pagination-medium.vue
+++ b/packages/components/pagination/src/pagination-medium.vue
@@ -1,5 +1,6 @@
 <template>
   <span
+    v-if="displayResults"
     class="puik-pagination__label"
     :data-test="dataTest != undefined ? `label-${dataTest}` : undefined"
   >
diff --git a/packages/components/pagination/src/pagination-small.ts b/packages/components/pagination/src/pagination-small.ts
index 3dda36b4..eda45a2b 100644
--- a/packages/components/pagination/src/pagination-small.ts
+++ b/packages/components/pagination/src/pagination-small.ts
@@ -6,6 +6,7 @@ export interface PaginationSmallProps {
   maxPage: number
   label?: string
   dataTest?: string
+  displayResults?: boolean
 }
 
 export type PaginationInstance = InstanceType<typeof PaginationSmall>;
diff --git a/packages/components/pagination/src/pagination-small.vue b/packages/components/pagination/src/pagination-small.vue
index 26d8c43a..8230260b 100644
--- a/packages/components/pagination/src/pagination-small.vue
+++ b/packages/components/pagination/src/pagination-small.vue
@@ -1,5 +1,6 @@
 <template>
   <span
+    v-if="displayResults"
     class="puik-pagination__label"
     :data-test="dataTest != undefined ? `label-${dataTest}` : undefined"
   >
diff --git a/packages/components/pagination/src/pagination.ts b/packages/components/pagination/src/pagination.ts
index b6b2b18c..45476a92 100644
--- a/packages/components/pagination/src/pagination.ts
+++ b/packages/components/pagination/src/pagination.ts
@@ -13,6 +13,8 @@ export interface PaginationProps {
   totalItem: number
   itemsPerPage?: number
   itemsPerPageOptions?: number[]
+  displayItemsPerPage?: boolean
+  displayResults?: boolean
   page: number
   label?: string
   loaderButtonLabel?: string
diff --git a/packages/components/pagination/src/pagination.vue b/packages/components/pagination/src/pagination.vue
index e5bb2206..5266f0ad 100644
--- a/packages/components/pagination/src/pagination.vue
+++ b/packages/components/pagination/src/pagination.vue
@@ -9,45 +9,49 @@
     <pagination-loader
       v-if="variant === PuikPaginationVariants.Loader"
       v-model="currentPage"
+      :data-test="dataTest"
+      :disabled="loaderButtonDisabled"
       :label="currentLabel"
       :loader-button-label="loaderButtonLabel"
-      :disabled="loaderButtonDisabled"
-      :data-test="dataTest"
     />
 
     <div
       v-else
       class="puik-pagination__content"
     >
-      <pagination-small
-        v-if="variant === PuikPaginationVariants.Small"
+      <pagination-mobile
+        v-if="variant === PuikPaginationVariants.Mobile"
         v-model="currentPage"
         v-bind="commonPaginationProps"
         :data-test="dataTest"
       />
 
-      <pagination-mobile
-        v-if="variant === PuikPaginationVariants.Mobile"
+      <pagination-small
+        v-if="variant === PuikPaginationVariants.Small"
         v-model="currentPage"
         v-bind="commonPaginationProps"
         :data-test="dataTest"
+        :display-results="displayResults"
       />
 
       <pagination-medium
         v-if="variant === PuikPaginationVariants.Medium && !disabled"
         v-model="currentPage"
         v-bind="commonPaginationProps"
-        :total-item="totalItem"
         :data-test="dataTest"
+        :display-results="displayResults"
+        :total-item="totalItem"
       />
 
       <pagination-large
         v-if="variant === PuikPaginationVariants.Large"
         v-model:page="currentPage"
+        :data-test="dataTest"
+        :display-items-per-page="displayItemsPerPage"
+        :display-results="displayResults"
         :items-per-page="itemsPerPage"
-        :total-item="totalItem"
         :items-per-page-options="itemsPerPageOptions"
-        :data-test="dataTest"
+        :total-item="totalItem"
         v-bind="commonPaginationProps"
         @update:items-per-page="emit('update:itemsPerPage', $event)"
       />
@@ -73,7 +77,9 @@ defineOptions({
 const props = withDefaults(defineProps<PaginationProps>(), {
   variant: PuikPaginationVariants.Medium,
   itemsPerPage: 5,
-  itemsPerPageOptions: () => [5, 10, 15]
+  itemsPerPageOptions: () => [5, 10, 15],
+  displayItemsPerPage: true,
+  displayResults: true
 });
 const emit = defineEmits<{
   'update:page': [value: number]
@@ -105,7 +111,8 @@ const currentLabel = computed(() => {
     case PuikPaginationVariants.Small:
       return t(path, {
         page: currentPage.value,
-        maxPage: maxPage.value
+        maxPage: maxPage.value,
+        totalItem: props.totalItem
       });
     case PuikPaginationVariants.Medium:
     case PuikPaginationVariants.Large:
diff --git a/packages/locale/lang/en.ts b/packages/locale/lang/en.ts
index 253bb63a..cedda1f3 100644
--- a/packages/locale/lang/en.ts
+++ b/packages/locale/lang/en.ts
@@ -39,20 +39,21 @@ export default {
         label: 'Page {page} to {maxPage}'
       },
       medium: {
-        label: '{totalItem} results'
+        label: '{totalItem} result(s)'
       },
       large: {
-        label: '{totalItem} results',
+        label: '{totalItem} result(s)',
         choosePage: 'Select page',
-        jumperDescription: 'To {maxPage} pages'
+        jumperDescription: 'to {maxPage} page(s)'
       },
       loader: {
-        label: 'You saw {itemCount} products out of {totalItem}.',
+        label: 'You saw {itemCount} product(s) out of {totalItem}.',
         button: 'Load more'
       },
       mobile: {
         label: 'Page {page} to {maxPage}'
-      }
+      },
+      itemPerPageLabel: 'item(s) per page'
     },
     sidebar: {
       expandButtonLabel: {
diff --git a/packages/locale/lang/fr.ts b/packages/locale/lang/fr.ts
index 2f0e5307..51e1a36a 100644
--- a/packages/locale/lang/fr.ts
+++ b/packages/locale/lang/fr.ts
@@ -15,26 +15,27 @@ export default {
       ariaLabel: 'Pagination',
       goTo: 'Aller à la page {page}',
       previous: 'Précédent',
-      next: 'Suivante',
+      next: 'Suivant',
       small: {
         label: 'Page {page} à {maxPage}'
       },
       medium: {
-        label: '{totalItem} résultats'
+        label: '{totalItem} résultat(s)'
       },
       large: {
-        label: '{totalItem} résultats',
+        label: '{totalItem} résultat(s)',
         choosePage: 'Selectionner page',
-        jumperDescription: 'Sur {maxPage} pages'
+        jumperDescription: 'sur {maxPage} page(s)'
       },
       loader: {
         label:
-          'Vous visualisez {itemCount} produits sur un total de {totalItem}.',
+          'Vous visualisez {itemCount} produit(s) sur un total de {totalItem}.',
         button: 'Charger plus'
       },
       mobile: {
         label: 'Page {page} à {maxPage}'
-      }
+      },
+      itemPerPageLabel: 'élément(s) par page'
     }
   }
 };
diff --git a/packages/theme/src/puik-pagination.scss b/packages/theme/src/puik-pagination.scss
index e8c10a3f..e0ad66cc 100755
--- a/packages/theme/src/puik-pagination.scss
+++ b/packages/theme/src/puik-pagination.scss
@@ -58,6 +58,10 @@
     .puik-pagination__select {
       @apply mr-2;
     }
+    .puik-pagination__items-per-page-label {
+      @extend .puik-body-default;
+      @apply text-primary-700 mx-2 text-sm;
+    }
     .puik-pagination__items-per-page-select {
       @apply w-[100px];
     }

From 51ca2e2e5d32e02ea11987d4f6abd075d8bb3e48 Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Thu, 20 Jun 2024 15:54:05 +0200
Subject: [PATCH 2/4] fix: #275 create a watch function on currentPage

---
 packages/components/pagination/src/pagination.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/components/pagination/src/pagination.vue b/packages/components/pagination/src/pagination.vue
index 5266f0ad..c164a54d 100644
--- a/packages/components/pagination/src/pagination.vue
+++ b/packages/components/pagination/src/pagination.vue
@@ -60,7 +60,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, watch } from 'vue';
 import { useLocale } from '@prestashopcorp/puik-locale';
 import { type PaginationProps, PuikPaginationVariants } from './pagination';
 
@@ -134,6 +134,12 @@ const commonPaginationProps = computed(() => {
     disabled: disabled.value
   };
 });
+
+watch(() => props.itemsPerPage, () => {
+  if (currentPage.value > maxPage.value) {
+    currentPage.value = maxPage.value;
+  }
+});
 </script>
 
 <style lang="scss">

From 3b3d22fb4e221546e355755de0424f2df1466671 Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Thu, 20 Jun 2024 18:22:11 +0200
Subject: [PATCH 3/4] docs: [Pagination] - update storybook stories

---
 .../pagination/stories/pagination.stories.ts  | 441 ++++++++++--------
 1 file changed, 238 insertions(+), 203 deletions(-)

diff --git a/packages/components/pagination/stories/pagination.stories.ts b/packages/components/pagination/stories/pagination.stories.ts
index 06751f58..f7555ea2 100644
--- a/packages/components/pagination/stories/pagination.stories.ts
+++ b/packages/components/pagination/stories/pagination.stories.ts
@@ -53,8 +53,26 @@ export default {
         }
       }
     },
+    displayItemsPerPage: {
+      control: 'boolean',
+      description: 'displays the select in order to choose the desired number of items per page (for large pagination variant)',
+      table: {
+        defaultValue: {
+          summary: true
+        }
+      }
+    },
+    displayResults: {
+      control: 'boolean',
+      description: 'displays a label in front of the pagination for the small, medium and large variants indicating either the current page for the small variant or the total number of items for the medium and large variants',
+      table: {
+        defaultValue: {
+          summary: true
+        }
+      }
+    },
     page: {
-      control: 'numbnoneer',
+      control: 'number',
       description: 'v-model of the current page',
       table: {
         type: {
@@ -94,9 +112,11 @@ export default {
   },
   args: {
     variant: PuikPaginationVariants.Medium,
-    totalItem: 500,
+    totalItem: 150,
     label: '',
-    loaderButtonLabel: undefined
+    loaderButtonLabel: undefined,
+    displayItemsPerPage: true,
+    displayResults: true
   }
 } as Meta;
 
@@ -127,71 +147,54 @@ export const Default = {
   <!--VueJS Snippet-->
     <puik-pagination
       v-model:page="page"
-      :total-item="500"
-      :item-count="25"
-      :items-per-page="20"
+      :total-item="150"
   ></puik-pagination>
 
   <!--HTML/CSS Snippet-->
   <nav class="puik-pagination puik-pagination--medium" role="navigation" aria-label="Pagination navigation">
     <div class="puik-pagination__content">
-      <span class="puik-pagination__label">500 results</span>
-      <div class="puik-pagination__content">
-        <button class="puik-button puik-button--tertiary puik-button--md puik-button--disabled puik-pagination__previous-button puik-pagination__button" disabled aria-label="Previous page">
-          <div class="puik-icon material-icons-round puik-button__left-icon" style="font-size: 1.25rem;">
-            keyboard_arrow_left
-          </div>
-
-        </button>
-        <ul class="puik-pagination__pager">
-          <li class="puik-pagination__pager-item">
-            <button class="puik-button puik-button--text puik-button--md puik-pagination__pager-button--active puik-pagination__button puik-pagination__pager-button" aria-current="true" aria-label="Go to page 1">
-              1
-            </button>
-          </li>
-          <li class="puik-pagination__pager-item" aria-hidden="true">
-            <span class="puik-pagination__pager-separator"> … </span>
-          </li>
-          <li class="puik-pagination__pager-item">
-            <button class="puik-button puik-button--text puik-button--md puik-pagination__button puik-pagination__pager-button" aria-label="Go to page 2" aria-current="false">
-              10
-            </button>
-          </li>
-          <li class="puik-pagination__pager-item">
-            <button class="puik-button puik-button--text puik-button--md puik-pagination__button puik-pagination__pager-button" aria-label="Go to page 3" aria-current="false">
-              11
-            </button>
-          </li>
-          <li class="puik-pagination__pager-item">
-            <button class="puik-button puik-button--text puik-button--md puik-pagination__button puik-pagination__pager-button" aria-label="Go to page 3" aria-current="false">
-              12
-            </button>
-          </li>
-          <li class="puik-pagination__pager-item">
-            <button class="puik-button puik-button--text puik-button--md puik-pagination__button puik-pagination__pager-button" aria-label="Go to page 4" aria-current="false">
-              13
-            </button>
-          </li>
-          <li class="puik-pagination__pager-item">
-            <button class="puik-button puik-button--text puik-button--md puik-pagination__button puik-pagination__pager-button" aria-label="Go to page 5" aria-current="false">
-              14
-            </button>
-          </li>
-          <li class="puik-pagination__pager-item" aria-hidden="true">
-            <span class="puik-pagination__pager-separator"> … </span>
-          </li>
-          <li class="puik-pagination__pager-item">
-            <button class="puik-button puik-button--text puik-button--md puik-pagination__button puik-pagination__pager-button" aria-current="false" aria-label="Go to page 25">
-              25
-            </button>
-          </li>
-        </ul>
-        <button class="puik-button puik-button--tertiary puik-button--md puik-pagination__button puik-pagination__next-button" aria-label="Next page">
-          <div class="puik-icon material-icons-round puik-button__right-icon" style="font-size: 1.25rem;">
-            keyboard_arrow_right
-          </div>
-        </button>
-      </div>
+        <span class="puik-pagination__label">150 result(s)</span>
+        <div class="puik-pagination__content">
+          <button class="puik-button puik-button--secondary puik-button--md puik-button--disabled puik-button--no-wrap puik-pagination__previous-button puik-pagination__button" aria-label="Previous page" disabled="">
+              <div class="puik-icon puik-button__left-icon" style="font-size: 1.25rem;">keyboard_arrow_left</div>
+          </button>
+          <ul class="puik-pagination__pager">
+              <li class="puik-pagination__pager-item">
+                <button class="puik-button puik-button--secondary puik-button--md puik-button--no-wrap puik-pagination__button puik-pagination__pager-button" aria-current="true" aria-label="Go to page 1">
+                    1 
+                </button>
+              </li>
+              <li class="puik-pagination__pager-item">
+                <button class="puik-button puik-button--text puik-button--md puik-button--no-wrap puik-pagination__button puik-pagination__pager-button" aria-label="Go to page 2" aria-current="false">
+                    2
+                </button>
+              </li>
+              <li class="puik-pagination__pager-item">
+                <button class="puik-button puik-button--text puik-button--md puik-button--no-wrap puik-pagination__button puik-pagination__pager-button" aria-label="Go to page 3" aria-current="false">
+                    3
+                </button>
+              </li>
+              <li class="puik-pagination__pager-item">
+                <button class="puik-button puik-button--text puik-button--md puik-button--no-wrap puik-pagination__button puik-pagination__pager-button" aria-label="Go to page 4" aria-current="false">
+                    4
+                </button>
+              </li>
+              <li class="puik-pagination__pager-item">
+                <button class="puik-button puik-button--text puik-button--md puik-button--no-wrap puik-pagination__button puik-pagination__pager-button" aria-label="Go to page 5" aria-current="false">
+                    5
+                </button>
+              </li>
+              <li class="puik-pagination__pager-item" aria-hidden="true"><span class="puik-pagination__pager-separator"> … </span></li>
+              <li class="puik-pagination__pager-item">
+                <button class="puik-button puik-button--text puik-button--md puik-button--no-wrap puik-pagination__button puik-pagination__pager-button" aria-current="false" aria-label="Go to page 30">
+                    30
+                </button>
+              </li>
+          </ul>
+          <button class="puik-button puik-button--secondary puik-button--md puik-button--no-wrap puik-pagination__button puik-pagination__next-button" aria-label="Next page">
+              <div class="puik-icon puik-button__right-icon" style="font-size: 1.25rem;">keyboard_arrow_right</div>
+          </button>
+        </div>
     </div>
   </nav>
         `,
@@ -216,28 +219,19 @@ export const Small: StoryObj = {
   <puik-pagination
     v-model:page="page"
     variant="small"
-    :total-item="500"
-    :item-count="25"
-    :items-per-page="20"
+    :total-item="150"
   ></puik-pagination>
 
   <!--HTML/CSS Snippet-->
   <nav class="puik-pagination puik-pagination--small" role="navigation" aria-label="Pagination navigation">
     <div class="puik-pagination__content">
-      <span class="puik-pagination__label">Page 1 to 25</span>
-      <button
-        class="puik-button puik-button--tertiary puik-button--md puik-button--disabled puik-pagination__previous-button puik-pagination__button" disabled aria-label="Previous page">
-        <div class="puik-icon material-icons-round puik-button__left-icon" style="font-size: 1.25rem;">
-          keyboard_arrow_left
-        </div>
-        </button
-      >
-
-      <button class="puik-button puik-button--tertiary puik-button--md puik-pagination__button puik-pagination__next-button" aria-label="Next page">
-        <div class="puik-icon material-icons-round puik-button__right-icon" style="font-size: 1.25rem;">
-          keyboard_arrow_right
-        </div>
-      </button>
+        <span class="puik-pagination__label">Page 1 to 30</span>
+        <button class="puik-button puik-button--secondary puik-button--md puik-button--disabled puik-button--no-wrap puik-pagination__previous-button puik-pagination__button" disabled="" aria-label="Previous page">
+          <div class="puik-icon puik-button__left-icon" style="font-size: 1.25rem;">keyboard_arrow_left</div>
+        </button>
+        <button class="puik-button puik-button--secondary puik-button--md puik-button--no-wrap puik-pagination__button puik-pagination__next-button" aria-label="Next page">
+          <div class="puik-icon puik-button__right-icon" style="font-size: 1.25rem;">keyboard_arrow_right</div>
+        </button>
     </div>
   </nav>
         `,
@@ -262,71 +256,54 @@ export const Medium: StoryObj = {
   <puik-pagination
     v-model:page="page"
     variant="medium"
-    :total-item="500"
-    :item-count="25"
-    :items-per-page="20"
+    :total-item="150"
   ></puik-pagination>
 
   <!--HTML/CSS Snippet-->
   <nav class="puik-pagination puik-pagination--medium" role="navigation" aria-label="Pagination navigation">
     <div class="puik-pagination__content">
-      <span class="puik-pagination__label">500 results</span>
-      <div class="puik-pagination__content">
-        <button class="puik-button puik-button--tertiary puik-button--md puik-button--disabled puik-pagination__previous-button puik-pagination__button" disabled aria-label="Previous page">
-          <div class="puik-icon material-icons-round puik-button__left-icon" style="font-size: 1.25rem;">
-            keyboard_arrow_left
-          </div>
-
-        </button>
-        <ul class="puik-pagination__pager">
-          <li class="puik-pagination__pager-item">
-            <button class="puik-button puik-button--text puik-button--md puik-pagination__pager-button--active puik-pagination__button puik-pagination__pager-button" aria-current="true" aria-label="Go to page 1">
-              1
-            </button>
-          </li>
-          <li class="puik-pagination__pager-item" aria-hidden="true">
-            <span class="puik-pagination__pager-separator"> … </span>
-          </li>
-          <li class="puik-pagination__pager-item">
-            <button class="puik-button puik-button--text puik-button--md puik-pagination__button puik-pagination__pager-button" aria-label="Go to page 2" aria-current="false">
-              10
-            </button>
-          </li>
-          <li class="puik-pagination__pager-item">
-            <button class="puik-button puik-button--text puik-button--md puik-pagination__button puik-pagination__pager-button" aria-label="Go to page 3" aria-current="false">
-              11
-            </button>
-          </li>
-          <li class="puik-pagination__pager-item">
-            <button class="puik-button puik-button--text puik-button--md puik-pagination__button puik-pagination__pager-button" aria-label="Go to page 3" aria-current="false">
-              12
-            </button>
-          </li>
-          <li class="puik-pagination__pager-item">
-            <button class="puik-button puik-button--text puik-button--md puik-pagination__button puik-pagination__pager-button" aria-label="Go to page 4" aria-current="false">
-              13
-            </button>
-          </li>
-          <li class="puik-pagination__pager-item">
-            <button class="puik-button puik-button--text puik-button--md puik-pagination__button puik-pagination__pager-button" aria-label="Go to page 5" aria-current="false">
-              14
-            </button>
-          </li>
-          <li class="puik-pagination__pager-item" aria-hidden="true">
-            <span class="puik-pagination__pager-separator"> … </span>
-          </li>
-          <li class="puik-pagination__pager-item">
-            <button class="puik-button puik-button--text puik-button--md puik-pagination__button puik-pagination__pager-button" aria-current="false" aria-label="Go to page 25">
-              25
-            </button>
-          </li>
-        </ul>
-        <button class="puik-button puik-button--tertiary puik-button--md puik-pagination__button puik-pagination__next-button" aria-label="Next page">
-          <div class="puik-icon material-icons-round puik-button__right-icon" style="font-size: 1.25rem;">
-            keyboard_arrow_right
-          </div>
-        </button>
-      </div>
+        <span class="puik-pagination__label">150 result(s)</span>
+        <div class="puik-pagination__content">
+          <button class="puik-button puik-button--secondary puik-button--md puik-button--disabled puik-button--no-wrap puik-pagination__previous-button puik-pagination__button" aria-label="Previous page" disabled="">
+              <div class="puik-icon puik-button__left-icon" style="font-size: 1.25rem;">keyboard_arrow_left</div>
+          </button>
+          <ul class="puik-pagination__pager">
+              <li class="puik-pagination__pager-item">
+                <button class="puik-button puik-button--secondary puik-button--md puik-button--no-wrap puik-pagination__button puik-pagination__pager-button" aria-current="true" aria-label="Go to page 1">
+                    1 
+                </button>
+              </li>
+              <li class="puik-pagination__pager-item">
+                <button class="puik-button puik-button--text puik-button--md puik-button--no-wrap puik-pagination__button puik-pagination__pager-button" aria-label="Go to page 2" aria-current="false">
+                    2
+                </button>
+              </li>
+              <li class="puik-pagination__pager-item">
+                <button class="puik-button puik-button--text puik-button--md puik-button--no-wrap puik-pagination__button puik-pagination__pager-button" aria-label="Go to page 3" aria-current="false">
+                    3
+                </button>
+              </li>
+              <li class="puik-pagination__pager-item">
+                <button class="puik-button puik-button--text puik-button--md puik-button--no-wrap puik-pagination__button puik-pagination__pager-button" aria-label="Go to page 4" aria-current="false">
+                    4
+                </button>
+              </li>
+              <li class="puik-pagination__pager-item">
+                <button class="puik-button puik-button--text puik-button--md puik-button--no-wrap puik-pagination__button puik-pagination__pager-button" aria-label="Go to page 5" aria-current="false">
+                    5
+                </button>
+              </li>
+              <li class="puik-pagination__pager-item" aria-hidden="true"><span class="puik-pagination__pager-separator"> … </span></li>
+              <li class="puik-pagination__pager-item">
+                <button class="puik-button puik-button--text puik-button--md puik-button--no-wrap puik-pagination__button puik-pagination__pager-button" aria-current="false" aria-label="Go to page 30">
+                    30
+                </button>
+              </li>
+          </ul>
+          <button class="puik-button puik-button--secondary puik-button--md puik-button--no-wrap puik-pagination__button puik-pagination__next-button" aria-label="Next page">
+              <div class="puik-icon puik-button__right-icon" style="font-size: 1.25rem;">keyboard_arrow_right</div>
+          </button>
+        </div>
     </div>
   </nav>
         `,
@@ -340,7 +317,8 @@ export const Large: StoryObj = {
   render: Template,
 
   args: {
-    variant: 'large'
+    variant: 'large',
+    totalItem: 150
   },
 
   parameters: {
@@ -358,79 +336,140 @@ export const Large: StoryObj = {
   <!--HTML/CSS Snippet-->
   <nav class="puik-pagination puik-pagination--large" role="navigation" aria-label="Pagination navigation">
     <div class="puik-pagination__content">
-      <span class="puik-pagination__label">150 results</span>
+      <span class="puik-pagination__label">150 result(s)</span>
       <div class="puik-pagination__content">
-        <button class="puik-button puik-button--tertiary puik-button--md puik-button--disabled puik-pagination__previous-button puik-pagination__button" aria-label="Previous page">
-          <div class="puik-icon material-icons-round puik-button__left-icon" style="font-size: 1.25rem;">keyboard_arrow_left</div>
+        <button class="puik-button puik-button--tertiary puik-button--md puik-button--disabled puik-button--no-wrap puik-pagination__previous-button puik-pagination__button" aria-label="Previous page" disabled="">
+          <div class="puik-icon puik-button__left-icon" style="font-size: 1.25rem;">keyboard_arrow_left</div>
           <span class="puik-pagination__previous-button-text">Previous page</span>
         </button>
         <div class="puik-pagination__jumper">
-          <input type="hidden" value="1" style="position: fixed; height: 0px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;">
-          <div class="puik-select__wrapper puik-select puik-pagination__select" aria-label="Select page">
-            <button id="page-selector-id" type="button" aria-haspopup="listbox" aria-expanded="false" class="puik-select__button" aria-controls="page-selector-content-id">
-              <input class="puik-select__selected" type="text">
-              <div class="puik-icon material-icons-round puik-select__icon" style="font-size: 1.25rem;">unfold_more</div>
+          <div class="puik-select__wrapper puik-select puik-pagination__select" aria-label="Select page" data-headlessui-state="">
+            <button id="headlessui-listbox-button-6552" type="button" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state="" class="puik-select__button" aria-controls="headlessui-listbox-options-6553">
+              <input class="puik-select__selected" tabindex="-1" type="text">
+              <div class="puik-icon puik-select__icon" style="font-size: 1.25rem;">unfold_more</div>
             </button>
-            <div aria-orientation="vertical" id="page-selector-content-id" role="listbox" tabindex="0" class="puik-select__options" aria-labelledby="page-selector-id" style="z-index: 1000; display: none;">
+            <div id="headlessui-listbox-options-6553" aria-orientation="vertical" role="listbox" tabindex="0" data-headlessui-state="" class="puik-select__options puik-select__options--full-width" aria-labelledby="headlessui-listbox-button-6552" style="z-index: 1000; display: none;">
+              
               <ul class="puik-select__options-list">
-                <li class="puik-option puik-option--selected" role="option" aria-selected="false">
-                  <span class="puik-option__label">1</span>
-                  <div class="puik-icon material-icons-round puik-option__selected-icon" style="font-size: 1.25rem;">checked</div>
+                <li class="puik-option puik-option--selected" id="headlessui-listbox-option-6554" role="option" tabindex="-1" aria-selected="false" data-headlessui-state="">
+                  1
+                  <div class="puik-icon puik-option__selected-icon" style="font-size: 1.25rem;">checked</div>
+                </li>
+                <li class="puik-option" id="headlessui-listbox-option-6555" role="option" tabindex="-1" aria-selected="false" data-headlessui-state="">
+                  2
+                </li>
+                <li class="puik-option" id="headlessui-listbox-option-6556" role="option" tabindex="-1" aria-selected="false" data-headlessui-state="">
+                  3
+                </li>
+                <li class="puik-option" id="headlessui-listbox-option-6557" role="option" tabindex="-1" aria-selected="false" data-headlessui-state="">
+                  4
+                </li>
+                <li class="puik-option" id="headlessui-listbox-option-6558" role="option" tabindex="-1" aria-selected="false" data-headlessui-state="">
+                  5
+                </li>
+                <li class="puik-option" id="headlessui-listbox-option-6559" role="option" tabindex="-1" aria-selected="false" data-headlessui-state="">
+                  6
+                </li>
+                <li class="puik-option" id="headlessui-listbox-option-6560" role="option" tabindex="-1" aria-selected="false" data-headlessui-state="">
+                  7
                 </li>
-                <li class="puik-option" role="option" aria-selected="false">
-                  <span class="puik-option__label">2</span>
+                <li class="puik-option" id="headlessui-listbox-option-6561" role="option" tabindex="-1" aria-selected="false" data-headlessui-state="">
+                  8
                 </li>
-                <li class="puik-option" role="option" aria-selected="false">
-                  <span class="puik-option__label">3</span>
+                <li class="puik-option" id="headlessui-listbox-option-6562" role="option" tabindex="-1" aria-selected="false" data-headlessui-state="">
+                  9
                 </li>
-                <li class="puik-option" role="option" aria-selected="false">
-                  <span class="puik-option__label">4</span>
+                <li class="puik-option" id="headlessui-listbox-option-6563" role="option" tabindex="-1" aria-selected="false" data-headlessui-state="">
+                  10
                 </li>
-                <li class="puik-option" role="option" aria-selected="false">
-                  <span class="puik-option__label">5</span>
+                <li class="puik-option" id="headlessui-listbox-option-6564" role="option" tabindex="-1" aria-selected="false" data-headlessui-state="">
+                  11
                 </li>
-                <li class="puik-option" role="option" aria-selected="false">
-                  <span class="puik-option__label">6</span>
+                <li class="puik-option" id="headlessui-listbox-option-6565" role="option" tabindex="-1" aria-selected="false" data-headlessui-state="">
+                  12
                 </li>
-                <li class="puik-option" role="option" aria-selected="false">
-                  <span class="puik-option__label">7</span>
+                <li class="puik-option" id="headlessui-listbox-option-6566" role="option" tabindex="-1" aria-selected="false" data-headlessui-state="">
+                  13
                 </li>
-                <li class="puik-option" role="option" aria-selected="false">
-                  <span class="puik-option__label">8</span>
+                <li class="puik-option" id="headlessui-listbox-option-6567" role="option" tabindex="-1" aria-selected="false" data-headlessui-state="">
+                  14
                 </li>
-                <li class="puik-option" role="option" aria-selected="false">
-                  <span class="puik-option__label">9</span>
+                <li class="puik-option" id="headlessui-listbox-option-6568" role="option" tabindex="-1" aria-selected="false" data-headlessui-state="">
+                  15
                 </li>
-                <li class="puik-option" role="option" aria-selected="false">
-                  <span class="puik-option__label">10</span>
+                <li class="puik-option" id="headlessui-listbox-option-6569" role="option" tabindex="-1" aria-selected="false" data-headlessui-state="">
+                  16
+                </li>
+                <li class="puik-option" id="headlessui-listbox-option-6570" role="option" tabindex="-1" aria-selected="false" data-headlessui-state="">
+                  17
+                </li>
+                <li class="puik-option" id="headlessui-listbox-option-6571" role="option" tabindex="-1" aria-selected="false" data-headlessui-state="">
+                  18
+                </li>
+                <li class="puik-option" id="headlessui-listbox-option-6572" role="option" tabindex="-1" aria-selected="false" data-headlessui-state="">
+                  19
+                </li>
+                <li class="puik-option" id="headlessui-listbox-option-6573" role="option" tabindex="-1" aria-selected="false" data-headlessui-state="">
+                  20
+                </li>
+                <li class="puik-option" id="headlessui-listbox-option-6574" role="option" tabindex="-1" aria-selected="false" data-headlessui-state="">
+                  21
+                </li>
+                <li class="puik-option" id="headlessui-listbox-option-6575" role="option" tabindex="-1" aria-selected="false" data-headlessui-state="">
+                  22
+                </li>
+                <li class="puik-option" id="headlessui-listbox-option-6576" role="option" tabindex="-1" aria-selected="false" data-headlessui-state="">
+                  23
+                </li>
+                <li class="puik-option" id="headlessui-listbox-option-6577" role="option" tabindex="-1" aria-selected="false" data-headlessui-state="">
+                  24
+                </li>
+                <li class="puik-option" id="headlessui-listbox-option-6578" role="option" tabindex="-1" aria-selected="false" data-headlessui-state="">
+                  25
+                </li>
+                <li class="puik-option" id="headlessui-listbox-option-6579" role="option" tabindex="-1" aria-selected="false" data-headlessui-state="">
+                  26
+                </li>
+                <li class="puik-option" id="headlessui-listbox-option-6580" role="option" tabindex="-1" aria-selected="false" data-headlessui-state="">
+                  27
+                </li>
+                <li class="puik-option" id="headlessui-listbox-option-6581" role="option" tabindex="-1" aria-selected="false" data-headlessui-state="">
+                  28
+                </li>
+                <li class="puik-option" id="headlessui-listbox-option-6582" role="option" tabindex="-1" aria-selected="false" data-headlessui-state="">
+                  29
+                </li>
+                <li class="puik-option" id="headlessui-listbox-option-6583" role="option" tabindex="-1" aria-selected="false" data-headlessui-state="">
+                  30
                 </li>
               </ul>
             </div>
+            
           </div>
-          <span class="puik-pagination__jumper-description">To 10 pages</span>
+          <span class="puik-pagination__jumper-description">to 30 page(s)</span>
         </div>
-        <button class="puik-button puik-button--tertiary puik-button--md puik-pagination__button puik-pagination__next-button" aria-label="Next page">
+        <button class="puik-button puik-button--tertiary puik-button--md puik-button--no-wrap puik-pagination__button puik-pagination__next-button" aria-label="Next page">
           <span class="puik-pagination__next-button-text">Next page</span>
-          <div class="puik-icon material-icons-round puik-button__right-icon" style="font-size: 1.25rem;">keyboard_arrow_right</div>
+          <div class="puik-icon puik-button__right-icon" style="font-size: 1.25rem;">keyboard_arrow_right</div>
         </button>
       </div>
-      <input type="hidden" value="15" style="position: fixed; height: 0px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;">
-      <div class="puik-select__wrapper puik-select puik-pagination__items-per-page-select">
-        <button id="items-per-page-selector-id" type="button" aria-haspopup="listbox" aria-expanded="false" class="puik-select__button" aria-controls="items-per-page-selector-content-id">
-          <input class="puik-select__selected" type="text">
-          <div class="puik-icon material-icons-round puik-select__icon" style="font-size: 1.25rem;">unfold_more</div>
+      <span class="puik-pagination__items-per-page-label">item(s) per page</span>
+      <div class="puik-select__wrapper puik-select puik-pagination__items-per-page-select" data-headlessui-state="">
+        <button id="headlessui-listbox-button-6538" type="button" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state="" class="puik-select__button" aria-controls="headlessui-listbox-options-6539">
+          <input class="puik-select__selected" tabindex="-1" type="text">
+          <div class="puik-icon puik-select__icon" style="font-size: 1.25rem;">unfold_more</div>
         </button>
-        <div aria-orientation="vertical" id="items-per-page-selector-content-id" role="listbox" tabindex="0" class="puik-select__options" aria-labelledby="items-per-page-selector-id" style="z-index: 1000; display: none;">
+        <div id="headlessui-listbox-options-6539" aria-orientation="vertical" role="listbox" tabindex="0" data-headlessui-state="" class="puik-select__options puik-select__options--full-width" aria-labelledby="headlessui-listbox-button-6538" style="z-index: 1000; display: none;">
           <ul class="puik-select__options-list">
-            <li class="puik-option puik-pagination__items-per-page-select__option" role="option" aria-selected="false">
-              <span class="puik-option__label">5</span>
+            <li class="puik-option puik-option--selected puik-pagination__items-per-page-select__option" id="headlessui-listbox-option-6540" role="option" tabindex="-1" aria-selected="false" data-headlessui-state="">
+              5
+              <div class="puik-icon puik-option__selected-icon" style="font-size: 1.25rem;">checked</div>
             </li>
-            <li class="puik-option puik-pagination__items-per-page-select__option" role="option" aria-selected="false">
-              <span class="puik-option__label">10</span>
+            <li class="puik-option puik-pagination__items-per-page-select__option" id="headlessui-listbox-option-6541" role="option" tabindex="-1" aria-selected="false" data-headlessui-state="">
+              10
             </li>
-            <li class="puik-option puik-option--selected puik-pagination__items-per-page-select__option" role="option" aria-selected="false">
-              <span class="puik-option__label">15</span>
-              <div class="puik-icon material-icons-round puik-option__selected-icon" style="font-size: 1.25rem;">checked</div>
+            <li class="puik-option puik-pagination__items-per-page-select__option" id="headlessui-listbox-option-6542" role="option" tabindex="-1" aria-selected="false" data-headlessui-state="">
+              15
             </li>
           </ul>
         </div>
@@ -459,21 +498,19 @@ export const Mobile: StoryObj = {
   <puik-pagination
     v-model:page="page"
     variant="mobile"
-    :total-item="500"
-    :item-count="100"
-    :items-per-page="50"
+    :total-item="150"
   ></puik-pagination>
 
   <!--HTML/CSS Snippet-->
   <nav class="puik-pagination puik-pagination--mobile" role="navigation" aria-label="Pagination navigation">
     <div class="puik-pagination__content">
-      <button class="puik-button puik-button--tertiary puik-button--md puik-button--disabled puik-pagination__previous-button puik-pagination__button" aria-label="Previous page">
-        <div class="puik-icon material-icons-round puik-button__left-icon" style="font-size: 1.25rem;">keyboard_arrow_left</div>
-      </button>
-      <span class="puik-pagination__label">Page 1 to 25</span>
-      <button class="puik-button puik-button--tertiary puik-button--md puik-pagination__button puik-pagination__next-button" aria-label="Next page">
-        <div class="puik-icon material-icons-round puik-button__right-icon" style="font-size: 1.25rem;">keyboard_arrow_right</div>
-      </button>
+        <button class="puik-button puik-button--secondary puik-button--md puik-button--disabled puik-button--no-wrap puik-pagination__previous-button puik-pagination__button" disabled="" aria-label="Previous page">
+          <div class="puik-icon puik-button__left-icon" style="font-size: 1.25rem;">keyboard_arrow_left</div>
+        </button>
+        <span class="puik-pagination__label">Page 1 to 30</span>
+        <button class="puik-button puik-button--secondary puik-button--md puik-button--no-wrap puik-pagination__button puik-pagination__next-button" aria-label="Next page">
+          <div class="puik-icon puik-button__right-icon" style="font-size: 1.25rem;">keyboard_arrow_right</div>
+        </button>
     </div>
   </nav>
         `,
@@ -498,16 +535,14 @@ export const Loader: StoryObj = {
   <puik-pagination
     v-model:page="page"
     variant="mobile"
-    :total-item="500"
-    :item-count="100"
-    :items-per-page="50"
+    :total-item="150"
   ></puik-pagination>
 
   <!--HTML/CSS Snippet-->
   <nav class="puik-pagination puik-pagination--loader" role="navigation" aria-label="Pagination navigation">
-    <span class="puik-pagination__label">You saw 25 products out of 500.</span>
-    <button class="puik-button puik-button--tertiary puik-button--md puik-button--fluid puik-pagination__button puik-pagination__load-more-button">
-      Load more
+    <span class="puik-pagination__label">You saw 5 product(s) out of 150.</span>
+    <button class="puik-button puik-button--tertiary puik-button--md puik-button--fluid puik-button--no-wrap puik-pagination__button puik-pagination__load-more-button">
+        Load more
     </button>
   </nav>
         `,

From f442fdd4226038ae97ef02c2c79017302c2a9c9e Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Thu, 20 Jun 2024 18:48:02 +0200
Subject: [PATCH 4/4] test: tests new props displayItemsPerPage and
 displayResults

---
 .../pagination/test/pagination.spec.ts        | 42 +++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/packages/components/pagination/test/pagination.spec.ts b/packages/components/pagination/test/pagination.spec.ts
index 2fc77b9e..558e9b5b 100644
--- a/packages/components/pagination/test/pagination.spec.ts
+++ b/packages/components/pagination/test/pagination.spec.ts
@@ -313,4 +313,46 @@ describe('Pagination tests', () => {
       'loadMoreButton-test'
     );
   });
+
+  it('should display items per page select when displayItemsPerPage is true for large pagination variant', async () => {
+    factory({
+      ...propsData,
+      displayItemsPerPage: true,
+      variant: 'large'
+    });
+    await nextTick();
+    const itemsPerPageSelect = findItemsPerPageSelect();
+    expect(itemsPerPageSelect.exists()).toBe(true);
+  });
+
+  it('should not display items per page select when displayItemsPerPage is false for large pagination variant', async () => {
+    factory({
+      ...propsData,
+      displayItemsPerPage: false,
+      variant: 'large'
+    });
+    await nextTick();
+    const itemsPerPageSelect = findItemsPerPageSelect();
+    expect(itemsPerPageSelect.exists()).toBe(false);
+  });
+
+  it('should display results label when displayResults is true', async () => {
+    factory({
+      ...propsData,
+      displayResults: true
+    });
+    await nextTick();
+    const label = findLabel();
+    expect(label.exists()).toBe(true);
+  });
+
+  it('should not display results label when displayResults is false', async () => {
+    factory({
+      ...propsData,
+      displayResults: false
+    });
+    await nextTick();
+    const label = findLabel();
+    expect(label.exists()).toBe(false);
+  });
 });