feat(public-docsite): Add banner to React component pages to promote v9

apps/public-docsite/src/SiteDefinition/SiteDefinition.tsx

@@ -62,21 +62,7 @@ export const SiteDefinition: ISiteDefinition<Platforms> = {
     { from: '#/styles/web/fluent-theme', to: '#/controls/web/themes' },
     { from: '#/examples', to: '#/controls/web' },
   ],
-  messageBars: [
-    {
-      path: '#',
-      text: (
-        <span>
-          🎉 Announcing Fluent UI React v9 stable release! Visit{' '}
-          <a href="https://react.fluentui.dev/" style={{ color: '#006cbe' }}>
-            Fluent UI React v9
-          </a>{' '}
-          to see more.
-        </span>
-      ),
-      sessionStoragePrefix: 'FluentUI9',
-    },
-  ],
+  messageBars: [],
   // This is defined by loadSite() from @fluentui/public-docsite-setup
   versionSwitcherDefinition: window.__versionSwitcherDefinition,
 };

apps/public-docsite/src/pages/Controls/ControlsAreaPage.tsx

@@ -9,6 +9,13 @@ export interface IControlsPageProps extends IPageProps<Platforms> {}
 
 const apiRequireContext = require.context('@fluentui/public-docsite-resources/dist/api/', true, /^(?!references).*/);
 
+const webPlatformBanner = {
+  banner: {
+    title: 'Fluent UI v9',
+    message: 'Check out the all new [Fluent UI version 9](https://react.fluentui.dev)!',
+  },
+};
+
 const ControlsAreaPageBase: React.FunctionComponent<IControlsPageProps> = props => {
   let jsonDocs: IPageJson;
   if (props.platform === 'web' && !props.jsonDocs) {
@@ -25,6 +32,7 @@ const ControlsAreaPageBase: React.FunctionComponent<IControlsPageProps> = props
       subTitle={getSubTitle(props.platform!)}
       jsonDocs={jsonDocs!}
       {...props}
+      {...(props.platform === Platforms.web && webPlatformBanner)}
       versionSwitcherDefinition={
         props.platform === Platforms.web ? SiteDefinition.versionSwitcherDefinition : undefined
       }

change/@fluentui-react-docsite-components-55a098aa-b0e5-41f6-9724-d7b9f4d1ba94.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Add link to reference v9 website next to v8's version selector.",
+  "packageName": "@fluentui/react-docsite-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-docsite-components/src/components/Page/Page.module.scss

@@ -13,6 +13,26 @@ $usageListPadding: 24px;
   max-width: $content-width + ($App-padding-sm * 2);
 }
 
+.banner {
+  background-image: linear-gradient(
+    to right bottom,
+    #c989e8,
+    #cea1f0,
+    #d6b8f7,
+    #dfcefb,
+    #ebe3fe,
+    #ece9ff,
+    #efeeff,
+    #f2f3ff,
+    #e6eaff,
+    #d7e2ff,
+    #c6dbff,
+    #b3d4ff
+  ) !important;
+  padding-top: 10px !important;
+  padding-bottom: 10px !important;
+}
+
 .section {
   background: $ms-color-white;
   padding: $App-padding-sm;

packages/react-docsite-components/src/components/Page/Page.tsx

@@ -21,6 +21,7 @@ import { IPageProps, IPageSectionProps } from './Page.types';
 import * as styles from './Page.module.scss';
 import { sideRailWidth } from '../../styles/constants';
 import { getLinkColors } from '../../utilities/getLinkColors';
+import { BannerSection } from './sections/BannerSection';
 
 const SECTION_STAGGER_INTERVAL = 0.05;
 /** Section key/id prefix for sections which don't have a title */
@@ -148,6 +149,7 @@ export class Page extends React.Component<IPageProps, IPageState> {
       title,
       usage,
       accessibility,
+      banner,
     } = this.props;
 
     const sectionProps: IPageSectionProps = {
@@ -159,6 +161,14 @@ export class Page extends React.Component<IPageProps, IPageState> {
 
     const sections: IPageSectionProps[] = [];
 
+    banner &&
+      sections.push({
+        renderAs: BannerSection,
+        ...sectionProps,
+        content: banner.message,
+        sectionName: banner.title,
+      });
+
     overview &&
       sections.push({ renderAs: OverviewSection, ...sectionProps, sectionName: 'Overview', content: overview });
 

packages/react-docsite-components/src/components/Page/Page.types.ts

@@ -31,6 +31,8 @@ export interface IPageProps<TPlatforms extends string = string> {
   /** Optional title of the file to be passed to edit URL if different than the page title. */
   fileNamePrefix?: string;
 
+  banner?: IBanner;
+
   /** (1) Overview of the page as Markdown string */
   overview?: string;
 
@@ -125,6 +127,11 @@ export interface IExample extends IExampleCardProps {
   view: React.ReactNode;
 }
 
+export interface IBanner {
+  title?: string;
+  message?: string;
+}
+
 export interface IPageSectionProps<TPlatforms extends string = string>
   extends Pick<IPageProps<TPlatforms>, 'title' | 'componentUrl' | 'fileNamePrefix' | 'platform'> {
   /** ID for the section (auto-generated if not specified) */

packages/react-docsite-components/src/components/PageHeader/PageHeader.tsx

@@ -84,22 +84,24 @@ const PageHeaderBase: React.FunctionComponent<IPageHeaderProps> = props => {
         {pageSubTitle && <span className={styles.subTitle}>{pageSubTitle}</span>}
       </h1>
       {versionSwitcherDefinition && (
-        <ActionButton
-          className={styles.versionSelector}
-          menuProps={{
-            gapSpace: 3,
-            beakWidth: 8,
-            isBeakVisible: true,
-            shouldFocusOnMount: true,
-            items: versionSwitcherDefinition.versions,
-            directionalHint: DirectionalHint.bottomCenter,
-            styles: {
-              root: { minWidth: 100 },
-            },
-          }}
-        >
-          {versionSwitcherDefinition.selectedMajorName}
-        </ActionButton>
+        <>
+          <ActionButton
+            className={styles.versionSelector}
+            menuProps={{
+              gapSpace: 3,
+              beakWidth: 8,
+              isBeakVisible: true,
+              shouldFocusOnMount: true,
+              items: versionSwitcherDefinition.versions,
+              directionalHint: DirectionalHint.bottomCenter,
+              styles: {
+                root: { minWidth: 100 },
+              },
+            }}
+          >
+            {versionSwitcherDefinition.selectedMajorName}
+          </ActionButton>
+        </>
       )}
     </header>
   );