@rebilly/instruments 3.2.1-beta.0 → 3.4.0-beta.0

package/src/style/components/accordion.js

@@ -0,0 +1,127 @@
+import { lighten } from '../utils/color-values';
+
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the accordion component.
+// -----------------------------------------------------------------------------
+
+export const accordion = (theme) => `
+  /* ACCORDION CLOSED */
+  .rebilly-instruments-accordion {
+    border: 1px solid var(--rebilly-colorMutedBorder);
+    padding: 0 calc(var(--rebilly-spacings-m) - 4px);
+    background: var(--rebilly-colorBackground);
+    transition: border 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
+    margin: var(--rebilly-spacings-s) 0;
+    border-radius: var(--rebilly-borderRadius);
+    overflow: hidden;
+    cursor: pointer;
+    opacity: 0.8;
+  }
+
+  .rebilly-instruments-accordion:hover {
+    opacity: 1;
+  }
+
+  .rebilly-instruments-accordion:first-of-type {
+    margin-top: 0;
+  }
+
+  .rebilly-instruments-accordion:last-of-type {
+    margin-bottom: 0;
+  }
+
+  .rebilly-instruments-accordion .rebilly-instruments-accordion-summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .rebilly-instruments-accordion .rebilly-instruments-accordion-summary {
+    display: flex;
+    align-items: center;
+    list-style: none;
+    padding: calc(var(--rebilly-spacings-m) - 14px) calc(var(--rebilly-spacings-m) - 4px);
+    margin: 0px calc(-1 * calc(var(--rebilly-spacings-m) - 4px));
+    background: var(--rebilly-colorBackground);
+  }
+
+  .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-summary-checkmark {
+    position: relative;
+    width: calc(var(--rebilly-spacings-m) - 4px);
+    height: calc(var(--rebilly-spacings-m) - 4px);
+    border-radius: 50%;
+    background: ${lighten(theme.colorText, 60)};
+    margin-left: var(--rebilly-spacings-m);
+    transition: all 0.2s ease;
+  }
+
+  .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-summary-checkmark::after {
+    content: '';
+    position: absolute;
+    border: solid var(--rebilly-colorBackground);
+    width: calc(var(--rebilly-spacings-xs) + 2px);
+    height: calc(var(--rebilly-spacings-xs) - 2px);
+    border-width: 2px 2px 0 0;
+    border-radius: 2px;
+    top: 50%;
+    left: 50%;
+    transform: translateY(-60%) translateX(-50%) rotate(135deg);
+    transition: all 0.2s ease;
+  }
+
+  .rebilly-instruments-accordion-summary:hover .rebilly-instruments-accordion-summary-checkmark {
+    background: var(--rebilly-colorText);
+  }
+
+  .rebilly-instruments-accordion .rebilly-instruments-accordion-summary img {
+    margin-right: var(--rebilly-spacings-s);
+    height: auto;
+    max-width: 40px;
+    width: 100%;
+  }
+
+  .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-title {
+    margin: 0;
+    font-weight: 500;
+    flex: 2;
+  }
+
+  .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-brands {
+    display: inline-flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-brands figure {
+    margin: auto;
+    padding: 0;
+    height: 26px;
+  }
+
+  .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-brands figure img {
+    width: auto;
+    height: 100%;
+    border-radius: 4px;
+    margin-right: var(--rebilly-spacings-xs);
+  }
+
+  .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-brands span {
+    color: var(--rebilly-colorMutedText);
+    margin: 0 0 0 var(--rebilly-spacings-xs);
+    font-size: calc(var(--rebilly-fontSizeBase) * 0.875);
+    line-height: 1;
+  }
+
+  /* ACCORDION OPENED */
+  .rebilly-instruments-accordion[open] {
+    padding: 0 calc(var(--rebilly-spacings-m) - 4px) calc(var(--rebilly-spacings-m) - 4px);
+    opacity: 1;
+  }
+
+  .rebilly-instruments-accordion[open] .rebilly-instruments-accordion-summary {
+    border-bottom: 1px solid var(--rebilly-colorMutedBorder);
+    margin-bottom: calc(var(--rebilly-spacings-m) - 4px);
+  }
+
+  .rebilly-instruments-accordion[open] .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-summary-checkmark {
+    background: ${theme.colorPrimary};
+  }
+`;

package/src/style/components/button.js

@@ -50,6 +50,9 @@ export const button = () => `
   }
 
   .rebilly-instruments-button.rebilly-instruments-button-secondary {
+    font-size: var(--rebilly-buttonFontSize);
+    font-family: var(--rebilly-buttonFontFamily);
+    line-height: var(--rebilly-buttonFontLineHeight);
     background: var(--rebilly-colorBackground);
     color: var(--rebilly-buttonColorBackground);
     border-color: var(--rebilly-buttonColorBackground);
@@ -76,4 +79,21 @@ export const button = () => `
   .rebilly-instruments-button:first-of-type { margin-top: 0; }
 
   .rebilly-instruments-button:last-of-type { margin-bottom: 0; }
