From d02960f7a38b880b050fdf0ee105c73813ef9343 Mon Sep 17 00:00:00 2001
From: Steve Ernstberger <steve32285@gmail.com>
Date: Fri, 9 Jun 2023 10:08:11 -0600
Subject: [PATCH] [docs][joy] Add typography introduction demo component
 (#37553)

Signed-off-by: Steve Ernstberger <steve32285@gmail.com>
Co-authored-by: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
---
 .../components/typography/TypographyUsage.js  | 62 +++++++++++++++++++
 .../joy/components/typography/typography.md   |  2 +
 2 files changed, 64 insertions(+)
 create mode 100644 docs/data/joy/components/typography/TypographyUsage.js

diff --git a/docs/data/joy/components/typography/TypographyUsage.js b/docs/data/joy/components/typography/TypographyUsage.js
new file mode 100644
index 00000000000000..20c8f46c7f5532
--- /dev/null
+++ b/docs/data/joy/components/typography/TypographyUsage.js
@@ -0,0 +1,62 @@
+import * as React from 'react';
+import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
+import Typography from '@mui/joy/Typography';
+import { Box } from '@mui/joy';
+
+export default function TypographyUsages() {
+  return (
+    <JoyUsageDemo
+      componentName="Typography"
+      data={[
+        {
+          propName: 'level',
+          knob: 'select',
+          defaultValue: 'h1',
+          options: [
+            'display1',
+            'display2',
+            'h1',
+            'h2',
+            'h3',
+            'h4',
+            'h5',
+            'h6',
+            'body1',
+            'body2',
+            'body3',
+          ],
+        },
+
+        {
+          propName: 'color',
+          knob: 'color',
+          defaultValue: 'neutral',
+        },
+
+        {
+          propName: 'variant',
+          knob: 'select',
+          defaultValue: 'plain',
+          options: ['plain', 'outlined', 'soft', 'solid'],
+        },
+
+        {
+          propName: 'children',
+          knob: 'input',
+          defaultValue: 'Typography',
+        },
+
+        {
+          propName: 'noWrap',
+          knob: 'switch',
+          defaultValue: false,
+        },
+      ]}
+      renderDemo={(props) => (
+        <Box sx={{ maxWidth: '400px' }}>
+          <Typography {...props}>{props.children}</Typography>
+        </Box>
+      )}
+    />
+  );
+}
diff --git a/docs/data/joy/components/typography/typography.md b/docs/data/joy/components/typography/typography.md
index f9f4ed17e52db4..0dff85e5d5bdb6 100644
--- a/docs/data/joy/components/typography/typography.md
+++ b/docs/data/joy/components/typography/typography.md
@@ -13,6 +13,8 @@ githubLabel: 'component: Typography'
 
 The Typography component helps maintain a consistent design by providing a limited set of values to choose from and convenient props for building common designs faster.
 
+{{"demo": "TypographyUsage.js", "hideToolbar": true, "bg": "gradient"}}
+
 ## Basics
 
 ```jsx