Merge branch 'main' into improvement/chip-tag-apparition-de-la-toolti…

…p-changer-la-condition

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/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: `

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',

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;
 }

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;
 }

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;