Merge pull request #230 from adobecom/MWPW-163904

feat(mwpw-163904): news card style
adobecom · Feb 4, 2025 · 8fe42e4 · 8fe42e4
2 parents 5e6425a + 1649e57
commit 8fe42e4
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 12 deletions.
diff --git a/dist/app.css b/dist/app.css
diff --git a/dist/main.js b/dist/main.js
@@ -1,5 +1,5 @@
 /*!
- * Chimera UI Libraries - Build 0.28.4 (1/29/2025, 15:06:44)
+ * Chimera UI Libraries - Build 0.28.10 (2/4/2025, 10:33:32)
  *         
  */
 /******/ (function(modules) { // webpackBootstrap
@@ -47119,6 +47119,7 @@ var Card = function Card(props) {
     var isText = cardStyle === 'text-card';
     var isFull = cardStyle === 'full-card';
     var isIcon = cardStyle === 'icon-card';
+    var isNews = cardStyle === 'news-card';
 
     // Card elements to show
     var showHeader = !isProduct;
@@ -47127,8 +47128,8 @@ var Card = function Card(props) {
     var showLogo = isOneHalf || isThreeFourths || isFull || isText;
     var showLabel = !isProduct && !isText;
     var showVideoButton = !isProduct && !isText && !isIcon;
-    var showText = !isHalfHeight && !isFull;
-    var showFooter = isOneHalf || isProduct || isText;
+    var showText = !isHalfHeight && !isFull && !isNews;
+    var showFooter = isOneHalf || isProduct || isText || isNews;
     var showFooterLeft = !isProduct;
     var showFooterCenter = !isProduct && !altCta;
     var hideBanner = false;
@@ -47194,7 +47195,7 @@ var Card = function Card(props) {
                 style: { backgroundImage: 'url("' + image + '")' },
                 role: altText && 'img',
                 'aria-label': altText },
-            hasBanner && !disableBanners && !isIcon && _react2.default.createElement(
+            hasBanner && !disableBanners && !isIcon && !isNews && _react2.default.createElement(
                 'span',
                 {
                     'data-testid': 'consonant-Card-banner',

diff --git a/dist/main.min.js b/dist/main.min.js
diff --git a/dist/main.source.js b/dist/main.source.js
diff --git a/less/components/consonant/cards/news.less b/less/components/consonant/cards/news.less
@@ -0,0 +1,77 @@
+.consonant-CardsGrid {
+    .consonant-Card.news-card {
+        .card-hover;
+        .card-hover-header;
+
+        .consonant-Card-header {
+            position: relative;
+            width: 100%;
+            height: @consonant-OneHalfCard-imgHeigh;
+            background-color: @consonantGray300;
+            background-position: 50% 50%;
+            background-repeat: no-repeat;
+            background-size: cover;
+            border-top-left-radius: 4px;
+            border-top-right-radius: 4px;
+            overflow: hidden;
+        }
+    }
+
+    .consonant-Card-title {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        margin: 0 0 7px;
+
+        .line-clamp(6);
+
+        .font(1.125rem, 1.375rem, 700, @consonantGray900);
+
+        text-decoration: none;
+        word-break: break-word;
+        overflow: hidden;
+    }
+
+    .consonant-Card-label {
+        display: block;
+        max-width: 100%;
+        margin-bottom: 4px;
+
+        .font(@color: @consonantGray800);
+
+        text-decoration: none;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+
+    &--2up,
+    &--3up {
+        .consonant-Card.news-card {
+            min-height: @consonantCardHeight;
+        }
+    }
+
+    &--4up {
+        .consonant-Card.news-card {
+            height: auto;
+
+            .consonant-Card-header {
+                min-height: @consonant-CardsGrid-smallerCardImgOneHalfHeight;
+                max-height: @consonant-CardsGrid-smallerCardImgOneHalfHeight;
+            }
+
+            .consonant-Card-title {
+                .line-clamp(5);
+            }
+        }
+    }
+
+    &--4up,
+    &--5up {
+        .consonant-Card.news-card {
+            .consonant-Card-content {
+                padding: 16px 16px 20px;
+            }
+        }
+    }
+}
diff --git a/less/components/consonant/main.less b/less/components/consonant/main.less
@@ -38,6 +38,7 @@
 @import 'cards/product-card.less';
 @import 'cards/text.less';
 @import 'cards/icon.less';
+@import 'cards/news.less';
 @import 'cards/link-blocker/link-blocker.less';
 @import 'cards/card-footer/card-footer.less';
 

diff --git a/react/src/js/components/Consonant/Cards/Card.jsx b/react/src/js/components/Consonant/Cards/Card.jsx
@@ -282,6 +282,7 @@ const Card = (props) => {
     const isText = cardStyle === 'text-card';
     const isFull = cardStyle === 'full-card';
     const isIcon = cardStyle === 'icon-card';
+    const isNews = cardStyle === 'news-card';
 
     // Card elements to show
     const showHeader = !isProduct;
@@ -290,8 +291,8 @@ const Card = (props) => {
     const showLogo = isOneHalf || isThreeFourths || isFull || isText;
     const showLabel = !isProduct && !isText;
     const showVideoButton = !isProduct && !isText && !isIcon;
-    const showText = !isHalfHeight && !isFull;
-    const showFooter = isOneHalf || isProduct || isText;
+    const showText = !isHalfHeight && !isFull && !isNews;
+    const showFooter = isOneHalf || isProduct || isText || isNews;
     const showFooterLeft = !isProduct;
     const showFooterCenter = !isProduct && !altCta;
     let hideBanner = false;
@@ -366,7 +367,7 @@ const Card = (props) => {
                 style={{ backgroundImage: `url("${image}")` }}
                 role={altText && 'img'}
                 aria-label={altText}>
-                {hasBanner && !disableBanners && !isIcon &&
+                {hasBanner && !disableBanners && !isIcon && !isNews &&
                 <span
                     data-testid="consonant-Card-banner"
                     className="consonant-Card-banner"