[website] Add templates & design-kits page (#27811)

mui · Aug 23, 2021 · 49f21f8 · 49f21f8
1 parent c262aa8
commit 49f21f8
Show file tree

Hide file tree

Showing 56 changed files with 1,879 additions and 531 deletions.
diff --git a/docs/pages/branding/about.tsx b/docs/pages/branding/about.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Head from 'docs/src/modules/components/Head';
-import { useTheme, ThemeProvider as MuiThemeProvider, createTheme } from '@material-ui/core/styles';
+import { ThemeProvider as MuiThemeProvider, createTheme } from '@material-ui/core/styles';
 import ThemeProvider from 'docs/src/modules/ThemeContext';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import Avatar from '@material-ui/core/Avatar';
@@ -18,7 +18,7 @@ import TwitterIcon from '@material-ui/icons/Twitter';
 import GitHubIcon from '@material-ui/icons/GitHub';
 import Link from 'docs/src/modules/components/Link';
 import AppHeader from 'docs/src/layouts/AppHeader';
-import ReferencesCore from 'docs/src/components/home/ReferencesCore';
+import References, { CORE_CUSTOMERS } from 'docs/src/components/home/References';
 import HeroEnd from 'docs/src/components/home/HeroEnd';
 import AppFooter from 'docs/src/layouts/AppFooter';
 import { MuiStats } from 'docs/src/components/home/Testimonials';
@@ -435,8 +435,6 @@ const emeriti = [
 ];
 
 function AboutContent() {
-  const globalTheme = useTheme();
-  const mode = globalTheme.palette.mode;
   return (
     <React.Fragment>
       <Container>
@@ -472,7 +470,7 @@ function AboutContent() {
             barrier, making design skills accessible.
           </Typography>
         </Box>
-        <ReferencesCore />
+        <References companies={CORE_CUSTOMERS} />
       </Container>
       <Box
         sx={{ bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.900' : 'grey.50') }}
@@ -507,7 +505,7 @@ function AboutContent() {
                 </Box>
               ))}
             </Grid>
-            <MuiStats mode={mode} />
+            <MuiStats />
           </Grid>
         </Container>
       </Box>

diff --git a/docs/pages/branding/design-kits.tsx b/docs/pages/branding/design-kits.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import Head from 'docs/src/modules/components/Head';
+import ThemeProvider from 'docs/src/modules/ThemeContext';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import Divider from '@material-ui/core/Divider';
+import AppHeader from 'docs/src/layouts/AppHeader';
+import AppFooter from 'docs/src/layouts/AppFooter';
+import DesignKitHero from 'docs/src/components/productDesignKit/DesignKitHero';
+import DesignKitValues from 'docs/src/components/productDesignKit/DesignKitValues';
+import DesignKitDemo from 'docs/src/components/productDesignKit/DesignKitDemo';
+import DesignKitFAQ from 'docs/src/components/productDesignKit/DesignKitFAQ';
+import Testimonials from 'docs/src/components/home/Testimonials';
+import HeroEnd from 'docs/src/components/home/HeroEnd';
+
+export default function DesignKits() {
+  return (
+    <ThemeProvider>
+      <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."
+      />
+      <CssBaseline />
+      <AppHeader />
+      <main>
+        <DesignKitHero />
+        <DesignKitValues />
+        <DesignKitDemo />
+        <DesignKitFAQ />
+        <Testimonials />
+        <HeroEnd />
+      </main>
+      <Divider />
+      <AppFooter />
+    </ThemeProvider>
+  );
+}
diff --git a/docs/pages/branding/home.tsx b/docs/pages/branding/home.tsx
@@ -6,7 +6,7 @@ import CssBaseline from '@material-ui/core/CssBaseline';
 import Divider from '@material-ui/core/Divider';
 import AppHeader from 'docs/src/layouts/AppHeader';
 import Hero from 'docs/src/components/home/Hero';
-import ReferencesCore from 'docs/src/components/home/ReferencesCore';
+import References, { CORE_CUSTOMERS } from 'docs/src/components/home/References';
 import ProductSuite from 'docs/src/components/home/ProductSuite';
 import ValueProposition from 'docs/src/components/home/ValueProposition';
 import DesignSystemComponents from 'docs/src/components/home/DesignSystemComponents';
@@ -29,11 +29,11 @@ export default function Home() {
         <Box
           sx={{ height: 10 }} // to prevent loading asset below the fold
         />
-        <ReferencesCore />
+        <References companies={CORE_CUSTOMERS} />
         <ProductSuite />
         <ValueProposition />
         <DesignSystemComponents />
-        <Testimonials mode="dark" />
+        <Testimonials />
         <Sponsors />
         <HeroEnd />
         <Divider />

diff --git a/docs/pages/branding/templates.tsx b/docs/pages/branding/templates.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import Head from 'docs/src/modules/components/Head';
+import ThemeProvider from 'docs/src/modules/ThemeContext';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import Divider from '@material-ui/core/Divider';
+import AppHeader from 'docs/src/layouts/AppHeader';
+import AppFooter from 'docs/src/layouts/AppFooter';
+import TemplateHero from 'docs/src/components/productTemplate/TemplateHero';
+import ValueProposition from 'docs/src/components/home/ValueProposition';
+import TemplateDemo from 'docs/src/components/productTemplate/TemplateDemo';
+import Testimonials from 'docs/src/components/home/Testimonials';
+import HeroEnd from 'docs/src/components/home/HeroEnd';
+
+export default function Templates() {
+  return (
+    <ThemeProvider>
+      <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."
+      />
+      <CssBaseline />
+      <AppHeader />
+      <main>
+        <TemplateHero />
+        <ValueProposition />
+        <TemplateDemo />
+        <Testimonials />
+        <HeroEnd />
+      </main>
+      <Divider />
+      <AppFooter />
+    </ThemeProvider>
+  );
+}
diff --git a/docs/public/static/branding/design-kits/Alert-dark.jpeg b/docs/public/static/branding/design-kits/Alert-dark.jpeg
diff --git a/docs/public/static/branding/design-kits/Alert-light.jpeg b/docs/public/static/branding/design-kits/Alert-light.jpeg
diff --git a/docs/public/static/branding/design-kits/Button-dark.jpeg b/docs/public/static/branding/design-kits/Button-dark.jpeg
diff --git a/docs/public/static/branding/design-kits/Button-light.jpeg b/docs/public/static/branding/design-kits/Button-light.jpeg
diff --git a/docs/public/static/branding/design-kits/Colors-dark.jpeg b/docs/public/static/branding/design-kits/Colors-dark.jpeg
diff --git a/docs/public/static/branding/design-kits/Colors-light.jpeg b/docs/public/static/branding/design-kits/Colors-light.jpeg
diff --git a/docs/public/static/branding/design-kits/Icons-dark.jpeg b/docs/public/static/branding/design-kits/Icons-dark.jpeg
diff --git a/docs/public/static/branding/design-kits/Icons-light.jpeg b/docs/public/static/branding/design-kits/Icons-light.jpeg
diff --git a/docs/public/static/branding/design-kits/Slider-dark.jpeg b/docs/public/static/branding/design-kits/Slider-dark.jpeg
diff --git a/docs/public/static/branding/design-kits/Slider-light.jpeg b/docs/public/static/branding/design-kits/Slider-light.jpeg
diff --git a/docs/public/static/branding/store-templates/template-bazar-dark.jpeg b/docs/public/static/branding/store-templates/template-bazar-dark.jpeg
diff --git a/docs/public/static/branding/store-templates/template-bazar-light.jpeg b/docs/public/static/branding/store-templates/template-bazar-light.jpeg
diff --git a/docs/public/static/branding/store-templates/template-dark1.jpeg b/docs/public/static/branding/store-templates/template-dark1.jpeg
diff --git a/docs/public/static/branding/store-templates/template-dark2.jpeg b/docs/public/static/branding/store-templates/template-dark2.jpeg
diff --git a/docs/public/static/branding/store-templates/template-dark3.jpeg b/docs/public/static/branding/store-templates/template-dark3.jpeg
diff --git a/docs/public/static/branding/store-templates/template-dark4.jpeg b/docs/public/static/branding/store-templates/template-dark4.jpeg
diff --git a/docs/public/static/branding/store-templates/template-dark5.jpeg b/docs/public/static/branding/store-templates/template-dark5.jpeg
diff --git a/docs/public/static/branding/store-templates/template-dark6.jpeg b/docs/public/static/branding/store-templates/template-dark6.jpeg
diff --git a/docs/public/static/branding/store-templates/template-light1.jpeg b/docs/public/static/branding/store-templates/template-light1.jpeg
diff --git a/docs/public/static/branding/store-templates/template-light2.jpeg b/docs/public/static/branding/store-templates/template-light2.jpeg
diff --git a/docs/public/static/branding/store-templates/template-light3.jpeg b/docs/public/static/branding/store-templates/template-light3.jpeg
diff --git a/docs/public/static/branding/store-templates/template-light4.jpeg b/docs/public/static/branding/store-templates/template-light4.jpeg
diff --git a/docs/public/static/branding/store-templates/template-light5.jpeg b/docs/public/static/branding/store-templates/template-light5.jpeg
diff --git a/docs/public/static/branding/store-templates/template-light6.jpeg b/docs/public/static/branding/store-templates/template-light6.jpeg
diff --git a/docs/src/components/action/ArrowButton.tsx b/docs/src/components/action/ArrowButton.tsx
@@ -0,0 +1,41 @@
+import * as React from 'react';
+import IconButton, { IconButtonProps } from '@material-ui/core/IconButton';
+import KeyboardArrowLeftRounded from '@material-ui/icons/KeyboardArrowLeftRounded';
+import KeyboardArrowRightRounded from '@material-ui/icons/KeyboardArrowRightRounded';
+
+export default function ArrowButton({
+  direction,
+  ...props
+}: { direction: 'left' | 'right' } & IconButtonProps) {
+  const label = {
+    left: 'Previous',
+    right: 'Next',
+  };
+  return (
+    <IconButton
+      size="small"
+      aria-label={label[direction]}
+      {...props}
+      sx={{
+        color: (theme) => (theme.palette.mode === 'dark' ? '#fff' : 'primary.main'),
+        border: '1px solid',
+        borderColor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.300' : 'grey.200'),
+        '&:hover': {
+          borderColor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.200' : 'grey.300'),
+        },
+        '&.Mui-disabled': {
+          opacity: 0.5,
+          color: (theme) => (theme.palette.mode === 'dark' ? '#fff' : 'grey.700'),
+          borderColor: (theme) => (theme.palette.mode === 'dark' ? 'primary.700' : 'grey.300'),
+        },
+        '& + .MuiIconButton-root': {
+          ml: 2,
+        },
+        ...props.sx,
+      }}
+    >
+      {direction === 'left' && <KeyboardArrowLeftRounded fontSize="small" />}
+      {direction === 'right' && <KeyboardArrowRightRounded fontSize="small" />}
+    </IconButton>
+  );
+}
diff --git a/docs/src/components/action/Frame.tsx b/docs/src/components/action/Frame.tsx
@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { ThemeProvider } from '@material-ui/core/styles';
+import Box, { BoxProps } from '@material-ui/core/Box';
+import { brandingDarkTheme } from 'docs/src/modules/brandingTheme';
+
+const Demo = (props: BoxProps) => {
+  return (
+    <Box
+      {...props}
+      sx={{
+        position: 'relative',
+        bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.700' : 'grey.100'),
+        border: '1px solid',
+        borderColor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.600' : 'grey.200'),
+        ...props.sx,
+      }}
+    />
+  );
+};
+
+const Info = (props: BoxProps) => {
+  return (
+    <ThemeProvider theme={brandingDarkTheme}>
+      <Box
+        {...props}
+        sx={{
+          color: '#fff',
+          p: 2,
+          bgcolor: 'primaryDark.800',
+          border: '1px solid',
+          borderColor: 'primaryDark.700',
+          ...props.sx,
+        }}
+      />
+    </ThemeProvider>
+  );
+};
+
+const Frame = (props: BoxProps) => {
+  return (
+    <Box
+      {...props}
+      sx={{
+        '& > div:first-of-type': {
+          borderTopLeftRadius: '10px',
+          borderTopRightRadius: '10px',
+        },
+        '& > div:last-of-type': {
+          borderBottomLeftRadius: '10px',
+          borderBottomRightRadius: '10px',
+        },
+      }}
+    />
+  );
+};
+
+Frame.Demo = Demo;
+Frame.Info = Info;
+
+export default Frame;
diff --git a/docs/src/components/action/Highlighter.tsx b/docs/src/components/action/Highlighter.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import ButtonBase, { ButtonBaseProps } from '@material-ui/core/ButtonBase';
+
+export default function Highlighter({
+  disableBorder = false,
+  selected = false,
+  selectedBg = 'white',
+  ...props
+}: {
+  disableBorder?: boolean;
+  selectedBg?: 'white' | 'comfort';
+  selected?: boolean;
+} & ButtonBaseProps) {
+  const lightSelectedBg = {
+    white: '#fff',
+    comfort: 'grey.50',
+  };
+  return (
+    <ButtonBase
+      {...props}
+      sx={{
+        justifyContent: 'flex-start',
+        textAlign: 'left',
+        borderRadius: 1,
+        height: '100%',
+        border: '1px solid transparent',
+        ...((!disableBorder || selected) && {
+          borderColor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.500' : 'grey.200'),
+        }),
+        ...(selected && {
+          bgcolor: (theme) =>
+            theme.palette.mode === 'dark' ? 'primaryDark.700' : lightSelectedBg[selectedBg],
+          borderColor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.300' : 'grey.200'),
+        }),
+        ...(!selected && {
+          '&:hover, &:focus': {
+            bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.800' : 'grey.100'),
+            '@media (hover: none)': {
+              bgcolor: 'transparent',
+            },
+          },
+        }),
+        ...props.sx,
+      }}
+    />
+  );
+}
diff --git a/docs/src/components/action/Item.tsx b/docs/src/components/action/Item.tsx
@@ -0,0 +1,99 @@
+import * as React from 'react';
+import { useTheme } from '@material-ui/core/styles';
+import Box, { BoxProps } from '@material-ui/core/Box';
+import Typography from '@material-ui/core/Typography';
+
+export function Group({ desktopColumns = 1, ...props }: { desktopColumns?: number } & BoxProps) {
+  const theme = useTheme();
+  return (
+    <Box
+      {...props}
+      sx={{
+        maxWidth: { md: 500 },
+        overflow: 'auto',
+        display: 'grid',
+        gap: 1,
+        gridTemplateColumns: `repeat(${desktopColumns}, 1fr)`,
+        '& > *': {
+          minWidth: {
+            xs: desktopColumns === 1 ? 300 : 225,
+            sm: desktopColumns === 1 ? 400 : 225,
+            md: 'auto',
+          },
+          gridRow: { xs: 1, md: 'auto' },
+        },
+        [theme.breakpoints.down('md')]: {
+          mx: -3,
+          px: 3,
+          mb: -1.5,
+          pb: 2,
+          scrollSnapType: 'inline mandatory',
+          scrollPaddingLeft: 30,
+          scrollPaddingRight: 30,
+          '& > *': {
+            scrollSnapAlign: 'start',
+          },
+          '& > *:last-child': {
+            position: 'relative',
+            '&:after': {
+              // to create scroll spacing on the right edge
+              content: '""',
+              position: 'absolute',
+              blockSize: '100%',
+              inlineSize: 30,
+              insetBlockStart: 0,
+              insetInlineEnd: -30,
+            },
+          },
+        },
+        [theme.breakpoints.down('sm')]: {
+          mx: -2,
+          px: 2,
+          scrollPaddingLeft: 20,
+          scrollPaddingRight: 20,
+          '& > *:last-child:after': {
+            inlineSize: 20,
+            insetBlockStart: 0,
+            insetInlineEnd: -20,
+          },
+        },
+        ...props.sx,
+      }}
+    />
+  );
+}
+
+export default function Item({
+  icon,
+  title,
+  description,
+  ...props
+}: {
+  icon: React.ReactNode;
+  title: string;
+  description?: string;
+} & BoxProps) {
+  return (
+    <Box
+      {...props}
+      component="span"
+      sx={{
+        p: 2,
+        display: 'flex',
+        alignItems: 'center',
+        ...props.sx,
+      }}
+    >
+      {icon}
+      <Typography
+        component="span"
+        color="text.primary"
+        sx={{ ml: 2 }}
+        variant="body2"
+        fontWeight="bold"
+      >
+        {title}
+      </Typography>
+    </Box>
+  );
+}