@rebilly/instruments 3.13.2-beta.0 → 3.13.4-beta.0

package/src/style/base/index.js

@@ -1,503 +1,95 @@
-export const vars = (theme) => `
-/* Instruments 'global' variables
------------------------------------------------------------- */
-:root {
-  ${theme.cssVars}
-
-  --rebilly-fontWeight400: 400;
-  --rebilly-fontWeight500: 500;
-  --rebilly-fontWeight600: 600;
-  --rebilly-fontScaleFactor: 1.5;
-  --rebilly-fontScaleFactorS: 0.875;
-  --rebilly-fontSizeS: calc(var(--rebilly-fontSizeBase) * var(--rebilly-fontScaleFactorS));
-  --rebilly-fontLineHeightS: calc(var(--rebilly-fontSizeS) * 1);
-
-  --rebilly-fontSizeL: calc(var(--rebilly-fontSizeBase) * var(--rebilly-fontScaleFactor));
-  --rebilly-fontLineHeightL: calc(var(--rebilly-fontLineHeightBase) * 2);
-  --rebilly-fontMarginTopL: 0;
-  --rebilly-fontMarginBottomL: var(--rebilly-fontLineHeightBase);
-
-  --rebilly-spacing2xs: calc(var(--rebilly-fontLineHeightBase) / 6);
-  --rebilly-spacingXs: calc(var(--rebilly-fontLineHeightBase) / 4);
-  --rebilly-spacingS: calc(var(--rebilly-fontLineHeightBase) / 2);
-  --rebilly-spacingM: var(--rebilly-fontLineHeightBase);
-  --rebilly-spacingL: calc(var(--rebilly-fontLineHeightBase) * 2);
-  --rebilly-spacingXl: calc(var(--rebilly-fontLineHeightBase) * 4);
-
-  --rebilly-spacingFormElementMinHeight: calc(var(--rebilly-spacingM) * 1.83333);
-
-  --rebilly-summaryLoaderMinHeight: var(--rebilly-fontLineHeightBase);
-  --rebilly-methodLoaderMinHeight: calc((4 * var(--rebilly-spacingFormElementMinHeight)) + (2 * var(--rebilly-fontLineHeightBase)) + (2 * var(--rebilly-spacingM)) + var(--rebilly-spacing2xs) + var(--rebilly-fontSizeS) + calc(2 * (var(--rebilly-spacingXs) + var(--rebilly-spacingS))) + var(--rebilly-spacingL));
-}
-
-/* Views. Method Selector
------------------------------------------------------------- */
-.rebilly-instruments-method-selector.has-express-compact {
-  padding-top: var(--rebilly-spacingS);
-}
-
-/* Express Methods
------------------------------------------------------------- */
-@-webkit-keyframes rebillyExpressShine {
-  to {
-    background-position-x: -200%;
-  }
-}
-@keyframes rebillyExpressShine {
-  to {
-    background-position-x: -200%;
+export const base = (theme) => `
+  /* Instruments 'global' variables
+  ------------------------------------------------------------ */
+  :root,
+  #rebilly-instruments-app,
+  .rebilly-instruments-content,
+  .rebilly-instruments-loader,
+  .rebilly-instruments-modal-overlay {
+    ${theme.cssVars}
+
+    --rebilly-spacings-base: calc(var(--rebilly-fontSizeBase) * 1.5);
+    --rebilly-spacings-2xs: calc(var(--rebilly-spacings-base) * 0.16667);
+    --rebilly-spacings-xs: calc(var(--rebilly-spacings-base) * 0.25);
+    --rebilly-spacings-s: calc(var(--rebilly-spacings-base) * 0.5);
+    --rebilly-spacings-m: var(--rebilly-spacings-base);
+    --rebilly-spacings-l: calc(var(--rebilly-spacings-base) * 2);
+    --rebilly-spacings-xl: calc(var(--rebilly-spacings-base) * 4);
+    --rebilly-spacings-2xl: calc(var(--rebilly-spacings-base) * 4.6667);
+
+    --rebilly-spacings-input-py: calc(var(--rebilly-spacings-2xs) * 2);
+    --rebilly-spacings-input-px: calc(var(--rebilly-spacings-s) + var(--rebilly-spacings-2xs));
+    --rebilly-spacings-label-offset-left: var(--rebilly-spacings-input-px);
+    --rebilly-spacings-form-element-min-height: calc(var(--rebilly-spacings-base) * 1.83333);
+    --rebilly-spacings-button-py: var(--rebilly-spacings-input-py);
+    --rebilly-spacings-button-px: var(--rebilly-spacings-input-px);
   }
