[docs-infra] Fix visual look of in-house ad (mui#42735)

joserodolfofreitas · Jul 29, 2024 · 69d2350 · 69d2350
1 parent 59b7181
commit 69d2350
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 62 deletions.
diff --git a/docs/src/modules/components/Ad.js b/docs/src/modules/components/Ad.js
@@ -25,7 +25,7 @@ function PleaseDisableAdblock(props) {
       <Typography variant="body2" component="span" gutterBottom sx={{ display: 'block' }}>
         {t('adblock')}
       </Typography>
-      <Typography variant="body2" component="span" gutterBottom sx={{ display: 'block' }}>
+      <Typography variant="body2" component="span" sx={{ display: 'block' }}>
         {t('thanks')}{' '}
         <span role="img" aria-label={t('emojiLove')}>
           ❤️

diff --git a/docs/src/modules/components/AdDisplay.js b/docs/src/modules/components/AdDisplay.js
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
+import { adShape } from 'docs/src/modules/components/AdManager';
 import { GA_ADS_DISPLAY_RATIO } from 'docs/src/modules/constants';
 import { adStylesObject } from 'docs/src/modules/components/ad.styles';
 
@@ -31,7 +32,7 @@ const ImageShape = styled('span')(({ theme }) => {
 });
 
 export default function AdDisplay(props) {
-  const { ad, className, shape = 'auto' } = props;
+  const { ad, className, shape: shapeProp = 'auto' } = props;
 
   React.useEffect(() => {
     // Avoid an exceed on the Google Analytics quotas.
@@ -45,13 +46,16 @@ export default function AdDisplay(props) {
     });
   }, [ad.label]);
 
-  let Root = 'span';
+  const shape = shapeProp === 'auto' ? adShape : shapeProp;
+
+  let Root;
   if (shape === 'inline') {
     Root = InlineShape;
   }
   if (shape === 'image') {
     Root = ImageShape;
   }
+
   /* eslint-disable material-ui/no-hardcoded-labels, react/no-danger */
   return (
     <Root className={className}>

diff --git a/packages/mui-docs/src/MarkdownElement/MarkdownElement.tsx b/packages/mui-docs/src/MarkdownElement/MarkdownElement.tsx
@@ -121,6 +121,43 @@ const Root = styled('div')(
         marginBottom: 6,
       },
     },
+    '& a[target="_blank"]::after': {
+      content: '""',
+      maskImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' focusable='false' aria-hidden='true' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M6 6v2h8.59L5 17.59 6.41 19 16 9.41V18h2V6z'%3E%3C/path%3E%3C/svg%3E")`,
+      display: 'inline-flex',
+      width: '1em',
+      height: '1em',
+      color: 'inherit',
+      backgroundColor: 'currentColor',
+      transform: 'translate(0, 2px)',
+      transition: 'transform 0.3s cubic-bezier(0.1, 0.8, 0.3, 1)', // bounce effect
+      opacity: 0.8,
+    },
+    '& a[target="_blank"]:hover::after': {
+      opacity: 1,
+      transform: 'translate(1px, 0)',
+    },
+    '& a.remove-link-arrow::after': {
+      // Allows to remove link arrows for images
+      display: 'none',
+    },
+    '& .Ad-root a::after': {
+      // Remove link arrow for ads
+      display: 'none',
+    },
+    '& a': {
+      // Style taken from the Link component
+      color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`,
+      fontWeight: theme.typography.fontWeightMedium,
+      textDecoration: 'underline',
+      textDecorationColor: alpha(lightTheme.palette.primary.main, 0.4),
+      '&:hover': {
+        textDecorationColor: 'inherit',
+      },
+    },
+    '& a code': {
+      color: darken(lightTheme.palette.primary.main, 0.2),
+    },
     '& h1, & h2, & h3, & h4': {
       display: 'flex',
       alignItems: 'center',
@@ -134,6 +171,8 @@ const Root = styled('div')(
       '& .title-link-to-anchor': {
         color: 'inherit',
         textDecoration: 'none',
+        boxShadow: 'none',
+        fontWeight: 'inherit',
         position: 'relative',
         display: 'flex',
         alignItems: 'center',
@@ -145,12 +184,6 @@ const Root = styled('div')(
         alignItems: 'center',
         visibility: 'hidden',
       },
-      '& a:not(.title-link-to-anchor):hover': {
-        color: 'currentColor',
-        border: 'none',
-        boxShadow: '0 1px 0 0 currentColor',
-        textDecoration: 'none',
-      },
       '& .anchor-icon, & .comment-link': {
         padding: 0,
         cursor: 'pointer',
@@ -409,46 +442,6 @@ const Root = styled('div')(
         },
       },
     },
-    '& a[target="_blank"]::after': {
-      content: '""',
-      maskImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' focusable='false' aria-hidden='true' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M6 6v2h8.59L5 17.59 6.41 19 16 9.41V18h2V6z'%3E%3C/path%3E%3C/svg%3E")`,
-      display: 'inline-flex',
-      width: '1em',
-      height: '1em',
-      color: 'inherit',
-      backgroundColor: 'currentColor',
-      transform: 'translate(0, 2px)',
-      transition: 'transform 0.3s cubic-bezier(0.1, 0.8, 0.3, 1)', // bounce effect
-      opacity: 0.8,
-    },
-    '& a[target="_blank"]:hover::after': {
-      opacity: 1,
-      transform: 'translate(1px, 0)',
-    },
-    '& a.remove-link-arrow::after': {
-      // Allows to remove link arrows for images
-      display: 'none',
-    },
-    '& .Ad-root a::after': {
-      // Remove link arrow for ads
-      display: 'none',
-    },
-    '& a:not(.title-link-to-anchor), & a:not(.title-link-to-anchor) code': {
-      // Style taken from the Link component
-      color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`,
-      fontWeight: theme.typography.fontWeightMedium,
-      textDecoration: 'underline',
-      textDecorationColor: alpha(lightTheme.palette.primary.main, 0.4),
-      '&:hover': {
-        textDecorationColor: 'inherit',
-      },
-    },
-    '& a code': {
-      color: darken(lightTheme.palette.primary.main, 0.04),
-    },
-    '& a:not(.title-link-to-anchor) code': {
-      color: darken(lightTheme.palette.primary.main, 0.2),
-    },
     '& img, & video': {
       // Use !important so that inline style on <img> or <video> can't win.
       // This avoid horizontal overflows on mobile.
@@ -676,24 +669,28 @@ const Root = styled('div')(
       '& hr': {
         backgroundColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`,
       },
-      '& h1, & h2, & h3, & h4, & h5': {
-        color: `var(--muidocs-palette-grey-50, ${darkTheme.palette.grey[50]})`,
+      '& a': {
+        color: `var(--muidocs-palette-primary-300, ${darkTheme.palette.primary[300]})`,
       },
-      '& p, & ul, & ol': {
-        color: `var(--muidocs-palette-grey-400, ${darkTheme.palette.grey[400]})`,
+      '& a code': {
+        color: `var(--muidocs-palette-primary-light, ${darkTheme.palette.primary.light})`,
       },
-      '& h1, & h2, & h3, & h4': {
-        '&:hover .anchor-icon, & .comment-link': {
+      '& h1, & h2, & h3, & h4, & h5': {
+        color: `var(--muidocs-palette-grey-50, ${darkTheme.palette.grey[50]})`,
+        '& .anchor-icon, & .comment-link': {
           color: `var(--muidocs-palette-primary-300, ${darkTheme.palette.primaryDark[300]})`,
           borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`,
           backgroundColor: alpha(darkTheme.palette.primaryDark[700], 0.5),
           '&:hover': {
+            color: `var(--muidocs-palette-primary-100, ${darkTheme.palette.primary[100]})`,
             borderColor: `var(--muidocs-palette-primary-900, ${darkTheme.palette.primary[900]})`,
             backgroundColor: alpha(darkTheme.palette.primary[900], 0.6),
-            color: `var(--muidocs-palette-primary-100, ${darkTheme.palette.primary[100]})`,
           },
         },
       },
+      '& p, & ul, & ol': {
+        color: `var(--muidocs-palette-grey-400, ${darkTheme.palette.grey[400]})`,
+      },
       '& h1 code, & h2 code, & h3 code': {
         color: `var(--muidocs-palette-grey-100, ${darkTheme.palette.grey[100]})`,
       },
@@ -785,12 +782,6 @@ const Root = styled('div')(
           },
         },
       },
-      '& a:not(.title-link-to-anchor), & a:not(.title-link-to-anchor) code': {
-        color: `var(--muidocs-palette-primary-300, ${darkTheme.palette.primary[300]})`,
-      },
-      '& a:not(.title-link-to-anchor) code': {
-        color: `var(--muidocs-palette-primary-light, ${darkTheme.palette.primary.light})`,
-      },
       '& kbd.key': {
         color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`,
         backgroundColor: `var(--muidocs-palette-primaryDark-800, ${darkTheme.palette.primaryDark[800]})`,