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

package/src/style/components/icons.js

@@ -1,13 +0,0 @@
-// -----------------------------------------------------------------------------
-// This file contains all styles related to the icons component.
-// -----------------------------------------------------------------------------
-export const icons = () => `
-  /**
-  * Icons
-  */
-  .rebilly-instruments-icon {
-    width: var(--rebilly-fontLineHeightBase, calc(var(--rebilly-fontSizeBase) * 1.5));
-    height: var(--rebilly-fontLineHeightBase, calc(var(--rebilly-fontSizeBase) * 1.5));
-    fill: var(--rebilly-colorText);
-  }
-`;

package/src/style/components/index.js

@@ -1,39 +0,0 @@
-import { expressMethods, methods } from './methods';
-import { form } from './forms/form';
-import { checkbox } from './forms/checkbox';
-import { radio } from './forms/radio';
-import { field } from './forms/field';
-import { input } from './forms/input';
-import { label } from './forms/label';
-import { select } from './forms/select';
-import { validation } from './forms/validation';
-import { button } from './button';
-import { divider } from './divider';
-import { loader } from './loader';
-import { icons } from './icons';
-import { address } from './address';
-import { overlay } from './overlay';
-import { accordion } from './accordion';
-
-// Order of components matters for style cascade
-export const components = (theme) => `
-  /* Components
-  ------------------------------------------------------------ */
-  ${expressMethods(theme)}
-  ${methods()}
-  ${form(theme)}
-  ${field(theme)}
-  ${input(theme)}
-  ${select(theme)}
-  ${label(theme)}
-  ${checkbox()}
-  ${radio()}
-  ${validation(theme)}
-  ${button(theme)}
-  ${divider(theme)}
-  ${loader(theme)}
-  ${icons(theme)}
-  ${address(theme)}
-  ${overlay(theme)}
-  ${accordion()}
-`;

package/src/style/components/loader.js

@@ -1,41 +0,0 @@
-import { lighten } from '../utils/color-values';
-// -----------------------------------------------------------------------------
-// This file contains all styles related to the loader component.
-// -----------------------------------------------------------------------------
-export const loader = (theme) => `
-  /**
-  * Loader
-  */
-  .rebilly-instruments-loader {
-    display: none;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    background-color: var(--rebilly-colorBackground);
-    z-index: 1000;
-    transition: all 200ms;
-  }
-
-  .rebilly-instruments-loader.is-active {
-    display: flex;
-  }
-
-  .rebilly-instruments-loader-spinner {
-    border: 4px solid ${lighten(theme.colorPrimary, 80)};
-    border-top: 4px solid var(--rebilly-colorPrimary);
-    border-radius: 50%;
-    width: 40px;
-    height: 40px;
-    animation: spin 0.5s ease infinite;
-  }
-
-  @keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-  }
-`;

package/src/style/components/methods.js

@@ -1,97 +0,0 @@
-// -----------------------------------------------------------------------------
-// This file contains all styles related to the methods component.
-// -----------------------------------------------------------------------------
-export const expressMethods = () => `
-  /**
-   * Express methods
-   */
-
-  @keyframes rebillyExpressShine {
-    to {
-      background-position-x: -200%;
-    }
-  }
-
-  .rebilly-instruments-express-methods.is-compact {
-    border: 1px solid var(--rebilly-colorMutedBorder);
-    padding: var(--rebilly-spacings-s);
-    padding-top: calc(var(--rebilly-spacings-xs) + var(--rebilly-spacings-s));
-    padding-top: calc(var(--rebilly-fontSizeBase) + var(--rebilly-spacings-2xs));
-    border-radius: 4px;
-    position: relative;
-  }
-
-  .rebilly-instruments-express-methods .rebilly-instruments-iframe {
-    display: block;
-    margin-bottom: 0;
-    height: 44px;
-  }
-
-  .rebilly-instruments-express-methods .rebilly-instruments-express-methods-container > * {
-    border-radius: 6px;
-    margin-bottom: var(--rebilly-spacings-xs);
-    background: linear-gradient(110deg, var(--rebilly-colorMutedBorder) 0%, var(--rebilly-colorBackground) 25%, var(--rebilly-colorMutedBorder) 50%);
-    background-size: 200% 100%;
-    animation: 1.5s rebillyExpressShine linear infinite;
-    height: 44px;
-  }
-  .rebilly-instruments-express-methods .rebilly-instruments-express-methods-container > *:last-child {
-    margin: 0;
-  }
-
-  .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container {
-    display: flex;
-    justify-content: center;
-  }
-
-  .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container > * {
-    flex: 1 1 0px;
-    max-width: 260px;
-    margin: 0 var(--rebilly-spacings-xs);
-  }
-  .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container > *:first-child {
-    margin-left: 0;
-  }
-  .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container > *:last-child {
-    margin-right: 0;
-  }
-
-  .rebilly-instruments-express-methods .rebilly-instruments-express-methods-label {
-    display: none;
-  }
-  .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-label {
-    position: absolute;
-    top: 0; left: 50%;
-    transform: translateX(-50%) translateY(-50%);
-    color: var(--rebilly-colorText);
-    padding: var(--rebilly-spacings-2xs) var(--rebilly-spacings-s);
-    line-height: 1;
-    background: var(--rebilly-colorBackground);
-    display: inline-block;
-    font-weight: 500;
-    min-height: auto;
-    margin: 0;
-    white-space: nowrap;
-  }
-
-  @media (max-width: 600px) {
-    .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container  {
-      flex-direction: column;
-    }
-    .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container > * {
-      max-width: 100%;
-      margin: 0 0 var(--rebilly-spacings-s);
-    }
-    .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container > *:last-child {
-      margin: 0;
-    }
-  }
-`;
-
-export const methods = () => `
-  /**
-  * Methods
-  */
-
-  .rebilly-instruments-methods {}
-`;

