Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(MWPW-142267): Merch What's Included and Merch Mnemonic List (TwP) #4

Merged
merged 4 commits into from
Jul 9, 2024
Merged

feat(MWPW-142267): Merch What's Included and Merch Mnemonic List (TwP) #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
db56fa6
feat(MWPW-142267): Merch What's Included and Merch Mnemonic List (TwP)
Axelcureno Jul 8, 2024
18de7de
Merge branch 'main' into MWPW-142267
Axelcureno Jul 9, 2024
e630b73
fixed unit tests
Axelcureno Jul 9, 2024
daee970
fixed build.mjs
Axelcureno Jul 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions web-components/build.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
47 changes: 47 additions & 0 deletions web-components/src/merch-mnemonic-list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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`
<slot name="icon"></slot>
<slot name="description">${this.description}</slot>
`;
}
}

customElements.define('merch-mnemonic-list', MerchMnemonicList);
15 changes: 15 additions & 0 deletions web-components/src/merch-twp-d2p.css.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
20 changes: 20 additions & 0 deletions web-components/src/merch-twp-d2p.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} */
Expand Down Expand Up @@ -315,6 +316,7 @@ export class MerchTwpD2P extends LitElement {
? this.mobileLayout
: this.desktopLayout
}
<slot name="merch-whats-included"></slot>
</div>
`;
}
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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();
Expand Down Expand Up @@ -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) => {
Expand Down
100 changes: 100 additions & 0 deletions web-components/src/merch-whats-included.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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`<slot name="heading"></slot>
<slot name="content"></slot>
${this.isMobile && this.rows.length > this.mobileRows
? html`<div @click=${this.toggle} class="see-more">
${this.showAll ? '- See less' : '+ See more'}
</div>`
: html``}`;
}

get isMobile() {
return window.matchMedia('(max-width: 767px)').matches;
}

get rows() {
return this.querySelectorAll('merch-mnemonic-list');
}
}

customElements.define('merch-whats-included', MerchWhatsIncluded);
94 changes: 92 additions & 2 deletions web-components/test/merch-twp-d2p.test.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,96 @@
<sp-icon-close-circle size="l"></sp-icon-close-circle>
<merch-twp-d2p>
<h4 slot="detail-xl">Try the full version of Adobe apps with a 7-day free trial.</h4>
<a slot="cci-footer" href="#cci" tabindex="0">See all plans and pricing</a>
<a slot="cct-footer" href="#cct" tabindex="0">See all plans and pricing</a>
<a slot="cce-footer" href="#cce" tabindex="0">See all plans and pricing</a>
<div id="merch-whats-included" slot="merch-whats-included" class="merch-whats-included hidden">
<sp-icon-close-circle name="close-whats-included"size="l"></sp-icon-close-circle>
<h3>What’s included with Creative Cloud All Apps</h3>
<p>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.</p>
<merch-whats-included>
<h3 slot="heading">Apps</h3>
<div slot="content">
<merch-mnemonic-list>
<div slot="icon">
<merch-icon size="s" src="https://www.adobe.com/content/dam/shared/images/product-icons/svg/photoshop.svg" alt="Photoshop"></merch-icon>
</div>
<p slot="description"><strong>Photoshop</strong></p>
</merch-mnemonic-list>
<merch-mnemonic-list>
<div slot="icon">
<merch-icon size="s" src="https://www.adobe.com/content/dam/shared/images/product-icons/svg/illustrator.svg" alt="Illustrator"></merch-icon>
</div>
<p slot="description"><strong>Illustrator</strong></p>
</merch-mnemonic-list>
<merch-mnemonic-list>
<div slot="icon">
<merch-icon size="s" src="https://www.adobe.com/content/dam/shared/images/product-icons/svg/premiere.svg" alt="Premiere Pro"></merch-icon>
</div>
<p slot="description"><strong>Premiere Pro</strong></p>
</merch-mnemonic-list>
<merch-mnemonic-list>
<div slot="icon">
<merch-icon size="s" src="https://www.adobe.com/content/dam/shared/images/product-icons/svg/acrobat.svg" alt="Acrobat Pro"></merch-icon>
</div>
<p slot="description"><strong>Acrobat Pro</strong></p>
</merch-mnemonic-list>
<merch-mnemonic-list>
<div slot="icon">
<merch-icon size="s" src="https://www.adobe.com/content/dam/shared/images/product-icons/svg/cc-express.svg" alt="Adobe Express"></merch-icon>
</div>
<p slot="description"><strong>Adobe Express</strong></p>
</merch-mnemonic-list>
<merch-mnemonic-list>
<div slot="icon">
<merch-icon size="s" src="https://www.adobe.com/content/dam/shared/images/product-icons/svg/firefly.svg" alt="Adobe Firefly"></merch-icon>
</div>
<p slot="description"><strong>Firefly</strong></p>
</merch-mnemonic-list>
</div>
</merch-whats-included>
<merch-whats-included>
<h3 slot="heading">Membership perks</h3>
<div slot="content">
<merch-mnemonic-list>
<div slot="icon">
<merch-icon size="s" src="https://www.adobe.com/content/dam/shared/images/product-icons/svg/photoshop.svg" alt="Photoshop"></merch-icon>
</div>
<p slot="description"><strong>Adobe Fonts</strong></p>
</merch-mnemonic-list>
<merch-mnemonic-list>
<div slot="icon">
<merch-icon size="s" src="https://www.adobe.com/content/dam/shared/images/product-icons/svg/illustrator.svg" alt="Illustrator"></merch-icon>
</div>
<p slot="description"><strong>Adobe Color</strong></p>
</merch-mnemonic-list>
<merch-mnemonic-list>
<div slot="icon">
<merch-icon size="s" src="https://www.adobe.com/content/dam/shared/images/product-icons/svg/premiere.svg" alt="Premiere Pro"></merch-icon>
</div>
<p slot="description"><strong>Adobe Portfolio</strong></p>
</merch-mnemonic-list>
<merch-mnemonic-list>
<div slot="icon">
<merch-icon size="s" src="https://www.adobe.com/content/dam/shared/images/product-icons/svg/acrobat.svg" alt="Acrobat Pro"></merch-icon>
</div>
<p slot="description"><strong>Behance</strong></p>
</merch-mnemonic-list>
<merch-mnemonic-list>
<div slot="icon">
<merch-icon size="s" src="https://www.adobe.com/content/dam/shared/images/product-icons/svg/firefly.svg" alt="Adobe Firefly"></merch-icon>
</div>
<p slot="description"><strong>Creative Cloud libraries</strong></p>
</merch-mnemonic-list>
<merch-mnemonic-list>
<div slot="icon">
<merch-icon size="s" src="https://www.adobe.com/content/dam/shared/images/product-icons/svg/cc-express.svg" alt="Adobe Express"></merch-icon>
</div>
<p slot="description">x,xxx monthly <u><a href="https://adobe.com">generative credits</a></u></p>
</merch-mnemonic-list>
</div>
</merch-whats-included>
</div>
</merch-twp-d2p>
</sp-dialog-base>
</sp-theme>
Expand Down Expand Up @@ -165,7 +255,7 @@ <h5 slot="header">
credits</a></li>
</ul>
<p>
<a href="https://adobe.com/">See all included apps.</a>
<a class="whats-included-link" href="#merch-whats-included">See all included apps.</a>
</p>
</div>
<div slot="footer">
Expand Down Expand Up @@ -242,7 +332,7 @@ <h5 slot="header">
credits</a></li>
</ul>
<p>
<a href="https://adobe.com/">See all included apps.</a>
<a href="#merch-whats-included">See all included apps.</a>
</p>
</div>
<div slot="footer">
Expand Down
2 changes: 2 additions & 0 deletions web-components/test/merch-twp-d2p.test.html.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
Loading