Merge pull request #394 from PrestaShopCorp/feat/384-select-global-re…

…factoring

Feat/384 select global refactoring

packages/components/group-options/style/css.ts

@@ -0,0 +1,2 @@
+import '@prestashopcorp/puik-components/base/style/css';
+import '@prestashopcorp/puik-theme/puik-group-options.css';

packages/components/group-options/style/index.ts

@@ -0,0 +1,2 @@
+import '@prestashopcorp/puik-components/base/style';
+import '@prestashopcorp/puik-theme/src/puik-group-options.scss';

packages/components/option/style/css.ts

@@ -1,3 +1,4 @@
 import '@prestashopcorp/puik-components/base/style/css';
 import '@prestashopcorp/puik-theme/puik-option.css';
+import '@prestashopcorp/puik-theme/puik-checkbox.css';
 import '@prestashopcorp/puik-theme/puik-icon.css';

packages/components/package.json

@@ -13,6 +13,7 @@
     "@headlessui/vue": "^1.7.22",
     "@popperjs/core": "^2.11.8",
     "@prestashopcorp/puik-theme": "workspace:*",
+    "@vueuse/components": "^11.1.0",
     "@vueuse/core": "^10.9.0",
     "radix-vue": "^1.7.4",
     "sortablejs": "^1.15.2",

packages/components/pagination/src/pagination-large.ts

