[docs][material-ui] Add script to generate template screenshots (mui#…

…42903)
joserodolfofreitas · Jul 29, 2024 · 8563551 · 8563551
1 parent 793b0f5
commit 8563551
Show file tree

Hide file tree

Showing 85 changed files with 267 additions and 120 deletions.
diff --git a/docs/data/joy/getting-started/templates/email/components/Header.tsx b/docs/data/joy/getting-started/templates/email/components/Header.tsx
@@ -42,7 +42,7 @@ function ColorSchemeToggle() {
   return (
     <Tooltip title="Change theme" variant="outlined">
       <IconButton
-        id="toggle-mode"
+        data-screenshot="toggle-mode"
         size="sm"
         variant="plain"
         color="neutral"

diff --git a/docs/data/joy/getting-started/templates/files/components/Header.tsx b/docs/data/joy/getting-started/templates/files/components/Header.tsx
@@ -42,7 +42,7 @@ function ColorSchemeToggle() {
   return (
     <Tooltip title="Change theme" variant="outlined">
       <IconButton
-        id="toggle-mode"
+        data-screenshot="toggle-mode"
         size="sm"
         variant="plain"
         color="neutral"

diff --git a/docs/data/joy/getting-started/templates/framesx-web-blocks/App.tsx b/docs/data/joy/getting-started/templates/framesx-web-blocks/App.tsx
@@ -30,7 +30,7 @@ function ColorSchemeToggle() {
   }
   return (
     <IconButton
-      id="toggle-mode"
+      data-screenshot="toggle-mode"
       size="lg"
       variant="soft"
       color="neutral"

diff --git a/docs/data/joy/getting-started/templates/messages/components/ColorSchemeToggle.tsx b/docs/data/joy/getting-started/templates/messages/components/ColorSchemeToggle.tsx
@@ -26,7 +26,7 @@ export default function ColorSchemeToggle(props: IconButtonProps) {
   }
   return (
     <IconButton
-      id="toggle-mode"
+      data-screenshot="toggle-mode"
       size="sm"
       variant="outlined"
       color="neutral"

diff --git a/docs/data/joy/getting-started/templates/order-dashboard/components/ColorSchemeToggle.tsx b/docs/data/joy/getting-started/templates/order-dashboard/components/ColorSchemeToggle.tsx
@@ -26,7 +26,7 @@ export default function ColorSchemeToggle(props: IconButtonProps) {
   }
   return (
     <IconButton
-      id="toggle-mode"
+      data-screenshot="toggle-mode"
       size="sm"
       variant="outlined"
       color="neutral"

diff --git a/docs/data/joy/getting-started/templates/profile-dashboard/components/ColorSchemeToggle.tsx b/docs/data/joy/getting-started/templates/profile-dashboard/components/ColorSchemeToggle.tsx
@@ -26,7 +26,7 @@ export default function ColorSchemeToggle(props: IconButtonProps) {
   }
   return (
     <IconButton
-      id="toggle-mode"
+      data-screenshot="toggle-mode"
       size="sm"
       variant="outlined"
       color="neutral"

diff --git a/docs/data/joy/getting-started/templates/rental-dashboard/components/ColorSchemeToggle.tsx b/docs/data/joy/getting-started/templates/rental-dashboard/components/ColorSchemeToggle.tsx
@@ -26,7 +26,7 @@ export default function ColorSchemeToggle(props: IconButtonProps) {
   }
   return (
     <IconButton
-      id="toggle-mode"
+      data-screenshot="toggle-mode"
       size="sm"
       variant="outlined"
       color="neutral"

diff --git a/docs/data/joy/getting-started/templates/team/components/Header.tsx b/docs/data/joy/getting-started/templates/team/components/Header.tsx
@@ -42,7 +42,7 @@ function ColorSchemeToggle() {
   return (
     <Tooltip title="Change theme" variant="outlined">
       <IconButton
-        id="toggle-mode"
+        data-screenshot="toggle-mode"
         size="sm"
         variant="plain"
         color="neutral"

diff --git a/docs/data/material/getting-started/templates/checkout/Checkout.js b/docs/data/material/getting-started/templates/checkout/Checkout.js
@@ -60,7 +60,9 @@ function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) {
           <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
           Custom theme
         </ToggleButton>
-        <ToggleButton value={false}>Material Design 2</ToggleButton>
+        <ToggleButton data-screenshot="toggle-default-theme" value={false}>
+          Material Design 2
+        </ToggleButton>
       </ToggleButtonGroup>
     </Box>
   );
@@ -203,7 +205,11 @@ export default function Checkout() {
                 height: 150,
               }}
             >
-              <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
+              <ToggleColorMode
+                data-screenshot="toggle-mode"
+                mode={mode}
+                toggleColorMode={toggleColorMode}
+              />
               <Stepper
                 id="desktop-stepper"
                 activeStep={activeStep}

diff --git a/docs/data/material/getting-started/templates/checkout/Checkout.tsx b/docs/data/material/getting-started/templates/checkout/Checkout.tsx
@@ -68,7 +68,9 @@ function ToggleCustomTheme({
           <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
           Custom theme
         </ToggleButton>
-        <ToggleButton value={false}>Material Design 2</ToggleButton>
+        <ToggleButton data-screenshot="toggle-default-theme" value={false}>
+          Material Design 2
+        </ToggleButton>
       </ToggleButtonGroup>
     </Box>
   );
@@ -203,7 +205,11 @@ export default function Checkout() {
                 height: 150,
               }}
             >
-              <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
+              <ToggleColorMode
+                data-screenshot="toggle-mode"
+                mode={mode}
+                toggleColorMode={toggleColorMode}
+              />
               <Stepper
                 id="desktop-stepper"
                 activeStep={activeStep}

diff --git a/docs/data/material/getting-started/templates/checkout/ToggleColorMode.js b/docs/data/material/getting-started/templates/checkout/ToggleColorMode.js
@@ -6,12 +6,13 @@ import IconButton from '@mui/material/IconButton';
 import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
 import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
 
-function ToggleColorMode({ mode, toggleColorMode }) {
+function ToggleColorMode({ mode, toggleColorMode, ...props }) {
   return (
     <IconButton
       onClick={toggleColorMode}
       color="primary"
       aria-label="Theme toggle button"
+      {...props}
     >
       {mode === 'dark' ? (
         <WbSunnyRoundedIcon fontSize="small" />

diff --git a/docs/data/material/getting-started/templates/checkout/ToggleColorMode.tsx b/docs/data/material/getting-started/templates/checkout/ToggleColorMode.tsx
@@ -1,25 +1,27 @@
 import * as React from 'react';
 
 import { PaletteMode } from '@mui/material';
-import IconButton from '@mui/material/IconButton';
+import IconButton, { IconButtonProps } from '@mui/material/IconButton';
 
 import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
 import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
 
-interface ToggleColorModeProps {
+interface ToggleColorModeProps extends IconButtonProps {
   mode: PaletteMode;
   toggleColorMode: () => void;
 }
 
 export default function ToggleColorMode({
   mode,
   toggleColorMode,
+  ...props
 }: ToggleColorModeProps) {
   return (
     <IconButton
       onClick={toggleColorMode}
       color="primary"
       aria-label="Theme toggle button"
+      {...props}
     >
       {mode === 'dark' ? (
         <WbSunnyRoundedIcon fontSize="small" />

diff --git a/docs/data/material/getting-started/templates/dashboard/components/MenuButton.tsx b/docs/data/material/getting-started/templates/dashboard/components/MenuButton.tsx
@@ -2,14 +2,14 @@ import * as React from 'react';
 import Badge from '@mui/material/Badge';
 import IconButton, { IconButtonProps } from '@mui/material/IconButton';
 
-interface StyledMenuButtonProps extends IconButtonProps {
+export interface MenuButtonProps extends IconButtonProps {
   showBadge?: boolean;
 }
 
 export default function MenuButton({
   showBadge = false,
   ...props
-}: StyledMenuButtonProps) {
+}: MenuButtonProps) {
   return (
     <Badge
       color="error"

diff --git a/docs/data/material/getting-started/templates/dashboard/components/Navbar.js b/docs/data/material/getting-started/templates/dashboard/components/Navbar.js
@@ -83,7 +83,11 @@ function Navbar({ mode, toggleColorMode }) {
               <NotificationsRoundedIcon />
             </MenuButton>
             <OptionsMenu />
-            <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
+            <ToggleColorMode
+              data-screenshot="toggle-mode"
+              mode={mode}
+              toggleColorMode={toggleColorMode}
+            />
           </Stack>
         </Stack>
         <Stack

diff --git a/docs/data/material/getting-started/templates/dashboard/components/Navbar.tsx b/docs/data/material/getting-started/templates/dashboard/components/Navbar.tsx
@@ -87,7 +87,11 @@ export default function Navbar({ mode, toggleColorMode }: NavBarProps) {
               <NotificationsRoundedIcon />
             </MenuButton>
             <OptionsMenu />
-            <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
+            <ToggleColorMode
+              data-screenshot="toggle-mode"
+              mode={mode}
+              toggleColorMode={toggleColorMode}
+            />
           </Stack>
         </Stack>
         <Stack

diff --git a/docs/data/material/getting-started/templates/dashboard/components/ToggleColorMode.js b/docs/data/material/getting-started/templates/dashboard/components/ToggleColorMode.js
@@ -5,12 +5,13 @@ import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
 import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
 import MenuButton from './MenuButton';
 
-function ToggleColorMode({ mode, toggleColorMode }) {
+function ToggleColorMode({ mode, toggleColorMode, ...props }) {
   return (
     <MenuButton
       onClick={toggleColorMode}
       size="small"
       aria-label="button to toggle theme"
+      {...props}
     >
       {mode === 'dark' ? (
         <WbSunnyRoundedIcon fontSize="small" />

diff --git a/docs/data/material/getting-started/templates/dashboard/components/ToggleColorMode.tsx b/docs/data/material/getting-started/templates/dashboard/components/ToggleColorMode.tsx
@@ -2,22 +2,24 @@ import * as React from 'react';
 import { PaletteMode } from '@mui/material';
 import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
 import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
-import MenuButton from './MenuButton';
+import MenuButton, { MenuButtonProps } from './MenuButton';
 
-interface ToggleColorModeProps {
+interface ToggleColorModeProps extends MenuButtonProps {
   mode: PaletteMode;
   toggleColorMode: () => void;
 }
 
 export default function ToggleColorMode({
   mode,
   toggleColorMode,
+  ...props
 }: ToggleColorModeProps) {
   return (
     <MenuButton
       onClick={toggleColorMode}
       size="small"
       aria-label="button to toggle theme"
+      {...props}
     >
       {mode === 'dark' ? (
         <WbSunnyRoundedIcon fontSize="small" />

diff --git a/...ta/material/getting-started/templates/dashboard/internals/components/ToggleCustomTheme.js b/...ta/material/getting-started/templates/dashboard/internals/components/ToggleCustomTheme.js
@@ -34,7 +34,9 @@ function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) {
           <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
           Custom theme
         </ToggleButton>
-        <ToggleButton value={false}>Material Design 2</ToggleButton>
+        <ToggleButton data-screenshot="toggle-default-theme" value={false}>
+          Material Design 2
+        </ToggleButton>
       </ToggleButtonGroup>
     </Box>
   );

diff --git a/...a/material/getting-started/templates/dashboard/internals/components/ToggleCustomTheme.tsx b/...a/material/getting-started/templates/dashboard/internals/components/ToggleCustomTheme.tsx
@@ -41,7 +41,9 @@ export default function ToggleCustomTheme({
           <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
           Custom theme
         </ToggleButton>
-        <ToggleButton value={false}>Material Design 2</ToggleButton>
+        <ToggleButton data-screenshot="toggle-default-theme" value={false}>
+          Material Design 2
+        </ToggleButton>
       </ToggleButtonGroup>
     </Box>
   );

diff --git a/docs/data/material/getting-started/templates/landing-page/LandingPage.js b/docs/data/material/getting-started/templates/landing-page/LandingPage.js
@@ -48,7 +48,9 @@ function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) {
           <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
           Custom theme
         </ToggleButton>
-        <ToggleButton value={false}>Material Design 2</ToggleButton>
+        <ToggleButton data-screenshot="toggle-default-theme" value={false}>
+          Material Design 2
+        </ToggleButton>
       </ToggleButtonGroup>
     </Box>
   );

diff --git a/docs/data/material/getting-started/templates/landing-page/LandingPage.tsx b/docs/data/material/getting-started/templates/landing-page/LandingPage.tsx
@@ -55,7 +55,9 @@ function ToggleCustomTheme({
           <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
           Custom theme
         </ToggleButton>
-        <ToggleButton value={false}>Material Design 2</ToggleButton>
+        <ToggleButton data-screenshot="toggle-default-theme" value={false}>
+          Material Design 2
+        </ToggleButton>
       </ToggleButtonGroup>
     </Box>
   );

diff --git a/docs/data/material/getting-started/templates/landing-page/components/AppAppBar.js b/docs/data/material/getting-started/templates/landing-page/components/AppAppBar.js
@@ -118,7 +118,11 @@ function AppAppBar({ mode, toggleColorMode }) {
               alignItems: 'center',
             }}
           >
-            <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
+            <ToggleColorMode
+              data-screenshot="toggle-mode"
+              mode={mode}
+              toggleColorMode={toggleColorMode}
+            />
             <Button color="primary" variant="text" size="small">
               Sign in
             </Button>

diff --git a/docs/data/material/getting-started/templates/landing-page/components/AppAppBar.tsx b/docs/data/material/getting-started/templates/landing-page/components/AppAppBar.tsx
@@ -122,7 +122,11 @@ export default function AppAppBar({ mode, toggleColorMode }: AppAppBarProps) {
               alignItems: 'center',
             }}
           >
-            <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
+            <ToggleColorMode
+              data-screenshot="toggle-mode"
+              mode={mode}
+              toggleColorMode={toggleColorMode}
+            />
             <Button color="primary" variant="text" size="small">
               Sign in
             </Button>

diff --git a/docs/data/material/getting-started/templates/landing-page/components/ToggleColorMode.js b/docs/data/material/getting-started/templates/landing-page/components/ToggleColorMode.js
@@ -6,13 +6,14 @@ import IconButton from '@mui/material/IconButton';
 import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
 import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
 
-function ToggleColorMode({ mode, toggleColorMode }) {
+function ToggleColorMode({ mode, toggleColorMode, ...props }) {
   return (
     <IconButton
       onClick={toggleColorMode}
       color="primary"
       aria-label="Theme toggle button"
       size="small"
+      {...props}
     >
       {mode === 'dark' ? (
         <WbSunnyRoundedIcon fontSize="small" />

diff --git a/docs/data/material/getting-started/templates/landing-page/components/ToggleColorMode.tsx b/docs/data/material/getting-started/templates/landing-page/components/ToggleColorMode.tsx
@@ -1,25 +1,27 @@
 import * as React from 'react';
 import { PaletteMode } from '@mui/material';
-import IconButton from '@mui/material/IconButton';
+import IconButton, { IconButtonProps } from '@mui/material/IconButton';
 
 import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
 import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
 
-interface ToggleColorModeProps {
+interface ToggleColorModeProps extends IconButtonProps {
   mode: PaletteMode;
   toggleColorMode: () => void;
 }
 
 export default function ToggleColorMode({
   mode,
   toggleColorMode,
+  ...props
 }: ToggleColorModeProps) {
   return (
     <IconButton
       onClick={toggleColorMode}
       color="primary"
       aria-label="Theme toggle button"
       size="small"
+      {...props}
     >
       {mode === 'dark' ? (
         <WbSunnyRoundedIcon fontSize="small" />

diff --git a/docs/data/material/getting-started/templates/sign-in-side/Content.js b/docs/data/material/getting-started/templates/sign-in-side/Content.js
@@ -45,8 +45,8 @@ export default function Content() {
       <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
         <SitemarkIcon />
       </Box>
-      {items.map((item) => (
-        <Stack direction="row" sx={{ gap: 2 }}>
+      {items.map((item, index) => (
+        <Stack key={index} direction="row" sx={{ gap: 2 }}>
           {item.icon}
           <div>
             <Typography gutterBottom sx={{ fontWeight: 'medium' }}>

diff --git a/docs/data/material/getting-started/templates/sign-in-side/Content.tsx b/docs/data/material/getting-started/templates/sign-in-side/Content.tsx
@@ -45,8 +45,8 @@ export default function Content() {
       <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
         <SitemarkIcon />
       </Box>
-      {items.map((item) => (
-        <Stack direction="row" sx={{ gap: 2 }}>
+      {items.map((item, index) => (
+        <Stack key={index} direction="row" sx={{ gap: 2 }}>
           {item.icon}
           <div>
             <Typography gutterBottom sx={{ fontWeight: 'medium' }}>