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

package/dist/style/components/forms/validation.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validation = void 0;
+
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the form validations.
+// -----------------------------------------------------------------------------
+const validation = theme => `
+  /**
+  * Validations
+  */
+  .rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input,
+  .rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-select {
+    border-color: ${theme.color.errorText};
+    color: ${theme.color.errorText};
+  }
+
+  .rebilly-instruments-form-field-error-wrapper {
+    margin-top: ${theme.space.xxs};
+    margin-bottom: calc(${theme.space.xxs} + ${theme.space.s});
+    padding: 0;
+    list-style: none;
+  }
+
+  .rebilly-instruments-form-field-error-wrapper > li {
+    color: ${theme.color.errorText};
+    padding: 0;
+  }
+`;
+
+exports.validation = validation;

package/dist/style/components/icons.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.icons = void 0;
+
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the icons component.
+// -----------------------------------------------------------------------------
+const icons = theme => `
+  /**
+  * Icons
+  */
+  .rebilly-instruments-icon {
+    width: ${theme.typography.lineHeight};
+    height: ${theme.typography.lineHeight};
+    fill: ${theme.color.text};
+  }
+`;
+
+exports.icons = icons;

package/dist/style/components/index.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.components = void 0;
+
+var _methods = require("./methods");
+
+var _form = require("./forms/form");
+
+var _checkbox = require("./forms/checkbox");
+
+var _field = require("./forms/field");
+
+var _input = require("./forms/input");
+
+var _label = require("./forms/label");
+
+var _select = require("./forms/select");
+
+var _validation = require("./forms/validation");
+
+var _button = require("./button");
+
+var _divider = require("./divider");
+
+var _loader = require("./loader");
+
+var _icons = require("./icons");
+
+var _address = require("./address");
+
+var _overlay = require("./overlay");
+
+// Order of components matters for style cascade
+const components = theme => `
+  /* Components
+  ------------------------------------------------------------ */
+  ${(0, _methods.expressMethods)(theme)}
+  ${(0, _methods.methods)()}
+  ${(0, _form.form)(theme)}
+  ${(0, _field.field)(theme)}
+  ${(0, _input.input)(theme)}
+  ${(0, _select.select)(theme)}
+  ${(0, _label.label)(theme)}
+  ${(0, _checkbox.checkbox)(theme)}
+  ${(0, _validation.validation)(theme)}
+  ${(0, _button.button)(theme)}
+  ${(0, _divider.divider)(theme)}
+  ${(0, _loader.loader)(theme)}
+  ${(0, _icons.icons)(theme)}
+  ${(0, _address.address)(theme)}
+  ${(0, _overlay.overlay)(theme)}
+`;
+
+exports.components = components;

package/dist/style/components/loader.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.loader = void 0;
+
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the loader component.
+// -----------------------------------------------------------------------------
+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); }
+  }
+`;
+
+exports.loader = loader;

package/dist/style/components/methods.js

@@ -0,0 +1,104 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.methods = exports.expressMethods = void 0;
+
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the methods component.
+// -----------------------------------------------------------------------------
+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;
+    }
+  }
+`;
+
+exports.expressMethods = expressMethods;
+
+const methods = () => `
+  /**
+  * Methods
+  */
+
+  .rebilly-instruments-methods {}
+`;
+
+exports.methods = methods;

package/dist/style/components/overlay.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.overlay = void 0;
+
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the overlay component.
+// -----------------------------------------------------------------------------
+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
+  }
+`;
+
+exports.overlay = overlay;

package/dist/style/helpers/index.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.helpers = void 0;
+
+// -----------------------------------------------------------------------------
+// This file contains all styles related to helpers.
+// -----------------------------------------------------------------------------
+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 }
+  `;
+
+exports.helpers = helpers;

