feat(DIST-305): Add popover popup type

For popup mode "popover" you can also set width and height of the popup. For "drawer_left" and "drawer_right" property "drawerWidth" was deprecated and replaced with "width".

Author: Matej Lednicky

.travis.yml

@@ -84,7 +84,7 @@ jobs:
       script:
         - yarn build
         - pip install --user awscli
-        - yarn add @typeform/[email protected] # jarvis version pinned, latest version has a bug, we should unpin it when its fixed
+        - yarn add @typeform/[email protected]
         - ./scripts/consolidate-dist.sh
         - DEBUG=jarvis yarn run jarvis deploy --path dist --preview --notify-preview
     - name: "Release to NPM"
@@ -96,6 +96,6 @@ jobs:
       script:
         - yarn build
         - pip install --user awscli
-        - yarn add @typeform/[email protected] # jarvis version pinned, latest version has a bug, we should unpin it when its fixed
+        - yarn add @typeform/[email protected]
         - ./scripts/consolidate-dist.sh
         - DEBUG=jarvis jarvis deploy --path dist

README.md

@@ -106,15 +106,17 @@ typeformEmbed.makePopup(url, options)
 
   | option         | description                                                                                                                                                    | values                                                                        | default |
   |----------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------|---------|
-  | mode           | The way of showing the popup                                                                                                                                   | `String` any of: <br/> `"popup"` <br/> `"drawer_left"` <br/> `"drawer_right"` <br/> `"side-panel"` <br/> `"popover"` | "popup" |
+  | mode           | The way of showing the popup                                                                                                                                   | `String` any of: <br/> `"popup"` <br/> `"drawer_left"` <br/> `"drawer_right"` <br/> `"popover"` | "popup" |
   | ❌ autoOpen    | Your typeform will launch as soon as your web page is opened **Deprecated:** Use `open: "load"` instead                                                        | `Boolean`                                                                     | false   |
   | 💡 open        | Your typeform will launch based on behavioral triggers                                                                                                         | `String` any of: <br/> `"exit"` <br/> `"load"` <br/> `"scroll"` <br/> `"time"`| null    |
   | 💡 openValue   | Configuration for behavioral triggers. Based on `open`: <br/> - `"exit"`: exit threshold in pixels <br/> - `"scroll"`: % of page scrolled <br/> * `"time"`: time in milliseconds  | `Number`                                                   | null    |
   | autoClose      | Time until the embedded typeform will automatically close after a respondent clicks the Submit button. The default time is 5 seconds. PRO+ users can change the `autoClose` time. | `Number` (seconds)                                         | -       |
   | hideScrollbars | Hide fixed scrollbars.                                                                                                                                         | `Boolean`                                                                     | false   |
   | hideFooter     | Hide typeform footer, that appears showing the progress bar and the navigation buttons.                                                                        | `Boolean`                                                                     | false   |
   | hideHeaders    | Hide typeform header, that appears when you have a Question group, or a long question that you need to scroll through to answer, like a Multiple Choice block. | `Boolean`                                                                     | false   |
-  | drawerWidth    | Specify the width of the drawer (only applies if using `mode` `"drawer_left"` or `"drawer_right"`).                                                            | `Number` (pixels)                                                             | 800     |
+  | ❌ drawerWidth | Specify the width of the drawer (only applies if using `mode` `"drawer_left"` or `"drawer_right"`).                                                            | `Number` (pixels)                                                             |      |
+  | width          | Specify the width of the drawer or popup (only applies if using `mode` `"drawer_left"` or `"drawer_right"` or `"popover"`).                                    | `Number` (pixels)                                                             | 800 for `"drawer_left"` ano `"drawer_right"` <br/> 320 for `"popover"` |
+  | height         | Specify the height of the popup (only applies if using `mode` `"popover"`).                                                                                    | `Number` (pixels)                                                             | 500     |
   | onSubmit       | Callback function that will be executed right after the typeform is successfully submitted.                                                                    | `Function`                                                                    | -       |
   | onReady        | Callback function that will be executed once the typeform is ready.                                                                                            | `Function`                                                                    | -       |
   | onClose        | Callback function that will be executed once the typeform is closed.                                                                                           | `Function`                                                                    | -       |

demo/popup-and-widget.html

@@ -34,7 +34,7 @@
     <a
       class="typeform-share"
       href="//betatests.typeform.com/to/Z9k3bK"
-      data-mode="1"
+      data-mode="popup"
       target="_blank"
       >
       Launch me as a popup!

demo/popup-api-container.html

