Merge branch 'main' into feat/table-v2

PrestaShopCorp · Nov 24, 2023 · 986d7a9 · 986d7a9
2 parents 92d76aa + 1c55a83
commit 986d7a9
Show file tree

Hide file tree

Showing 12 changed files with 100 additions and 46 deletions.
diff --git a/docs/stories/styles/Typography.stories.ts b/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>
 `)
diff --git a/packages/components/chip/src/chip.vue b/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>
diff --git a/packages/components/chip/test/chip.spec.ts b/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')
 

diff --git a/packages/components/tab-navigation/stories/tab-navigation.stories.ts b/packages/components/tab-navigation/stories/tab-navigation.stories.ts
@@ -137,8 +137,13 @@ export const Default: Story = {
   parameters: {
     docs: {
       description: {
-        story:
-          'NB: The id attribute of the component corresponds to the prop name (allows you to identify each instance of the navigation component in the event that there are several on the same page)',
+        story: `
+  NB: The id attribute of the component corresponds to the prop name (allows you to identify each instance of the navigation component in the event that there are several on the same page).
+  
+  Tips: 
+  - If you want to set a width: set a width on the 'puik-tab-navigation'
+  - If you want to set a width on tab nav: set a MIN-WIDTH on the 'puik-tab-navigation-title'
+          `,
       },
       source: {
         code: `

diff --git a/packages/components/tag/src/tag.vue b/packages/components/tag/src/tag.vue
@@ -7,27 +7,30 @@
     ]"
   >
     <PuikIcon v-if="icon && icon != ''" :icon="icon" class="puik-tag__icon" />
-    <div
-      class="puik-tag__content"
-      :data-test="dataTest != undefined ? `content-${dataTest}` : undefined"
-    >
+    <div class="puik-tag__content">
       <puik-tooltip
-        v-if="content?.length >= 30"
+        :key="content"
+        :is-disabled="!showTooltip"
         :position="(tooltipPosition as PuikTooltipPosition)"
         :description="content"
         :data-test="dataTest != undefined ? `tooltip-${dataTest}` : undefined"
       >
-        <template #description>{{ content }}</template>
-        {{ content }}
+        <p
+          ref="tagContentElem"
+          :data-test="dataTest != undefined ? `content-${dataTest}` : undefined"
+        >
+          {{ content }}
+        </p>
       </puik-tooltip>
