[website] Add components index page (#28485)

mui · Sep 21, 2021 · f8fcae6 · f8fcae6
1 parent bbc39e6
commit f8fcae6
Show file tree

Hide file tree

Showing 2 changed files with 126 additions and 0 deletions.
diff --git a/docs/pages/components.tsx b/docs/pages/components.tsx
@@ -0,0 +1,116 @@
+import * as React from 'react';
+import Head from 'docs/src/modules/components/Head';
+import Box from '@mui/material/Box';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import Typography from '@mui/material/Typography';
+import Divider from '@mui/material/Divider';
+import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
+import AppHeader from 'docs/src/layouts/AppHeader';
+import AppFooter from 'docs/src/layouts/AppFooter';
+import BrandingProvider from 'docs/src/BrandingProvider';
+import Section from 'docs/src/layouts/Section';
+import PageContext from 'docs/src/modules/components/PageContext';
+import { pageToTitleI18n } from 'docs/src/modules/utils/helpers';
+import { useTranslate } from 'docs/src/modules/utils/i18n';
+import Link from 'docs/src/modules/components/Link';
+import { MuiPage } from 'docs/src/pages';
+
+export default function Components() {
+  const { pages } = React.useContext(PageContext);
+  const t = useTranslate();
+  const componentPageData = pages.find(({ pathname }) => pathname === '/components');
+  function renderItem(aPage: MuiPage) {
+    return (
+      <ListItem key={aPage.pathname} disablePadding>
+        <ListItemButton
+          component={Link}
+          noLinkStyle
+          href={aPage.pathname}
+          sx={{
+            px: 1,
+            py: 0.5,
+            fontSize: '0.84375rem',
+            fontWeight: 500,
+            '&:hover, &:focus': { '& svg': { opacity: 1 } },
+          }}
+        >
+          {pageToTitleI18n(aPage, t) || ''}
+          <KeyboardArrowRightRounded
+            sx={{
+              ml: 'auto',
+              fontSize: '1.125rem',
+              opacity: 0,
+              color: 'primary.main',
+            }}
+          />
+        </ListItemButton>
+      </ListItem>
+    );
+  }
+  return (
+    <BrandingProvider>
+      <Head
+        title="Components - MUI"
+        description="MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design. You will develop React applications faster."
+      />
+      <AppHeader />
+      <main>
+        <Section bg="gradient" sx={{ py: { xs: 2, sm: 4 } }}>
+          <Typography component="h1" variant="h2" sx={{ mb: 4, pl: 1 }}>
+            All Components
+          </Typography>
+          <Box
+            sx={{
+              display: 'grid',
+              gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+            }}
+          >
+            {(componentPageData?.children || []).map((page) => (
+              <Box key={page.pathname} sx={{ pb: 2 }}>
+                <Typography
+                  component="h2"
+                  variant="body2"
+                  sx={{
+                    fontWeight: 500,
+                    color: 'grey.600',
+                    px: 1,
+                  }}
+                >
+                  {pageToTitleI18n(page, t)}
+                </Typography>
+                <List>
+                  {(page.children || []).map((nestedPage) => {
+                    if (nestedPage.children) {
+                      return (
+                        <ListItem key={nestedPage.pathname} sx={{ py: 0, px: 1 }}>
+                          <Box sx={{ width: '100%', pt: 1 }}>
+                            <Typography
+                              component="div"
+                              variant="body2"
+                              sx={{
+                                fontWeight: 500,
+                                color: 'grey.600',
+                              }}
+                            >
+                              {pageToTitleI18n(nestedPage, t) || ''}
+                            </Typography>
+                            <List>{nestedPage.children.map(renderItem)}</List>
+                          </Box>
+                        </ListItem>
+                      );
+                    }
+                    return renderItem(nestedPage);
+                  })}
+                </List>
+              </Box>
+            ))}
+          </Box>
+        </Section>
+      </main>
+      <Divider />
+      <AppFooter />
+    </BrandingProvider>
+  );
+}
diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts
@@ -374,6 +374,16 @@ export function getThemedComponents(theme: Theme) {
           },
         },
       },
+      MuiListItemButton: {
+        styleOverrides: {
+          root: {
+            borderRadius: 5,
+            '&:hover, &:focus': {
+              backgroundColor: theme.palette.mode === 'dark' ? '' : theme.palette.grey[100],
+            },
+          },
+        },
+      },
       MuiSelect: {
         defaultProps: {
           IconComponent: ArrowDropDownRounded,