package/src/style/components/overlay.js

@@ -1,24 +0,0 @@
-// -----------------------------------------------------------------------------
-// This file contains all styles related to the overlay component.
-// -----------------------------------------------------------------------------
-export const overlay = () => `
-  /**
-  * Overlay
-  */
-  .rebilly-instruments-overlay {
-    position: fixed;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    background: rgba(0,0,0,0.8);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: #FFF;
-    font-family: var(--rebilly-fontFamily);
-    font-size: calc(var(--rebilly-fontSizeBase) * 1.12);
-    line-height: var(--rebilly-fontLineHeightBase, calc(var(--rebilly-fontSizeBase) * 1.5));
-    z-index: 9001
-  }
-`;

package/src/style/helpers/index.js

@@ -1,54 +0,0 @@
-// -----------------------------------------------------------------------------
-// This file contains all styles related to helpers.
-// -----------------------------------------------------------------------------
-
-export const helpers = () => `
-  /* Helpers
-  ------------------------------------------------------------ */
-  .rebilly-instruments-helper-visually-hidden {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-  }
-
-  .rebilly-instruments-helper-mt-xxs { margin-top: var(--rebilly-spacings-2xs) !important }
-  .rebilly-instruments-helper-mt-xs { margin-top: var(--rebilly-spacings-xs) !important }
-  .rebilly-instruments-helper-mt-s { margin-top: var(--rebilly-spacings-s) !important }
-  .rebilly-instruments-helper-mt-m { margin-top: var(--rebilly-spacings-base) !important }
-  .rebilly-instruments-helper-mt-l { margin-top: var(--rebilly-spacings-l) !important }
-  .rebilly-instruments-helper-mt-xl { margin-top: var(--rebilly-spacings-xl) !important }
-  .rebilly-instruments-helper-mt-xxl { margin-top: var(--rebilly-spacings-2xl) !important }
-  .rebilly-instruments-helper-mt-0 { margin-top: 0!important }
-  .rebilly-instruments-helper-mr-xxs { margin-right: var(--rebilly-spacings-2xs) !important }
-  .rebilly-instruments-helper-mr-xs { margin-right: var(--rebilly-spacings-xs) !important }
-  .rebilly-instruments-helper-mr-s { margin-right: var(--rebilly-spacings-s) !important }
-  .rebilly-instruments-helper-mr-m { margin-right: var(--rebilly-spacings-base) !important }
-  .rebilly-instruments-helper-mr-l { margin-right: var(--rebilly-spacings-l) !important }
-  .rebilly-instruments-helper-mr-xl { margin-right: var(--rebilly-spacings-xl) !important }
-  .rebilly-instruments-helper-mr-xxl { margin-right: var(--rebilly-spacings-2xl) !important }
-  .rebilly-instruments-helper-mr-0 { margin-right: 0!important }
-  .rebilly-instruments-helper-mb-xxs { margin-bottom: var(--rebilly-spacings-2xs) !important }
-  .rebilly-instruments-helper-mb-xs { margin-bottom: var(--rebilly-spacings-xs) !important }
-  .rebilly-instruments-helper-mb-s { margin-bottom: var(--rebilly-spacings-s) !important }
-  .rebilly-instruments-helper-mb-m { margin-bottom: var(--rebilly-spacings-base) !important }
-  .rebilly-instruments-helper-mb-l { margin-bottom: var(--rebilly-spacings-l) !important }
-  .rebilly-instruments-helper-mb-xl { margin-bottom: var(--rebilly-spacings-xl) !important }
-  .rebilly-instruments-helper-mb-xxl { margin-bottom: var(--rebilly-spacings-2xl) !important }
-  .rebilly-instruments-helper-mb-0 { margin-bottom: 0!important }
-  .rebilly-instruments-helper-ml-xxs { margin-left: var(--rebilly-spacings-2xs) !important }
-  .rebilly-instruments-helper-ml-xs { margin-left: var(--rebilly-spacings-xs) !important }
-  .rebilly-instruments-helper-ml-s { margin-left: var(--rebilly-spacings-s) !important }
-  .rebilly-instruments-helper-ml-m { margin-left: var(--rebilly-spacings-base) !important }
-  .rebilly-instruments-helper-ml-l { margin-left: var(--rebilly-spacings-l) !important }
-  .rebilly-instruments-helper-ml-xl { margin-left: var(--rebilly-spacings-xl) !important }
-  .rebilly-instruments-helper-ml-xxl { margin-left: var(--rebilly-spacings-2xl) !important }
-  .rebilly-instruments-helper-ml-0 { margin-left: 0!important }
-
-  .rebilly-instruments-display-flex { display: flex!important }
-  .rebilly-instruments-align-items-center { align-items: center!important }
-`;

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

