@rebilly/instruments 3.13.2-beta.0 → 3.13.4-beta.0

package/src/style/payment-instruments/payment-instrument.js

@@ -0,0 +1,55 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the payment instrument component.
+// -----------------------------------------------------------------------------
+export const paymentInstrument = () => `
+  .rebilly-instruments-payment-instrument {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 26px;
+    margin: 0 0 var(--rebilly-spacings-l);
+  }
+
+  .rebilly-instruments-payment-instrument figure {
+    margin: 0 var(--rebilly-spacings-2xs) 0 0;
+    height: 26px;
+    padding: 0;
+  }
+
+  .rebilly-instruments-payment-instrument figure img {
+    width: auto;
+    height: 100%;
+    border-radius: 4px;
+  }
+
+  .rebilly-instruments-payment-instrument-brand,
+  .rebilly-instruments-payment-instrument-exp,
+  .rebilly-instruments-payment-instrument-last4 {
+    display: inline-block;
+    white-space: nowrap;
+  }
+
+  .rebilly-instruments-payment-instrument-brand {
+    margin: 0 0 0 var(--rebilly-spacings-xs);
+  }
+
+  .rebilly-instruments-payment-instrument-last4 {
+    margin: 0 var(--rebilly-spacings-s);
+  }
+
+  .rebilly-instruments-payment-instrument-exp {
+    color: var(--rebilly-colorMutedText);
+  }
+
+  @media screen and (max-width: 480px) {
+    .rebilly-instruments-payment-instrument-exp {
+      display: none;
+    }
+  }
+
+  @media screen and (max-width: 320px) {
+    .rebilly-instruments-payment-instrument-brand {
+      display: none;
+    }
+  }
+`;

package/src/style/utils/color-values.js

@@ -12,7 +12,7 @@ export function alphaColor(color, alphaValue = 1) {
   return _alphaColor.rgbString();
 }
 
-export const mutedTextColor = (color) => alphaColor(color, 0.5);
+export const mutedTextColor = (color) => alphaColor(color, 0.6);
 
 export const mutedBorderColor = (color) => alphaColor(color, 0.25);
 

package/src/style/utils/remove-empty-null.js

@@ -0,0 +1,10 @@
+export default () => ({
+        postcssPlugin: 'postcss-remove-empty-null',
+        Once (root) {
+            root.walkAtRules(decl => {
+                if ((decl.value === '\'\'' ||  decl.value === '""' || decl.value.includes('null')) && decl.prop !== 'content') {
+                    decl.remove();
+                }
+            });
+        }
+    })

package/src/style/vendor/framepay.js

@@ -0,0 +1,28 @@
+export const framepayStyle = () => `
+    .rebilly-instruments-framepay .rebilly-framepay {
+      min-height: var(--rebilly-spacings-form-element-min-height);
+      border: var(--rebilly-inputBorder);
+      margin-bottom: 0;
+      background: var(--rebilly-inputColorBackground);
+      border-radius: var(--rebilly-inputBorderRadius);
+      box-shadow: var(--rebilly-inputBoxShadow);
+    }
+
+    .rebilly-instruments-framepay .rebilly-framepay.rebilly-framepay-focus {
+      background: var(--rebilly-inputFocusColorBackground);
+      border: var(--rebilly-inputFocusBorder);
+      border-radius: var(--rebilly-inputFocusBorderRadius);
+      box-shadow: var(--rebilly-inputFocusBoxShadow);
+    }
+
+    .rebilly-instruments-framepay .rebilly-framepay.rebilly-framepay-invalid {
+      border-color: var(--rebilly-colorDanger);
+      box-shadow: none;
+    }
+
+    .rebilly-instruments-framepay .rebilly-framepay.rebilly-framepay-google-pay {
+      min-height: auto;
+      border: none;
+      margin: 0;
+    }
+  `;

package/src/style/vendor/postmate.js

@@ -0,0 +1,18 @@
+export const postmateStyle = () => `
+    .rebilly-instruments-iframe {
+      border: none;
+      width: 100%;
+      padding: 0;
+      min-height: var(--rebilly-spacings-form-element-min-height);
+    }
+
+    .rebilly-instruments-iframe-overlay {
+      top: -2px;
+      left: -2px;
+      width: calc(100vw + 2px);
+      height: 100vh;
+      min-height: calc(100vh + 4px);
+      position: fixed;
+      z-index: 99999999999999;
+    }
+  `;

