From 95eac1233656ddb061ba42dca386f0fab701b164 Mon Sep 17 00:00:00 2001
From: danilo leal <67129314+danilo-leal@users.noreply.github.com>
Date: Tue, 14 Dec 2021 05:06:57 -0300
Subject: [PATCH] [survey] Remove survey promotion items (#30122)

---
 docs/notifications.json                       |  5 --
 docs/pages/about.tsx                          |  4 +-
 docs/pages/careers.tsx                        |  2 +
 docs/pages/core.tsx                           |  4 +-
 docs/pages/design-kits.tsx                    |  4 +-
 docs/pages/index.tsx                          |  4 +-
 docs/pages/pricing.tsx                        |  4 +-
 docs/pages/templates.tsx                      |  4 +-
 docs/pages/x.tsx                              |  4 +-
 .../AppHeaderBanner.tsx}                      | 16 ++---
 .../banner/TableOfContentsBanner.tsx          | 61 ++++++++++++++++++
 docs/src/featureToggle.ts                     |  1 +
 .../modules/components/AppTableOfContents.js  | 63 +------------------
 docs/src/route.ts                             |  2 -
 14 files changed, 89 insertions(+), 89 deletions(-)
 rename docs/src/components/{home/SurveyBanner.js => banner/AppHeaderBanner.tsx} (76%)
 create mode 100644 docs/src/components/banner/TableOfContentsBanner.tsx

diff --git a/docs/notifications.json b/docs/notifications.json
index a157b64e73aa36..9a0ee3b82c8d71 100644
--- a/docs/notifications.json
+++ b/docs/notifications.json
@@ -8,10 +8,5 @@
   {
     "id": 53,
     "text": "You can <a style=\"color: inherit;\" target=\"_blank\" rel=\"noopener\" href=\"https://twitter.com/MaterialUI\">follow us on Twitter</a> to receive exclusive tips and updates about MUI and the React ecosystem."
-  },
-  {
-    "id": 55,
-    "title": "2021 MUI developer survey",
-    "text": "Help shape the future of MUI! 🚀<br />Please take a few minutes to complete the <a style=\"color: inherit;\" target=\"_blank\" rel=\"noopener\" href=\"https://mui-org.typeform.com/2021-dev-survey\">2021 MUI developer survey</a>."
   }
 ]
diff --git a/docs/pages/about.tsx b/docs/pages/about.tsx
index c4e15d92675ed3..3381591fda59f3 100644
--- a/docs/pages/about.tsx
+++ b/docs/pages/about.tsx
@@ -28,7 +28,7 @@ import ForumRoundedIcon from '@mui/icons-material/ForumRounded';
 import PeopleRoundedIcon from '@mui/icons-material/PeopleRounded';
 import LocalAtmRoundedIcon from '@mui/icons-material/LocalAtmRounded';
 import BrandingProvider from 'docs/src/BrandingProvider';
