[docs][base] Move styles to the bottom of demos code for `SwitchUnst…

…yled` (mui#36720) Co-authored-by: Michał Dudak <[email protected]>
binh1298 · May 17, 2023 · f64e0e9 · f64e0e9
1 parent d3daa86
commit f64e0e9
Show file tree

Hide file tree

Showing 8 changed files with 150 additions and 154 deletions.
diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction.js b/docs/data/base/components/switch/UnstyledSwitchIntroduction.js
@@ -2,6 +2,18 @@ import * as React from 'react';
 import { styled } from '@mui/system';
 import Switch, { switchClasses } from '@mui/base/Switch';
 
+export default function UnstyledSwitches() {
+  const label = { slotProps: { input: { 'aria-label': 'Demo switch' } } };
+
+  return (
+    <div>
+      <Switch component={Root} {...label} defaultChecked />
+      <Switch component={Root} {...label} />
+      <Switch component={Root} {...label} defaultChecked disabled />
+      <Switch component={Root} {...label} disabled />
+    </div>
+  );
+}
 const blue = {
   500: '#007FFF',
 };
@@ -81,16 +93,3 @@ const Root = styled('span')(
   }
   `,
 );
-
-export default function UnstyledSwitches() {
-  const label = { slotProps: { input: { 'aria-label': 'Demo switch' } } };
-
-  return (
-    <div>
-      <Switch component={Root} {...label} defaultChecked />
-      <Switch component={Root} {...label} />
-      <Switch component={Root} {...label} defaultChecked disabled />
-      <Switch component={Root} {...label} disabled />
-    </div>
-  );
-}
diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction.tsx b/docs/data/base/components/switch/UnstyledSwitchIntroduction.tsx
@@ -2,6 +2,18 @@ import * as React from 'react';
 import { styled } from '@mui/system';
 import Switch, { switchClasses } from '@mui/base/Switch';
 
+export default function UnstyledSwitches() {
+  const label = { slotProps: { input: { 'aria-label': 'Demo switch' } } };
+
+  return (
+    <div>
+      <Switch component={Root} {...label} defaultChecked />
+      <Switch component={Root} {...label} />
+      <Switch component={Root} {...label} defaultChecked disabled />
+      <Switch component={Root} {...label} disabled />
+    </div>
+  );
+}
 const blue = {
   500: '#007FFF',
 };
@@ -81,16 +93,3 @@ const Root = styled('span')(
   }
   `,
 );
-
-export default function UnstyledSwitches() {
-  const label = { slotProps: { input: { 'aria-label': 'Demo switch' } } };
-
-  return (
-    <div>
-      <Switch component={Root} {...label} defaultChecked />
-      <Switch component={Root} {...label} />
-      <Switch component={Root} {...label} defaultChecked disabled />
-      <Switch component={Root} {...label} disabled />
-    </div>
-  );
-}
diff --git a/docs/data/base/components/switch/UnstyledSwitches.js b/docs/data/base/components/switch/UnstyledSwitches.js
@@ -2,6 +2,18 @@ import * as React from 'react';
 import { styled } from '@mui/system';
 import Switch, { switchClasses } from '@mui/base/Switch';
 
+export default function UnstyledSwitches() {
+  const label = { slotProps: { input: { 'aria-label': 'Demo switch' } } };
+
+  return (
+    <div>
+      <Switch component={Root} {...label} defaultChecked />
+      <Switch component={Root} {...label} />
+      <Switch component={Root} {...label} defaultChecked disabled />
+      <Switch component={Root} {...label} disabled />
+    </div>
+  );
+}
 const blue = {
   500: '#007FFF',
 };
@@ -81,16 +93,3 @@ const Root = styled('span')(
   }
   `,
 );
-
-export default function UnstyledSwitches() {
-  const label = { slotProps: { input: { 'aria-label': 'Demo switch' } } };
-
-  return (
-    <div>
-      <Switch component={Root} {...label} defaultChecked />
-      <Switch component={Root} {...label} />
-      <Switch component={Root} {...label} defaultChecked disabled />
-      <Switch component={Root} {...label} disabled />
-    </div>
-  );
-}
diff --git a/docs/data/base/components/switch/UnstyledSwitches.tsx b/docs/data/base/components/switch/UnstyledSwitches.tsx
@@ -2,6 +2,18 @@ import * as React from 'react';
 import { styled } from '@mui/system';
 import Switch, { switchClasses } from '@mui/base/Switch';
 
+export default function UnstyledSwitches() {
+  const label = { slotProps: { input: { 'aria-label': 'Demo switch' } } };
+
+  return (
+    <div>
+      <Switch component={Root} {...label} defaultChecked />
+      <Switch component={Root} {...label} />
+      <Switch component={Root} {...label} defaultChecked disabled />
+      <Switch component={Root} {...label} disabled />
+    </div>
+  );
+}
 const blue = {
   500: '#007FFF',
 };
@@ -81,16 +93,3 @@ const Root = styled('span')(
   }
   `,
 );
