From ac087f806946c53128cdfe6a1435e3ddae4cbc6e Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Thu, 2 Jun 2022 11:40:07 +0100
Subject: [PATCH] Add more demos and improve

---
 docs/data/joy/components/sheet/SheetColors.js | 73 +++++++++++++++++++
 .../data/joy/components/sheet/SheetColors.tsx | 73 +++++++++++++++++++
 .../{SimpleSheet.js => SheetElevations.js}    |  3 +-
 ...et.tsx.preview => SheetElevations.preview} |  0
 .../{SimpleSheet.tsx => SheetElevations.tsx}  |  3 +-
 .../sheet/SheetElevations.tsx.preview         |  3 +
 .../joy/components/sheet/SheetVariants.js     | 28 +++++++
 .../joy/components/sheet/SheetVariants.tsx    | 28 +++++++
 .../sheet/SheetVariants.tsx.preview           |  4 +
 docs/data/joy/components/sheet/sheet.md       | 20 +++--
 10 files changed, 226 insertions(+), 9 deletions(-)
 create mode 100644 docs/data/joy/components/sheet/SheetColors.js
 create mode 100644 docs/data/joy/components/sheet/SheetColors.tsx
 rename docs/data/joy/components/sheet/{SimpleSheet.js => SheetElevations.js} (85%)
 rename docs/data/joy/components/sheet/{SimpleSheet.tsx.preview => SheetElevations.preview} (100%)
 rename docs/data/joy/components/sheet/{SimpleSheet.tsx => SheetElevations.tsx} (85%)
 create mode 100644 docs/data/joy/components/sheet/SheetElevations.tsx.preview
 create mode 100644 docs/data/joy/components/sheet/SheetVariants.js
 create mode 100644 docs/data/joy/components/sheet/SheetVariants.tsx
 create mode 100644 docs/data/joy/components/sheet/SheetVariants.tsx.preview

