MWPW-156612 fragment merch-card variant layouts

- move from merch-card.js code each layout code related to a given variant under variants/<variant> class
- move from global.css.js css related to a given variant under variants/<variant>.css.js
- move from merch-card.css.js wc css related to a given variant under variants/<variant>.variantStyle
- uses variants/variants as an index to get related class from related variant, and wc style too,
- uses variants/VariantLayout, superclass of all variants, to insert css if card is used, and hold common code

libs/features/mas/web-components/src/merch-card.css.js

@@ -3,8 +3,6 @@ import {
     DESKTOP_UP,
     LARGE_DESKTOP,
     TABLET_UP,
-    MOBILE_LANDSCAPE,
-    TABLET_DOWN,
 } from './media.js';
 
 export const styles = css`
@@ -26,26 +24,6 @@ export const styles = css`
         visibility: hidden;
     }
 
-    :host([variant='special-offers']) {
-        min-height: 439px;
-    }
-
-    :host([variant='catalog']) {
-        min-height: 330px;
-    }
-
-    :host([variant='plans']) {
-        min-height: 348px;
-    }
-
-    :host([variant='segment']) {
-        min-height: 214px;
-    }
-
-    :host([variant='ccd-action']:not([size])) {
-        width: var(--consonant-merch-card-ccd-action-width);
-    }
-
     :host([aria-selected]) {
         outline: none;
         box-sizing: border-box;
@@ -67,10 +45,6 @@ export const styles = css`
         background-image: var(--ellipsis-icon);
     }
 
-    :host([variant='mini-compare-chart']) > slot:not([name='icons']) {
-        display: block;
-    }
-
     .top-section {
         display: flex;
         justify-content: flex-start;
@@ -135,19 +109,6 @@ export const styles = css`
         border-radius: 0 5px 5px 0;
     }
 
-    .body .catalog-badge {
-        display: flex;
-        height: fit-content;
-        flex-direction: column;
-        width: fit-content;
-        max-width: 140px;
-        border-radius: 5px;
-        position: relative;
-        top: 0;
-        margin-left: var(--consonant-merch-spacing-xxs);
-        box-sizing: border-box;
-    }
-
     .detail-bg-container {
         right: 0;
         padding: var(--consonant-merch-spacing-xs);
@@ -251,128 +212,10 @@ export const styles = css`
         margin-top: 2px;
     }
 
-    .twp-badge {
-        padding: 4px 10px 5px 10px;
-    }
-
-    :host([aria-selected]) .twp-badge {
-        margin-inline-end: 2px;
-        padding-inline-end: 9px;
-    }
-
-    :host([variant='twp']) {
-        padding: 4px 10px 5px 10px;
-    }
-
     slot[name='icons'] {
         display: flex;
         gap: 8px;
     }
-
-    :host([variant='twp']) ::slotted(merch-offer-select) {
-        display: none;
-    }
-
-    :host([variant='twp']) .top-section {
-        flex: 0;
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-start;
-        height: 100%;
-        gap: var(--consonant-merch-spacing-xxs);
-        padding: var(--consonant-merch-spacing-xs)
-            var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-xs)
-            var(--consonant-merch-spacing-xs);
-        align-items: flex-start;
-    }
-
-    :host([variant='twp']) .body {
-        padding: 0 var(--consonant-merch-spacing-xs);
-    }
-
-    :host([variant='twp']) footer {
-        gap: var(--consonant-merch-spacing-xxs);
-        flex-direction: column;
-        align-self: flex-start;
-    }
-
-    :host([variant='special-offers'].center) {
-        text-align: center;
-    }
-
-    /* plans */
-    :host([variant='plans']) {
-        min-height: 348px;
-    }
-
-    :host([variant='mini-compare-chart']) footer {
-        min-height: var(--consonant-merch-card-mini-compare-footer-height);
-        padding: var(--consonant-merch-spacing-xs);
-    }
-
-    /* mini-compare card  */
-    :host([variant='mini-compare-chart']) .top-section {
-        padding-top: var(--consonant-merch-spacing-s);
-        padding-inline-start: var(--consonant-merch-spacing-s);
-        height: var(--consonant-merch-card-mini-compare-top-section-height);
-    }
-
-    @media screen and ${unsafeCSS(TABLET_DOWN)} {
-        [class*'-merch-cards'] :host([variant='mini-compare-chart']) footer {
-            flex-direction: column;
-            align-items: stretch;
-            text-align: center;
-        }
-    }
-
-    @media screen and ${unsafeCSS(DESKTOP_UP)} {
-        :host([variant='mini-compare-chart']) footer {
-            padding: var(--consonant-merch-spacing-xs)
-                var(--consonant-merch-spacing-s)
-                var(--consonant-merch-spacing-s)
-                var(--consonant-merch-spacing-s);
-        }
-    }
-
-    :host([variant='mini-compare-chart']) slot[name='footer-rows'] {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        justify-content: end;
-    }
-    /* mini-compare card heights for the slots: heading-m, body-m, heading-m-price, price-commitment, offers, promo-text, footer */
-    :host([variant='mini-compare-chart']) slot[name='heading-m'] {
-        min-height: var(--consonant-merch-card-mini-compare-heading-m-height);
-    }
-    :host([variant='mini-compare-chart']) slot[name='body-m'] {
-        min-height: var(--consonant-merch-card-mini-compare-body-m-height);
-    }
-    :host([variant='mini-compare-chart']) slot[name='heading-m-price'] {
-        min-height: var(
-            --consonant-merch-card-mini-compare-heading-m-price-height
-        );
-    }
-    :host([variant='mini-compare-chart']) slot[name='price-commitment'] {
-        min-height: var(
-            --consonant-merch-card-mini-compare-price-commitment-height
-        );
-    }
-    :host([variant='mini-compare-chart']) slot[name='offers'] {
-        min-height: var(--consonant-merch-card-mini-compare-offers-height);
-    }
-    :host([variant='mini-compare-chart']) slot[name='promo-text'] {
-        min-height: var(--consonant-merch-card-mini-compare-promo-text-height);
-    }
-    :host([variant='mini-compare-chart']) slot[name='callout-content'] {
-        min-height: var(
-            --consonant-merch-card-mini-compare-callout-content-height
-        );
-    }
-
-    :host([variant='plans']) ::slotted([slot='heading-xs']),
-    :host([variant='segment']) ::slotted([slot='heading-xs']) {
-        max-width: var(--consonant-merch-card-heading-xs-max-width, 100%);
-    }
 `;
 
 export const sizeStyles = () => {