@rebilly/instruments 1.0.1-beta → 1.0.2-beta.10

package/src/style/components/index.js

@@ -0,0 +1,35 @@
+import { expressMethods, methods } from './methods';
+import { form } from './forms/form';
+import { checkbox } from './forms/checkbox';
+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';
+
+// 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(theme)}
+  ${validation(theme)}
+  ${button(theme)}
+  ${divider(theme)}
+  ${loader(theme)}
+  ${icons(theme)}
+  ${address(theme)}
+  ${overlay(theme)}
+`;

package/src/style/components/loader.js

@@ -0,0 +1,41 @@
+// -----------------------------------------------------------------------------
+// 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;
+    background-color: ${theme.color.background};
+    z-index: 9000;
+    transition: all 200ms;
+  }
+
+  .rebilly-instruments-loader.is-active {
+    display: flex;
+  }
+
+  .rebilly-instruments-loader-spinner {
+    border: 4px solid ${theme.getComputed.color.primaryValues
+      .tint(80)
+      .hexString()};
+    border-top: 4px solid ${theme.color.primary};
+    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

@@ -0,0 +1,93 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the methods component.
+// -----------------------------------------------------------------------------
+export const expressMethods = (theme) => `
+  /**
+   * Express methods
+   */
+
+  @keyframes rebillyExpressShine {
+    to {
+      background-position-x: -200%;
+    }
+  }
+
+  .rebilly-instruments-express-methods.is-compact {
+    border: 1px solid ${theme.getComputed.color.mutedBorder};
+    padding: calc(${theme.space.xs} + ${theme.space.s}) ${theme.space.s} ${theme.space.s};
+    border-radius: ${theme.borderRadius};
+    position: relative;
+  }
+
+  .rebilly-instruments-express-methods iframe {
+    display: block;
+    margin-bottom: 0;
+  }
+
+  .rebilly-instruments-express-methods .rebilly-instruments-express-methods-container > * {
+    border-radius: 6px;
+    margin-bottom: ${theme.space.xs};
+    background: linear-gradient(110deg, ${theme.getComputed.color.mutedBorder} 0%, ${theme.color.background} 25%, ${theme.getComputed.color.mutedBorder} 50%);
+    background-size: 200% 100%;
+    animation: 1.5s rebillyExpressShine linear infinite;
+  }
+  .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 ${theme.space.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: -12px; left: 50%;
+    transform: translateX(-50%);
+    color: ${theme.color.text};
+    padding: 0 ${theme.space.s};
+    line-height: ${theme.typography.lineHeight};
+    background: ${theme.color.background};
+    display: inline-block;
+    font-weight: 500;
+    min-height: auto;
+    margin: 0;
+    border: 1px soplid red;
+  }
+
+  @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 ${theme.space.xs};
+    }
+    .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

@@ -0,0 +1,24 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the overlay component.
+// -----------------------------------------------------------------------------
+export const overlay = (theme) => `
+  /**
+  * 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: #ffffff;
+    font-family: ${theme.typography.fontFamily};
+    font-size: calc(${theme.typography.fontSize} * 1.12);
+    line-height: ${theme.typography.lineHeight};
+    z-index: 9001
+  }
+`;

package/src/style/helpers/index.js

