chore: merge main and fix conflict in alert.stories.ts file

PrestaShopCorp · Nov 19, 2024 · 4018d0a · 4018d0a
2 parents 64482a4 + e949052
commit 4018d0a
Show file tree

Hide file tree

Showing 12 changed files with 1,188 additions and 225 deletions.
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
@@ -20,14 +20,14 @@ jobs:
     # Job steps
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
       - name: Setup node version
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
@@ -42,7 +42,7 @@ jobs:
 
         # 👇 Adds Chromatic as a step in the workflow
       - name: Publish to Chromatic
-        uses: chromaui/action@v1
+        uses: chromaui/action@latest
         # Chromatic GitHub Action options
         with:
           # 👇 Chromatic projectToken, refer to the manage page to obtain it.

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -9,24 +9,24 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node: [18]
+        node: [20]
 
     steps:
       - name: Checkout 🛎
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
         with:
           version: 9.1.2
 
       - name: Setup node env 🏗
-        uses: actions/setup-node@v3.6.0
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node }}
 
       - name: Cache ~/.pnpm-store 📦
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         env:
           cache-name: cache-pnpm-store
         with:

diff --git a/RELEASE-NOTES-V2.md b/RELEASE-NOTES-V2.md
@@ -22,7 +22,7 @@ Here is the list of available components in the Vue and Web-Components version o
 | --------------------------- | -------------- | -------------- | ---------------- |
 | Accordion                   | ✅  | ✅            |                  |
 | Accordion-group             | ✅  | ✅            |                  |
-| Alert                       | ✅  | ✅            |                  |
+| Alert                       | ✅  | ✅            |   Design:  The `puik-link` has replaced by a Link Button (text variant button) - [see updated stories for use](https://uikit.prestashop.com/?path=/docs/components-alert--docs)      |
 | Avatar                      | ✅  | ✅            |                  |
 | Badge                       | ✅  | ✅            |                  |
 | Breadcrumb                  | ✅  | ✅            |                  |

diff --git a/docs/package.json b/docs/package.json
@@ -21,7 +21,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "storybook": "^7.6.19",
-    "vite": "^5.2.11"
+    "vite": "^5.2.14"
   },
   "dependencies": {
     "@prestashopcorp/puik-components": "workspace:*",

diff --git a/package.json b/package.json
@@ -76,7 +76,7 @@
     "lint-staged": "^15.2.2",
     "sass": "^1.77.1",
     "typescript": "^5.4.5",
-    "vite": "^5.2.11",
+    "vite": "^5.2.14",
     "vite-plugin-dts": "^3.9.1",
     "vitest": "^1.6.0",
     "vue": "3.3.10"

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>