diff --git a/packages/components/notification-bar/src/notification-bar.vue b/packages/components/notification-bar/src/notification-bar.vue
index 8722523e..0d0ac7b2 100644
--- a/packages/components/notification-bar/src/notification-bar.vue
+++ b/packages/components/notification-bar/src/notification-bar.vue
@@ -37,6 +37,7 @@
-
-
-
+
+
+
+
diff --git a/packages/components/notification-bar/stories/notification-bar.stories.ts b/packages/components/notification-bar/stories/notification-bar.stories.ts
index 0b703537..52ac90ad 100644
--- a/packages/components/notification-bar/stories/notification-bar.stories.ts
+++ b/packages/components/notification-bar/stories/notification-bar.stories.ts
@@ -13,7 +13,13 @@ export default {
control: 'none',
table: {
type: {
- summary: '{ to: string, prepend?: boolean }',
+ summary: 'NotificationBarTeleport',
+ detail: `
+interface NotificationBarTeleport {
+ to: string
+ prepend?: boolean
+}
+ `,
},
defaultValue: {
summary: null,
@@ -50,8 +56,15 @@ export default {
control: 'object',
table: {
type: {
- summary:
- '{ icon?: string, text: string, link?: { url: string, text: string }}',
+ summary: 'PuikMessagesType',
+ detail: `
+type PuikMessagesType = NotificationBarMessage[]
+interface NotificationBarMessage {
+ icon?: string
+ text: string
+ link?: NotificationLink
+}
+ `,
},
defaultValue: {
summary: null,
@@ -96,12 +109,24 @@ export const Default = {
source: {
code: `
+ const messages: PuikMessagesType = [
+ {
+ icon: "sentiment_satisfied",
+ text: "Promo thèmes: profitez de -20% sur tous les thèmes PrestaShop",
+ link: {
+ url: "#",
+ text: "J'en profite",
+ },
+ },
+ ]
+
+