mui · joserodolfofreitas · Dec 12, 2022 · Dec 9, 2022 · Dec 9, 2022 · Dec 9, 2022
diff --git a/docs/notifications.json b/docs/notifications.json
@@ -13,5 +13,10 @@
     "id": 71,
     "title": "<b>A major update is coming for MUI X—and you can get involved</b>",
     "text": "Check out the <a style=\"color: inherit;\" data-ga-event-category=\"Blog\" data-ga-event-action=\"notification\" data-ga-event-label=\"mui-x-v6-alpha-zero\" href=\"/blog/mui-x-v6-alpha-zero/\">blog post</a> for details, and let us know what you want to see in MUI X v6."
+  },
+  {
+    "id": 72,
+    "title": "<b>The MUI Developer survey is live!</b>",
+    "text": "Please take a few minutes to complete <a style=\"color: inherit;\" data-ga-event-category=\"Survey\" data-ga-event-action=\"notification\" data-ga-event-label=\"mui-developer-survey-2022\" href=\"https://www.surveymonkey.com/r/mui-developer-survey-2022?source=notification_docs\">the survey</a> and help us shape the roadmap for 2023."
   }
 ]
diff --git a/docs/src/components/banner/AppHeaderBanner.tsx b/docs/src/components/banner/AppHeaderBanner.tsx
@@ -4,7 +4,49 @@ import Link from 'docs/src/modules/components/Link';
 import ROUTES from 'docs/src/route';
 import FEATURE_TOGGLE from 'docs/src/featureToggle';
 
+const getSurveyMessage = () => (
+  <React.Fragment>
+    Influence the future of MUI!&nbsp;&nbsp;📫&nbsp;Please take a few minutes for the&nbsp;
+    <Link
+      href="https://www.surveymonkey.com/r/mui-developer-survey-2022?source=website"
+      target="_blank"
+      color="inherit"
+      underline="always"
+      sx={{
+        '&:hover': {
+          opacity: 0.9,
+        },
+      }}
+    >
+      MUI Developer survey 2022 →
+    </Link>
+  </React.Fragment>
+);
+
+const getDefaultHiringMessage = () => (
+  <React.Fragment>
+    🚀&#160;&#160;We&apos;re hiring a Designer, Full-stack Engineer, React Support Engineer, and
+    more!&nbsp;&#160;
+    <Link
+      href={ROUTES.careers} // Fix me!
+      target="_blank"
+      color="inherit"
+      underline="always"
+      sx={{
+        '&:hover': {
+          opacity: 0.9,
+        },
+      }}
+    >
+      Check the careers page →
+    </Link>
+  </React.Fragment>
+);
+
 export default function AppHeaderBanner() {
+  const showSurveyMessage = true;
+  const bannerMessage = showSurveyMessage ? getSurveyMessage() : getDefaultHiringMessage();
+
   return FEATURE_TOGGLE.enable_website_banner ? (
     <Typography
       fontWeight="medium"
@@ -26,20 +68,7 @@ export default function AppHeaderBanner() {
         }),
       })}
     >
-      🚀&#160;&#160;We&apos;re hiring a Designer, Full-stack Engineer, React Support Engineer, and
-      more!&nbsp;&#160;
-      <Link
-        href={ROUTES.careers} // Fix me!
-        target="_blank"
-        sx={{
-          fontWeight: 'semiBold',
-          textDecoration: 'underline',
-          color: '#fff',
-          '&:hover': { color: 'grey.200' },
-        }}
-      >
-        Check the careers page →
-      </Link>
+      {bannerMessage}
     </Typography>
   ) : null;
 }
diff --git a/docs/src/featureToggle.js b/docs/src/featureToggle.js
@@ -1,6 +1,6 @@
 // need to use commonjs export so that @mui/markdown can use
 module.exports = {
-  enable_website_banner: false,
+  enable_website_banner: true,
   enable_toc_banner: true,
   enable_docsnav_banner: false,
 };
diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts
@@ -570,30 +570,37 @@ export function getThemedComponents(): ThemeOptions {
           underline: 'none',
         },
         styleOverrides: {
-          root: ({ theme }) => [
-            {
-              color: (theme.vars || theme).palette.primary[600],
-              '&:hover': {
-                color: (theme.vars || theme).palette.primary[700],
-              },
-              fontWeight: 700,
-              display: 'inline-flex',
-              alignItems: 'center',
-              '&.MuiTypography-body1 > svg': {
-                marginTop: 2,
-              },
-              '& svg:last-child': {
-                marginLeft: 2,
-              },
+          root: {
+            fontWeight: 700,
+            display: 'inline-flex',
+            alignItems: 'center',
+            '&.MuiTypography-body1 > svg': {
+              marginTop: 2,
             },
-            theme.applyDarkStyles({
-              color: (theme.vars || theme).palette.primary[300],
-              '&:hover': {
-                color: (theme.vars || theme).palette.primary[200],
-              },
-            }),
-          ],
+            '& svg:last-child': {
+              marginLeft: 2,
+            },
+          },
         },
+        variants: [
+          {
+            props: { color: 'primary' },
+            style: ({ theme }) => [
+              {
+                color: (theme.vars || theme).palette.primary[600],
+                '&:hover': {
+                  color: (theme.vars || theme).palette.primary[700],
+                },
+              },
+              theme.applyDarkStyles({
+                color: (theme.vars || theme).palette.primary[300],
+                '&:hover': {
+                  color: (theme.vars || theme).palette.primary[200],
+                },
+              }),
+            ],
+          },
+        ],
       },
       MuiChip: {
         styleOverrides: {

diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js
@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import throttle from 'lodash/throttle';
 import { styled, alpha } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
 import NoSsr from '@mui/material/NoSsr';
 import Link from 'docs/src/modules/components/Link';
 import { useTranslate } from 'docs/src/modules/utils/i18n';
@@ -130,7 +129,8 @@ const shouldShowJobAd = () => {
 export default function AppTableOfContents(props) {
   const { toc } = props;
   const t = useTranslate();
-  const showAddJob = shouldShowJobAd();
+  const showSurveyBanner = true;
+  const showAddJob = shouldShowJobAd() && !showSurveyBanner;
 
   const items = React.useMemo(() => flatten(toc), [toc]);
   const [activeState, setActiveState] = React.useState(null);
@@ -218,15 +218,62 @@ export default function AppTableOfContents(props) {
     <Nav aria-label={t('pageTOC')}>
       <NoSsr>
         <TableOfContentsBanner />
+        {showSurveyBanner && (
+          <Link
+            href="https://www.surveymonkey.com/r/mui-developer-survey-2022?source=docs"
+            target="_blank"
+            sx={(theme) => ({
+              mb: 2,
+              p: 1,
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'flex-start',
+              backgroundColor:
+                theme.palette.mode === 'dark'
+                  ? alpha(theme.palette.primary[900], 0.2)
+                  : alpha(theme.palette.grey[50], 0.4),
+              border: '1px solid',
+              borderColor:
+                theme.palette.mode === 'dark'
+                  ? theme.palette.primaryDark[700]
+                  : theme.palette.grey[200],
+              borderRadius: 1,
+              transitionProperty: 'all',
+              transitionTiming: 'cubic-bezier(0.4, 0, 0.2, 1)',
+              transitionDuration: '150ms',
+              '&:hover, &:focus-visible': {
+                borderColor:
+                  theme.palette.mode === 'dark'
+                    ? theme.palette.primaryDark[500]
+                    : theme.palette.primary[200],
+              },
+            })}
+          >
+            <Typography component="span" variant="button" fontWeight="500" color="text.primary">
+              {'📫 MUI Developer survey 2022 is live!'}
+            </Typography>
+            <Typography
+              component="span"
+              variant="caption"
+              fontWeight="normal"
+              color="text.secondary"
+              sx={{ mt: 0.5 }}
+            >
+              {/* eslint-disable-next-line material-ui/no-hardcoded-labels */}
+              {'Influence the future of MUI. Help define the roadmap for 2023!'}
+            </Typography>
+          </Link>
+        )}
         {showAddJob && (
           <Link
             href="https://jobs.ashbyhq.com/MUI?utm_source=2vOWXNv1PE"
-            underline="none"
+            target="_blank"
             sx={(theme) => ({
               mb: 2,
+              p: 1,
               display: 'flex',
               flexDirection: 'column',
-              overflow: 'auto',
+              alignItems: 'flex-start',
               backgroundColor:
                 theme.palette.mode === 'dark'
                   ? alpha(theme.palette.primary[900], 0.2)
@@ -248,21 +295,19 @@ export default function AppTableOfContents(props) {
               },
             })}
           >
-            <Box sx={{ p: 1 }}>
-              <Typography component="span" variant="button" fontWeight="500" color="text.primary">
-                {'🚀 Join the MUI team!'}
-              </Typography>
-              <Typography
-                component="span"
-                variant="caption"
-                fontWeight="normal"
-                color="text.secondary"
-                sx={{ mt: 0.5 }}
-              >
-                {/* eslint-disable-next-line material-ui/no-hardcoded-labels */}
-                {"We're looking for React Engineers and other amazing roles－come find out more!"}
-              </Typography>
-            </Box>
+            <Typography component="span" variant="button" fontWeight="500" color="text.primary">
+              {'🚀 Join the MUI team!'}
+            </Typography>
+            <Typography
+              component="span"
+              variant="caption"
+              fontWeight="normal"
+              color="text.secondary"
+              sx={{ mt: 0.5 }}
+            >
+              {/* eslint-disable-next-line material-ui/no-hardcoded-labels */}
+              {"We're looking for React Engineers and other amazing roles－come find out more!"}
+            </Typography>
           </Link>
         )}
       </NoSsr>