+
+  .rebilly-instruments-button-group {
+    display: flex;
+    align-items: center;
+  }
+
+  .rebilly-instruments-button-group .rebilly-instruments-button {
+    margin: 0 var(--rebilly-spacings-xs);
+  }
+
+  .rebilly-instruments-button-group .rebilly-instruments-button:first-of-type {
+    margin-left: 0;
+  }
+
+  .rebilly-instruments-button-group .rebilly-instruments-button:last-of-type {
+    margin-right: 0;
+  }
 `;

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

@@ -1,8 +1,7 @@
-import { lighten } from '../../utils/color-values';
 // -----------------------------------------------------------------------------
 // This file contains all styles related to the checkbox component.
 // -----------------------------------------------------------------------------
-export const checkbox = (theme) => `
+export const checkbox = () => `
   /**
   * Checkbox
   */
@@ -33,10 +32,10 @@ export const checkbox = (theme) => `
     position: relative;
     top: 0;
     left: 0;
-    height: 24px;
-    width: 24px;
+    width: calc(var(--rebilly-spacings-m) - 4px);
+    height: calc(var(--rebilly-spacings-m) - 4px);
     border-radius: 4px;
-    box-shadow: inset 0 0 0 1px var(--rebilly-colorMutedBorder);
+    box-shadow: inset 0 0 0 2px var(--rebilly-colorMutedBorder);
     margin-right: var(--rebilly-spacings-s);
     background-color: transparent;
     transition: all 200ms;
@@ -45,17 +44,20 @@ export const checkbox = (theme) => `
   .rebilly-instruments-form-field-checkbox span:after {
     content: '';
     position: absolute;
-    left: 9px;
-    top: 4px;
-    opacity: 0;
-    width: 5px;
-    height: 11px;
     border: solid var(--rebilly-colorPrimary);
-    border-width: 0 2px 2px 0;
-    -webkit-transform: rotate(45deg);
-    -ms-transform: rotate(45deg);
-    transform: rotate(45deg);
-    transition: all 200ms;
+    width: calc(var(--rebilly-spacings-xs) + 4px);
+    height: calc(var(--rebilly-spacings-xs) - 2px);
+    border-width: 2px 2px 0 0;
+    border-radius: 2px;
+    top: 50%;
+    left: 50%;
+    opacity: 0;
+    transform: translateY(-60%) translateX(-50%) rotate(135deg);
+    transition: all 0.2s ease;
+  }
+
+  .rebilly-instruments-form-field-checkbox input[type="checkbox"]:focus ~ span {
+    box-shadow: inset 0 0 0 2px var(--rebilly-colorPrimary);
   }
 
   .rebilly-instruments-form-field-checkbox input[type="checkbox"]:checked ~ span {
@@ -66,10 +68,6 @@ export const checkbox = (theme) => `
     opacity: 1;
   }
 
-  .rebilly-instruments-form-field-checkbox input[type="checkbox"]:focus ~ span {
-    box-shadow: 0 0 0 2px ${lighten(theme.colorPrimary, 80)}, inset 0 0 0 1px var(--rebilly-colorPrimary);
-  }
-
   .rebilly-instruments-form-field-checkbox input[type="checkbox"]:disabled ~ span {
     opacity: 0.6;
   }

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

@@ -13,7 +13,6 @@ export const form = () => `
   .rebilly-instruments-form select:-webkit-autofill:hover,
   .rebilly-instruments-form select:-webkit-autofill:focus {
     -webkit-text-fill-color: var(--rebilly-colorText);
-    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
-    transition: background-color 5000s ease-in-out 0s;
+    transition: background-color 5000s ease-in-out 0s, box-shadow 200ms, border 200ms;
   }
 `;

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

