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

package/src/style/base/__snapshots__/theme.spec.js.snap

@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RebillyInstruments theme builds the theme object 1`] = `
+Object {
+  "borderRadius": "4px",
+  "color": Object {
+    "background": "#ffffff",
+    "buttonText": "#ffffff",
+    "errorText": "#cd5c5c",
+    "primary": "#0044d4",
+    "text": "#0D2B3E",
+  },
+  "getComputed": Object {
+    "color": Object {
+      "mutedBorder": "rgba(13, 43, 62, 0.25)",
+      "mutedText": "rgba(13, 43, 62, 0.6)",
+      "primaryValues": Values {
+        "alpha": 1,
+        "rgb": Array [
+          0,
+          68,
+          212,
+        ],
+        "type": "base",
+        "weight": 0,
+      },
+    },
+  },
+  "space": Object {
+    "form": Object {
+      "horizontalPadding": "16px",
+      "minHeight": "44px",
+      "padding": "8px 16px",
+      "verticalPadding": "8px",
+    },
+    "l": "48px",
+    "m": "24px",
+    "s": "12px",
+    "xl": "96px",
+    "xs": "6px",
+    "xxl": "112px",
+    "xxs": "4px",
+  },
+  "typography": Object {
+    "captionFontSize": "12px",
+    "captionLineHeight": "12px",
+    "fontFamily": "Avenir, Helvetica, Arial, sans-serif",
+    "fontSize": "16px",
+    "lineHeight": "24px",
+  },
+}
+`;

package/src/style/base/index.js

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

package/src/style/base/theme.js

@@ -0,0 +1,61 @@
+import merge from 'lodash.merge';
+import { colorValues, alphaColor } from '../utils/color-values';
+
+export 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: colorValues(this.theme.color.primary),
+        mutedText: alphaColor(this.theme.color.text, 0.6),
+        mutedBorder: alphaColor(this.theme.color.text, 0.25)
+      }
+    };
+  }
+
+  build() {
+    return {
+      ...merge(this.theme, this.overrides),
+      getComputed: this.getComputed
+    };
+  }
+}

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

@@ -0,0 +1,32 @@
+import { Theme } from './theme';
+import Values from 'values.js';
+
+describe('RebillyInstruments theme', () => {
+  it('builds the theme object', () => {
+    const theme = new Theme().build();
+
+    expect(theme).toMatchSnapshot();
+  });
+
+  it('properly overrides the default properties', () => {
+    const overrides = {
+      color: {
+        primary: 'purple',
+        text: 'gray'
+      }
+    };
+    const theme = new 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().build();
+
+    expect(theme.getComputed.color.primaryValues instanceof Values).toEqual(
+      true
+    );
+    expect(theme.getComputed.color.mutedText).toEqual('rgba(13, 43, 62, 0.6)');
+  });
+});

package/src/style/browserslist.js

@@ -0,0 +1 @@
+export const browserslist = ['> 1%', 'last 2 versions'];

package/src/style/components/address.js

@@ -0,0 +1,55 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the address component.
+// -----------------------------------------------------------------------------
+export 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 */
+  }
+`;

package/src/style/components/button.js

@@ -0,0 +1,54 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the button component.
+// -----------------------------------------------------------------------------
+export 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; }
+`;

package/src/style/components/divider.js

@@ -0,0 +1,39 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the divider component.
+// -----------------------------------------------------------------------------
+export 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;
+  }
+`;

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

@@ -0,0 +1,76 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the checkbox component.
+// -----------------------------------------------------------------------------
+export 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;
+  }
+`;

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

@@ -0,0 +1,44 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the field component.
+// -----------------------------------------------------------------------------
+export 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;
+    }
+  }
+`;

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

@@ -0,0 +1,19 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the form component.
+// -----------------------------------------------------------------------------
+export 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;
+  }
+`;

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

@@ -0,0 +1,36 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the input component.
+// -----------------------------------------------------------------------------
+export 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;
+  }
+`;

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

@@ -0,0 +1,34 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the label component.
+// -----------------------------------------------------------------------------
+export 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;
+  }
+`;

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

@@ -0,0 +1,54 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the select component.
+// -----------------------------------------------------------------------------
+export 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;
+  }
+`;

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

@@ -0,0 +1,25 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the form validations.
+// -----------------------------------------------------------------------------
+export 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;
+  }
+`;

package/src/style/components/icons.js

@@ -0,0 +1,13 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the icons component.
+// -----------------------------------------------------------------------------
+export const icons = (theme) => `
+  /**
+  * Icons
+  */
+  .rebilly-instruments-icon {
+    width: ${theme.typography.lineHeight};
+    height: ${theme.typography.lineHeight};
+    fill: ${theme.color.text};
+  }
+`;