From ad42757d6ef0bd60fe3ccaeb2ad8bc9ffd5ee21a Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Mon, 16 Nov 2020 19:07:33 +0100
Subject: [PATCH] [docs] Add docs for typography in system (#23510)

---
 docs/src/pages/system/typography/Variant.js    | 12 ++++++++++++
 docs/src/pages/system/typography/Variant.tsx   | 12 ++++++++++++
 docs/src/pages/system/typography/typography.md |  4 ++++
 3 files changed, 28 insertions(+)
 create mode 100644 docs/src/pages/system/typography/Variant.js
 create mode 100644 docs/src/pages/system/typography/Variant.tsx

diff --git a/docs/src/pages/system/typography/Variant.js b/docs/src/pages/system/typography/Variant.js
new file mode 100644
index 00000000000000..f0b6a25b899c20
--- /dev/null
+++ b/docs/src/pages/system/typography/Variant.js
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import Box from '@material-ui/core/Box';
+
+export default function Variant() {
+  return (
+    <div>
+      <Box sx={{ typography: 'subtitle2' }}>subtitle2</Box>
+      <Box sx={{ typography: 'body1' }}>body1</Box>
+      <Box sx={{ typography: 'body2' }}>body2</Box>
+    </div>
+  );
+}
diff --git a/docs/src/pages/system/typography/Variant.tsx b/docs/src/pages/system/typography/Variant.tsx
new file mode 100644
index 00000000000000..f0b6a25b899c20
--- /dev/null
+++ b/docs/src/pages/system/typography/Variant.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import Box from '@material-ui/core/Box';
+
+export default function Variant() {
+  return (
+    <div>
+      <Box sx={{ typography: 'subtitle2' }}>subtitle2</Box>
+      <Box sx={{ typography: 'body1' }}>body1</Box>
+      <Box sx={{ typography: 'body2' }}>body2</Box>
+    </div>
+  );
+}
diff --git a/docs/src/pages/system/typography/typography.md b/docs/src/pages/system/typography/typography.md
index fcd0b98068de36..31ab5feeb58283 100644
--- a/docs/src/pages/system/typography/typography.md
+++ b/docs/src/pages/system/typography/typography.md
@@ -2,6 +2,10 @@
 
 <p class="description">Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.</p>
 
+## Variant
+
+{{"demo": "pages/system/typography/Variant.js"}}
+
 ## Text alignment
 
 {{"demo": "pages/system/typography/TextAlignment.js", "defaultCodeOpen": false}}