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

package/dist/style/base/index.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+
+const base = theme => `
+  /* Base, Typography
+  ------------------------------------------------------------ */
+  /* Base setup for top level elements */
+  .rebilly-instruments-content,
+  .rebilly-instruments-method-content,
+  .rebilly-instruments-confirmation,
+  .rebilly-instruments-results {
+    color: ${theme.color.text};
+    background: ${theme.color.background};
+    font-size: ${theme.typography.fontSize};
+    line-height: ${theme.typography.lineHeight};
+    font-family: ${theme.typography.fontFamily};
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: left;
+    transition: all 200ms;
+  }
+
+  .rebilly-instruments-link {
+    color: ${theme.color.primary};
+    cursor: pointer;
+  }
+
+  .rebilly-instruments-link:hover {
+    text-decoration: none;
+  }
+
+  .rebilly-instruments-link .rebilly-instruments-icon {
+    fill: ${theme.color.primary};
+  }
+
+  .rebilly-instruments-link.has-icon-left,
+  .rebilly-instruments-link.has-icon-right {
+    display: inline-flex;
+  }
+
+  .rebilly-instruments-link.has-icon-left .rebilly-instruments-icon {
+    margin-right: ${theme.space.xs};
+  }
+
+  .rebilly-instruments-link.has-icon-right .rebilly-instruments-icon {
+    margin-left: ${theme.space.xs};
+  }
+
+  /* Typography */
+  .rebilly-instruments-h1,
+  .rebilly-instruments-h2 {
+    font-weight: 500;
+  }
+
+  .rebilly-instruments-h1 {
+    font-size: calc(${theme.typography.fontSize} * 1.5);
+    line-height: calc(${theme.typography.lineHeight} * 1.5);
+    margin: 0 0 calc(${theme.space.m} * 1.5) 0;
+  }
+
+  .rebilly-instruments-h2 {
+    font-size: calc(${theme.typography.fontSize} * 1.12);
+    line-height: ${theme.typography.lineHeight};
+    margin: 0 0 ${theme.space.m} 0;
+  }
+`;
+
+exports.base = base;

package/dist/style/base/theme.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Theme = void 0;
+
+var _lodash = _interopRequireDefault(require("lodash.merge"));
+
+var _colorValues = require("../utils/color-values");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+class Theme {
+  constructor(overrides = {}) {
+    this.overrides = overrides;
+    this.theme = {
+      color: {
+        primary: '#0044d4',
+        errorText: '#cd5c5c',
+        text: '#0D2B3E',
+        buttonText: '#ffffff',
+        background: '#ffffff'
+      },
+      typography: {
+        fontFamily: 'Avenir, Helvetica, Arial, sans-serif',
+        fontSize: '16px',
+        lineHeight: '24px',
+        captionFontSize: '12px',
+        captionLineHeight: '12px'
+      },
+      space: {
+        xxs: '4px',
+        xs: '6px',
+        s: '12px',
+        m: '24px',
+        l: '48px',
+        xl: '96px',
+        xxl: '112px',
+        form: {
+          padding: '8px 16px',
+          verticalPadding: '8px',
+          horizontalPadding: '16px',
+          minHeight: '44px'
+        }
+      },
+      borderRadius: '4px'
+    };
+  }
+
+  get getComputed() {
+    return this.computed();
+  }
+
+  computed() {
+    return {
+      color: {
+        primaryValues: (0, _colorValues.colorValues)(this.theme.color.primary),
+        mutedText: (0, _colorValues.alphaColor)(this.theme.color.text, 0.6),
+        mutedBorder: (0, _colorValues.alphaColor)(this.theme.color.text, 0.25)
+      }
+    };
+  }
+
+  build() {
+    return { ...(0, _lodash.default)(this.theme, this.overrides),
+      getComputed: this.getComputed
+    };
+  }
+
+}
+
+exports.Theme = Theme;

