@ably/ui 8.7.0-dev.c598ce1 → 8.7.0-dev.cf2bf50

package/src/core/HeadwayWidget/HeadwayWidget.jsx

@@ -0,0 +1,234 @@
+import PropTypes from "prop-types";
+import React, { useCallback, useEffect, useRef } from "react";
+
+const HeadwayWidgetClassName = "HW_widget_component";
+const HeadwayWidgetSelector = "." + HeadwayWidgetClassName;
+const HeadwayWidgetTriggerClassName = "HW_trigger";
+const HeadwayWidgetTriggerSelector = "." + HeadwayWidgetTriggerClassName;
+
+const HeadwayWidgetTrigger = ({ widgetId, component, children }) => {
+  const Component = component || "div";
+  const className = HeadwayWidgetTriggerClassName + `_${widgetId}`;
+
+  return <Component className={className}>{children}</Component>;
+};
+
+HeadwayWidgetTrigger.defaultProps = {
+  widgetId: "widget-1",
+};
+
+const HeadwayWidget = ({
+  id,
+  account,
+  children,
+  widgetPosition,
+  badgePosition,
+  component,
+  trigger,
+  onWidgetReady,
+  onShowWidget,
+  onShowDetails,
+  onReadMore,
+  onHideWidget,
+  styles,
+  options,
+  translations,
+  ...rest
+}) => {
+  const onWidgetReadyRef = useRef(onWidgetReady);
+  const onShowWidgetRef = useRef(onShowWidget);
+  const onShowDetailsRef = useRef(onShowDetails);
+  const onReadMoreRef = useRef(onReadMore);
+  const onHideWidgetRef = useRef(onHideWidget);
+  const optionsRef = useRef(options);
+  useEffect(() => {
+    onWidgetReadyRef.current = onWidgetReady || (options.callbacks && options.callbacks.onWidgetReady);
+    onShowWidgetRef.current = onShowWidget || (options.callbacks && options.callbacks.onShowWidget);
+    onShowDetailsRef.current = onShowDetails || (options.callbacks && options.callbacks.onShowDetails);
+    onReadMoreRef.current = onReadMore || (options.callbacks && options.callbacks.onReadMore);
+    onHideWidgetRef.current = onHideWidget || (options.callbacks && options.callbacks.onHideWidget);
+    optionsRef.current = options;
+  });
+
+  const handleWidgetReady = useCallback(() => onWidgetReadyRef.current && onWidgetReadyRef.current(), []);
+  const handleShowWidget = useCallback(() => onShowWidgetRef.current && onShowWidgetRef.current(), []);
+  const handleShowDetails = useCallback(() => onShowDetailsRef.current && onShowDetailsRef.current(), []);
+  const handleReadMore = useCallback(() => onReadMoreRef.current && onReadMoreRef.current(), []);
+  const handleHideWidget = useCallback(() => onHideWidgetRef.current && onHideWidgetRef.current(), []);
+
+  const initHeadway = useCallback(() => {
+    const hwConfig = {
+      selector: HeadwayWidgetSelector + `_${id}`,
+      account: account || options.account,
+      trigger: trigger ? HeadwayWidgetSelector + `_${id}` : options.trigger || HeadwayWidgetTriggerSelector + `_${id}`,
+      callbacks: {
+        onWidgetReady: handleWidgetReady,
+        onShowWidget: handleShowWidget,
+        onShowDetails: handleShowDetails,
+        onReadMore: handleReadMore,
+        onHideWidget: handleHideWidget,
+      },
+      translations,
+      widgetPosition,
+      badgePosition,
+      __component: true,
+      styles,
+      ...options,
+    };
+
+    const widget = window.Headway.getNewWidget();
+    widget.init(hwConfig);
+
+    return () => {
+      widget.destroy();
+    };
+  }, [account, trigger, handleWidgetReady, handleShowWidget, handleShowDetails, handleReadMore, handleHideWidget, badgePosition, widgetPosition, translations]);
+
+  console.log(window.Headway);
+
+  useEffect(() => {
+    console.log("test");
+    let destroy;
+    if (window.Headway) {
+      console.log("destroy");
+      destroy = initHeadway();
+    } else {
+      console.log("else");
+      const head = document.getElementsByTagName("head")[0];
+      const script = document.createElement("script");
+      script.type = "text/javascript";
+      const p = new Promise((resolve) => {
+        script.onload = () => {
+          const d = initHeadway();
+          resolve(d);
+        };
+      });
+
+      destroy = () => {
+        p.then((d) => d());
+      };
+      script.src = "https://cdn.headwayapp.co/widget.js"; // "https://cdn.headwaystaging.com/widget.js"; //;
+      head.appendChild(script);
+    }
+    return destroy;
+  }, [initHeadway]);
+
+  const Component = component || "div";
+
+  return (
+    <Component className={HeadwayWidgetClassName + `_${id}`} {...rest} style={{ position: "relative", display: "inline-block" }}>
+      {children}
+    </Component>
+  );
+};
+
+export default HeadwayWidget;
+
+HeadwayWidget.propTypes = {
+  /**
+   * account of your Headway.
+   */
+  account: PropTypes.string.isRequired,
+  /**
+   * id of the Widget. It is required if you have more than one widget instance on the page.
+   */
+  id: PropTypes.string,
+  /**
+   * position of a badge
+   */
+  badgePosition: PropTypes.oneOf([
+    "top-left",
+    "top-center",
+    "top-right",
+    "center-left",
+    "center",
+    "center-right",
+    "bottom-left",
+    "bottom-center",
+    "bottom-right",
+  ]),
+  /**
+   * badge relative widget position
+   */
+  widgetPosition: PropTypes.oneOf(["top-left", "top-right", "center-left", "center-right", "bottom-left", "bottom-right"]),
+  /**
+   * callback fired when widget has loaded
+   */
+  onWidgetReady: PropTypes.func,
+  /**
+   * callback fired when widget is shown
+   */
+  onShowWidget: PropTypes.func,
+  /**
+   * callback fired when an item in the widget is clicked
+   */
+  onShowDetails: PropTypes.func,
+  /**
+   * callback fired when user clicks on readMore link
+   */
+  onReadMore: PropTypes.func,
+  /**
+   * callback fired when user closes the widget
+   */
+  onHideWidget: PropTypes.func,
+  /**
+   * Translating the text inside of the widget
+   * */
+  translations: PropTypes.shape({
+    title: PropTypes.string,
+    labels: PropTypes.shape({
+      new: PropTypes.string,
+      update: PropTypes.string,
+      improvement: PropTypes.string,
+    }),
+    readMore: PropTypes.string,
+    footer: PropTypes.string,
+  }),
+  /**
+   * options defined in classic object format. Read more at https://docs.headwayapp.co/widget
+   */
+  options: PropTypes.shape({
+    account: PropTypes.string,
+    callbacks: PropTypes.shape({
+      onWidgetReady: PropTypes.func,
+      onShowWidget: PropTypes.func,
+      onShowDetails: PropTypes.func,
+      onReadMore: PropTypes.func,
+      onHideWidget: PropTypes.func,
+    }),
+    translations: PropTypes.shape({
+      title: PropTypes.string,
+      labels: PropTypes.shape({
+        new: PropTypes.string,
+        update: PropTypes.string,
+        improvement: PropTypes.string,
+      }),
+      readMore: PropTypes.string,
+      footer: PropTypes.string,
+    }),
+    trigger: PropTypes.string,
+  }),
+
+  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  children: PropTypes.node,
+  trigger: PropTypes.string,
+  styles: PropTypes.object,
+};
+
+HeadwayWidget.defaultProps = {
+  account: "",
+  id: "widget-1",
+  badgePosition: "bottom-right",
+  widgetPosition: "bottom-right",
+  styles: {},
+  translations: {},
+  options: {},
+};
+
+HeadwayWidgetTrigger.propTypes = {
+  widgetId: PropTypes.string.isRequired,
+  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  children: PropTypes.node,
+};
+
+export { HeadwayWidgetTrigger };

