[docs] Improve Joy UI tutorial demo

mui · Oct 7, 2022 · a5c053b · a5c053b
1 parent b7ddf7c
commit a5c053b
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 41 deletions.
diff --git a/docs/data/joy/getting-started/templates/email/components/EmailContent.tsx b/docs/data/joy/getting-started/templates/email/components/EmailContent.tsx
@@ -160,15 +160,17 @@ export default function EmailContent() {
         <Card variant="outlined">
           <AspectRatio ratio="1" sx={{ minWidth: 80 }}>
             <img
-              src="https://images.unsplash.com/photo-1527549993586-dff825b37782?auto=format&fit=crop&w=2370"
+              src="https://images.unsplash.com/photo-1527549993586-dff825b37782?auto=forma&fit=cropt&h=80"
+              srcSet="https://images.unsplash.com/photo-1527549993586-dff825b37782?auto=format&h=160 2x"
               alt="Yosemite National Park"
             />
           </AspectRatio>
         </Card>
         <Card variant="outlined">
           <AspectRatio ratio="1" sx={{ minWidth: 80 }}>
             <img
-              src="https://images.unsplash.com/photo-1532614338840-ab30cf10ed36?auto=format&fit=crop&w=2370"
+              src="https://images.unsplash.com/photo-1532614338840-ab30cf10ed36?auto=forma&fit=cropt&h=80"
+              srcSet="https://images.unsplash.com/photo-1532614338840-ab30cf10ed36?auto=format&h=160 2x"
               alt="Yosemite National Park"
             />
           </AspectRatio>

diff --git a/docs/data/joy/getting-started/tutorial/LoginFinal.js b/docs/data/joy/getting-started/tutorial/LoginFinal.js
@@ -6,7 +6,7 @@ import TextField from '@mui/joy/TextField';
 import Button from '@mui/joy/Button';
 import Link from '@mui/joy/Link';
 
-const ModeToggle = () => {
+function ModeToggle() {
   const { mode, setMode } = useColorScheme();
   const [mounted, setMounted] = React.useState(false);
 
@@ -23,17 +23,13 @@ const ModeToggle = () => {
     <Button
       variant="outlined"
       onClick={() => {
-        if (mode === 'light') {
-          setMode('dark');
-        } else {
-          setMode('light');
-        }
+        setMode(mode === 'light' ? 'dark' : 'light');
       }}
     >
       {mode === 'light' ? 'Turn dark' : 'Turn light'}
     </Button>
   );
-};
+}
 
 export default function App() {
   return (
@@ -42,7 +38,7 @@ export default function App() {
         <ModeToggle />
         <Sheet
           sx={{
-            maxWidth: 400,
+            width: 300,
             mx: 'auto', // margin left & right
             my: 4, // margin top & botom
             py: 3, // padding top & bottom
@@ -75,13 +71,7 @@ export default function App() {
             placeholder="password"
             label="Password"
           />
-          <Button
-            sx={{
-              mt: 1, // margin top
-            }}
-          >
-            Log in
-          </Button>
+          <Button sx={{ mt: 1 /* margin top */ }}>Log in</Button>
           <Typography
             endDecorator={<Link href="/sign-up">Sign up</Link>}
             fontSize="sm"

diff --git a/docs/data/joy/getting-started/tutorial/tutorial.md b/docs/data/joy/getting-started/tutorial/tutorial.md
@@ -15,9 +15,9 @@ By the end, you should understand how to:
 
 ## Interactive demo
 
-Here's what the final product looks like—click on the **< >** icon underneath the demo to see the full source code:
+Here's what the final product looks like—click on the **<>** icon underneath the demo to see the full source code:
 
-{{"demo": "LoginFinal.js", "hideToolbar": false, "bg": true}}
+{{"demo": "LoginFinal.js"}}
 
 ## Prerequisites
 
@@ -63,7 +63,7 @@ Replace your basic Sheet from the previous step with the following `sx`-styled S
 ```jsx
 <Sheet
   sx={{
-    maxWidth: 400,
+    width: 300,
     mx: 'auto', // margin left & right
     my: 4, // margin top & botom
     py: 3, // padding top & bottom
@@ -162,11 +162,7 @@ Add the following Button, Typography, and Link components after the Text Fields
 Notice that the Link is appended to the Typography inside of [the `endDecorator` prop](/joy-ui/react-typography/#decorators):
 
 ```jsx
-<Button
-  sx={{
-    mt: 1, // margin top
-  }}
->
+<Button sx={{ mt: 1 /* margin top */ }}>
   Log in
 </Button>
 <Typography
@@ -192,7 +188,7 @@ import { CssVarsProvider, useColorScheme } from '@mui/joy/styles';
 Next, create a light/dark mode toggle button by adding the following code snippet in between your imports and your `App()`:
 
 ```jsx
-const ModeToggle = () => {
+function ModeToggle() {
   const { mode, setMode } = useColorScheme();
   const [mounted, setMounted] = React.useState(false);
 
@@ -209,30 +205,26 @@ const ModeToggle = () => {
     <Button
       variant="outlined"
       onClick={() => {
-        if (mode === 'light') {
-          setMode('dark');
-        } else {
-          setMode('light');
-        }
+        setMode(mode === 'light' ? 'dark' : 'light');
       }}
     >
       {mode === 'light' ? 'Turn dark' : 'Turn light'}
     </Button>
   );
-};
+}
 ```
 
 Finally, add your newly built `<ModeToggle />` button above `<Sheet />`:
 
 ```diff
  export default function App() {
-  return (
-    <CssVarsProvider>
+   return (
+     <CssVarsProvider>
 +      <ModeToggle />
-      <Sheet>...</Sheet>
-    </CssVarsProvider>
-  );
-}
+       <Sheet>...</Sheet>
+     </CssVarsProvider>
+   );
+ }
 ```
 
 Your app should now look like the [interactive demo](#interactive-demo) at the top of the page.

diff --git a/docs/data/material/experimental-api/css-theme-variables/migration.md b/docs/data/material/experimental-api/css-theme-variables/migration.md
@@ -151,7 +151,7 @@ import {
   useColorScheme,
 } from '@mui/material/styles';
 
-const ModeToggle = () => {
+function ModeToggle() {
   const { mode, setMode } = useColorScheme();
   return (
     <Button
@@ -166,7 +166,7 @@ const ModeToggle = () => {
       {mode === 'light' ? 'Turn dark' : 'Turn light'}
     </Button>
   );
-};
+}
 
 const theme = extendTheme({
   // ...your custom theme

diff --git a/docs/public/_redirects b/docs/public/_redirects
@@ -3,6 +3,7 @@
 /inbox* / 301
 /trash / 301
 /spam / 301
+/sign-up / 301
 
 /size-snapshot https://s3.eu-central-1.amazonaws.com/mui-org-ci/artifacts/master/latest/size-snapshot.json 200
 

diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
@@ -250,10 +250,23 @@ const InitialFocus = styled(IconButton)(({ theme }) => ({
   height: theme.spacing(4),
   pointerEvents: 'none',
 }));
+
 export default function Demo(props) {
   const router = useRouter();
   const asPathWithoutLang = router.asPath.replace(/^\/[a-zA-Z]{2}\//, '/');
   const { demo, demoOptions, disableAd, githubLocation, mode } = props;
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (demoOptions.hideToolbar === false) {
+      throw new Error(
+        [
+          '"hiddenToolbar": false is already the default.',
+          `Please remove the property in {{"demo": "${demoOptions.demo}", …}}.`,
+        ].join('\n'),
+      );
+    }
+  }
+
   const t = useTranslate();
   const codeVariant = useCodeVariant();
   const demoData = useDemoData(codeVariant, demo, githubLocation);
@@ -339,7 +352,7 @@ export default function Demo(props) {
       </DemoRoot>
       <AnchorLink id={`${demoName}.js`} />
       <AnchorLink id={`${demoName}.tsx`} />
-      <Wrapper {...(isJoy && { mode })}>
+      <Wrapper {...(isJoy ? { mode } : {})}>
         {demoOptions.hideToolbar ? null : (
           <NoSsr defer fallback={<DemoToolbarFallback />}>
             <React.Suspense fallback={<DemoToolbarFallback />}>