Merge branch 'develop' into feature/GH-1765

Author: Gilberto Alvarado

projects/storefrontapp-e2e-cypress/cypress/helpers/checkout-as-persistent-user.ts

@@ -76,7 +76,7 @@ export function selectShippingAddress() {
     .first()
     .find('.cx-summary-amount')
     .should('not.be.empty');
-  cy.get('.cx-card-body__title').contains(' Default Shipping Address ');
+  cy.get('.cx-card-title').contains(' Default Shipping Address ');
   cy.getByText(/Ship to this address/i).click();
   cy.get('.card-header').should('contain', ' SELECTED ');
   cy.get('button.btn-primary').click();
@@ -93,7 +93,7 @@ export function selectPaymentMethod() {
   cy.get('cx-order-summary .cx-summary-partials .cx-summary-total')
     .find('.cx-summary-amount')
     .should('not.be.empty');
-  cy.get('.cx-card-body__title').contains(' Default Payment Method ');
+  cy.get('.cx-card-title').contains(' Default Payment Method ');
   cy.getByText(/Use this payment/i).click();
   cy.get('.card-header').should('contain', ' SELECTED ');
   cy.get('button.btn-primary').click();
@@ -103,11 +103,11 @@ export function verifyAndPlaceOrder() {
   cy.get('.cx-review-title').should('contain', 'Review');
   cy.get('.cx-review-summary-card')
     .contains('cx-card', 'Ship To')
-    .find('.cx-card-body__container')
+    .find('.cx-card-container')
     .should('not.be.empty');
   cy.get('.cx-review-summary-card')
     .contains('cx-card', 'Shipping Method')
-    .find('.cx-card-body__container')
+    .find('.cx-card-container')
     .within(() => {
       cy.getByText('standard-gross');
     });

projects/storefrontapp-e2e-cypress/cypress/helpers/checkout-flow.ts

@@ -75,15 +75,15 @@ export function placeOrder() {
   cy.get('.cx-review-title').should('contain', 'Review');
   cy.get('.cx-review-summary-card')
     .contains('cx-card', 'Ship To')
-    .find('.cx-card-body__container')
+    .find('.cx-card-container')
     .within(() => {
       cy.getByText(user.fullName);
       cy.getByText(user.address.line1);
       cy.getByText(user.address.line2);
     });
   cy.get('.cx-review-summary-card')
     .contains('cx-card', 'Shipping Method')
-    .find('.cx-card-body__container')
+    .find('.cx-card-container')
     .within(() => {
       cy.getByText('standard-gross');
     });

projects/storefrontlib/src/lib/checkout/components/multi-step-checkout/container/multi-step-checkout.component.scss

@@ -8,14 +8,14 @@
 
 .cx-nav {
   @include type('4', 'semi');
-  margin-bottom: 0;
+  margin: var(--cx-margin, 0);
 
   .cx-list {
     display: var(--cx-display, flex);
     flex-direction: var(--cx-flex-direction, row);
     list-style: var(--cx-list-style, none);
     padding: var(--cx-padding, 0);
-    margin-bottom: 0;
+    margin: var(--cx-margin, 0);
   }
 
   .cx-item {
@@ -44,11 +44,11 @@
 
 .cx-link,
 .cx-link:hover {
-  cursor: pointer;
+  cursor: var(--cx-cursor, pointer);
 
   &.is-disabled {
     color: var(--cx-color, var(--cx-g-color-light));
-    cursor: not-allowed;
+    cursor: var(--cx-cursor, not-allowed);
   }
 
   &.is-active {
@@ -62,26 +62,28 @@
 .cx-media {
   @include media-breakpoint-down(md) {
     & > :last-child {
-      border-bottom: 1px solid;
+      border-width: var(--cx-border-width, 0 0 1px 0);
+      border-style: var(--cx-border-style, solid);
       border-color: var(--cx-border-color, var(--cx-g-color-light));
     }
   }
 
   .cx-list-media {
     display: var(--cx-display, none);
     @include type('3');
-    text-transform: var(--cx-text-transform, uppercase);
+    text-transform: var(--cx-text-transform, capitalize);
     justify-content: var(--cx-justify-content, space-between);
     align-items: var(--cx-align-items, center);
     line-height: var(--cx-line-height, 4.75rem);
-    min-width: var(--cx-min-widt, 100%);
-    border-top: 1px solid;
+    min-width: var(--cx-min-width, 100%);
+    border-width: var(--cx-border-width, 1px 0 0 0);
+    border-style: var(--cx-border-style, solid);
     border-color: var(--cx-border-color, var(--cx-g-color-light));
-    margin-bottom: 0;
+    margin: var(--cx-margin, 0);
 
     button {
-      text-transform: var(--cx-text-transform, uppercase);
-      font-weight: $font-weight-bold;
+      text-transform: var(--cx-text-transform, capitalize);
+      font-weight: var(--cx-font-weight, var(--cx-g-font-weight-semi));
     }
 
     @include media-breakpoint-down(md) {
@@ -107,7 +109,7 @@
   }
 
   button {
-    margin-top: 1.25rem;
+    margin: var(--cx-margin, 1.25rem 0 0);
   }
 }
 

projects/storefrontlib/src/lib/checkout/components/multi-step-checkout/payment-method/payment-method.component.html

@@ -23,12 +23,13 @@ <h3 class="cx-checkout-title d-none d-lg-block d-xl-block">Payment</h3>
 
       <div class="cx-checkout-body row">
         <div
-          class="col-md-12 col-lg-6"
+          class="cx-payment-card col-md-12 col-lg-6"
           *ngFor="let method of existingPaymentMethods; let i = index"
         >
-          <div class="cx-payment-card">
+          <div class="cx-payment-card-inner">
             <cx-card
               [border]="true"
+              [fitToContainer]="true"
               [content]="cards[i]"
               (sendCard)="paymentMethodSelected(method, i)"
             ></cx-card>

projects/storefrontlib/src/lib/checkout/components/multi-step-checkout/payment-method/payment-method.component.scss

@@ -2,8 +2,62 @@
 
 @include checkout-media-style();
 
+.cx-payment {
+  &.container {
+    padding: var(--cx-padding, 0);
+  }
+}
+
 .cx-payment-card {
+  padding-bottom: var(--cxpadding, 30px);
+}
+
+.cx-payment-card-inner {
+  height: var(--cx-height, 100%);
+  background-color: var(--cx-background-color, var(--cx-g-color-inverse));
+  cursor: pointer;
+
   @include media-breakpoint-down(md) {
     background-color: var(--cx-background-color, var(--cx-g-color-inverse));
   }
 }
+
+.cx-checkout-title {
+  text-transform: var(--cx-text-transform, uppercase);
+  margin: var(--cx-margin, 0 auto);
+  padding: var(--cx-padding, 2.375rem 0 1.75rem 0);
+}
+
+.cx-checkout-text {
+  @include media-breakpoint-down(md) {
+    padding-left: var(--cx-padding, 3.5rem);
+  }
+  @include media-breakpoint-down(sm) {
+    padding-left: var(--cx-padding, 1.5rem);
+  }
+}
+
+.cx-checkout-btns {
+  padding-bottom: var(--cx-padding, 1rem);
+
+  @include media-breakpoint-down(md) {
+    padding: var(--cx-padding, 1.25rem 0);
+  }
+
+  .btn-action {
+    @include media-breakpoint-down(sm) {
+      margin-bottom: var(--cx-margin, 1rem);
+    }
+  }
+}
+
+.cx-checkout-body {
+  display: var(--cx-display, flex);
+  align-items: var(--cx-align-items, stretch);
+
+  &.row {
+    @include media-breakpoint-down(md) {
+      padding: var(--cx-padding, 0);
+    }
+  }
+}

projects/storefrontlib/src/lib/checkout/components/multi-step-checkout/payment-method/payment-method.component.spec.ts

@@ -63,6 +63,8 @@ class MockCardComponent {
   @Input()
   border: boolean;
   @Input()
+  fitToContainer: boolean;
+  @Input()
   content: Card;
 }
 

projects/storefrontlib/src/lib/checkout/components/multi-step-checkout/shipping-address/shipping-address.component.scss

@@ -3,7 +3,7 @@
 @include checkout-media-style();
 
 .cx-shipping-address-card {
-  padding-bottom: var(--cxpadding, 30px);
+  padding-bottom: var(--cx-padding, 30px);
 
   .cx-shipping-address-card-inner {
     height: var(--cx-height, 100%);

projects/storefrontlib/src/lib/my-account/order/order-details/order-details.component.spec.ts

@@ -189,9 +189,7 @@ describe('OrderDetailsComponent', () => {
 
   it('should order details display "ship to" data', () => {
     fixture.detectChanges();
-    const element: DebugElement = el.query(
-      By.css('.cx-card-body__label-container')
-    );
+    const element: DebugElement = el.query(By.css('.cx-card-label-container'));
     expect(element.nativeElement.textContent).toContain(
       mockOrder.deliveryAddress.firstName &&
         mockOrder.deliveryAddress.lastName &&

projects/storefrontlib/src/lib/my-account/payment-methods/components/payment-methods.component.spec.ts

@@ -130,15 +130,15 @@ describe('PaymentMethodsComponent', () => {
         .textContent;
     }
     function getTextBold(elem: DebugElement): string {
-      return elem.query(By.css('cx-card .card__label--bold')).nativeElement
+      return elem.query(By.css('cx-card .cx-card-label-bold')).nativeElement
         .textContent;
     }
     function getCardNumber(elem: DebugElement): string {
-      return elem.queryAll(By.css('cx-card .card__label'))[0].nativeElement
+      return elem.queryAll(By.css('cx-card .cx-card-label'))[0].nativeElement
         .textContent;
     }
     function getExpiration(elem: DebugElement): string {
-      return elem.queryAll(By.css('cx-card .card__label'))[1].nativeElement
+      return elem.queryAll(By.css('cx-card .cx-card-label'))[1].nativeElement
         .textContent;
     }
     component.ngOnInit();
@@ -155,8 +155,8 @@ describe('PaymentMethodsComponent', () => {
     spyOn(userService, 'getPaymentMethodsLoading').and.returnValue(of(false));
 
     function getDeleteMsg(elem: DebugElement): string {
-      return elem.query(By.css('cx-card .cx-card-body__delete-msg'))
-        .nativeElement.textContent;
+      return elem.query(By.css('cx-card .cx-card-delete-msg')).nativeElement
+        .textContent;
     }
     function getDeleteButton(elem: DebugElement): any {
       return elem.query(By.css('cx-card .card-link')).nativeElement;

projects/storefrontlib/src/lib/ui/components/card/card.component.html

@@ -1,41 +1,41 @@
 <div
   *ngIf="content"
   class="cx-card"
-  [class.cx-card--border]="border"
-  [class.cx-card--fit-to-container]="fitToContainer"
+  [class.cx-card-border]="border"
+  [class.cx-card-fit-to-container]="fitToContainer"
 >
   <!-- Card Header -->
   <div *ngIf="content.header && !editMode" class="card-header">
     {{ content.header }}
   </div>
   <!-- Card Body -->
-  <div class="card-body cx-card-body" [class.cx-card--delete-mode]="editMode">
+  <div class="card-body cx-card-body" [class.cx-card-delete]="editMode">
     <!-- Edit message -->
-    <div *ngIf="editMode" class="cx-card-body__delete-msg">
+    <div *ngIf="editMode" class="cx-card-delete-msg">
       {{ content.deleteMsg }}
     </div>
     <!-- Card title -->
-    <h4 *ngIf="content.title" class="cx-card-body__title">
+    <h4 *ngIf="content.title" class="cx-card-title">
       {{ content.title }}
     </h4>
     <!-- Card Content -->
-    <div class="cx-card-body__container">
+    <div class="cx-card-container">
       <!-- Card Label -->
-      <div class="cx-card-body__label-container">
-        <div *ngIf="content.textBold" class="card__label--bold">
+      <div class="cx-card-label-container">
+        <div *ngIf="content.textBold" class="cx-card-label-bold">
           {{ content.textBold }}
         </div>
         <div *ngFor="let line of content.text">
-          <div class="card__label">{{ line }}</div>
+          <div class="cx-card-label">{{ line }}</div>
         </div>
       </div>
       <!-- Image -->
-      <div *ngIf="content.img" class="cx-card-body__img-container">
+      <div *ngIf="content.img" class="cx-card-img-container">
         <img src="{{ content.img }}" alt="" />
       </div>
     </div>
     <!-- Edit Mode Actions -->
-    <div *ngIf="editMode" class="row cx-card-body__delete">
+    <div *ngIf="editMode" class="row cx-card-body-delete">
       <div class="col-md-6">
         <button class="btn btn-block btn-secondary" (click)="cancelEdit()">
           cancel
@@ -48,27 +48,24 @@ <h4 *ngIf="content.title" class="cx-card-body__title">
       </div>
     </div>
     <!-- Actions -->
-    <div
-      *ngIf="content.actions && !editMode"
-      class="cx-card-body__actions-container"
-    >
+    <div *ngIf="content.actions && !editMode" class="cx-card-actions">
       <div *ngFor="let action of content.actions">
         <div [ngSwitch]="action.event">
           <a
             *ngSwitchCase="'delete'"
-            class="card-link btn-link"
+            class="cx-card-link card-link btn-link"
             (click)="delete()"
             >{{ action.name }}</a
           >
           <a
             *ngSwitchCase="'default'"
-            class="card-link btn-link"
+            class="cx-card-link card-link btn-link"
             (click)="setDefault()"
             >{{ action.name }}</a
           >
           <a
             *ngSwitchCase="'send'"
-            class="card-link btn-link"
+            class="cx-card-link card-link btn-link"
             (click)="send()"
             >{{ action.name }}</a
           >