fix: remove blue link color in hero description

Author: ChristiaanScheermeijer

packages/ui-react/src/components/CollapsibleText/__snapshots__/CollapsibleText.test.tsx.snap

@@ -11,7 +11,7 @@ exports[`<CollapsibleText> > renders and matches snapshot 1`] = `
       style="max-height: 60px;"
     >
       <span
-        class="_markdown_e219e2"
+        class="_markdown_e219e2 _inline_e219e2"
       >
         Test...
       </span>

packages/ui-react/src/components/Footer/Footer.module.scss

@@ -7,14 +7,6 @@
   letter-spacing: 0.15px;
   text-align: center;
   text-shadow: var(--body-text-shadow);
-
-  a,
-  a:visited,
-  a:active,
-  a:hover {
-    color: currentColor;
-    text-decoration: underline;
-  }
 }
 
 .list {

packages/ui-react/src/components/Footer/__snapshots__/Footer.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`<Footer> > renders and matches snapshot 1`] = `
     class="_footer_33bf66 _testFixMargin_33bf66"
   >
     <div
-      class="_markdown_e219e2"
+      class="_markdown_e219e2 _inline_e219e2"
     >
       Simple
     </div>
@@ -23,12 +23,12 @@ exports[`<Footer> > renders and matches snapshot with two links 1`] = `
       class="_list_33bf66"
     >
       <li
-        class="_markdown_e219e2"
+        class="_markdown_e219e2 _inline_e219e2"
       >
         Two links
       </li>
       <li
-        class="_markdown_e219e2"
+        class="_markdown_e219e2 _inline_e219e2"
       >
         <a
           href="https://www.jwplayer.com/"
@@ -39,7 +39,7 @@ exports[`<Footer> > renders and matches snapshot with two links 1`] = `
         </a>
       </li>
       <li
-        class="_markdown_e219e2"
+        class="_markdown_e219e2 _inline_e219e2"
       >
         <a
           href="https://www.jwplayer.com/"
@@ -63,12 +63,12 @@ exports[`<Footer> > renders and matches snapshot without links 1`] = `
       class="_list_33bf66"
     >
       <li
-        class="_markdown_e219e2"
+        class="_markdown_e219e2 _inline_e219e2"
       >
         Text one
       </li>
       <li
-        class="_markdown_e219e2"
+        class="_markdown_e219e2 _inline_e219e2"
       >
         Text two
       </li>

packages/ui-react/src/components/MarkdownComponent/MarkdownComponent.module.scss

@@ -64,9 +64,20 @@
     text-decoration: underline;
   }
 
+  a:hover {
+    opacity: 0.8;
+  }
+
   ul,
   ol,
   p {
     margin: 1.2em 0;
   }
 }
+
+.inline {
+  a,
+  a:visited {
+    color: currentColor;
+  }
+}

packages/ui-react/src/components/MarkdownComponent/MarkdownComponent.tsx

@@ -35,7 +35,10 @@ const MarkdownComponent: React.FC<Props> = ({ markdownString, className, tag = '
     return DOMPurify.sanitize(dirtyHTMLString, { ADD_ATTR: ['target'] });
   }, [inline, markdownString]);
 
-  return React.createElement(tag, { dangerouslySetInnerHTML: { __html: sanitizedHTMLString }, className: classNames(styles.markdown, className) });
+  return React.createElement(tag, {
+    dangerouslySetInnerHTML: { __html: sanitizedHTMLString },
+    className: classNames(styles.markdown, inline && styles.inline, className),
+  });
 };
 
 export default MarkdownComponent;

packages/ui-react/src/components/TruncatedText/__snapshots__/TruncatedText.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`<TruncatedText> > renders and matches snapshot 1`] = `
     style="max-height: calc(1.5em * 8); -webkit-line-clamp: 8;"
   >
     <div
-      class="_markdown_e219e2"
+      class="_markdown_e219e2 _inline_e219e2"
     >
       Test...
     </div>

packages/ui-react/src/components/VideoDetails/__snapshots__/VideoDetails.test.tsx.snap

@@ -50,7 +50,7 @@ exports[`<VideoDetails> > renders and matches snapshot 1`] = `
             style="max-height: calc(1.5em * 8); -webkit-line-clamp: 8;"
           >
             <div
-              class="_markdown_e219e2"
+              class="_markdown_e219e2 _inline_e219e2"
             >
               Video description
             </div>