webp support and styles

adobecom · Nov 15, 2023 · e2beb52 · e2beb52
1 parent bc4e248
commit e2beb52
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 13 deletions.
diff --git a/libs/blocks/merch-card/merch-card.css b/libs/blocks/merch-card/merch-card.css
@@ -13,14 +13,16 @@ div[data-removed-manifest-id] {
   display: none;
 }
 
-@media screen and (max-width: 899px) {
+/* mobile - content mixed with merch card */
+@media screen and (max-width: 599px) {
   div[class*="-merch-card"] > div,
   div[class*="-merch-cards"] > div {
     grid-column: span 1;
   }
 }
 
-@media screen and (min-width: 900px) {
+/* tablet - content mixed with merch card */
+@media screen and (min-width: 600px) and (max-width: 1024px) {
   div[class*="-merch-card"] > div,
   div[class*="-merch-cards"] > div {
     grid-column: span 2;

diff --git a/libs/blocks/merch-card/merch-card.js b/libs/blocks/merch-card/merch-card.js
@@ -158,8 +158,9 @@ const init = (el) => {
       merchCard.appendChild(footer);
     }
     if (image !== undefined) {
-      merchCard.setAttribute('image', image.querySelector('img').src);
-      image.remove();
+      const imageSlot = createTag('div', { slot: 'bg-image' });
+      imageSlot.appendChild(image);
+      merchCard.appendChild(imageSlot);
     }
     if (!icons || icons.length > 0) {
       const iconImgs = Array.from(icons).map((icon) => {

diff --git a/libs/deps/merch-card.js b/libs/deps/merch-card.js
@@ -1,4 +1,4 @@
-// Wed, 15 Nov 2023 18:19:14 GMT
+// Wed, 15 Nov 2023 19:43:48 GMT
 import{html as a,LitElement as C}from"./lit-all.min.js";import{css as S,unsafeCSS as b}from"./lit-all.min.js";var p="(max-width: 899px)",l="(min-width: 900px)",h="(min-width: 1200px)",x="(min-width: 1440px)";var f=S`
     :host {
         position: relative;
@@ -282,9 +282,6 @@ import{html as a,LitElement as C}from"./lit-all.min.js";import{css as S,unsafeCS
     --consonant-merch-card-body-font-size: 14px;
     --consonant-merch-card-body-line-height: 21px;
 
-    /* responsive width */
-    --consonant-merch-card-mobile-width: 300px;
-
     /* spacing */
     --consonant-merch-spacing-xxxs: 4px;
     --consonant-merch-spacing-xxs: 8px;
@@ -399,6 +396,9 @@ merch-cards > button:hover {
 }
 
 @media screen and ${p} {
+    :root {
+        --consonant-merch-card-mobile-width: 300px;
+    }
     .one-merch-card,
     .two-merch-cards,
     .three-merch-cards,
@@ -423,10 +423,6 @@ merch-cards > button:hover {
     .four-merch-cards {
         grid-template-columns: repeat(2, fit-content(100%));
     }
-
-    merch-card {
-        width: var(--consonant-merch-card-mobile-width);
-    }
 }
 
 /* desktop */
@@ -600,7 +596,7 @@ merch-card [slot="body-xl"] {
 
 merch-card[variant="catalog"] [slot="action-menu-content"] {
     background-color: #000;
-    color: #fff;
+    color: var(--color-white, #fff);
     font-size: var(--consonant-merch-card-body-xs-font-size);
     width: fit-content;
     padding: var(--consonant-merch-spacing-xs);
@@ -629,6 +625,10 @@ merch-card[variant="catalog"] [slot="action-menu-content"] ::marker {
     margin-right: 0;
 }
 
+merch-card[variant="catalog"] [slot="action-menu-content"] p {
+    color: var(--color-white, #fff);
+}
+
 merch-card[variant="catalog"] [slot="action-menu-content"] a {
     color: var(--consonant-merch-card-background-color);
     text-decoration: underline;