feat: add data-test attribute

packages/components/accordion/src/accordion.ts

@@ -7,21 +7,41 @@ export const accordionProps = buildProps({
     type: String,
     required: true,
   },
+  buttonDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
   title: {
     type: String,
     required: false,
     default: undefined,
   },
+  titleDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
   subTitle: {
     type: String,
     required: false,
     default: undefined,
   },
+  subTitleDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
   icon: {
     type: String,
     required: false,
     default: undefined,
   },
+  iconDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
   disabled: {
     type: Boolean,
     required: false,

packages/components/accordion/src/accordion.vue

@@ -11,17 +11,28 @@
       :aria-controls="id"
       class="puik-accordion__header"
       :disabled="disabled"
+      :data-test="buttonDataTest"
       @click="onClick"
     >
       <puik-icon
         v-if="icon"
         class="puik-accordion__header__icon"
         :icon="icon"
         :font-size="24"
+        :data-test="iconDataTest"
       ></puik-icon>
       <div class="puik-accordion__header__content">
-        <div class="puik-accordion__header__content__title">{{ title }}</div>
-        <div v-if="subTitle" class="puik-accordion__header__content__sub-title">
+        <div
+          class="puik-accordion__header__content__title"
+          :data-test="titleDataTest"
+        >
+          {{ title }}
+        </div>
+        <div
+          v-if="subTitle"
+          class="puik-accordion__header__content__sub-title"
+          :data-test="subTitleDataTest"
+        >
           {{ subTitle }}
         </div>
       </div>

packages/components/accordion/stories/accordion.stories.ts

@@ -15,14 +15,26 @@ export default {
       control: 'text',
       description: 'Title displayed in the header',
     },
+    titleDataTest: {
+      control: 'text',
+      description: 'Set the data-test attribute for the title',
+    },
     subTitle: {
       control: 'text',
       description: 'Sub title displayed in the header',
     },
+    subTitleDataTest: {
+      control: 'text',
+      description: 'Set the data-test attribute for the sub title',
+    },
     icon: {
       control: 'text',
       description: 'Icon used in the header',
     },
+    iconDataTest: {
+      control: 'text',
+      description: 'Set the data-test attribute for the icon',
+    },
     disabled: {
       control: 'boolean',
       description: 'Set accordion disabled',
@@ -66,6 +78,9 @@ export const Default = {
     subTitle: 'Accordion subtitle',
     icon: 'home',
     disabled: false,
+    titleDataTest: '',
+    subTitleDataTest: '',
+    iconDataTest: '',
   },
 
   parameters: {

packages/components/alert/src/alert.ts

@@ -19,11 +19,21 @@ export const alertProps = buildProps({
     required: false,
     default: undefined,
   },
+  titleDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
   description: {
     type: String,
     required: false,
     default: undefined,
   },
+  descriptionDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
   variant: {
     type: String as PropType<PuikAlertVariant>,
     default: 'success',
@@ -37,6 +47,11 @@ export const alertProps = buildProps({
     required: false,
     default: undefined,
   },
+  buttonDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
   ariaLive: {
     type: String as PropType<'polite' | 'assertive'>,
     required: false,

packages/components/alert/src/alert.vue

@@ -10,10 +10,13 @@
     <div class="puik-alert__content">
       <puik-icon :icon="icon" font-size="1.25rem" class="puik-alert__icon" />
       <div class="puik-alert__text">
-        <p v-if="title" class="puik-alert__title">{{ title }}</p>
+        <p v-if="title" class="puik-alert__title" :data-test="titleDataTest">
+          {{ title }}
+        </p>
         <span
           v-if="$slots.default || description"
           class="puik-alert__description"
+          :data-test="descriptionDataTest"
           ><slot>{{ description }}</slot></span
         >
       </div>
@@ -22,6 +25,7 @@
       v-if="buttonLabel"
       :variant="variant"
       class="puik-alert__button"
+      :button-data-test="buttonDataTest"
       @click="click"
     >
       {{ buttonLabel }}

packages/components/alert/stories/alert.stories.ts

@@ -44,13 +44,25 @@ export default {
       control: 'none',
       description: 'Set the alert description',
     },
+    titleDataTest: {
+      description: 'Set the data-test attribute for the title',
+    },
+    descriptionDataTest: {
+      description: 'Set the data-test attribute for the description',
+    },
+    buttonDataTest: {
+      description: 'Set the data-test attribute for the button',
+    },
   },
   args: {
     title: 'Title',
     description: 'This is the description of the success alert.',
     variant: 'success',
     disableBorders: false,
     buttonLabel: 'Button',
+    titleDataTest: '',
+    descriptionDataTest: '',
+    buttonDataTest: '',
   },
 } as Meta
 

packages/components/badge/src/badge.ts

@@ -17,6 +17,11 @@ export const badgeProps = buildProps({
     type: String as PropType<PuikBadgeVariant>,
     default: 'neutral',
   },
+  badgeDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type BadgeProps = ExtractPropTypes<typeof badgeProps>

packages/components/badge/src/badge.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="puik-badge" :class="[`puik-badge--${variant}`]">
+  <div
+    class="puik-badge"
+    :class="[`puik-badge--${variant}`]"
+    :data-test="badgeDataTest"
+  >
     <slot></slot>
   </div>
 </template>

packages/components/badge/stories/badge.stories.ts

@@ -25,10 +25,15 @@ export default {
         },
       },
     },
+    badgeDataTest: {
+      control: 'text',
+      description: 'Set the data-test attribute on the badge',
+    },
   },
   args: {
     default: 'Status',
     variant: 'neutral',
+    badgeDataTest: '',
   },
 } as Meta
 

packages/components/breadcrumb/src/breadcrumb.ts

@@ -7,7 +7,8 @@ export interface BreadcrumbItem {
   label: string
   to?: RouteLocationRaw
   href?: string
-  target?: string
+  target?: '_blank' | '_self' | '_parent' | '_top'
+  dataTest?: string
 }
 
 export const breadcrumbProps = buildProps({

packages/components/breadcrumb/src/breadcrumb.vue

@@ -17,6 +17,7 @@
         :to="item.to"
         :href="item.href"
         :target="item.target"
+        :data-test="item.dataTest"
         size="sm"
       >
         {{ item.label }}
@@ -29,7 +30,10 @@
       ></PuikIcon>
     </div>
 
-    <div class="puik-breadcrumb__item--last">
+    <div
+      class="puik-breadcrumb__item--last"
+      :data-test="items[items.length - 1].dataTest"
+    >
       {{ items[items.length - 1].label }}
     </div>
   </nav>

packages/components/breadcrumb/stories/breadcrumb.stories.ts

@@ -23,6 +23,7 @@ interface BreadBreadcrumbItem {
   to: string | undefined,
   href: string | undefined,
   target: '_blank' | '_self' | '_parent' | '_top' | undefined,
+  dataTest: string | undefined,
 }`,
         },
       },

packages/components/button/src/button.ts

@@ -48,11 +48,21 @@ export const buttonProps = buildProps({
     required: false,
     default: '',
   },
+  leftIconDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
   rightIcon: {
     type: String,
     required: false,
     default: '',
   },
+  rightIconDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
   to: {
     type: [Object, String] as PropType<RouteLocationRaw>,
     required: false,
@@ -68,6 +78,11 @@ export const buttonProps = buildProps({
     required: false,
     default: undefined,
   },
+  buttonDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type ButtonProps = ExtractPropTypes<typeof buttonProps>

packages/components/button/src/button.vue

@@ -10,20 +10,23 @@
       { 'puik-button--fluid': fluid },
     ]"
     :disabled="disabled"
+    :data-test="buttonDataTest"
     @click="setSelected"
   >
     <puik-icon
       v-if="leftIcon"
       :icon="leftIcon"
       :font-size="size !== 'sm' ? '1.25rem' : '1rem'"
       class="puik-button__left-icon"
+      :data-test="leftIconDataTest"
     />
     <slot></slot>
     <puik-icon
       v-if="rightIcon"
       :icon="rightIcon"
       :font-size="size !== 'sm' ? '1.25rem' : '1rem'"
       class="puik-button__right-icon"
+      :data-test="rightIconDataTest"
     />
   </component>
 </template>

packages/components/button/stories/button.stories.ts

@@ -71,6 +71,18 @@ export default {
       control: 'text',
       description: 'Set a link for the button (changes button to "a" html tag)',
     },
+    buttonDataTest: {
+      control: 'text',
+      description: 'Set a data-test attribute to the button',
+    },
+    leftIconDataTest: {
+      control: 'text',
+      description: 'Set a data-test attribute to the left icon',
+    },
+    rightIconDataTest: {
+      control: 'text',
+      description: 'Set a data-test attribute to the right icon',
+    },
   },
   args: {
     variant: 'primary',
@@ -82,6 +94,9 @@ export default {
     to: undefined,
     href: undefined,
     default: 'Add to cart',
+    buttonDataTest: '',
+    leftIconDataTest: '',
+    rightIconDataTest: '',
   },
 } as Meta
 

packages/components/checkbox/src/checkbox.ts

@@ -12,6 +12,11 @@ export const checkboxProps = buildProps({
     required: false,
     default: undefined,
   },
+  labelDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
   disabled: {
     type: Boolean,
     required: false,
@@ -22,6 +27,11 @@ export const checkboxProps = buildProps({
     required: false,
     default: false,
   },
+  inputDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type CheckboxProps = ExtractPropTypes<typeof checkboxProps>

packages/components/checkbox/src/checkbox.vue

@@ -8,11 +8,13 @@
       type="checkbox"
       :indeterminate="indeterminate"
       :disabled="disabled"
+      :data-test="inputDataTest"
     />
     <label
       v-if="$slots.default || label"
       :for="id"
       class="puik-checkbox__label"
+      :data-test="labelDataTest"
     >
       <slot>{{ label }}</slot>
     </label>