diff --git a/web-components/build.mjs b/web-components/build.mjs index cb77c237..68fd51a0 100644 --- a/web-components/build.mjs +++ b/web-components/build.mjs @@ -92,11 +92,14 @@ Promise.all([ 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(rew) { 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 b0580702..d67f3839 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} */ @@ -315,6 +316,7 @@ export class MerchTwpD2P extends LitElement { ? this.mobileLayout : this.desktopLayout } + `; } @@ -331,6 +333,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, @@ -344,6 +350,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, @@ -361,6 +368,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(); @@ -446,6 +461,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 2f8d80e0..5a011e69 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 346feae8..7437d75c 100644 --- a/web-components/test/merch-twp-d2p.test.html.js +++ b/web-components/test/merch-twp-d2p.test.html.js @@ -15,6 +15,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..f1873d01 --- /dev/null +++ b/web-components/test/merch-whats-included.html.js @@ -0,0 +1,35 @@ +// @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 mas from './mocks/mas.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 mas(); + 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..f6fd0e64 --- /dev/null +++ b/web-components/test/merch-whats-included.test.html @@ -0,0 +1,93 @@ + + + + + + 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

+ +
+ +
+
+ +