[website] Update Demo footers on MUI X landing page

docs/src/components/productX/XChartsDemo.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import Chip from '@mui/material/Chip';
+import { alpha, styled } from '@mui/material/styles';
+import { shouldForwardProp } from '@mui/system';
+import Frame from 'docs/src/components/action/Frame';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+
+const AspectRatioImage = styled('div', {
+  shouldForwardProp: (prop) => shouldForwardProp(prop) && prop !== 'src' && prop !== 'ratio',
+})<{ ratio: number; src: string }>(({ src, ratio, theme }) => ({
+  height: 0,
+  backgroundImage: `url(${src})`,
+  backgroundRepeat: 'no-repeat',
+  backgroundSize: 'contain',
+  paddingBottom: `${(1 / ratio) * 100}%`,
+  margin: 'auto',
+  ...theme.applyDarkStyles({
+    backgroundImage: `url(${src.replace('-light', '-dark')})`,
+  }),
+}));
+
+export default function XChartsDemo() {
+  return (
+    <Frame sx={{ height: '100%' }}>
+      <Frame.Demo sx={{ p: 2, flexGrow: 1 }}>
+        <Grid container spacing={1} justifyContent="center">
+          <Grid item xs={6}>
+            <Box sx={{ width: { xs: 200, sm: '100%' }, maxWidth: '100%', ml: 'auto' }}>
+              <AspectRatioImage src="/static/branding/mui-x/chart-light1.png" ratio={219 / 120} />
+            </Box>
+          </Grid>
+          <Grid item xs={6}>
+            <Box sx={{ width: { xs: 200, sm: '100%' }, maxWidth: '100%', mr: 'auto' }}>
+              <AspectRatioImage src="/static/branding/mui-x/chart-light2.png" ratio={219 / 120} />
+            </Box>
+          </Grid>
+          <Grid item xs={6}>
+            <Box sx={{ width: { xs: 200, sm: '100%' }, maxWidth: '100%', ml: 'auto' }}>
+              <AspectRatioImage src="/static/branding/mui-x/chart-light3.png" ratio={219 / 120} />
+            </Box>
+          </Grid>
+          <Grid item xs={6}>
+            <Box sx={{ width: { xs: 200, sm: '100%' }, maxWidth: '100%', mr: 'auto' }}>
+              <AspectRatioImage src="/static/branding/mui-x/chart-light4.png" ratio={219 / 120} />
+            </Box>
+          </Grid>
+        </Grid>
+      </Frame.Demo>
+      <Frame.Info data-mui-color-scheme="dark">
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            lineHeight: 1,
+            mb: 0.5,
+          }}
+        >
+          <Typography variant="body2" fontWeight="bold" sx={{ mr: 1 }}>
+            Experiment with Charts now!
+          </Typography>
+          <Chip
+            variant="outlined"
+            label="Alpha"
+            color="warning"
+            size="small"
+            sx={(theme) => ({
+              pb: 0.2,
+              fontWeight: theme.typography.fontWeightSemiBold,
+              color: (theme.vars || theme).palette.warning[300],
+              borderColor: alpha(theme.palette.warning[300], 0.3),
+              background: alpha(theme.palette.warning[800], 0.3),
+            })}
+          />
+        </Box>
+        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+          Using D3.js for data manipulation and SVG for rendering, Charts are coming to MUI X!
+        </Typography>
+        <Button
+          variant="outlined"
+          href="/x/react-charts/"
+          component="a"
+          sx={{ mt: { xs: 2, sm: 0 }, color: 'primary.300' }}
+        >
+          View the documentation
+        </Button>
+      </Frame.Info>
+    </Frame>
+  );
+}

docs/src/components/productX/XComponents.tsx

@@ -1,10 +1,7 @@
 import * as React from 'react';
-import { shouldForwardProp } from '@mui/system';
-import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Fade from '@mui/material/Fade';
 import Grid from '@mui/material/Grid';
-import Chip from '@mui/material/Chip';
 import Typography from '@mui/material/Typography';
 import Section from 'docs/src/layouts/Section';
 import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
@@ -19,28 +16,14 @@ import BarChartRounded from '@mui/icons-material/BarChartRounded';
 import XGridFullDemo from 'docs/src/components/productX/XGridFullDemo';
 import XDateRangeDemo from 'docs/src/components/productX/XDateRangeDemo';
 import XTreeViewDemo from 'docs/src/components/productX/XTreeViewDemo';
+import XChartsDemo from 'docs/src/components/productX/XChartsDemo';
+import XSparklineDemo from 'docs/src/components/productX/XSparklineDemo';
 import More from 'docs/src/components/action/More';
 import ROUTES from 'docs/src/route';
