From 1361e3e0c9be1d8ef32c09dbbb14916a6b299d19 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Wed, 13 Mar 2024 13:06:07 -0300
Subject: [PATCH] add experiment page for demo

---
 docs/data/docs-infra/pages.ts                 |  1 +
 .../experiments/docs/custom-components.js     |  7 +++++
 .../experiments/docs/custom-components.md     | 27 +++++++++++++++++++
 3 files changed, 35 insertions(+)
 create mode 100644 docs/pages/experiments/docs/custom-components.js
 create mode 100644 docs/pages/experiments/docs/custom-components.md

diff --git a/docs/data/docs-infra/pages.ts b/docs/data/docs-infra/pages.ts
index d8dbb02f3d954f..0cd74435bba91f 100644
--- a/docs/data/docs-infra/pages.ts
+++ b/docs/data/docs-infra/pages.ts
@@ -14,6 +14,7 @@ const pages: readonly MuiPage[] = [
     children: [
       { pathname: '/experiments/docs/callouts' },
       { pathname: '/experiments/docs/codeblock' },
+      { pathname: '/experiments/docs/custom-components' },
       { pathname: '/experiments/docs/demos' },
       { pathname: '/experiments/docs/data-grid-premium', title: 'API DataGridPremium' },
     ],
diff --git a/docs/pages/experiments/docs/custom-components.js b/docs/pages/experiments/docs/custom-components.js
new file mode 100644
index 00000000000000..56cac9e3ca0c30
--- /dev/null
+++ b/docs/pages/experiments/docs/custom-components.js
@@ -0,0 +1,7 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import * as pageProps from './custom-components.md?muiMarkdown';
+
+export default function Page() {
+  return <MarkdownDocs {...pageProps} />;
+}
diff --git a/docs/pages/experiments/docs/custom-components.md b/docs/pages/experiments/docs/custom-components.md
new file mode 100644
index 00000000000000..c91e51a1e24d07
--- /dev/null
+++ b/docs/pages/experiments/docs/custom-components.md
@@ -0,0 +1,27 @@
+# Callouts
+
+<p class="description">Type of callouts.</p>
+
+## Header chips
+
+{{"component": "modules/components/ComponentLinkHeader.js"}}
+
+## Feature list
+
+### Approach 1: Componentized
+
+Easier to protect the styles, but worse to read and write
+
+{{"component": "modules/components/FeatureList.js", "features": ["Manages modal stacking when one-at-a-time just isn't enough.", "Creates a backdrop, for disabling interaction below the modal.", "It disables scrolling of the page content while open.", "It properly manages focus; moving to the modal content, and keeping it there until the modal is closed.", "Adds the appropriate ARIA roles automatically."]}}
+
+### Approach 2: Plain HTML
+
+Easier to write and read, and potentially easier to violate the styles?
+
+<ul class='feature-list'>
+ <li>Manages modal stacking when one-at-a-time just isn't enough.</li>
+ <li>Creates a backdrop, for disabling interaction below the modal.est</li>
+ <li>It disables scrolling of the page content while open.</li>
+ <li>It properly manages focus; moving to the modal content, and keeping it there until the modal is closed.</li>
+ <li>Adds the appropriate ARIA roles automatically.</li>
+</ul>