[docs] Link to the correct package on Joy component pages (#33439)

mui · Jul 12, 2022 · 5069f1e · 5069f1e
1 parent 97c53f2
commit 5069f1e
Show file tree

Hide file tree

Showing 12 changed files with 25 additions and 16 deletions.
diff --git a/docs/data/joy/components/avatar/avatar.md b/docs/data/joy/components/avatar/avatar.md
@@ -14,7 +14,7 @@ The avatar component is usually seen for displaying user information in places s
 
 {{"demo": "AvatarUsage.js", "hideToolbar": true}}
 
-{{"component": "modules/components/ComponentLinkHeader.js"}}
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
 ## Component
 

diff --git a/docs/data/joy/components/badge/badge.md b/docs/data/joy/components/badge/badge.md
@@ -15,7 +15,7 @@ The badge component is most frequently used to signal status (online, offline, b
 
 {{"demo": "BadgeUsage.js", "hideToolbar": true}}
 
-{{"component": "modules/components/ComponentLinkHeader.js"}}
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
 ## Component
 

diff --git a/docs/data/joy/components/button/button.md b/docs/data/joy/components/button/button.md
@@ -16,7 +16,7 @@ Buttons communicate actions that users can take.
 
 {{"demo": "ButtonUsage.js", "hideToolbar": true}}
 
-{{"component": "modules/components/ComponentLinkHeader.js"}}
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
 ## Component
 

diff --git a/docs/data/joy/components/checkbox/checkbox.md b/docs/data/joy/components/checkbox/checkbox.md
@@ -16,7 +16,7 @@ For toggling between on and off or single option selection, consider using a swi
 
 {{"demo": "CheckboxUsage.js", "hideToolbar": true}}
 
-{{"component": "modules/components/ComponentLinkHeader.js"}}
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
 ## Component
 

diff --git a/docs/data/joy/components/chip/chip.md b/docs/data/joy/components/chip/chip.md
@@ -16,7 +16,7 @@ The badge component is most frequently used to signal status (online, offline, b
 
 {{"demo": "ChipUsage.js", "hideToolbar": true}}
 
-{{"component": "modules/components/ComponentLinkHeader.js"}}
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
 ## Component
 

diff --git a/docs/data/joy/components/link/link.md b/docs/data/joy/components/link/link.md
@@ -16,7 +16,7 @@ It accepts the same props as the [`Typography`](/joy-ui/react-typography/) compo
 
 {{"demo": "LinkUsage.js", "hideToolbar": true}}
 
-{{"component": "modules/components/ComponentLinkHeader.js"}}
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
 ## Component
 

diff --git a/docs/data/joy/components/radio/radio.md b/docs/data/joy/components/radio/radio.md
@@ -17,7 +17,7 @@ For more in-depth about when to use each, visit [the NNg's documentation](https:
 
 {{"demo": "RadioUsage.js", "hideToolbar": true}}
 
-{{"component": "modules/components/ComponentLinkHeader.js"}}
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
 ## Component
 

diff --git a/docs/data/joy/components/sheet/sheet.md b/docs/data/joy/components/sheet/sheet.md
@@ -14,7 +14,7 @@ It's a sibling to the [`Box`](/system/react-box/) component, and equivalent to M
 
 {{"demo": "SheetUsage.js", "hideToolbar": true}}
 
-{{"component": "modules/components/ComponentLinkHeader.js"}}
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
 ## Component
 

diff --git a/docs/data/joy/components/slider/slider.md b/docs/data/joy/components/slider/slider.md
@@ -15,7 +15,7 @@ Sliders are ideal for interface controls that benefit from a visual representati
 
 {{"demo": "SliderUsage.js", "hideToolbar": true}}
 
-{{"component": "modules/components/ComponentLinkHeader.js"}}
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
 ## Component
 

diff --git a/docs/data/joy/components/switch/switch.md b/docs/data/joy/components/switch/switch.md
@@ -17,7 +17,7 @@ should be made clear from the corresponding inline label.
 
 {{"demo": "SwitchUsage.js", "hideToolbar": true}}
 
-{{"component": "modules/components/ComponentLinkHeader.js"}}
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
 ## Component
 

diff --git a/docs/data/material/components/tree-view/tree-view-pt.md b/docs/data/material/components/tree-view/tree-view-pt.md
@@ -4,7 +4,7 @@ title: Componente React de Visualização em Árvore
 components: TreeView, TreeItem
 githubLabel: 'component: tree view'
 waiAria: 'https://www.w3.org/TR/wai-aria-practices/#TreeView'
-packageName: '@material-ui/lab'
+packageName: '@mui/lab'
 ---
 
 # Visualização em árvore

diff --git a/docs/src/modules/components/ComponentLinkHeader.js b/docs/src/modules/components/ComponentLinkHeader.js
@@ -27,14 +27,23 @@ const Root = styled('ul')(({ theme }) => ({
   },
 }));
 
+const defaultPackageNames = {
+  'material-ui': '@mui/material',
+  'joy-ui': '@mui/joy',
+  base: '@mui/base',
+  system: '@mui/system',
+};
+
 export default function ComponentLinkHeader(props) {
-  const {
-    headers,
-    headers: { packageName = '@mui/material' },
-    options,
-  } = props;
+  const { headers, options } = props;
   const t = useTranslate();
 
+  let packageName = props.headers.packageName;
+  if (!packageName) {
+    const { product } = props.headers;
+    packageName = defaultPackageNames[product] || '@mui/material';
+  }
+
   return (
     <Root>
       {headers.githubLabel ? (