feat: [SPEX-1952][V1] Add link on Alert component

packages/components/alert/src/alert.ts

@@ -57,11 +57,16 @@ export const alertProps = buildProps({
     required: false,
     default: undefined,
   },
+  linkLabel: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type AlertProps = ExtractPropTypes<typeof alertProps>
 
-export const alertEmits = ['click', 'close']
+export const alertEmits = ['click', 'clickLink', 'close']
 export type AlertEmits = typeof alertEmits
 
 export type AlertInstance = InstanceType<typeof Alert>

packages/components/alert/src/alert.vue

@@ -29,6 +29,14 @@
           >
         </div>
       </div>
+      <PuikLink
+        v-if="linkLabel"
+        class="puik-alert__link"
+        :data-test="dataTest != undefined ? `link-${dataTest}` : undefined"
+        @click="clickLink"
+      >
+        {{ linkLabel }}
+      </PuikLink>
       <PuikButton
         v-if="buttonLabel"
         :variant="variant"
@@ -55,6 +63,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { PuikButton } from '@puik/components/button'
+import { PuikLink } from '@puik/components/link'
 import { PuikIcon } from '@puik/components/icon'
 import { alertEmits, alertProps, ICONS } from './alert'
 defineOptions({
@@ -68,4 +77,5 @@ const icon = computed(() => ICONS[props.variant])
 
 const click = (event: Event) => emit('click', event)
 const close = (event: Event) => emit('close', event)
+const clickLink = (event: Event) => emit('clickLink', event)
 </script>

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

@@ -58,7 +58,10 @@ export default {
     dataTest: {
       control: 'text',
       description:
-        'Set the data-test attribute for the alert components `title-${dataTest}` `description-${dataTest}` `button-${dataTest}` `close-${dataTest}`',
+        'Set the data-test attribute for the alert components `title-${dataTest}` `description-${dataTest}` `button-${dataTest}` `close-${dataTest}` `link-${dataTest}`',
+    },
+    linkLabel: {
+      description: 'Label of the link',
     },
   },
   args: {
@@ -69,6 +72,7 @@ export default {
     buttonLabel: 'Button',
     buttonWrapLabel: false,
     isClosable: false,
+    linkLabel: 'See more',
   },
 } as Meta
 
@@ -81,12 +85,14 @@ const Template: StoryFn = (args: Args) => ({
   },
   methods: {
     click: action('click'),
+    clickLink: action('click-link'),
     close: action('close'),
   },
   template: `
     <puik-alert
       v-bind="args"
       @click="click"
+      @click-link="clickLink"
       @close="close"
     ></puik-alert>`,
 })

packages/components/alert/test/alert.spec.ts

@@ -12,6 +12,7 @@ describe('Alert tests', () => {
   const findTitle = () => wrapper.find('.puik-alert__title')
   const findDesc = () => wrapper.find('.puik-alert__description')
   const findCloseButton = () => wrapper.find('.puik-alert__close')
+  const findLink = () => wrapper.find('.puik-alert__link')
 
   const factory = (
     propsData: Record<string, any> = {},
@@ -52,6 +53,13 @@ describe('Alert tests', () => {
     expect(wrapper.emitted('click')).toBeTruthy()
   })
 
+  it('should display a link which emits the clickLink event on click', () => {
+    factory({ linkLabel: 'See more' })
+    expect(findLink().exists()).toBeTruthy()
+    findLink().trigger('click')
+    expect(wrapper.emitted('clickLink')).toBeTruthy()
+  })
+
   it('should display a title and a description', async () => {
     factory({
       title: faker.lorem.word(2),
@@ -81,11 +89,12 @@ describe('Alert tests', () => {
     expect(wrapper.emitted('close')).toBeTruthy()
   })
 
-  it('should have a data-test attribute on container div, title, description button and close button', () => {
+  it('should have a data-test attribute on container div, title, description button, close button, and link', () => {
     factory({
       title: faker.lorem.word(2),
       description: faker.lorem.sentence(60),
       buttonLabel: 'Button',
+      linkLabel: 'See more',
       isClosable: true,
       dataTest: 'alert',
     })
@@ -94,5 +103,6 @@ describe('Alert tests', () => {
     expect(findDesc().attributes('data-test')).toBe('description-alert')
     expect(findButton().attributes('data-test')).toBe('button-alert')
     expect(findCloseButton().attributes('data-test')).toBe('close-alert')
+    expect(findLink().attributes('data-test')).toBe('link-alert')
   })
 })

packages/theme/src/alert.scss

@@ -30,7 +30,7 @@
     @apply border-0;
   }
   &__container {
-    @apply flex flex-col md:flex-row md:items-start w-full;
+    @apply flex flex-col lg:flex-row lg:items-start w-full;
   }
   &__content {
     @apply flex flex-row flex-grow;
@@ -46,12 +46,18 @@
     @extend .puik-body-default;
   }
   &__button {
-    @apply mt-2 ml-9 md:m-0;
+    @apply mt-2 ml-9 lg:m-0;
   }
   &__icon {
     @apply mt-0.5 flex-shrink-0;
   }
   &__close {
     @apply ml-4 cursor-pointer leading-none;
   }
+  &__link {
+    @apply ml-9 lg:m-0 pl-0 lg:pl-2 p-2 overflow-hidden lg:text-ellipsis lg:min-w-[128px] lg:max-w-[320px];
+    @media (min-width: 1024px) {
+      text-wrap: nowrap;
+    }
+  }
 }