From 4717992f4e2933c269871ab41c06fc5a091db443 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 23 Jun 2024 23:04:57 +0200 Subject: [PATCH 1/2] [docs-infra] Fix visual look of in-house ad --- docs/src/modules/components/Ad.js | 2 +- docs/src/modules/components/AdDisplay.js | 8 +- .../src/MarkdownElement/MarkdownElement.tsx | 89 +++++++++---------- 3 files changed, 48 insertions(+), 51 deletions(-) diff --git a/docs/src/modules/components/Ad.js b/docs/src/modules/components/Ad.js index 40d16785476bb4..42a5ba21e9bf72 100644 --- a/docs/src/modules/components/Ad.js +++ b/docs/src/modules/components/Ad.js @@ -25,7 +25,7 @@ function PleaseDisableAdblock(props) { {t('adblock')} - + {t('thanks')}{' '} ❤️ diff --git a/docs/src/modules/components/AdDisplay.js b/docs/src/modules/components/AdDisplay.js index 08af4e6afb733c..3b67cec3e5e529 100644 --- 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 ( diff --git a/packages/mui-docs/src/MarkdownElement/MarkdownElement.tsx b/packages/mui-docs/src/MarkdownElement/MarkdownElement.tsx index 2c5c4dce602253..08ea21cb386d86 100644 --- 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 or