[docs-infra] Remove dangerouslySetInnerHTML for ad description (#46936)

Author: Janpot

packages/mui-docs/src/Ad/Ad.tsx

@@ -40,29 +40,30 @@ const inHouseAds = [
     name: 'templates',
     link: 'https://mui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=in-house-templates',
     img: '/static/ads-in-house/themes-2.jpg',
-    description:
-      '<b>Premium Templates</b>. Start your project with the best templates for admins, dashboards, and more.',
+    descriptionHeader: 'Premium Templates',
+    description: 'Start your project with the best templates for admins, dashboards, and more.',
   },
   {
     name: 'themes',
     link: 'https://mui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=in-house-themes',
     img: '/static/ads-in-house/themes.png',
-    description:
-      '<b>Premium Themes</b>. Kickstart your application development with a ready-made theme.',
+    descriptionHeader: 'Premium Themes',
+    description: 'Kickstart your application development with a ready-made theme.',
   },
   {
     name: 'tidelift',
     link: 'https://tidelift.com/?utm_source=npm-material-ui&utm_medium=referral&utm_campaign=enterprise&utm_content=ad',
     img: '/static/ads-in-house/tidelift.png',
-    description:
-      '<b>MUI for enterprise</b>. Save time and reduce risk. Managed open source — backed by maintainers.',
+    descriptionHeader: 'MUI for enterprise',
+    description: 'Save time and reduce risk. Managed open source — backed by maintainers.',
   },
   {
     name: 'figma',
     link: 'https://mui.com/store/items/figma-react/?utm_source=docs&utm_medium=referral&utm_campaign=in-house-figma',
     img: '/static/ads-in-house/figma.png',
+    descriptionHeader: 'For Figma',
     description:
-      '<b>For Figma</b>. A large UI kit with over 600 handcrafted Material UI, MUI X, Joy UI components 🎨.',
+      'A large UI kit with over 600 handcrafted Material UI, MUI X, Joy UI components 🎨.',
   },
 ];
 

packages/mui-docs/src/Ad/AdCarbon.tsx

@@ -136,7 +136,8 @@ export function AdCarbonInline() {
           link: ad.statlink,
           img: ad.image,
           name: ad.company,
-          description: `<strong>${ad.company}</strong> - ${ad.description}`,
+          descriptionHeader: ad.company,
+          description: ad.description,
           poweredby: 'Carbon',
           label: 'carbon-demo-inline',
         }}

packages/mui-docs/src/Ad/AdDisplay.tsx

@@ -33,6 +33,7 @@ export interface AdParameters {
   name: string;
   link: string;
   img?: string;
+  descriptionHeader: string;
   description: string;
   poweredby: string;
   label: string;
@@ -65,7 +66,6 @@ export default function AdDisplay(props: AdDisplayProps) {
 
   const Root = shape === 'image' ? ImageShape : InlineShape;
 
-  /* eslint-disable react/no-danger */
   return (
     <Root className={className}>
       <a
@@ -83,15 +83,13 @@ export default function AdDisplay(props: AdDisplayProps) {
         <span className="AdDisplay-imageWrapper">
           <img height="100" width="130" src={ad.img} alt={ad.name} />
         </span>
-        <span
-          className="AdDisplay-description"
-          dangerouslySetInnerHTML={{ __html: ad.description }}
-        />
+        <span className="AdDisplay-description">
+          <strong>{ad.descriptionHeader}</strong> - {ad.description}
+        </span>
       </a>
       <span className="AdDisplay-poweredby">
         {t('adPublisher').replace('{{publisher}}', ad.poweredby)}
       </span>
     </Root>
   );
-  /* eslint-enable react/no-danger */
 }