package/dist/style/base/theme.spec.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _theme = require("./theme");
+
+var _values = _interopRequireDefault(require("values.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('RebillyInstruments theme', () => {
+  it('builds the theme object', () => {
+    const theme = new _theme.Theme().build();
+    expect(theme).toMatchSnapshot();
+  });
+  it('properly overrides the default properties', () => {
+    const overrides = {
+      color: {
+        primary: 'purple',
+        text: 'gray'
+      }
+    };
+    const theme = new _theme.Theme(overrides).build();
+    expect(theme.color.primary).toEqual('purple');
+    expect(theme.color.text).toEqual('gray');
+  });
+  it('computes new styles from theme properties', () => {
+    const theme = new _theme.Theme().build();
+    expect(theme.getComputed.color.primaryValues instanceof _values.default).toEqual(true);
+    expect(theme.getComputed.color.mutedText).toEqual('rgba(13, 43, 62, 0.6)');
+  });
+});

package/dist/style/browserslist.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.browserslist = void 0;
+const browserslist = ['> 1%', 'last 2 versions'];
+exports.browserslist = browserslist;

package/dist/style/components/address.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.address = void 0;
+
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the address component.
+// -----------------------------------------------------------------------------
+const address = theme => `
+  /**
+  * Address
+  */
+  .rebilly-instruments-address {
+    margin: 0 0 ${theme.space.m};
+    color: ${theme.getComputed.color.mutedText};
+    font-style: normal;
+  }
+
+  /**
+   * Address Name: Default
+   */
+  .rebilly-instruments-address-name-default {
+    /* No style changes */
+  }
+
+  /**
+   * Address Name: Combined
+   */
+  .rebilly-instruments-address-name-combined {
+    /* No style changes */
+  }
+
+  /**
+   * Address Name: Stacked
+   */
+  .rebilly-instruments-address-name-stacked {
+    /* No style changes */
+  }
+
+  /**
+   * Address Region: Default
+   */
+  .rebilly-instruments-address-region-default {
+    /* No style changes */
+  }
+
+  /**
+   * Address Region: Split
+   */
+  .rebilly-instruments-address-region-split {
+    /* No style changes */
+  }
+
+  /**
+   * Address Name: Stacked
+   */
+  .rebilly-instruments-address-region-stacked {
+    /* No style changes */
+  }
+`;
+
+exports.address = address;

package/dist/style/components/button.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.button = void 0;
+
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the button component.
+// -----------------------------------------------------------------------------
+const button = theme => `
+  /**
+  * Buttons
+  */
+  .rebilly-instruments-button {
+    font-size: ${theme.typography.fontSize};
+    font-family: ${theme.typography.fontFamily};
+    line-height: ${theme.typography.lineHeight};
+    padding: ${theme.space.form.padding};
+    box-sizing: border-box;
+    background: ${theme.color.primary};
+    color: ${theme.color.buttonText};
+    border-radius: ${theme.borderRadius};
+    margin: calc(${theme.space.xxs} + ${theme.space.s} / 2) 0;
+    font-weight: 500;
+    border: none;
+    width: 100%;
+    cursor: pointer;
+    min-height: 44px;
+    transition: all 0.2s ease;
+    outline: none;
+  }
+
+  .rebilly-instruments-button:hover,
+  .rebilly-instruments-button:active {
+    background: ${theme.getComputed.color.primaryValues.shade(20).hexString()};
+  }
+
+  .rebilly-instruments-button.rebilly-instruments-button-secondary {
+    background: ${theme.color.background};
+    box-shadow: inset 0 0 0 1px ${theme.color.primary};
+    color: ${theme.color.primary};
+  }
+
+  .rebilly-instruments-button.rebilly-instruments-button-secondary:hover,
+  .rebilly-instruments-button.rebilly-instruments-button-secondary:active {
+    background: ${theme.color.background};
+  }
+
+  .rebilly-instruments-button:focus { box-shadow: 0 0 0 2px ${theme.getComputed.color.primaryValues.tint(60).hexString()}; }
+
+  .rebilly-instruments-button:disabled { opacity: 0.6; }
+
+  .rebilly-instruments-button::first-letter { text-transform: uppercase; }
+
+  .rebilly-instruments-button:first-of-type { margin-top: 0; }
+
+  .rebilly-instruments-button:last-of-type { margin-bottom: 0; }
+`;
+
+exports.button = button;

