@ordergroove/offers 2.24.2-alpha-PR-565-16.12 → 2.24.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ordergroove/offers",
-  "version": "2.24.2-alpha-PR-565-16.12+8d911f4f",
+  "version": "2.24.3",
   "description": "offer state component",
   "author": "Eugenio Lattanzio <eugenio63@gmail.com>",
   "homepage": "https://github.com/ordergroove/plush-toys#readme",
@@ -43,7 +43,7 @@
     "throttle-debounce": "^2.1.0"
   },
   "devDependencies": {
-    "@ordergroove/offers-templates": "^0.4.2-alpha-PR-565-16.12+8d911f4f"
+    "@ordergroove/offers-templates": "^0.4.3"
   },
-  "gitHead": "8d911f4fdf6099e66242a1a43c6a0fd7f2a57b5a"
+  "gitHead": "34d771e75cc0a0a2261d0e8c2ef7eb86aa7e7d3b"
 }

package/schema.json

@@ -299,7 +299,7 @@
         },
         "showTooltip": {
           "type": "boolean",
-          "default": false,
+          "default": true,
           "title": "Add a tool tip"
         }
       },
@@ -369,7 +369,7 @@
         },
         "tooltipPlacement": {
           "type": "string",
-          "default": "top",
+          "default": "bottom",
           "enum": ["top", "top-left", "top-right", "bottom", "bottom-left", "bottom-right", "right", "left"]
         }
       }
