@rebilly/instruments 2.0.0-beta → 3.0.1-beta.0

package/src/style/views/confirmation.js

@@ -1,7 +1,7 @@
 // -----------------------------------------------------------------------------
 // This file contains all styles related to the confirmation view.
 // -----------------------------------------------------------------------------
-export const confirmation = (theme) => `
+export const confirmation = () => `
   /**
   * Confirmation
   */
@@ -11,8 +11,8 @@ export const confirmation = (theme) => `
 
   .rebilly-instruments-confirmation-go-back-link {
     display: inline-block;
-    margin-bottom: ${theme.space.m};
-    margin-left: -${theme.space.xs};
+    margin-bottom: var(--rebilly-spacings-base);
+    margin-left: calc(var(--rebilly-spacings-xs) * -1);
   }
 
   .rebilly-instruments-confirmation-address-title {
@@ -21,20 +21,20 @@ export const confirmation = (theme) => `
   }
 
   .rebilly-instruments-confirmation-address-title .rebilly-instruments-link {
-    margin-left: ${theme.space.s};
+    margin-left: var(--rebilly-spacings-s);
   }
 
   .rebilly-instruments-confirmation-address-actions {
-    margin-top: ${theme.space.m};
+    margin-top: var(--rebilly-spacings-base);
     display: flex;
   }
 
   .rebilly-instruments-confirmation-address-actions :first-child {
-    margin: 0 ${theme.space.xs} 0 0;
+    margin: 0 var(--rebilly-spacings-xs) 0 0;
   }
 
   .rebilly-instruments-confirmation-address-actions :last-child {
-    margin: 0 0 0 ${theme.space.xs};
+    margin: 0 0 0 var(--rebilly-spacings-xs);
   }
 
   .rebilly-instruments-confirmation-payment-method {
@@ -42,18 +42,18 @@ export const confirmation = (theme) => `
     align-items: center;
     justify-content: space-between;
     height: 26px;
-    margin: 0 0 ${theme.space.l};
+    margin: 0 0 var(--rebilly-spacings-l);
   }
 
   .rebilly-instruments-confirmation-payment-method figure {
-    margin: 0 ${theme.space.xxs} 0 0;
+    margin: 0 var(--rebilly-spacings-2xs) 0 0;
     height: 26px;
     padding: 0;
   }
 
   .rebilly-instruments-confirmation-payment-method figure img {
     width: 42px;
-    border-radius: ${theme.borderRadius};
+    border-radius: 4px;
   }
 
   .rebilly-instruments-confirmation-payment-method-brand,
@@ -63,14 +63,14 @@ export const confirmation = (theme) => `
   }
 
   .rebilly-instruments-confirmation-payment-method-brand {
-    margin: 0 0 0 ${theme.space.s};
+    margin: 0 0 0 var(--rebilly-spacings-s);
   }
 
   .rebilly-instruments-confirmation-payment-method-last4 {
-    margin: 0 ${theme.space.s};
+    margin: 0 var(--rebilly-spacings-s);
   }
 
   .rebilly-instruments-confirmation-payment-method-exp {
-    color: ${theme.getComputed.color.mutedText};
+    color: var(--rebilly-colorMutedText);
   }
 `;

package/src/style/views/method-selector.js

@@ -1,11 +1,11 @@
 // -----------------------------------------------------------------------------
 // This file contains all styles related to the selector view.
 // -----------------------------------------------------------------------------
-export const methodSelector = (theme) => `
+export const methodSelector = () => `
   /**
   * Method selector
   */
   .rebilly-instruments-method-selector.has-express-compact {
-    padding-top: ${theme.space.s};
+    padding-top: var(--rebilly-spacings-s);
   }
 `;

package/src/style/views/modal.js

@@ -1,7 +1,7 @@
 // -----------------------------------------------------------------------------
 // This file contains all styles related to the modal view.
 // -----------------------------------------------------------------------------
-export const modal = (theme) => `
+export const modal = () => `
   /**
   * Modal
   */
@@ -31,10 +31,10 @@ export const modal = (theme) => `
     transition: all .24s ease-in-out;
     position: relative;
     max-width: 800px;
-    background: ${theme.color.background};
+    background: var(--rebilly-colorBackground);
     margin: 50px auto 20px;
     box-shadow: 0 19px 38px rgba(0,0,0,0.20), 0 15px 12px rgba(0,0,0,0.12);
-    border-radius: ${theme.borderRadius};
+    border-radius: 4px;
     transform: translateY(-50px);
     opacity: 0;
   }
@@ -53,9 +53,9 @@ export const modal = (theme) => `
     transition: all .15s;
     padding: 20px;
     overflow: hidden;