package/src/core/HeadwayWidget/index.js

@@ -0,0 +1,5 @@
+import HeadwayWidget, { HeadwayWidgetTrigger } from "./HeadwayWidget";
+
+export default HeadwayWidget;
+
+export { HeadwayWidgetTrigger };

package/src/core/Meganav/component.css

@@ -7,13 +7,13 @@
     z-index: var(--stacking-context-page-meganav);
 
     @apply fixed top-0 w-full;
-    @apply antialiased font-sans transition-colors;
+    @apply font-sans antialiased transition-colors;
   }
 
   .ui-meganav {
     height: var(--ui-meganav-height);
 
-    @apply flex justify-between items-center max-w-screen-xl mx-auto;
+    @apply flex items-center justify-between max-w-screen-xl mx-auto;
   }
 
   .ui-meganav-panel,
@@ -22,7 +22,7 @@
     z-index: var(--stacking-context-meganav-dropdown);
 
     @apply absolute left-0 right-0;
-    @apply border-mid-grey border-t shadow-container;
+    @apply border-t border-mid-grey shadow-container;
   }
 
   .ui-meganav-panel {
@@ -35,9 +35,9 @@
     /* Prevents momentum-based scrolling https://devdocs.io/css/-webkit-overflow-scrolling */
     -webkit-overflow-scrolling: auto;
 
-    @apply bg-white pt-16 border-0;
-    @apply border-mid-grey border-t shadow-container;
-    @apply fixed top-64 left-0 right-0 overflow-y-auto;
+    @apply pt-16 bg-white border-0;
+    @apply border-t border-mid-grey shadow-container;
+    @apply fixed left-0 right-0 overflow-y-auto top-64;
   }
 
   .ui-meganav-panel-account {
@@ -51,8 +51,8 @@
   }
 
   .ui-meganav-link {
-    @apply text-menu2 font-medium block;
-    @apply mr-12 lg:mr-24 px-0 py-20;
+    @apply block font-medium text-menu2;
+    @apply px-0 py-20 mr-12 lg:mr-24;
     @apply hover:text-gui-hover focus:text-gui-focus focus:outline-none;
     @apply transition-colors;
   }