package/src/style/views/confirmation.js

@@ -0,0 +1,26 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the confirmation view.
+// -----------------------------------------------------------------------------
+export const confirmation = () => `
+  /**
+  * Confirmation
+  */
+  .rebilly-instruments-confirmation {
+    padding: 2px;
+  }
+
+  .rebilly-instruments-confirmation-go-back-link {
+    display: inline-block;
+    margin-bottom: var(--rebilly-spacings-base);
+    margin-left: calc(var(--rebilly-spacings-xs) * -1);
+  }
+
+  .rebilly-instruments-confirmation-address-title {
+    display: flex;
+    justify-content: flex-start;
+  }
+
+  .rebilly-instruments-confirmation-address-title .rebilly-instruments-link {
+    margin-left: var(--rebilly-spacings-s);
+  }
+`;

package/src/style/views/index.js

@@ -0,0 +1,16 @@
+import { summary } from './summary';
+import { methodSelector } from './method-selector';
+import { confirmation } from './confirmation';
+import { result } from './result';
+import { modal } from './modal';
+
+// Order of components matters for style cascade
+export const views = (theme) => `
+  /* Views
+  ------------------------------------------------------------ */
+    ${summary(theme)}
+    ${methodSelector(theme)}
+    ${confirmation(theme)}
+    ${result(theme)}
+    ${modal(theme)}
+  `;

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

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

package/src/style/views/modal.js

@@ -0,0 +1,91 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the modal view.
+// -----------------------------------------------------------------------------
+export const modal = () => `
+  /**
+  * Modal
+  */
+
+  .rebilly-instruments-modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    z-index: 1055;
+    padding: 30px;
+    width:  100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    transition: all 0.12s ease-in-out;
+    background-color: rgba(0,0,0,0.7);
+    opacity: 0
+  }
+
+  .rebilly-instruments-modal-overlay.is-visible {
+    opacity: 1;
+  }
+
+  .rebilly-instruments-modal-container {
+    transition: all .24s ease-in-out;
+    position: relative;
+    max-width: 800px;
+    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: 4px;
+    transform: translateY(-50px);
+    opacity: 0;
+  }
+
+  .rebilly-instruments-modal-container.is-visible {
+    transform: translateY(0);
+    opacity: 1;
+  }
+
+  .rebilly-instruments-modal-container.is-redirect {
+    max-width: 60vw;
+    width: auto;
+  }
+
+  .rebilly-instruments-modal-content {
+    transition: all .15s;
+    padding: 20px;
+    overflow: hidden;
+    background-color: var(--rebilly-colorBackground);
+    text-align: center;
+    border-radius: 4px;
+  }
+
+  .rebilly-instruments-modal-content .rebilly-instruments-iframe {
+    transition: all .15s;
+    height: auto;
+    min-height: 360px;
+  }
+
+  .rebilly-instruments-modal-container.is-redirect .rebilly-instruments-modal-content {
+    padding: 0;
+  }
+
+  .rebilly-instruments-modal-close {
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    top: -40px;
+    right: 0;
+    fill: #FFF;
+    cursor: pointer;
+  }
+  
+  .rebilly-instruments-modal-close:hover{
+    color: #000;
+  }
+
+  @media screen and (max-width: 480px) {
+    .rebilly-instruments-modal-container.is-redirect {
+      max-width: 96vw;
+      margin: 20px auto 20px;
+    }
+  }
+`;

package/src/style/views/result.js

@@ -0,0 +1,52 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the result view.
+// -----------------------------------------------------------------------------
+export const result = () => `
+  /**
+  * Result
+  */
+  .rebilly-instruments-results .rebilly-instruments-h1 {
+    text-align: center;
+    margin: 0;
+  }
+
+  .rebilly-instruments-results-icon {
+    width: 160px;
+    margin: 0 auto var(--rebilly-spacings-base) auto;
+    display: block;
+  }
+
+  .rebilly-instruments-results-icon g {
+    stroke: var(--rebilly-colorPrimary);
+  }
+
+  .rebilly-instruments-results-icon.is-error g {
+    stroke: var(--rebilly-colorDanger);
+  }
+
+  .rebilly-instruments-results-icon path {
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .rebilly-instruments-results-icon path.circle {
+    stroke-dasharray: 350;
+    stroke-dashoffset: 0;
+    animation: 0.6s cubic-bezier(1.0, 0.5, 0.8, 1.0) 1 rebillyDashResultIcon;
+  }
+
+  .rebilly-instruments-results-icon path.mark {
+    stroke-dasharray: 350;
+    stroke-dashoffset: 0;
+    animation: 1s cubic-bezier(1.0, 0.5, 0.8, 1.0) 1 rebillyDashResultIcon;
+  }
+
+  @keyframes rebillyDashResultIcon {
+    from {
+        stroke-dashoffset: 350;
+    }
+    to {
+        stroke-dashoffset: 0;
+    }
+  }
+`;

