Merge branch 'main' into MWPW-142267

.gitignore

@@ -3,8 +3,10 @@ logs/*
 helix-importer-ui
 .DS_Store
 *.bak
+*.map
+libs/*.json
+libs/*.d.ts
 .idea
-lib
 coverage
 node_modules
 dist

commerce/README.md

@@ -18,7 +18,7 @@ Build process produces `lib` folder containing 3 files:
 - `commerce.js.map` - source map, needed for debugging of build code in browser,
 - `commerce.d.ts` - type definitions, enables intelligent suggestions in an IDE.
 
-During deployment, file `lib/commerce.js` should be copied to Milo's [deps](https://github.com/adobecom/milo/tree/main/libs/deps).
+During deployment, file `libs/commerce.js` should be copied to Milo's [deps](https://github.com/adobecom/milo/tree/main/libs/deps).
 
 To explore bundle contents, upload `stats.json` file to [esbuild analyzer](https://esbuild.github.io/analyze/).
 

commerce/build.mjs

@@ -20,7 +20,7 @@ const { metafile } = await build({
     format: 'esm',
     metafile: true,
     minify: true,
-    outfile: '../lib/commerce.js',
+    outfile: '../libs/commerce.js',
     platform: 'browser',
     sourcemap: true,
     target: ['es2020'],

commerce/package.json

@@ -13,7 +13,7 @@
     "scripts": {
         "build": "npm run build:bundle && npm run build:types",
         "build:bundle": "node ./build.mjs",
-        "build:types": "cp ./src/index.d.ts ../lib/commerce.d.ts",
+        "build:types": "cp ./src/index.d.ts ../libs/commerce.d.ts",
         "build:watch": "npm run build:bundle --watch",
         "test": "wtr --config ./web-test-runner.config.mjs --coverage --watch",
         "test:ci": "wtr --config ./web-test-runner.config.mjs"

commerce/tsconfig.json

@@ -6,7 +6,7 @@
     "rootDir": "./",
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
-    "outDir": "./lib",
+    "outDir": "../libs",
     "target": "esnext"
   },
   "include": ["**/*"],

eslint.config.mjs

@@ -1,15 +1,22 @@
 import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
 
 const config = {
-    ...eslintPluginPrettierRecommended,
+    rules: {
+        'prefer-const': 'error',
+        'no-var': 'error',
+        'prefer-template': 'warn',
+        'prefer-rest-params': 'warn',
+        'prefer-spread': 'warn',
+    },
     ignores: [
         '/node_modules/',
         '**/node_modules/**',
-        '/lib/',
-        '**/lib/**',
+        '/libs/',
+        '**/libs/**',
         '**/dist/**',
         'mas.js',
     ],
+    ...eslintPluginPrettierRecommended,
 };
 
 export default [config];

fstab.yaml

@@ -1,2 +1,2 @@
 mountpoints:
-  /: https://drive.google.com/drive/u/0/folders/1MGzOt7ubUh3gu7zhZIPb7R7dyRzG371j
+  /: https://adobe.sharepoint.com/:f:/r/sites/adobecom/Shared%20Documents/mas

libs/merch-card-collection.js