diff --git a/docs/data/joy/components/sheet/SheetColors.js b/docs/data/joy/components/sheet/SheetColors.js
new file mode 100644
index 00000000000000..6b1b42ea158b03
--- /dev/null
+++ b/docs/data/joy/components/sheet/SheetColors.js
@@ -0,0 +1,73 @@
+import Box from '@mui/joy/Box';
+import Radio from '@mui/joy/Radio';
+import RadioGroup from '@mui/joy/RadioGroup';
+import Sheet, { sheetClasses } from '@mui/joy/Sheet';
+
+import Typography from '@mui/joy/Typography';
+import * as React from 'react';
+
+export default function SheetColors() {
+  const [variant, setVariant] = React.useState('plain');
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        gap: 2,
+        justifyContent: 'center',
+        flexWrap: 'wrap',
+        [`& > .${sheetClasses.root}`]: {
+          m: 2,
+          width: 128,
+          height: 128,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+      }}
+    >
+      <Box
+        sx={{
+          mb: 2,
+          width: '100%',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <Typography fontWeight="lg" mr={2} id="variant-label">
+          Variant:
+        </Typography>
+        <RadioGroup
+          aria-labelledby="variant-label"
+          name="variant"
+          row
+          value={variant}
+          onChange={(event) => setVariant(event.target.value)}
+        >
+          <Radio label="Plain" value="plain" />
+          <Radio label="Outlined" value="outlined" />
+          <Radio label="Soft" value="soft" />
+          <Radio label="Solid" value="solid" />
+        </RadioGroup>
+      </Box>
+      <Sheet variant={variant} color="primary">
+        Primary
+      </Sheet>
+      <Sheet variant={variant} color="neutral">
+        Neutral
+      </Sheet>
+      <Sheet variant={variant} color="danger">
+        Danger
+      </Sheet>
+      <Sheet variant={variant} color="info">
+        Info
+      </Sheet>
+      <Sheet variant={variant} color="success">
+        Success
+      </Sheet>
+      <Sheet variant={variant} color="warning">
+        Warning
+      </Sheet>
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/sheet/SheetColors.tsx b/docs/data/joy/components/sheet/SheetColors.tsx
new file mode 100644
index 00000000000000..ba434e793e1853
--- /dev/null
+++ b/docs/data/joy/components/sheet/SheetColors.tsx
@@ -0,0 +1,73 @@
+import Box from '@mui/joy/Box';
+import Radio from '@mui/joy/Radio';
+import RadioGroup from '@mui/joy/RadioGroup';
+import Sheet, { sheetClasses } from '@mui/joy/Sheet';
+import { VariantProp } from '@mui/joy/styles';
+import Typography from '@mui/joy/Typography';
+import * as React from 'react';
+
+export default function SheetColors() {
+  const [variant, setVariant] = React.useState<VariantProp>('plain');
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        gap: 2,
+        justifyContent: 'center',
+        flexWrap: 'wrap',
+        [`& > .${sheetClasses.root}`]: {
+          m: 2,
+          width: 128,
+          height: 128,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+      }}
+    >
+      <Box
+        sx={{
+          mb: 2,
+          width: '100%',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <Typography fontWeight="lg" mr={2} id="variant-label">
+          Variant:
+        </Typography>
+        <RadioGroup
+          aria-labelledby="variant-label"
+          name="variant"
+          row
+          value={variant}
+          onChange={(event) => setVariant(event.target.value as VariantProp)}
+        >
+          <Radio label="Plain" value="plain" />
+          <Radio label="Outlined" value="outlined" />
+          <Radio label="Soft" value="soft" />
+          <Radio label="Solid" value="solid" />
+        </RadioGroup>
+      </Box>
+      <Sheet variant={variant} color="primary">
+        Primary
+      </Sheet>
+      <Sheet variant={variant} color="neutral">
+        Neutral
+      </Sheet>
+      <Sheet variant={variant} color="danger">
+        Danger
+      </Sheet>
+      <Sheet variant={variant} color="info">
+        Info
+      </Sheet>
+      <Sheet variant={variant} color="success">
+        Success
+      </Sheet>
+      <Sheet variant={variant} color="warning">
+        Warning
+      </Sheet>
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/sheet/SimpleSheet.js b/docs/data/joy/components/sheet/SheetElevations.js
similarity index 85%
rename from docs/data/joy/components/sheet/SimpleSheet.js
rename to docs/data/joy/components/sheet/SheetElevations.js
index 94abd06e6ebc84..5fdecf91b3766c 100644
--- a/docs/data/joy/components/sheet/SimpleSheet.js
+++ b/docs/data/joy/components/sheet/SheetElevations.js
@@ -2,12 +2,11 @@ import Box from '@mui/joy/Box';
 import Sheet from '@mui/joy/Sheet';
 import * as React from 'react';
 
-export default function SimpleSheet() {
+export default function SheetElevations() {
   return (
     <Box
       sx={{
         display: 'flex',
-        flexWrap: 'wrap',
         '& > div': {
           m: 2,
           width: 128,
diff --git a/docs/data/joy/components/sheet/SimpleSheet.tsx.preview b/docs/data/joy/components/sheet/SheetElevations.preview
similarity index 100%
rename from docs/data/joy/components/sheet/SimpleSheet.tsx.preview
rename to docs/data/joy/components/sheet/SheetElevations.preview
diff --git a/docs/data/joy/components/sheet/SimpleSheet.tsx b/docs/data/joy/components/sheet/SheetElevations.tsx
similarity index 85%
rename from docs/data/joy/components/sheet/SimpleSheet.tsx
rename to docs/data/joy/components/sheet/SheetElevations.tsx
index 94abd06e6ebc84..5fdecf91b3766c 100644
--- a/docs/data/joy/components/sheet/SimpleSheet.tsx
+++ b/docs/data/joy/components/sheet/SheetElevations.tsx
@@ -2,12 +2,11 @@ import Box from '@mui/joy/Box';
 import Sheet from '@mui/joy/Sheet';
 import * as React from 'react';
 
-export default function SimpleSheet() {
+export default function SheetElevations() {
   return (
     <Box
       sx={{
         display: 'flex',
-        flexWrap: 'wrap',
         '& > div': {
           m: 2,
           width: 128,
diff --git a/docs/data/joy/components/sheet/SheetElevations.tsx.preview b/docs/data/joy/components/sheet/SheetElevations.tsx.preview
new file mode 100644
index 00000000000000..a054cf6ef25b41
--- /dev/null
+++ b/docs/data/joy/components/sheet/SheetElevations.tsx.preview
@@ -0,0 +1,3 @@
+<Sheet elevation="sm" />
+<Sheet elevation="md" />
+<Sheet elevation="lg" />
\ No newline at end of file
diff --git a/docs/data/joy/components/sheet/SheetVariants.js b/docs/data/joy/components/sheet/SheetVariants.js
new file mode 100644
index 00000000000000..48e5dbc5d2c159
--- /dev/null
+++ b/docs/data/joy/components/sheet/SheetVariants.js
@@ -0,0 +1,28 @@
+import Box from '@mui/joy/Box';
+import Sheet from '@mui/joy/Sheet';
+import * as React from 'react';
+
+export default function SheetElevations() {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        '& > div': {
+          m: 2,
+          width: 128,
+          height: 128,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+      }}
+    >
+      <Sheet variant="plain">Plain</Sheet>
+      <Sheet variant="solid">Solid</Sheet>
+      <Sheet variant="outlined">Outlined</Sheet>
+      <Sheet variant="soft">Soft</Sheet>
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/sheet/SheetVariants.tsx b/docs/data/joy/components/sheet/SheetVariants.tsx
new file mode 100644
index 00000000000000..48e5dbc5d2c159
--- /dev/null
+++ b/docs/data/joy/components/sheet/SheetVariants.tsx
@@ -0,0 +1,28 @@
+import Box from '@mui/joy/Box';
+import Sheet from '@mui/joy/Sheet';
+import * as React from 'react';
+
+export default function SheetElevations() {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        '& > div': {
+          m: 2,
+          width: 128,
+          height: 128,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+      }}
+    >
+      <Sheet variant="plain">Plain</Sheet>
+      <Sheet variant="solid">Solid</Sheet>
+      <Sheet variant="outlined">Outlined</Sheet>
+      <Sheet variant="soft">Soft</Sheet>
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/sheet/SheetVariants.tsx.preview b/docs/data/joy/components/sheet/SheetVariants.tsx.preview
new file mode 100644
index 00000000000000..522138a0745fcc
--- /dev/null
+++ b/docs/data/joy/components/sheet/SheetVariants.tsx.preview
@@ -0,0 +1,4 @@
+<Sheet variant="plain">Plain</Sheet>
+<Sheet variant="solid">Solid</Sheet>
+<Sheet variant="outlined">Outlined</Sheet>
+<Sheet variant="soft">Soft</Sheet>
\ No newline at end of file
diff --git a/docs/data/joy/components/sheet/sheet.md b/docs/data/joy/components/sheet/sheet.md
index d1ebd0fe04a173..0548cb9f644d3b 100644
--- a/docs/data/joy/components/sheet/sheet.md
+++ b/docs/data/joy/components/sheet/sheet.md
@@ -11,15 +11,25 @@ unstyled: /base/react-sheet/
 
 {{"component": "modules/components/ComponentLinkHeader.js"}}
 
-## Basic
-
 Use the `Sheet` component as a generic container for your components.
 You can play around with variants, color, and elevation to achieve the desired result.
 
 {{"demo": "SheetUsage.js", "hideToolbar": true}}
 
-## Elevation
+## Variants
+
+The `Sheet` comes with four global variants: `plain` (default), `outlined`, `soft` and `solid`.
+
+{{"demo": "SheetVariants.js"}}
+
+## Colors
+
+All theme palettes are available via the `color` prop which can be combined with the `variant` prop.
+
+{{"demo": "SheetColors.js"}}
+
+## Elevations
 
-`Sheet` comes with three predefined elevation values: `sm`, `md`, and `lg`.
+The `Sheet` comes with three predefined elevation values: `sm`, `md`, and `lg`.
 
-{{"demo": "SimpleSheet.js"}}
+{{"demo": "SheetElevations.js"}}