-}
-
-.rebilly-instruments-express-methods { padding: 2px; }
-
-.rebilly-instruments-express-methods.is-compact {
-  border: 1px solid var(--rebilly-colorMutedBorder);
-  padding: var(--rebilly-spacingS);
-  padding-top: calc(var(--rebilly-spacingXs) + var(--rebilly-spacingS));
-  padding-top: calc(var(--rebilly-fontSizeBase) + var(--rebilly-spacing2xs));
-  border-radius: var(--rebilly-borderRadius);
-  position: relative;
-}
-
-.rebilly-instruments-express-methods .rebilly-instruments-iframe {
-  display: block;
-  margin-bottom: 0;
-  height: var(--rebilly-spacingFormElementMinHeight);
-}
-
-.rebilly-instruments-express-methods .rebilly-instruments-express-methods-container > * {
-  border-radius: 6px;
-  margin-bottom: var(--rebilly-spacingS);
-  background: linear-gradient(110deg, var(--rebilly-colorMutedBorder) 0%, var(--rebilly-colorBackground) 25%, var(--rebilly-colorMutedBorder) 50%);
-  background-size: 200% 100%;
-  -webkit-animation: 1.5s rebillyExpressShine linear infinite;
-          animation: 1.5s rebillyExpressShine linear infinite;
-  height: 44px;
-}
-
-.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: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-}
-
-.rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container > * {
-  -webkit-box-flex: 1;
-      -ms-flex: 1 1 0px;
-          flex: 1 1 0px;
-  max-width: 260px;
-  margin: 0 var(--rebilly-spacingXs);
-}
 