@@ -0,0 +1,80 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the radio component.
+// -----------------------------------------------------------------------------
+export const radio = () => `
+  /**
+  * Checkbox
+  */
+  .rebilly-instruments-form-field-radio {
+    position: relative;
+    opacity: 1;
+    align-items: center;
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: start;
+    cursor: pointer;
+    transform: none;
+  }
+
+  .rebilly-instruments-form-field-radio > * {
+    cursor: pointer;
+  }
+
+  .rebilly-instruments-form-field-radio input[type="radio"] {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  }
+
+  .rebilly-instruments-form-field-radio > span {
+    position: relative;
+    top: 0;
+    left: 0;
+    height: calc(var(--rebilly-spacings-m) - 4px);
+    width: calc(var(--rebilly-spacings-m) - 4px);
+    min-width: calc(var(--rebilly-spacings-m) - 4px);
+    border-radius: 50%;
+    box-shadow: inset 0 0 0 2px var(--rebilly-colorMutedBorder);
+    margin-right: var(--rebilly-spacings-s);
+    background-color: transparent;
+    transition: all 200ms;
+  }
+
+  .rebilly-instruments-form-field-radio > span:after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    opacity: 0;
+    width: calc(var(--rebilly-spacings-xs) + 4px);
+    height: calc(var(--rebilly-spacings-xs) + 4px);
+    border-radius: 50%;
+    background: var(--rebilly-colorMutedBorder);
+    transition: all 200ms;
+  }
+
+  .rebilly-instruments-form-field-radio:hover > span:after {
+    opacity: 1;
+  }
+
+  .rebilly-instruments-form-field-radio input[type="radio"]:checked ~ span {
+    box-shadow: inset 0 0 0 2px var(--rebilly-colorPrimary);
+  }
+
+  .rebilly-instruments-form-field-radio input[type="radio"]:checked ~ span:after {
+    background: var(--rebilly-colorPrimary);
+    opacity: 1;
+  }
+
+  .rebilly-instruments-form-field-radio input[type="radio"]:focus ~ span {
+    opacity: 1;
+    box-shadow: inset 0 0 0 2px var(--rebilly-colorPrimary);
+  }
+
+  .rebilly-instruments-form-field-radio input[type="radio"]:disabled ~ span {
+    opacity: 0.6;
+  }
+`;

package/src/style/components/index.js

@@ -1,6 +1,7 @@
 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';
@@ -12,6 +13,7 @@ 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) => `
@@ -24,7 +26,8 @@ export const components = (theme) => `
   ${input(theme)}
   ${select(theme)}
   ${label(theme)}
-  ${checkbox(theme)}
+  ${checkbox()}
+  ${radio()}
   ${validation(theme)}
   ${button(theme)}
   ${divider(theme)}
@@ -32,4 +35,5 @@ export const components = (theme) => `
   ${icons(theme)}
   ${address(theme)}
   ${overlay(theme)}
+  ${accordion(theme)}
 `;

package/src/style/helpers/index.js

@@ -48,4 +48,7 @@ export const helpers = () => `
   .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/index.js

@@ -1,5 +1,7 @@
 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) => `
@@ -7,4 +9,6 @@ export const paymentInstruments = (theme) => `
   ------------------------------------------------------------ */
   ${methodContent()}
   ${paymentCard(theme)}
+  ${paymentInstrument()}
+  ${paymentInstrumentList()}
 `;

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

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

@@ -0,0 +1,43 @@
+// -----------------------------------------------------------------------------
+// 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-s);
+  }
+
+  .rebilly-instruments-payment-instrument-last4 {
+    margin: 0 var(--rebilly-spacings-s);
+  }
+
+  .rebilly-instruments-payment-instrument-exp {
+    color: var(--rebilly-colorMutedText);
+  }
+`;

package/src/style/views/confirmation.js

@@ -23,55 +23,4 @@ export const confirmation = () => `
   .rebilly-instruments-confirmation-address-title .rebilly-instruments-link {
     margin-left: var(--rebilly-spacings-s);
   }
-
-  .rebilly-instruments-confirmation-address-actions {
-    margin-top: var(--rebilly-spacings-base);
-    display: flex;
-  }
-
-  .rebilly-instruments-confirmation-address-actions :first-child {
-    margin: 0 var(--rebilly-spacings-xs) 0 0;
-  }
-
-  .rebilly-instruments-confirmation-address-actions :last-child {
-    margin: 0 0 0 var(--rebilly-spacings-xs);
-  }
-
-  .rebilly-instruments-confirmation-payment-method {
-    display: inline-flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 26px;
-    margin: 0 0 var(--rebilly-spacings-l);
-  }
-
-  .rebilly-instruments-confirmation-payment-method figure {
-    margin: 0 var(--rebilly-spacings-2xs) 0 0;
-    height: 26px;
-    padding: 0;
-  }
-
-  .rebilly-instruments-confirmation-payment-method figure img {
-    width: auto;
-    height: 100%;
-    border-radius: 4px;
-  }
-
-  .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 var(--rebilly-spacings-s);
-  }
-
-  .rebilly-instruments-confirmation-payment-method-last4 {
-    margin: 0 var(--rebilly-spacings-s);
-  }
-
-  .rebilly-instruments-confirmation-payment-method-exp {
-    color: var(--rebilly-colorMutedText);
-  }
 `;

package/src/views/method-selector/get-payment-methods.js

@@ -3,7 +3,7 @@ import { getMethodData } from './get-method-data';
 
 const SUPPORTED_EXPRESS_METHODS = ['Google Pay', 'Apple Pay', 'paypal'];
 
-const SUPPORTED_METHODS = ['payment-card'];
+const SUPPORTED_METHODS = ['payment-card', 'ach'];
 
 const isExpressMethod = ({ method, feature }) => {
   return (