@@ -1,8 +0,0 @@
-export const methodContent = () => `
-  /**
-  * Content
-  */
-   .rebilly-instruments-method-content {
-    padding: 2px;
-  }
-`;

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

@@ -1,14 +0,0 @@
-import { methodContent } from './content';
-import { paymentCard } from './payment-card';
-import { paymentInstrumentList } from './payment-instrument-list';
-import { paymentInstrument } from './payment-instrument';
-
-// Order of components matters for style cascade
-export const paymentInstruments = (theme) => `
-  /* Payment instruments
-  ------------------------------------------------------------ */
-  ${methodContent()}
-  ${paymentCard(theme)}
-  ${paymentInstrument()}
-  ${paymentInstrumentList()}
-`;

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

@@ -1,27 +0,0 @@
-export const paymentCard = () => `
-  /**
-  * Payment card
-  */
-  .rebilly-instruments-payment-card-brands {
-    display: inline-flex;
-    width: 100%;
-    justify-content: flex-end;
-    margin-top: var(--rebilly-spacings-s);
-  }
-
-  .rebilly-instruments-payment-card-brands figure {
-    margin: 0 0 0 var(--rebilly-spacings-2xs);
-    padding: 0;
-    height: 26px;
-  }
-
-  .rebilly-instruments-payment-card-brands figure img {
-    width: auto;
-    height: 100%;
-    border-radius: 4px;
-  }
-
-  .rebilly-instruments-modal-container.rebilly-instruments-payment-card {
-    max-width: 600px;
-  }
-`;

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

@@ -1,44 +0,0 @@
-// -----------------------------------------------------------------------------
-// This file contains all styles related to the payment instrument list component.
-// -----------------------------------------------------------------------------
-export const paymentInstrumentList = () => `
-  .rebilly-instruments-payment-instrument-list {
-    margin: 0;
-    padding: 0;
-  }
-
-  .rebilly-instruments-payment-instrument-list > li {
-    display: flex;
-    width: 100%;
-    align-items: center;
-    list-style-type: none;
-    padding: var(--rebilly-spacings-xs) 0;
-  }
-
-  .rebilly-instruments-payment-instrument-list > li:first-child {
-    padding-top: 0;
-  }
-
-  .rebilly-instruments-payment-instrument-list > li:last-child {
-    padding-bottom: 0;
-  }
-
-  .rebilly-instruments-payment-instrument-list > li + li {
-    border-top: 1px solid var(--rebilly-colorMutedBorder);
-  }
-
-  .rebilly-instruments-payment-instrument-list.is-relaxed > li {
-    min-height: var(--rebilly-spacings-form-element-min-height);
-  }
-
-  .rebilly-instruments-payment-instrument-list .rebilly-instruments-form-field {
-    width: 100%;
-  }
-
-  .rebilly-instruments-payment-instrument-list > li .rebilly-instruments-payment-instrument-list-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-  }
-`;

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

@@ -1,55 +0,0 @@
-// -----------------------------------------------------------------------------
-// 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/remove-empty-null.js

@@ -1,10 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,26 +0,0 @@
-// -----------------------------------------------------------------------------
-// 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

@@ -1,16 +0,0 @@
-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

@@ -1,11 +0,0 @@
-// -----------------------------------------------------------------------------
-// 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

@@ -1,91 +0,0 @@
-// -----------------------------------------------------------------------------
-// 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;
-    }
-  }
-`;