Merge pull request #1393 from CodeForAfrica/fix-helpline-images

fix: Make RowCard image objectFit configurable via parent

Author: koechkevin

apps/trustlab/src/components/Helplines/Helplines.js

@@ -30,6 +30,7 @@ const Helplines = forwardRef(function Helplines(
                   mb: 3,
                   borderTop: "1px solid",
                   borderRadius: 0,
+                  img: { objectFit: "contain" },
                 }}
                 {...brief}
                 image={brief.icon}

apps/trustlab/src/components/PlaybooksList/PlaybooksList.js

@@ -114,6 +114,7 @@ const PlaybooksList = forwardRef(function PlaybooksList(props, ref) {
                       borderTop: "1px solid #000",
                       borderRadius: 0,
                       py: 2,
+                      img: { objectFit: "cover" },
                     }}
                     actionLabel={cardActionLabel}
                     {...pb}

apps/trustlab/src/components/PlaybooksList/PlaybooksList.snap.js

@@ -21,13 +21,13 @@ exports[`<PlaybooksList /> renders initial playbooks using RowCard 1`] = `
             class="MuiGrid2-root MuiGrid2-direction-xs-row MuiGrid2-grid-xs-12 css-1j0u08r-MuiGrid2-root"
           >
             <a
-              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-1k85j6c-MuiTypography-root-MuiLink-root-MuiPaper-root-MuiCard-root"
+              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-w7o9cy-MuiTypography-root-MuiLink-root-MuiPaper-root-MuiCard-root"
               href="/playbooks/a"
               id="p1"
               style="--Paper-shadow: none;"
             >
               <div
-                class="MuiBox-root css-1htvg76"
+                class="MuiBox-root css-v98hkk"
               >
                 <img
                   alt="A"
@@ -75,13 +75,13 @@ exports[`<PlaybooksList /> renders initial playbooks using RowCard 1`] = `
             class="MuiGrid2-root MuiGrid2-direction-xs-row MuiGrid2-grid-xs-12 css-1j0u08r-MuiGrid2-root"
           >
             <a
-              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-1k85j6c-MuiTypography-root-MuiLink-root-MuiPaper-root-MuiCard-root"
+              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-w7o9cy-MuiTypography-root-MuiLink-root-MuiPaper-root-MuiCard-root"
               href="/playbooks/b"
               id="p2"
               style="--Paper-shadow: none;"
             >
               <div
-                class="MuiBox-root css-1htvg76"
+                class="MuiBox-root css-v98hkk"
               >
                 <img
                   alt="B"

apps/trustlab/src/components/RowCard/RowCard.js

@@ -61,7 +61,6 @@ const RowCard = forwardRef(function RowCard(props, ref) {
             width: { xs: "100%", sm: 280 },
             position: "relative",
             "& img": {
-              objectFit: "cover",
               height: { xs: 280, md: 220 },
               display: "block",
             },