Skip to content

Commit cea9671

Browse files
siriwatknpsiriwatknp
authored
[docs][material-ui] Add script to generate template screenshots (#42903)
1 parent 3fb43fd commit cea9671

File tree

85 files changed

+267
-120
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

85 files changed

+267
-120
lines changed

‎docs/data/joy/getting-started/templates/email/components/Header.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ function ColorSchemeToggle() {
4242
return (
4343
<Tooltip title="Change theme" variant="outlined">
4444
<IconButton
45-
id="toggle-mode"
45+
data-screenshot="toggle-mode"
4646
size="sm"
4747
variant="plain"
4848
color="neutral"

‎docs/data/joy/getting-started/templates/files/components/Header.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ function ColorSchemeToggle() {
4242
return (
4343
<Tooltip title="Change theme" variant="outlined">
4444
<IconButton
45-
id="toggle-mode"
45+
data-screenshot="toggle-mode"
4646
size="sm"
4747
variant="plain"
4848
color="neutral"

‎docs/data/joy/getting-started/templates/framesx-web-blocks/App.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ function ColorSchemeToggle() {
3030
}
3131
return (
3232
<IconButton
33-
id="toggle-mode"
33+
data-screenshot="toggle-mode"
3434
size="lg"
3535
variant="soft"
3636
color="neutral"

‎docs/data/joy/getting-started/templates/messages/components/ColorSchemeToggle.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export default function ColorSchemeToggle(props: IconButtonProps) {
2626
}
2727
return (
2828
<IconButton
29-
id="toggle-mode"
29+
data-screenshot="toggle-mode"
3030
size="sm"
3131
variant="outlined"
3232
color="neutral"

‎docs/data/joy/getting-started/templates/order-dashboard/components/ColorSchemeToggle.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export default function ColorSchemeToggle(props: IconButtonProps) {
2626
}
2727
return (
2828
<IconButton
29-
id="toggle-mode"
29+
data-screenshot="toggle-mode"
3030
size="sm"
3131
variant="outlined"
3232
color="neutral"

‎docs/data/joy/getting-started/templates/profile-dashboard/components/ColorSchemeToggle.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export default function ColorSchemeToggle(props: IconButtonProps) {
2626
}
2727
return (
2828
<IconButton
29-
id="toggle-mode"
29+
data-screenshot="toggle-mode"
3030
size="sm"
3131
variant="outlined"
3232
color="neutral"

‎docs/data/joy/getting-started/templates/rental-dashboard/components/ColorSchemeToggle.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export default function ColorSchemeToggle(props: IconButtonProps) {
2626
}
2727
return (
2828
<IconButton
29-
id="toggle-mode"
29+
data-screenshot="toggle-mode"
3030
size="sm"
3131
variant="outlined"
3232
color="neutral"

‎docs/data/joy/getting-started/templates/team/components/Header.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ function ColorSchemeToggle() {
4242
return (
4343
<Tooltip title="Change theme" variant="outlined">
4444
<IconButton
45-
id="toggle-mode"
45+
data-screenshot="toggle-mode"
4646
size="sm"
4747
variant="plain"
4848
color="neutral"

‎docs/data/material/getting-started/templates/checkout/Checkout.js

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,9 @@ function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) {
6060
<AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
6161
Custom theme
6262
</ToggleButton>
63-
<ToggleButton value={false}>Material Design 2</ToggleButton>
63+
<ToggleButton data-screenshot="toggle-default-theme" value={false}>
64+
Material Design 2
65+
</ToggleButton>
6466
</ToggleButtonGroup>
6567
</Box>
6668
);
@@ -203,7 +205,11 @@ export default function Checkout() {
203205
height: 150,
204206
}}
205207
>
206-
<ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
208+
<ToggleColorMode
209+
data-screenshot="toggle-mode"
210+
mode={mode}
211+
toggleColorMode={toggleColorMode}
212+
/>
207213
<Stepper
208214
id="desktop-stepper"
209215
activeStep={activeStep}

‎docs/data/material/getting-started/templates/checkout/Checkout.tsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,9 @@ function ToggleCustomTheme({
6868
<AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
6969
Custom theme
7070
</ToggleButton>
71-
<ToggleButton value={false}>Material Design 2</ToggleButton>
71+
<ToggleButton data-screenshot="toggle-default-theme" value={false}>
72+
Material Design 2
73+
</ToggleButton>
7274
</ToggleButtonGroup>
7375
</Box>
7476
);
@@ -203,7 +205,11 @@ export default function Checkout() {
203205
height: 150,
204206
}}
205207
>
206-
<ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
208+
<ToggleColorMode
209+
data-screenshot="toggle-mode"
210+
mode={mode}
211+
toggleColorMode={toggleColorMode}
212+
/>
207213
<Stepper
208214
id="desktop-stepper"
209215
activeStep={activeStep}

‎docs/data/material/getting-started/templates/checkout/ToggleColorMode.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,13 @@ import IconButton from '@mui/material/IconButton';
66
import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
77
import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
88

9-
function ToggleColorMode({ mode, toggleColorMode }) {
9+
function ToggleColorMode({ mode, toggleColorMode, ...props }) {
1010
return (
1111
<IconButton
1212
onClick={toggleColorMode}
1313
color="primary"
1414
aria-label="Theme toggle button"
15+
{...props}
1516
>
1617
{mode === 'dark' ? (
1718
<WbSunnyRoundedIcon fontSize="small" />

‎docs/data/material/getting-started/templates/checkout/ToggleColorMode.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,27 @@
11
import * as React from 'react';
22

33
import { PaletteMode } from '@mui/material';
4-
import IconButton from '@mui/material/IconButton';
4+
import IconButton, { IconButtonProps } from '@mui/material/IconButton';
55

66
import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
77
import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
88

9-
interface ToggleColorModeProps {
9+
interface ToggleColorModeProps extends IconButtonProps {
1010
mode: PaletteMode;
1111
toggleColorMode: () => void;
1212
}
1313

1414
export default function ToggleColorMode({
1515
mode,
1616
toggleColorMode,
17+
...props
1718
}: ToggleColorModeProps) {
1819
return (
1920
<IconButton
2021
onClick={toggleColorMode}
2122
color="primary"
2223
aria-label="Theme toggle button"
24+
{...props}
2325
>
2426
{mode === 'dark' ? (
2527
<WbSunnyRoundedIcon fontSize="small" />

‎docs/data/material/getting-started/templates/dashboard/components/MenuButton.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@ import * as React from 'react';
22
import Badge from '@mui/material/Badge';
33
import IconButton, { IconButtonProps } from '@mui/material/IconButton';
44

5-
interface StyledMenuButtonProps extends IconButtonProps {
5+
export interface MenuButtonProps extends IconButtonProps {
66
showBadge?: boolean;
77
}
88

99
export default function MenuButton({
1010
showBadge = false,
1111
...props
12-
}: StyledMenuButtonProps) {
12+
}: MenuButtonProps) {
1313
return (
1414
<Badge
1515
color="error"

‎docs/data/material/getting-started/templates/dashboard/components/Navbar.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,11 @@ function Navbar({ mode, toggleColorMode }) {
8383
<NotificationsRoundedIcon />
8484
</MenuButton>
8585
<OptionsMenu />
86-
<ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
86+
<ToggleColorMode
87+
data-screenshot="toggle-mode"
88+
mode={mode}
89+
toggleColorMode={toggleColorMode}
90+
/>
8791
</Stack>
8892
</Stack>
8993
<Stack

‎docs/data/material/getting-started/templates/dashboard/components/Navbar.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,11 @@ export default function Navbar({ mode, toggleColorMode }: NavBarProps) {
8787
<NotificationsRoundedIcon />
8888
</MenuButton>
8989
<OptionsMenu />
90-
<ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
90+
<ToggleColorMode
91+
data-screenshot="toggle-mode"
92+
mode={mode}
93+
toggleColorMode={toggleColorMode}
94+
/>
9195
</Stack>
9296
</Stack>
9397
<Stack

‎docs/data/material/getting-started/templates/dashboard/components/ToggleColorMode.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,13 @@ import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
55
import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
66
import MenuButton from './MenuButton';
77

8-
function ToggleColorMode({ mode, toggleColorMode }) {
8+
function ToggleColorMode({ mode, toggleColorMode, ...props }) {
99
return (
1010
<MenuButton
1111
onClick={toggleColorMode}
1212
size="small"
1313
aria-label="button to toggle theme"
14+
{...props}
1415
>
1516
{mode === 'dark' ? (
1617
<WbSunnyRoundedIcon fontSize="small" />

‎docs/data/material/getting-started/templates/dashboard/components/ToggleColorMode.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,24 @@ import * as React from 'react';
22
import { PaletteMode } from '@mui/material';
33
import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
44
import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
5-
import MenuButton from './MenuButton';
5+
import MenuButton, { MenuButtonProps } from './MenuButton';
66

7-
interface ToggleColorModeProps {
7+
interface ToggleColorModeProps extends MenuButtonProps {
88
mode: PaletteMode;
99
toggleColorMode: () => void;
1010
}
1111

1212
export default function ToggleColorMode({
1313
mode,
1414
toggleColorMode,
15+
...props
1516
}: ToggleColorModeProps) {
1617
return (
1718
<MenuButton
1819
onClick={toggleColorMode}
1920
size="small"
2021
aria-label="button to toggle theme"
22+
{...props}
2123
>
2224
{mode === 'dark' ? (
2325
<WbSunnyRoundedIcon fontSize="small" />

‎docs/data/material/getting-started/templates/dashboard/internals/components/ToggleCustomTheme.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,9 @@ function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) {
3434
<AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
3535
Custom theme
3636
</ToggleButton>
37-
<ToggleButton value={false}>Material Design 2</ToggleButton>
37+
<ToggleButton data-screenshot="toggle-default-theme" value={false}>
38+
Material Design 2
39+
</ToggleButton>
3840
</ToggleButtonGroup>
3941
</Box>
4042
);

‎docs/data/material/getting-started/templates/dashboard/internals/components/ToggleCustomTheme.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,9 @@ export default function ToggleCustomTheme({
4141
<AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
4242
Custom theme
4343
</ToggleButton>
44-
<ToggleButton value={false}>Material Design 2</ToggleButton>
44+
<ToggleButton data-screenshot="toggle-default-theme" value={false}>
45+
Material Design 2
46+
</ToggleButton>
4547
</ToggleButtonGroup>
4648
</Box>
4749
);

‎docs/data/material/getting-started/templates/landing-page/LandingPage.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,9 @@ function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) {
4848
<AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
4949
Custom theme
5050
</ToggleButton>
51-
<ToggleButton value={false}>Material Design 2</ToggleButton>
51+
<ToggleButton data-screenshot="toggle-default-theme" value={false}>
52+
Material Design 2
53+
</ToggleButton>
5254
</ToggleButtonGroup>
5355
</Box>
5456
);

‎docs/data/material/getting-started/templates/landing-page/LandingPage.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,9 @@ function ToggleCustomTheme({
5555
<AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
5656
Custom theme
5757
</ToggleButton>
58-
<ToggleButton value={false}>Material Design 2</ToggleButton>
58+
<ToggleButton data-screenshot="toggle-default-theme" value={false}>
59+
Material Design 2
60+
</ToggleButton>
5961
</ToggleButtonGroup>
6062
</Box>
6163
);

‎docs/data/material/getting-started/templates/landing-page/components/AppAppBar.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,11 @@ function AppAppBar({ mode, toggleColorMode }) {
118118
alignItems: 'center',
119119
}}
120120
>
121-
<ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
121+
<ToggleColorMode
122+
data-screenshot="toggle-mode"
123+
mode={mode}
124+
toggleColorMode={toggleColorMode}
125+
/>
122126
<Button color="primary" variant="text" size="small">
123127
Sign in
124128
</Button>

‎docs/data/material/getting-started/templates/landing-page/components/AppAppBar.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,11 @@ export default function AppAppBar({ mode, toggleColorMode }: AppAppBarProps) {
122122
alignItems: 'center',
123123
}}
124124
>
125-
<ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
125+
<ToggleColorMode
126+
data-screenshot="toggle-mode"
127+
mode={mode}
128+
toggleColorMode={toggleColorMode}
129+
/>
126130
<Button color="primary" variant="text" size="small">
127131
Sign in
128132
</Button>

‎docs/data/material/getting-started/templates/landing-page/components/ToggleColorMode.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,14 @@ import IconButton from '@mui/material/IconButton';
66
import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
77
import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
88

9-
function ToggleColorMode({ mode, toggleColorMode }) {
9+
function ToggleColorMode({ mode, toggleColorMode, ...props }) {
1010
return (
1111
<IconButton
1212
onClick={toggleColorMode}
1313
color="primary"
1414
aria-label="Theme toggle button"
1515
size="small"
16+
{...props}
1617
>
1718
{mode === 'dark' ? (
1819
<WbSunnyRoundedIcon fontSize="small" />

‎docs/data/material/getting-started/templates/landing-page/components/ToggleColorMode.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,27 @@
11
import * as React from 'react';
22
import { PaletteMode } from '@mui/material';
3-
import IconButton from '@mui/material/IconButton';
3+
import IconButton, { IconButtonProps } from '@mui/material/IconButton';
44

55
import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
66
import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
77

8-
interface ToggleColorModeProps {
8+
interface ToggleColorModeProps extends IconButtonProps {
99
mode: PaletteMode;
1010
toggleColorMode: () => void;
1111
}
1212

1313
export default function ToggleColorMode({
1414
mode,
1515
toggleColorMode,
16+
...props
1617
}: ToggleColorModeProps) {
1718
return (
1819
<IconButton
1920
onClick={toggleColorMode}
2021
color="primary"
2122
aria-label="Theme toggle button"
2223
size="small"
24+
{...props}
2325
>
2426
{mode === 'dark' ? (
2527
<WbSunnyRoundedIcon fontSize="small" />

‎docs/data/material/getting-started/templates/sign-in-side/Content.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,8 @@ export default function Content() {
4545
<Box sx={{ display: { xs: 'none', md: 'flex' } }}>
4646
<SitemarkIcon />
4747
</Box>
48-
{items.map((item) => (
49-
<Stack direction="row" sx={{ gap: 2 }}>
48+
{items.map((item, index) => (
49+
<Stack key={index} direction="row" sx={{ gap: 2 }}>
5050
{item.icon}
5151
<div>
5252
<Typography gutterBottom sx={{ fontWeight: 'medium' }}>

‎docs/data/material/getting-started/templates/sign-in-side/Content.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,8 @@ export default function Content() {
4545
<Box sx={{ display: { xs: 'none', md: 'flex' } }}>
4646
<SitemarkIcon />
4747
</Box>
48-
{items.map((item) => (
49-
<Stack direction="row" sx={{ gap: 2 }}>
48+
{items.map((item, index) => (
49+
<Stack key={index} direction="row" sx={{ gap: 2 }}>
5050
{item.icon}
5151
<div>
5252
<Typography gutterBottom sx={{ fontWeight: 'medium' }}>

0 commit comments

Comments
 (0)