-.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;
-  font-family: var(--rebilly-fontFamily);
-  top: 0; left: 50%;
-  -webkit-transform: translateX(-50%) translateY(-50%);
-          transform: translateX(-50%) translateY(-50%);
-  color: var(--rebilly-colorText);
-  padding: var(--rebilly-spacing2xs) var(--rebilly-spacingM);
-  line-height: 1;
-  background: var(--rebilly-colorBackground);
-  display: inline-block;
-  font-weight: var(--rebilly-fontWeightBase);
-  min-height: auto;
-  margin: 0;
-  white-space: nowrap;
-}
-
-@media (max-width: 600px) {
-  .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container  {
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
+  /* Base, Typography
+  ------------------------------------------------------------ */
+  /* Base setup for top level elements */
+  .rebilly-instruments-content,
+  .rebilly-instruments-method-content,
+  .rebilly-instruments-confirmation,
+  .rebilly-instruments-results {
+    color: var(--rebilly-colorText);
+    background: var(--rebilly-colorBackground);
+    font-size: var(--rebilly-fontSizeBase);
+    font-weight: var(--rebilly-fontWeightBase);
+    line-height: var(--rebilly-fontLineHeightBase, calc(var(--rebilly-fontSizeBase) * 1.5));
+    font-family: var(--rebilly-fontFamily);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: left;
+    transition: all 200ms;
+    font-smooth: var(--rebilly-fontSmooth);
   }
 
-  .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container > * {
-    max-width: 100%;
-    margin: 0 0 var(--rebilly-spacingS);
-  }
-  
-  .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container > *:last-child {
-    margin: 0;
+  .rebilly-instruments-link {
+    color: var(--rebilly-colorPrimary);
+    cursor: pointer;
   }
-}
-
-/* Components. Divider
------------------------------------------------------------- */
-.rebilly-instruments-divider {
-  line-height: var(--rebilly-fontLineHeightBase);
-  padding: var(--rebilly-spacingM) 0;
-  margin: 0;
-  position: relative;
-  outline: 0;
-  border: 0;
-  text-align: center;
-  font-family: var(--rebilly-fontFamily);
-}
-
-.rebilly-instruments-divider-s { padding: var(--rebilly-spacingS) 0; }
-.rebilly-instruments-divider-xs { padding: var(--rebilly-spacingXs) 0; }
-
-.rebilly-instruments-divider::before {
-  background: var(--rebilly-colorMutedBorder);
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 50%;
-  width: 100%;
-  height: 1px;
-}
-
-.rebilly-instruments-divider .rebilly-instruments-divider-label {
-  color: var(--rebilly-colorMutedText);
-  font-weight: var(--rebilly-fontWeightBase);
-  padding: 0 var(--rebilly-spacingM);
-  line-height: var(--rebilly-fontLineHeightS);
-  background-color: var(--rebilly-colorBackground);
-  font-size: var(--rebilly-fontSizeS);
-  position: relative;
-  display: inline-block;
-}
-
-/* Vendor, Postmate
------------------------------------------------------------- */
-.rebilly-instruments-iframe {
-  border: none;
-  width: 100%;
-  height: 0;
-  padding: 0;
-}
-
-.rebilly-instruments-iframe-overlay {
-  top: -2px;
-  left: -2px;
-  width: calc(100vw + 2px);
-  height: 100vh;
-  min-height: calc(100vh + 4px);
-  position: fixed;
-  z-index: 99999999999999;
-}
-
-/* Views. 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;
-  -webkit-transition: all 0.12s ease-in-out;
-  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 {
-  -webkit-transition: all .24s ease-in-out;
-  transition: all .24s ease-in-out;
-  position: relative;
-  max-width: 750px;
-  background: var(--rebilly-colorBackground);
-  margin: 50px auto 20px;
-  -webkit-box-shadow: 0 19px 38px rgba(0,0,0,0.20), 0 15px 12px rgba(0,0,0,0.12);
-          box-shadow: 0 19px 38px rgba(0,0,0,0.20), 0 15px 12px rgba(0,0,0,0.12);
-  border-radius: 4px;
-  -webkit-transform: translateY(-50px);
-          transform: translateY(-50px);
-  opacity: 0;
-}
-
-.rebilly-instruments-modal-container.is-visible {
-  -webkit-transform: translateY(0);
-          transform: translateY(0);
-  opacity: 1;
-}
-
-.rebilly-instruments-modal-container.is-redirect {
-  max-width: 60vw;
-  width: auto;
-}
 
-.rebilly-instruments-modal-content {
-  -webkit-transition: all .15s;
-  transition: all .15s;
-  padding: 20px;
-  overflow: hidden;
-  background-color: var(--rebilly-colorBackground);
-  text-align: center;
-  border-radius: 4px;
-}
-
-.rebilly-instruments-modal-content .rebilly-instruments-iframe {
-  -webkit-transition: all .15s;
-  transition: all .15s;
-  height: auto;
-  min-height: 360px;
-}
-
-.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: #FFF;
-  cursor: pointer;
-}
-
-.rebilly-instruments-modal-close:hover{
-  color: #000;
-}
-
-@media screen and (max-width: 480px) {
-  .rebilly-instruments-modal-container.is-redirect {
-    max-width: 96vw;
-    margin: 20px auto 20px;
+  .rebilly-instruments-link:hover {
+    text-decoration: none;
   }
-}
-
-/* Components. Loader
------------------------------------------------------------- */
-.rebilly-instruments-loader {
-  text-align: left;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: none;
-  background-color: var(--rebilly-colorBackground);
-  z-index: 1000;
-  -webkit-transition: all 200ms;
-  transition: all 200ms;
-  border-radius: var(--rebilly-borderRadius);
-}
-
-.rebilly-instruments-loader.is-active {
-  display: block;
-}
-
-/* Type */
-.rebilly-instruments-loader p {
-  color: var(--rebilly-colorText);
-  display: inline-block;
-  margin: 0;
-  font-weight: var(--rebilly-fontWeightBase);
-  font-size: var(--rebilly-fontSizeBase);
-  line-height: var(--rebilly-fontLineHeightBase);
-}
-
-.rebilly-instruments-loader small {
-  color: var(--rebilly-colorText);
-  display: inline-block;
-  margin: 0;
-  font-size: var(--rebilly-fontSizeS);
-  line-height: 1;
-}
-
-/* Summary */
-.rebilly-instruments-summary-loader-total p.total {
-  font-family: var(--rebilly-fontFamily);
-  font-size: var(--rebilly-fontSizeL);
-  font-weight: var(--rebilly-headingFontWeight);
-}
-
-/* Methods */
-.rebilly-instruments-methods-loader-card-icon {
-  width: 32px;
-  height: 22px;
-  margin-left: var(--rebilly-spacing2xs);
-  margin-bottom: var(--rebilly-spacing2xs);
-}
-
-.rebilly-instruments-methods-loader-form-fields { margin: calc(var(--rebilly-spacingXs) + var(--rebilly-spacingS)) 0; }
-
-/* Spinner */
-.rebilly-instruments-loader-spinner {
-  top: 50%;
-  left: 50%;
-  position: absolute;
-  -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
-  border: 2px solid transparent;
-  border-top: 2px solid var(--rebilly-colorPrimary);
-  border-radius: 50%;
-  width: var(--rebilly-fontLineHeightBase);
-  height: var(--rebilly-fontLineHeightBase);
-  margin-top: calc(-1 * var(--rebilly-fontLineHeightBase) / 2);
-  margin-left: calc(-1 * var(--rebilly-fontLineHeightBase) / 2);
-  -webkit-animation: spin 0.5s ease infinite;
-          animation: spin 0.5s ease infinite;
-}
-
-@-webkit-keyframes spin {
-  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
-  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
-}
-
-@keyframes spin {
-  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
-  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
-}
 
-/* Utils */
-.rebilly-instruments-loader-display-flex { display: -webkit-box; display: -ms-flexbox; display: flex; }
-.rebilly-instruments-loader-align-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
-.rebilly-instruments-loader-justify-space-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
-.rebilly-instruments-loader-justify-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
-
-.is-el-loading {
-  position: relative;
-  color: transparent!important;
-}
-
-.is-el-loading::before {
-  position: absolute;
-  content: '';
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: linear-gradient(110deg, var(--rebilly-colorMutedBorder) 0%, var(--rebilly-colorBackground) 25%, var(--rebilly-colorMutedBorder) 50%);
-  background-size: 200% 100%;
-  -webkit-animation: 1.5s rebillyExpressShine linear infinite;
-          animation: 1.5s rebillyExpressShine linear infinite;
-  border-radius: var(--rebilly-borderRadius);
-}
-
-.rebilly-instruments-loader-form-el {
-  width: 100%;
-  min-height: var(--rebilly-spacingFormElementMinHeight);
-}
-
-.rebilly-instruments-loader-form-label {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  margin-bottom: var(--rebilly-spacing2xs);
-}
-
-.rebilly-instruments-loader-form-el.is-button {
-  margin-top: var(--rebilly-spacingL);
-  text-align: center;
-  font-size: var(--rebilly-buttonFontSize);
-  font-family: var(--rebilly-buttonFontFamily);
-  line-height: var(--rebilly-buttonFontLineHeight);
-  padding: var(--rebilly-spacingS);
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  background: var(--rebilly-buttonColorBackground);
-  color: transparent;
-  border-radius: var(--rebilly-buttonBorderRadius);
-  font-weight: var(--rebilly-buttonFontWeight);
-  border: var(--rebilly-buttonBorder);
-  -webkit-box-shadow: var(--rebilly-buttonBoxShadow);
-          box-shadow: var(--rebilly-buttonBoxShadow);
-  outline: none;
-  cursor: not-allowed;
-  opacity: 0.6; 
-}
-
-.rebilly-instruments-methods-loader-card-icon.is-el-loading::before {
-  border-radius: calc(var(--rebilly-borderRadius) / 2);
-}
-
-/* Error
------------------------------------------------------------- */
-.rebilly-instruments-error-card {
-  border: 1px solid var(--rebilly-colorDanger);
-  border-radius: var(--rebilly-borderRadius);
-  text-align: left;
-  padding: var(--rebilly-spacingS);
-  margin-bottom: var(--rebilly-spacingL);
-}
+  .rebilly-instruments-link .rebilly-instruments-icon {
+    fill: var(--rebilly-colorPrimary);
+  }
 
-.rebilly-instruments-error-card-header {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-  width: 100%;
-  -webkit-box-align: start;
-      -ms-flex-align: start;
-          align-items: flex-start;
-}
+  .rebilly-instruments-link.has-icon-left,
+  .rebilly-instruments-link.has-icon-right {
+    display: inline-flex;
+  }
 
-.rebilly-instruments-error-card-title {
-  font-weight: var(--rebilly-fontWeightBase);
-  font-size: var(--rebilly-fontSizeBase);
-  line-height: var(--rebilly-fontLineHeightBase);
-  font-family: var(--rebilly-headingFontFamily);
-  margin: 0 0 var(--rebilly-spacingS);
-  color: var(--rebilly-colorDanger);
-}
+  .rebilly-instruments-link.has-icon-left .rebilly-instruments-icon {
+    margin-right: var(--rebilly-spacings-xs);
+  }
 
-.rebilly-instruments-error-card-close-button {
-  cursor: pointer;
-  background: transparent;
-  border: none;
-  padding: 0;
-}
+  .rebilly-instruments-link.has-icon-right .rebilly-instruments-icon {
+    margin-left: var(--rebilly-spacings-xs);
+  }
 
-.rebilly-instruments-error-card-close-button svg {
-  width: var(--rebilly-fontLineHeightBase);
-  height: var(--rebilly-fontLineHeightBase);
-  fill: var(--rebilly-colorText);
-}
+  /* Typography */
+  .rebilly-instruments-h1,
+  .rebilly-instruments-h2 {
+    font-weight: var(--rebilly-headingFontWeight);
+    font-family: var(--rebilly-headingFontFamily);
+    color: var(--rebilly-headingColorText);
+  }
 
-.rebilly-instruments-error-card-details {
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
+  .rebilly-instruments-h1 {
+    font-size: calc(var(--rebilly-fontSizeBase) * 1.5);
+    line-height: 1.5;
+    line-height: calc(${theme.fontLineHeightBase} * 1.5);
+    margin: 0 0 calc(var(--rebilly-spacings-base) * 1.5) 0;
+  }
 
-.rebilly-instruments-error-card-details li,
-.rebilly-instruments-error-card-message {
-  color: var(--rebilly-colorText);
-  margin: 0;
-  font-weight: var(--rebilly-fontWeightBase);
-  font-size: var(--rebilly-fontSizeBase);
-  line-height: var(--rebilly-fontLineHeightBase);
-}
+  .rebilly-instruments-h2 {
+    font-size: calc(var(--rebilly-fontSizeBase) * 1.125);
+    line-height: var(--rebilly-fontLineHeightBase, 1.33);
+    margin: 0 0 var(--rebilly-spacings-base) 0;
+  }
 `;

package/src/style/base/theme.js

@@ -16,14 +16,15 @@ export class Theme {
 
   get cssVars() {
     return Object.keys(this.theme)
-      .filter(v => !Theme.nonCssProperties.includes(v))
-      .map((p, i) => `${!i ? '' : '  '}--rebilly-${p}: ${this.theme[p]};`)
-      .join('\n');
+            .filter(v => !Theme.nonCssProperties.includes(v))
+            .map(p => `--rebilly-${p}: ${this.theme[p]};`)
+            .join('\n');
   }
 
   build() {
     this.overrideTheme();
     return {
+      ...this.theme,
       cssVars: this.cssVars
     }
   }

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

@@ -13,7 +13,8 @@ describe('RebillyInstruments theme', () => {
       buttonBorderRadius: '30px'
     };
     const theme = new Theme(overrides).build();
-    expect(theme.cssVars).toMatch('--rebilly-colorPrimary: red;');
-    expect(theme.cssVars).toMatch('--rebilly-buttonBorderRadius: 30px;');
+
+    expect(theme.colorPrimary).toEqual('red');
+    expect(theme.buttonBorderRadius).toEqual('30px');
   });
 });

package/src/style/browserslist.js

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