[website] Refine the Material UI homepage demo (mui#40881)

michaldudak · Feb 1, 2024 · 254459c · 254459c
1 parent afbe6c5
commit 254459c
Show file tree

Hide file tree

Showing 9 changed files with 98 additions and 125 deletions.
diff --git a/docs/src/components/action/Highlighter.tsx b/docs/src/components/action/Highlighter.tsx
@@ -43,7 +43,7 @@ export default function Highlighter({
           height: '100%',
           border: '1px solid transparent',
           transitionProperty: 'all',
-          transitionDuration: '150ms',
+          transitionDuration: '100ms',
           color: 'primary.300',
           overflow: 'auto',
           ...((!disableBorder || selected) && {

diff --git a/docs/src/components/action/StylingInfo.tsx b/docs/src/components/action/StylingInfo.tsx
@@ -16,15 +16,13 @@ export default function StylingInfo({
   const [hidden, setHidden] = React.useState(false);
   const defaultContent = (
     <React.Fragment>
-      <Typography fontWeight="bold" color="#fff" variant="body2">
+      <Typography fontWeight="bold" variant="body2">
         Own the styling!
       </Typography>
-      <Typography color="grey.400" variant="body2">
+      <Typography color="text.secondary" variant="body2">
         Build your own design system using the{' '}
-        <Link href={ROUTES.theming} sx={{ color: 'primary.300' }}>
-          sophisticated theming features
-        </Link>
-        . You can also start by using Google&apos;s Material Design.
+        <Link href={ROUTES.theming}>sophisticated theming features</Link>. You can also start by
+        using Google&apos;s Material Design.
       </Typography>
     </React.Fragment>
   );

diff --git a/docs/src/components/home/CoreShowcase.tsx b/docs/src/components/home/CoreShowcase.tsx
@@ -2,8 +2,6 @@ import * as React from 'react';
 import { alpha, ThemeProvider, createTheme, useTheme } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Button, { buttonClasses } from '@mui/material/Button';
-import Typography from '@mui/material/Typography';
-import TouchAppRounded from '@mui/icons-material/TouchAppRounded';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
 import MaterialDesignDemo, { componentCode } from 'docs/src/components/home/MaterialDesignDemo';
@@ -13,14 +11,15 @@ import StylingInfo from 'docs/src/components/action/StylingInfo';
 import FlashCode from 'docs/src/components/animation/FlashCode';
 
 const lineMapping: Record<string, number | number[]> = {
-  card: 0,
-  stack: [1, 17],
-  avatar: 2,
-  stack2: [4, 11],
-  chip: [6, 10],
-  typography: 5,
-  typography2: [12, 14],
-  switch: 16,
+  card: [0, 20],
+  cardmedia: [1, 5],
+  stack: [6, 19],
+  stack2: [7, 16],
+  typography: 8,
+  stack3: [9, 16],
+  chip: [10, 14],
+  rating: 15,
+  switch: 18,
 };
 
 export default function CoreShowcase() {
@@ -114,41 +113,14 @@ export default function CoreShowcase() {
   return (
     <ShowcaseContainer
       preview={
-        <React.Fragment>
-          <Box
-            textAlign="center"
-            sx={{
-              py: 0.5,
-              ml: 'auto',
-              position: 'absolute',
-              bottom: 0,
-              left: '50%',
-              transform: 'translate(-50%)',
-              width: '100%',
-            }}
+        <ThemeProvider theme={theme}>
+          <PointerContainer
+            onElementChange={setElement}
+            sx={{ minWidth: 300, width: '100%', maxWidth: '100%' }}
           >
-            <Typography
-              variant="caption"
-              fontWeight="medium"
-              color="text.primary"
-              noWrap
-              sx={{ opacity: 0.3 }}
-            >
-              <TouchAppRounded
-                sx={{ fontSize: '0.875rem', verticalAlign: 'text-bottom', mr: 0.5 }}
-              />
-              Hover over the component to highlight the code.
-            </Typography>
-          </Box>
-          <ThemeProvider theme={theme}>
-            <PointerContainer
-              onElementChange={setElement}
-              sx={{ minWidth: 300, width: '80%', maxWidth: '100%' }}
-            >
-              <MaterialDesignDemo />
-            </PointerContainer>
-          </ThemeProvider>
-        </React.Fragment>
+            <MaterialDesignDemo />
+          </PointerContainer>
+        </ThemeProvider>
       }
       code={
         <div data-mui-color-scheme="dark">

diff --git a/docs/src/components/home/Hero.tsx b/docs/src/components/home/Hero.tsx
@@ -34,27 +34,27 @@ const TaskCard = dynamic(() => import('../showcase/TaskCard'), {
 });
 const PlayerCard = dynamic(() => import('../showcase/PlayerCard'), {
   ssr: false,
-  loading: createLoading({ width: 400, height: 240 }),
+  loading: createLoading({ width: 400, height: 134 }),
 });
 const ThemeToggleButton = dynamic(() => import('../showcase/ThemeToggleButton'), {
   ssr: false,
   loading: createLoading({ width: 360, height: 48 }),
 });
 const ThemeChip = dynamic(() => import('../showcase/ThemeChip'), {
   ssr: false,
-  loading: createLoading({ width: 400, height: 24 }),
+  loading: createLoading({ width: 360, height: 24 }),
 });
 const ThemeTimeline = dynamic(() => import('../showcase/ThemeTimeline'), {
   ssr: false,
-  loading: createLoading({ width: 400, height: 180 }),
+  loading: createLoading({ width: 400, height: 175 }),
 });
 const FolderTable = dynamic(() => import('../showcase/FolderTable'), {
   ssr: false,
-  loading: createLoading({ width: 360, height: 210 }),
+  loading: createLoading({ width: 400, height: 294 }),
 });
 const ThemeDatePicker = dynamic(() => import('../showcase/ThemeDatePicker'), {
   ssr: false,
-  loading: createLoading({ width: 360, height: 260 }),
+  loading: createLoading({ width: 360, height: 245 }),
 });
 const ThemeTabs = dynamic(() => import('../showcase/ThemeTabs'), {
   ssr: false,
@@ -66,11 +66,11 @@ const ThemeSlider = dynamic(() => import('../showcase/ThemeSlider'), {
 });
 const ThemeAccordion = dynamic(() => import('../showcase/ThemeAccordion'), {
   ssr: false,
-  loading: createLoading({ width: { md: 360, xl: 400 }, height: 231 }),
+  loading: createLoading({ width: 360, height: 252 }),
 });
 const NotificationCard = dynamic(() => import('../showcase/NotificationCard'), {
   ssr: false,
-  loading: createLoading({ width: { md: 360, xl: 400 }, height: 103 }),
+  loading: createLoading({ width: 360, height: 98 }),
 });
 
 export default function Hero() {
@@ -80,12 +80,12 @@ export default function Hero() {
     <HeroContainer
       linearGradient
       left={
-        <Box sx={{ textAlign: { xs: 'center', md: 'left' } }}>
-          <Typography variant="h1" sx={{ mb: 2, maxWidth: 500 }}>
+        <Box sx={{ textAlign: { xs: 'center', md: 'left' }, maxWidth: 500 }}>
+          <Typography variant="h1" mb={1}>
             <GradientText>Move faster</GradientText> <br />
             with intuitive React UI tools
           </Typography>
-          <Typography color="text.secondary" sx={{ mb: 3, maxWidth: 500 }}>
+          <Typography color="text.secondary" mb={3}>
             MUI offers a comprehensive suite of free UI tools to help you ship new features faster.
             Start with Material UI, our fully-loaded component library, or bring your own design
             system to our production-ready components.
@@ -115,7 +115,7 @@ export default function Hero() {
       right={
         <React.Fragment>
           {isMdUp && (
-            <Stack spacing={3} sx={{ '& > .MuiPaper-root': { maxWidth: 'none' } }}>
+            <Stack spacing={3} useFlexGap sx={{ '& > .MuiPaper-root': { maxWidth: 'none' } }}>
               <TaskCard />
               <ThemeChip />
               <ThemeDatePicker />
@@ -124,7 +124,11 @@ export default function Hero() {
             </Stack>
           )}
           {isMdUp && (
-            <Stack spacing={3} sx={{ ml: 3, '& > .MuiPaper-root': { maxWidth: 'none' } }}>
+            <Stack
+              spacing={3}
+              useFlexGap
+              sx={{ ml: 3, '& > .MuiPaper-root': { maxWidth: 'none' } }}
+            >
               <ThemeTimeline />
               <ThemeToggleButton />
               <ThemeSlider />

diff --git a/docs/src/components/home/MaterialDesignDemo.tsx b/docs/src/components/home/MaterialDesignDemo.tsx
@@ -1,56 +1,62 @@
 import * as React from 'react';
-import MuiAvatar from '@mui/material/Avatar';
 import MuiChip from '@mui/material/Chip';
+import MuiCardMedia from '@mui/material/CardMedia';
 import MuiCard, { CardProps } from '@mui/material/Card';
 import MuiSwitch from '@mui/material/Switch';
 import MuiTypography from '@mui/material/Typography';
 import MuiStack from '@mui/material/Stack';
+import MuiRating from '@mui/material/Rating';
 import { withPointer } from 'docs/src/components/home/ElementPointer';
 
-export const componentCode = `<Card sx={{ p: 2.5 }}>
-  <Stack direction="row" alignItems="center" spacing={2} useFlexGap>
-    <Avatar variant="rounded" src="avatar.jpg" />
-    <div>
-      <Stack direction="row" alignItems="center" spacing={1} useFlexGap>
-        <Typography fontWeight="semiBold">Lucas Smith</Typography>
+export const componentCode = `
+<Card>
+  <CardMedia
+    component="img"
+    alt="Yosemite National Park"
+    image="/static/images/cards/yosemite.jpeg"
+  />
+  <Stack direction="row" alignItems="center" spacing={3} p={2} useFlexGap>
+    <Stack direction="column" spacing={0.5} useFlexGap>
+      <Typography>Yosemite National Park, California, USA</Typography>
+      <Stack direction="row" spacing={1} useFlexGap>
         <Chip
           size="small"
-          color={active ? 'success' : 'default'}
           label={active ? 'Active' : 'Inactive'}
+          color={active ? 'success' : 'default'}
         />
+        <Rating defaultValue={1} size="small" />
       </Stack>
-      <Typography2 variant="body2" color="text.secondary">
-        Scranton, PA, United States
-      </Typography2>
-    </div>
-    <Switch sx={{ ml: 'auto' }} />
+    </Stack>
+    <Switch checked={active} />
   </Stack>
 </Card>
 `;
 
-const Avatar = withPointer(MuiAvatar, { id: 'avatar', name: 'Avatar' });
-const Chip = withPointer(MuiChip, { id: 'chip', name: 'Chip' });
 const Card = withPointer(MuiCard, { id: 'card', name: 'Card' });
-const Switch = withPointer(MuiSwitch, { id: 'switch', name: 'Switch' });
-const Typography = withPointer(MuiTypography, { id: 'typography', name: 'Typography' });
-const Typography2 = withPointer(MuiTypography, { id: 'typography2', name: 'Typography' });
+const CardMedia = withPointer(MuiCardMedia, { id: 'cardmedia', name: 'CardMedia' });
 const Stack = withPointer(MuiStack, { id: 'stack', name: 'Stack' });
 const Stack2 = withPointer(MuiStack, { id: 'stack2', name: 'Stack' });
+const Stack3 = withPointer(MuiStack, { id: 'stack3', name: 'Stack' });
+const Typography = withPointer(MuiTypography, { id: 'typography', name: 'Typography' });
+const Chip = withPointer(MuiChip, { id: 'chip', name: 'Chip' });
+const Rating = withPointer(MuiRating, { id: 'rating', name: 'Rating' });
+const Switch = withPointer(MuiSwitch, { id: 'switch', name: 'Switch' });
 
 export default function MaterialDesignDemo(props: CardProps) {
-  const [active, setActive] = React.useState(false);
+  const [active, setActive] = React.useState(true);
   return (
-    <Card {...props} sx={{ p: 2.5 }}>
-      <Stack alignItems="center" direction="row" spacing={2} useFlexGap>
-        <Avatar
-          variant="rounded"
-          sizes="small"
-          src="/static/images/avatar/2.jpg"
-          imgProps={{ 'aria-labelledby': 'demo-task-card-assignee-name' }}
-        />
-        <div>
-          <Stack2 direction="row" alignItems="center" spacing={1} useFlexGap>
-            <Typography fontWeight="semiBold">Lucas Smith</Typography>
+    <Card {...props} sx={{ p: 2 }}>
+      <CardMedia
+        component="img"
+        alt="Yosemite National Park"
+        height="100"
+        image="/static/images/cards/yosemite.jpeg"
+        sx={{ borderRadius: 0.5 }}
+      />
+      <Stack alignItems="center" direction="row" spacing={3} mt={2} useFlexGap>
+        <Stack2 direction="column" spacing={0.5} useFlexGap>
+          <Typography fontWeight="semiBold">Yosemite National Park, California, USA</Typography>
+          <Stack3 direction="row" spacing={1} useFlexGap>
             <Chip
               label={active ? 'Active' : 'Inactive'}
               color={active ? 'success' : 'default'}
@@ -59,15 +65,13 @@ export default function MaterialDesignDemo(props: CardProps) {
                 width: 'fit-content',
                 fontSize: 12,
                 height: 20,
-                px: '2px',
-                '& .MuiChip-label': { px: 0.5 },
+                px: 0,
+                zIndex: 2,
               }}
             />
-          </Stack2>
-          <Typography2 variant="body2" color="text.secondary">
-            Scranton, PA, United States
-          </Typography2>
-        </div>
+            <Rating name="Rating component" defaultValue={1} size="small" />
+          </Stack3>
+        </Stack2>
         <Switch
           inputProps={{ 'aria-label': active ? 'Active' : 'Inactive' }}
           checked={active}

diff --git a/docs/src/components/home/ProductSuite.tsx b/docs/src/components/home/ProductSuite.tsx
@@ -53,7 +53,7 @@ export default function ProductSuite() {
           <SectionHeadline
             overline="Products"
             title={
-              <Typography variant="h2" sx={{ my: 1 }}>
+              <Typography variant="h2">
                 Every component you need is <GradientText>ready for production</GradientText>
               </Typography>
             }

diff --git a/docs/src/components/home/ShowcaseContainer.tsx b/docs/src/components/home/ShowcaseContainer.tsx
@@ -37,7 +37,7 @@ export default function ShowcaseContainer({
             position: 'relative',
             justifyContent: 'center',
             alignItems: 'center',
-            minHeight: 240,
+            minHeight: 220,
             p: 2,
           }}
         >

diff --git a/docs/src/components/productMaterial/MaterialStyling.tsx b/docs/src/components/productMaterial/MaterialStyling.tsx
@@ -171,17 +171,15 @@ export default function MaterialStyling() {
     <Section>
       <Grid container spacing={2}>
         <Grid item md={6} sx={{ minWidth: 0 }}>
-          <Box sx={{ maxWidth: 500 }}>
-            <SectionHeadline
-              overline="Styling"
-              title={
-                <Typography variant="h2">
-                  Rapidly add and tweak any styles using <GradientText>CSS utilities</GradientText>
-                </Typography>
-              }
-              description="CSS utilities allow you to move faster and make for a smooth developer experience when styling any component."
-            />
-          </Box>
+          <SectionHeadline
+            overline="Styling"
+            title={
+              <Typography variant="h2">
+                Rapidly add and tweak any styles using <GradientText>CSS utilities</GradientText>
+              </Typography>
+            }
+            description="CSS utilities allow you to move faster and make for a smooth developer experience when styling any component."
+          />
           <Group sx={{ mt: 4, pb: { xs: 0, md: 2 } }}>
             <Highlighter disableBorder {...getSelectedProps(0)} onClick={() => setIndex(0)}>
               <Item

diff --git a/docs/src/components/productMaterial/MaterialTheming.tsx b/docs/src/components/productMaterial/MaterialTheming.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material/styles';
-import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 import AutoAwesomeRounded from '@mui/icons-material/AutoAwesomeRounded';
@@ -86,17 +85,15 @@ export default function MaterialTheming() {
     <Section>
       <Grid container spacing={2}>
         <Grid item md={6} sx={{ minWidth: 0 }}>
-          <Box sx={{ maxWidth: 500 }}>
-            <SectionHeadline
-              overline="Theming"
-              title={
-                <Typography variant="h2">
-                  Build <GradientText>your design system</GradientText> just as you want it to be
-                </Typography>
-              }
-              description="Start quickly with Material Design or use the advanced theming feature to easily tailor the components to your needs."
-            />
-          </Box>
+          <SectionHeadline
+            overline="Theming"
+            title={
+              <Typography variant="h2">
+                Build <GradientText>your design system</GradientText> just as you want it to be
+              </Typography>
+            }
+            description="Start quickly with Material Design or use the advanced theming feature to easily tailor the components to your needs."
+          />
           <Group sx={{ mt: 4, pb: { xs: 0, md: 2 } }}>
             <Highlighter disableBorder selected={customized} onClick={() => setCustomized(true)}>
               <Item