@@ -446,12 +446,12 @@
           "offerType": "radio"
         },
         "textCopy": {
-          "defaultFrequencyCopy": "Recommended",
+          "defaultFrequencyCopy": "(Most Popular)",
           "offerOptInLabel": "Subscribe and Save",
           "offerIncentiveText": "Save {{ogIncentive DiscountPercent}} when you subscribe",
           "offerEveryLabel": "Ships Every: ",
           "offerOptOutLabel": "One-time",
-          "showTooltip": false,
+          "showTooltip": true,
           "upsellButtonLabel": "Add to upcoming subscription order and receive 20% off",
           "upsellButtonContent": "Add to Next Order on ",
           "upsellModalContent": "Subscribe to this product and have it conveniently delivered to you at the frequency you choose! Read the FAQ here. Promotion subject to change.",

package/src/components/Offer.js

@@ -151,7 +151,7 @@ export class Offer extends TemplateElement {
           </div>
         </og-tooltip>
       </div>
-      <div style="margin-left: 1.9em">
+      <div style="margin-left: 2.2em">
         <og-text key="offerEveryLabel"></og-text>
         <og-select-frequency>
           <option value="3_1" selected>3 Days</option>

package/src/components/OptinButton.js

@@ -1,4 +1,4 @@
-import { html, css } from 'lit-element';
+import { html } from 'lit-element';
 import { optinProduct } from '../core/actions';
 import { OptinStatus, mapStateToProps } from './OptinStatus';
 import { connect } from '../core/connect';

package/src/components/OptinStatus.js

@@ -23,8 +23,6 @@ export class OptinStatus extends withProduct(TemplateElement) {
       :host {
         cursor: default;
         display: inline-block;
-        font-family: var(--og-global-family, Roboto, sans-serif);
-        color: var(--og-global-color, #090909);
       }
 
       :host[hidden] {
@@ -33,9 +31,9 @@ export class OptinStatus extends withProduct(TemplateElement) {
 
       .btn {
         position: relative;
-        width: 1.4em;
-        height: 1.4em;
-        margin: 0;
+        width: var(--og-radio-width, 1.4em);
+        height: var(--og-radio-height, 1.4em);
+        margin: var(--og-radio-margin, 0);
         padding: 0;
         border: 1px solid var(--og-primary-color, black);
         background: #fff;
@@ -44,13 +42,6 @@ export class OptinStatus extends withProduct(TemplateElement) {
         color: var(--og-primary-color, black);
       }
 
-      .radio,
-      .checkbox {
-        margin: 0 0.5em;
-        transform: scale(1.2);
-        cursor: pointer;
-      }
-
       .radio {
         text-indent: -9999px;
       }
@@ -58,7 +49,6 @@ export class OptinStatus extends withProduct(TemplateElement) {
       .checkbox {
         border-radius: 3px;
       }
-
       .checkbox.active::after,
       .radio.active::after {
         content: ' ';

package/src/components/Select.js

@@ -21,10 +21,9 @@ export class Select extends LitElement {
         font-family: inherit;
         font-size: 1em;
         line-height: 1.3;
-        padding: var(--og-select-padding, 0.4em 2.8em 0.4em 0.5em);
+        padding: var(--og-select-padding, 0.4em 1.8em 0.3em 0.5em);
         width: 100%;
         max-width: 100%;
-        min-width: 150px;
         box-sizing: border-box;
         margin: 0;
         border: none;
@@ -51,6 +50,7 @@ export class Select extends LitElement {
       }
       span {
         position: absolute;
+        // background: white;
         color: inherit;
         fill: white;
         pointer-events: none;

package/src/components/SelectFrequency.js

@@ -32,15 +32,14 @@ export class SelectFrequency extends withChildOptions(FrequencyStatus) {
   static get styles() {
     return css`
       :host {
-        display: table;
+        display: inline-block;
         cursor: pointer;
-        background-color: var(--og-select-bg-color, #f8f8f8);
-        border: var(--og-select-border, 1px solid #090909);
+        background-color: var(--og-select-bg-color, #fff);
+        border: var(--og-select-border, 1px solid #aaa);
         border-radius: var(--og-select-border-radius, 0.5em);
         border-width: var(--og-select-border-width, 1px);
         box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04);
         z-index: 1;
-        font-size: var(--og-select-font-size, 12px);
       }
     `;
   }

package/src/components/Tooltip.js

@@ -3,7 +3,7 @@ import { LitElement, html, css } from 'lit-element';
 export class Tooltip extends LitElement {
   static get properties() {
     return {
-      placement: { type: String, default: 'top' }
+      placement: { type: String, default: 'bottom' }
     };
   }
 
@@ -25,24 +25,22 @@ export class Tooltip extends LitElement {
 
       .content {
         box-sizing: border-box;
-        font-family: var(--og-tooltip-family, Roboto, sans-serif);
-        font-size: var(--og-tooltip-size, 12px);
-        color: var(--og-tooltip-color, #090909);
-        background-color: var(--og-tooltip-background, #ffffff);
+        font-family: var(--og-tooltip-family, inherit);
+        font-size: var(--og-tooltip-size, inherit);
+        color: var(--og-tooltip-color, inherit);
+        background-color: var(--og-tooltip-background, #ececec);
         box-shadow: var(--og-tooltip-box-shadow, 2px 2px 6px rgba(0, 0, 0, 0.28));
-        border: var(--og-tooltop-border, 1px solid #cdcdcd);
         display: block;
         width: 200px;
         opacity: 0;
-        padding: 1em;
-        border-radius: 5px;
+        padding: var(--og-tooltip-padding, 0.5em);
+        text-align: var(--og-tooltip-text-align, left);
         pointer-events: none;
         position: absolute;
         transform: translateY(10px);
         transition: transform 0.25s ease-out;
         z-index: 99999;
-        text-align: center;
-        line-height: 1.3;
+        border-radius: var(--og-tooltip-border-radius, 0);
       }
 
       .content:after {
@@ -116,7 +114,7 @@ export class Tooltip extends LitElement {
       .top-right:after,
       .top:after {
         bottom: -10px;
-        border-top: solid var(--og-tooltip-background, #ffffff) 10px;
+        border-top: solid var(--og-tooltip-background, #ececec) 10px;
       }
       .bottom-left:after,
       .top-left:after {
@@ -135,7 +133,7 @@ export class Tooltip extends LitElement {
       .bottom-right:after,
       .bottom:after {
         top: -10px;
-        border-bottom: solid var(--og-tooltip-background, #ffffff) 10px;
+        border-bottom: solid var(--og-tooltip-background, #ececec) 10px;
       }
 
       .left:after,
@@ -147,11 +145,11 @@ export class Tooltip extends LitElement {
       }
       .right:after {
         left: -10px;
-        border-right: solid var(--og-tooltip-background, #ffffff) 10px;
+        border-right: solid var(--og-tooltip-background, #ececec) 10px;
       }
       .left:after {
         right: -10px;
-        border-left: solid var(--og-tooltip-background, #ffffff) 10px;
+        border-left: solid var(--og-tooltip-background, #ececec) 10px;
       }
 
       .tooltip:hover .content {
@@ -187,7 +185,7 @@ export class Tooltip extends LitElement {
 
   render() {
     return html`
-      <span class="tooltip bottom">
+      <span class="tooltip">
         <span class="trigger">
           <slot name="trigger">
             ${this.trigger}

package/src/components/__tests__/Tooltip.spec.js

@@ -61,11 +61,11 @@ describe('Tooltip', () => {
   });
 
   it('should set the "top" style property if placement is left', async () => {
-    await checkContentStyles({ top: '-13px', left: '' }, 'left');
+    await checkContentStyles({ top: '-8px', left: '' }, 'left');
   });
 
   it('should set the "top" style property if placement is right', async () => {
-    await checkContentStyles({ top: '-13px', left: '' }, 'right');
+    await checkContentStyles({ top: '-8px', left: '' }, 'right');
   });
 
   it('should not set style properties if placement is top-right', async () => {