@@ -0,0 +1,147 @@
+// branch: MWPW-153962-3 commit: 73e67d72ac678797fbcc49debf86f24586e6db1a Tue, 09 Jul 2024 13:22:44 GMT
+import{html as a,LitElement as N}from"/libs/deps/lit-all.min.js";var m=class{constructor(e,t){this.key=Symbol("match-media-key"),this.matches=!1,this.host=e,this.host.addController(this),this.media=window.matchMedia(t),this.matches=this.media.matches,this.onChange=this.onChange.bind(this),e.addController(this)}hostConnected(){var e;(e=this.media)==null||e.addEventListener("change",this.onChange)}hostDisconnected(){var e;(e=this.media)==null||e.removeEventListener("change",this.onChange)}onChange(e){this.matches!==e.matches&&(this.matches=e.matches,this.host.requestUpdate(this.key,!this.matches))}};var g="hashchange";function w(r=window.location.hash){let e=[],t=r.replace(/^#/,"").split("&");for(let o of t){let[n,l=""]=o.split("=");n&&e.push([n,decodeURIComponent(l.replace(/\+/g," "))])}return Object.fromEntries(e)}function u(r){let e=new URLSearchParams(window.location.hash.slice(1));Object.entries(r).forEach(([n,l])=>{l?e.set(n,l):e.delete(n)}),e.sort();let t=e.toString();if(t===window.location.hash)return;let o=window.scrollY||document.documentElement.scrollTop;window.location.hash=t,window.scrollTo(0,o)}function E(r){let e=()=>{if(!window.location.hash.includes("="))return;let t=w(window.location.hash);r(t)};return e(),window.addEventListener(g,e),()=>{window.removeEventListener(g,e)}}var _=localStorage.getItem("masAccessToken"),P={Authorization:`Bearer ${_}`,pragma:"no-cache","cache-control":"no-cache"};var x=(r,e={})=>{r.querySelectorAll("span[data-placeholder]").forEach(t=>{let{placeholder:o}=t.dataset;t.innerText=e[o]??""})};var T="(max-width: 1199px)",y="(min-width: 768px)",b="(min-width: 1200px)";import{css as A,unsafeCSS as C}from"/libs/deps/lit-all.min.js";var S=A`
+    #header,
+    #resultText,
+    #footer {
+        grid-column: 1 / -1;
+        justify-self: stretch;
+        color: var(--merch-color-grey-80);
+    }
+
+    sp-theme {
+        display: contents;
+    }
+
+    #header {
+        order: -2;
+        display: grid;
+        justify-items: top;
+        grid-template-columns: auto max-content;
+        grid-template-rows: auto;
+        row-gap: var(--consonant-merch-spacing-m);
+        align-self: baseline;
+    }
+
+    #resultText {
+        min-height: 32px;
+    }
+
+    merch-search {
+        display: contents;
+    }
+
+    #searchBar {
+        grid-column: 1 / -1;
+        width: 100%;
+        max-width: 302px;
+    }
+
+    #filtersButton {
+        width: 92px;
+        margin-inline-end: var(--consonant-merch-spacing-xxs);
+    }
+
+    #sortButton {
+        justify-self: end;
+    }
+
+    sp-action-button {
+        align-self: baseline;
+    }
+
+    sp-menu sp-action-button {
+        min-width: 140px;
+    }
+
+    sp-menu {
+        min-width: 180px;
+    }
+
+    #footer {
+        order: 1000;
+    }
+
+    /* tablets */
+    @media screen and ${C(y)} {
+        #header {
+            grid-template-columns: 1fr fit-content(100%) fit-content(100%);
+        }
+
+        #searchBar {
+            grid-column: span 1;
+        }
+
+        #filtersButton {
+            grid-column: span 1;
+        }
+
+        #sortButton {
+            grid-column: span 1;
+        }
+    }
+
+    /* Laptop */
+    @media screen and ${C(b)} {
+        #resultText {
+            grid-column: span 2;
+            order: -3;
+        }
+
+        #header {
+            grid-column: 3 / -1;
+            display: flex;
+            justify-content: end;
+        }
+    }
+`;var p=(r,e)=>r.querySelector(`[slot="${e}"]`).textContent.trim();var R="merch-card-collection",i={alphabetical:"alphabetical",authored:"authored"},v={filters:["noResultText","resultText","resultsText"],mobile:["noSearchResultsMobileText","searchResultMobileText","searchResultsMobileText"],desktop:["noSearchResultsText","searchResultText","searchResultsText"]},M=(r,{filter:e})=>r.filter(t=>t.filters.hasOwnProperty(e)),$=(r,{types:e})=>e?(e=e.split(","),r.filter(t=>e.some(o=>t.types.includes(o)))):r,L=r=>r.sort((e,t)=>(e.title??"").localeCompare(t.title??"","en",{sensitivity:"base"})),k=(r,{filter:e})=>r.sort((t,o)=>o.filters[e]?.order==null||isNaN(o.filters[e]?.order)?-1:t.filters[e]?.order==null||isNaN(t.filters[e]?.order)?1:t.filters[e].order-o.filters[e].order),B=(r,{search:e})=>e?.length?(e=e.toLowerCase(),r.filter(t=>(t.title??"").toLowerCase().includes(e))):r,f=class extends N{static properties={filter:{type:String,attribute:"filter",reflect:!0},filtered:{type:String,attribute:"filtered"},search:{type:String,attribute:"search",reflect:!0},sort:{type:String,attribute:"sort",default:i.authored,reflect:!0},types:{type:String,attribute:"types",reflect:!0},limit:{type:Number,attribute:"limit"},page:{type:Number,attribute:"page",reflect:!0},singleApp:{type:String,attribute:"single-app",reflect:!0},hasMore:{type:Boolean},displayResult:{type:Boolean,attribute:"display-result"},resultCount:{type:Number},sidenav:{type:Object}};mobileAndTablet=new m(this,T);constructor(){super(),this.filter="all",this.hasMore=!1,this.resultCount=void 0,this.displayResult=!1}render(){return a`${this.header}
+            <slot></slot>
+            ${this.footer}`}updated(e){if(!this.querySelector("merch-card"))return;let t=window.scrollY||document.documentElement.scrollTop,o=[...this.children].filter(s=>s.tagName==="MERCH-CARD");if(o.length===0)return;e.has("singleApp")&&this.singleApp&&o.forEach(s=>{s.updateFilters(s.name===this.singleApp)});let n=this.sort===i.alphabetical?L:k,c=[M,$,B,n].reduce((s,h)=>h(s,this),o).map((s,h)=>[s,h]);if(this.resultCount=c.length,this.page&&this.limit){let s=this.page*this.limit;this.hasMore=c.length>s,c=c.filter(([,h])=>h<s)}let d=new Map(c);o.forEach(s=>{d.has(s)?(s.style.order=d.get(s),s.size=s.filters[this.filter]?.size,s.style.removeProperty("display"),s.requestUpdate()):(s.style.display="none",s.size=void 0,s.style.removeProperty("order"))}),window.scrollTo(0,t),this.updateComplete.then(()=>{let s=this.shadowRoot.getElementById("resultText")?.firstElementChild?.assignedElements?.()?.[0];s&&x(s,{resultCount:this.resultCount,searchTerm:this.search,filter:this.sidenav?.filters.selectedText})})}connectedCallback(){super.connectedCallback(),this.filtered?(this.filter=this.filtered,this.page=1):this.startDeeplink(),this.sidenav=document.querySelector("merch-sidenav")}disconnectedCallback(){super.disconnectedCallback(),this.stopDeeplink?.()}get header(){if(!this.filtered)return a`<div id="header">
+                <sp-theme theme="spectrum" color="light" scale="medium">
+                    ${this.searchBar} ${this.filtersButton} ${this.sortButton}
+                </sp-theme>
+            </div>
+            <div id="resultText">
+                ${this.displayResult?a`<slot name="${this.resultTextSlotName}"></slot>`:""}
+            </div>`}get footer(){if(!this.filtered)return a`<div id="footer">
+            <sp-theme theme="spectrum" color="light" scale="medium">
+                ${this.showMoreButton}
+            </sp-theme>
+        </div>`}get resultTextSlotName(){return v[this.search?this.mobileAndTablet.matches?"mobile":"desktop":"filters"][Math.min(this.resultCount,2)]}get showMoreButton(){if(this.hasMore)return a`<sp-button
+            variant="secondary"
+            treatment="outline"
+            style="order: 1000;"
+            @click="${this.showMore}"
+        >
+            <slot name="showMoreText"></slot>
+        </sp-button>`}get filtersButton(){return this.mobileAndTablet.matches?a`<sp-action-button
+                  id="filtersButton"
+                  variant="secondary"
+                  treatment="outline"
+                  @click="${this.openFilters}"
+                  ><slot name="filtersText"></slot
+              ></sp-action-button>`:""}get searchBar(){let e=p(this,"searchText");return this.mobileAndTablet.matches?a`<merch-search deeplink="search">
+                  <sp-search
+                      id="searchBar"
+                      @submit="${this.searchSubmit}"
+                      placeholder="${e}"
+                  ></sp-search>
+              </merch-search>`:""}get sortButton(){let e=p(this,"sortText"),t=p(this,"popularityText"),o=p(this,"alphabeticallyText");if(!(e&&t&&o))return;let n=this.sort===i.alphabetical;return a`
+            <sp-action-menu
+                id="sortButton"
+                size="m"
+                @change="${this.sortChanged}"
+                selects="single"
+                value="${n?i.alphabetical:i.authored}"
+            >
+                <span slot="label-only"
+                    >${e}:
+                    ${n?o:t}</span
+                >
+                <sp-menu-item value="${i.authored}"
+                    >${t}</sp-menu-item
+                >
+                <sp-menu-item value="${i.alphabetical}"
+                    >${o}</sp-menu-item
+                >
+            </sp-action-menu>
+        `}sortChanged(e){e.target.value===i.authored?u({sort:void 0}):u({sort:e.target.value})}async showMore(){let e=this.page+1;u({page:e}),this.page=e,await this.updateComplete}startDeeplink(){this.stopDeeplink=E(({category:e,filter:t,types:o,sort:n,search:l,single_app:c,page:d})=>{t=t||e,!this.filtered&&t&&t!==this.filter&&setTimeout(()=>{u({page:void 0}),this.page=1},1),this.filtered||(this.filter=t??this.filter),this.types=o??"",this.search=l??"",this.singleApp=c,this.sort=n,this.page=Number(d)||1})}openFilters(e){this.sidenav?.showModal(e)}static styles=[S]};f.SortOrder=i;customElements.define(R,f);export{f as MerchCardCollection};