Merge remote-tracking branch 'origin/main' into EB-1111-data-test and…

… update alerte data-test

packages/components/alert/src/alert.ts

@@ -37,12 +37,17 @@ export const alertProps = buildProps({
     required: false,
     default: undefined,
   },
+  isClosable: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
   ariaLive: {
     type: String as PropType<'polite' | 'assertive'>,
     required: false,
     default: 'polite',
   },
-  alertDataTest: {
+  dataTest: {
     type: String,
     required: false,
     default: undefined,
@@ -53,6 +58,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,33 +7,44 @@
     ]"
     :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"
-          :data-test="`title-${alertDataTest}`"
-        >
-          {{ title }}
-        </p>
-        <span
-          v-if="$slots.default || description"
-          class="puik-alert__description"
-          :data-test="`description-${alertDataTest}`"
-          ><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"
+            :data-test="`title-${dataTest}`"
+          >
+            {{ title }}
+          </p>
+          <span
+            v-if="$slots.default || description"
+            class="puik-alert__description"
+            :data-test="`description-${dataTest}`"
+            ><slot>{{ description }}</slot></span
+          >
+        </div>
       </div>
+      <PuikButton
+        v-if="buttonLabel"
+        :variant="variant"
+        class="puik-alert__button"
+        :data-test="`button-${dataTest}`"
+        @click="click"
+      >
+        {{ buttonLabel }}
+      </PuikButton>
     </div>
-    <puik-button
-      v-if="buttonLabel"
-      :variant="variant"
-      class="puik-alert__button"
-      :button-data-test="`button-${alertDataTest}`"
-      @click="click"
-    >
-      {{ buttonLabel }}
-    </puik-button>
+
+    <PuikIcon
+      v-if="isClosable"
+      icon="close"
+      font-size="1.5rem"
+      class="puik-alert__close"
+      :data-test="`close-${dataTest}`"
+      @click="close"
+    />
   </div>
 </template>
 
@@ -52,4 +63,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,14 +40,17 @@ export default {
     buttonLabel: {
       description: 'Label of the button',
     },
+    isClosable: {
+      description: 'Display a close button',
+    },
     default: {
       control: 'none',
       description: 'Set the alert description',
     },
-    alertDataTest: {
+    dataTest: {
       control: 'text',
       description:
-        'Set the data-test attribute for the alert components `title-${alertDataTest}` `description-${alertDataTest}` `button-${alertDataTest}`',
+        'Set the data-test attribute for the alert components `title-${dataTest}` `description-${dataTest}` `button-${dataTest}` `close-${dataTest}`',
     },
   },
   args: {
@@ -56,6 +59,7 @@ export default {
     variant: 'success',
     disableBorders: false,
     buttonLabel: 'Button',
+    isClosable: false,
   },
 } as Meta
 
@@ -68,11 +72,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

@@ -8,17 +8,26 @@
     :data-test="dataTest"
   >
     <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/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;
+  }
 }

packages/theme/src/link.scss

@@ -1,40 +1,47 @@
 @use './common/typography.scss';
 
 .puik-link {
-  @apply relative text-primary transition m-0.5 p-0.5 py-[4px];
-  &:before {
-    content: '';
-    @apply absolute h-[1px] bg-primary-500 bottom-[4px] left-[50%] translate-x-[-50%] transition-all ease-in-out duration-150;
-    width: calc(100% - 4px);
-  }
+  @apply cursor-pointer 
+    relative 
+    text-primary
+
+    underline 
+    decoration-auto
+    underline-offset-[2px]
+    decoration-primary-500
+
+    transition-all
+    duration-150;
+
   &:hover,
   &:active {
-    @apply cursor-pointer;
-    &:before {
-      @apply bg-primary-800 bottom-[2.5px] transition-all ease-in-out duration-150;
-    }
-    &:before:visited {
-      @apply bg-primary-800;
-    }
+    @apply decoration-primary underline-offset-[5px];
   }
+
   &:focus-visible {
     @apply outline-none ring-2 ring-blue rounded-[4px] shadow-none;
   }
+
   &:visited {
     @apply text-purple-700;
   }
-  &[target='_blank'] {
-    &:after {
-      content: 'open_in_new';
-      @apply font-materialIcons ml-1.5 inline-block align-middle leading-[1em];
+
+  &__target__icon {
+    @apply font-materialIcons align-bottom;
+
+    &:before {
+      @apply content-['_'] text-[0.35rem] leading-[0.25rem];
     }
   }
+
   &--sm {
     @extend .puik-body-small;
   }
+
   &--md {
     @extend .puik-body-default;
   }
+
   &--lg {
     @extend .puik-body-large;
   }

packages/theme/src/option.scss

@@ -1,5 +1,5 @@
 .puik-option {
-  @apply relative cursor-default select-none py-2 px-2 text-primary-800 transition-colors;
+  @apply flex place-content-between relative cursor-default select-none p-2 text-primary-800 transition-colors;
   &--selected {
     @apply bg-primary-300;
   }
@@ -19,6 +19,6 @@
     @apply font-primary font-normal block truncate;
   }
   &__selected-icon {
-    @apply font-materialIcons absolute inset-y-0 right-0 flex items-center w-5 mr-3;
+    @apply font-materialIcons inset-y-0 right-0 flex items-center w-5 ml-2;
   }
 }

packages/theme/src/select.scss

@@ -31,16 +31,16 @@
     @apply pointer-events-none absolute inset-y-0 right-0 flex items-center pr-4 select-none;
   }
   &__search {
-    @apply px-2 mb-1;
+    @apply px-1 my-1;
   }
   &__no-results {
     @apply p-2 truncate;
   }
   &__options {
-    @apply absolute mt-2 rounded bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5
+    @apply absolute bg-white text-base shadow-lg ring-1 ring-black ring-opacity-5
     focus-visible:outline-none sm:text-sm overflow-x-hidden;
     &--full-width {
-      @apply w-max;
+      @apply min-w-full w-max;
     }
   }
   &__options-list {