-import EmailSubscribe from 'docs/src/components/footer/EmailSubscribe';
-import Frame from 'docs/src/components/action/Frame';
 import IconImage from 'docs/src/components/icon/IconImage';
 
-const DEMOS = ['Data Grid', 'Date Range Picker', 'Tree View', 'Sparkline', 'Charts'];
-const WIP = DEMOS.slice(2);
-
-const AspectRatioImage = styled('div', {
-  shouldForwardProp: (prop) => shouldForwardProp(prop) && prop !== 'src' && prop !== 'ratio',
-})<{ ratio: number; src: string }>(({ src, ratio, theme }) => ({
-  height: 0,
-  backgroundImage: `url(${src})`,
-  backgroundRepeat: 'no-repeat',
-  backgroundSize: 'contain',
-  paddingBottom: `${(1 / ratio) * 100}%`,
-  margin: 'auto',
-  ...theme.applyDarkStyles({
-    backgroundImage: `url(${src.replace('-light', '-dark')})`,
-  }),
-}));
+const DEMOS = ['Data Grid', 'Date Range Picker', 'Charts', 'Tree View', 'Sparkline'];
+const WIP = DEMOS.slice(4);
 
 function PrefetchImages() {
   function makeImg(component: 'sparkline' | 'chart', mode: string, num: number) {
@@ -82,9 +65,9 @@ export default function XComponents() {
   const icons = {
     [DEMOS[0]]: <TableChartRounded fontSize="small" />,
     [DEMOS[1]]: <DateRangeRounded fontSize="small" />,
-    [DEMOS[2]]: <AccountTreeRounded fontSize="small" />,
-    [DEMOS[3]]: <ShowChartRounded fontSize="small" />,
-    [DEMOS[4]]: <BarChartRounded fontSize="small" />,
+    [DEMOS[2]]: <BarChartRounded fontSize="small" />,
+    [DEMOS[3]]: <AccountTreeRounded fontSize="small" />,
+    [DEMOS[4]]: <ShowChartRounded fontSize="small" />,
   };
   return (
     <Section bg="gradient">
@@ -130,101 +113,24 @@ export default function XComponents() {
             </Fade>
           )}
           {demo === DEMOS[2] && (
+            <Fade in timeout={500}>
+              <div>
+                <XChartsDemo />
+              </div>
+            </Fade>
+          )}
+          {demo === DEMOS[3] && (
             <Fade in timeout={500}>
               <div>
                 <XTreeViewDemo />
               </div>
             </Fade>
           )}
-          {(demo === DEMOS[3] || demo === DEMOS[4]) && (
+          {demo === DEMOS[4] && (
             <Fade in timeout={500}>
-              <Box sx={{ height: '100%' }}>
-                <Frame sx={{ height: '100%' }}>
-                  <Frame.Demo sx={{ p: 2, flexGrow: 1 }}>
-                    {demo === DEMOS[3] && (
-                      <Grid container justifyContent="space-around" spacing={1}>
-                        <Grid item xs={6}>
-                          <Box sx={{ maxWidth: 200, ml: 'auto' }}>
-                            <AspectRatioImage
-                              src="/static/branding/mui-x/sparkline-light1.png"
-                              ratio={211 / 220}
-                            />
-                          </Box>
-                        </Grid>
-                        <Grid item xs={6}>
-                          <Box sx={{ maxWidth: 200, mr: 'auto' }}>
-                            <AspectRatioImage
-                              src="/static/branding/mui-x/sparkline-light2.png"
-                              ratio={211 / 220}
-                            />
-                          </Box>
-                        </Grid>
-                      </Grid>
-                    )}
-                    {demo === DEMOS[4] && (
-                      <Grid container spacing={1} justifyContent="center">
-                        <Grid item xs={6}>
-                          <Box sx={{ width: { xs: 200, sm: 240 }, maxWidth: '100%', ml: 'auto' }}>
-                            <AspectRatioImage
-                              src="/static/branding/mui-x/chart-light1.png"
-                              ratio={219 / 120}
-                            />
-                          </Box>
-                        </Grid>
-                        <Grid item xs={6}>
-                          <Box sx={{ width: { xs: 200, sm: 240 }, maxWidth: '100%', mr: 'auto' }}>
-                            <AspectRatioImage
-                              src="/static/branding/mui-x/chart-light2.png"
-                              ratio={219 / 120}
-                            />
-                          </Box>
-                        </Grid>
-                        <Grid item xs={6}>
-                          <Box sx={{ width: { xs: 200, sm: 240 }, maxWidth: '100%', ml: 'auto' }}>
-                            <AspectRatioImage
-                              src="/static/branding/mui-x/chart-light3.png"
-                              ratio={219 / 120}
-                            />
-                          </Box>
-                        </Grid>
-                        <Grid item xs={6}>
-                          <Box sx={{ width: { xs: 200, sm: 240 }, maxWidth: '100%', mr: 'auto' }}>
-                            <AspectRatioImage
-                              src="/static/branding/mui-x/chart-light4.png"
-                              ratio={219 / 120}
-                            />
-                          </Box>
-                        </Grid>
-                      </Grid>
-                    )}
-                  </Frame.Demo>
-                  <Frame.Info data-mui-color-scheme="dark">
-                    <Box
-                      sx={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        lineHeight: 1,
-                        mb: 0.5,
-                      }}
-                    >
-                      <Typography variant="body2" fontWeight="bold" sx={{ mr: 1 }}>
-                        Coming soon!
-                      </Typography>
-                      <Chip
-                        variant="outlined"
-                        label="PNG Preview"
-                        size="small"
-                        sx={{ fontWeight: 500 }}
-                      />
-                    </Box>
-                    <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
-                      Subscribe to our newsletter to get first-hand info about the development and
-                      release of new components.
-                    </Typography>
-                    <EmailSubscribe />
-                  </Frame.Info>
-                </Frame>
-              </Box>
+              <div>
+                <XSparklineDemo />
+              </div>
             </Fade>
           )}
         </Grid>

docs/src/components/productX/XDateRangeDemo.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Paper from '@mui/material/Paper';
@@ -46,20 +47,21 @@ function CustomRangeShortcuts(props: PickersShortcutsProps<DateRange<Date>>) {
       }}
     >
       <List
-        dense
-        sx={(theme) => ({
+        sx={{
           display: 'flex',
-          px: theme.spacing(4),
+          py: 1.5,
+          px: 1.5,
+          gap: 1.5,
           '& .MuiListItem-root': {
-            py: 2,
-            pr: theme.spacing(1),
+            p: 0,
+            width: 'fit-content',
           },
-        })}
+        }}
       >
         {resolvedItems.map((item) => {
           return (
             <ListItem key={item.label}>
-              <Chip {...item} />
+              <Chip size="small" {...item} />
             </ListItem>
           );
         })}
@@ -127,6 +129,10 @@ export default function XDateRangeDemo() {
                 lineHeight: 0,
                 margin: 0,
               },
+              '& .MuiPickersArrowSwitcher-root': {
+                padding: 0,
+                paddingTop: 0.5,
+              },
               '& .MuiPickersDay-root': {
                 width: 28,
                 height: 28,
@@ -162,21 +168,38 @@ export default function XDateRangeDemo() {
           sx={{
             display: 'flex',
             alignItems: 'center',
-            justifyContent: 'space-between',
+            lineHeight: 1,
+            mb: 0.5,
           }}
         >
           <Typography variant="body2" fontWeight="bold" sx={{ mr: 1 }}>
-            🎉&nbsp;&nbsp;&nbsp;Stable version available now for your project!
+            Date Range Picker now available for your project!
           </Typography>
-          <Button
+          <Chip
             variant="outlined"
-            href="/x/react-date-pickers/date-range-picker/"
-            component="a"
-            sx={{ mt: { xs: 2, sm: 0 }, color: 'primary.300' }}
-          >
-            View more demos
-          </Button>
+            label="Available now"
+            color="success"
+            size="small"
+            sx={(theme) => ({
+              pb: 0.2,
+              fontWeight: theme.typography.fontWeightSemiBold,
+              color: (theme.vars || theme).palette.success[300],
+              borderColor: alpha(theme.palette.success[300], 0.3),
+              background: alpha(theme.palette.success[800], 0.3),
+            })}
+          />
         </Box>
+        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+          A thorough and advanced stable implementation of a long-requested component!
+        </Typography>
+        <Button
+          variant="outlined"
+          href="/x/react-date-pickers/date-range-picker/"
+          component="a"
+          sx={{ mt: { xs: 2, sm: 0 }, color: 'primary.300' }}
+        >
+          View the documentation
+        </Button>
       </Frame.Info>
     </Frame>
   );

docs/src/components/productX/XGridFullDemo.tsx

@@ -228,7 +228,7 @@ export default function XGridFullDemo() {
           />
         </Paper>
       </Frame.Demo>
-      <Frame.Info data-mui-color-scheme="dark" sx={{ pl: 1, pr: 2, py: 2 }}>
+      <Frame.Info data-mui-color-scheme="dark" sx={{ pl: 1, pr: 2, py: 1.5 }}>
         <SettingsPanel onApply={handleApplyClick} size={size} type={type} />
       </Frame.Info>
     </Frame>