[website] Polish design-kits & templates (#28131)

mui · Sep 4, 2021 · 8179654 · 8179654
1 parent 70ffede
commit 8179654
Show file tree

Hide file tree

Showing 8 changed files with 81 additions and 43 deletions.
diff --git a/docs/pages/branding/design-kits.tsx b/docs/pages/branding/design-kits.tsx
@@ -16,7 +16,7 @@ export default function DesignKits() {
     <BrandingProvider>
       <Head
         title="MUI in your favorite design tool."
-        description="For the designers out there, pick your favorite design tool to enjoy our components. Get the consistency right when working with developers."
+        description="Pick your favorite design tool to enjoy and use MUI components. Boost consistency and facilitate communication when working with developers."
       />
       <AppHeader />
       <main>

diff --git a/docs/pages/branding/templates.tsx b/docs/pages/branding/templates.tsx
@@ -15,7 +15,7 @@ export default function Templates() {
     <BrandingProvider>
       <Head
         title="MUI: Fully built templates for your project."
-        description="A collection of several 4.5 average rating templates, curated by our Core team to get your projects and application up and running today."
+        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."
       />
       <AppHeader />
       <main>

diff --git a/docs/src/components/productDesignKit/DesignKitDemo.tsx b/docs/src/components/productDesignKit/DesignKitDemo.tsx
@@ -37,23 +37,23 @@ export default function TemplateDemo() {
   const mode = globalTheme.palette.mode;
   const [demo, setDemo] = React.useState(DEMOS[0]);
   const icons = {
-    [DEMOS[0]]: <ToggleOnRounded />,
-    [DEMOS[1]]: <TextFieldsRounded />,
-    [DEMOS[2]]: <WidgetsRounded />,
+    [DEMOS[0]]: <ToggleOnRounded fontSize="small" />,
+    [DEMOS[1]]: <TextFieldsRounded fontSize="small" />,
+    [DEMOS[2]]: <WidgetsRounded fontSize="small" />,
   };
   return (
     <Section bg="comfort">
       <Grid container spacing={2} alignItems="center">
         <Grid item md={6} sx={{ minWidth: 0 }}>
           <Box maxWidth={500}>
             <SectionHeadline
-              overline="Use cases"
+              overline="Features"
               title={
                 <Typography variant="h2">
-                  Get the right template for your <GradientText>specific need</GradientText>
+                  Upgrade your <GradientText>design workflow</GradientText>
                 </Typography>
               }
-              description="We've gathered templates for lots of use-cases, all powered with the Core components carefully curated from MUI's team."
+              description="The UI kits contain many of the MUI components with states, variations, colors, typography, and icons. We frequently update it to sync with the most up-to-date MUI release."
             />
           </Box>
           <Group desktopColumns={2} sx={{ mt: 4 }}>

diff --git a/docs/src/components/productDesignKit/DesignKitFAQ.tsx b/docs/src/components/productDesignKit/DesignKitFAQ.tsx
@@ -132,7 +132,7 @@ export default function DesignKitFAQ() {
       </Typography>
       <Grid container spacing={2}>
         <Grid item xs={12} md={6}>
-          {renderItem(0)}
+          {renderItem(0, true)}
           {renderItem(1)}
         </Grid>
         <Grid item xs={12} md={6}>

diff --git a/docs/src/components/productDesignKit/DesignKitHero.tsx b/docs/src/components/productDesignKit/DesignKitHero.tsx
@@ -38,8 +38,8 @@ export default function TemplateHero() {
             <br /> <GradientText>design tool</GradientText>
           </Typography>
           <Typography color="text.secondary" sx={{ mb: 3, maxWidth: 450 }}>
-            For the designers out there, pick your favorite design tool to enjoy our components. Get
-            the consistency right when working with developers.
+            Pick your favorite design tool to enjoy and use MUI components. Boost consistency and
+            facilitate communication when working with developers.
           </Typography>
           <Button
             component={Link}

diff --git a/docs/src/components/productDesignKit/DesignKitValues.tsx b/docs/src/components/productDesignKit/DesignKitValues.tsx
@@ -14,31 +14,31 @@ const content = [
     icon: <Palette fontSize="small" color="primary" />,
     title: 'For designers',
     description:
-      "Save time getting the Core components all set up in your favorite design tool. Customize them however you want to match to your product's branding.",
+      'Save time getting the MUI Core components all setup, leveraging the latest features from your favorite design tool.',
   },
   {
     icon: <LibraryBooks fontSize="small" color="primary" />,
     title: 'For product managers',
     description:
-      'Quickly put together ideas and mockups with already in hand components from your actual product.',
+      'Quickly put together ideas and high-fidelity mockups/prototypes using components from your actual product.',
   },
   {
     icon: <CodeRounded fontSize="small" color="primary" />,
     title: 'For developers',
     description:
-      'Effortlessly communicate with designers using the same language around the Core components.',
+      'Effortlessly communicate with designers using the same language around the MUI Core components props and variants.',
   },
 ];
 
 const DesignKitValues = () => {
   return (
     <Container sx={{ py: { xs: 4, sm: 6, md: 8 } }}>
       <Typography variant="body2" color="primary" fontWeight="bold">
-        Why go with us?
+        Collaboration
       </Typography>
       <Typography variant="h2" sx={{ mt: 1, mb: { xs: 2, sm: 4 }, maxWidth: 500 }}>
         Be more <GradientText>efficient</GradientText> designing and developing with the same
-        library.
+        library
       </Typography>
       <Grid container spacing={2}>
         {content.map(({ icon, title, description }) => (

diff --git a/docs/src/components/productTemplate/TemplateDemo.tsx b/docs/src/components/productTemplate/TemplateDemo.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import SwipeableViews from 'react-swipeable-views';
 import { useTheme, alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
+import ButtonBase, { ButtonBaseProps } from '@mui/material/ButtonBase';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 import Section from 'docs/src/layouts/Section';
@@ -10,25 +11,56 @@ import GradientText from 'docs/src/components/typography/GradientText';
 import Item, { Group } from 'docs/src/components/action/Item';
 import Highlighter from 'docs/src/components/action/Highlighter';
 import Frame from 'docs/src/components/action/Frame';
-import ArrowButton from 'docs/src/components/action/ArrowButton';
 import LaunchRounded from '@mui/icons-material/LaunchRounded';
 import Link from 'docs/src/modules/components/Link';
 import ROUTES from 'docs/src/route';
 import DashboardRounded from '@mui/icons-material/DashboardRounded';
 import Layers from '@mui/icons-material/Layers';
 import ShoppingBag from '@mui/icons-material/ShoppingBag';
+import KeyboardArrowLeftRounded from '@mui/icons-material/KeyboardArrowLeftRounded';
+import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
+import More from 'docs/src/components/action/More';
 
 const DEMOS = ['Dashboard', 'Landing Pages', 'E-commerce'];
 
+const ActionArea = (props: ButtonBaseProps) => (
+  <ButtonBase
+    {...props}
+    sx={{
+      width: 100,
+      height: 100,
+      borderRadius: '50%',
+      transition: '0.2s',
+      '&.Mui-disabled': {
+        opacity: 0,
+      },
+      '& > svg': { transition: '0.2s' },
+      backdropFilter: 'blur(4px)',
+      bgcolor: (theme) =>
+        theme.palette.mode === 'dark'
+          ? alpha(theme.palette.primary[500], 0.5)
+          : alpha(theme.palette.primaryDark[500], 0.5),
+      '&:hover, &:focus': {
+        '& > svg': { fontSize: 28 },
+      },
+      position: 'absolute',
+      top: 'calc(50% - 50px)',
+      color: '#fff',
+      p: 1.5,
+      ...props.sx,
+    }}
+  />
+);
+
 export default function TemplateDemo() {
   const globalTheme = useTheme();
   const mode = globalTheme.palette.mode;
   const [demo, setDemo] = React.useState(DEMOS[0]);
   const [templateIndex, setTemplateIndex] = React.useState(0);
   const icons = {
-    [DEMOS[0]]: <DashboardRounded />,
-    [DEMOS[1]]: <Layers />,
-    [DEMOS[2]]: <ShoppingBag />,
+    [DEMOS[0]]: <DashboardRounded fontSize="small" />,
+    [DEMOS[1]]: <Layers fontSize="small" />,
+    [DEMOS[2]]: <ShoppingBag fontSize="small" />,
   };
   const TEMPLATES = {
     [DEMOS[0]]: [
@@ -83,10 +115,10 @@ export default function TemplateDemo() {
               overline="Use cases"
               title={
                 <Typography variant="h2">
-                  Get the right template for your <GradientText>specific need</GradientText>
+                  The right template for your <GradientText>specific need</GradientText>
                 </Typography>
               }
-              description="We've gathered templates for lots of use-cases, all powered with the Core components carefully curated from MUI's team."
+              description="A growing list of templates for diverse use-cases, all powered by MUI Core components and carefully curated by MUI's team."
             />
           </Box>
           <Group desktopColumns={2} sx={{ mt: 4 }}>
@@ -105,6 +137,7 @@ export default function TemplateDemo() {
                 />
               </Highlighter>
             ))}
+            <More component={Link} href={ROUTES.storePopular} noLinkStyle />
           </Group>
         </Grid>
         <Grid item xs={12} md={6}>
@@ -167,12 +200,12 @@ export default function TemplateDemo() {
                           opacity: 0,
                           top: 0,
                           left: 0,
-                          bgcolor: (theme) => alpha(theme.palette.primaryDark[500], 0.8),
+                          bgcolor: (theme) => alpha(theme.palette.primaryDark[900], 0.4),
                           color: '#fff',
                           display: 'flex',
                           alignItems: 'center',
                           justifyContent: 'center',
-                          '&:hover': {
+                          '&:hover, &:focus': {
                             opacity: 1,
                           },
                         }}
@@ -183,6 +216,28 @@ export default function TemplateDemo() {
                     </Box>
                   ))}
                 </SwipeableViews>
+                {templates.length > 1 && (
+                  <React.Fragment>
+                    <ActionArea
+                      aria-label="Previous template"
+                      disabled={templateIndex === 0}
+                      onClick={() => setTemplateIndex((current) => Math.max(0, current - 1))}
+                      sx={{ left: 0, transform: 'translate(-50%)', justifyContent: 'flex-end' }}
+                    >
+                      <KeyboardArrowLeftRounded />
+                    </ActionArea>
+                    <ActionArea
+                      aria-label="Next template"
+                      disabled={templateIndex === templates.length - 1}
+                      onClick={() =>
+                        setTemplateIndex((current) => Math.min(templates.length - 1, current + 1))
+                      }
+                      sx={{ right: 0, transform: 'translate(50%)', justifyContent: 'flex-start' }}
+                    >
+                      <KeyboardArrowRightRounded />
+                    </ActionArea>
+                  </React.Fragment>
+                )}
               </Box>
             </Frame.Demo>
             <Frame.Info
@@ -208,23 +263,6 @@ export default function TemplateDemo() {
                   </Typography>
                 </Box>
               </Box>
-              {templates.length > 1 && (
-                <React.Fragment>
-                  <ArrowButton
-                    direction="left"
-                    disabled={templateIndex === 0}
-                    onClick={() => setTemplateIndex((current) => Math.max(0, current - 1))}
-                    sx={{ ml: 'auto' }}
-                  />
-                  <ArrowButton
-                    direction="right"
-                    disabled={templateIndex === templates.length - 1}
-                    onClick={() =>
-                      setTemplateIndex((current) => Math.min(templates.length - 1, current + 1))
-                    }
-                  />
-                </React.Fragment>
-              )}
             </Frame.Info>
           </Frame>
         </Grid>

diff --git a/docs/src/components/productTemplate/TemplateHero.tsx b/docs/src/components/productTemplate/TemplateHero.tsx
@@ -37,8 +37,8 @@ export default function TemplateHero() {
             templates for your project
           </Typography>
           <Typography color="text.secondary" sx={{ mb: 3, maxWidth: 500 }}>
-            A collection of several 4.5 average rating templates, curated by our Core team to get
-            your projects and application up and running today.
+            A collection of 4.5 average rating templates, selected and curated by MUI&apos;s team of
+            maintainers to get your projects up and running today.
           </Typography>
           <Button
             component={Link}