@@ -1,6 +1,7 @@
 import type PaginationLarge from './pagination-large.vue';
 
 export interface PaginationLargeProps {
+  id: string
   page: number
   itemsPerPage: number
   itemsPerPageOptions: number[]

packages/components/pagination/src/pagination-large.vue

@@ -26,29 +26,34 @@
 
     <div class="puik-pagination__jumper">
       <puik-select
+        :id="`${props.id}__select-jumper`"
         :key="page"
         :model-value="page"
         :disabled="disabled"
         :data-test="
           dataTest != undefined ? `pageSelector-${dataTest}` : undefined
         "
         class="puik-pagination__select"
+        :open="openJumper"
         @update:model-value="emit('update:page', $event)"
       >
         <puik-option
-          v-for="index in maxPage"
-          :key="`puik-pagination__page-selector__option-${index}`"
-          :value="index"
+          v-for="pageNb in maxPage"
+          :key="`puik-pagination__page-selector__option-${pageNb}`"
+          :label="pageNb"
+          :value="pageNb"
+          :is-selected="page === pageNb"
           :data-test="
             dataTest != undefined
-              ? `pageSelectorOption-${dataTest}-${index}`
+              ? `pageSelectorOption-${dataTest}-${pageNb}`
               : undefined
           "
+          @select="(payload) => emit('update:page', payload.value)"
+          @open="(state) => openJumper = state"
         >
-          {{ index }}
+          {{ pageNb }}
         </puik-option>
       </puik-select>
-
       <span class="puik-pagination__jumper-description">
         {{ t('puik.pagination.large.jumperDescription', { maxPage }) }}
       </span>
@@ -76,14 +81,22 @@
   </span>
   <puik-select
     v-if="displayItemsPerPage"
+    :id="`${props.id}__select-items-per-page`"
+    :key="currentItemsPerPage"
     v-model="currentItemsPerPage"
     class="puik-pagination__items-per-page-select"
+    :open="openItemPerPages"
+    @update:model-value="emit('update:itemsPerPage', currentItemsPerPage)"
   >
     <puik-option
       v-for="item in itemsPerPageOptions"
       :key="`puik-pagination__items-per-page-select__option-${item}`"
+      :label="item"
       :value="item"
+      :is-selected="currentItemsPerPage === item"
       class="puik-pagination__items-per-page-select__option"
+      @select="(payload) => currentItemsPerPage = payload.value"
+      @open="(state) => openItemPerPages = state"
     >
       {{ item }}
     </puik-option>
@@ -96,6 +109,7 @@ import { PuikSelect, PuikOption } from '@prestashopcorp/puik-components/select';
 import { PuikButton } from '@prestashopcorp/puik-components/button';
 import { useLocale } from '@prestashopcorp/puik-locale';
 import { type PaginationLargeProps } from './pagination-large';
+import { ref } from 'vue';
 defineOptions({
   name: 'PuikPaginationLarge'
 });
@@ -110,4 +124,7 @@ const emit = defineEmits<{
 const currentItemsPerPage = useVModel(props, 'itemsPerPage', emit);
 
 const { t } = useLocale();
+
+const openJumper = ref(false);
+const openItemPerPages = ref(false);
 </script>

packages/components/pagination/src/pagination-loader.ts

@@ -2,6 +2,7 @@ import type PaginationLoader from './pagination-loader.vue';
 
 export interface PaginationLoaderProps {
   modelValue?: number
+  id: string
   disabled?: boolean
   label?: string
   loaderButtonLabel?: string

packages/components/pagination/src/pagination-medium.ts

@@ -2,6 +2,7 @@ import type PaginationMedium from './pagination-medium.vue';
 
 export interface PaginationMediumProps {
   modelValue?: number
+  id: string
   disabled?: boolean
   totalItem: number
   maxPage: number

packages/components/pagination/src/pagination-mobile.ts

@@ -2,6 +2,7 @@ import type PaginationMobile from './pagination-mobile.vue';
 
 export interface PaginationMobileProps {
   modelValue?: number
+  id: string
   disabled?: boolean
   maxPage: number
   label?: string

packages/components/pagination/src/pagination-small.ts

@@ -2,6 +2,7 @@ import type PaginationSmall from './pagination-small.vue';
 
 export interface PaginationSmallProps {
   modelValue?: number
+  id: string
   disabled?: boolean
   maxPage: number
   label?: string

packages/components/pagination/src/pagination.ts

@@ -10,6 +10,7 @@ export enum PuikPaginationVariants {
 }
 
 export interface PaginationProps {
+  id?: string
   variant?: `${PuikPaginationVariants}`
   totalItem: number
   itemsPerPage?: number

packages/components/pagination/src/pagination.vue

@@ -1,5 +1,6 @@
 <template>
   <nav
+    :id="props.id"
     class="puik-pagination"
     :class="[`puik-pagination--${variant}`]"
     role="navigation"
@@ -8,6 +9,7 @@
   >
     <pagination-loader
       v-if="variant === PuikPaginationVariants.Loader"
+      :id="`${props.id}--loader`"
       v-model="currentPage"
       :data-test="dataTest"
       :disabled="loaderButtonDisabled"
@@ -21,13 +23,15 @@
     >
       <pagination-mobile
         v-if="variant === PuikPaginationVariants.Mobile"
+        :id="`${props.id}--mobile`"
         v-model="currentPage"
         v-bind="commonPaginationProps"
         :data-test="dataTest"
       />
 
       <pagination-small
         v-if="variant === PuikPaginationVariants.Small"
+        :id="`${props.id}--small`"
         v-model="currentPage"
         v-bind="commonPaginationProps"
         :data-test="dataTest"
@@ -36,6 +40,7 @@
 
       <pagination-medium
         v-if="variant === PuikPaginationVariants.Medium && !disabled"
+        :id="`${props.id}--medium`"
         v-model="currentPage"
         v-bind="commonPaginationProps"
         :data-test="dataTest"
@@ -45,6 +50,7 @@
 
       <pagination-large
         v-if="variant === PuikPaginationVariants.Large"
+        :id="`${props.id}--large`"
         v-model:page="currentPage"
         :data-test="dataTest"
         :display-items-per-page="displayItemsPerPage"
@@ -61,6 +67,7 @@
 
 <script setup lang="ts">
 import { computed, watch } from 'vue';
+import { generateId } from '@prestashopcorp/puik-utils';
 import { useLocale } from '@prestashopcorp/puik-locale';
 import { type PaginationProps, PuikPaginationVariants } from './pagination';
 
@@ -75,6 +82,7 @@ defineOptions({
 });
 
 const props = withDefaults(defineProps<PaginationProps>(), {
+  id: `puik-pagination-${generateId()}`,
   variant: PuikPaginationVariants.Medium,
   itemsPerPage: 5,
   itemsPerPageOptions: () => [5, 10, 15],

packages/components/pagination/stories/pagination.stories.ts

@@ -9,6 +9,19 @@ export default {
   title: 'Components/Pagination',
   component: PuikPagination,
   argTypes: {
+    id: {
+      control: 'text',
+      description:
+        'Sets the id HTML attribute of puik-pagination. If this prop is not configured, an id will be automatically generated using this pattern: puik-pagination-{randomNumber}',
+      table: {
+        defaultValue: {
+          summary: 'puik-pagination-{randomNumber}'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
     variant: {
       control: 'select',
       options: paginationVariants,

packages/components/pagination/test/pagination.spec.ts

@@ -31,7 +31,7 @@ describe('Pagination tests', () => {
 
   const findItemsPerPageSelect = () =>
     wrapper.find('.puik-pagination__items-per-page-select');
-  const findAllOptions = (select) => select.findAllComponents(PuikOption);
+  const findAllOptions = (select: any) => select.findAllComponents(PuikOption);
 
   const factory = (
     props: PaginationProps,
@@ -54,6 +54,14 @@ describe('Pagination tests', () => {
     expect(wrapper).toBeTruthy();
   });
 
+  it('as id prop value is "puik-pagination-id", id html attribute of puik-pagination should be "puik-pagination-id"', () => {
+    factory({
+      ...propsData,
+      id: 'puik-pagination-id'
+    });
+    expect(findPagination().attributes().id).toBe('puik-pagination-id');
+  });
+
   it('should display a medium pagination by default', () => {
     factory(propsData);
     expect(findPagination().classes()).toContain('puik-pagination--medium');
@@ -243,21 +251,6 @@ describe('Pagination tests', () => {
     expect(findNextButtonText().text()).toBe(nextText);
   });
 
-  it('should click page change active class and aria-current', async () => {
-    factory({ ...propsData, variant: PuikPaginationVariants.Large });
-
-    const findSelect = () => wrapper.find('.puik-pagination__select');
-    const findAllOptions = () => wrapper.findAllComponents(PuikOption);
-
-    // Click first pager button
-    await findSelect().trigger('click');
-    await findAllOptions()[5].trigger('click');
-    await nextTick();
-    expect(findPaginationComponent().emitted('update:page')?.[0]).toStrictEqual(
-      [5]
-    );
-  });
-
   it('should emit when selecting item per page', async () => {
     factory({ ...propsData, variant: PuikPaginationVariants.Large });
 

packages/components/progress-stepper/src/progress-stepper-step.vue

@@ -5,7 +5,7 @@
   >
     <puik-button
       :aria-current="isCurrentStep ? 'step' : undefined"
-      :aria-label="step"
+      :aria-label="`${step}`"
       :disabled="disabled"
       :left-icon="isCompleted ? 'check' : undefined"
       :variant="buttonVariant"

packages/components/select/index.ts

@@ -6,5 +6,5 @@ export default PuikSelect;
 
 export const PuikOption = Option;
 
-export * from './src/select';
 export * from './src/option';
+export * from './src/select';

packages/components/select/src/option.ts

@@ -1,16 +1,22 @@
+/* eslint-disable @typescript-eslint/member-delimiter-style */
 import '@prestashopcorp/puik-components/option/style/css';
 import type Option from './option.vue';
 
-export interface DefaultOption {
-  label: string | number
-  value: string | number | Record<string, any>
+export interface OptionType {
+  [key: string]: any
 }
-
 export interface OptionProps {
-  value: string | number | Record<string, any>
   label?: string | number
+  value?: string | number
   disabled?: boolean
+  isSelected?: boolean
+  multiSelect?: boolean
   dataTest?: string
 }
 
+export type OptionEmits = {
+  'open': [state: boolean],
+  'select': [payload: any]
+};
+
 export type OptionInstance = InstanceType<typeof Option>;