From 7c78c1abaff7d1e532673fe0598c43d3908f196f Mon Sep 17 00:00:00 2001 From: Axel Cureno Basurto Date: Thu, 20 Jun 2024 10:10:27 -0700 Subject: [PATCH] feat(MWPW-142267): Merch What's Included and Merch Mnemonic List (TwP) Introduces Merch What's Included and Merch Mnemonic List web components for TwP What's included screen. Resolves: MWPW-142267 Test link: https://mwpw-142267--milo--adobecom.hlx.page/drafts/axel/block-samples/twp/illustrator#twpmodal --- web-components/scripts/build.mjs | 27 +++- web-components/src/merch-mnemonic-list.js | 47 +++++++ web-components/src/merch-twp-d2p.css.js | 15 +++ web-components/src/merch-twp-d2p.js | 20 +++ web-components/src/merch-whats-included.js | 100 +++++++++++++++ web-components/test/merch-twp-d2p.test.html | 94 +++++++++++++- .../test/merch-twp-d2p.test.html.js | 2 + .../test/merch-whats-included.html.js | 37 ++++++ .../test/merch-whats-included.test.html | 117 ++++++++++++++++++ 9 files changed, 455 insertions(+), 4 deletions(-) create mode 100644 web-components/src/merch-mnemonic-list.js create mode 100644 web-components/src/merch-whats-included.js create mode 100644 web-components/test/merch-whats-included.html.js create mode 100644 web-components/test/merch-whats-included.test.html diff --git a/web-components/scripts/build.mjs b/web-components/scripts/build.mjs index ad5333db..a9552b19 100644 --- a/web-components/scripts/build.mjs +++ b/web-components/scripts/build.mjs @@ -6,10 +6,12 @@ import { execSync } from 'node:child_process'; const commitHash = execSync('git rev-parse HEAD').toString().trim(); const branch = execSync('git rev-parse --abbrev-ref HEAD').toString().trim(); -console.log(`you're building from branch ${branch} with commit ${commitHash}`); +console.log( + `Building from tacocat repository is DEPRECATED, please switch to the new 'mas' repository.` +); const banner = { - js: `// branch: ${branch} commit: ${commitHash} ${new Date().toUTCString()}`, + js: `Building from tacocat repository is DEPRECATED, please switch to the new 'mas' repository.`, }; async function buildLitComponent(name) { @@ -78,11 +80,32 @@ Promise.all([ plugins: [rewriteImports()], external: ['lit'], }), + build({ + entryPoints: ['./src/merch-whats-included.js'], + bundle: true, + banner, + outfile: './lib/merch-whats-included.js', + format: 'esm', + plugins: [rewriteImports()], + external: ['lit'], + }), + build({ + entryPoints: ['./src/merch-mnemonic-list.js'], + bundle: true, + banner, + outfile: './lib/merch-mnemonic-list.js', + format: 'esm', + plugins: [rewriteImports()], + external: ['lit'], + }), + buildLitComponent('merch-icon'), buildLitComponent('merch-quantity-select'), buildLitComponent('merch-secure-transaction'), buildLitComponent('merch-stock'), buildLitComponent('merch-subscription-panel'), buildLitComponent('merch-twp-d2p'), + buildLitComponent('merch-whats-included'), + buildLitComponent('merch-mnemonic-list'), ]).catch(() => process.exit(1)); function rewriteImports() { diff --git a/web-components/src/merch-mnemonic-list.js b/web-components/src/merch-mnemonic-list.js new file mode 100644 index 00000000..b2d66a4e --- /dev/null +++ b/web-components/src/merch-mnemonic-list.js @@ -0,0 +1,47 @@ +import { html, css, LitElement } from 'lit'; + +export class MerchMnemonicList extends LitElement { + static styles = css` + :host { + display: flex; + flex-direction: row; + gap: 10px; + margin-bottom: 10px; + align-items: flex-end; + } + + ::slotted([slot='icon']) { + display: flex; + justify-content: center; + align-items: center; + height: max-content; + } + + ::slotted([slot='description']) { + font-size: 14px; + line-height: 21px; + margin: 0; + } + + :host .hidden { + display: none; + } + `; + + static properties = { + description: { type: String, attribute: true }, + }; + + constructor() { + super(); + } + + render() { + return html` + + ${this.description} + `; + } +} + +customElements.define('merch-mnemonic-list', MerchMnemonicList); diff --git a/web-components/src/merch-twp-d2p.css.js b/web-components/src/merch-twp-d2p.css.js index 3fcc1ad3..6eb77ac9 100644 --- a/web-components/src/merch-twp-d2p.css.js +++ b/web-components/src/merch-twp-d2p.css.js @@ -34,10 +34,25 @@ export const styles = css` margin: 0; } + ::slotted([slot='merch-whats-included']) { + align-self: auto; + width: 100%; + position: absolute; + background: #fff; + height: 100%; + padding: 30px; + border-radius: 10px; + box-sizing: border-box; + } + ::slotted([slot$='-footer']) { flex-basis: 100%; } + ::slotted([slot='merch-whats-included'].hidden) { + display: none; + } + /* Mobile */ .mobile { diff --git a/web-components/src/merch-twp-d2p.js b/web-components/src/merch-twp-d2p.js index 3e65c604..8c896878 100644 --- a/web-components/src/merch-twp-d2p.js +++ b/web-components/src/merch-twp-d2p.js @@ -49,6 +49,7 @@ export class MerchTwpD2P extends LitElement { super(); this.step = 1; this.#handleOfferSelected = this.handleOfferSelected.bind(this); + this.handleWhatsIncludedClick = this.handleWhatsIncludedClick.bind(this); } /** @type {Commerce.Log.Instance} */ @@ -311,6 +312,7 @@ export class MerchTwpD2P extends LitElement { ? this.mobileLayout : this.desktopLayout } + `; } @@ -327,6 +329,10 @@ export class MerchTwpD2P extends LitElement { EVENT_MERCH_QUANTITY_SELECTOR_CHANGE, this.handleQuantityChange ); + this.whatsIncludedLink?.addEventListener( + 'click', + this.handleWhatsIncludedClick + ); this.addEventListener( EVENT_MERCH_STORAGE_CHANGE, this.handleStorageChange @@ -340,6 +346,7 @@ export class MerchTwpD2P extends LitElement { EVENT_OFFER_SELECTED, this.#handleOfferSelected ); + this.whatsIncludedLink?.removeEventListener('click', this.handleWhatsIncludedClick); this.removeEventListener( EVENT_MERCH_STORAGE_CHANGE, this.handleStorageChange @@ -357,6 +364,14 @@ export class MerchTwpD2P extends LitElement { this.requestUpdate(); } + get whatsIncludedLink() { + return this.querySelector('merch-card .merch-whats-included'); + } + + get whatsIncluded() { + return this.querySelector('[slot="merch-whats-included"]'); + } + setOfferSelectOnPanel(offerSelect) { offerSelect.setAttribute('variant', 'subscription-options'); this.subscriptionPanel.offerSelect?.remove(); @@ -424,6 +439,11 @@ export class MerchTwpD2P extends LitElement { this.setOfferSelectOnPanel(offerSelect); } + handleWhatsIncludedClick(event) { + event.preventDefault(); + this.whatsIncluded?.classList.toggle('hidden'); + } + async processCards() { const allCards = [...this.querySelectorAll('merch-card')]; allCards.forEach((card, i) => { diff --git a/web-components/src/merch-whats-included.js b/web-components/src/merch-whats-included.js new file mode 100644 index 00000000..c0ea4fb1 --- /dev/null +++ b/web-components/src/merch-whats-included.js @@ -0,0 +1,100 @@ +import { html, css, LitElement } from 'lit'; + +export class MerchWhatsIncluded extends LitElement { + static styles = css` + :host { + display: inline-grid; + place-items: end start; + grid-auto-flow: row; + width: auto; + overflow: hidden; + place-content: stretch start; + box-sizing: border-box; + align-self: baseline; + margin-top: 16px; + margin-bottom: 16px; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + grid-auto-rows: unset; + height: inherit; + } + + ::slotted([slot='heading']) { + grid-column: 1 / -1; + font-size: 18px; + margin: 0; + margin-bottom: 16px; + } + + ::slotted([slot='content']) { + display: contents; + } + + .hidden { + display: none; + } + + .see-more { + font-size: 14px; + text-decoration: underline; + color: var(--link-color-dark); + margin-top: 16px; + } + `; + + static properties = { + heading: { type: String, attribute: true }, + mobileRows: { type: Number, attribute: true }, + }; + + updated() { + this.hideSeeMoreEls(); + } + + hideSeeMoreEls() { + if (this.isMobile) { + this.rows.forEach((node, index) => { + if (index >= 5) { + node.style.display = this.showAll ? 'flex' : 'none'; + } + }); + } + } + + constructor() { + super(); + this.showAll = false; + this.mobileRows = this.mobileRows === undefined ? 5 : this.mobileRows; + } + + toggle() { + this.showAll = !this.showAll; + + this.dispatchEvent( + new CustomEvent('hide-see-more-elements', { + bubbles: true, + composed: true, + }) + ); + this.requestUpdate(); + } + + render() { + return html` + + ${this.isMobile && this.rows.length > this.mobileRows + ? html`
+ ${this.showAll ? '- See less' : '+ See more'} +
` + : html``}`; + } + + get isMobile() { + return window.matchMedia('(max-width: 767px)').matches; + } + + get rows() { + return this.querySelectorAll('merch-mnemonic-list'); + } +} + +customElements.define('merch-whats-included', MerchWhatsIncluded); diff --git a/web-components/test/merch-twp-d2p.test.html b/web-components/test/merch-twp-d2p.test.html index 5c8456e3..93d6d45e 100644 --- a/web-components/test/merch-twp-d2p.test.html +++ b/web-components/test/merch-twp-d2p.test.html @@ -91,6 +91,96 @@