package/src/style/views/summary.js

@@ -0,0 +1,118 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the summary view.
+// -----------------------------------------------------------------------------
+export const summary = () => `
+  /**
+  * Summary
+  */
+  .rebilly-instruments-summary-line-item {
+    border-bottom: 1px solid var(--rebilly-colorMutedBorder);
+    padding: var(--rebilly-spacings-s) 0;
+    display: flex;
+    align-items: center;
+    position: relative;
+  }
+
+  .rebilly-instruments-summary-line-item:first-child {
+    padding-top: 0;
+  }
+
+  .rebilly-instruments-summary-line-item-figure {
+    margin: 0 var(--rebilly-spacings-s) 0 0;
+    flex: 0 0 auto;
+    width: 48px;
+    height: 48px;
+    border-radius: var(--rebilly-borderRadius);
+    border: 1px solid var(--rebilly-colorMutedBorder);
+    overflow: hidden;
+  }
+
+  .rebilly-instruments-summary-line-item-figure img {
+    width: 100%;
+  }
+
+  .rebilly-instruments-summary-line-item-synopsis {
+    flex: 1 2 auto;
+  }
+
+  .rebilly-instruments-summary-line-item-synopsis-title {
+    margin: 0;
+    font-weight: 500;
+  }
+
+  .rebilly-instruments-summary-line-item-synopsis-description {
+    color: var(--rebilly-colorMutedText);
+    margin: 0;
+    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: var(--rebilly-colorMutedText);
+    margin: 0 0 0 var(--rebilly-spacings-s);
+  }
+
+  .rebilly-instruments-summary-line-item-price-breakdown .rebilly-instruments-icon {
+    fill: var(--rebilly-colorMutedText);
+  }
+
+  .rebilly-instruments-summary-line-item-price-breakdown-unit-price {
+    color: var(--rebilly-colorText);
+  }
+
+  .rebilly-instruments-summary-breakdown table {
+    width: 100%;
+    margin: var(--rebilly-spacings-xs) 0;
+    color: inherit;
+  }
+
+  .rebilly-instruments-summary-breakdown table colgroup col:first-child {
+    width: 85%;
+  }
+
+  .rebilly-instruments-summary-breakdown table colgroup col {
+    width: 15%;
+  }
+
+  .rebilly-instruments-summary-breakdown table tr td {
+    text-align: right;
+  }
+
+  .rebilly-instruments-summary-breakdown table tr td:first-child {
+    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: var(--rebilly-spacings-xs);
+    display: flex;
+    align-items: center;
+  }
+
+  .rebilly-instruments-summary-breakdown-total p {
+    margin: var(--rebilly-spacings-s) 0;
+  }
+
+  .rebilly-instruments-summary-breakdown-total-amount {
+      flex: 1 2 80%;
+      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: var(--rebilly-fontSizeBase);
+    font-weight: normal;
+    color: var(--rebilly-colorMutedText);
+    margin-right: var(--rebilly-spacings-s);
+  }
+`;

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

@@ -0,0 +1,246 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Summary component should render the summary correctly 1`] = `
+<div
+  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>
+`;
+
+exports[`Summary component should render the summary correctly 2`] = `
+<div
+  class="rebilly-instruments-summary-breakdown"
+>
+  <table>
+    
+        
+    <colgroup>
+      
+          
+      <col />
+      
+          
+      <col />
+      
+        
+    </colgroup>
+    
+      
+    <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-taxes"
+    >
+      
+        
+      <td
+        data-rebilly-i18n="summary.taxes"
+      >
+        Taxes
+      </td>
+      
+        
+      <td>
+        $0.00
+      </td>
+      
+      
+    </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>
+`;