-
-export default function UnstyledSwitches() {
-  const label = { slotProps: { input: { 'aria-label': 'Demo switch' } } };
-
-  return (
-    <div>
-      <Switch component={Root} {...label} defaultChecked />
-      <Switch component={Root} {...label} />
-      <Switch component={Root} {...label} defaultChecked disabled />
-      <Switch component={Root} {...label} disabled />
-    </div>
-  );
-}
diff --git a/docs/data/base/components/switch/UseSwitchesBasic.js b/docs/data/base/components/switch/UseSwitchesBasic.js
@@ -3,6 +3,34 @@ import clsx from 'clsx';
 import { styled } from '@mui/system';
 import useSwitch from '@mui/base/useSwitch';
 
+export default function UseSwitchesBasic() {
+  return (
+    <div>
+      <BasicSwitch defaultChecked />
+      <BasicSwitch />
+      <BasicSwitch defaultChecked disabled />
+      <BasicSwitch disabled />
+    </div>
+  );
+}
+
+function BasicSwitch(props) {
+  const { getInputProps, checked, disabled, focusVisible } = useSwitch(props);
+
+  const stateClasses = {
+    'Switch-checked': checked,
+    'Switch-disabled': disabled,
+    'Switch-focusVisible': focusVisible,
+  };
+
+  return (
+    <BasicSwitchRoot className={clsx(stateClasses)}>
+      <BasicSwitchThumb className={clsx(stateClasses)} />
+      <BasicSwitchInput {...getInputProps()} aria-label="Demo switch" />
+    </BasicSwitchRoot>
+  );
+}
+
 const blue = {
   500: '#007FFF',
 };
@@ -72,31 +100,3 @@ const BasicSwitchThumb = styled('span')`
     background-color: #fff;
   }
 `;
-
-function BasicSwitch(props) {
-  const { getInputProps, checked, disabled, focusVisible } = useSwitch(props);
-
-  const stateClasses = {
-    'Switch-checked': checked,
-    'Switch-disabled': disabled,
-    'Switch-focusVisible': focusVisible,
-  };
-
-  return (
-    <BasicSwitchRoot className={clsx(stateClasses)}>
-      <BasicSwitchThumb className={clsx(stateClasses)} />
-      <BasicSwitchInput {...getInputProps()} aria-label="Demo switch" />
-    </BasicSwitchRoot>
-  );
-}
-
-export default function UseSwitchesBasic() {
-  return (
-    <div>
-      <BasicSwitch defaultChecked />
-      <BasicSwitch />
-      <BasicSwitch defaultChecked disabled />
-      <BasicSwitch disabled />
-    </div>
-  );
-}
diff --git a/docs/data/base/components/switch/UseSwitchesBasic.tsx b/docs/data/base/components/switch/UseSwitchesBasic.tsx
@@ -3,6 +3,34 @@ import clsx from 'clsx';
 import { styled } from '@mui/system';
 import useSwitch, { UseSwitchParameters } from '@mui/base/useSwitch';
 
+export default function UseSwitchesBasic() {
+  return (
+    <div>
+      <BasicSwitch defaultChecked />
+      <BasicSwitch />
+      <BasicSwitch defaultChecked disabled />
+      <BasicSwitch disabled />
+    </div>
+  );
+}
+
+function BasicSwitch(props: UseSwitchParameters) {
+  const { getInputProps, checked, disabled, focusVisible } = useSwitch(props);
+
+  const stateClasses = {
+    'Switch-checked': checked,
+    'Switch-disabled': disabled,
+    'Switch-focusVisible': focusVisible,
+  };
+
+  return (
+    <BasicSwitchRoot className={clsx(stateClasses)}>
+      <BasicSwitchThumb className={clsx(stateClasses)} />
+      <BasicSwitchInput {...getInputProps()} aria-label="Demo switch" />
+    </BasicSwitchRoot>
+  );
+}
+
 const blue = {
   500: '#007FFF',
 };
@@ -72,31 +100,3 @@ const BasicSwitchThumb = styled('span')`
     background-color: #fff;
   }
 `;
