Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[website] Add components index page #28485

Merged
merged 7 commits into from
Sep 21, 2021
Merged

[website] Add components index page #28485

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ef98d33
add all components page
siriwatknp Sep 20, 2021
1a0681e
minor adjust
siriwatknp Sep 20, 2021
db5284d
add default height to prevent layout shift
siriwatknp Sep 20, 2021
53261e3
remove Masonry
siriwatknp Sep 20, 2021
85f76bc
Update docs/pages/components.tsx
siriwatknp Sep 21, 2021
8b9126d
Update docs/pages/components.tsx
siriwatknp Sep 21, 2021
213580f
support deep children
siriwatknp Sep 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
116 changes: 116 additions & 0 deletions docs/pages/components.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
10 changes: 10 additions & 0 deletions docs/src/modules/brandingTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down