-import SurveyBanner from 'docs/src/components/home/SurveyBanner';
+import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
 
 interface Profile {
   /**
@@ -745,7 +745,7 @@ export default function About() {
         title="About us - MUI"
         description="MUI (formerly Material-UI) started back in 2014 to unify React and Material Design. Today, MUI has grown to become one of the world's most popular React libraries – used by a vibrant community of more than 2M developers in over 180 countries."
       />
-      <SurveyBanner />
+      <AppHeaderBanner />
       <AppHeader />
       <main>
         <AboutContent />
diff --git a/docs/pages/careers.tsx b/docs/pages/careers.tsx
index 209b7f75e95730..2a030817d576be 100644
--- a/docs/pages/careers.tsx
+++ b/docs/pages/careers.tsx
@@ -23,6 +23,7 @@ import MuiAccordion from '@mui/material/Accordion';
 import MuiAccordionSummary from '@mui/material/AccordionSummary';
 import MuiAccordionDetail from '@mui/material/AccordionDetails';
 import ROUTES from 'docs/src/route';
+import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
 
 interface RoleProps {
   description: string;
@@ -529,6 +530,7 @@ export default function Careers() {
         title="Careers - MUI"
         description="MUI (formerly Material-UI) started back in 2014 to unify React and Material Design. Today, MUI has grown to become one of the world's most popular React libraries – used by a vibrant community of more than 2M developers in over 180 countries."
       />
+      <AppHeaderBanner />
       <AppHeader />
       <main>
         <CareersContent />
diff --git a/docs/pages/core.tsx b/docs/pages/core.tsx
index e8e4f1daed1be4..efdee59ddc8c1a 100644
--- a/docs/pages/core.tsx
+++ b/docs/pages/core.tsx
@@ -10,7 +10,7 @@ import CoreStyling from 'docs/src/components/productCore/CoreStyling';
 import CoreHeroEnd from 'docs/src/components/productCore/CoreHeroEnd';
 import References, { CORE_CUSTOMERS } from 'docs/src/components/home/References';
 import AppFooter from 'docs/src/layouts/AppFooter';
-import SurveyBanner from 'docs/src/components/home/SurveyBanner';
+import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
 
 export default function Home() {
   return (
@@ -21,7 +21,7 @@ export default function Home() {
         card="/static/social-previews/core-preview.jpg"
       />
       <CssBaseline />
-      <SurveyBanner />
+      <AppHeaderBanner />
       <AppHeader />
       <main>
         <CoreHero />
diff --git a/docs/pages/design-kits.tsx b/docs/pages/design-kits.tsx
index 7ae1b64b969fe1..095448f25139a6 100644
--- a/docs/pages/design-kits.tsx
+++ b/docs/pages/design-kits.tsx
@@ -11,7 +11,7 @@ import Testimonials from 'docs/src/components/home/Testimonials';
 import HeroEnd from 'docs/src/components/home/HeroEnd';
 import BrandingProvider from 'docs/src/BrandingProvider';
 import References, { DESIGNKITS_CUSTOMERS } from 'docs/src/components/home/References';
-import SurveyBanner from 'docs/src/components/home/SurveyBanner';
+import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
 
 export default function DesignKits() {
   return (
@@ -21,7 +21,7 @@ export default function DesignKits() {
         description="Pick your favorite design tool to enjoy and use MUI components. Boost consistency and facilitate communication when working with developers."
         card="/static/social-previews/designkits-preview.jpg"
       />
-      <SurveyBanner />
+      <AppHeaderBanner />
       <AppHeader />
       <main>
         <DesignKitHero />
diff --git a/docs/pages/index.tsx b/docs/pages/index.tsx
index bc65a083979870..305bcb85ad7a5e 100644
--- a/docs/pages/index.tsx
+++ b/docs/pages/index.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import Head from 'docs/src/modules/components/Head';
 import NoSsr from '@mui/material/NoSsr';
 import Divider from '@mui/material/Divider';
-import SurveyBanner from 'docs/src/components/home/SurveyBanner';
 import AppHeader from 'docs/src/layouts/AppHeader';
 import Hero from 'docs/src/components/home/Hero';
 import References, { CORE_CUSTOMERS } from 'docs/src/components/home/References';
@@ -15,6 +14,7 @@ import HeroEnd from 'docs/src/components/home/HeroEnd';
 import AppFooter from 'docs/src/layouts/AppFooter';
 import BrandingProvider from 'docs/src/BrandingProvider';
 import NewsletterToast from 'docs/src/components/home/NewsletterToast';
+import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
 
 export default function Home() {
   return (
@@ -26,7 +26,7 @@ export default function Home() {
       <NoSsr>
         <NewsletterToast />
       </NoSsr>
-      <SurveyBanner />
+      <AppHeaderBanner />
       <AppHeader />
       <main>
         <Hero />
diff --git a/docs/pages/pricing.tsx b/docs/pages/pricing.tsx
index 308aa90a09ce4a..161305221d35a1 100644
--- a/docs/pages/pricing.tsx
+++ b/docs/pages/pricing.tsx
@@ -13,7 +13,7 @@ import FAQ from 'docs/src/components/pricing/FAQ';
 import HeroEnd from 'docs/src/components/home/HeroEnd';
 import AppFooter from 'docs/src/layouts/AppFooter';
 import BrandingProvider from 'docs/src/BrandingProvider';
-import SurveyBanner from 'docs/src/components/home/SurveyBanner';
+import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
 
 export default function Pricing() {
   return (
@@ -22,7 +22,7 @@ export default function Pricing() {
         title="Pricing - MUI"
         description="The community edition lets you get going right away. Switch to a commercial plan for more components & professional support."
       />
-      <SurveyBanner />
+      <AppHeaderBanner />
       <AppHeader />
       <main>
         <HeroPricing />
diff --git a/docs/pages/templates.tsx b/docs/pages/templates.tsx
index 77f5320ae380dc..499cba61452c02 100644
--- a/docs/pages/templates.tsx
+++ b/docs/pages/templates.tsx
@@ -10,7 +10,7 @@ import Testimonials from 'docs/src/components/home/Testimonials';
 import HeroEnd from 'docs/src/components/home/HeroEnd';
 import BrandingProvider from 'docs/src/BrandingProvider';
 import References, { TEMPLATES_CUSTOMERS } from 'docs/src/components/home/References';
-import SurveyBanner from 'docs/src/components/home/SurveyBanner';
+import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
 
 export default function Templates() {
   return (
@@ -20,7 +20,7 @@ export default function Templates() {
         description="A collection of 4.5 average rating templates, selected and curated by MUI's team of maintainers to get your projects up and running today."
         card="/static/social-previews/templates-preview.jpg"
       />
-      <SurveyBanner />
+      <AppHeaderBanner />
       <AppHeader />
       <main>
         <TemplateHero />
diff --git a/docs/pages/x.tsx b/docs/pages/x.tsx
index daefa82fa003ea..534324b0ee989e 100644
--- a/docs/pages/x.tsx
+++ b/docs/pages/x.tsx
@@ -11,7 +11,7 @@ import XRoadmap from 'docs/src/components/productX/XRoadmap';
 import References, { ADVANCED_CUSTOMERS } from 'docs/src/components/home/References';
 import AppFooter from 'docs/src/layouts/AppFooter';
 import XPlans from 'docs/src/components/productX/XPlans';
-import SurveyBanner from 'docs/src/components/home/SurveyBanner';
+import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
 
 export default function Home() {
   return (
@@ -22,7 +22,7 @@ export default function Home() {
         card="/static/social-previews/x-preview.jpg"
       />
       <CssBaseline />
-      <SurveyBanner />
+      <AppHeaderBanner />
       <AppHeader />
       <main>
         <XHero />
diff --git a/docs/src/components/home/SurveyBanner.js b/docs/src/components/banner/AppHeaderBanner.tsx
similarity index 76%
rename from docs/src/components/home/SurveyBanner.js
rename to docs/src/components/banner/AppHeaderBanner.tsx
index 6048162556d722..9c923fa5c76914 100644
--- a/docs/src/components/home/SurveyBanner.js
+++ b/docs/src/components/banner/AppHeaderBanner.tsx
@@ -3,9 +3,10 @@ import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import Link from 'docs/src/modules/components/Link';
 import ROUTES from 'docs/src/route';
+import FEATURE_TOGGLE from 'docs/src/featureToggle';
 
-export default function SurveyBanner() {
-  return (
+export default function AppHeaderBanner() {
+  return FEATURE_TOGGLE.enable_website_banner ? (
     <Box
       sx={{
         p: 1.5,
@@ -25,19 +26,18 @@ export default function SurveyBanner() {
           color: '#fff',
         }}
       >
-        Help shape the future of MUI! &nbsp;🚀 &nbsp;&nbsp;&nbsp;Please take a few minutes to
-        complete the{' '}
+        Fix me! &nbsp;
         <Link
-          href={ROUTES.survey2021Website}
+          href={ROUTES.home} // Fix me!
           target="_blank"
-          data-ga-event-category="survey-2021"
+          data-ga-event-category="$event-category" // Fix me!
           data-ga-event-action="click"
           data-ga-event-label="header"
           sx={{ color: '#fff', textDecoration: 'underline' }}
         >
-          2021 MUI developer survey &#8594;
+          Fix me!
         </Link>
       </Typography>
     </Box>
-  );
+  ) : null;
 }
diff --git a/docs/src/components/banner/TableOfContentsBanner.tsx b/docs/src/components/banner/TableOfContentsBanner.tsx
new file mode 100644
index 00000000000000..b6ac915a18cfda
--- /dev/null
+++ b/docs/src/components/banner/TableOfContentsBanner.tsx
@@ -0,0 +1,61 @@
+import * as React from 'react';
+import Typography from '@mui/material/Typography';
+import Link from 'docs/src/modules/components/Link';
+import ROUTES from 'docs/src/route';
+import FEATURE_TOGGLE from 'docs/src/featureToggle';
+
+export default function TableOfContentsBanner() {
+  return FEATURE_TOGGLE.enable_website_banner ? (
+    <Link
+      href={ROUTES.home} // Fix me!
+      target="_blank"
+      data-ga-event-category="$event-category" // Fix me!
+      data-ga-event-action="click"
+      data-ga-event-label="table-contents"
+      sx={(theme) => ({
+        mb: 2,
+        p: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'start',
+        background:
+          theme.palette.mode === 'dark'
+            ? `linear-gradient(90deg, ${theme.palette.primary[900]}, ${theme.palette.primary[600]} 120%)`
+            : `linear-gradient(-90deg, ${theme.palette.primary[700]}, ${theme.palette.primary[500]} 120%)`,
+        borderRadius: 1,
+        transitionProperty: 'all',
+        transitionTiming: 'cubic-bezier(0.4, 0, 0.2, 1)',
+        transitionDuration: '200ms',
+        '&:hover, &:focus-visible': {
+          boxShadow:
+            theme.palette.mode === 'dark'
+              ? '1px 1px 20px 0 rgb(2 2 2 / 50%)'
+              : '1px 1px 20px 0 rgb(90 105 120 / 30%)',
+        },
+      })}
+    >
+      <Typography component="span" variant="body1" fontWeight="bold" sx={{ color: '#fff' }}>
+        Fix me!
+        <br />
+      </Typography>
+      <Typography component="span" variant="body2" fontWeight="medium" sx={{ color: 'primary.50' }}>
+        Fix me!
+        <br />
+      </Typography>
+      <Typography
+        component="span"
+        variant="caption"
+        fontWeight="normal"
+        sx={{
+          mt: 1,
+          pt: 1,
+          color: 'primary.50',
+          borderTop: 1,
+          borderColor: 'primary.400',
+        }}
+      >
+        Fix me!
+      </Typography>
+    </Link>
+  ) : null;
+}
diff --git a/docs/src/featureToggle.ts b/docs/src/featureToggle.ts
index 3e65c454889e94..7a161d4a896c51 100644
--- a/docs/src/featureToggle.ts
+++ b/docs/src/featureToggle.ts
@@ -1,5 +1,6 @@
 const FEATURE_TOGGLE = {
   nav_products: true,
+  enable_website_banner: false,
 };
 
 export default FEATURE_TOGGLE;
diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js
index cdc1f94d4590c5..69c0400e446de0 100644
--- a/docs/src/modules/components/AppTableOfContents.js
+++ b/docs/src/modules/components/AppTableOfContents.js
@@ -4,11 +4,11 @@ import PropTypes from 'prop-types';
 import throttle from 'lodash/throttle';
 import { styled, alpha } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
+import NoSsr from '@mui/material/NoSsr';
 import Link from 'docs/src/modules/components/Link';
 import PageContext from 'docs/src/modules/components/PageContext';
 import { useTranslate } from 'docs/src/modules/utils/i18n';
-import NoSsr from '@mui/material/NoSsr';
-import ROUTES from 'docs/src/route';
+import TableOfContentsBanner from 'docs/src/components/banner/TableOfContentsBanner';
 
 const Nav = styled('nav')(({ theme }) => {
   return {
@@ -211,64 +211,7 @@ export default function AppTableOfContents(props) {
   return (
     <Nav aria-label={t('pageTOC')}>
       <NoSsr>
-        <Link
-          href={ROUTES.survey2021Docs}
-          target="_blank"
-          data-ga-event-category="survey-2021"
-          data-ga-event-action="click"
-          data-ga-event-label="table-contents"
-          sx={(theme) => ({
-            mb: 2,
-            p: 1,
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'start',
-            background:
-              theme.palette.mode === 'dark'
-                ? `linear-gradient(90deg, ${theme.palette.primary[900]}, ${theme.palette.primary[600]} 120%)`
-                : `linear-gradient(-90deg, ${theme.palette.primary[700]}, ${theme.palette.primary[500]} 120%)`,
-            borderRadius: 1,
-            transitionProperty: 'all',
-            transitionTiming: 'cubic-bezier(0.4, 0, 0.2, 1)',
-            transitionDuration: '200ms',
-            '&:hover, &:focus-visible': {
-              boxShadow:
-                theme.palette.mode === 'dark'
-                  ? '1px 1px 20px 0 rgb(2 2 2 / 50%)'
-                  : '1px 1px 20px 0 rgb(90 105 120 / 30%)',
-            },
-          })}
-        >
-          <Typography component="span" variant="body1" fontWeight="bold" sx={{ color: '#fff' }}>
-            2021 MUI&nbsp;&nbsp;🚀
-            <br />
-          </Typography>
-          <Typography
-            component="span"
-            variant="body2"
-            fontWeight="medium"
-            sx={{ color: 'primary.50' }}
-            // eslint-disable-next-line material-ui/no-hardcoded-labels
-          >
-            Developer survey
-            <br />
-          </Typography>
-          <Typography
-            component="span"
-            variant="caption"
-            fontWeight="normal"
-            sx={{
-              mt: 1,
-              pt: 1,
-              color: 'primary.50',
-              borderTop: 1,
-              borderColor: 'primary.400',
-            }}
-            // eslint-disable-next-line material-ui/no-hardcoded-labels
-          >
-            Help us shape the future of MUI! &#8594;
-          </Typography>
-        </Link>
+        <TableOfContentsBanner />
       </NoSsr>
       {toc.length > 0 ? (
         <React.Fragment>
diff --git a/docs/src/route.ts b/docs/src/route.ts
index 96243ddd73bb86..d872b1fe636e17 100644
--- a/docs/src/route.ts
+++ b/docs/src/route.ts
@@ -39,8 +39,6 @@ const ROUTES = {
   storeTemplateWebbee: 'https://material-ui.com/store/items/webbee-landing-page/',
   storeTheFront: 'https://material-ui.com/store/items/the-front-landing-page/',
   storeFlexy: 'https://material-ui.com/store/items/flexy-react-admin-dashboard/',
-  survey2021Website: 'https://mui-org.typeform.com/2021-dev-survey#source=website',
-  survey2021Docs: 'https://mui-org.typeform.com/2021-dev-survey#source=docs',
 };
 
 export default ROUTES;