@@ -0,0 +1,51 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to helpers.
+// -----------------------------------------------------------------------------
+
+export const helpers = (theme) => `
+    /* 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: ${theme.space.xxs}!important }
+    .rebilly-instruments-helper-mt-xs { margin-top: ${theme.space.xs}!important }
+    .rebilly-instruments-helper-mt-s { margin-top: ${theme.space.s}!important }
+    .rebilly-instruments-helper-mt-m { margin-top: ${theme.space.m}!important }
+    .rebilly-instruments-helper-mt-l { margin-top: ${theme.space.l}!important }
+    .rebilly-instruments-helper-mt-xl { margin-top: ${theme.space.xl}!important }
+    .rebilly-instruments-helper-mt-xxl { margin-top: ${theme.space.xxl}!important }
+    .rebilly-instruments-helper-mt-0 { margin-top: 0!important }
+    .rebilly-instruments-helper-mr-xxs { margin-right: ${theme.space.xxs}!important }
+    .rebilly-instruments-helper-mr-xs { margin-right: ${theme.space.xs}!important }
+    .rebilly-instruments-helper-mr-s { margin-right: ${theme.space.s}!important }
+    .rebilly-instruments-helper-mr-m { margin-right: ${theme.space.m}!important }
+    .rebilly-instruments-helper-mr-l { margin-right: ${theme.space.l}!important }
+    .rebilly-instruments-helper-mr-xl { margin-right: ${theme.space.xl}!important }
+    .rebilly-instruments-helper-mr-xxl { margin-right: ${theme.space.xxl}!important }
+    .rebilly-instruments-helper-mr-0 { margin-right: 0!important }
+    .rebilly-instruments-helper-mb-xxs { margin-bottom: ${theme.space.xxs}!important }
+    .rebilly-instruments-helper-mb-xs { margin-bottom: ${theme.space.xs}!important }
+    .rebilly-instruments-helper-mb-s { margin-bottom: ${theme.space.s}!important }
+    .rebilly-instruments-helper-mb-m { margin-bottom: ${theme.space.m}!important }
+    .rebilly-instruments-helper-mb-l { margin-bottom: ${theme.space.l}!important }
+    .rebilly-instruments-helper-mb-xl { margin-bottom: ${theme.space.xl}!important }
+    .rebilly-instruments-helper-mb-xxl { margin-bottom: ${theme.space.xxl}!important }
+    .rebilly-instruments-helper-mb-0 { margin-bottom: 0!important }
+    .rebilly-instruments-helper-ml-xxs { margin-left: ${theme.space.xxs}!important }
+    .rebilly-instruments-helper-ml-xs { margin-left: ${theme.space.xs}!important }
+    .rebilly-instruments-helper-ml-s { margin-left: ${theme.space.s}!important }
+    .rebilly-instruments-helper-ml-m { margin-left: ${theme.space.m}!important }
+    .rebilly-instruments-helper-ml-l { margin-left: ${theme.space.l}!important }
+    .rebilly-instruments-helper-ml-xl { margin-left: ${theme.space.xl}!important }
+    .rebilly-instruments-helper-ml-xxl { margin-left: ${theme.space.xxl}!important }
+    .rebilly-instruments-helper-ml-0 { margin-left: 0!important }
+  `;

package/src/style/index.js

@@ -0,0 +1,30 @@
+import postcss from 'postcss';
+import autoprefixer from 'autoprefixer';
+import { browserslist } from './browserslist';
+
+import { Theme } from './base/theme';
+import { base } from './base';
+import { framepayStyle } from './vendor/framepay';
+import { postmateStyle } from './vendor/postmate';
+import { components } from './components';
+import { paymentInstruments } from './payment-instruments';
+import { views } from './views';
+import { helpers } from './helpers';
+
+export const mainStyle = async (themeOverride) => {
+  const resolvedTheme = new Theme(themeOverride).build();
+
+  const style = `
+    ${base(resolvedTheme)}
+    ${components(resolvedTheme)}
+    ${views(resolvedTheme)}
+    ${paymentInstruments(resolvedTheme)}
+    ${framepayStyle(resolvedTheme)}
+    ${postmateStyle(resolvedTheme)}
+    ${helpers(resolvedTheme)}
+  `;
+
+  return postcss([autoprefixer(browserslist)])
+    .process(style, { from: undefined })
+    .then((result) => result.css);
+};

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

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

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

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

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

