@ably/ui 7.9.3 → 7.10.0-dev.caff705

package/src/core/MeganavSearchPanel/component.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+import T from "prop-types";
+
+import Icon from "../Icon/component.jsx";
+import MeganavSearchSuggestions from "../MeganavSearchSuggestions/component.jsx";
+import MeganavSearchAutocomplete from "../MeganavSearchAutocomplete/component.jsx";
+
+const MeganavSearchPanel = ({ absUrl }) => {
+  return (
+    <section className="ui-meganav-content grid-cols-12">
+      <div className="col-span-8">
+        <div className="mb-32">
+          <form className="flex items-start" action={absUrl("/search")} method="get">
+            <div className="relative w-full">
+              <Icon name="icon-gui-search" color="text-cool-black" size="1.5rem" additionalCSS="absolute top-12 left-16" />
+              <input type="search" name="q" className="ui-input pl-48 h-48" placeholder="Search" autoComplete="off" data-id="meganav-search-input" />
+
+              <MeganavSearchAutocomplete />
+            </div>
+
+            <button type="submit" className="ui-btn-secondary ml-8 sm:ml-16 md:ml-24 xl:ml-32">
+              Search
+            </button>
+          </form>
+        </div>
+      </div>
+
+      <div className="col-span-12">
+        <MeganavSearchSuggestions displaySupportLink={true} absUrl={absUrl} />
+      </div>
+    </section>
+  );
+};
+
+MeganavSearchPanel.propTypes = {
+  absUrl: T.func,
+};
+
+export default MeganavSearchPanel;

package/src/core/MeganavSearchPanel/component.rb

@@ -0,0 +1,13 @@
+module AblyUi
+  module Core
+    class MeganavSearchPanel < ViewComponent::Base
+      include Util
+
+      attr_reader :url_base
+
+      def initialize(url_base:)
+        @url_base = url_base
+      end
+    end
+  end
+end

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

@@ -0,0 +1,22 @@
+<p class="ui-text-overline2 text-cool-black py-12">Popular pages</p>
+
+<div class="flex justify-between items-center overflow-x-scroll md:overflow-auto">
+  <ul class="flex">
+    <li class="py-12 pr-8 flex-shrink-0">
+      <%= link_to 'How does Ably work?', abs_url("/docs/how-ably-works"), class: "ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus" %>
+    </li>
+    <li class="py-12 px-8 flex-shrink-0">
+      <%= link_to 'Quickstart guide', abs_url("/docs/quick-start-guide"), class: "ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus" %>
+    </li>
+    <li class="py-12 px-8 flex-shrink-0">
+      <%= link_to 'Publish/Subscribe Messaging', abs_url("/docs/core-features/pubsub"), class: "ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus" %>
+    </li>
+    <li class="py-12 pl-8 flex-shrink-0">
+      <%= link_to 'Platform', abs_url("/docs/how-ably-works"), class: "ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus" %>
+    </li>
+  </ul>
+
+  <% if display_support_link? %>
+    <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/support"), text_size: "text-p2")) do %>Support<% end %>
+  <% end %>
+</div>

package/src/core/MeganavSearchSuggestions/component.js

