diff --git a/packages/core/.storybook/main.ts b/packages/core/.storybook/main.ts
index 1821352210..9c23acc95e 100644
--- a/packages/core/.storybook/main.ts
+++ b/packages/core/.storybook/main.ts
@@ -20,7 +20,8 @@ const getAddons = () => {
},
"storybook-addon-playground",
"@chromatic-com/storybook",
- "@storybook/addon-storysource"
+ "@storybook/addon-storysource",
+ "./notifications-addon"
];
if (process.env.NODE_ENV !== "production") {
diff --git a/packages/core/.storybook/notifications-addon/NotificationLink.jsx b/packages/core/.storybook/notifications-addon/NotificationLink.jsx
new file mode 100644
index 0000000000..d857893422
--- /dev/null
+++ b/packages/core/.storybook/notifications-addon/NotificationLink.jsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+const NotificationLink = ({ href, children }) => {
+ return (
+
+ {children}
+
+ );
+};
+
+export default NotificationLink;
diff --git a/packages/core/.storybook/notifications-addon/NotificationText.jsx b/packages/core/.storybook/notifications-addon/NotificationText.jsx
new file mode 100644
index 0000000000..6d9714e851
--- /dev/null
+++ b/packages/core/.storybook/notifications-addon/NotificationText.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const NotificationText = ({ href, children }) => {
+ return {children};
+};
+
+export default NotificationText;
diff --git a/packages/core/.storybook/notifications-addon/consts.js b/packages/core/.storybook/notifications-addon/consts.js
new file mode 100644
index 0000000000..b0b1724e8b
--- /dev/null
+++ b/packages/core/.storybook/notifications-addon/consts.js
@@ -0,0 +1,2 @@
+export const ADDON_ID = "@vibe/storybook-addon-notifications";
+export const STORAGE_KEY = `${ADDON_ID}-dismissed`;
diff --git a/packages/core/.storybook/notifications-addon/index.js b/packages/core/.storybook/notifications-addon/index.js
new file mode 100644
index 0000000000..1faf7628c5
--- /dev/null
+++ b/packages/core/.storybook/notifications-addon/index.js
@@ -0,0 +1,7 @@
+function managerEntries(entry = []) {
+ return [...entry, require.resolve("./manager.js")];
+}
+
+module.exports = {
+ managerEntries
+};
diff --git a/packages/core/.storybook/notifications-addon/manager.jsx b/packages/core/.storybook/notifications-addon/manager.jsx
new file mode 100644
index 0000000000..bf9841cbcc
--- /dev/null
+++ b/packages/core/.storybook/notifications-addon/manager.jsx
@@ -0,0 +1,47 @@
+import React from "react";
+import { addons } from "@storybook/manager-api";
+import { ADDON_ID, STORAGE_KEY } from "./consts";
+import NotificationLink from "./NotificationLink";
+import NotificationText from "./NotificationText";
+
+addons.register(ADDON_ID, api => {
+ const notifications = [
+ {
+ id: "welcome-v3",
+ content: {
+ headline: "Welcome to Vibe 3!",
+ subHeadline: (
+
+ This is our new major. If you're looking for Vibe v2 docs, please{" "}
+ click here
+
+ )
+ }
+ },
+ {
+ id: "new-modal",
+ content: {
+ headline: "Did you got to check our new Modal?",
+ subHeadline: "Click here to go to the documentation"
+ },
+ link: "/docs/feedback-modal-new"
+ }
+ ];
+
+ const dismissedNotifications = JSON.parse(localStorage.getItem(STORAGE_KEY) || "[]");
+
+ notifications
+ .filter(({ id }) => !dismissedNotifications.includes(id))
+ .reverse()
+ .forEach(({ id, content, link }) => {
+ api.addNotification({
+ id,
+ content,
+ link,
+ onClear: options => {
+ if (!options.dismissed) return;
+ localStorage.setItem(STORAGE_KEY, JSON.stringify([...dismissedNotifications, id]));
+ }
+ });
+ });
+});