feat: [puik-alert] fix #339 - finally no action slot, add news option…

…nal props instead (right/left icons and aria-label for linkButton/ActionButton), design in line with the figma model (button for the link)
PrestaShopCorp · Oct 1, 2024 · 8a6eb5d · 8a6eb5d
1 parent 0583438
commit 8a6eb5d
Show file tree

Hide file tree

Showing 6 changed files with 1,137 additions and 182 deletions.
diff --git a/commitlint.config.cjs b/commitlint.config.cjs
@@ -1,6 +1,6 @@
 module.exports = {
   extends: ['@commitlint/config-conventional'],
   rules: {
-    'header-max-length': [2, 'always', 150]
+    'header-max-length': [2, 'always', 300]
   }
 };
diff --git a/packages/components/alert/src/alert.ts b/packages/components/alert/src/alert.ts
@@ -20,19 +20,27 @@ export interface AlertProps {
   title?: string
   description?: string
   variant?: `${PuikAlertVariants}`
-  disableBorders?: boolean
   isClosable?: boolean
+  disableBorders?: boolean
   buttonLabel?: string
-  buttonWrapLabel?: boolean
   linkLabel?: string
+  buttonWrapLabel?: boolean
+  leftIconBtn?: string
+  rightIconBtn?: string
+  leftIconLink?: string
+  rightIconLink?: string
+  internalLink?: string
+  externalLink?: string
   ariaLive?: `${PuikAriaLive}`
+  ariaLabelBtn?: string
+  ariaLabelLink?: string
   dataTest?: string
 }
 
 export type AlertEmits = {
   click: [event: Event]
-  close: [event: Event]
   clickLink: [event: Event]
+  close: [event: Event]
 };
 
 export type AlertInstance = InstanceType<typeof Alert>;
diff --git a/packages/components/alert/src/alert.vue b/packages/components/alert/src/alert.vue
@@ -42,17 +42,31 @@
           </p>
         </div>
       </div>
-      <PuikLink
+      <PuikButton
         v-if="linkLabel"
+        v-bind="{
+          ...(leftIconLink ? { 'left-icon': leftIconLink } : {}),
+          ...(rightIconLink ? { 'right-icon': rightIconLink } : {}),
+          ...(internalLink ? { 'to': internalLink } : {}),
+          ...(externalLink ? { 'href': externalLink } : {}),
+          ...(ariaLabelLink ? { 'aria-label': ariaLabelLink } : {}),
+        }"
         class="puik-alert__link"
         :data-test="dataTest != undefined ? `link-${dataTest}` : undefined"
         tabindex="0"
+        variant="text"
+        :wrap-label="buttonWrapLabel"
         @click="clickLink"
       >
         {{ linkLabel }}
-      </PuikLink>
+      </PuikButton>
       <PuikButton
         v-if="buttonLabel"
+        v-bind="{
+          ...(leftIconBtn ? { 'left-icon': leftIconBtn } : {}),
+          ...(rightIconBtn ? { 'right-icon': rightIconBtn } : {}),
+          ...(ariaLabelBtn ? { 'aria-label': ariaLabelBtn } : {}),
+        }"
         :variant="variant"
         :wrap-label="buttonWrapLabel"
         class="puik-alert__button"
@@ -79,7 +93,6 @@ import { computed } from 'vue';
 import { generateId } from '@prestashopcorp/puik-utils';
 import { PuikButton } from '@prestashopcorp/puik-components/button';
 import { PuikIcon } from '@prestashopcorp/puik-components/icon';
-import { PuikLink } from '@prestashopcorp/puik-components/link';
 import { PuikAriaLive } from '@prestashopcorp/puik-components/base/src/common';
 import { PuikAlertVariants, ICONS } from './alert';
 import type { AlertProps, AlertEmits } from './alert';
@@ -105,8 +118,7 @@ const clickLink = (event: Event) => emit('clickLink', event);
 
 <style lang="scss">
 @use '@prestashopcorp/puik-theme/src/base.scss';
-@use '@prestashopcorp/puik-theme/src/puik-alert.scss';
-@use '@prestashopcorp/puik-theme/src/puik-button.scss';
 @use '@prestashopcorp/puik-theme/src/puik-icon.scss';
-@use '@prestashopcorp/puik-theme/src/puik-link.scss';
+@use '@prestashopcorp/puik-theme/src/puik-button.scss';
+@use '@prestashopcorp/puik-theme/src/puik-alert.scss';
 </style>