From 24db1f998e626d1604ed6d5c3a3de298d1ee0602 Mon Sep 17 00:00:00 2001
From: Aaron Moore <aaron.moore@bbc.co.uk>
Date: Thu, 16 Dec 2021 09:22:32 +0000
Subject: [PATCH] Conditional primary srcset

---
 .../src/__snapshots__/index.test.jsx.snap            | 12 ------------
 packages/components/psammead-image/src/index.jsx     |  6 +++---
 .../Placeholder/__snapshots__/index.test.jsx.snap    |  6 ------
 .../src/__snapshots__/index.test.jsx.snap            |  4 ----
 4 files changed, 3 insertions(+), 25 deletions(-)

diff --git a/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap
index efb8fc9312..02d4b4e86f 100644
--- a/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap
+++ b/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap
@@ -51,7 +51,6 @@ exports[`Image - imported as '{ Img }' should render image with custom dimension
   <picture
     class="emotion-0 emotion-1"
   >
-    <source />
     <img
       alt="By Elisa Decker, from her series \\"Sidewalk\\""
       class="emotion-2 emotion-3"
@@ -148,7 +147,6 @@ exports[`Image - imported as '{ Img }' should render landscape image correctly 1
   <picture
     class="emotion-0 emotion-1"
   >
-    <source />
     <img
       alt="Student sitting an exam"
       class="emotion-2 emotion-3"
@@ -177,7 +175,6 @@ exports[`Image - imported as '{ Img }' should render portrait image correctly 1`
   <picture
     class="emotion-0 emotion-1"
   >
-    <source />
     <img
       alt="Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17."
       class="emotion-2 emotion-3"
@@ -206,7 +203,6 @@ exports[`Image - imported as '{ Img }' should render square image correctly 1`]
   <picture
     class="emotion-0 emotion-1"
   >
-    <source />
     <img
       alt="Tracks through the snow"
       class="emotion-2 emotion-3"
@@ -270,7 +266,6 @@ exports[`Image - imported as default 'Image' should render image with custom dim
   <picture
     class="emotion-0 emotion-1"
   >
-    <source />
     <img
       alt="By Elisa Decker, from her series \\"Sidewalk\\""
       class="emotion-2 emotion-3"
@@ -367,7 +362,6 @@ exports[`Image - imported as default 'Image' should render landscape image corre
   <picture
     class="emotion-0 emotion-1"
   >
-    <source />
     <img
       alt="Student sitting an exam"
       class="emotion-2 emotion-3"
@@ -396,7 +390,6 @@ exports[`Image - imported as default 'Image' should render portrait image correc
   <picture
     class="emotion-0 emotion-1"
   >
-    <source />
     <img
       alt="Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17."
       class="emotion-2 emotion-3"
@@ -425,7 +418,6 @@ exports[`Image - imported as default 'Image' should render square image correctl
   <picture
     class="emotion-0 emotion-1"
   >
-    <source />
     <img
       alt="Tracks through the snow"
       class="emotion-2 emotion-3"
@@ -489,7 +481,6 @@ exports[`Image - with Fade-in effect' should render image with custom dimensions
   <picture
     class="emotion-0 emotion-1"
   >
-    <source />
     <img
       alt="By Elisa Decker, from her series \\"Sidewalk\\""
       class="emotion-2 emotion-3"
@@ -586,7 +577,6 @@ exports[`Image - with Fade-in effect' should render landscape image correctly 1`
   <picture
     class="emotion-0 emotion-1"
   >
-    <source />
     <img
       alt="Student sitting an exam"
       class="emotion-2 emotion-3"
@@ -615,7 +605,6 @@ exports[`Image - with Fade-in effect' should render portrait image correctly 1`]
   <picture
     class="emotion-0 emotion-1"
   >
-    <source />
     <img
       alt="Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17."
       class="emotion-2 emotion-3"
@@ -644,7 +633,6 @@ exports[`Image - with Fade-in effect' should render square image correctly 1`] =
   <picture
     class="emotion-0 emotion-1"
   >
-    <source />
     <img
       alt="Tracks through the snow"
       class="emotion-2 emotion-3"
diff --git a/packages/components/psammead-image/src/index.jsx b/packages/components/psammead-image/src/index.jsx
index 99d9f38332..a90d0cf3f1 100644
--- a/packages/components/psammead-image/src/index.jsx
+++ b/packages/components/psammead-image/src/index.jsx
@@ -45,7 +45,7 @@ export const Img = props => {
 
   return (
     <StyledPicture onLoad={onLoad}>
-      <source srcSet={srcset} type={primaryMimeType} />
+      {srcset && <source srcSet={srcset} type={primaryMimeType} />}
       {fallbackSrcset && (
         <source srcSet={fallbackSrcset} type={fallbackMimeType} />
       )}
@@ -74,8 +74,8 @@ Img.defaultProps = {
   sizes: null,
   srcset: null,
   fallbackSrcset: null,
-  primaryMimeType: null,
-  fallbackMimeType: null,
+  primaryMimeType: 'image/jpeg',
+  fallbackMimeType: 'image/jpeg',
   width: null,
   onLoad: () => {},
 };
diff --git a/packages/components/psammead-media-player/src/Placeholder/__snapshots__/index.test.jsx.snap b/packages/components/psammead-media-player/src/Placeholder/__snapshots__/index.test.jsx.snap
index 1dbd743101..a3204133f6 100644
--- a/packages/components/psammead-media-player/src/Placeholder/__snapshots__/index.test.jsx.snap
+++ b/packages/components/psammead-media-player/src/Placeholder/__snapshots__/index.test.jsx.snap
@@ -160,7 +160,6 @@ exports[`Media Player: Placeholder should render a video placeholder 1`] = `
     <picture
       class="emotion-17 emotion-18"
     >
-      <source />
       <img
         alt=""
         class="emotion-19 emotion-20"
@@ -363,7 +362,6 @@ exports[`Media Player: Placeholder should render a video placeholder with guidan
     <picture
       class="emotion-19 emotion-20"
     >
-      <source />
       <img
         alt=""
         class="emotion-21 emotion-22"
@@ -521,7 +519,6 @@ exports[`Media Player: Placeholder should render a video placeholder without dur
     <picture
       class="emotion-15 emotion-16"
     >
-      <source />
       <img
         alt=""
         class="emotion-17 emotion-18"
@@ -695,7 +692,6 @@ exports[`Media Player: Placeholder should render an audio placeholder 1`] = `
     <picture
       class="emotion-17 emotion-18"
     >
-      <source />
       <img
         alt=""
         class="emotion-19 emotion-20"
@@ -856,7 +852,6 @@ exports[`Media Player: Placeholder should render an audio placeholder without du
     <picture
       class="emotion-15 emotion-16"
     >
-      <source />
       <img
         alt=""
         class="emotion-17 emotion-18"
@@ -1076,7 +1071,6 @@ exports[`Media Player: Placeholder should render no-js styles when noJsClassName
     <picture
       class="emotion-19 emotion-20"
     >
-      <source />
       <img
         alt=""
         class="emotion-21 emotion-22"
diff --git a/packages/components/psammead-media-player/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-media-player/src/__snapshots__/index.test.jsx.snap
index 5514151048..5c72bc4140 100644
--- a/packages/components/psammead-media-player/src/__snapshots__/index.test.jsx.snap
+++ b/packages/components/psammead-media-player/src/__snapshots__/index.test.jsx.snap
@@ -287,7 +287,6 @@ exports[`Media Player: Canonical Entry renders a landscape container with a plac
       <picture
         class="emotion-19 emotion-20"
       >
-        <source />
         <img
           alt=""
           class="emotion-21 emotion-22"
@@ -501,7 +500,6 @@ exports[`Media Player: Canonical Entry renders a placeholder image with guidance
       <picture
         class="emotion-21 emotion-22"
       >
-        <source />
         <img
           alt=""
           class="emotion-23 emotion-24"
@@ -683,7 +681,6 @@ exports[`Media Player: Canonical Entry renders a portrait container with a place
       <picture
         class="emotion-19 emotion-20"
       >
-        <source />
         <img
           alt=""
           class="emotion-21 emotion-22"
@@ -990,7 +987,6 @@ exports[`Media Player: Canonical Entry renders with no-js styles when noJsClassN
       <picture
         class="emotion-21 emotion-22"
       >
-        <source />
         <img
           alt=""
           class="emotion-23 emotion-24"