@@ -62,18 +62,18 @@
   }
 
   .ui-meganav-mobile-link {
-    @apply p-menu-row relative -left-8 w-extend-8;
-    @apply text-menu2 font-medium block text-cool-black text-left;
+    @apply relative p-menu-row -left-8 w-extend-8;
+    @apply block font-medium text-left text-menu2 text-cool-black;
     @apply flex items-center;
     @apply focus:text-gui-focus focus:outline-none;
   }
 
   .ui-meganav-account-link {
-    @apply block px-8 py-8 hover:bg-light-grey hover:text-gui-hover rounded relative -left-8 text-menu3 w-extend-8 font-light;
+    @apply relative block px-8 py-8 font-light rounded hover:bg-light-grey hover:text-gui-hover -left-8 text-menu3 w-extend-8;
   }
 
   .ui-meganav-content {
-    @apply max-w-screen-xl py-24 lg:py-32 mx-auto;
+    @apply max-w-screen-xl py-24 mx-auto lg:py-32;
     @apply grid grid-cols-1;
     @apply px-24 md:px-32 lg:px-32 xl:px-64;
   }
@@ -81,27 +81,27 @@
   /* This is implemented not as padding so we can change the color of just this space, while keeping the grid
      as close to the designs as possible */
   .ui-meganav-content-spacer {
-    @apply hidden md:block md:w-32 lg:w-32 xl:w-64 self-stretch flex-shrink-0 flex-grow-0;
+    @apply self-stretch flex-grow-0 flex-shrink-0 hidden md:block md:w-32 lg:w-32 xl:w-64;
   }
 
   .ui-meganav-media {
-    @apply block px-8 py-8 hover:bg-light-grey rounded relative -left-8 w-extend-8;
+    @apply relative block px-8 py-8 rounded hover:bg-light-grey -left-8 w-extend-8;
   }
 
   .ui-meganav-media-with-image {
     grid-template-columns: max-content 1fr;
     grid-template-rows: min-content 1fr;
 
-    @apply block px-8 py-8 hover:bg-light-grey rounded relative -left-8 w-extend-8;
-    @apply grid gap-x-8;
+    @apply relative block px-8 py-8 rounded hover:bg-light-grey -left-8 w-extend-8;
+    @apply grid gap-x-16;
   }
 
   .ui-meganav-media-heading {
-    @apply text-menu3 text-cool-black font-medium group-hover:text-gui-hover group-focus:text-gui-focus;
+    @apply font-medium text-menu3 text-cool-black group-hover:text-gui-hover group-focus:text-gui-focus;
   }
 
   .ui-meganav-media-copy {
-    @apply text-p3 text-dark-grey font-light;
+    @apply font-light text-p3 text-dark-grey;
   }
 
   .ui-meganav-overline {
@@ -112,3 +112,27 @@
     @apply my-0 text-mid-grey;
   }
 }
+
+.HW_badge {
+  width: 1.25rem !important;
+  height: 1.25rem !important;
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
+  font-size: 14px !important;
+  top: 2px !important;
+  left: 20px !important;
+  transition: none !important;
+}
+
+.HW_animated {
+  animation: none !important;
+}
+
+.invisible .HW_badge {
+  visibility: hidden !important;
+}
+
+.invisible .HW_frame {
+  visibility: hidden !important;
+}

