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

[MWPW-147172] Support for callout texts in merch cards #7

Merged
merged 26 commits into from
Jul 10, 2024
Merged

[MWPW-147172] Support for callout texts in merch cards #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
0e2445f
added support for callout texts along with the css for segment
Jun 20, 2024
7a1f52b
done the changes for other cards too
Jun 21, 2024
9e94906
using slot instead of class for callout
Jun 24, 2024
9805107
added callout text for all merch card types
Jun 25, 2024
977b9f9
test file changes for all other card types
Jun 25, 2024
eebe4ff
combined callout paragraphs into one slot
Jun 25, 2024
95c050e
mini compare merch card fixed as well
Jun 25, 2024
a48cba2
minor
Jun 27, 2024
b0d355d
final changes
Jun 28, 2024
8616d25
Merge branch 'main' into rosahu/MWPW-147172
rohitsahu Jun 28, 2024
69f0e9f
minor clean up
Jun 28, 2024
e7d80cd
few css fixes
Jun 28, 2024
43c3065
fix callout position
Jun 28, 2024
24cc1dc
variables as constants
Jun 28, 2024
1def577
Merge branch 'main' into rosahu/MWPW-147172
Jun 28, 2024
486c230
css fixes and callout positioning for catalog and mini compare
Jun 28, 2024
9a187c6
fred feedback incororated
Jul 2, 2024
f673ae3
callout text always below promot text
Jul 2, 2024
b41c6b1
Merge branch 'main' into rosahu/MWPW-147172
Jul 9, 2024
c920152
UT fix
Jul 9, 2024
b9dcaa2
fix extra whitespace on right
Jul 9, 2024
4c82308
review comments
Jul 9, 2024
4cfe6f5
review comments
Jul 9, 2024
1ab7262
Merge branch 'main' into rosahu/MWPW-147172
yesil Jul 10, 2024
79351a6
mini merch css fix
Jul 10, 2024
fabe939
Merge branch 'rosahu/MWPW-147172' of https://github.com/adobecom/mas …
Jul 10, 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
46 changes: 46 additions & 0 deletions web-components/src/global.css.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,15 @@ styles.innerHTML = `

--ellipsis-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><circle cx="2" cy="2" r="2" fill="%232c2c2c" transform="translate(6 6)"/><circle cx="2" cy="2" r="2" fill="%232c2c2c" data-name="Ellipse 71" transform="translate(12 6)"/><circle cx="2" cy="2" r="2" fill="%232c2c2c" transform="translate(0 6)"/></svg>');

/* callout */
--consonant-merch-card-callout-line-height: 21px;
--consonant-merch-card-callout-font-size: 14px;
--consonant-merch-card-callout-font-color: #2C2C2C;
--consonant-merch-card-callout-icon-size: 16px;
--consonant-merch-card-callout-icon-top: 6px;
--consonant-merch-card-callout-icon-right: 8px;
--consonant-merch-card-callout-letter-spacing: 0px;
--consonant-merch-card-callout-icon-padding: 34px;
}

merch-card-collection {
Expand Down Expand Up @@ -242,6 +251,43 @@ merch-card [slot='heading-xl'] {
color: var(--merch-color-grey-80);
}

merch-card [slot='callout-text'] {
display: inline-block;
margin: var(--consonant-merch-spacing-xxxs) 0px;
}

merch-card [slot='callout-text'] > div {
position: relative;
display: inline-grid;
background: rgba(203 203 203 / 50%);
Axelcureno marked this conversation as resolved.
Show resolved Hide resolved
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 {
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);
width: var(--consonant-merch-card-callout-icon-size);
height: var(--consonant-merch-card-callout-icon-size);
}

merch-card[variant="mini-compare-chart"] [slot="callout-text"] {
padding: 0px var(--consonant-merch-spacing-s);
}

merch-card [slot='detail-m'] {
font-size: var(--consonant-merch-card-detail-m-font-size);
letter-spacing: var(--consonant-merch-card-detail-m-letter-spacing);
Expand Down
10 changes: 7 additions & 3 deletions web-components/src/merch-card.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -358,6 +358,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="body-xs"></slot>
</div>
<hr />
Expand All @@ -372,7 +373,8 @@ export class MerchCard extends LitElement {
<slot name="heading-m"></slot>
<slot name="body-xxs"></slot>
<slot name="promo-text"></slot>
<slot name="body-xs"></slot>
<slot name="callout-text"></slot>
<slot name="body-xs"></slot>
${this.stockCheckbox}
</div>
<slot name="quantity-select"></slot>
Expand Down Expand Up @@ -406,9 +408,9 @@ 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>`: ''}
${!this.promoBottom ? html`<slot name="promo-text"></slot><slot name="callout-text"></slot>`: ''}
<slot name="body-xs"></slot>
${this.promoBottom ? html`<slot name="promo-text"></slot>`: ''}
${this.promoBottom ? html`<slot name="promo-text"></slot><slot name="callout-text"></slot>`: ''}
</div>
${this.secureLabelFooter}`;
}
Expand Down Expand Up @@ -456,6 +458,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="body-xs"></slot>
</div>
${this.secureLabelFooter}`;
Expand All @@ -474,6 +477,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>
${this.miniCompareFooter}
<slot name="footer-rows"><slot name="body-s"></slot></slot>`;
}
Expand Down
11 changes: 11 additions & 0 deletions web-components/test/img/info-icon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
156 changes: 156 additions & 0 deletions web-components/test/merch-card.mini-compare.test.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -407,6 +407,162 @@ <h5 id="price---abm---creative-cloud-all-apps-with-4tb" slot="heading-m-price"><
</div>
</merch-card>
</div>
<div class="two-merch-cards mini-compare-chart">
<merch-card class="merch-card mini-compare-chart" variant="mini-compare-chart"
badge-background-color="#EDCC2D" badge-color="#000000" badge-text="Most popular" filters="all" types=""
tabindex="0" style="border: 1px solid rgb(237, 204, 45);">

<p slot="promo-text" class="promo-text">This is promo text <a href="https://adobe.com/"
target="_blank">with a
link</a></p>
<div slot="body-m">
<p></p>
<p>Get Illustrator on desktop and iPad as part of Creative Cloud.</p>
</div>
<p slot="price-commitment" class="price-commitment"></p>
<h3 id="creative-cloud-all-apps" slot="heading-m">Creative Cloud All Apps
</h3>
<h4 id="this-is-promo-text-with-a-link" slot="detail-m">This is promo text <a href="https://adobe.com/"
target="_blank">with a link</a></h4>
<div slot="callout-text">
<div class="callout-content-wrapper-with-icon">
<div>AI Assistant add-on available </div>
<img src="./img/info-icon.svg" title="this is a dummy tooltip text" class="callout-icon"/>
</div>
</div>
<div slot="callout-text">
<div>
<div>
For a limited time pay
when you add AI assistant to Acrobat Reader, Standard, or Pro. Ends 6/4.<a href="https://www.adobe.com/creativecloud/all-apps.html" daa-ll="Learn More-1--H4 Subtext H5 Promo Text" target="_blank">Learn More</a> </div>
</div>
</div>
<h5 id="price---abm---creative-cloud-all-apps-with-4tb" slot="heading-m-price"><span is="inline-price"
data-display-old-price="true" data-display-per-unit="false" data-display-recurrence="true"
data-display-tax="false" data-force-tax-exclusive="false" data-quantity="1"
data-template="price" data-wcs-osi="abm"></span></h5>
<p class="action-area" slot="footer">
<a href="https://business.adobe.com/" class="con-button outline button-l" target="_blank">free
trial</a>
<a href="https://business.adobe.com/" class="con-button blue button-l" target="_blank">Buy now</a>
</p>
<div slot="offers">
<merch-quantity-select title="Select a quantity:" min="1" max="10" step="1"
default-value="undefined" max-input="undefined" closed=""></merch-quantity-select>
</div>
<div slot="footer-rows">
<div class="footer-row-cell">
<picture class="footer-row-icon"><img loading="lazy" src="../test/img/cc-logo.png"
alt="Creative Cloud"></picture>
<div class="footer-row-cell-description">Illustrator on desktop, web, and iPad</div>
</div>
<div class="footer-row-cell">
<picture class="footer-row-icon"><img loading="lazy" src="../test/img/cc-logo.png"
alt="Creative Cloud"></picture>
<div class="footer-row-cell-description">Access to 20+ apps including Photoshop, Illustrator
Premiere Pro, After Effects, InDesign, Lightroom, and more</div>
</div>
<div class="footer-row-cell">
<picture class="footer-row-icon"><img loading="lazy" src="../test/img/cc-logo.png"
alt="Creative Cloud"></picture>
<div class="footer-row-cell-description">
<p>Business features like admin tools, dedicated 24x7</p>
<p>support, and 1TB of cloud storage</p>
</div>
</div>
<div class="footer-row-cell">
<picture class="footer-row-icon"><img loading="lazy" src="../test/img/cc-logo.png"
alt="Creative Cloud"></picture>
<div class="footer-row-cell-description">Adobe Express, Adobe Fresco, Adobe Portfolio, and Adobe
Fonts</div>
</div>
<div class="footer-row-cell">
<picture class="footer-row-icon"><img loading="lazy" src="../test/img/cc-logo.png"
alt="Creative Cloud"></picture>
<div class="footer-row-cell-description">1,000 <a href="https://adobe.com/"
target="_blank">generative
credits</a></div>
</div>
</div>
</merch-card>
<merch-card class="merch-card mini-compare-chart" variant="mini-compare-chart"
badge-background-color="#EDCC2D" badge-color="#000000" badge-text="Most popular" filters="all" types=""
tabindex="0" style="border: 1px solid rgb(237, 204, 45);">

<p slot="promo-text" class="promo-text">This is promo text <a href="https://adobe.com/"
target="_blank">with a
link</a></p>
<div slot="body-m">
<p></p>
<p>Get Illustrator on desktop and iPad as part of Creative Cloud.</p>
</div>
<p slot="price-commitment" class="price-commitment"></p>
<h3 id="creative-cloud-all-apps" slot="heading-m">Creative Cloud All Apps
</h3>
<h4 id="this-is-promo-text-with-a-link" slot="detail-m">This is promo text <a href="https://adobe.com/"
target="_blank">with a link</a></h4>
<div slot="callout-text">
<div class="callout-content-wrapper-with-icon">
<div>AI Assistant add-on available </div>
<img src="./img/info-icon.svg" title="this is a dummy tooltip text" class="callout-icon"/>
</div>
</div>
<div slot="callout-text">
<div>
<div>
For a limited time pay
when you add AI assistant to Acrobat Reader, Standard, or Pro. Ends 6/4.<a href="https://www.adobe.com/creativecloud/all-apps.html" daa-ll="Learn More-1--H4 Subtext H5 Promo Text" target="_blank">Learn More</a> </div>
</div>
</div>
<h5 id="price---abm---creative-cloud-all-apps-with-4tb" slot="heading-m-price"><span is="inline-price"
data-display-old-price="true" data-display-per-unit="false" data-display-recurrence="true"
data-display-tax="false" data-force-tax-exclusive="false" data-quantity="1"
data-template="price" data-wcs-osi="abm"></span></h5>
<p class="action-area" slot="footer">
<a href="https://business.adobe.com/" class="con-button outline button-l" target="_blank">free
trial</a>
<a href="https://business.adobe.com/" class="con-button blue button-l" target="_blank">Buy now</a>
</p>
<div slot="offers">
<merch-quantity-select title="Select a quantity:" min="1" max="10" step="1"
default-value="undefined" max-input="undefined" closed=""></merch-quantity-select>
</div>
<div slot="footer-rows">
<div class="footer-row-cell">
<picture class="footer-row-icon"><img loading="lazy" src="../test/img/cc-logo.png"
alt="Creative Cloud"></picture>
<div class="footer-row-cell-description">Illustrator on desktop, web, and iPad</div>
</div>
<div class="footer-row-cell">
<picture class="footer-row-icon"><img loading="lazy" src="../test/img/cc-logo.png"
alt="Creative Cloud"></picture>
<div class="footer-row-cell-description">Access to 20+ apps including Photoshop, Illustrator
Premiere Pro, After Effects, InDesign, Lightroom, and more</div>
</div>
<div class="footer-row-cell">
<picture class="footer-row-icon"><img loading="lazy" src="../test/img/cc-logo.png"
alt="Creative Cloud"></picture>
<div class="footer-row-cell-description">
<p>Business features like admin tools, dedicated 24x7</p>
<p>support, and 1TB of cloud storage</p>
</div>
</div>
<div class="footer-row-cell">
<picture class="footer-row-icon"><img loading="lazy" src="../test/img/cc-logo.png"
alt="Creative Cloud"></picture>
<div class="footer-row-cell-description">Adobe Express, Adobe Fresco, Adobe Portfolio, and Adobe
Fonts</div>
</div>
<div class="footer-row-cell">
<picture class="footer-row-icon"><img loading="lazy" src="../test/img/cc-logo.png"
alt="Creative Cloud"></picture>
<div class="footer-row-cell-description">1,000 <a href="https://adobe.com/"
target="_blank">generative
credits</a></div>
</div>
</div>
</merch-card>
</div>
<div class="one-merch-card mini-compare-chart">

<merch-card class="merch-card mini-compare-chart" variant="mini-compare-chart"
Expand Down
Loading