@@ -73,7 +73,7 @@ <h1>Lorem ipsum dolor!</h1>
         window.typeformEmbed.makePopup('//betatests.typeform.com/to/Z9k3bK', {
           mode: 'drawer_right',
           autoOpen: true,
-          drawerWidth: 600,
+          width: 600,
           onSubmit: () => {
             alert('open-popup-1 has been submitted')
           }
@@ -100,7 +100,7 @@ <h1>Lorem ipsum dolor!</h1>
           mode: 'drawer_left',
           autoOpen: true,
           container: container,
-          drawerWidth: 400,
+          width: 400,
           onSubmit: () => {
             alert('open-popup-3 has been submitted')
           }

demo/popup.html

@@ -6,48 +6,99 @@
     <!--CSS styles that ensure your typeform takes up all the available screen space (DO NOT EDIT!)-->
     <style type="text/css">
       body, html {
+        font-family: sans-serif;
         margin: 0;
         padding: 0;
         height: 100%;
       }
 
-      a {
+      a.popup {
         margin: 20px;
         display: block;
       }
+
+      .popover {
+        width: 54px;
+        height: 54px;
+        position: fixed;
+        right: 16px;
+        bottom: 16px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        background: #427fed;
+      }
+
+      .popover > .icon {
+        align-items: center;
+        justify-content: center;
+        display: flex;
+      }
+
+      .popover-hint {
+        color: darkgray;
+        position: fixed;
+        right: 90px;
+        bottom: 16px;
+        height: 54px;
+        line-height: 54px;
+      }
+
     </style>
   </head>
   <body>
     <a
-      class="typeform-share"
+      class="typeform-share popup"
       href="//betatests.typeform.com/to/Z9k3bK?disable-tracking=true"
-      data-mode="1"
+      data-mode="popup"
       data-submit-close-delay="4"
       target="_blank"
     >
       Launch me as a popup!
     </a>
 
     <a
-      class="typeform-share"
+      class="typeform-share popup"
       href="//betatests.typeform.com/to/Z9k3bK?disable-tracking=true"
-      data-mode="2"
+      data-mode="drawer_left"
       data-submit-close-delay="4"
       target="_blank"
     >
       Launch me as a drawer!
     </a>
 
     <a
-      class="typeform-share"
+      class="typeform-share popup"
       href="//betatests.typeform.com/to/Z9k3bK?disable-tracking=true"
-      data-mode="3"
+      data-mode="drawer_right"
+      data-width="400"
       data-submit-close-delay="4"
       target="_blank"
     >
       Launch me as a right drawer!
     </a>
 
+    <div class="popover-hint">To launch a popover click this button 👉</div>
+
+    <a
+      class="typeform-share popover"
+      href="//betatests.typeform.com/to/Z9k3bK?disable-tracking=true"
+      data-mode="popover"
+      data-width="500"
+      data-height="600"
+      data-submit-close-delay="4"
+      target="_blank"
+    >
+      <span class="icon">
+        <svg width="24" height="24" fill="none" style="margin-top:7px" viewBox="0 0 84 83">
+          <rect width="84" height="56" fill="#fff" rx="8" />
+          <path fill="#fff" d="M43 50h41v33L43 50z" opacity=".7" />
+        </svg>
+      </span>
+    </a>
+
     <script type="text/javascript" src="embed.js"></script>
     <script type="text/javascript" src="demo.js"></script>
   </body>

e2e/spec/functional/popup.spec.js

@@ -4,13 +4,15 @@ import {
   openPopup,
   closePopupViaKeyboard,
   closePopupViaButtonOnMobile,
-  IFRAME_SELECTOR, openOnMobile
+  IFRAME_SELECTOR,
+  openOnMobile
 } from '../../cypress-utils'
 
 const popupModes = {
-  1: 'Popup',
-  2: 'Drawer Left',
-  3: 'Drawer Right'
+  popup: 'Popup',
+  drawer_left: 'Drawer Left',
+  drawer_right: 'Drawer Right',
+  popover: 'Popover'
 }
 
 Object.keys(popupModes).forEach(popupMode => {

e2e/spec/visual/popup.spec.js

@@ -3,9 +3,10 @@ import { eyesCheckDesktop, eyesCheckMobile } from '../../applitools-utils'
 
 describe('Popup Widget', () => {
   const popupModes = {
-    1: 'Popup',
-    2: 'Drawer Left',
-    3: 'Drawer Right'
+    popup: 'Popup',
+    drawer_left: 'Drawer Left',
+    drawer_right: 'Drawer Right',
+    popover: 'Popover'
   }
 
   Object.keys(popupModes).forEach(popupMode => {

package.json

@@ -22,7 +22,7 @@
     "build": "./scripts/build.sh",
     "start": "yarn serve -S demo",
     "test": "yarn lint && yarn test:unit && yarn test:visual && yarn test:functional",
-    "lint": "yarn eslint ./src --ext .js --ignore-path .eslintignore",
+    "lint": "yarn eslint ./src --ext .js --ignore-path .eslintignore --max-warnings=0",
     "test:unit": "yarn jest",
     "test:unit:watch": "yarn jest --watch",
     "test:unit:coverage": "yarn jest --coverage",

src/core/attributes.js

@@ -65,6 +65,14 @@ const sanitizePopupAttributes = data => {
     obj.openValue = data.openValue
   }
 
+  if (data.width) {
+    obj.width = parseInt(data.width, 10)
+  }
+
+  if (data.height) {
+    obj.height = parseInt(data.height, 10)
+  }
+
   return obj
 }
 

src/core/make-popup.js

@@ -15,26 +15,43 @@ import {
 import Popup, {
   POPUP,
   POPUP_MODES,
-  DEFAULT_AUTOCLOSE_TIMEOUT
+  DEFAULT_AUTOCLOSE_TIMEOUT,
+  POPOVER,
+  DRAWER,
+  DRAWER_RIGHT
 } from './views/popup'
 import MobileModal from './views/mobile-modal'
 import { getPostMessageHandler } from './utils/get-post-message-handler'
 import { handleAutoOpen } from './utils/popup-auto-open'
 
 const DEFAULT_DRAWER_WIDTH = 800
+const DEFAULT_POPUP_WIDTH = 320
+const DEFAULT_POPUP_HEIGHT = 500
 
-const defaultOptions = {
-  mode: POPUP,
-  isModalOpen: false,
-  autoClose: DEFAULT_AUTOCLOSE_TIMEOUT,
-  hideFooter: false,
-  hideHeaders: false,
-  hideScrollbars: false,
-  disableTracking: false,
-  drawerWidth: DEFAULT_DRAWER_WIDTH,
-  onSubmit: noop,
-  open: null,
-  openValue: null
+const buildOptions = (embedId, options) => {
+  const isDrawer = options.mode === DRAWER || options.mode === DRAWER_RIGHT
+  const drawerWidth = options.width || options.drawerWidth || DEFAULT_DRAWER_WIDTH
+  const popupWidth = options.width || DEFAULT_POPUP_WIDTH
+  const width = isDrawer ? drawerWidth : popupWidth
+
+  return {
+    embedId,
+    mode: POPUP,
+    embedType: POPUP_MODES[options.mode] || POPUP_MODES[POPUP],
+    isModalOpen: false,
+    autoClose: DEFAULT_AUTOCLOSE_TIMEOUT,
+    hideFooter: false,
+    hideHeaders: false,
+    hideScrollbars: false,
+    disableTracking: false,
+    onSubmit: noop,
+    open: null,
+    openValue: null,
+    width,
+    height: DEFAULT_POPUP_HEIGHT,
+    isAutoCloseEnabled: options.autoClose !== undefined,
+    ...options
+  }
 }
 
 const queryStringKeys = {
@@ -45,7 +62,7 @@ const queryStringKeys = {
 }
 
 const renderComponent = (params, options) => {
-  const { url, domNode, close } = params
+  const { url, domNode, close, icon } = params
   const {
     autoClose,
     buttonText,
@@ -63,6 +80,7 @@ const renderComponent = (params, options) => {
     render(
       <Popup
         embedId={embedId}
+        icon={icon}
         onClose={close}
         options={options}
         url={urlWithQueryString}
@@ -87,23 +105,22 @@ const renderComponent = (params, options) => {
   }
 }
 
-export default function makePopup (url, options) {
-  window.addEventListener('message', getPostMessageHandler('form-ready', options.onReady))
-  window.addEventListener('message', getPostMessageHandler('form-closed', options.onClose))
+export default function makePopup (url, userOptions) {
+  window.addEventListener('message', getPostMessageHandler('form-ready', userOptions.onReady))
+  window.addEventListener('message', getPostMessageHandler('form-closed', userOptions.onClose))
 
   const embedId = randomString()
 
-  options = {
-    ...defaultOptions,
-    ...options,
-    isAutoCloseEnabled: options.autoClose !== undefined,
-    embedType: POPUP_MODES[options.mode],
-    embedId
-  }
+  const options = buildOptions(embedId, userOptions)
 
-  if (!Number.isSafeInteger(options.drawerWidth)) {
+  if (!Number.isSafeInteger(options.width)) {
     throw new Error(
-      `Whoops! You provided an invalid 'drawerWidth' option: "${options.drawerWidth}". It must be a number.`
+      `Whoops! You provided an invalid 'width' option: "${options.width}". It must be a number.`
+    )
+  }
+  if (!Number.isSafeInteger(options.height)) {
+    throw new Error(
+      `Whoops! You provided an invalid 'height' option: "${options.height}". It must be a number.`
     )
   }
 
@@ -116,17 +133,26 @@ export default function makePopup (url, options) {
     open (event) {
       const { currentTarget } = event || {}
       const currentUrl = currentTarget && currentTarget.href ? currentTarget.href : url
+      const icon = currentTarget && currentTarget.querySelector('span.icon')
       const params = {
         domNode,
+        icon,
         url: currentUrl,
-        close: this.close
+        close: this.close.bind(this)
       }
 
-      renderComponent(params, options)
+      const isOpen = domNode.children.length > 0
+      const togglePopup = options.mode === POPOVER
+      if (isOpen && togglePopup) {
+        if (typeof window.tfClosePopup === 'function') {
+          window.tfClosePopup({ ...event, detail: { embedId } })
+        }
+      } else {
+        renderComponent(params, options)
+      }
     },
     close () {
       window.postMessage({ type: 'form-closed', embedId }, '*')
-
       unmountComponentAtNode(domNode)
     }
   }