Merge pull request #1235 from gsoft-inc/feature/banner-redirect

added banner to redirect to Orbiter when suitable

.storybook/components/banner/Banner.css

@@ -0,0 +1,4 @@
+.o-ui-sb-banner {
+ background: var(--o-ui-bg-alias-warning-light);
+ border-radius: var(--o-ui-br-3);
+}

.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>
+ );
+}

.storybook/components/banner/index.ts

@@ -0,0 +1 @@
+export * from "./Banner";

.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";

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.