Bug 1965944 - Visual updates for medium card UI. r=home-newtab-reviewers,nbarrett,npypchenko

Differential Revision: https://phabricator.services.mozilla.com/D249215

UltraBlame original commit: e38f01b20ab30a31a910a4a7e543f03707f0e017

Author: marco-c

browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/CardGrid.jsx

@@ -31,6 +31,7 @@ const PREF_BILLBOARD_ENABLED = "newtabAdSize.billboard";
 const PREF_LEADERBOARD_ENABLED = "newtabAdSize.leaderboard";
 const PREF_LEADERBOARD_POSITION = "newtabAdSize.leaderboard.position";
 const PREF_BILLBOARD_POSITION = "newtabAdSize.billboard.position";
+const PREF_REFINED_CARDS_ENABLED = "discoverystream.refinedCardsLayout.enabled";
 const INTERSECTION_RATIO = 0.5;
 const VISIBLE = "visible";
 const VISIBILITY_CHANGE_EVENT = "visibilitychange";
@@ -361,6 +362,8 @@ export class _CardGrid extends React.PureComponent {
     const listFeedSelectedFeed = prefs[PREF_LIST_FEED_SELECTED_FEED];
     const billboardEnabled = prefs[PREF_BILLBOARD_ENABLED];
     const leaderboardEnabled = prefs[PREF_LEADERBOARD_ENABLED];
+    const refinedCardsLayout = prefs[PREF_REFINED_CARDS_ENABLED];
+
     // filter out recs that should be in ListFeed
     const recs = this.props.data.recommendations
       .filter(item => !item.feedName)
@@ -395,8 +398,8 @@ export class _CardGrid extends React.PureComponent {
             features={rec.features}
             showTopics={showTopics}
             selectedTopics={selectedTopics}
+            excerpt={refinedCardsLayout && rec.excerpt}
             availableTopics={availableTopics}
-            excerpt={rec.excerpt}
             url={rec.url}
             id={rec.id}
             shim={rec.shim}

browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss

@@ -7,15 +7,20 @@
     border-radius: var(--border-radius-medium);
     box-shadow: $shadow-card;
 
-    .img-wrapper .img {
-      img,
-      .placeholder-image {
-        border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
-      }
+    img,
+    .placeholder-image {
+      border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
     }
   }
 }
 
+.ds-card.refined-cards:not(.placeholder) {
+  .img-wrapper .img {
+    height: 172px;
+    width: 100%;
+  }
+}
+
 .ds-onboarding-container {
   padding-inline-start: 16px;
   padding-inline-end: 16px;
@@ -121,14 +126,17 @@
   display: grid;
   grid-gap: 24px;
   position: relative;
-  // Bug 1926056: Row/column Gap spacing to allow for IAB fixed ad sizes
-  row-gap: 24px;
-  column-gap: 18px;
 
   &.ds-card-grid-compact {
     grid-gap: 20px;
   }
 
+  &.ad-sizing-variant-a,
+  &.ad-sizing-variant-b {
+    row-gap: 24px;
+    column-gap: 18px;
+  }
+
   &.ds-card-grid-recent-saves {
     .ds-card {
       // Hide the second row orphan on narrow screens.

browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardSections/CardSections.jsx

@@ -32,8 +32,9 @@ const PREF_BILLBOARD_ENABLED = "newtabAdSize.billboard";
 const PREF_LEADERBOARD_ENABLED = "newtabAdSize.leaderboard";
 const PREF_LEADERBOARD_POSITION = "newtabAdSize.leaderboard.position";
 const PREF_BILLBOARD_POSITION = "newtabAdSize.billboard.position";
+const PREF_REFINED_CARDS_ENABLED = "discoverystream.refinedCardsLayout.enabled";
 
-function getLayoutData(responsiveLayouts, index) {
+function getLayoutData(responsiveLayouts, index, refinedCardsLayout) {
   let layoutData = {
     classNames: [],
     imageSizes: {},
@@ -51,7 +52,15 @@ function getLayoutData(responsiveLayouts, index) {
         // The API tells us whether the tile should show the excerpt or not.
         // Apply extra styles accordingly.
         if (tile.hasExcerpt) {
-          layoutData.classNames.push(`col-${layout.columnCount}-show-excerpt`);
+          if (tile.size === "medium" && refinedCardsLayout) {
+            layoutData.classNames.push(
+              `col-${layout.columnCount}-hide-excerpt`
+            );
+          } else {
+            layoutData.classNames.push(
+              `col-${layout.columnCount}-show-excerpt`
+            );
+          }
         } else {
           layoutData.classNames.push(`col-${layout.columnCount}-hide-excerpt`);
         }
@@ -114,6 +123,7 @@ function CardSection({
   const mayHaveThumbsUpDown = prefs[PREF_THUMBS_UP_DOWN_ENABLED];
   const selectedTopics = prefs[PREF_TOPICS_SELECTED];
   const availableTopics = prefs[PREF_TOPICS_AVAILABLE];
+  const refinedCardsLayout = prefs[PREF_REFINED_CARDS_ENABLED];
 
   const { saveToPocketCard } = useSelector(state => state.DiscoveryStream);
   const mayHaveSectionsPersonalization =
@@ -260,7 +270,8 @@ function CardSection({
         {section.data.slice(0, maxTile).map((rec, index) => {
           const { classNames, imageSizes } = getLayoutData(
             responsiveLayouts,
-            index
+            index,
+            refinedCardsLayout
           );
 
           if (!rec || rec.placeholder) {

browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardSections/_CardSections.scss

@@ -5,6 +5,21 @@
   grid-column: span 1;
   padding: var(--space-large);
 
+  &.refined-cards.ds-card.sections-card-ui {
+    height: fit-content;
+  }
+
+  &.refined-cards {
+    .ds-card-link {
+      padding: var(--space-xsmall) var(--space-small);
+      flex-grow: 0;
+    }
+
+    .img-wrapper {
+      width: 110px;
+      height: 117px;
+    }
+  }
 
   &.ds-card.sections-card-ui {
     padding: unset;
@@ -21,7 +36,6 @@
     align-items: center;
     gap: var(--space-medium);
     padding: var(--space-large);
-
   }
 
   .img-wrapper {
@@ -77,7 +91,6 @@
   }
 }
 
-
 @mixin section-card-medium {
   grid-row: span 2;
   grid-column: span 1;
@@ -86,6 +99,23 @@
   align-items: initial;
   gap: initial;
 
+  &.refined-cards.ds-card.sections-card-ui {
+    height: unset;
+  }
+
+  // .refined-medium-card only appears if refinedCardsLayout.enabled pref is set to true
+  &.refined-cards {
+    .ds-card-link {
+      padding: unset;
+      flex-grow: unset;
+    }
+
+    .img-wrapper {
+      width: 100%;
+      height: 172px;
+    }
+  }
+
   .card-stp-button-position-wrapper {
     inset-inline-end: 10px;
   }
@@ -120,6 +150,8 @@
     padding: var(--space-medium) var(--space-large);
 
     .info-wrap {
+      flex-grow: initial;
+
       .title {
         -webkit-line-clamp: 3;
         margin-block: 0 var(--space-small);
@@ -131,6 +163,10 @@
         -webkit-line-clamp: 3;
       }
     }
+
+    .sections-card-footer {
+      margin-top: auto;
+    }
   }
 }
 
@@ -153,11 +189,14 @@
 
       .img-wrapper {
         width: 265px;
+        height: 100%;
       }
 
       .ds-image.img {
         // Square ratio
         aspect-ratio: 1/1;
+        width: 100%;
+        height: 100%;
 
         img {
           border-radius: var(--border-radius-medium);

browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/DSCard.jsx

@@ -208,6 +208,8 @@ export class _DSCard extends React.PureComponent {
     this.onMenuShow = this.onMenuShow.bind(this);
     this.onThumbsUpClick = this.onThumbsUpClick.bind(this);
     this.onThumbsDownClick = this.onThumbsDownClick.bind(this);
+    const refinedCardsLayout =
+      this.props.Prefs.values["discoverystream.refinedCardsLayout.enabled"];
 
     this.setContextMenuButtonHostRef = element => {
       this.contextMenuButtonHostElement = element;
@@ -284,7 +286,7 @@ export class _DSCard extends React.PureComponent {
       },
       medium: {
         width: 300,
-        height: 150,
+        height: refinedCardsLayout ? 172 : 150,
       },
       large: {
         width: 265,

browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss

@@ -87,12 +87,17 @@ $ds-card-image-gradient-solid: rgba(0, 0, 0, 100%);
     position: relative;
   }
 
+  &.refined-cards {
+    .card-stp-button-hover-background {
+      height: 172px;
+    }
+  }
+
   .card-stp-button-hover-background {
     opacity: 0;
     width: 100%;
     position: absolute;
     top: 0;
-    height: 0;
     transition: opacity;
     transition-duration: 0s;
     padding-block-start: 50%;