[docs-infra] Add a feature list "component"

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' },
     ],

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

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>

docs/src/modules/components/FeatureList.js

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import IconImage from 'docs/src/components/icon/IconImage';
+import { styled } from '@mui/material/styles';
+
+const ListRoot = styled('ul')({
+  padding: 0,
+  margin: 0,
+  marginBottom: 16,
+  listStyle: 'none',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 6,
+});
+
+export default function FeatureList({ features }) {
+  return (
+    <ListRoot>
+      {features.map((feature, item) => (
+        <Stack
+          key={item}
+          component="li"
+          direction="row"
+          alignItems="center"
+          spacing={1.5}
+          useFlexGap
+        >
+          <IconImage name="pricing/yes" />
+          <Typography color="text.secondary">{feature}</Typography>
+        </Stack>
+      ))}
+    </ListRoot>
+  );
+}
+
+FeatureList.propTypes = {
+  features: PropTypes.string,
+};

docs/src/modules/components/MarkdownElement.js

@@ -601,6 +601,21 @@ const Root = styled('div')(
         marginBottom: theme.spacing(1),
       },
     },
+    '& .feature-list': {
+      padding: 0,
+      listStyle: 'none',
+      '& li': {
+        marginBottom: 6,
+        display: 'flex',
+        alignItems: 'center',
+        gap: 12,
+        '::before': {
+          content: `url('/static/branding/pricing/yes-light.svg')`,
+          width: '18px',
+          height: '18px',
+        },
+      },
+    },
   }),
   ({ theme }) => ({
     [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: {
@@ -747,6 +762,13 @@ const Root = styled('div')(
           backgroundColor: `var(--muidocs-palette-primaryDark-800, ${darkTheme.palette.primaryDark[800]})`,
         },
       },
+      '& .feature-list': {
+        '& li': {
+          '::before': {
+            content: `url('/static/branding/pricing/yes-dark.svg')`,
+          },
+        },
+      },
     },
   }),
 );