@@ -0,0 +1,123 @@
+import { queryId } from "../dom-query";
+
+const DRAG_BUFFER = 5;
+
+const getTranslateX = (node) =>
+  new DOMMatrix(window.getComputedStyle(node).transform).e;
+
+const updateTranslateX = (node, value) =>
+  (node.style.transform = `translateX(${value}px)`);
+
+const dragLeftBoundary = (translateX, threshold) => translateX >= threshold;
+
+const dragRightBoundary = (translateX, itemsWidth, windowWidth, threshold) =>
+  Math.abs(translateX - windowWidth + threshold) > itemsWidth;
+
+const getDistance = (e, touchStartX) =>
+  e.changedTouches[0]?.clientX - touchStartX;
+
+const withinBuffer = (distance) => Math.abs(distance) < DRAG_BUFFER;
+
+const MeganavSearchSuggestions = () => {
+  const suggestionsToggle = queryId("meganav-mobile-search-input");
+  const suggestions = queryId("meganav-mobile-search-suggestions");
+  const list = suggestions.querySelector("ul");
+  const listItems = list.querySelectorAll("li");
+
+  const itemsTotalWidth = Array.from(listItems)
+    .map((item) => item.getBoundingClientRect().width)
+    .reduce((acc, val) => acc + val, 0);
+
+  const dragLeft = (distance, threshold) => {
+    const currentTranslateX = getTranslateX(list);
+    const translateX = Math.round(currentTranslateX + distance);
+    if (dragLeftBoundary(translateX, threshold)) return;
+    updateTranslateX(list, translateX);
+  };
+
+  const dragLeftEnd = (distance, threshold) => {
+    const currentTranslateX = getTranslateX(list);
+    let translateX = Math.round(currentTranslateX + distance);
+
+    if (dragLeftBoundary(translateX, threshold)) {
+      translateX = 0;
+    }
+
+    updateTranslateX(list, translateX);
+  };
+
+  const dragRight = (distance, threshold) => {
+    const listWidth = list.getBoundingClientRect().width;
+    const currentTranslateX = getTranslateX(list);
+    const translateX = Math.round(currentTranslateX + distance);
+
+    if (dragRightBoundary(translateX, itemsTotalWidth, listWidth, threshold)) {
+      return;
+    }
+
+    updateTranslateX(list, translateX);
+  };
+
+  const dragRightEnd = (distance, threshold) => {
+    const listWidth = list.getBoundingClientRect().width;
+    const currentTranslateX = getTranslateX(list);
+    let translateX = Math.round(currentTranslateX + distance);
+
+    if (dragRightBoundary(translateX, itemsTotalWidth, listWidth, threshold)) {
+      translateX = -(itemsTotalWidth - listWidth + threshold);
+    }
+
+    updateTranslateX(list, translateX);
+  };
+
+  let touchStartX;
+
+  const touchstartHandler = (e) => {
+    touchStartX = e.touches[0]?.clientX;
+  };
+
+  const touchmoveHandler = (e) => {
+    const distance = getDistance(e, touchStartX);
+    if (withinBuffer(distance)) return;
+    distance > 0 ? dragLeft(distance, 24) : dragRight(distance, 96);
+  };
+
+  const touchendHandler = (e) => {
+    const distance = getDistance(e, touchStartX);
+    if (withinBuffer(distance)) return;
+    distance > 0 ? dragLeftEnd(distance, 24) : dragRightEnd(distance, 48);
+  };
+
+  const focusSuggestionsHandler = () => {
+    suggestions.classList.add("max-h-96");
+  };
+
+  const blurSuggestionsHandler = (e) => {
+    if (e.relatedTarget === suggestions.querySelectorAll("a")[0]) {
+      return;
+    }
+    suggestions.classList.remove("max-h-96");
+  };
+
+  suggestionsToggle.addEventListener("focus", focusSuggestionsHandler);
+  suggestionsToggle.addEventListener("blur", blurSuggestionsHandler);
+  suggestions.addEventListener("touchstart", touchstartHandler);
+  suggestions.addEventListener("touchmove", touchmoveHandler);
+  suggestions.addEventListener("touchend", touchendHandler);
+
+  return {
+    teardown: () => {
+      suggestionsToggle.removeEventListener("focus", focusSuggestionsHandler);
+      suggestionsToggle.removeEventListener("blur", blurSuggestionsHandler);
+      suggestions.removeEventListener("touchstart", touchstartHandler);
+      suggestions.removeEventListener("touchmove", touchmoveHandler);
+      suggestions.removeEventListener("touchend", touchendHandler);
+    },
+    clear: () => {
+      suggestions.classList.remove("max-h-96");
+      list.style.transform = `translateX(0px)`;
+    },
+  };
+};
+
+export default MeganavSearchSuggestions;

package/src/core/MeganavSearchSuggestions/component.jsx

