Merge branch 'main' into feat/create-avatar-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/components/link/src/link.ts

@@ -3,16 +3,33 @@ import type { RouteLocationRaw } from 'vue-router'
 import type { ExtractPropTypes, PropType } from 'vue'
 import type Link from './link.vue'
 
+export enum PuikLinkTarget {
+  BLANK = '_blank',
+  SELF = '_self',
+  PARENT = '_parent',
+  TOP = '_top',
+}
+
 export const targetVariants = ['_blank', '_self', '_parent', '_top'] as const
-export type PuikTargetVariant = (typeof targetVariants)[number]
+export type PuikTargetString = (typeof targetVariants)[number]
+
+export enum PuikLinkSize {
+  SMALL = 'sm',
+  MEDIUM = 'md',
+  LARGE = 'lg',
+}
+
 export const linkSizes = ['sm', 'md', 'lg'] as const
-export type PuikLinkSize = (typeof linkSizes)[number]
+export type PuikLinkSizeString = (typeof linkSizes)[number]
 
 export const linkProps = buildProps({
   size: {
-    type: String as PropType<PuikLinkSize>,
+    type: [
+      String as PropType<PuikLinkSize>,
+      String as PropType<PuikLinkSizeString>,
+    ],
     required: false,
-    default: 'md',
+    default: PuikLinkSize.MEDIUM,
   },
   href: {
     type: String,
@@ -25,9 +42,12 @@ export const linkProps = buildProps({
     default: undefined,
   },
   target: {
-    type: String as PropType<PuikTargetVariant>,
+    type: [
+      String as PropType<PuikLinkTarget>,
+      String as PropType<PuikTargetString>,
+    ],
     required: false,
-    default: '_self',
+    default: PuikLinkTarget.SELF,
   },
   title: {
     type: String,

packages/components/link/src/link.vue

@@ -7,17 +7,26 @@
     :class="['puik-link', `puik-link--${size}`]"
   >
     <slot></slot>
+
+    <span
+      v-if="props.target === PuikLinkTarget.BLANK"
+      class="puik-link__target__icon"
+    >
+      {{ TARGET_BLANK_ICON }}
+    </span>
   </component>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { linkProps } from './link'
+import { linkProps, PuikLinkTarget } from './link'
+
 defineOptions({
   name: 'PuikLink',
 })
 
 const props = defineProps(linkProps)
+const TARGET_BLANK_ICON = 'open_in_new'
 
 const componentType = computed(() => {
   if (props.to) {

packages/components/snackbar/src/notify.ts

@@ -1,65 +1,51 @@
-import { createVNode, render, type AppContext, type VNode } from 'vue'
+import {
+  createVNode,
+  render,
+  type AppContext,
+  type VNode,
+  ref,
+  type Ref,
+} from 'vue'
 import Snackbar from './snackbar.vue'
 import type { PuikSnackbarOptions } from './snackbar'
 
-const notifications: VNode[] = []
-
-const GAP = 16
-
-let seed = 1
+const currentNotification: Ref<VNode | null> = ref(null)
+const PUIK_SNACKBAR_ID = 'puik-snackbar-id'
 
 const notify = (
   options: PuikSnackbarOptions,
   context: AppContext | null = null
 ) => {
-  const id = `puik-snackbar_${seed++}`
   const customOnClose = options.onClose
-  let offset = options.offset || 32
+  const offset = options.offset || 32
 
-  notifications.forEach(({ el }) => {
-    offset += (el?.offsetHeight || 0) + GAP
-  })
-  const appendTo: HTMLElement | null = document.body
+  const documentBody: HTMLElement | null = document.body
 
   const props = {
     ...options,
     offset,
-    id,
-    onClose: () => close(id, customOnClose),
+    id: PUIK_SNACKBAR_ID,
+    onClose: () => {
+      currentNotification.value = null
+      return customOnClose
+    },
   }
 
-  const notification = createVNode(Snackbar, props)
-  notification.appContext = context ?? notify._context
-  const container = document.createElement('div')
-
-  notification.props!.onDestroy = () => render(null, container)
-
-  render(notification, container)
-  notifications.push(notification)
-  appendTo.appendChild(container.firstElementChild!)
-
-  const close = (id: string, customClose?: () => void) => {
-    const idx = notifications.findIndex(({ props }) => props?.id === id)
-    if (idx === -1) return
+  const newNotification = createVNode(Snackbar, props)
+  newNotification.appContext = context ?? notify._context
 
-    const { el } = notifications[idx]
-    if (!el) return
-
-    customClose?.()
-
-    const removedHeight = el?.offsetHeight
-
-    notifications.splice(idx, 1)
-    const len = notifications.length
+  const container = document.createElement('div')
 
-    if (len < 1) return
+  newNotification.props!.onDestroy = () => render(null, container)
+  render(newNotification, container)
+  documentBody.appendChild(container.firstElementChild!)
 
-    for (let i = idx; i < len; i++) {
-      const { el, component } = notifications[i]
-      const pos = parseInt(el?.style.bottom, 10) - removedHeight - GAP
-      component!.props.offset = pos
-    }
+  if (currentNotification.value) {
+    const curNot = document.getElementById(PUIK_SNACKBAR_ID)
+    curNot?.remove()
   }
+
+  currentNotification.value = newNotification
 }
 
 notify._context = null

packages/components/snackbar/src/snackbar.ts

@@ -16,6 +16,7 @@ export interface PuikSnackbarOptions {
   action?: SnackbarAction
   duration?: number
   offset?: number
+  hasCloseButton?: boolean
   onClose?: () => void
 }
 
@@ -49,6 +50,11 @@ export const snackbarProps = buildProps({
     required: false,
     default: 0,
   },
+  hasCloseButton: {
+    type: Boolean,
+    required: false,
+    default: true,
+  },
   onClose: {
     type: Function,
     required: false,

packages/components/snackbar/src/snackbar.vue

@@ -7,6 +7,7 @@
   >
     <div
       v-show="visible"
+      :id="props.id"
       class="puik-snackbar"
       :class="`puik-snackbar--${variant}`"
       :style="position"
@@ -24,6 +25,7 @@
         {{ action.label }}
       </button>
       <button
+        v-if="hasCloseButton"
         class="puik-snackbar__close-button"
         :aria-label="t('puik.snackbar.closeBtnLabel')"
         @click="close"
@@ -40,9 +42,11 @@ import { useTimeoutFn, useEventListener } from '@vueuse/core'
 import { useLocale } from '@puik/hooks'
 import { snackbarProps } from './snackbar'
 import type { CSSProperties } from 'vue'
+
 defineOptions({
   name: 'PuikSnackbar',
 })
+
 const { t } = useLocale()
 let timer: (() => void) | undefined
 

packages/components/snackbar/stories/snackbar-use.stories.mdx

@@ -20,6 +20,7 @@ interface PuikSnackbarOptions {
   action?: SnackbarAction
   duration?: number
   offset?: number
+  hasCloseButton?: boolean
   onClose?: () => void
 }
 ```