[website] Add Toolpad to Navigation

docs/src/components/footer/EmailSubscribe.tsx

@@ -124,7 +124,6 @@ export default function EmailSubscribe({ sx }: { sx?: SxProps<Theme> }) {
             px: 1,
             py: 0.5,
             typography: 'body2',
-
             '&:hover': {
               borderColor: (theme) =>
                 theme.palette.mode === 'dark'
@@ -135,7 +134,6 @@ export default function EmailSubscribe({ sx }: { sx?: SxProps<Theme> }) {
                   ? '0 1px 2px 0 rgba(0 0 0 / 1)'
                   : '0 1px 2px 0 rgba(0 0 0 / 0.2)',
             },
-
             [`&.${inputBaseClasses.focused}`]: {
               borderColor: (theme) =>
                 theme.palette.mode === 'dark'

docs/src/components/header/HeaderNavBar.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { styled, alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
+import Chip from '@mui/material/Chip';
 import Popper from '@mui/material/Popper';
 import Paper from '@mui/material/Paper';
 import { unstable_debounce as debounce } from '@mui/utils';
@@ -21,7 +22,7 @@ const Navigation = styled('nav')(({ theme }) => ({
   '& li': {
     color: theme.palette.text.primary,
     ...theme.typography.body2,
-    fontWeight: 700,
+    fontWeight: theme.typography.fontWeightBold,
     '& > a, & > div': {
       display: 'inline-block',
       color: 'inherit',
@@ -45,17 +46,25 @@ const Navigation = styled('nav')(({ theme }) => ({
   },
 }));
 
-const PRODUCT_IDS = ['product-core', 'product-advanced', 'product-templates', 'product-design'];
+const PRODUCT_IDS = [
+  'product-core',
+  'product-advanced',
+  'product-templates',
+  'product-design',
+  // @ts-ignore
+  ...(process.env.STAGING === true ? ['product-toolpad'] : []),
+];
 
 type ProductSubMenuProps = {
   icon: React.ReactElement;
   name: React.ReactNode;
   description: React.ReactNode;
+  chip?: React.ReactNode;
   href: string;
 } & Omit<JSX.IntrinsicElements['a'], 'ref'>;
 
 const ProductSubMenu = React.forwardRef<HTMLAnchorElement, ProductSubMenuProps>(
-  function ProductSubMenu({ icon, name, description, href, ...props }, ref) {
+  function ProductSubMenu({ icon, name, description, chip, href, ...props }, ref) {
     return (
       <Box
         component={Link}
@@ -65,6 +74,7 @@ const ProductSubMenu = React.forwardRef<HTMLAnchorElement, ProductSubMenuProps>(
           display: 'flex',
           alignItems: 'center',
           py: 2,
+          pr: 3,
           '&:hover, &:focus': {
             backgroundColor: (theme) =>
               theme.palette.mode === 'dark'
@@ -92,14 +102,15 @@ const ProductSubMenu = React.forwardRef<HTMLAnchorElement, ProductSubMenuProps>(
         >
           {icon}
         </Box>
-        <div>
-          <Typography color="text.primary" variant="body2" fontWeight={700}>
+        <Box sx={{ flexGrow: 1 }}>
+          <Typography color="text.primary" variant="body2" fontWeight="bold">
             {name}
           </Typography>
           <Typography color="text.secondary" variant="body2">
             {description}
           </Typography>
-        </div>
+        </Box>
+        {chip}
       </Box>
     );
   },
@@ -315,6 +326,21 @@ export default function HeaderNavBar() {
                         onKeyDown={handleKeyDown}
                       />
                     </li>
+                    {/* @ts-ignore */}
+                    {process.env.STAGING === true ? (
+                      <li role="none">
+                        <ProductSubMenu
+                          id={PRODUCT_IDS[4]}
+                          role="menuitem"
+                          href={ROUTES.productToolpad}
+                          icon={<IconImage name="product-toolpad" />}
+                          name="MUI Toolpad"
+                          chip={<Chip label="Alpha" size="small" color="grey" />}
+                          description="Low-code tool builder, powered by MUI."
+                          onKeyDown={handleKeyDown}
+                        />
+                      </li>
+                    ) : null}
                   </ul>
                 </Paper>
               </Fade>

docs/src/components/header/HeaderNavDropdown.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Collapse from '@mui/material/Collapse';
+import Chip from '@mui/material/Chip';
 import ClickAwayListener from '@mui/base/ClickAwayListener';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
@@ -13,7 +14,7 @@ import ROUTES from 'docs/src/route';
 const Anchor = styled('a')<{ component?: React.ElementType; noLinkStyle?: boolean }>(
   ({ theme }) => ({
     ...theme.typography.body2,
-    fontWeight: 700,
+    fontWeight: theme.typography.fontWeightBold,
     textDecoration: 'none',
     border: 'none',
     width: '100%',
@@ -63,6 +64,17 @@ const PRODUCTS = [
     description: 'Our components available in your favorite design tool.',
     href: ROUTES.productDesignKits,
   },
+  // @ts-ignore
+  ...(process.env.STAGING === true
+    ? [
+        {
+          name: 'MUI Toolpad',
+          description: 'Low-code tool builder, powered by MUI.',
+          href: ROUTES.productToolpad,
+          chip: 'Alpha',
+        },
+      ]
+    : []),
 ];
 
 const DOCS = [
@@ -91,6 +103,16 @@ const DOCS = [
     description: 'Advanced and powerful components for complex use cases.',
     href: ROUTES.advancedComponents,
   },
+  // @ts-ignore
+  ...(process.env.STAGING === true
+    ? [
+        {
+          name: 'MUI Toolpad',
+          description: 'Low-code tool builder, powered by MUI.',
+          href: ROUTES.toolpadDocs,
+        },
+      ]
+    : []),
 ];
 
 export default function HeaderNavDropdown() {
@@ -188,7 +210,18 @@ export default function HeaderNavDropdown() {
                           noLinkStyle
                           sx={{ flexDirection: 'column', alignItems: 'initial' }}
                         >
-                          <div>{item.name}</div>
+                          <Box
+                            sx={{
+                              display: 'flex',
+                              flexDirection: 'row',
+                              justifyContent: 'space-between',
+                            }}
+                          >
+                            {item.name}
+                            {item.chip ? (
+                              <Chip size="small" label={item.chip} color="grey" />
+                            ) : null}
+                          </Box>
                           <Typography variant="body2" color="text.secondary">
                             {item.description}
                           </Typography>
@@ -232,7 +265,7 @@ export default function HeaderNavDropdown() {
                           noLinkStyle
                           sx={{ flexDirection: 'column', alignItems: 'initial' }}
                         >
-                          <div>{item.name}</div>
+                          {item.name}
                           <Typography variant="body2" color="text.secondary">
                             {item.description}
                           </Typography>

docs/src/components/icon/IconImage.tsx

@@ -7,6 +7,7 @@ export type IconImageProps = {
   name:
     | 'product-core'
     | 'product-advanced'
+    | 'product-toolpad'
     | 'product-templates'
     | 'product-designkits'
     | 'block-green'

docs/src/components/typography/SectionHeadline.tsx

@@ -16,6 +16,7 @@ export default function SectionHeadline({
   const overlineColor = mode === 'dark' ? 'primary.300' : 'primary.600';
   const titleColor = mode === 'dark' ? 'grey.100' : 'primaryDark.900';
   const descriptionColor = mode === 'dark' ? 'grey.500' : 'grey.800';
+
   return (
     <React.Fragment>
       <Typography

docs/src/layouts/AppFooter.tsx

@@ -66,6 +66,7 @@ export default function AppFooter() {
             <Link href={ROUTES.productAdvanced}>MUI X</Link>
             <Link href={ROUTES.productTemplates}>Templates</Link>
             <Link href={ROUTES.productDesignKits}>Design kits</Link>
+            <Link href={ROUTES.productToolpad}>MUI Toolpad</Link>
           </Box>
           <Box sx={{ display: 'flex', flexDirection: 'column' }}>
             <Typography fontWeight="bold" variant="body2">

docs/src/modules/brandingTheme.ts

@@ -37,6 +37,12 @@ declare module '@mui/material/styles/createTypography' {
   }
 }
 
+declare module '@mui/material/Chip' {
+  interface ChipPropsColorOverrides {
+    grey: true;
+  }
+}
+
 // TODO: enable this once types conflict is fixed
 // declare module '@mui/material/Button' {
 //   interface ButtonPropsVariantOverrides {
@@ -128,19 +134,26 @@ export const getDesignTokens = (mode: 'light' | 'dark') =>
       common: {
         black: '#1D1D1D',
       },
-      ...(mode === 'light' && {
-        text: {
+      text: {
+        ...(mode === 'light' && {
           primary: grey[900],
           secondary: grey[700],
-        },
-      }),
-      ...(mode === 'dark' && {
-        text: {
+        }),
+        ...(mode === 'dark' && {
           primary: '#fff',
           secondary: grey[400],
-        },
-      }),
-      grey,
+        }),
+      },
+      grey: {
+        ...(mode === 'light' && {
+          main: grey[100],
+          contrastText: grey[600],
+        }),
+        ...(mode === 'dark' && {
+          main: blueDark[700],
+          contrastText: grey[600],
+        }),
+      },
       error: {
         50: '#FFF0F1',
         100: '#FFDBDE',

docs/src/modules/components/AppNavDrawer.js

@@ -466,6 +466,9 @@ export default function AppNavDrawer(props) {
               ])}
             />
           )}
+          {asPathWithoutLang.startsWith('/toolpad') && (
+            <ProductIdentifier name="Toolpad" metadata="MUI Toolpad" />
+          )}
         </ToolbarDiv>
         <Divider
           sx={{

docs/src/modules/components/GoogleAnalytics.js

@@ -10,8 +10,8 @@ import { useRouter } from 'next/router';
 // So we can write code like:
 //
 // <Button
-//   ga-event-category="demo"
-//   ga-event-action="expand"
+//   data-ga-event-category="demo"
+//   data-ga-event-action="expand"
 // >
 //   Foo
 // </Button>