@@ -0,0 +1,26 @@
+export const paymentCard = (theme) => `
+  /**
+  * Payment card
+  */
+  .rebilly-instruments-payment-card-brands {
+    display: inline-flex;
+    width: 100%;
+    justify-content: flex-end;
+    margin-top: ${theme.space.s} 
+  }
+
+  .rebilly-instruments-payment-card-brands figure {
+    margin: 0 0 0 ${theme.space.xxs};
+    padding: 0;
+    height: 26px;
+  }
+
+  .rebilly-instruments-payment-card-brands figure img {
+    width: 42px;
+    border-radius: ${theme.borderRadius};
+  }
+
+  .rebilly-instruments-modal-container.rebilly-instruments-payment-card {
+    max-width: 600px;
+  }
+`;

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

@@ -0,0 +1,9 @@
+import Values from 'values.js';
+
+export const colorValues = (color) => new Values(color);
+
+export function alphaColor(color, alphaValue = 1) {
+  const _alphaColor = new Values(color);
+  _alphaColor.alpha = alphaValue;
+  return _alphaColor.rgbString();
+}

package/src/style/vendor/framepay.js

@@ -0,0 +1,25 @@
+export const framepayStyle = (theme) => `
+    .rebilly-instruments-framepay .rebilly-framepay {
+      box-shadow: none; 
+      min-height: ${theme.space.form.minHeight};
+      border: 1px solid ${theme.getComputed.color.mutedBorder};
+      margin-bottom: 0;
+      background: ${theme.color.background};
+    }
+
+    .rebilly-instruments-framepay .rebilly-framepay.rebilly-framepay-focus {
+      border: 1px solid ${theme.color.primary};
+      box-shadow: 0 0 0 1px ${theme.color.primary};
+    }
+
+    .rebilly-instruments-framepay .rebilly-framepay.rebilly-framepay-invalid {
+      border: 1px solid ${theme.color.errorText};
+      box-shadow: none;
+    }
+
+    .rebilly-instruments-framepay .rebilly-framepay.rebilly-framepay-digital-wallet {
+      min-height: auto;
+      border: none;
+      margin: 0;
+    }
+  `;

package/src/style/vendor/postmate.js

@@ -0,0 +1,8 @@
+export const postmateStyle = (theme) => `
+    .rebilly-instruments-iframe {
+      border: none;
+      width: 100%;
+      min-height: ${theme.space.form.minHeight};
+      transition: all 0.2s ease;
+    }
+  `;

package/src/style/views/confirmation.js

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

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 = (theme) => `
+  /**
+  * Method selector
+  */
+  .rebilly-instruments-method-selector {
+    padding-top: ${theme.space.s};
+  }
+`;

package/src/style/views/modal.js

@@ -0,0 +1,84 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the modal view.
+// -----------------------------------------------------------------------------
+export const modal = (theme) => `
+  /**
+  * 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;
+    min-height: 240px;
+    background: ${theme.color.background};
+    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};
+    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: ${theme.color.background};
+    text-align: center;
+    border-radius: ${theme.borderRadius};
+  }
+
+  .rebilly-instruments-modal-content .rebilly-instruments-iframe {
+    transition: all .15s;
+    height: 100%;
+  }
+
+  .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: #ffffff;
+    cursor: pointer;
+  }
+  
+  .rebilly-instruments-modal-close:hover{
+    color: #000;
+  }
+`;

package/src/style/views/result.js

@@ -0,0 +1,52 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the result view.
+// -----------------------------------------------------------------------------
+export const result = (theme) => `
+  /**
+  * Result
+  */
+  .rebilly-instruments-results .rebilly-instruments-h1 {
+    text-align: center;
+    margin: 0;
+  }
+
+  .rebilly-instruments-results-icon {
+    width: 160px;
+    margin: 0 auto ${theme.space.m} auto;
+    display: block;
+  }
+
+  .rebilly-instruments-results-icon g {
+    stroke: ${theme.color.primary};
+  }
+
+  .rebilly-instruments-results-icon.is-error g {
+    stroke: ${theme.color.errorText};
+  }
+
+  .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;
+    }
+  }
+`;