feat: add data-test to PuikTag

PrestaShopCorp · Oct 31, 2023 · 29e76ee · 29e76ee
1 parent 91b0ef4
commit 29e76ee
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/packages/components/tag/src/tag.ts b/packages/components/tag/src/tag.ts
@@ -52,6 +52,11 @@ export const tagProps = buildProps({
     Required: false,
     default: 'bottom',
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type TagProps = ExtractPropTypes<typeof tagProps>

diff --git a/packages/components/tag/src/tag.vue b/packages/components/tag/src/tag.vue
@@ -7,11 +7,12 @@
     ]"
   >
     <PuikIcon v-if="icon && icon != ''" :icon="icon" class="puik-tag__icon" />
-    <div class="puik-tag__content">
+    <div class="puik-tag__content" :data-test="`content-${dataTest}`">
       <puik-tooltip
         v-if="content?.length >= 30"
         :position="(tooltipPosition as PuikTooltipPosition)"
         :description="content"
+        :data-test="`tooltip-${dataTest}`"
       >
         <template #description>{{ content }}</template>
         {{ content }}

diff --git a/packages/components/tag/stories/tag.stories.ts b/packages/components/tag/stories/tag.stories.ts
@@ -103,6 +103,11 @@ export default {
         },
       },
     },
+    dataTest: {
+      description:
+        'Set the data-test attribute `content-${dataTest}` `tooltip-${dataTest}`',
+      control: 'text',
+    },
   },
   args: {
     id: 'puik-tag-id',