Cleaning up styling

src/iss-components/cart-dropdown/cart-dropdown.spec.js

@@ -121,6 +121,58 @@ describe('cart-dropdown component', () => {
             // Assert
             expect(cartBasePrice.exists()).toBeTruthy();
         });
+        test('cart footer', () => {
+            // Arrange
+            const reference = '#cart-footer';
+            const isExpanded = true;
+            const initialData = { isExpanded };
+            const { wrapper } = getMountedComponent({}, {}, initialData);
+
+            // Act
+            const cartFooter = wrapper.find(reference);
+
+            // Assert
+            expect(cartFooter.exists()).toBeTruthy();
+        });
+        test('subtotal', () => {
+            // Arrange
+            const reference = '#cart-subtotal';
+            const isExpanded = true;
+            const initialData = { isExpanded };
+            const { wrapper } = getMountedComponent({}, {}, initialData);
+
+            // Act
+            const subtotal = wrapper.find(reference);
+
+            // Assert
+            expect(subtotal.exists()).toBeTruthy();
+        });
+        test('tax', () => {
+            // Arrange
+            const reference = '#cart-sales-tax';
+            const isExpanded = true;
+            const initialData = { isExpanded };
+            const { wrapper } = getMountedComponent({}, {}, initialData);
+
+            // Act
+            const salesTax = wrapper.find(reference);
+
+            // Assert
+            expect(salesTax.exists()).toBeTruthy();
+        });
+        test('bottom amount due', () => {
+            // Arrange
+            const reference = '#bottom-amount-due';
+            const isExpanded = true;
+            const initialData = { isExpanded };
+            const { wrapper } = getMountedComponent({}, {}, initialData);
+
+            // Act
+            const bottomAmountDue = wrapper.find(reference);
+
+            // Assert
+            expect(bottomAmountDue.exists()).toBeTruthy();
+        });
     });
     describe('does not display', () => {
         test('cart deductible when showDeductibleLineItem is false', () => {

src/iss-components/cart-dropdown/cart-dropdown.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="[isExpanded ? 'pb-3' : 'pb-4']">
+    <div :class="[isExpanded ? 'pb-5' : 'pb-4']">
         <div
             id="cart-dropdown-head"
             class="row cart-toggle flex align-items-center pt-4"
@@ -9,50 +9,73 @@
                 aria-label="expand cart details"
                 href="javascript:void(0)"
                 class="col d-flex justify-content-between py-0">
-                <span class="cart-label color-black">{{ amountDueLabel }}</span>
+                <span class="color-black">{{ amountDueLabel }}</span>
-                <span class="cart-label amount-due">{{ getDisplayed(amountDue) }}</span>
+                <span class="color-green">{{ getDisplayed(amountDue) }}</span>
             </a>
         </div>
         <div
             id="cart-table"
             class="cart-table">
-            <!-- Deductible Line Item -->
             <div
-                id="cart-deductible-or-base-price"
+                id="cart-line-items"
-                class="mt-4 cart-line-item color-gray-100 px-5 py-1">
+                class="color-darker-gray">
                 <div
-                    v-if="showDeductibleLineItem"
+                    id="cart-deductible-or-base-price"
-                    id="cart-deductible"
+                    class="cart-deductible-or-base-price">
-                    class="d-flex justify-content-between align-items-center">
+                    <div
-                    <span
+                        v-if="showDeductibleLineItem"
-                        id="deductible-label"
+                        id="cart-deductible"
-                        class="cart-label">{{ deductibleLabel }}</span>
+                        class="d-flex justify-content-between align-items-center">
-                    <span id="deductible-value">{{ getDisplayed(deductible) }}</span>
+                        <span id="deductible-label">{{ deductibleLabel }}</span>
+                        <span id="deductible-value">{{ getDisplayed(deductible) }}</span>
+                    </div>
+                    <div
+                        v-else
+                        id="cart-base-price"
+                        class="d-flex justify-content-between align-items-center">
+                        <span id="base-price-label">{{ basePriceLabel }}</span>
+                        <span id="base-price-value">{{ getDisplayed(baseServicePrice) }}</span>
+                    </div>
                 </div>
-                <div
+
-                    v-else
+                <!-- Packaged Cart Items -->
-                    id="cart-base-price"
+
-                    class="d-flex justify-content-between align-items-center">
+                <!-- Nonpackaged Cart Items -->
-                    <span
+                <!-- This will be a loop when this is implemented -->
-                        id="base-price-label"
+                <div class="non-packaged-cart-item">
-                        class="cart-label">{{ basePriceLabel }}</span>
+                    <textLink
-                    <span id="base-price-value">{{ getDisplayed(baseServicePrice) }}</span>
+                        linkType="text"
+                        text="Recycling"
+                        href="javascript:void(0)"
+                        @clickEvent="openModal(recyclingModalCmsWidgetName)" />
                 </div>
             </div>
-
+            <div
-            <!-- Packaged Cart Items -->
+                id="cart-footer"
-
+                class="cart-footer">
-            <!-- Nonpackaged Cart Items -->
+                <div
-            <!-- This will be a loop when this is implemented -->
+                    id="cart-subtotal-and-tax"
-            <div class="non-packaged-cart-item">
+                    class="subtotal-and-tax">
-                <textLink
+                    <div
-                    linkType="text"
+                        id="cart-subtotal"
-                    text="Recycling"
+                        class="col d-flex justify-content-between">
-                    href="javascript:void(0)"
+                        <span id="subtotal-label">Subtotal</span>
-                    @clickEvent="openModal(recyclingModalCmsWidgetName)" />
+                        <span id="subtotal-value">$100.00</span>
+                    </div>
+                    <div
+                        id="cart-sales-tax"
+                        class="pt-1 col d-flex justify-content-between">
+                        <span id="sales-tax-label">Sales tax</span>
+                        <span id="sales-tax-value">$1.23</span>
+                    </div>
+                </div>
+                <div
+                    id="bottom-amount-due"
+                    class="bottom-amount-due col d-flex justify-content-between">
+                    <span id="bottom-amount-due-label">Amount due</span>
+                    <span id="bottom-amount-due-value">$101.23</span>
+                </div>
             </div>
-
-            <!-- Sub total, sales tax, total columns -->
         </div>
         <contentGroupModal
             ref="RecycleModal"
@@ -136,7 +159,6 @@ export default {
         }
     }
 };
-
 </script>
 
 <style lang="scss" scoped>
@@ -145,11 +167,12 @@ export default {
 .color-black {
     color: $black;
 }
-.color-gray-100 {
+
-    background-color: $gray-100;
+.color-green {
+    color: $green;
 }
 
-.cart-line-item {
+.color-darker-gray {
     color: $darker-gray;
 }
 
@@ -158,6 +181,29 @@ export default {
     transition: all 350ms ease-in;
     overflow: hidden;
     visibility: hidden;
+
+    .cart-deductible-or-base-price {
+        background-color: $gray-100;
+        margin-top: 1rem;
+        padding: 0.25rem 1.5rem;
+    }
+
+    .cart-footer {
+        border-top: 1px solid $green;
+    }
+
+    .subtotal-and-tax {
+        background-color: $green-150;
+        font-weight: $font-weight-bold;
+        color: $black;
+        padding: 0.25rem 1.5rem;
+    }
+
+    .bottom-amount-due {
+        color: $white;
+        background-color: $green;
+        padding: 0.25rem 1.5rem;
+    }
 }
 
 :deep(.modal-content a.external-text) {
@@ -175,6 +221,8 @@ export default {
 }
 
 .cart-toggle {
+    font-weight: $font-weight-bold;
+
     &:after {
         content: "";
         transition: all 0.5s ease;
@@ -201,13 +249,6 @@ export default {
     a {
         text-decoration: none;
     }
-    .cart-label {
-        font-weight: $font-weight-bold;
-        line-height: 1.625;
-    }
-    .amount-due {
-        color: $green;
-    }
 
 }
 </style>

src/styles/ux-variables.scss

@@ -28,6 +28,7 @@ $red-900: #330300;
 
 // Greens
 $green-100: #e3f2ea;
+$green-150: #e6f2ec;
 $green-200: #bcedd4;
 $green-300: #94d7b6;
 $green-400: #5abc8c; // Used in theme