[docs] Make overview demo work in codesandbox (#10661)

mui · Oct 16, 2023 · 2258ff3 · 2258ff3
1 parent 574ce72
commit 2258ff3
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 16 deletions.
diff --git a/docs/data/date-pickers/base-concepts/ComponentFamilies.js b/docs/data/date-pickers/base-concepts/ComponentFamilies.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import Link from 'next/link';
 import dayjs from 'dayjs';
+import { styled } from '@mui/material/styles';
 import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
@@ -13,13 +13,25 @@ import { MultiInputDateTimeRangeField } from '@mui/x-date-pickers-pro/MultiInput
 import Stack from '@mui/material/Stack';
 import Tooltip from '@mui/material/Tooltip';
 
+const ProSpan = styled('span')({
+  display: 'inline-block',
+  height: '1em',
+  width: '1em',
+  verticalAlign: 'middle',
+  marginLeft: '0.3em',
+  marginBottom: '0.08em',
+  backgroundSize: 'contain',
+  backgroundRepeat: 'no-repeat',
+  backgroundImage: 'url(https://mui.com/static/x/pro.svg)',
+});
+
 function ProLabel({ children }) {
   return (
     <Stack direction="row" spacing={0.5} component="span">
       <Tooltip title="Included in Pro package">
-        <Link href="/x/introduction/licensing/#pro-plan">
-          <span className="plan-pro" />
-        </Link>
+        <a href="https://mui.com/x/introduction/licensing/#pro-plan">
+          <ProSpan />
+        </a>
       </Tooltip>
       <span>{children}</span>
     </Stack>

diff --git a/docs/data/date-pickers/base-concepts/ComponentFamilies.tsx b/docs/data/date-pickers/base-concepts/ComponentFamilies.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import Link from 'next/link';
 import dayjs from 'dayjs';
+import { styled } from '@mui/material/styles';
 import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
@@ -13,13 +13,25 @@ import { MultiInputDateTimeRangeField } from '@mui/x-date-pickers-pro/MultiInput
 import Stack from '@mui/material/Stack';
 import Tooltip from '@mui/material/Tooltip';
 
+const ProSpan = styled('span')({
+  display: 'inline-block',
+  height: '1em',
+  width: '1em',
+  verticalAlign: 'middle',
+  marginLeft: '0.3em',
+  marginBottom: '0.08em',
+  backgroundSize: 'contain',
+  backgroundRepeat: 'no-repeat',
+  backgroundImage: 'url(https://mui.com/static/x/pro.svg)',
+});
+
 function ProLabel({ children }: { children: React.ReactNode }) {
   return (
     <Stack direction="row" spacing={0.5} component="span">
       <Tooltip title="Included in Pro package">
-        <Link href="/x/introduction/licensing/#pro-plan">
-          <span className="plan-pro" />
-        </Link>
+        <a href="https://mui.com/x/introduction/licensing/#pro-plan">
+          <ProSpan />
+        </a>
       </Tooltip>
       <span>{children}</span>
     </Stack>

diff --git a/docs/data/date-pickers/overview/CommonlyUsedComponents.js b/docs/data/date-pickers/overview/CommonlyUsedComponents.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Link from 'next/link';
+import { styled } from '@mui/material/styles';
 import Tooltip from '@mui/material/Tooltip';
 import Stack from '@mui/material/Stack';
 import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
@@ -10,6 +10,18 @@ import { TimePicker } from '@mui/x-date-pickers/TimePicker';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
 
+const ProSpan = styled('span')({
+  display: 'inline-block',
+  height: '1em',
+  width: '1em',
+  verticalAlign: 'middle',
+  marginLeft: '0.3em',
+  marginBottom: '0.08em',
+  backgroundSize: 'contain',
+  backgroundRepeat: 'no-repeat',
+  backgroundImage: 'url(https://mui.com/static/x/pro.svg)',
+});
+
 function Label({ componentName, valueType, isProOnly }) {
   const content = (
     <span>
@@ -21,9 +33,9 @@ function Label({ componentName, valueType, isProOnly }) {
     return (
       <Stack direction="row" spacing={0.5} component="span">
         <Tooltip title="Included on Pro package">
-          <Link href="/x/introduction/licensing/#pro-plan">
-            <span className="plan-pro" />
-          </Link>
+          <a href="https://mui.com/x/introduction/licensing/#pro-plan">
+            <ProSpan />
+          </a>
         </Tooltip>
         {content}
       </Stack>

diff --git a/docs/data/date-pickers/overview/CommonlyUsedComponents.tsx b/docs/data/date-pickers/overview/CommonlyUsedComponents.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Link from 'next/link';
+import { styled } from '@mui/material/styles';
 import Tooltip from '@mui/material/Tooltip';
 import Stack from '@mui/material/Stack';
 import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
@@ -10,6 +10,18 @@ import { TimePicker } from '@mui/x-date-pickers/TimePicker';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
 
+const ProSpan = styled('span')({
+  display: 'inline-block',
+  height: '1em',
+  width: '1em',
+  verticalAlign: 'middle',
+  marginLeft: '0.3em',
+  marginBottom: '0.08em',
+  backgroundSize: 'contain',
+  backgroundRepeat: 'no-repeat',
+  backgroundImage: 'url(https://mui.com/static/x/pro.svg)',
+});
+
 function Label({
   componentName,
   valueType,
@@ -29,9 +41,9 @@ function Label({
     return (
       <Stack direction="row" spacing={0.5} component="span">
         <Tooltip title="Included on Pro package">
-          <Link href="/x/introduction/licensing/#pro-plan">
-            <span className="plan-pro" />
-          </Link>
+          <a href="https://mui.com/x/introduction/licensing/#pro-plan">
+            <ProSpan />
+          </a>
         </Tooltip>
         {content}
       </Stack>