@@ -0,0 +1,49 @@
+import React from "react";
+import T from "prop-types";
+
+import FeaturedLink from "../FeaturedLink/component.jsx";
+
+const MeganavSearchSuggestions = ({ absUrl, displaySupportLink }) => {
+  return (
+    <>
+      <p className="ui-text-overline2 text-cool-black py-12">Popular pages</p>
+
+      <div className="flex justify-between items-center overflow-hidden">
+        <ul className="flex transition-transform">
+          <li className="py-12 pr-8 flex-shrink-0">
+            <a href={absUrl("/docs/how-ably-works")} className="ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus">
+              How does Ably work?
+            </a>
+          </li>
+          <li className="py-12 px-8 flex-shrink-0">
+            <a href={absUrl("/docs/quick-start-guide")} className="ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus">
+              Quickstart guide
+            </a>
+          </li>
+          <li className="py-12 px-8 flex-shrink-0">
+            <a href={absUrl("/docs/core-features/pubsub")} className="ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus">
+              Publish/Subscribe Messaging
+            </a>
+          </li>
+          <li className="py-12 pl-8 flex-shrink-0">
+            <a href={absUrl("/platform")} className="ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus">
+              Platform
+            </a>
+          </li>
+        </ul>
+        {displaySupportLink ? (
+          <FeaturedLink url={absUrl("/support")} textSize="text-p2">
+            Support
+          </FeaturedLink>
+        ) : null}
+      </div>
+    </>
+  );
+};
+
+MeganavSearchSuggestions.propTypes = {
+  absUrl: T.func,
+  displaySupportLink: T.bool,
+};
+
+export default MeganavSearchSuggestions;

package/src/core/MeganavSearchSuggestions/component.rb

@@ -0,0 +1,18 @@
+module AblyUi
+  module Core
+    class MeganavSearchSuggestions < ViewComponent::Base
+      include Util
+
+      attr_reader :url_base
+
+      def initialize(url_base:, display_support_link: true)
+        @url_base = url_base
+        @display_support_link = display_support_link
+      end
+
+      def display_support_link?
+        @display_support_link
+      end
+    end
+  end
+end

package/src/core/remote-blogs-posts.js

@@ -3,7 +3,7 @@ import { isJsonResponse } from "./remote-data-util";
 const fetchBlogPosts = async (store, blogUrl) => {
   try {
     if (!blogUrl) {
-      console.warn(
+      console.log(
         `Skipping fetching blog posts, invalid blogUrl: "${blogUrl}"`
       );
       return;

package/src/core/remote-session-data.js

@@ -11,7 +11,7 @@ const fetchSessionData = async (store, sessionUrl) => {
 
   try {
     if (!sessionUrl) {
-      console.warn(
+      console.log(
         `Skipping fetching session, invalid sessionUrl: "${sessionUrl}"`
       );
       sessionLoaded();

package/src/core/styles/properties.css

@@ -117,7 +117,9 @@
 
     --spacing-0: 0px;
     --spacing-1: 1px;
+    --spacing-2: 0.125rem;
     --spacing-4: 0.25rem;
+    --spacing-6: 0.375rem;
     --spacing-8: 0.5rem;
     --spacing-12: 0.75rem;
     --spacing-14: 0.875rem;

package/src/core/styles.components.css

@@ -24,21 +24,6 @@
     stroke: var(--color-dark-grey);
   }
 
-  /* Extend how tailwind does group hover for icons */
-  .group {
-    &:hover {
-      .group-hover\:icon-gui-hover {
-        stroke: var(--color-gui-hover);
-      }
-    }
-
-    &:focus {
-      .group-focus\:icon-gui-focus {
-        stroke: var(--color-gui-focus);
-      }
-    }
-  }
-
   .ui-version-tag {
     @apply inline-block absolute align-top uppercase font-bold whitespace-nowrap;
 

package/tailwind.config.js

@@ -114,7 +114,9 @@ module.exports = {
     spacing: {
       0: "var(--spacing-0)",
       1: "var(--spacing-1)",
+      2: "var(--spacing-2)",
       4: "var(--spacing-4)",
+      6: "var(--spacing-6)",
       8: "var(--spacing-8)",
       12: "var(--spacing-12)",
       14: "var(--spacing-14)",