package/src/core/Meganav/component.json

@@ -29,7 +29,7 @@
     }
   },
   "panels": [
-    { "label": "Platform", "shortLabel": "Platform", "id": "platform-panel", "component": "MeganavContentPlatform" },
+    { "label": "Products", "shortLabel": "Products", "id": "products-panel", "component": "MeganavContentProducts" },
     { "label": "Solutions", "shortLabel": "Solutions", "id": "use-cases-panel", "component": "MeganavContentUseCases" },
     { "label": "Company", "shortLabel": "Company", "id": "company-panel", "component": "MeganavContentCompany" },
     { "label": "Developers", "shortLabel": "Developers", "id": "developers-panel", "component": "MeganavContentDevelopers" }

package/src/core/Meganav/component.jsx

@@ -14,7 +14,7 @@ import Notice from "../Notice/component.jsx";
 import MeganavData from "./component.json";
 import _absUrl from "../url-base";
 
-import MeganavContentPlatform from "../MeganavContentPlatform/component.jsx";
+import MeganavContentProducts from "../MeganavContentProducts/component.jsx";
 import MeganavContentUseCases from "../MeganavContentUseCases/component.jsx";
 import MeganavContentCompany from "../MeganavContentCompany/component.jsx";
 import MeganavContentDevelopers from "../MeganavContentDevelopers/component.jsx";
@@ -58,7 +58,7 @@ SignIn.propTypes = {
 const SignInPlaceholder = () => <div />;
 
 const panels = {
-  MeganavContentPlatform: MeganavContentPlatform,
+  MeganavContentProducts: MeganavContentProducts,
   MeganavContentUseCases: MeganavContentUseCases,
   MeganavContentCompany: MeganavContentCompany,
   MeganavContentDevelopers: MeganavContentDevelopers,

package/src/core/Meganav/component.rb

@@ -30,10 +30,10 @@ module AblyUi
       def panels
         [
           {
-            label: 'Platform',
-            short_label: 'Platform',
-            id: 'platform-panel',
-            class: 'AblyUi::Core::MeganavContentPlatform'
+            label: 'Products',
+            short_label: 'Products',
+            id: 'products-panel',
+            class: 'AblyUi::Core::MeganavContentProducts'
           },
           {
             label: 'Solutions',

package/src/core/MeganavContentCompany/component.html.erb

@@ -72,6 +72,15 @@
             </div>
           <% end %>
         </li>
+        <li>
+          <%= link_to abs_url("/events"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-events-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Events</p>
+              <p class="ui-meganav-media-copy">Join Ably at upcoming events.</p>
+            </div>
+          <% end %>
+        </li>
       </ul>
     </div>
 

package/src/core/MeganavContentCompany/component.jsx

@@ -88,6 +88,15 @@ const MeganavContentCompany = ({ paths, absUrl }) => {
                 </div>
               </a>
             </li>
+            <li>
+              <a href={absUrl("/events")} className="ui-meganav-media-with-image group">
+                <Icon name="icon-display-events-col" size="2.5rem" />
+                <div className="flex flex-col justify-center">
+                  <p className="ui-meganav-media-heading">Events</p>
+                  <p className="ui-meganav-media-copy">Join Ably at upcoming events.</p>
+                </div>
+              </a>
+            </li>
           </ul>
         </div>
 

package/src/core/MeganavContentDevelopers/component.html.erb

@@ -33,9 +33,17 @@
             </div>
           <% end %>
         </li>
+        <li>
+          <%= link_to abs_url("/examples"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-examples-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Live examples</p>
+              <p class="ui-meganav-media-copy">Discover our features and their use cases.</p>
+            </div>
+          <% end %>
+        </li>
       </ul>
     </div>
-
     <div class="col-span-full md:col-span-4 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
       <ul class="md:mt-40" aria-labelledby="meganav-developers-panel-explore">
         <li>
@@ -65,9 +73,17 @@
             </div>
           <% end %>
         </li>
+        <li>
+          <%= link_to abs_url("/reference-guide-multiplayer"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-multi-user-spaces-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Multiplayer reference guide</p>
+              <p class="ui-meganav-media-copy">Learn how to build collaborative features with Ably.</p>
+            </div>
+          <% end %>
+        </li>
       </ul>
     </div>
-
     <div class="col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
       <h3 class="ui-meganav-overline uppercase" id="meganav-developers-panel-quick-links">
         Quick links