From 88bcc124259523c621e6cf9292c8253f97a347f5 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Tue, 30 Apr 2024 12:59:26 -0300
Subject: [PATCH] organize components for better reuse and less duplication

---
 docs/src/components/action/NpmCopyButton.tsx  |   5 +-
 .../productDesignKit/DesignKitDemo.tsx        | 304 ++++++++++--------
 2 files changed, 167 insertions(+), 142 deletions(-)

diff --git a/docs/src/components/action/NpmCopyButton.tsx b/docs/src/components/action/NpmCopyButton.tsx
index de9efd9e45a99b..f773a49352c3ae 100644
--- a/docs/src/components/action/NpmCopyButton.tsx
+++ b/docs/src/components/action/NpmCopyButton.tsx
@@ -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',
@@ -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', {
diff --git a/docs/src/components/productDesignKit/DesignKitDemo.tsx b/docs/src/components/productDesignKit/DesignKitDemo.tsx
index e5b13fe187de3e..72637f25411e37 100644
--- a/docs/src/components/productDesignKit/DesignKitDemo.tsx
+++ b/docs/src/components/productDesignKit/DesignKitDemo.tsx
@@ -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" />,
@@ -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) => ({
@@ -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) => ({
@@ -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>