Merge pull request #309 from PrestaShopCorp/308-bug-tooltip-naming-co…

…nflict-between-prop-and-native-html-title-attribute

fix: #308 [tooltip][breaking-change] - prop naming - replace title  b…

packages/components/icon/src/icon.ts

@@ -5,6 +5,7 @@ export interface IconProps {
   nodeType?: string
   fontSize?: string | number
   color?: string
+  isDisabled?: boolean
   dataTest?: string
 }
 

packages/components/icon/src/icon.vue

@@ -4,6 +4,9 @@
     class="puik-icon"
     :style="style"
     :data-test="dataTest"
+    :class="{
+      'puik-icon--disabled': isDisabled,
+    }"
   >
     {{ icon }}
   </component>

packages/components/icon/stories/icon.stories.ts

@@ -33,6 +33,12 @@ export default {
     },
     dataTest: {
       description: 'Set the data-test attribute'
+    },
+    isDisabled: {
+      description: 'If the icon is disable',
+      control: {
+        type: 'boolean'
+      }
     }
   }
 } as Meta;
@@ -55,7 +61,8 @@ export const Default = {
     color: 'green',
     fontSize: 24,
     nodeType: 'span',
-    dataTest: ''
+    dataTest: '',
+    isDisabled: false
   },
 
   parameters: {

packages/components/icon/test/icon.spec.ts

@@ -30,6 +30,16 @@ describe('Icon tests', () => {
     expect(findIcon().text()).toBe('check');
   });
 
+  it('should set the icon disabled', async () => {
+    factory({
+      icon: 'check',
+      color: 'red',
+      isDisabled: true
+    });
+
+    expect(findIcon().classes()).toContain('puik-icon--disabled');
+  });
+
   it('should set the color', async () => {
     factory({
       icon: 'check',

packages/components/link/src/link.ts

@@ -21,6 +21,7 @@ export interface LinkProps {
   target?: `${PuikLinkTargetVariants}`
   title?: string
   highContrast?: boolean
+  articles?: boolean
   dataTest?: string
 }
 

packages/components/link/src/link.vue

@@ -8,6 +8,7 @@
       'puik-link',
       `puik-link--${size}`,
       { 'puik-link--high-contrast': highContrast },
+      { 'puik-link--articles': articles },
     ]"
     :data-test="dataTest"
   >

packages/components/link/stories/link.stories.ts

@@ -48,7 +48,16 @@ export default {
     },
     highContrast: {
       description:
-        'Sets the link in high contrast mode by disabling the purple color for the visited stated',
+        'Sets the link in high contrast mode by changing the gray underline color',
+      table: {
+        defaultValue: {
+          summary: false
+        }
+      }
+    },
+    articles: {
+      description:
+        'Sets the link in articles mode, adding the purple color for the visited stated',
       table: {
         defaultValue: {
           summary: false
@@ -72,6 +81,7 @@ export default {
     to: undefined,
     target: '_self',
     highContrast: false,
+    articles: false,
     default: "I'm a cool link",
     title: "I'm a tooltip for your link",
     size: 'md',

packages/components/link/test/link.spec.ts

@@ -43,4 +43,9 @@ describe('Link tests', () => {
     factory({ highContrast: true });
     expect(findLink().classes()).toContain('puik-link--high-contrast');
   });
+
+  it('should set the link in articles mode', () => {
+    factory({ articles: true });
+    expect(findLink().classes()).toContain('puik-link--articles');
+  });
 });

packages/components/table/stories/table.stories.ts

@@ -44,14 +44,21 @@ export default {
   import type { PuikTableHeader } from '@prestashopcorp/puik/es/components/table/src/table'
 
   interface PuikTableHeader {
-    text: string | undefined
     value: string
-    size: 'sm' | 'md' | 'lg' | undefined
-    width: string | undefined
-    align: 'left' | 'center' | 'right' | undefined
-    sortable: boolean | undefined
-    searchable: boolean | undefined
-    preventExpand: boolean | undefined
+    text?: string
+    size?: 'sm' | 'md' | 'lg'
+    align?: 'left' | 'center' | 'right'
+    width?: string
+    sortable?: boolean
+    preventExpand?: boolean
+    searchable?: boolean
+    searchSubmit?: boolean
+    searchType?: {$PuikTableSearchInputTypes}
+  }
+
+  enum PuikTableSearchInputTypes {
+    Text = 'text',
+    Range = 'range',
   }
   `
         }
@@ -201,8 +208,10 @@ export default {
       description: 'Event emitted when sorting a column',
       table: {
         type: {
-          summary: 'sortOption',
+          summary: 'event => sortOption',
           detail: `
+// Payload type = sortOption
+
 import type { sortOption } from '@prestashopcorp/puik/es/components/table/src/table'
 
 type sortOption = {
@@ -218,9 +227,11 @@ type sortOption = {
       control: 'none',
       table: {
         type: {
-          summary: 'event',
+          summary: 'event => SearchOption[]',
           detail: `
-Payload type = Array<SearchOption>
+// Payload type = Array<SearchOption>
+
+import type { searchOption } from '@prestashopcorp/puik/es/components/table/src/table'
 
 type searchOption = {
   searchBy: string;

packages/components/tooltip/src/tooltip.ts

@@ -8,7 +8,7 @@ export enum PuikTooltipPositions {
 }
 
 export interface TooltipProps {
-  title?: string
+  heading?: string
   description?: string
   position?: `${PuikTooltipPositions}`
   isDisabled?: boolean

packages/components/tooltip/src/tooltip.vue

@@ -28,10 +28,11 @@
       >
         <div class="puik-tooltip__tip__content">
           <span
-            v-if="$slots.title || title"
-            class="puik-tooltip__tip__content__title"
-            :data-test="dataTest != undefined ? `title-${dataTest}` : undefined"
-          ><slot name="title">{{ title }}</slot></span>
+            v-if="$slots.heading || heading"
+            class="puik-tooltip__tip__content__heading"
+            :data-test="dataTest != undefined ? `heading-${dataTest}` : undefined"
+          >
+            <slot name="heading">{{ heading }}</slot></span>
           <span
             v-if="$slots.description || description"
             class="puik-tooltip__tip__content__description"