Feat - Add close button to alert component

packages/components/alert/src/alert.ts

@@ -37,6 +37,11 @@ export const alertProps = buildProps({
     required: false,
     default: undefined,
   },
+  isClosable: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
   ariaLive: {
     type: String as PropType<'polite' | 'assertive'>,
     required: false,
@@ -48,6 +53,7 @@ export type AlertProps = ExtractPropTypes<typeof alertProps>
 
 export const alertEmits = {
   click: (event: Event) => event instanceof Event,
+  close: (event: Event) => event instanceof Event,
 }
 
 export type AlertEmits = typeof alertEmits

packages/components/alert/src/alert.vue

@@ -7,25 +7,35 @@
     ]"
     :aria-live="ariaLive"
   >
-    <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>
-        <span
-          v-if="$slots.default || description"
-          class="puik-alert__description"
-          ><slot>{{ description }}</slot></span
-        >
+    <div class="puik-alert__container">
+      <div class="puik-alert__content">
+        <PuikIcon :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>
+          <span
+            v-if="$slots.default || description"
+            class="puik-alert__description"
+            ><slot>{{ description }}</slot></span
+          >
+        </div>
       </div>
+      <PuikButton
+        v-if="buttonLabel"
+        :variant="variant"
+        class="puik-alert__button"
+        @click="click"
+      >
+        {{ buttonLabel }}
+      </PuikButton>
     </div>
-    <puik-button
-      v-if="buttonLabel"
-      :variant="variant"
-      class="puik-alert__button"
-      @click="click"
-    >
-      {{ buttonLabel }}
-    </puik-button>
+
+    <PuikIcon
+      v-if="isClosable"
+      icon="close"
+      font-size="1.5rem"
+      class="puik-alert__close"
+      @click="close"
+    />
   </div>
 </template>
 
@@ -44,4 +54,5 @@ const emit = defineEmits(alertEmits)
 const icon = computed(() => ICONS[props.variant])
 
 const click = (event: Event) => emit('click', event)
+const close = (event: Event) => emit('close', event)
 </script>

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

@@ -40,6 +40,9 @@ export default {
     buttonLabel: {
       description: 'Label of the button',
     },
+    isClosable: {
+      description: 'Display a close button',
+    },
     default: {
       control: 'none',
       description: 'Set the alert description',
@@ -51,6 +54,7 @@ export default {
     variant: 'success',
     disableBorders: false,
     buttonLabel: 'Button',
+    isClosable: false,
   },
 } as Meta
 
@@ -63,11 +67,13 @@ const Template: StoryFn = (args: Args) => ({
   },
   methods: {
     click: action('click'),
+    close: action('close'),
   },
   template: `
     <puik-alert
       v-bind="args"
       @click="click"
+      @close="close"
     ></puik-alert>`,
 })
 

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

@@ -11,6 +11,7 @@ describe('Alert tests', () => {
   const findButton = () => wrapper.find('.puik-alert__button')
   const findTitle = () => wrapper.find('.puik-alert__title')
   const findDesc = () => wrapper.find('.puik-alert__description')
+  const findCloseButton = () => wrapper.find('.puik-alert__close')
 
   const factory = (
     propsData: Record<string, any> = {},
@@ -63,4 +64,15 @@ describe('Alert tests', () => {
     })
     expect(findAlert().classes()).toContain('puik-alert--no-borders')
   })
+
+  it('should display a close icon and emit a close event on click', async () => {
+    factory({
+      title: faker.lorem.word(2),
+      description: faker.lorem.sentence(60),
+      isClosable: true,
+    })
+    expect(findCloseButton()).toBeTruthy()
+    await findCloseButton().trigger('click')
+    expect(wrapper.emitted('close')).toBeTruthy()
+  })
 })

packages/theme/src/alert.scss

@@ -1,7 +1,7 @@
 @use './common/typography.scss';
 
 .puik-alert {
-  @apply relative flex flex-col md:flex-row p-4 border text-primary-800 items-start;
+  @apply relative flex flex-row p-4 border text-primary-800 items-start;
   &--success {
     @apply bg-green-50 border border-green;
     .puik-alert__icon {
@@ -29,6 +29,9 @@
   &--no-borders {
     @apply border-0;
   }
+  &__container {
+    @apply flex flex-col md:flex-row w-full;
+  }
   &__content {
     @apply flex flex-row flex-grow;
   }
@@ -48,4 +51,7 @@
   &__icon {
     @apply mt-0.5 flex-shrink-0;
   }
+  &__close {
+    @apply ml-4 cursor-pointer leading-none;
+  }
 }