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

Jump to bottom

[material-ui][docs] Remove Masonry component and Material Design icon from the landing page template #41080

Merged
merged 13 commits into from
Feb 15, 2024
Merged

[material-ui][docs] Remove Masonry component and Material Design icon from the landing page template #41080

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
1cc92a2
Replace Masonry for Grid
zanivan Feb 13, 2024
e451d6a
Replace Material Design icon
zanivan Feb 13, 2024
7b186fd
Run docs:typescript:formatted
zanivan Feb 13, 2024
90b5771
Fix eslint
zanivan Feb 13, 2024
8ce1c30
Fix lint
zanivan Feb 13, 2024
0aab215
Rerun-tests
zanivan Feb 13, 2024
bba4442
Replace icon for 'MD2' label
zanivan Feb 14, 2024
5219fde
Merge remote-tracking branch 'upstream/master' into material-ui-templ…
zanivan Feb 14, 2024
04da734
Rerun tests
zanivan Feb 14, 2024
534b941
Merge remote-tracking branch 'upstream/master' into material-ui-templ…
zanivan Feb 15, 2024
0f08c05
Danilo's feedback
zanivan Feb 15, 2024
0e3af36
Merge remote-tracking branch 'upstream/master' into material-ui-templ…
zanivan Feb 15, 2024
2c600dc
Fix lint
zanivan Feb 15, 2024
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
6 changes: 1 addition & 5 deletions docs/data/material/getting-started/templates/landing-page/LandingPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import { ThemeProvider, createTheme } from '@mui/material/styles';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
import SvgMaterialDesign from 'docs/src/icons/SvgMaterialDesign';
import AppAppBar from './components/AppAppBar';
import Hero from './components/Hero';
import LogoCollection from './components/LogoCollection';
Expand Down Expand Up @@ -51,10 +50,7 @@ function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) {
<AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
Custom theme
</ToggleButton>
<ToggleButton value={false}>
<SvgMaterialDesign sx={{ fontSize: '20px', mr: 1 }} />
Material Design
</ToggleButton>
<ToggleButton value={false}>Material Design 2</ToggleButton>
</ToggleButtonGroup>
</Box>
);
Expand Down
6 changes: 1 addition & 5 deletions docs/data/material/getting-started/templates/landing-page/LandingPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { ThemeProvider, createTheme } from '@mui/material/styles';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
import SvgMaterialDesign from 'docs/src/icons/SvgMaterialDesign';
import AppAppBar from './components/AppAppBar';
import Hero from './components/Hero';
import LogoCollection from './components/LogoCollection';
Expand Down Expand Up @@ -58,10 +57,7 @@ function ToggleCustomTheme({
<AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
Custom theme
</ToggleButton>
<ToggleButton value={false}>
<SvgMaterialDesign sx={{ fontSize: '20px', mr: 1 }} />
Material Design
</ToggleButton>
<ToggleButton value={false}>Material Design 2</ToggleButton>
</ToggleButtonGroup>
</Box>
);
Expand Down
59 changes: 35 additions & 24 deletions docs/data/material/getting-started/templates/landing-page/components/Testimonials.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@ import Avatar from '@mui/material/Avatar';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import Container from '@mui/material/Container';
import Masonry from '@mui/lab/Masonry';
import { useMediaQuery } from '@mui/material';
import Grid from '@mui/material/Grid';
import { useTheme } from '@mui/system';

const userTestimonials = [
Expand All @@ -23,7 +22,7 @@ const userTestimonials = [
name: 'Travis Howard',
occupation: 'Lead Product Designer',
testimonial:
"One of the standout features of this product is the exceptional customer support. In my experience, the team behind this product has been quick to respond and incredibly helpful. It's reassuring to know that they stand firmly behind their product, providing the kind of support that enhances the overall user experience and instills confidence in the brand.",
"One of the standout features of this product is the exceptional customer support. In my experience, the team behind this product has been quick to respond and incredibly helpful. It's reassuring to know that they stand firmly behind their product.",
},
{
avatar: <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />,
Expand Down Expand Up @@ -80,8 +79,6 @@ const logoStyle = {

export default function Testimonials() {
const theme = useTheme();
const isSmallScreen = useMediaQuery('(max-width:600px)');
const columns = isSmallScreen ? 1 : 3;
const logos = theme.palette.mode === 'light' ? darkLogos : whiteLogos;

return (
Expand Down Expand Up @@ -112,32 +109,46 @@ export default function Testimonials() {
and reliable support.
</Typography>
</Box>
<Masonry columns={columns} spacing={2}>
<Grid container spacing={2}>
{userTestimonials.map((testimonial, index) => (
<Card key={index} sx={{ p: 1 }}>
<CardContent>
<Typography variant="body2" color="text.secondary">
{testimonial.testimonial}
</Typography>
</CardContent>
<Box
<Grid item xs={12} sm={6} md={4} key={index} sx={{ display: 'flex' }}>
<Card
sx={{
display: 'flex',
flexDirection: 'row',
flexDirection: 'column',
justifyContent: 'space-between',
pr: 2,
flexGrow: 1,
p: 1,
}}
>
<CardHeader
avatar={testimonial.avatar}
title={testimonial.name}
subheader={testimonial.occupation}
/>
<img src={logos[index]} alt={`Logo ${index + 1}`} style={logoStyle} />
</Box>
</Card>
<CardContent>
<Typography variant="body2" color="text.secondary">
{testimonial.testimonial}
</Typography>
</CardContent>
<Box
sx={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
pr: 2,
}}
>
<CardHeader
avatar={testimonial.avatar}
title={testimonial.name}
subheader={testimonial.occupation}
/>
<img
src={logos[index]}
alt={`Logo ${index + 1}`}
style={logoStyle}
/>
</Box>
</Card>
</Grid>
))}
</Masonry>
</Grid>
</Container>
);
}
59 changes: 35 additions & 24 deletions docs/data/material/getting-started/templates/landing-page/components/Testimonials.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@ import Avatar from '@mui/material/Avatar';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import Container from '@mui/material/Container';
import Masonry from '@mui/lab/Masonry';
import { useMediaQuery } from '@mui/material';
import Grid from '@mui/material/Grid';
import { useTheme } from '@mui/system';

const userTestimonials = [
Expand All @@ -23,7 +22,7 @@ const userTestimonials = [
name: 'Travis Howard',
occupation: 'Lead Product Designer',
testimonial:
"One of the standout features of this product is the exceptional customer support. In my experience, the team behind this product has been quick to respond and incredibly helpful. It's reassuring to know that they stand firmly behind their product, providing the kind of support that enhances the overall user experience and instills confidence in the brand.",
"One of the standout features of this product is the exceptional customer support. In my experience, the team behind this product has been quick to respond and incredibly helpful. It's reassuring to know that they stand firmly behind their product.",
},
{
avatar: <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />,
Expand Down Expand Up @@ -80,8 +79,6 @@ const logoStyle = {

export default function Testimonials() {
const theme = useTheme();
const isSmallScreen = useMediaQuery('(max-width:600px)');
const columns = isSmallScreen ? 1 : 3;
const logos = theme.palette.mode === 'light' ? darkLogos : whiteLogos;

return (
Expand Down Expand Up @@ -112,32 +109,46 @@ export default function Testimonials() {
and reliable support.
</Typography>
</Box>
<Masonry columns={columns} spacing={2}>
<Grid container spacing={2}>
{userTestimonials.map((testimonial, index) => (
<Card key={index} sx={{ p: 1 }}>
<CardContent>
<Typography variant="body2" color="text.secondary">
{testimonial.testimonial}
</Typography>
</CardContent>
<Box
<Grid item xs={12} sm={6} md={4} key={index} sx={{ display: 'flex' }}>
<Card
sx={{
display: 'flex',
flexDirection: 'row',
flexDirection: 'column',
justifyContent: 'space-between',
pr: 2,
flexGrow: 1,
p: 1,
}}
>
<CardHeader
avatar={testimonial.avatar}
title={testimonial.name}
subheader={testimonial.occupation}
/>
<img src={logos[index]} alt={`Logo ${index + 1}`} style={logoStyle} />
</Box>
</Card>
<CardContent>
<Typography variant="body2" color="text.secondary">
{testimonial.testimonial}
</Typography>
</CardContent>
<Box
sx={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
pr: 2,
}}
>
<CardHeader
avatar={testimonial.avatar}
title={testimonial.name}
subheader={testimonial.occupation}
/>
<img
src={logos[index]}
alt={`Logo ${index + 1}`}
style={logoStyle}
/>
</Box>
</Card>
</Grid>
))}
</Masonry>
</Grid>
</Container>
);
}
Loading