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

Jump to bottom

MWPW-138882: Commerce v3 Merch Card #1541

Merged
merged 17 commits into from
Nov 16, 2023
Merged

MWPW-138882: Commerce v3 Merch Card #1541

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
802d0a5
Syncing stage with main (#1544)
Blainegunn Nov 15, 2023
2352e3c
[MWPW-139039] Table css update for RTL (#1549)
seanchoi-dev Nov 16, 2023
66f2264
Sync (#1551)
Blainegunn Nov 16, 2023
722e3b5
web component merch card
Axelcureno Nov 16, 2023
5fcd512
mobile width styles
Axelcureno Nov 16, 2023
e72809a
Merge branch 'stage' into commerce-v3
Blainegunn Nov 16, 2023
31c996e
tablet styles
Axelcureno Nov 16, 2023
3258bf4
Merge branch 'commerce-v3' of github.com:adobecom/milo into commerce-v3
Axelcureno Nov 16, 2023
c039503
context mixed with merch card styles
Axelcureno Nov 16, 2023
07a9ef3
Mwpw 139041 sidekick (#1552)
vgoodric Nov 16, 2023
8c0e9ac
Update merch-card.js
Axelcureno Nov 16, 2023
511d061
Merge branch 'stage' into commerce-v3
honstar Nov 16, 2023
2c0558a
nit fixes
Axelcureno Nov 16, 2023
5d7a5fb
Merge branch 'commerce-v3' of github.com:adobecom/milo into commerce-v3
Axelcureno Nov 16, 2023
7dd5736
nit fixes
Axelcureno Nov 16, 2023
cf1df1c
nit fix
Axelcureno Nov 16, 2023
210cd81
nit fixes
Axelcureno Nov 16, 2023
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
2 changes: 1 addition & 1 deletion libs/blocks/card/cardUtils.js
View file
Open in desktop
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
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.
6 changes: 6 additions & 0 deletions libs/blocks/merch-card/img/ellipsis.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.
10 changes: 10 additions & 0 deletions libs/blocks/merch-card/img/secure-transaction.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.
352 changes: 352 additions & 0 deletions libs/blocks/merch-card/legacy-merch-card.css
View file
Open in desktop
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);
}
JasonHowellSlavin marked this conversation as resolved.
Show resolved Hide resolved
Loading
Loading