-    background-color: ${theme.color.background};
+    background-color: var(--rebilly-colorBackground);
     text-align: center;
-    border-radius: ${theme.borderRadius};
+    border-radius: 4px;
   }
 
   .rebilly-instruments-modal-content .rebilly-instruments-iframe {
@@ -74,7 +74,7 @@ export const modal = (theme) => `
     height: 30px;
     top: -40px;
     right: 0;
-    fill: #ffffff;
+    fill: #FFF;
     cursor: pointer;
   }
   

package/src/style/views/result.js

@@ -1,7 +1,7 @@
 // -----------------------------------------------------------------------------
 // This file contains all styles related to the result view.
 // -----------------------------------------------------------------------------
-export const result = (theme) => `
+export const result = () => `
   /**
   * Result
   */
@@ -12,16 +12,16 @@ export const result = (theme) => `
 
   .rebilly-instruments-results-icon {
     width: 160px;
-    margin: 0 auto ${theme.space.m} auto;
+    margin: 0 auto var(--rebilly-spacings-base) auto;
     display: block;
   }
 
   .rebilly-instruments-results-icon g {
-    stroke: ${theme.color.primary};
+    stroke: var(--rebilly-colorPrimary);
   }
 
   .rebilly-instruments-results-icon.is-error g {
-    stroke: ${theme.color.errorText};
+    stroke: var(--rebilly-colorDanger);
   }
 
   .rebilly-instruments-results-icon path {

package/src/style/views/summary.js

@@ -1,13 +1,13 @@
 // -----------------------------------------------------------------------------
 // This file contains all styles related to the summary view.
 // -----------------------------------------------------------------------------
-export const summary = (theme) => `
+export const summary = () => `
   /**
   * Summary
   */
   .rebilly-instruments-summary-line-item {
-    border-bottom: 1px solid ${theme.getComputed.color.mutedBorder};
-    padding: ${theme.space.s} 0;
+    border-bottom: 1px solid var(--rebilly-colorMutedBorder);
+    padding: var(--rebilly-spacings-s) 0;
     display: flex;
     align-items: center;
     position: relative;
@@ -18,12 +18,12 @@ export const summary = (theme) => `
   }
 
   .rebilly-instruments-summary-line-item-figure {
-    margin: 0 ${theme.space.s} 0 0;
+    margin: 0 var(--rebilly-spacings-s) 0 0;
     flex: 0 0 auto;
     width: 48px;
     height: 48px;
-    border-radius: ${theme.borderRadius};
-    border: 1px solid ${theme.getComputed.color.mutedBorder};
+    border-radius: var(--rebilly-borderRadius);
+    border: 1px solid var(--rebilly-colorMutedBorder);
     overflow: hidden;
   }
 
@@ -41,31 +41,31 @@ export const summary = (theme) => `
   }
 
   .rebilly-instruments-summary-line-item-synopsis-description {
-    color: ${theme.getComputed.color.mutedText};
+    color: var(--rebilly-colorMutedText);
     margin: 0;
-    font-size: 14px;
-    line-height: 14px;
+    font-size: calc(var(--rebilly-fontSizeBase) * 0.875);
+    line-height: 1;
   }
 
   .rebilly-instruments-summary-line-item-price-breakdown {
     display: flex;
     justify-content: center;
     align-items: center;
-    color: ${theme.getComputed.color.mutedText};
-    margin: 0 0 0 ${theme.spaceS};
+    color: var(--rebilly-colorMutedText);
+    margin: 0 0 0 var(--rebilly-spacings-s);
   }
 
   .rebilly-instruments-summary-line-item-price-breakdown .rebilly-instruments-icon {
-    fill: ${theme.getComputed.color.mutedText};
+    fill: var(--rebilly-colorMutedText);
   }
 
   .rebilly-instruments-summary-line-item-price-breakdown-unit-price {
-    color: ${theme.color.text};
+    color: var(--rebilly-colorText);
   }
 
   .rebilly-instruments-summary-breakdown table {
     width: 100%;
-    margin: ${theme.space.xs} 0;
+    margin: var(--rebilly-spacings-xs) 0;
     color: inherit;
   }
 
@@ -82,33 +82,37 @@ export const summary = (theme) => `
   }
 
   .rebilly-instruments-summary-breakdown table tr td:first-child {
-    padding-right: ${theme.space.s};
+    padding-right: var(--rebilly-spacings-s);
     font-weight: 500;
   }
 
+  .rebilly-instruments-summary-breakdown table {
+    border-bottom: 1px solid var(--rebilly-colorMutedBorder);
+    padding-bottom: var(--rebilly-spacings-xs);
+  }
+
   .rebilly-instruments-summary-breakdown-total {
-    padding-top: ${theme.space.xs};
+    padding-top: var(--rebilly-spacings-xs);
     display: flex;
-    border-top: 1px solid ${theme.getComputed.color.mutedBorder};
     align-items: center;
   }
 
   .rebilly-instruments-summary-breakdown-total p {
-    margin: ${theme.space.s} 0;
+    margin: var(--rebilly-spacings-s) 0;
   }
 
   .rebilly-instruments-summary-breakdown-total-amount {
       flex: 1 2 80%;
-      font-size: 24px;
+      font-size: calc(var(--rebilly-fontSizeBase) * 1.5);
       font-weight: 500;
       text-align: right;
       font-weight: bold;
   }
 
   .rebilly-instruments-summary-breakdown-total-amount-currency {
-    font-size: ${theme.typography.fontSize};
+    font-size: var(--rebilly-fontSizeBase);
     font-weight: normal;
-    color: ${theme.getComputed.color.mutedText};
-    margin-right: ${theme.space.s};
+    color: var(--rebilly-colorMutedText);
+    margin-right: var(--rebilly-spacings-s);
   }
 `;

package/src/views/__snapshots__/summary.spec.js.snap

@@ -5,146 +5,151 @@ exports[`Summary component should render the summary correctly 1`] = `
   class="rebilly-instruments-summary-line-items"
 >
   
-      
+    
   <div
     class="rebilly-instruments-summary-line-item"
   >
     
-        
-        
+      
+      
     <div
       class="rebilly-instruments-summary-line-item-synopsis"
     >
       
-            
+          
       <p
         class="rebilly-instruments-summary-line-item-synopsis-title"
-      />
+      >
+        My Awesome Product
+      </p>
       
+          
             
-              
       <p
         class="rebilly-instruments-summary-line-item-synopsis-description"
       >
         My Awesome Product
       </p>
       
-            
-        
+          
+      
     </div>
     
-        
+      
     <div
       class="rebilly-instruments-summary-line-item-price-breakdown"
     >
       
-          
+        
       <p
         class="rebilly-instruments-summary-line-item-price-breakdown-quantity"
       >
         1
       </p>
       
-          
+        
       <svg
         class="rebilly-instruments-icon"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
         
-            
+          
         <path
           d="M12 10.5858l2.8284-2.8284c.3906-.3906 1.0237-.3906 1.4142 0 .3906.3905.3906 1.0236 0 1.4142L13.4142 12l2.8284 2.8284c.3906.3906.3906 1.0237 0 1.4142-.3905.3906-1.0236.3906-1.4142 0L12 13.4142l-2.8284 2.8284c-.3906.3906-1.0237.3906-1.4142 0-.3906-.3905-.3906-1.0236 0-1.4142L10.5858 12 7.7574 9.1716c-.3906-.3906-.3906-1.0237 0-1.4142.3905-.3906 1.0236-.3906 1.4142 0L12 10.5858z"
           fill-rule="nonzero"
         />
         
-          
+        
       </svg>
       
-          
+        
       <p
         class="rebilly-instruments-summary-line-item-price-breakdown-unit-price"
       >
         $30.00
       </p>
       
-        
+      
     </div>
     
-      
+    
   </div>
   
+  
+  
     
-      
   <div
     class="rebilly-instruments-summary-line-item"
   >
     
-        
-        
+      
+      
     <div
       class="rebilly-instruments-summary-line-item-synopsis"
     >
       
-            
+          
       <p
         class="rebilly-instruments-summary-line-item-synopsis-title"
-      />
+      >
+        My Awesome T-Shirt
+      </p>
       
+          
             
-              
       <p
         class="rebilly-instruments-summary-line-item-synopsis-description"
       >
         Awesome T-Shirt
       </p>
       
-            
-        
+          
+      
     </div>
     
-        
+      
     <div
       class="rebilly-instruments-summary-line-item-price-breakdown"
     >
       
-          
+        
       <p
         class="rebilly-instruments-summary-line-item-price-breakdown-quantity"
       >
         2
       </p>
       
-          
+        
       <svg
         class="rebilly-instruments-icon"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
         
-            
+          
         <path
           d="M12 10.5858l2.8284-2.8284c.3906-.3906 1.0237-.3906 1.4142 0 .3906.3905.3906 1.0236 0 1.4142L13.4142 12l2.8284 2.8284c.3906.3906.3906 1.0237 0 1.4142-.3905.3906-1.0236.3906-1.4142 0L12 13.4142l-2.8284 2.8284c-.3906.3906-1.0237.3906-1.4142 0-.3906-.3905-.3906-1.0236 0-1.4142L10.5858 12 7.7574 9.1716c-.3906-.3906-.3906-1.0237 0-1.4142.3905-.3906 1.0236-.3906 1.4142 0L12 10.5858z"
           fill-rule="nonzero"
         />
         
-          
+        
       </svg>
       
-          
+        
       <p
         class="rebilly-instruments-summary-line-item-price-breakdown-unit-price"
       >
         $20.00
       </p>
       
-        
+      
     </div>
     
-      
+    
   </div>
   
-    
+  
 </div>
 `;
 
@@ -152,137 +157,90 @@ exports[`Summary component should render the summary correctly 2`] = `
 <div
   class="rebilly-instruments-summary-breakdown"
 >
-  
-    
   <table>
     
-      
+        
     <colgroup>
       
-        
+          
       <col />
       
-        
+          
       <col />
       
-      
+        
     </colgroup>
     
       
-    <tbody>
-      <tr
-        class="rebilly-instruments-summary-breakdown-sub-total"
-      >
-        
-        
-        <td
-          data-rebilly-i18n="summary.subTotal"
-        >
-          Sub Total
-        </td>
-        
-        
-        <td>
-          $70.00
-        </td>
-        
-      
-      </tr>
-      
+    <tr
+      class="rebilly-instruments-summary-breakdown-sub-total"
+    >
       
-      <tr
-        class="rebilly-instruments-summary-breakdown-discounts"
-      >
         
-        
-        <td
-          data-rebilly-i18n="summary.discounts"
-        >
-          Discounts
-        </td>
-        
-        
-        <td>
-          $0.00
-        </td>
-        
-      
-      </tr>
-      
-      
-      <tr
-        class="rebilly-instruments-summary-breakdown-taxes"
+      <td
+        data-rebilly-i18n="summary.subTotal"
       >
+        Sub Total
+      </td>
+      
         
-        
-        <td
-          data-rebilly-i18n="summary.taxes"
-        >
-          Taxes
-        </td>
-        
-        
-        <td>
-          $0.00
-        </td>
-        
+      <td>
+        $70.00
+      </td>
       
-      </tr>
       
+    </tr>
+    <tr
+      class="rebilly-instruments-summary-breakdown-taxes"
+    >
       
-      <tr
-        class="rebilly-instruments-summary-breakdown-taxes"
-      >
-        
         
-        <td
-          data-rebilly-i18n="summary.shipping"
-        >
-          Shipping
-        </td>
-        
-        
-        <td>
-          $0.00
-        </td>
+      <td
+        data-rebilly-i18n="summary.taxes"
+      >
+        Taxes
+      </td>
+      
         
+      <td>
+        $0.00
+      </td>
       
-      </tr>
       
-    
-    </tbody>
+    </tr>
   </table>
-  
-    
   <div
     class="rebilly-instruments-summary-breakdown-total"
   >
     
-      
+    
     <p
       data-rebilly-i18n="summary.total"
     >
       Total
     </p>
     
-      
+    
     <p
       class="rebilly-instruments-summary-breakdown-total-amount"
     >
       
-        
+      
       <span
         class="rebilly-instruments-summary-breakdown-total-amount-currency"
       >
+        
         USD
+      
       </span>
+      
       $70.00
+    
+    </p>
+    <p>
       
+  
     </p>
-    
-    
   </div>
-  
-  
 </div>
 `;

package/src/views/common/iframe/base-iframe.js

@@ -2,6 +2,7 @@ import Postmate from 'popostmate';
 
 export default class BaseIframe {
   constructor({
+    state = {},
     name = '',
     url = '',
     model = {},
@@ -13,6 +14,7 @@ export default class BaseIframe {
       classListArray.push('rebilly-instruments-iframe');
     }
 
+    this.state = state;
     this.container = container;
     this.classListArray = classListArray;
     this.name = name;