-      {{ content }}
     </div>
   </div>
 </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 {
   tagProps,
   type PuikTagSizeVariant,
@@ -39,9 +42,19 @@ defineOptions({
 })
 
 const props = defineProps(tagProps)
+const tagContentElem = ref(null)
+const showTooltip = ref(false)
+
 const emit = defineEmits(['close'])
 
 const handleCloseEvent = () => {
   emit('close')
 }
+
+watch(tagContentElem, async () => {
+  await nextTick()
+  if (tagContentElem?.value) {
+    showTooltip.value = isEllipsisActive(tagContentElem.value)
+  }
+})
 </script>
diff --git a/packages/components/tag/test/tag.spec.ts b/packages/components/tag/test/tag.spec.ts
@@ -6,7 +6,7 @@ import type { MountingOptions, VueWrapper } from '@vue/test-utils'
 describe('Tag tests', () => {
   let wrapper: VueWrapper<any>
   const findTag = () => wrapper.find('.puik-tag')
-  const findTagContent = () => wrapper.find('.puik-tag__content')
+  const findTagContent = () => wrapper.find('.puik-tag__content p')
   const findLeftIcon = () => wrapper.find('.puik-tag__icon')
 
   const factory = (

diff --git a/packages/tailwind-preset/theme.js b/packages/tailwind-preset/theme.js
@@ -88,7 +88,15 @@ module.exports = {
       materialIcons: ['Material Icons Round'],
     },
     fontSize: {
-      '4xl': '2rem',
+      xs: ['0.75rem', { lineHeight: '1.125rem' }],
+      sm: ['0.875rem', { lineHeight: '1.25rem' }],
+      base: ['1rem', { lineHeight: '1.375rem' }],
+      lg: ['1.125rem', { lineHeight: '1.375rem' }],
+      xl: ['1.25rem', { lineHeight: '1.75rem' }],
+      '2xl': ['1.5rem', { lineHeight: '2rem' }],
+      '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
+      '4xl': ['2rem', { lineHeight: '2.625rem' }],
+      '5xl': ['3rem', { lineHeight: '3.625rem' }],
     },
     screens: {
       xs: '320px',

diff --git a/packages/theme/src/chip.scss b/packages/theme/src/chip.scss
@@ -26,9 +26,9 @@
     @apply mr-1;
   }
   &__content {
-    @apply max-w-[150px] pr-[2px] overflow-hidden whitespace-nowrap text-ellipsis;
-    & > .puik-tooltip {
-      @apply max-w-[150px] overflow-hidden whitespace-nowrap text-ellipsis;
+    @apply relative max-w-[150px];
+    p {
+      @apply pr-[2px] overflow-hidden whitespace-nowrap text-ellipsis;
     }
   }
   &__content .puik-tooltip__wrapper {

diff --git a/packages/theme/src/common/typography.scss b/packages/theme/src/common/typography.scss
@@ -1,23 +1,23 @@
 // Titles
 
 .puik-jumbotron {
-  @apply text-5xl leading-[3.625rem] -tracking-[0.066875rem] font-extrabold font-primary;
+  @apply text-5xl -tracking-[0.066875rem] font-extrabold font-primary;
 }
 
 .puik-h1 {
-  @apply text-4xl leading-[2.625rem] -tracking-[0.043125rem] font-bold font-primary;
+  @apply text-4xl -tracking-[0.043125rem] font-bold font-primary;
 }
 
 .puik-h2 {
-  @apply text-2xl leading-8 -tracking-[0.029375rem] font-semibold font-primary;
+  @apply text-2xl -tracking-[0.029375rem] font-semibold font-primary;
 }
 
 .puik-h3 {
-  @apply text-xl leading-[1.875rem] -tracking-[0.020625rem] font-semibold font-primary;
+  @apply text-lg -tracking-[0.01125rem] font-semibold font-primary;
 }
 
 .puik-h4 {
-  @apply text-lg leading-[1.625rem] -tracking-[0.01625rem] font-medium font-primary;
+  @apply text-lg -tracking-[0.01125rem] font-medium font-primary;
 }
 
 .puik-h5 {
@@ -30,45 +30,57 @@
 
 // Brand title
 
+.puik-brand-jumbotron {
+  @extend .puik-jumbotron;
+  @apply font-secondary font-normal;
+}
+
 .puik-brand-h1 {
   @extend .puik-h1;
-  @apply -tracking-[0] font-secondary font-normal;
+  @apply font-secondary font-normal;
 }
 
 .puik-brand-h2 {
   @extend .puik-h2;
-  @apply -tracking-[0] font-secondary font-normal;
-}
-
-.puik-brand-jumbotron {
-  @extend .puik-jumbotron;
-  @apply -tracking-[0] font-secondary font-normal;
+  @apply font-secondary font-normal;
 }
 
 // Body
 
 .puik-body-small {
-  @apply text-xs leading-5 font-primary;
+  @apply text-xs font-primary;
+}
+
+.puik-body-small-medium {
+  @apply text-xs font-primary font-medium;
 }
 
 .puik-body-small-bold {
-  @apply text-xs leading-5 font-primary font-bold;
+  @apply text-xs font-primary font-bold;
 }
 
 .puik-body-default {
-  @apply text-sm leading-5 font-primary;
+  @apply text-sm font-primary;
+}
+
+.puik-body-default-medium {
+  @apply text-sm font-primary font-medium;
 }
 
 .puik-body-default-bold {
-  @apply text-sm leading-5 font-primary font-bold;
+  @apply text-sm font-primary font-bold;
 }
 
 .puik-body-large {
-  @apply text-base leading-[1.375rem] font-primary;
+  @apply text-base font-primary;
+}
+
+.puik-body-large-medium {
+  @apply text-base font-primary font-medium;
 }
 
 .puik-body-large-bold {
-  @apply text-base leading-[1.375rem] font-primary font-bold;
+  @apply text-base font-primary font-bold;
 }
 
 .puik-body-default-link {
@@ -93,13 +105,13 @@
 // Buttons
 
 .puik-text-button-default {
-  @apply font-primary font-medium text-sm leading-[1.125rem];
+  @apply font-primary font-medium text-sm/[1.125rem];
 }
 
 .puik-text-button-small {
-  @apply font-primary text-xs leading-4 font-medium;
+  @apply font-primary text-xs/4 font-medium;
 }
 
 .puik-text-button-large {
-  @apply font-primary text-base leading-5 font-medium;
+  @apply font-primary text-base/5 font-medium;
 }
diff --git a/packages/theme/src/tab-navigation-group-titles.scss b/packages/theme/src/tab-navigation-group-titles.scss
@@ -1,3 +1,3 @@
 .puik-tab-navigation__group-titles {
-  @apply flex flex-col min-h-[48px] sm:flex-row sm:flex-wrap;
+  @apply flex overflow-x-auto min-h-[48px] relative;
 }
diff --git a/packages/theme/src/tab-navigation-title.scss b/packages/theme/src/tab-navigation-title.scss
@@ -1,7 +1,7 @@
 @use './common/typography.scss';
 
 .puik-tab-navigation__title {
-  @apply relative p-2 flex gap-2 whitespace-nowrap border-b border-b-primary-400 items-center cursor-pointer puik-body-default-bold sm:w-[135px];
+  @apply relative p-2 flex gap-2 whitespace-nowrap border-b border-b-primary-400 items-center cursor-pointer puik-body-default-bold;
 
   &:focus:not(:hover) {
     @apply bg-primary-400 outline-none;

diff --git a/packages/theme/src/tag.scss b/packages/theme/src/tag.scss
@@ -41,9 +41,9 @@
     @apply mr-1;
   }
   &__content {
-    @apply max-w-[150px] pr-[2px] overflow-hidden whitespace-nowrap text-ellipsis;
-    & > .puik-tooltip {
-      @apply max-w-[150px] overflow-hidden whitespace-nowrap text-ellipsis;
+    @apply relative max-w-[150px];
+    p {
+      @apply pr-[2px] overflow-hidden whitespace-nowrap text-ellipsis;
     }
   }
   &__content .puik-tooltip__wrapper {