[EUI+] Implement welcome banner

packages/website/src/components/homepage/banner/index.tsx

@@ -0,0 +1,59 @@
+import { css } from '@emotion/react';
+import {
+  EuiCallOut,
+  EuiLink,
+  EuiText,
+  useEuiMemoizedStyles,
+  UseEuiTheme,
+} from '@elastic/eui';
+import { useState } from 'react';
+
+const STORAGE_KEY = 'docs_page_welcome_notification';
+const STORAGE_VALUE_DISMISSED = 'dismissed';
+
+const getStyles = ({ euiTheme }: UseEuiTheme) => ({
+  banner: css`
+    .euiLink {
+      color: ${euiTheme.colors.warningText};
+      text-decoration: underline;
+    }
+  `,
+});
+
+export const HomepageBanner = () => {
+  const [isVisible, setVisible] = useState(() => {
+    const storageItem = localStorage.getItem(STORAGE_KEY);
+
+    if (storageItem && storageItem === STORAGE_VALUE_DISMISSED) {
+      return false;
+    }
+
+    return true;
+  });
+
+  const styles = useEuiMemoizedStyles(getStyles);
+
+  if (!isVisible) return null;
+
+  const handleOnDismiss = () => {
+    localStorage.setItem(STORAGE_KEY, STORAGE_VALUE_DISMISSED);
+    setVisible(false);
+  };
+
+  return (
+    <EuiCallOut color="warning" onDismiss={handleOnDismiss} css={styles.banner}>
+      <EuiText color="warning" size="s">
+        Welcome to the new EUI documentation. Enjoy the fresh updates! We are
+        still refining the site, so please{' '}
+        <EuiLink
+          href="https://github.com/elastic/eui/issues/new/choose"
+          title="EUI issues"
+          target="_blank"
+        >
+          let us know if you find any issues
+        </EuiLink>
+        {'. '}
+      </EuiText>
+    </EuiCallOut>
+  );
+};

packages/website/src/pages/index.tsx

@@ -8,12 +8,14 @@
 
 import { css } from '@emotion/react';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import useIsBrowser from '@docusaurus/useIsBrowser';
 import Layout from '@theme/Layout';
 import { useEuiMemoizedStyles, UseEuiTheme } from '@elastic/eui';
 
 import { HomepageHeader } from '../components/homepage/header';
 import { HomepageUsers } from '../components/homepage/users';
 import { HomepageHighlights } from '../components/homepage/highlights';
+import { HomepageBanner } from '../components/homepage/banner';
 
 const getStyles = ({ euiTheme }: UseEuiTheme) => ({
   main: css`
@@ -49,17 +51,21 @@ const getStyles = ({ euiTheme }: UseEuiTheme) => ({
 
 export default function Home(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
+  const isBrowser = useIsBrowser();
   const styles = useEuiMemoizedStyles(getStyles);
 
   return (
-    <Layout title={siteConfig.title} description={siteConfig.tagline}>
-      <main css={styles.main}>
-        <HomepageHeader />
+    <>
+      {isBrowser && <HomepageBanner />}
+      <Layout title={siteConfig.title} description={siteConfig.tagline}>
+        <main css={styles.main}>
+          <HomepageHeader />
 
-        <HomepageHighlights />
+          <HomepageHighlights />
 
-        <HomepageUsers />
-      </main>
-    </Layout>
+          <HomepageUsers />
+        </main>
+      </Layout>
+    </>
   );
 }