package/dist/style/components/divider.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.divider = void 0;
+
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the divider component.
+// -----------------------------------------------------------------------------
+const divider = theme => `
+  /**
+  * Divider
+  */
+  .rebilly-instruments-divider {
+    line-height: ${theme.typography.lineHeight};
+    padding: ${theme.space.m} 0;
+    margin: 0;
+    position: relative;
+    outline: 0;
+    border: 0;
+    text-align: center;
+  }
+
+  .rebilly-instruments-divider::before {
+    background: ${theme.getComputed.color.mutedBorder};
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    width: 100%;
+    height: 1px;
+  }
+
+  .rebilly-instruments-divider .rebilly-instruments-divider-label {
+    color: ${theme.getComputed.color.mutedText};
+    font-weight: 500;
+    text-transform: uppercase;
+    padding: 0 ${theme.space.s};
+    line-height: 14px;
+    background-color: ${theme.color.background};
+    font-size: 12px;
+    position: relative;
+    display: inline-block;
+  }
+`;
+
+exports.divider = divider;

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

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.checkbox = void 0;
+
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the checkbox component.
+// -----------------------------------------------------------------------------
+const checkbox = theme => `
+  /**
+  * Checkbox
+  */
+  .rebilly-instruments-form-field-checkbox {
+    position: relative;
+    opacity: 1;
+    padding-left: calc(${theme.space.m} + ${theme.space.s});
+    align-items: center;
+    display: inline-block;
+    cursor: pointer;
+    transform: none;
+  }
+
+  .rebilly-instruments-form-field-checkbox > * {
+    cursor: pointer;
+  }
+
+  .rebilly-instruments-form-field-checkbox input[type="checkbox"] {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  }
+
+  .rebilly-instruments-form-field-checkbox span {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 24px;
+    width: 24px;
+    border-radius: ${theme.borderRadius};
+    box-shadow: inset 0 0 0 1px ${theme.getComputed.color.mutedBorder};
+    background-color: transparent;
+    transition: all 200ms;
+  }
+
+  .rebilly-instruments-form-field-checkbox span:after {
+    content: '';
+    position: absolute;
+    left: 9px;
+    top: 4px;
+    opacity: 0;
+    width: 5px;
+    height: 11px;
+    border: solid ${theme.color.primary};
+    border-width: 0 2px 2px 0;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+    transition: all 200ms;
+  }
+
+  .rebilly-instruments-form-field-checkbox input[type="checkbox"]:checked ~ span {
+    box-shadow: inset 0 0 0 2px ${theme.color.primary};
+  }
+
+  .rebilly-instruments-form-field-checkbox input[type="checkbox"]:checked ~ span:after {
+    opacity: 1;
+  }
+
+  .rebilly-instruments-form-field-checkbox input[type="checkbox"]:focus ~ span {
+    box-shadow: 0 0 0 2px ${theme.getComputed.color.primaryValues.tint(80).hexString()},
+    inset 0 0 0 1px ${theme.color.primary};
+  }
+
+  .rebilly-instruments-form-field-checkbox input[type="checkbox"]:disabled ~ span {
+    opacity: 0.6;
+  }
+`;
+
+exports.checkbox = checkbox;

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

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.field = void 0;
+
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the field component.
+// -----------------------------------------------------------------------------
+const field = theme => `
+  /**
+  * Field
+  */
+  .rebilly-instruments-form-field {
+    margin: calc(${theme.space.xxs} + ${theme.space.s}) 0;
+    position: relative;
+  }
+
+  /* Field group */
+  .rebilly-instruments-form-field-group {
+    margin: calc(-${theme.space.xxs} - ${theme.space.s}) 0;
+    display: flex;
+  }
+
+  .rebilly-instruments-form-field-group > * {
+    flex: 1 0;
+    margin-left: ${theme.space.xs};
+    margin-right: ${theme.space.xs}
+  }
+
+  .rebilly-instruments-form-field-group > *:first-child {
+    margin-left: 0;
+  }
+
+  .rebilly-instruments-form-field-group > *:last-child {
+    margin-right: 0;
+  }
+
+  @media (max-width: 480px) {
+    .rebilly-instruments-form-field-group {
+      display: block;
+      margin: calc(${theme.space.xxs} + ${theme.space.s}) 0;
+    }
+
+    .rebilly-instruments-form-field-group > * {
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+`;
+
+exports.field = field;

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

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.form = void 0;
+
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the form component.
+// -----------------------------------------------------------------------------
+const form = theme => `
+  /**
+  * Form
+  */
+  /* Chrome autocomplete styles */
+  .rebilly-instruments-form input:-webkit-autofill,
+  .rebilly-instruments-form input:-webkit-autofill:hover, 
+  .rebilly-instruments-form input:-webkit-autofill:focus,
+  .rebilly-instruments-form select:-webkit-autofill,
+  .rebilly-instruments-form select:-webkit-autofill:hover,
+  .rebilly-instruments-form select:-webkit-autofill:focus {
+    -webkit-text-fill-color: ${theme.color.text};
+    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
+    transition: background-color 5000s ease-in-out 0s;
+  }
+`;
+
+exports.form = form;

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

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.input = void 0;
+
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the input component.
+// -----------------------------------------------------------------------------
+const input = theme => `
+  /**
+  * Input
+  */
+  .rebilly-instruments-form-field-input {
+    font-size: ${theme.typography.fontSize};
+    line-height: ${theme.typography.lineHeight};
+    padding: ${theme.space.form.padding};
+    min-height: ${theme.space.form.minHeight};
+    border: 1px solid ${theme.getComputed.color.mutedBorder};
+    border-radius: ${theme.borderRadius};
+    color: ${theme.color.text};
+    background: transparent;
+    box-sizing: border-box;
+    width: 100%;
+    transition: all 200ms;
+  }
+
+  .rebilly-instruments-form-field-input:focus {
+    outline: none;
+    border: 1px solid ${theme.color.primary};
+    box-shadow: 0 0 0 1px ${theme.color.primary};
+  }
+
+  .rebilly-instruments-form-field-input::placeholder {
+    color: ${theme.color.text};
+    opacity: 0.5;
+  }
+
+  .rebilly-instruments-form-field-input:disabled {
+    opacity: 0.6;
+  }
+`;
+
+exports.input = input;

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

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.label = void 0;
+
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the label component.
+// -----------------------------------------------------------------------------
+const label = theme => `
+  /**
+  * Label
+  */
+  .rebilly-instruments-form-field-label {
+    left: ${theme.space.form.horizontalPadding};
+    color: ${theme.color.text};
+    top: calc(${theme.space.form.minHeight} / 2);
+    background: transparent;
+    opacity: 0;
+    position: absolute;
+    transform: translateY(-50%);
+    transition: all 200ms;
+    cursor: text;
+    pointer-events: none;
+  }
+
+  .rebilly-instruments-form-field-input:not(:placeholder-shown) + .rebilly-instruments-form-field-label,
+  .rebilly-instruments-form-field-select:focus + .rebilly-instruments-form-field-label,
+  .rebilly-instruments-form-field-label.is-active {
+    padding: 0 ${theme.space.xxs};
+    left: calc(${theme.space.form.horizontalPadding} - ${theme.space.xxs});
+    font-size: ${theme.typography.captionFontSize};
+    line-height: ${theme.typography.captionLineHeight};
+    color: ${theme.color.text};
+    background: ${theme.color.background};
+    font-weight: 500;
+    opacity: 1;
+    top: 0;
+  }
+`;
+
+exports.label = label;

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

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.select = void 0;
+
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the select component.
+// -----------------------------------------------------------------------------
+const select = theme => `
+  /**
+  * Select
+  */
+  .rebilly-instruments-form-field-select {
+    font-size: ${theme.typography.fontSize};
+    line-height: ${theme.typography.lineHeight};
+    padding: ${theme.space.form.padding};
+    min-height: ${theme.space.form.minHeight};
+    border: 1px solid ${theme.getComputed.color.mutedBorder};
+    border-radius: ${theme.borderRadius};
+    color: ${theme.color.text};
+    background: transparent;
+    box-sizing: border-box;
+    width: 100%;
+    transition: all 200ms;
+  }
+
+  .rebilly-instruments-form-field-select:focus {
+    outline: none;
+    border: 1px solid ${theme.color.primary};
+    box-shadow: 0 0 0 1px ${theme.color.primary};
+  }
+
+  .rebilly-instruments-form-field-select:disabled {
+    opacity: 0.6;
+  }
+
+  .rebilly-instruments-form-field-select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+  }
+
+  .rebilly-instruments-form-field-select + .rebilly-instruments-form-field-label {
+    font-size: ${theme.typography.fontSize};
+    opacity: 0.5;
+  }
+
+  .rebilly-instruments-form-field-select::-ms-expand { display: none; }
+
+  .rebilly-instruments-form-field-select-arrow {
+    border: solid ${theme.color.text};
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+    right: 16px;
+    top: 16px;
+  }
+`;
+
+exports.select = select;