Skip to content

Commit

Permalink
done the changes for other cards too
Browse files Browse the repository at this point in the history
  • Loading branch information
Rohit Sahu committed Jun 21, 2024
1 parent 0e2445f commit 7a1f52b
Show file tree
Hide file tree
Showing 3 changed files with 446 additions and 3 deletions.
4 changes: 2 additions & 2 deletions web-components/src/global.css.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -238,7 +238,7 @@ merch-card [slot='heading-xl'] {
color: var(--merch-color-grey-80);
}
merch-card [slot='body-xs'] .callout {
merch-card .callout {
background: var(--consonant-merch-card-callout-background-color) 0% 0% no-repeat padding-box;
border-radius: 4px;
opacity: 0.5;
Expand All @@ -247,7 +247,7 @@ merch-card [slot='body-xs'] .callout {
display: inline-flex;
}
merch-card [slot='body-xs'] .callout img {
merch-card .callout img {
margin: 1.5px 0px 0px 5px;
align-self: flex-start;
}
Expand Down
144 changes: 144 additions & 0 deletions web-components/test/merch-card.mini-compare.test.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -407,6 +407,150 @@ <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>
<div><p class="callout">AI Assistant add-on available <img src="./img/info-icon.svg"/></p></div>
<div class="callout">
<div>
For a limited time pay <span is="inline-price" data-display-per-unit="false"
data-display-recurrence="true" data-display-tax="false" data-wcs-osi="puf"></span> when you add
</div><img src="./img/info-icon.svg"/>
</div>
<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>
<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>
<div><p class="callout">AI Assistant add-on available <img src="./img/info-icon.svg"/></p></div>
<div class="callout">
<div>
For a limited time pay <span is="inline-price" data-display-per-unit="false"
data-display-recurrence="true" data-display-tax="false" data-wcs-osi="puf"></span> when you add
</div><img src="./img/info-icon.svg"/>
</div>
<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>
<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

0 comments on commit 7a1f52b

Please sign in to comment.