mp-design-system 1.2.8 → 1.2.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mp-design-system",
-  "version": "1.2.8",
+  "version": "1.2.10",
   "description": "",
   "scripts": {
     "dev": "npm-run-all --parallel bundle:*",

package/src/_includes/components/comparison-table/comparison-table.scss

@@ -38,10 +38,10 @@
 
   thead {
     th {
+      @include padding(0, '2xs');
       border: 0;
       text-align: center;
       vertical-align: top;
-
     }
   }
 
@@ -62,6 +62,7 @@
     
   &__buttons {
     @include margin(0, 'auto');
+    @include padding-bottom('xs');
     margin-top: 1.25rem !important;
     display: inline-flex;
     flex-direction: column;
@@ -104,7 +105,14 @@
 
   tbody {
     tr {
-      height: 48px;
+      &:first-child th {
+        @include padding(0);
+        vertical-align: bottom;
+      }
+      
+      &:not(.c-comparison-table__title) {
+        height: 48px;
+      }
 
       td:first-child {
         text-align: left;

package/src/assets/js/imports/comparison.js

@@ -1,5 +1,4 @@
 function Comparison() {
-  console.log(document.querySelectorAll('.c-comparison-table').parentElement)
   document.querySelectorAll('.c-comparison-table').forEach(extractMobileComparison)
 }
 
@@ -11,10 +10,10 @@ function extractMobileComparison(container) {
 
   if (!body || !head || !mobile) return;
 
-  // Remove empty corner piece
-  const products = Array.from(head.children[0].children)
-    .filter((x, i) => i)
-    .map(x => ({ info: x.innerHTML, table: [] }));
+  // Remove empty corner piece  
+  const productsInfo = Array.from(head.children[0].children).filter((x, i) => i).map(x => ({ info: x.innerHTML }));
+  const productsButtons = Array.from(head.children[1].children).filter((x, i) => i).map(x => ({ buttons: x.innerHTML }));
+  const products = productsInfo.map((info, index) => ({ ...info, ...productsButtons[index], table: [] }));
 
   Array.from(body.children).forEach(row => {
     // For table row headers, push to all products
@@ -45,7 +44,7 @@ function extractMobileComparison(container) {
 
 function createMobileProduct(product) {
   const parent = document.createElement('article');
-  parent.innerHTML = `${product.info}
+  parent.innerHTML = `${product.info}${product.buttons}
   <table class="c-comparison-table">
     ${product.table.map(x => {
       if (x.type === 'title') {