Merge branch 'bug/alert-incorrect-responsive-behavior' of github.com:…

…PrestaShopCorp/puik into bug/alert-incorrect-responsive-behavior

docs/stories/styles/Typography.stories.ts

@@ -41,10 +41,13 @@ export const BrandTitle = generateStory(`
 
 export const Body = generateStory(`
   <p class="puik-body-large-bold">.puik-body-large-bold</p>
+  <p class="puik-body-large-medium">.puik-body-large-medium</p>
   <p class="puik-body-large">.puik-body-large</p>
   <p class="puik-body-default-bold">.puik-body-default-bold</p>
+  <p class="puik-body-default-medium">.puik-body-default-medium</p>
   <p class="puik-body-default">.puik-body-default</p>
   <p class="puik-body-small-bold">.puik-body-small-bold</p>
+  <p class="puik-body-small-medium">.puik-body-small-medium</p>
   <p class="puik-body-small">.puik-body-small</p>
   <p class="puik-body-default-link">.puik-body-default-link</p>
 `)

packages/components/accordion/src/accordion.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     class="puik-accordion"
+    :data-test="dataTest"
     :class="{
       'puik-accordion--expanded': isExpanded,
       'puik-accordion--disabled': disabled,

packages/components/accordion/test/accordion.spec.ts

@@ -17,6 +17,8 @@ const factory = (template: string, options: MountingOptions<any> = {}) => {
 }
 
 export const getAccordion = (wrapper) => wrapper.findComponent(PuikAccordion)
+export const getAccordionContainer = (component) =>
+  component.find('.puik-accordion')
 export const getAccordionContent = (component) =>
   component.find('.puik-accordion__content')
 export const getAccordionHeader = (component) =>
@@ -153,7 +155,7 @@ describe('Accordion tests', () => {
     expect(getAccordionIcon(wrapper).text()).toBe(icon)
   })
 
-  it('should have data-test attribute on button, title, sub-title, icon', () => {
+  it('should have data-test attribute on accordion container div, button, title, sub-title, icon', () => {
     const template = `
       <puik-accordion-group>
         <puik-accordion name="accordion-1" icon="home" title="title" sub-title="sub-title" data-test="accordion">
@@ -164,6 +166,9 @@ describe('Accordion tests', () => {
     factory(template)
 
     const accordion = getAccordion(wrapper)
+    expect(getAccordionContainer(accordion).attributes('data-test')).toBe(
+      'accordion'
+    )
     expect(getAccordionHeader(accordion).attributes('data-test')).toBe(
       'button-accordion'
     )

packages/components/alert/src/alert.vue

@@ -6,6 +6,7 @@
       { 'puik-alert--no-borders': disableBorders },
     ]"
     :aria-live="ariaLive"
+    :data-test="dataTest"
   >
     <div class="puik-alert__container">
       <div class="puik-alert__content">

packages/components/alert/test/alert.spec.ts

@@ -81,14 +81,15 @@ describe('Alert tests', () => {
     expect(wrapper.emitted('close')).toBeTruthy()
   })
 
-  it('should have a data-test attribute on title, description button and close button', () => {
+  it('should have a data-test attribute on container div, title, description button and close button', () => {
     factory({
       title: faker.lorem.word(2),
       description: faker.lorem.sentence(60),
       buttonLabel: 'Button',
       isClosable: true,
       dataTest: 'alert',
     })
+    expect(findAlert().attributes('data-test')).toBe('alert')
     expect(findTitle().attributes('data-test')).toBe('title-alert')
     expect(findDesc().attributes('data-test')).toBe('description-alert')
     expect(findButton().attributes('data-test')).toBe('button-alert')

packages/components/avatar/src/avatar.vue

@@ -2,6 +2,7 @@
   <div
     :id="id"
     :class="`puik-avatar puik-avatar--${size} puik-avatar--${type} puik-avatar--${mode}`"
+    :data-test="dataTest"
   >
     <img
       v-if="src && type == PuikAvatarType.PHOTO"

packages/components/avatar/test/avatar.spec.ts

@@ -57,6 +57,14 @@ describe('Avatar tests', () => {
     expect(findImg().attributes().alt).toBe('alt-img')
   })
 
+  it('should have data-test attribute on container div of avatar', () => {
+    factory({
+      type: 'initials',
+      dataTest: 'example',
+    })
+    expect(findAvatar().attributes('data-test')).toBe('example')
+  })
+
   it('should have data-test attribute on initials wrapper', () => {
     factory({
       type: 'initials',

packages/components/checkbox/src/checkbox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="puik-checkbox">
+  <div class="puik-checkbox" :data-test="dataTest">
     <input
       :id="id"
       ref="checkboxInputRef"

packages/components/checkbox/test/checkbox.spec.ts

@@ -6,6 +6,7 @@ import type { MountingOptions, VueWrapper } from '@vue/test-utils'
 
 describe('Checkbox tests', () => {
   let wrapper: VueWrapper<any>
+  const findCheckbox = () => wrapper.find('.puik-checkbox')
   const findInput = () => wrapper.find('.puik-checkbox__input')
   const findLabel = () => wrapper.find('.puik-checkbox__label')
 
@@ -94,8 +95,9 @@ describe('Checkbox tests', () => {
     expect(wrapper.vm.checkboxInputRef.click).not.toHaveBeenCalled()
   })
 
-  it('shouold have a data-test attribute on the input and the label', () => {
+  it('should have a data-test attribute on the container div, the input and the label', () => {
     factory({ label: 'Label', modelValue: false, dataTest: 'test' })
+    expect(findCheckbox().attributes('data-test')).toBe('test')
     expect(findInput().attributes('data-test')).toBe('input-test')
     expect(findLabel().attributes('data-test')).toBe('label-test')
   })

packages/components/chip/src/chip.vue

@@ -9,14 +9,15 @@
     <PuikIcon v-if="icon && icon != ''" :icon="icon" class="puik-chip__icon" />
     <div class="puik-chip__content">
       <puik-tooltip
-        v-if="content?.length >= 30"
+        :key="content"
+        :is-disabled="!showTooltip"
         :position="(tooltipPosition as PuikTooltipPosition)"
         :description="content"
       >
-        <template #description>{{ content }}</template>
-        {{ content }}
+        <p ref="chipContentElem">
+          {{ content }}
+        </p>
       </puik-tooltip>
-      {{ content }}
     </div>
     <PuikIcon
       icon="close"
@@ -27,18 +28,30 @@
 </template>
 
 <script setup lang="ts">
+import { nextTick, ref, watch } from 'vue'
 import { PuikIcon } from '@puik/components/icon'
 import { PuikTooltip } from '@puik/components/tooltip'
+import { isEllipsisActive } from '@puik/utils'
 import { chipProps, type PuikChipSizeVariant } from './chip'
 import type { PuikTooltipPosition } from '@puik/components/tooltip'
 defineOptions({
   name: 'PuikChip',
 })
 
 const props = defineProps(chipProps)
+const chipContentElem = ref(null)
+const showTooltip = ref(false)
+
 const emit = defineEmits(['close'])
 
 const handleCloseEvent = () => {
   emit('close')
 }
+
+watch(chipContentElem, async () => {
+  await nextTick()
+  if (chipContentElem?.value) {
+    showTooltip.value = isEllipsisActive(chipContentElem.value)
+  }
+})
 </script>

packages/components/chip/test/chip.spec.ts

@@ -6,7 +6,7 @@ import type { MountingOptions, VueWrapper } from '@vue/test-utils'
 describe('Chip tests', () => {
   let wrapper: VueWrapper<any>
   const findChip = () => wrapper.find('.puik-chip')
-  const findChipContent = () => wrapper.find('.puik-chip__content')
+  const findChipContent = () => wrapper.find('.puik-chip__content p')
   const findCloseBtn = () => wrapper.find('.puik-chip__close')
   const findLeftIcon = () => wrapper.find('.puik-chip__icon')
 

packages/components/input/src/input.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="puik-input">
+  <div class="puik-input" :data-test="dataTest">
     <div class="puik-input__wrapper" :class="inputClasses">
       <div v-if="$slots.prepend" class="puik-input__prepend">
         <slot name="prepend"></slot>

packages/components/input/test/input.spec.ts

@@ -7,6 +7,7 @@ describe('Input tests', () => {
   let wrapper: VueWrapper<any>
 
   const findField = () => wrapper.find('.puik-input__field')
+  const findInput = () => wrapper.find('.puik-input')
   const findWrapper = () => wrapper.find('.puik-input__wrapper')
   const findHint = () => wrapper.find('.puik-input__hint__text')
   const findError = () => wrapper.find('.puik-input__hint__error')
@@ -185,7 +186,7 @@ describe('Input tests', () => {
     expect(findAppend().text()).toBe('$')
   })
 
-  it('should have a data-tes attribut for the input and the error message', () => {
+  it('should have a data-tes attribut for the container div, the input and the error message', () => {
     const error = 'This is an error message'
     factory(
       { modelValue: 'value', type: 'text', dataTest: 'test' },
@@ -195,6 +196,7 @@ describe('Input tests', () => {
         },
       }
     )
+    expect(findInput().attributes('data-test')).toBe('test')
     expect(findField().attributes('data-test')).toBe('input-test')
     expect(findErrorMessage().attributes('data-test')).toBe('error-test')
   })

packages/components/modal/src/modal.vue

@@ -3,6 +3,7 @@
     :open="isOpen"
     class="puik-modal"
     :class="[`puik-modal--${variant}`, `puik-modal--${size}`]"
+    :data-test="dataTest"
     @close="sendCloseModalEvent()"
   >
     <div class="puik-modal__dialogPanelContainer">

packages/components/modal/test/modal.spec.ts

@@ -233,7 +233,7 @@ describe('Modal tests', () => {
     expect(findHeader().exists()).toBeFalsy()
   })
 
-  it('should have a data-test attribute on title, mainButton, secondButton and closeButton', async () => {
+  it('should have a data-test attribute on container div, title, mainButton, secondButton and closeButton', async () => {
     await factory({
       title: 'Awesome title',
       mainButtonText: 'Awesome main',
@@ -242,6 +242,7 @@ describe('Modal tests', () => {
       hasCloseButton: true,
       dataTest: 'test',
     })
+    expect(findModal().attributes('data-test')).toBe('test')
     expect(findTitle().attributes('data-test')).toBe('title-test')
     expect(findMainButton().attributes('data-test')).toBe('mainButton-test')
     expect(findSecondaryButton().attributes('data-test')).toBe(

packages/components/pagination/src/pagination.vue

@@ -4,6 +4,7 @@
     :class="[`puik-pagination--${variant}`]"
     role="navigation"
     :aria-label="t('puik.pagination.ariaLabel')"
+    :data-test="dataTest"
   >
     <pagination-loader
       v-if="variant === PuikPaginationVariantEnum.loader"

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

@@ -297,7 +297,7 @@ describe('Pagination tests', () => {
     expect(options.length).toBe(2)
   })
 
-  it('should have a data-test attribute on nextButton, previousButton and label', () => {
+  it('should have a data-test attribute on container nav, nextButton, previousButton and label', () => {
     factory({
       ...propsData,
       variant: PuikPaginationVariantEnum.large,
@@ -307,6 +307,7 @@ describe('Pagination tests', () => {
     expect(findPreviousButton().attributes('data-test')).toBe(
       'previousButton-test'
     )
+    expect(findPagination().attributes('data-test')).toBe('test')
     expect(findNextButton().attributes('data-test')).toBe('nextButton-test')
     expect(findLabel().attributes('data-test')).toBe('label-test')
   })

packages/components/progress-bar/src/progress-bar.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="progress-bar__container">
+  <div class="progress-bar__container" :data-test="dataTest">
     <div
       :class="barClass"
       :style="{ width: `${percentage}%` }"
-      :data-test="dataTest"
+      :data-test="dataTest != undefined ? `bar-${dataTest}` : undefined"
       class="progress-bar__content"
     />
   </div>

packages/components/progress-bar/test/progress-bar.spec.ts

@@ -31,9 +31,11 @@ describe('ProgressBar tests', () => {
     )
   })
 
-  it('should have a data-test attribute', () => {
+  it('should have a data-test attribute on progressBar container and content', () => {
     factory({ ...defaultProps, dataTest: 'test' })
+    const progressBarContainer = wrapper.find('.progress-bar__container')
     const progressBarContent = wrapper.find('.progress-bar__content')
-    expect(progressBarContent.attributes('data-test')).toBe('test')
+    expect(progressBarContainer.attributes('data-test')).toBe('test')
+    expect(progressBarContent.attributes('data-test')).toBe('bar-test')
   })
 })

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="puik-progress-stepper-step">
+  <div class="puik-progress-stepper-step" :data-test="dataTest">
     <puik-button
       :aria-current="isCurrentStep ? 'step' : undefined"
       :aria-label="step"

packages/components/progress-stepper/test/progress-stepper-step.spec.ts

@@ -29,16 +29,20 @@ describe('ProgressStepperStep tests', () => {
   }
 
   const getStep = () => wrapper.findComponent(PuikProgressStepperStep)
+  const getProgressStepperStep = () =>
+    getStep().find('.puik-progress-stepper-step')
   const getButton = () => getStep().find('.puik-progress-stepper-step__button')
   const getText = () => getStep().find('.puik-progress-stepper-step__text')
   const getAdditionalText = () =>
     getStep().find('.puik-progress-stepper-step__additional-text')
 
-  it('should have a step with data-test on button, text and additionnalText', () => {
+  it('should have a step with data-test on container div, button, text and additionnalText', () => {
     factory()
+    const container = getProgressStepperStep()
     const button = getButton()
     const text = getText()
     const additionalText = getAdditionalText()
+    expect(container.attributes('data-test')).toBe('test')
     expect(button.attributes('data-test')).toBe('stepButton-test')
     expect(text.attributes('data-test')).toBe('text-test')
     expect(additionalText.attributes('data-test')).toBe('additionalText-test')

packages/components/radio/src/radio.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="puik-radio">
+  <div class="puik-radio" :data-test="dataTest">
     <input
       :id="id"
       ref="radioInputRef"

packages/components/radio/test/radio.spec.ts

@@ -7,6 +7,7 @@ import type { MountingOptions, VueWrapper } from '@vue/test-utils'
 
 describe('Radio tests', () => {
   let wrapper: VueWrapper<any>
+  const findInputContainer = () => wrapper.find('.puik-radio')
   const findInput = () => wrapper.find('.puik-radio__input')
   const findLabel = () => wrapper.find('.puik-radio__label')
 
@@ -84,10 +85,12 @@ describe('Radio tests', () => {
     expect(findLabel().text()).toContain('Custom label')
   })
 
-  it('should have a data-test attribute on label and input', () => {
+  it('should have a data-test attribute on container div, label and input', () => {
     factory({ label: 'Label', modelValue: false, dataTest: 'test' })
+    const container = findInputContainer()
     const label = findLabel()
     const input = findInput()
+    expect(container.attributes('data-test')).toBe('test')
     expect(label.attributes('data-test')).toBe('label-test')
     expect(input.attributes('data-test')).toBe('input-test')
   })

packages/components/sidebar/src/sidebar-group-item.vue

@@ -4,6 +4,7 @@
     :class="{
       'puik-sidebar-group-item--active': active,
     }"
+    :data-test="dataTest"
   >
     <puik-accordion
       v-if="isExpanded"

packages/components/sidebar/src/sidebar-item.vue

@@ -4,6 +4,7 @@
     v-slot="{ active: focused }"
     class="puik-sidebar-item"
     :class="{ 'puik-sidebar-item--active': active }"
+    :data-test="dataTest"
   >
     <puik-button
       :aria-label="title"

packages/components/sidebar/test/sidebar-group-item.spec.ts

@@ -16,6 +16,8 @@ const factory = (template: string, options: MountingOptions<any> = {}) => {
   })
 }
 
+const getSidebarGroupItemContainer = () =>
+  wrapper.find('.puik-sidebar-group-item')
 const getIcon = () => wrapper.find('.puik-sidebar-group-item .puik-icon')
 const getAccordion = () => wrapper.find('.puik-sidebar-group-item__accordion')
 const getAccordionTitle = () =>
@@ -112,4 +114,16 @@ describe('Sidebar tests', () => {
     await getMenuButton().trigger('click')
     expect(getMenuContent().exists()).toBeTruthy()
   })
+
+  it('should render data-test attribute on container div', async () => {
+    const template = `
+      <puik-sidebar>
+        <puik-sidebar-group-item title="group" icon="store" data-test="test">
+          <puik-sidebar-item icon="home" title="title"></puik-sidebar-item>
+        </puik-sidebar-group-item>
+      </puik-sidebar>
+    `
+    factory(template)
+    expect(getSidebarGroupItemContainer().attributes('data-test')).toBe('test')
+  })
 })