Skip to content

Commit

Permalink
organize components for better reuse and less duplication
Browse files Browse the repository at this point in the history
  • Loading branch information
@danilo-leal
danilo-leal committed Apr 30, 2024
1 parent ac26fe7 commit 88bcc12
Show file tree
Hide file tree
Showing 2 changed files with 167 additions and 142 deletions.
5 changes: 3 additions & 2 deletions docs/src/components/action/NpmCopyButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ const Button = styled('button')(({ theme }) => ({
marginTop: 16,
cursor: 'copy',
padding: 0,
position: 'relative',
display: 'inline-flex',
alignItems: 'flex-start',
justifyContent: 'center',
Expand Down Expand Up @@ -43,8 +44,8 @@ const Button = styled('button')(({ theme }) => ({
},
'& svg': {
display: 'inline-block',
position: 'relative',
right: 3,
position: 'absolute',
right: -24,
top: 1,
opacity: 0,
transition: theme.transitions.create('opacity', {
Expand Down
304 changes: 164 additions & 140 deletions docs/src/components/productDesignKit/DesignKitDemo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,163 @@ const Image = styled('img')(({ theme }) => ({
}),
}));

export default function TemplateDemo() {
interface MaterialFigmaComponentsProps {
fadeIn?: boolean;
}

export function MaterialFigmaComponents({ fadeIn }: MaterialFigmaComponentsProps) {
return (
<Fade in={fadeIn} timeout={500}>
<Box
sx={[
{
width: '100%',
height: '100%',
'& img': {
position: 'absolute',
left: '50%',
width: { xs: 220, sm: 300 },
'&:nth-of-type(1)': {
top: 120,
transform: 'translate(-70%)',
},
'&:nth-of-type(2)': {
top: 80,
transform: 'translate(-50%)',
},
'&:nth-of-type(3)': {
top: 40,
transform: 'translate(-30%)',
},
},
'&:hover': {
'& img': {
filter: 'drop-shadow(-16px 12px 20px rgba(61, 71, 82, 0.2))',
'&:nth-of-type(1)': {
top: 0,
transform: 'scale(0.8) translate(-110%) rotateY(30deg)',
},
'&:nth-of-type(2)': {
top: 40,
transform: 'scale(0.8) translate(-60%) rotateY(30deg)',
},
'&:nth-of-type(3)': {
top: 40,
transform: 'scale(0.8) translate(-10%) rotateY(30deg)',
},
},
},
},
(theme) =>
theme.applyDarkStyles({
'&:hover': {
'& img': {
filter: 'drop-shadow(-16px 12px 20px rgba(0, 0, 0, 0.4))',
},
},
}),
]}
>
<Image
src="/static/branding/design-kits/Button-light.jpeg"
alt="Material UI Button component variations in the Figma Design Kit."
loading="lazy"
sx={(theme) =>
theme.applyDarkStyles({
content: `url(/static/branding/design-kits/Button-dark.jpeg)`,
})
}
/>
<Image
src="/static/branding/design-kits/Alert-light.jpeg"
alt="Material UI Alert component variations in the Figma Design Kit."
loading="lazy"
sx={(theme) =>
theme.applyDarkStyles({
content: `url(/static/branding/design-kits/Alert-dark.jpeg)`,
})
}
/>
<Image
src="/static/branding/design-kits/Slider-light.jpeg"
alt="Material UI Slider component variations in the Figma Design Kit."
loading="lazy"
sx={(theme) =>
theme.applyDarkStyles({
content: `url(/static/branding/design-kits/Slider-dark.jpeg)`,
})
}
/>
</Box>
</Fade>
);
}

export function MaterialDesignKitInfo() {
return (
<Frame.Info data-mui-color-scheme="dark">
<Box
sx={{
display: 'flex',
alignItems: 'center',
gap: 1,
mb: 0.5,
}}
>
<Typography variant="body2" fontWeight="semiBold">
Available in:
</Typography>
<Box sx={{ display: 'flex', gap: 1, '& >img': { width: 20, height: 20 } }}>
<img src="/static/branding/design-kits/figma-logo.svg" alt="Figma logo." loading="lazy" />
<img
src="/static/branding/design-kits/sketch-logo.svg"
alt="Sketch logo."
loading="lazy"
/>
<img
src="/static/branding/design-kits/adobexd-logo.svg"
alt="Adobe XD logo."
loading="lazy"
/>
</Box>
</Box>
<Typography variant="body2" color="text.secondary" mb={2}>
We frequently update them to stay up-to-date with the latest release.
</Typography>
<Box sx={{ display: 'flex', flexDirection: { xs: 'column', sm: 'row' }, gap: 1.5 }}>
<Button
component={Link}
variant="contained"
size="small"
noLinkStyle
href="https://mui.com/store/?utm_source=marketing&utm_medium=referral&utm_campaign=design-cta2#design"
endIcon={<ChevronRightRoundedIcon />}
>
Buy it now
</Button>
<Button
component={Link}
variant="outlined"
size="small"
color="secondary"
href="https://www.figma.com/community/file/912837788133317724/material-ui-for-figma-and-mui-x"
startIcon={
<img
src="/static/branding/design-kits/figma-logo.svg"
alt=""
loading="lazy"
style={{ width: 16, height: 16 }}
/>
}
>
Figma Preview
</Button>
</Box>
</Frame.Info>
);
}

export default function DesignKitsDemo() {
const [demo, setDemo] = React.useState(DEMOS[0]);
const icons = {
[DEMOS[0]]: <ToggleOnRounded fontSize="small" />,
Expand Down Expand Up @@ -74,98 +230,15 @@ export default function TemplateDemo() {
<Frame>
<Frame.Demo
sx={{
overflow: 'hidden',
overflow: 'clip',
height: { xs: 240, sm: 390 },
perspective: '1000px',
}}
>
<Fade in={demo === 'Components'} timeout={500}>
<Box
sx={[
{
width: '100%',
height: '100%',
'& img': {
position: 'absolute',
left: '50%',
width: { xs: 220, sm: 300 },
'&:nth-of-type(1)': {
top: 120,
transform: 'translate(-70%)',
},
'&:nth-of-type(2)': {
top: 80,
transform: 'translate(-50%)',
},
'&:nth-of-type(3)': {
top: 40,
transform: 'translate(-30%)',
},
},
'&:hover': {
'& img': {
filter: 'drop-shadow(-16px 12px 20px rgba(61, 71, 82, 0.2))',
'&:nth-of-type(1)': {
top: 0,
transform: 'scale(0.8) translate(-108%) rotateY(30deg)',
},
'&:nth-of-type(2)': {
top: 40,
transform: 'scale(0.8) translate(-54%) rotateY(30deg)',
},
'&:nth-of-type(3)': {
top: 40,
transform: 'scale(0.8) translate(-0%) rotateY(30deg)',
},
},
},
},
(theme) =>
theme.applyDarkStyles({
'&:hover': {
'& img': {
filter: 'drop-shadow(-16px 12px 20px rgba(0, 0, 0, 0.4))',
},
},
}),
]}
>
<Image
src={`/static/branding/design-kits/Button-light.jpeg`}
alt=""
loading="lazy"
sx={(theme) =>
theme.applyDarkStyles({
content: `url(/static/branding/design-kits/Button-dark.jpeg)`,
})
}
/>
<Image
src={`/static/branding/design-kits/Alert-light.jpeg`}
alt=""
loading="lazy"
sx={(theme) =>
theme.applyDarkStyles({
content: `url(/static/branding/design-kits/Alert-dark.jpeg)`,
})
}
/>
<Image
src={`/static/branding/design-kits/Slider-light.jpeg`}
alt=""
loading="lazy"
sx={(theme) =>
theme.applyDarkStyles({
content: `url(/static/branding/design-kits/Slider-dark.jpeg)`,
})
}
/>
</Box>
</Fade>
<MaterialFigmaComponents fadeIn={demo === 'Components'} />
<Fade in={demo === 'Branding'} timeout={500}>
<Image
src={`/static/branding/design-kits/Colors-light.jpeg`}
alt=""
src="/static/branding/design-kits/Colors-light.jpeg"
alt="Available colors on the Material UI Kit."
loading="lazy"
width="300"
sx={(theme) => ({
Expand All @@ -182,8 +255,8 @@ export default function TemplateDemo() {
</Fade>
<Fade in={demo === 'Iconography'} timeout={500}>
<Image
src={`/static/branding/design-kits/Icons-light.jpeg`}
alt=""
src="/static/branding/design-kits/Icons-light.jpeg"
alt="A bunch of icons available with the Material UI Design Kits."
loading="lazy"
width="300"
sx={(theme) => ({
Expand All @@ -199,56 +272,7 @@ export default function TemplateDemo() {
/>
</Fade>
</Frame.Demo>
<Frame.Info data-mui-color-scheme="dark">
<Box
sx={{
display: 'flex',
alignItems: 'center',
gap: 1,
}}
>
<Typography variant="body2" fontWeight="semiBold">
Available in:
</Typography>
<Box sx={{ display: 'flex', gap: 1, '& >img': { width: 22, height: 22 } }}>
<img src="/static/branding/design-kits/figma-logo.svg" alt="" loading="lazy" />
<img src="/static/branding/design-kits/sketch-logo.svg" alt="" loading="lazy" />
<img src="/static/branding/design-kits/adobexd-logo.svg" alt="" loading="lazy" />
</Box>
</Box>
<Typography variant="body2" color="text.secondary" mb={2}>
We frequently update them to stay up-to-date with the latest release.
</Typography>
<Box sx={{ display: 'flex', flexDirection: { xs: 'column', sm: 'row' }, gap: 1.5 }}>
<Button
component={Link}
variant="contained"
size="small"
noLinkStyle
href="https://mui.com/store/?utm_source=marketing&utm_medium=referral&utm_campaign=design-cta2#design"
endIcon={<ChevronRightRoundedIcon />}
>
Buy it now
</Button>
<Button
component={Link}
variant="outlined"
size="small"
color="secondary"
href="https://www.figma.com/community/file/912837788133317724/material-ui-for-figma-and-mui-x"
startIcon={
<img
src="/static/branding/design-kits/figma-logo.svg"
alt=""
loading="lazy"
style={{ width: 16, height: 16 }}
/>
}
>
Figma Preview
</Button>
</Box>
</Frame.Info>
<MaterialDesignKitInfo />
</Frame>
</Grid>
</Grid>
Expand Down

0 comments on commit 88bcc12

Please sign in to comment.