Skip to content

Commit

Permalink
MWPW-138882: Commerce v3 Merch Card (#1541)
Browse files Browse the repository at this point in the history 
Co-authored-by: Honwai Wong <honstar.wong@gmail.com>
Co-authored-by: Elaine Borges <borges@Laines-Mac-Pro.local>
Co-authored-by: Elaine Borges <borges@laines-mac-pro.eur.adobe.com>
Co-authored-by: Erich Champion <echampio@adobe.com>
Co-authored-by: Narcis Radu <github@narcisradu.ro>
Co-authored-by: Elaine Borges <borges@laines-mac-pro.home>
Co-authored-by: Chris Peyer <chrischrischris@users.noreply.github.com>
Co-authored-by: xiasun <xiasun@xiasuns-MacBook-Pro-2.local>
Co-authored-by: Cody Lloyd <119891065+colloyd@users.noreply.github.com>
Co-authored-by: Sabya <sabyasachi.exe@gmail.com>
Co-authored-by: Elaine Borges <62952234+elaineskpt@users.noreply.github.com>
Co-authored-by: Jacky Sun <67350368+JackySun9@users.noreply.github.com>
Co-authored-by: Brad Johnson <fullcolorcoder@gmail.com>
Co-authored-by: Aaron Mauchley <mauchley@adobe.com>
Co-authored-by: Ryan Clayton <rclayton@adobe.com>
Co-authored-by: Chris Millar <cmillar@adobe.com>
Co-authored-by: Brandon Marshall <bmarshal@adobe.com>
Co-authored-by: Megan Thomas <methomas@adobe.com>
Co-authored-by: Robert Bogos <146744221+robert-bogos@users.noreply.github.com>
Co-authored-by: Aishwarya Mathuria <mathuria@adobe.com>
Co-authored-by: Ryan Parrish <churchofslidin@gmail.com>
Co-authored-by: James Tsay <65299136+TsayAdobe@users.noreply.github.com>
Co-authored-by: Shahbaz Khan <131935409+shkhan91@users.noreply.github.com>
Co-authored-by: Blaine Gunn <Blainegunn@gmail.com>
Co-authored-by: Ryan Clayton <rgclayton@gmail.com>
Co-authored-by: Jason Slavin <slavin@adobe.com>
Co-authored-by: vivgoodrich <vivian.goodrich@gmail.com>
Co-authored-by: Sean Choi <seanchoi@adobe.com>
Co-authored-by: Vivian A Goodrich <101133187+vgoodric@users.noreply.github.com>
Fix Adobe Logo on Safari (#1518)
fixes (#1524)
Resolves: [MWPW-125185](https://jira.corp.adobe.com/browse/MWPW-125185)
Resolves: [MWPW-128939](https://jira.corp.adobe.com/browse/MWPW-128939)
Resolves: [MWPW-130870](https://jira.corp.adobe.com/browse/MWPW-130870)
Resolves: [MWPW-133268](https://jira.corp.adobe.com/browse/MWPW-133268)
Fixing issue when there are more than one rule with same number of grouping (#1112)
Resolves: [MWPW-135198](https://jira.corp.adobe.com/browse/MWPW-135198)
fix  (#1153)
Fix Acessibility warning (#1192)
Fixing the issue of NOT operator when the order of selection is changed (#1200)
Resolves: [MWPW-135296](https://jira.corp.adobe.com/browse/MWPW-135296)
Resolves: [MWPW-125774](https://jira.corp.adobe.com/browse/MWPW-125774)
Resolves quiz-results.js feedback in PR #1264
Resolves: [MWPW-136165](https://jira.corp.adobe.com/browse/MWPW-136165)
Resolves: [MWPW-137651](https://jira.corp.adobe.com/browse/MWPW-137651)
Fixing stuffs to make performance great again.. (#1429)
Resolves: [MWPW-137193](https://jira.corp.adobe.com/browse/MWPW-137193)
Fixing popup promo image size (#1516)
  • Loading branch information
@Axelcureno
Axelcureno authored Nov 16, 2023
1 parent 5767cfd commit 906d8c0
Show file tree
Hide file tree
Showing 22 changed files with 2,515 additions and 636 deletions.
2 changes: 1 addition & 1 deletion libs/blocks/card/cardUtils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export const addVideoBtn = (link, cardType, card) => {
return cardImage.append(link);
};

const getUpFromSectionMetadata = (section) => {
export const getUpFromSectionMetadata = (section) => {
const sectionMetadata = section.querySelector('.section-metadata');
if (!sectionMetadata) return null;
const metadata = getMetadata(sectionMetadata);
Expand Down
10 changes: 10 additions & 0 deletions libs/blocks/merch-card/img/checkmark-white-small.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions libs/blocks/merch-card/img/ellipsis.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions libs/blocks/merch-card/img/secure-transaction.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
352 changes: 352 additions & 0 deletions libs/blocks/merch-card/legacy-merch-card.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,352 @@
/* stylelint-disable selector-class-pattern */
.merch-card hr {
background-color: var(--color-gray-200);
border: none;
height: 1px;
width: 100%;
margin-bottom: var(--spacing-xs);
}

.merch-card p {
font-size: var(--type-body-xs-size);
font-weight: 400;
line-height: 1.5;
margin-bottom: var(--spacing-xxs);
margin-top: 0;
color: var(--color-black);
}

.merch-card h1,
.merch-card h2,
.merch-card h3,
.merch-card h4,
.merch-card h5,
.merch-card h6 {
line-height: 1.25;
margin-top: 0;
color: var(--color-black);
}

.merch-card h2 {
font-size: var(--type-heading-l-size);
margin-bottom: var(--spacing-xxs);
}

.merch-card h3,
.merch-card h4 {
font-size: var(--type-heading-xs-size);
margin-bottom: var(--spacing-xxs);
}

.merch-card h5 {
font-size: var(--type-heading-xs-size);
}

.merch-card .consonant-MerchCard-ProductIcon {
background-size: contain;
background-repeat: no-repeat;
position: relative;
margin-right: var(--spacing-xxs);
margin-bottom: var(--spacing-xxs);
display: block;
float: left;
width: 40px;
height: 40px;
}

.merch-card div[class$="-title"] {
width: 100%;
font-size: var(--type-heading-xs-lh);
font-weight: var(--type-heading-all-weight);
align-self: flex-start;
max-height: max-content;
flex: none;
}

.merch-card h4.consonant-SpecialOffers-title {
text-transform: uppercase;
}

.merch-card h2.consonant-PlansCard-title {
font-size: var(--type-heading-m-size);
line-height: var(--type-heading-l-lh);
}

.merch-card h3.consonant-SpecialOffers-title,
.merch-card h3.consonant-PlansCard-title {
margin-bottom: 0;
}

.merch-card h3.consonant-PlansCard-title {
margin-bottom: var(--spacing-xxs);
line-height: var(--type-heading-s-lh);
}

.merch-card h4.consonant-PlansCard-title {
font-size: var(--type-body-xxs-size);
font-style: italic;
}

.merch-card h5[class$="-title"] {
font-size: var(--type-heading-xxs-size);
font-weight: 500;
}

.merch-card.segment {
position: relative;
display: flex;
flex-direction: column;
min-height: 222px;
width: 100%;
flex: 1;
min-width: 378px;
max-width: 378px;
}

.merch-card.special-offers,
.merch-card.segment,
.merch-card.plans {
border-radius: 16px;
}

.merch-card.special-offers.full-width {
min-width: 100%;
max-width: 100%;
width: 1200px;
}

.merch-card.special-offers.center {
text-align: center;
}

.merch-card div[class$="-inner"] {
display: flex;
flex-direction: column;
flex-grow: 1;
padding: 16px 16px 20px;
border-radius: 4px;
background-color: var(--color-white);
text-decoration: none;
}

.merch-card .consonant-PlansCard-inner {
padding: var(--spacing-xs);
}

.merch-card div[class$="-prices"] {
font-size: var(--type-body-s-size);
line-height: 24px;
margin-bottom: var(--spacing-xxs);
}

.merch-card div[class$="-description"] {
width: 100%;
font-size: var(--type-heading-xs-size);
line-height: 1.5;
margin-top: 0;
align-self: flex-start;
flex-grow: 1;
}

.merch-card .consonant-SegmentBlade-description span.placeholder-resolved,
.merch-card .consonant-SpecialOffers-description span.placeholder-resolved,
.merch-card .consonant-PlansCard-description span.placeholder-resolved {
font-size: var(--type-heading-xs-size);
}

.merch-card .consonant-SegmentBlade-description span.placeholder-resolved[data-template="priceStrikethrough"],
.merch-card .consonant-SpecialOffers-description span.placeholder-resolved[data-template="priceStrikethrough"],
.merch-card .consonant-PlansCard-description span.placeholder-resolved[data-template="priceStrikethrough"] {
font-size: var(--type-body-xs-size);
}

.merch-card.consonant-SpecialOffers-Card {
border-radius: 16px;
}

.merch-card .consonant-SpecialOffers-img,
.merch-card .consonant-PlansCard-img {
flex-grow: 1;
position: relative;
width: 100%;
height: 213px;
background-color: var(--background-color);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}

.merch-card div[class$="-ribbon"] {
position: absolute;
top: 16px;
right: 0;
font-size: var(--type-heading-xxs-size);
font-weight: 500;
max-width: 150px;
line-height: 16px;
text-align: center;
padding: 8px 11px;
border-radius: 5px 0 0 5px;
}

.merch-card .consonant-SpecialOffers-ribbon {
text-transform: uppercase;
}

.merch-card .consonant-SpecialOffers-inner,
.merch-card .consonant-PlansCard-inner {
justify-content: center;
height: 100%;
}

.merch-card.special-offers .consonant-SpecialOffers-description p,
.merch-card.special-offers .consonant-PlansCard-description p {
font-size: var(--type-body-xs-size);
}

.merch-card .consonant-SpecialOffers-description em,
.merch-card .consonant-PlansCard-description em {
color: var(--color-gray-600);
}

.merch-card.special-offers h4 {
font-size: var(--type-body-xxs-size);
text-transform: uppercase;
letter-spacing: 1px;
}

.merch-card .checkbox-container {
cursor: pointer;
margin-bottom: var(--spacing-xs);
}

.merch-card .checkbox-container,
.merch-card .secure-transaction-wrapper {
display: grid;
grid-template-columns: 12px auto;
gap: var(--spacing-xxs);
}

.merch-card .checkbox-label,
.merch-card .secure-transaction-label {
font-size: var(--type-body-xxs-size);
line-height: 1.3;
color: var(--color-gray-600);
}

.merch-card .secure-transaction-icon {
height: 15px;
width: 12px;
background: url('/libs/img/ui/secure-transaction.svg') no-repeat left center;
}

.merch-card .secure-transaction-label {
white-space: nowrap;
}

.merch-card .checkbox-container input[type="checkbox"] {
display: none;
}

.merch-card .checkbox-container .checkmark {
position: relative;
display: inline-block;
width: 12px;
height: 12px;
border: 2px solid #757575;
background: #fff;
border-radius: 2px;
cursor: pointer;
margin-top: 2px;
}

.merch-card .checkbox-container input[type="checkbox"]:checked + .checkmark {
background-color: var(--color-accent);
background-image: url('/libs/img/ui/checkmark-white-small.svg');
border-color: var(--color-accent);
}

.merch-card.has-divider hr {
margin: var(--spacing-xxs) 0;
}

.merch-card.has-divider .consonant-CardFooter hr {
display: none;
}

.merch-card.background-opacity-70 {
background-color: rgba(255 255 255 / 70%);
}

.merch-card.background-opacity-70 div[class$="-inner"] {
background-color: transparent;
}

.merch-card.inline-heading .consonant-SegmentBlade-inner {
display: grid;
column-gap: 12px;
align-items: center;
grid-template-columns: 40px 1fr;
}

.merch-card ul[class$="-list"] {
list-style: none;
margin: 0;
padding-left: var(--spacing-xxs);
font-size: var(--type-body-xxs-size);
line-height: 1.5;
color: var(--color-black);
}

.merch-card li[class$="-list-item"] {
position: relative;
}

.merch-card li[class$="-list-item"]::before {
content: "\B7";
position: absolute;
left: -0.4em;
font-size: 1.5em;
top: calc(0.5 * 1.5 * var(--type-body-xxs-size) - 0.05em);
transform: translateY(-50%);
}

.merch-card.inline-heading .consonant-SegmentBlade-description,
.merch-card.inline-heading .consonant-CardFooter {
grid-column: span 2;
}

.merch-card.special-offers .consonant-CardFooter {
margin-top: 0;
padding-top: 0;
justify-content: center;
box-sizing: border-box;
align-self: flex-end;
width: 100%;
}

.merch-card .consonant-CardFooter .standard-wrapper {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-xs);
align-items: center;
}

.merch-card .consonant-CardFooter-row,
.merch-card .consonant-CardFooter-cell {
display: flex;
gap: var(--spacing-xs);
flex-wrap: wrap;
margin-left: auto;
height: auto;
width: auto;
}

.merch-card .consonant-CardFooter-row .button--inactive {
display: none;
}

.dark .merch-card .consonant-CardFooter .con-button.outline {
border-color: var(--color-black);
color: var(--color-black);
}
Loading

0 comments on commit 906d8c0

Please sign in to comment.