package/dist/style/index.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mainStyle = void 0;
+
+var _postcss = _interopRequireDefault(require("postcss"));
+
+var _autoprefixer = _interopRequireDefault(require("autoprefixer"));
+
+var _browserslist = require("./browserslist");
+
+var _theme = require("./base/theme");
+
+var _base = require("./base");
+
+var _framepay = require("./vendor/framepay");
+
+var _postmate = require("./vendor/postmate");
+
+var _components = require("./components");
+
+var _paymentInstruments = require("./payment-instruments");
+
+var _views = require("./views");
+
+var _helpers = require("./helpers");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const mainStyle = async themeOverride => {
+  const resolvedTheme = new _theme.Theme(themeOverride).build();
+  const style = `
+    ${(0, _base.base)(resolvedTheme)}
+    ${(0, _components.components)(resolvedTheme)}
+    ${(0, _views.views)(resolvedTheme)}
+    ${(0, _paymentInstruments.paymentInstruments)(resolvedTheme)}
+    ${(0, _framepay.framepayStyle)(resolvedTheme)}
+    ${(0, _postmate.postmateStyle)(resolvedTheme)}
+    ${(0, _helpers.helpers)(resolvedTheme)}
+  `;
+  return (0, _postcss.default)([(0, _autoprefixer.default)(_browserslist.browserslist)]).process(style, {
+    from: undefined
+  }).then(result => result.css);
+};
+
+exports.mainStyle = mainStyle;

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

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.methodContent = void 0;
+
+const methodContent = () => `
+  /**
+  * Content
+  */
+   .rebilly-instruments-method-content {
+    padding: 2px;
+  }
+`;
+
+exports.methodContent = methodContent;

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.paymentInstruments = void 0;
+
+var _content = require("./content");
+
+var _paymentCard = require("./payment-card");
+
+// Order of components matters for style cascade
+const paymentInstruments = theme => `
+  /* Payment instruments
+  ------------------------------------------------------------ */
+  ${(0, _content.methodContent)()}
+  ${(0, _paymentCard.paymentCard)(theme)}
+`;
+
+exports.paymentInstruments = paymentInstruments;

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

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.paymentCard = void 0;
+
+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;
+  }
+`;
+
+exports.paymentCard = paymentCard;

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

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.alphaColor = alphaColor;
+exports.colorValues = void 0;
+
+var _values = _interopRequireDefault(require("values.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const colorValues = color => new _values.default(color);
+
+exports.colorValues = colorValues;
+
+function alphaColor(color, alphaValue = 1) {
+  const _alphaColor = new _values.default(color);
+
+  _alphaColor.alpha = alphaValue;
+  return _alphaColor.rgbString();
+}

package/dist/style/vendor/framepay.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.framepayStyle = void 0;
+
+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;
+    }
+  `;
+
+exports.framepayStyle = framepayStyle;

package/dist/style/vendor/postmate.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.postmateStyle = void 0;
+
+const postmateStyle = theme => `
+    .rebilly-instruments-iframe {
+      border: none;
+      width: 100%;
+      min-height: ${theme.space.form.minHeight};
+      transition: all 0.2s ease;
+    }
+  `;
+
+exports.postmateStyle = postmateStyle;

package/dist/style/views/confirmation.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.confirmation = void 0;
+
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the confirmation view.
+// -----------------------------------------------------------------------------
+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};
+  }
+`;
+
+exports.confirmation = confirmation;

package/dist/style/views/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.views = void 0;
+
+var _summary = require("./summary");
+
+var _methodSelector = require("./method-selector");
+
+var _confirmation = require("./confirmation");
+
+var _result = require("./result");
+
+var _modal = require("./modal");
+
+// Order of components matters for style cascade
+const views = theme => `
+  /* Views
+  ------------------------------------------------------------ */
+    ${(0, _summary.summary)(theme)}
+    ${(0, _methodSelector.methodSelector)(theme)}
+    ${(0, _confirmation.confirmation)(theme)}
+    ${(0, _result.result)(theme)}
+    ${(0, _modal.modal)(theme)}
+  `;
+
+exports.views = views;