Merge branch 'ost' of https://github.com/adobecom/mas into ost

* 'ost' of https://github.com/adobecom/mas:
  Update mas.js
  Revert "resolved conflicts"
  Update mas.js
  updated deps
  MWPW-153599: M@S Studio solution design (#36)
  moved delay method
  Update package-lock.json
  Mwpw-151480: move of commerce and web components to milo (#49)
  [MWPW-154335] [callout] Spacing issue encountered when the call-out section is added (#45)
  MWPW-153245 [merch] make shadow elements spit custom events (#42)
  MWPW-148229  Left Rail filter hover Text  (#43)
  Stop using code which resolves default display tax label value per country and segment (#27)
  Mwpw-147034: Custom border color + badge/border color decoupling [Mer… (#15)
  MWPW-154026: Long CTAs fall in the second line in merch card footer (#38)

# Conflicts:
#	libs/commerce.js
#	libs/mas.js

commerce/src/inline-price.js → archive/commerce/src/inline-price.js

@@ -222,11 +222,15 @@ export class HTMLPriceSpanElement extends HTMLSpanElement {
         );
         if (!options.wcsOsi.length) return false;
 
+        /*
+        Commented out until issues in content with manually added tax labels are resolved
+
         if (!this.placeholder.dataset.displayTax) {
             // set default value for displayTax if not set neither in OST nor in price URL
             options.displayTax =
                 (await this.resolveDisplayTax(service, options)) || false;
         }
+        */
 
         const version = this.placeholder.togglePending(options);
         this.innerHTML = '';

commerce/test/price.test.js → archive/commerce/test/price.test.js

@@ -288,6 +288,9 @@ describe('class "InlinePrice"', () => {
         });
     });
 
+    /*
+    Commented out until issues in content with manually added tax labels are resolved
+
     describe('default display tax', () => {
         const SEGMENTS = ['individual', 'business', 'student', 'university'];
         const TESTS = [
@@ -676,6 +679,7 @@ describe('class "InlinePrice"', () => {
             expect(inlinePrice.textContent).equal('US$89.99/mo');
         });
     });
+    */
 });
 
 describe('commerce service', () => {

web-components/build.mjs → archive/web-components/build.mjs

@@ -89,6 +89,7 @@ Promise.all([
         entryPoints: ['./src/sidenav/merch-sidenav.js'],
         bundle: true,
         banner,
+        minify: true,
         outfile: `${outfolder}/merch-sidenav.js`,
         format: 'esm',
         plugins: [rewriteImports()],

web-components/src/constants.js → archive/web-components/src/constants.js

@@ -29,6 +29,9 @@ export const EVENT_MERCH_OFFER_SELECT_READY = 'merch-offer-select:ready';
 /** Event to dispatch when a merch-card is ready */
 export const EVENT_MERCH_CARD_READY = 'merch-card:ready';
 
+export const EVENT_MERCH_CARD_ACTION_MENU_TOGGLE =
+    'merch-card:action-menu-toggle';
+
 export const EVENT_OFFER_SELECTED = 'merch-offer:selected';
 
 export const EVENT_MERCH_STOCK_CHANGE = 'merch-stock:change';
@@ -37,3 +40,12 @@ export const EVENT_MERCH_STORAGE_CHANGE = 'merch-storage:change';
 
 export const EVENT_MERCH_QUANTITY_SELECTOR_CHANGE =
     'merch-quantity-selector:change';
+
+export const EVENT_MERCH_SEARCH_CHANGE = 'merch-search:change';
+
+export const EVENT_MERCH_CARD_COLLECTION_SORT = 'merch-card-collection:sort';
+
+export const EVENT_MERCH_CARD_COLLECTION_SHOWMORE =
+    'merch-card-collection:showmore';
+
+export const EVENT_MERCH_SIDENAV_SELECT = 'merch-sidenav:select';

web-components/src/global.css.js → archive/web-components/src/global.css.js

@@ -141,6 +141,7 @@ styles.innerHTML = `
     --consonant-merch-card-callout-icon-right: 8px;
     --consonant-merch-card-callout-letter-spacing: 0px;
     --consonant-merch-card-callout-icon-padding: 34px;
+    --consonant-merch-card-callout-spacing-xxs: 8px;
 }
 
 merch-card-collection {
@@ -251,41 +252,48 @@ merch-card [slot='heading-xl'] {
     color: var(--merch-color-grey-80);
 }
 
-merch-card [slot='callout-text'] {
-    display: inline-block;
+merch-card [slot='callout-content'] {
+    display: flex;
+    flex-direction: column;
     margin: var(--consonant-merch-spacing-xxxs) 0px;
+    gap: var(--consonant-merch-card-callout-spacing-xxs);
 }
 
-merch-card [slot='callout-text'] > div {
-    position: relative;
-    display: inline-grid;
+merch-card [slot='callout-content'] > div {
+    display: flex;
+    flex-direction: column;
+    margin: var(--consonant-merch-spacing-xxxs) 0px;
+    gap: var(--consonant-merch-card-callout-spacing-xxs);
+    align-items: flex-start;
+}
+
+merch-card [slot='callout-content'] > div > div {
+    display: flex;
     background: rgba(203 203 203 / 50%);
     border-radius: var(--consonant-merch-spacing-xxxs);
     padding: var(--consonant-merch-spacing-xxxs) var(--consonant-merch-spacing-xxxs) var(--consonant-merch-spacing-xxxs) var(--consonant-merch-spacing-xxs);
 }
 
-merch-card [slot='callout-text'] > div.callout-content-wrapper-with-icon {
-    padding-right: var(--consonant-merch-card-callout-icon-padding);
-}
-
-merch-card [slot='callout-text'] > div > div {
+merch-card [slot='callout-content'] > div > div > div {
     display: inline-block;
     text-align: left;
     font: normal normal normal var(--consonant-merch-card-callout-font-size)/var(--consonant-merch-card-callout-line-height) Adobe Clean;
     letter-spacing: var(--consonant-merch-card-callout-letter-spacing);
     color: var(--consonant-merch-card-callout-font-color);
 }
 
-merch-card [slot='callout-text'] img {
-    position: absolute;
-    top: var(--consonant-merch-card-callout-icon-top);
-    right: var(--consonant-merch-card-callout-icon-right);
+merch-card [slot='callout-content'] img {
     width: var(--consonant-merch-card-callout-icon-size);
     height: var(--consonant-merch-card-callout-icon-size);
+    margin: 2.5px 0px 0px 9px;
+}
+
+merch-card[variant="mini-compare-chart"] [slot='callout-content'] {
+    padding: var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-s) 0px;
 }
 
-merch-card[variant="mini-compare-chart"] [slot="callout-text"] {
-    padding: 0px var(--consonant-merch-spacing-s);
+merch-card[variant="mini-compare-chart"] [slot='callout-content'] [is="inline-price"] {
+    min-height: unset;
 }
 
 merch-card [slot='detail-m'] {

web-components/src/merch-card-collection.js → archive/web-components/src/merch-card-collection.js

@@ -3,6 +3,10 @@ import { MatchMediaController } from '@spectrum-web-components/reactive-controll
 
 import { deeplink, pushState } from '@adobe/mas-commons';
 
+import {
+    EVENT_MERCH_CARD_COLLECTION_SORT,
+    EVENT_MERCH_CARD_COLLECTION_SHOWMORE,
+} from './constants.js';
 import { updateLiterals } from './literals.js';
 import { TABLET_DOWN } from './media.js';
 import { styles } from './merch-card-collection.css.js';
@@ -305,9 +309,25 @@ export class MerchCardCollection extends LitElement {
         } else {
             pushState({ sort: event.target.value });
         }
+
+        this.dispatchEvent(
+            new CustomEvent(EVENT_MERCH_CARD_COLLECTION_SORT, {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    value: event.target.value,
+                },
+            }),
+        );
     }
 
     async showMore() {
+        this.dispatchEvent(
+            new CustomEvent(EVENT_MERCH_CARD_COLLECTION_SHOWMORE, {
+                bubbles: true,
+                composed: true,
+            }),
+        );
         const page = this.page + 1;
         pushState({ page });
         this.page = page;

web-components/src/merch-card.css.js → archive/web-components/src/merch-card.css.js

@@ -208,7 +208,6 @@ export const styles = css`
         gap: var(--consonant-merch-spacing-xxs);
         align-items: center;
         flex: 1;
-        height: 100%;
         line-height: normal;
     }
 
@@ -372,6 +371,11 @@ export const styles = css`
     :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']) {

web-components/src/merch-card.js → archive/web-components/src/merch-card.js

@@ -14,6 +14,7 @@ import {
     EVENT_MERCH_OFFER_SELECT_READY,
     EVENT_MERCH_QUANTITY_SELECTOR_CHANGE,
     EVENT_MERCH_STORAGE_CHANGE,
+    EVENT_MERCH_CARD_ACTION_MENU_TOGGLE,
 } from './constants.js';
 import { getTextNodes } from './utils.js';
 
@@ -33,6 +34,7 @@ export class MerchCard extends LitElement {
         variant: { type: String, reflect: true },
         size: { type: String, attribute: 'size', reflect: true },
         badgeColor: { type: String, attribute: 'badge-color' },
+        borderColor: { type: String, attribute: 'border-color' },
         badgeBackgroundColor: {
             type: String,
             attribute: 'badge-background-color',
@@ -110,22 +112,35 @@ export class MerchCard extends LitElement {
 
     updated(changedProperties) {
         if (
-            changedProperties.has('badgeBackgroundColor') &&
-            this.variant !== 'twp'
+            changedProperties.has('badgeBackgroundColor') ||
+            changedProperties.has('borderColor')
         ) {
-            this.style.border = `1px solid ${this.badgeBackgroundColor}`;
+            this.style.border = this.computedBorderStyle;
         }
         this.updateComplete.then(async () => {
-            const prices = Array.from(
+            const allPrices = Array.from(
                 this.querySelectorAll('span[is="inline-price"][data-wcs-osi]'),
             );
+            // Filter out prices within the callout-content slot
+            const prices = allPrices.filter(
+                (price) => !price.closest('[slot="callout-content"]'),
+            );
             await Promise.all(prices.map((price) => price.onceSettled()));
             this.adjustTitleWidth();
             this.adjustMiniCompareBodySlots();
             this.adjustMiniCompareFooterRows();
         });
     }
 
+    get computedBorderStyle() {
+        if (this.variant !== 'twp') {
+            return `1px solid ${
+                this.borderColor ? this.borderColor : this.badgeBackgroundColor
+            }`;
+        }
+        return '';
+    }
+
     get evergreen() {
         return this.classList.contains('intro-pricing');
     }
@@ -250,6 +265,18 @@ export class MerchCard extends LitElement {
             'slot[name="action-menu-content"]',
         );
         if (!actionMenuContentSlot) return;
+        if (!retract) {
+            this.dispatchEvent(
+                new CustomEvent(EVENT_MERCH_CARD_ACTION_MENU_TOGGLE, {
+                    bubbles: true,
+                    composed: true,
+                    detail: {
+                        card: this.name,
+                        type: 'action-menu',
+                    },
+                }),
+            );
+        }
         actionMenuContentSlot.classList.toggle('hidden', retract);
     }
 
@@ -358,7 +385,7 @@ export class MerchCard extends LitElement {
                 <slot name="heading-xs"></slot>
                 <slot name="body-xxs"></slot>
                 <slot name="promo-text"></slot>
-                <slot name="callout-text"></slot>
+                <slot name="callout-content"></slot>
                 <slot name="body-xs"></slot>
             </div>
             <hr />
@@ -373,15 +400,14 @@ export class MerchCard extends LitElement {
                 <slot name="heading-m"></slot>
                 <slot name="body-xxs"></slot>
                 <slot name="promo-text"></slot>
-                <slot name="callout-text"></slot>            
-                <slot name="body-xs"></slot>    
+                <slot name="callout-content"></slot>
+                <slot name="body-xs"></slot>
                 ${this.stockCheckbox}
             </div>
             <slot name="quantity-select"></slot>
             ${this.secureLabelFooter}`;
     }
 
-
     get promoBottom() {
         return this.classList.contains('promo-bottom');
     }
@@ -408,9 +434,15 @@ export class MerchCard extends LitElement {
                 <slot name="heading-xs"></slot>
                 <slot name="heading-m"></slot>
                 <slot name="body-xxs"></slot>
-                ${!this.promoBottom ? html`<slot name="promo-text"></slot><slot name="callout-text"></slot>`: ''}
+                ${!this.promoBottom
+                    ? html`<slot name="promo-text"></slot
+                          ><slot name="callout-content"></slot>`
+                    : ''}
                 <slot name="body-xs"></slot>
-                ${this.promoBottom ? html`<slot name="promo-text"></slot><slot name="callout-text"></slot>`: ''}
+                ${this.promoBottom
+                    ? html`<slot name="promo-text"></slot
+                          ><slot name="callout-content"></slot>`
+                    : ''}
             </div>
             ${this.secureLabelFooter}`;
     }
@@ -458,7 +490,7 @@ export class MerchCard extends LitElement {
                 <slot name="heading-xs"></slot>
                 <slot name="body-xxs"></slot>
                 <slot name="promo-text"></slot>
-                <slot name="callout-text"></slot>
+                <slot name="callout-content"></slot>
                 <slot name="body-xs"></slot>
             </div>
             ${this.secureLabelFooter}`;
@@ -477,7 +509,7 @@ export class MerchCard extends LitElement {
             <slot name="price-commitment"></slot>
             <slot name="offers"></slot>
             <slot name="promo-text"></slot>
-            <slot name="callout-text"></slot>
+            <slot name="callout-content"></slot>
             ${this.miniCompareFooter}
             <slot name="footer-rows"><slot name="body-s"></slot></slot>`;
     }
@@ -682,6 +714,7 @@ export class MerchCard extends LitElement {
             'price-commitment',
             'offers',
             'promo-text',
+            'callout-content',
             'secure-transaction-label',
         ];