Try the full version of Adobe apps with a 7-day free trial.

+ See all plans and pricing + See all plans and pricing + See all plans and pricing +
@@ -165,7 +255,7 @@
credits

- See all included apps. + See all included apps.

@@ -242,7 +332,7 @@
credits

- See all included apps. + See all included apps.

diff --git a/web-components/test/merch-twp-d2p.test.html.js b/web-components/test/merch-twp-d2p.test.html.js index ce4c8523..ce64d583 100644 --- a/web-components/test/merch-twp-d2p.test.html.js +++ b/web-components/test/merch-twp-d2p.test.html.js @@ -18,6 +18,8 @@ import '../src/merch-quantity-select.js'; import '../src/merch-stock.js'; import '../src/merch-secure-transaction.js'; import '../src/merch-subscription-panel.js'; +import '../src/merch-whats-included.js'; +import '../src/merch-mnemonic-list.js'; import '../src/merch-twp-d2p.js'; import './spectrum.js'; diff --git a/web-components/test/merch-whats-included.html.js b/web-components/test/merch-whats-included.html.js new file mode 100644 index 00000000..2b2694bf --- /dev/null +++ b/web-components/test/merch-whats-included.html.js @@ -0,0 +1,37 @@ +// @ts-nocheck +import { runTests } from '@web/test-runner-mocha'; +import { expect } from '@esm-bundle/chai'; + +import { mockLana } from '/test/mocks/lana.js'; +import { mockFetch } from '/test/mocks/fetch.js'; +import { mockConfig } from '/test/mocks/config.js'; + +import { init } from '@wcms/commerce'; + +import '../src/merch-icon.js'; +import '../src/merch-mnemonic-list.js'; +import '../src/merch-whats-included.js'; + +import { appendMiloStyles } from './utils.js'; +import { mockIms } from './mocks/ims.js'; + +const skipTests = sessionStorage.getItem('skipTests'); + +runTests(async () => { + mockIms(); + mockLana(); + await mockFetch(); + await init(mockConfig()); + if (skipTests !== null) { + appendMiloStyles(); + return; + } + describe('merch whats included web component', () => { + it('should exist in the HTML document', async () => { + expect(document.querySelector('merch-whats-included')).to.exist; + }); + it('should display merch mnemonic list', async () => { + expect(document.querySelector('merch-mnemonic-list')).to.exist; + }); + }); +}); diff --git a/web-components/test/merch-whats-included.test.html b/web-components/test/merch-whats-included.test.html new file mode 100644 index 00000000..58c1ad21 --- /dev/null +++ b/web-components/test/merch-whats-included.test.html @@ -0,0 +1,117 @@ + + + + + + Merch What's Included Web Component demo page + + + + + + +
+
+

What’s included with Creative Cloud All Apps

+

Get the apps and services you need for all kinds of creative work, from photography and graphic design to video, UI/UX, and social media.

+ +

Apps

+
+ +
+ +
+

Photoshop

+
+ +
+ +
+

Illustrator

+
+ +
+ +
+

Premiere Pro

+
+ +
+ +
+

Acrobat Pro

+
+ +
+ +
+

Adobe Express

+
+ +
+ +
+

Firefly

+
+
+
+ +

Membership perks

+
+ +
+ +
+

Adobe Fonts

+
+ +
+ +
+

Adobe Color

+
+ +
+ +
+

Adobe Portfolio

+
+ +
+ +
+

Behance

+
+ +
+ +
+

Creative Cloud libraries

+
+ +
+ +
+

x,xxx monthly generative credits

+
+
+
+
+
+ +