MWPW-155065 PartnerCards fallback for invalid thumbnail images

- checks news card background image on first updated
- replace with a hardcoded default (needs configuration somewhere)
- changes the background color of the card header to prevent FOUC

eds/components/NewsCard.js

@@ -4,6 +4,9 @@ import { formatDate, getLibs } from '../scripts/utils.js';
 const miloLibs = getLibs();
 const { html, LitElement } = await import(`${miloLibs}/deps/lit-all.min.js`);
 
+// @todo - make this configurable somewhere.
+const DEFAULT_BACKGROUND_IMAGE_URL = 'https://solutionpartners.stage2.adobe.com/content/dam/solution/en/images/card-collection/sample_default.png';
+
 class NewsCard extends LitElement {
   static properties = { data: { type: Object } };
 
@@ -23,6 +26,22 @@ class NewsCard extends LitElement {
     return newUrl;
   }
 
+  checkBackgroundImage(element) {
+    const style = window.getComputedStyle(element);
+    const url = style.backgroundImage.slice(5, -2);
+    const img = new Image();
+
+    img.onerror = () => {
+      element.style.backgroundImage = `url(${DEFAULT_BACKGROUND_IMAGE_URL})`;
+    };
+
+    img.src = url;
+  }
+
+  firstUpdated() {
+    this.checkBackgroundImage(this.shadowRoot.querySelector('.card-header'));
+  }
+
   render() {
     return html`
       <div class="news-card">

eds/components/PartnerCardsStyles.js

@@ -922,7 +922,7 @@ export const newsCardStyles = css`
   .news-card .card-header {
     min-height: 192px;
     max-height: 192px;
-    background-color: #323232;
+    background-color: #f5f5F5;
     background-repeat: no-repeat;
     background-position: 50% 50%;
     background-size: cover;