[docs][joy] Add typography introduction demo component (#37553)

Signed-off-by: Steve Ernstberger <[email protected]>
Co-authored-by: Danilo Leal <[email protected]>

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>
+      )}
+    />
+  );
+}

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