From 067cba1fd3ac892a0bf5e31c593b5d312342d607 Mon Sep 17 00:00:00 2001
From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>
Date: Thu, 22 Feb 2024 10:25:37 +0100
Subject: [PATCH] [docs-infra] Support interfaces for X docs (#41069)

---
 .../ApiPage/list/ExpandableApiItem.tsx        |  2 +-
 .../ApiPage/list/PropertiesList.tsx           | 20 ++++++++++-
 .../ApiPage/sections/PropertiesSection.js     |  2 ++
 .../ApiPage/table/PropertiesTable.tsx         | 33 ++++++++++++++-----
 docs/translations/translations.json           |  1 +
 5 files changed, 48 insertions(+), 10 deletions(-)

diff --git a/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx b/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx
index 8fdeadaf42148b..ff98536fdb0917 100644
--- a/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx
+++ b/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx
@@ -155,7 +155,7 @@ type ExpandableApiItemProps = {
   isExtendable?: boolean;
   note?: string;
   sx?: SxProps;
-  title: string;
+  title: string | React.ReactNode;
   type?: DescriptionType;
 };
 
diff --git a/docs/src/modules/components/ApiPage/list/PropertiesList.tsx b/docs/src/modules/components/ApiPage/list/PropertiesList.tsx
index af3d018b340418..801349f37cc536 100644
--- a/docs/src/modules/components/ApiPage/list/PropertiesList.tsx
+++ b/docs/src/modules/components/ApiPage/list/PropertiesList.tsx
@@ -139,6 +139,8 @@ export interface Properties {
   isDeprecated?: boolean;
   isOptional?: boolean;
   isRequired?: boolean;
+  isProPlan?: boolean;
+  isPremiumPlan?: boolean;
   propDefault?: string;
   propName: string;
   requiresRef?: string;
@@ -169,6 +171,8 @@ export default function PropertiesList(props: PropertiesListProps) {
           isOptional,
           isRequired,
           isDeprecated,
+          isProPlan,
+          isPremiumPlan,
           hooksParameters,
           hooksReturnValue,
           deprecationInfo,
@@ -191,7 +195,21 @@ export default function PropertiesList(props: PropertiesListProps) {
           <StyledApiItem
             key={propName}
             id={getHash({ componentName, propName, hooksParameters, hooksReturnValue })}
-            title={propName}
+            title={
+              <React.Fragment>
+                {propName}
+                {isProPlan && (
+                  <a href="/x/introduction/licensing/#pro-plan">
+                    <span className="plan-pro" />
+                  </a>
+                )}
+                {isPremiumPlan && (
+                  <a href="/x/introduction/licensing/#premium-plan">
+                    <span className="plan-premium" />
+                  </a>
+                )}
+              </React.Fragment>
+            }
             note={note}
             type="props"
             displayOption={displayOption}
diff --git a/docs/src/modules/components/ApiPage/sections/PropertiesSection.js b/docs/src/modules/components/ApiPage/sections/PropertiesSection.js
index 295d4c1187c516..fd52e51baa758c 100644
--- a/docs/src/modules/components/ApiPage/sections/PropertiesSection.js
+++ b/docs/src/modules/components/ApiPage/sections/PropertiesSection.js
@@ -103,6 +103,8 @@ export default function PropertiesSection(props) {
         requiresRef: propDescription?.requiresRef,
         isOptional,
         isRequired,
+        isProPlan: propData.isProPlan,
+        isPremiumPlan: propData.isPremiumPlan,
         isDeprecated,
         hooksParameters,
         hooksReturnValue,
diff --git a/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx b/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx
index 40622f2b29499a..88e86df5826cbb 100644
--- a/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx
+++ b/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx
@@ -122,6 +122,9 @@ interface PropertiesTableProps {
 
 export default function PropertiesTable(props: PropertiesTableProps) {
   const { properties } = props;
+
+  const hasDefaultColumn = properties.some((item) => item.propDefault !== undefined);
+
   const t = useTranslate();
   return (
     <StyledTableContainer>
@@ -130,7 +133,7 @@ export default function PropertiesTable(props: PropertiesTableProps) {
           <tr>
             <th>Name</th>
             <th>Type</th>
-            <th>Default</th>
+            {hasDefaultColumn && <th>Default</th>}
             <th>Description</th>
           </tr>
         </thead>
@@ -144,6 +147,8 @@ export default function PropertiesTable(props: PropertiesTableProps) {
               requiresRef,
               isOptional,
               isRequired,
+              isProPlan,
+              isPremiumPlan,
               isDeprecated,
               hooksParameters,
               hooksReturnValue,
@@ -165,6 +170,16 @@ export default function PropertiesTable(props: PropertiesTableProps) {
                   {propName}
                   {isRequired ? '*' : ''}
                   {isOptional ? '?' : ''}
+                  {isProPlan && (
+                    <a href="/x/introduction/licensing/#pro-plan">
+                      <span className="plan-pro" />
+                    </a>
+                  )}
+                  {isPremiumPlan && (
+                    <a href="/x/introduction/licensing/#premium-plan">
+                      <span className="plan-premium" />
+                    </a>
+                  )}
                 </td>
                 <td className="type-column">
                   {
@@ -176,13 +191,15 @@ export default function PropertiesTable(props: PropertiesTableProps) {
                     />
                   }
                 </td>
-                <td className="default-column">
-                  {propDefault ? (
-                    <span className="MuiApi-table-item-default">{propDefault}</span>
-                  ) : (
-                    '-'
-                  )}
-                </td>
+                {hasDefaultColumn && (
+                  <td className="default-column">
+                    {propDefault ? (
+                      <span className="MuiApi-table-item-default">{propDefault}</span>
+                    ) : (
+                      '-'
+                    )}
+                  </td>
+                )}
                 <td className="MuiPropTable-description-column">
                   {description && <PropDescription description={description} />}
                   {seeMoreDescription && (
diff --git a/docs/translations/translations.json b/docs/translations/translations.json
index 3e9f06b566c833..385f18a846d055 100644
--- a/docs/translations/translations.json
+++ b/docs/translations/translations.json
@@ -35,6 +35,7 @@
     "overrideStylesStyledComponent": "<ul>\n<li>With a <a href=\"/material-ui/integrations/interoperability/#global-css\">global class name</a>.</li>\n<li>With a rule name as part of the component's <a href=\"{{styleOverridesLink}}\"><code>styleOverrides</code> property</a> in a custom theme.</li>\n</ul>",
     "pageDescription": "API reference docs for the React {{name}} component. Learn about the props, CSS, and other APIs of this exported module.",
     "props": "Props",
+    "properties": "Properties",
     "parameters": "Parameters",
     "requires-ref": "This <a href=\"/material-ui/guides/composition/#caveat-with-refs\">needs to be able to hold a ref</a>.",
     "returns": "Returns: ",