-
-function BasicSwitch(props: UseSwitchParameters) {
-  const { getInputProps, checked, disabled, focusVisible } = useSwitch(props);
-
-  const stateClasses = {
-    'Switch-checked': checked,
-    'Switch-disabled': disabled,
-    'Switch-focusVisible': focusVisible,
-  };
-
-  return (
-    <BasicSwitchRoot className={clsx(stateClasses)}>
-      <BasicSwitchThumb className={clsx(stateClasses)} />
-      <BasicSwitchInput {...getInputProps()} aria-label="Demo switch" />
-    </BasicSwitchRoot>
-  );
-}
-
-export default function UseSwitchesBasic() {
-  return (
-    <div>
-      <BasicSwitch defaultChecked />
-      <BasicSwitch />
-      <BasicSwitch defaultChecked disabled />
-      <BasicSwitch disabled />
-    </div>
-  );
-}
diff --git a/docs/data/base/components/switch/UseSwitchesCustom.js b/docs/data/base/components/switch/UseSwitchesCustom.js
@@ -3,6 +3,29 @@ import clsx from 'clsx';
 import { styled } from '@mui/system';
 import useSwitch from '@mui/base/useSwitch';
 
+export default function UseSwitchesCustom() {
+  return <MUISwitch defaultChecked />;
+}
+
+function MUISwitch(props) {
+  const { getInputProps, checked, disabled, focusVisible } = useSwitch(props);
+
+  const stateClasses = {
+    checked,
+    disabled,
+    focusVisible,
+  };
+
+  return (
+    <SwitchRoot className={clsx(stateClasses)}>
+      <SwitchTrack>
+        <SwitchThumb className={clsx(stateClasses)} />
+      </SwitchTrack>
+      <SwitchInput {...getInputProps()} aria-label="Demo switch" />
+    </SwitchRoot>
+  );
+}
+
 const blue = {
   700: '#0059B2',
 };
@@ -78,26 +101,3 @@ const SwitchTrack = styled('span')(
   display: block;
 `,
 );
-
-function MUISwitch(props) {
-  const { getInputProps, checked, disabled, focusVisible } = useSwitch(props);
-
-  const stateClasses = {
-    checked,
-    disabled,
-    focusVisible,
-  };
-
-  return (
-    <SwitchRoot className={clsx(stateClasses)}>
-      <SwitchTrack>
-        <SwitchThumb className={clsx(stateClasses)} />
-      </SwitchTrack>
-      <SwitchInput {...getInputProps()} aria-label="Demo switch" />
-    </SwitchRoot>
-  );
-}
-
-export default function UseSwitchesCustom() {
-  return <MUISwitch defaultChecked />;
-}
diff --git a/docs/data/base/components/switch/UseSwitchesCustom.tsx b/docs/data/base/components/switch/UseSwitchesCustom.tsx
@@ -3,6 +3,29 @@ import clsx from 'clsx';
 import { styled } from '@mui/system';
 import useSwitch, { UseSwitchParameters } from '@mui/base/useSwitch';
 
+export default function UseSwitchesCustom() {
+  return <MUISwitch defaultChecked />;
+}
+
+function MUISwitch(props: UseSwitchParameters) {
+  const { getInputProps, checked, disabled, focusVisible } = useSwitch(props);
+
+  const stateClasses = {
+    checked,
+    disabled,
+    focusVisible,
+  };
+
+  return (
+    <SwitchRoot className={clsx(stateClasses)}>
+      <SwitchTrack>
+        <SwitchThumb className={clsx(stateClasses)} />
+      </SwitchTrack>
+      <SwitchInput {...getInputProps()} aria-label="Demo switch" />
+    </SwitchRoot>
+  );
+}
+
 const blue = {
   700: '#0059B2',
 };
@@ -78,26 +101,3 @@ const SwitchTrack = styled('span')(
   display: block;
 `,
 );
-
-function MUISwitch(props: UseSwitchParameters) {
-  const { getInputProps, checked, disabled, focusVisible } = useSwitch(props);
-
-  const stateClasses = {
-    checked,
-    disabled,
-    focusVisible,
-  };
-
-  return (
-    <SwitchRoot className={clsx(stateClasses)}>
-      <SwitchTrack>
-        <SwitchThumb className={clsx(stateClasses)} />
-      </SwitchTrack>
-      <SwitchInput {...getInputProps()} aria-label="Demo switch" />
-    </SwitchRoot>
-  );
-}
-
-export default function UseSwitchesCustom() {
-  return <MUISwitch defaultChecked />;
-}