feat(mwpw-140454): saving work

adobecom · May 8, 2024 · 62a461b · 62a461b
1 parent dddf7d7
commit 62a461b
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 33 deletions.
diff --git a/dist/app.css b/dist/app.css
diff --git a/dist/main.js b/dist/main.js
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/icon.less b/less/components/consonant/cards/icon.less
@@ -1,16 +1,53 @@
 .consonant-CardsGrid {
     .consonant-Card.icon-card {
         height: auto;
-        min-height: 222px;
 
         .consonant-Card-content {
             padding: 16px 16px 20px;
         }
 
-        .consonant-Card-row {
-            display: flex;
-            flex-direction: row;
-            margin-bottom: 16px;
+        .consonant-Card-header {
+            flex-grow: 1;
+            position: relative;
+            width: 100%;
+            padding: 16px 0 0 16px;
+            height: 64px;
+            max-height: 64px;
+            border-top-left-radius: 4px;
+            border-top-right-radius: 4px;
+            background-image: none !important;
+        }
+
+        .consonant-Card-logo {
+            display: block;
+            width: 48px;
+            height: 48px;
+            overflow: hidden;
+            background-size: cover;
+            background-position: center center;
+            border-radius: 4px;
+
+            .no-font;
+
+            img {
+                width: 48px;
+                height: 48px;
+                object-fit: cover;
+                user-select: none;
+            }
+        }
+
+        .consonant-Card-label {
+            display: none;
+            max-width: 100%;
+            margin-bottom: 4px;
+
+            .font(@color: @consonantGray800);
+
+            text-decoration: none;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
         }
 
         .consonant-Card-title {

diff --git a/react/src/js/components/Consonant/Cards/Card.jsx b/react/src/js/components/Consonant/Cards/Card.jsx
@@ -105,7 +105,8 @@ const Card = (props) => {
             backgroundImage: image,
             backgroundAltText: altText,
             mnemonic,
-            cardIcon,
+            icon: cardIcon,
+            iconAlt,
         },
         contentArea: {
             title,
@@ -265,7 +266,7 @@ const Card = (props) => {
     const isIcon = cardStyle === 'icon-card';
 
     // Card elements to show
-    const showHeader = !isProduct || !isIcon;
+    const showHeader = !isProduct;
     const showBadge = isOneHalf || isThreeFourths || isFull;
     const showLogo = isOneHalf || isThreeFourths || isFull || isText;
     const showLabel = !isProduct && !isText;
@@ -379,6 +380,21 @@ const Card = (props) => {
                         width="32" />
                 </div>
                 }
+                {isIcon &&
+                <div
+                    style={({
+                        backgroundColor: logoBg,
+                        borderColor: logoBorderBg,
+                    })}
+                    data-testid="consonant-Card-logo"
+                    className="consonant-Card-logo">
+                    <img
+                        src={cardIcon}
+                        alt={iconAlt}
+                        loading="lazy"
+                        width="32" />
+                </div>
+                }
             </div>
             }
             <div
@@ -409,7 +425,6 @@ const Card = (props) => {
                     className="consonant-Card-title"
                     title={title}>
                     {isProduct && mnemonic && <img src={mnemonic} alt="mnemonic" loading="lazy" />}
-                    {isIcon && cardIcon && <img src={cardIcon} alt="icon" loading="lazy" />}
                     {title}
                 </p>
                 {