[website] Add banners and notification for 2025 Developer Survey (#45280

) (#45282)
mui · Feb 10, 2025 · 8efd596 · 8efd596
1 parent 4fbc98c
commit 8efd596
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 19 deletions.
diff --git a/docs/notifications.json b/docs/notifications.json
@@ -18,5 +18,10 @@
     "id": 85,
     "title": "MUI X v8 alpha",
     "text": "Check our plans for the upcoming stable in the <a style=\"color: inherit;\" data-ga-event-category=\"Announcement\" data-ga-event-action=\"notification\" data-ga-event-label=\"mui-x-v8-alpha-zero\" href=\"https://mui.com/blog/mui-x-v8-alpha-zero/\">announcement blog post</a>."
+  },
+  {
+    "id": 86,
+    "title": "Influence the roadmap for 2025",
+    "text": "Take a few minutes to share your feedback and expectations in the <a style=\"color: inherit;\" data-ga-event-category=\"Announcement\" data-ga-event-action=\"notification\" data-ga-event-label=\"mui-survey\" href=\"https://tally.so/r/mObbvk?source=docs-notification\">Developer Survey</a>."
   }
 ]
diff --git a/docs/src/components/banner/AppFrameBanner.tsx b/docs/src/components/banner/AppFrameBanner.tsx
@@ -5,7 +5,7 @@ import FEATURE_TOGGLE from 'docs/src/featureToggle';
 import PageContext from 'docs/src/modules/components/PageContext';
 import { convertProductIdToName } from 'docs/src/modules/components/AppSearch';
 
-const showSurveyMessage = false;
+const showSurveyMessage = true;
 
 function isBlackFriday() {
   const today = Date.now();
@@ -38,8 +38,8 @@ export default function AppFrameBanner() {
   let href = '';
 
   if (showSurveyMessage) {
-    message = `Influence ${productName}'s 2024 roadmap! Participate in the latest Developer Survey`;
-    href = 'https://tally.so/r/3Ex4PN?source=website';
+    message = `🚀 Influence ${productName}'s 2025 roadmap! Participate in the latest Developer Survey`;
+    href = 'https://tally.so/r/mObbvk?source=website';
   } else if (mounted && isBlackFriday()) {
     message = `Black Friday is here! Don't miss out on the best offers of the year.`;
     href = 'https://mui.com/store/bundles/?deal=black-friday&from=docs';

diff --git a/docs/src/components/banner/AppHeaderBanner.tsx b/docs/src/components/banner/AppHeaderBanner.tsx
@@ -1,24 +1,34 @@
 import * as React from 'react';
 import Typography from '@mui/material/Typography';
+import { Theme } from '@mui/material/styles';
 import { Link } from '@mui/docs/Link';
 import ROUTES from 'docs/src/route';
 import FEATURE_TOGGLE from 'docs/src/featureToggle';
 
+const linkStyleOverrides = (theme: Theme) => ({
+  color: 'inherit',
+  textDecorationColor: 'currentColor',
+  '&:hover': {
+    color: (theme.vars || theme).palette.primary[200],
+  },
+  ...theme.applyDarkStyles({
+    color: 'inherit',
+    '&:hover': {
+      color: (theme.vars || theme).palette.primary[200],
+    },
+  }),
+});
+
 function getSurveyMessage() {
   return (
     <React.Fragment>
-      {`🚀 Influence MUI's 2024 roadmap! Participate in the latest`}
+      {`🚀 Influence MUI's 2025 roadmap! Participate in the latest`}
       &nbsp;
       <Link
-        href="https://tally.so/r/3Ex4PN?source=website"
+        href="https://tally.so/r/mObbvk?source=website"
         target="_blank"
         underline="always"
-        sx={{
-          color: 'inherit',
-          '&:hover': {
-            opacity: 0.9,
-          },
-        }}
+        sx={linkStyleOverrides}
       >
         Developer Survey →
       </Link>
@@ -36,12 +46,7 @@ function getDefaultHiringMessage() {
         href={ROUTES.careers}
         target="_blank"
         underline="always"
-        sx={{
-          color: 'inherit',
-          '&:hover': {
-            opacity: 0.9,
-          },
-        }}
+        sx={linkStyleOverrides}
       >
         Check the careers page →
       </Link>
@@ -50,7 +55,7 @@ function getDefaultHiringMessage() {
 }
 
 export default function AppHeaderBanner() {
-  const showSurveyMessage = false;
+  const showSurveyMessage = true;
   const bannerMessage = showSurveyMessage ? getSurveyMessage() : getDefaultHiringMessage();
 
   return FEATURE_TOGGLE.enable_website_banner ? (

diff --git a/docs/src/featureToggle.js b/docs/src/featureToggle.js
@@ -1,6 +1,6 @@
 // need to use commonjs export so that @mui/internal-markdown can use
 module.exports = {
-  enable_website_banner: false,
+  enable_website_banner: true,
   enable_docsnav_banner: true,
   enable_job_banner: false,
 };