From bcbe0a7e1e1056ca7642e538b431077d98be8f86 Mon Sep 17 00:00:00 2001
From: Francis Thibault <francis.thibault@gmail.com>
Date: Tue, 24 Oct 2023 16:06:21 -0400
Subject: [PATCH 1/2] added banner to redirect to Orbiter when suitable

---
 .storybook/components/banner/Banner.css       |  5 +++++
 .storybook/components/banner/Banner.tsx       | 19 +++++++++++++++++++
 .storybook/components/banner/index.ts         |  1 +
 .storybook/components/index.ts                |  1 +
 docs/getting-started/Installation.stories.mdx |  4 +++-
 5 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 .storybook/components/banner/Banner.css
 create mode 100644 .storybook/components/banner/Banner.tsx
 create mode 100644 .storybook/components/banner/index.ts

diff --git a/.storybook/components/banner/Banner.css b/.storybook/components/banner/Banner.css
new file mode 100644
index 000000000..49cc429eb
--- /dev/null
+++ b/.storybook/components/banner/Banner.css
@@ -0,0 +1,5 @@
+.o-ui-sb-banner {
+    background: var(--o-ui-bg-alias-warning-light);
+    border-radius: var(--o-ui-br-3);
+    color: var(--hop-decorative-option6-text);
+}
diff --git a/.storybook/components/banner/Banner.tsx b/.storybook/components/banner/Banner.tsx
new file mode 100644
index 000000000..069dfca5a
--- /dev/null
+++ b/.storybook/components/banner/Banner.tsx
@@ -0,0 +1,19 @@
+import "./Banner.css";
+
+import { Div, DivProps } from "@components/html";
+import { mergeProps } from "@components/shared";
+
+export function Banner({ children, ...rest }: DivProps) {
+    return (
+        <Div
+            {...mergeProps(
+                rest,
+                {
+                    className: "highlight o-ui-sb-banner"
+                }
+            )}
+        >
+            {children}
+        </Div>
+    );
+}
diff --git a/.storybook/components/banner/index.ts b/.storybook/components/banner/index.ts
new file mode 100644
index 000000000..630d3e35f
--- /dev/null
+++ b/.storybook/components/banner/index.ts
@@ -0,0 +1 @@
+export * from "./Banner";
diff --git a/.storybook/components/index.ts b/.storybook/components/index.ts
index e88d8cf0d..14d76d39a 100644
--- a/.storybook/components/index.ts
+++ b/.storybook/components/index.ts
@@ -10,3 +10,4 @@ export * from "./snippet";
 export * from "./themed-snippet";
 export * from "./package-installation-snippet";
 export * from "./preview";
+export * from "./banner";
diff --git a/docs/getting-started/Installation.stories.mdx b/docs/getting-started/Installation.stories.mdx
index bf3e91f6f..99c8da014 100644
--- a/docs/getting-started/Installation.stories.mdx
+++ b/docs/getting-started/Installation.stories.mdx
@@ -1,5 +1,5 @@
 import { Meta } from "@storybook/addon-docs";
-import { PackageInstallationSnippet } from "@stories/components";
+import { PackageInstallationSnippet, Banner, ExternalLink } from "@stories/components";
 import { Message } from "@components/message";
 
 <Meta
@@ -9,6 +9,8 @@ import { Message } from "@components/message";
 
 # Installation
 
+<Banner>If you are starting a new project with Workleap, you should use <ExternalLink href="https://wl-orbiter-website.netlify.app/">Orbiter</ExternalLink>.</Banner>
+
 Multiple [NPM packages](https://www.npmjs.com/settings/orbit-ui/packages) compose Orbit. By creating a bundle package named [@sharegate/orbit-ui](https://www.npmjs.com/package/@sharegate/orbit-ui), we simplify the installation process and allow you to install Orbit with just a single package.
 
 > We assume you've already set up [react](https://www.npmjs.com/package/react) and [react-dom](https://www.npmjs.com/package/react-dom). Otherwise, you'll get a warning at installation.

From 1a663d19e1476e0528039ea43b4f16580cf543ac Mon Sep 17 00:00:00 2001
From: Francis Thibault <francis.thibault@gmail.com>
Date: Tue, 24 Oct 2023 16:18:15 -0400
Subject: [PATCH 2/2] removed banner color declaration

---
 .storybook/components/banner/Banner.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.storybook/components/banner/Banner.css b/.storybook/components/banner/Banner.css
index 49cc429eb..f0e9dbc11 100644
--- a/.storybook/components/banner/Banner.css
+++ b/.storybook/components/banner/Banner.css
@@ -1,5 +1,4 @@
 .o-ui-sb-banner {
     background: var(--o-ui-bg-alias-warning-light);
     border-radius: var(--o-ui-br-3);
-    color: var(--hop-decorative-option6-text);
 }