@ably/ui 7.10.0 → 8.0.0-dev.43132fe

package/src/core/MeganavSearchAutocomplete/component.js

@@ -0,0 +1,177 @@
+import { queryId } from "../dom-query";
+import AddSearchClient from "addsearch-js-client";
+
+const init = ({ input, container, listContainer, clear, client }) => {
+  client.setAnalyticsTag("Meganav autocomplete");
+  client.setThrottleTime(400);
+
+  const clearResults = () => {
+    container.classList.add("hidden");
+    listContainer.innerHTML = "";
+  };
+
+  const toggleClearBtn = (query) => {
+    if ((query || "").length > 0 && clear) {
+      clear.classList.remove("invisible");
+    } else if (clear) {
+      clear.classList.add("invisible");
+    }
+  };
+
+  const markQueryInSuggestion = (suggestionValue, query) => {
+    return suggestionValue.replace(
+      query.toLowerCase(),
+      `<span class="font-light">${query}</span>`
+    );
+  };
+
+  const navigateToUrl = (q) => (window.location = `/search?q=${q}`);
+
+  const focusNext = (index) => {
+    const nextSuggestion = listContainer.querySelector(
+      `[data-suggestion-index="${index + 1}"]`
+    );
+    if (!nextSuggestion) return;
+    nextSuggestion.focus();
+  };
+
+  const focusPrevious = (index) => {
+    const previousIndex = index - 1;
+
+    const previousSuggestion = listContainer.querySelector(
+      `[data-suggestion-index="${previousIndex}"]`
+    );
+    if (!previousSuggestion) return;
+    previousSuggestion.focus();
+  };
+
+  const renderResults =
+    (query) =>
+    (results = {}) => {
+      toggleClearBtn(query);
+
+      // Prevent invalid access error when key is invalid
+      if (!Array.isArray(results.suggestions)) {
+        clearResults();
+        return;
+      }
+
+      // Prevent key error from invalid key
+      if (results.suggestions.length === 0) {
+        clearResults();
+        return;
+      }
+
+      const items = results.suggestions.map((suggestion, index) => {
+        const li = document.createElement("li");
+        const button = document.createElement("button");
+        button.type = "button";
+
+        button.classList.add(
+          "ui-text-menu2",
+          "font-medium",
+          "p-8",
+          "w-full",
+          "text-left",
+          "rounded",
+          "hover:text-gui-hover",
+          "focus:outline-gui-focus",
+          "hover:bg-light-grey"
+        );
+
+        button.innerHTML = markQueryInSuggestion(suggestion.value, query);
+
+        button.dataset.suggestionIndex = index;
+
+        button.addEventListener("click", () => {
+          navigateToUrl(suggestion.value);
+        });
+
+        button.addEventListener("keydown", (e) => {
+          const key = e.key;
+
+          if (key === "ArrowDown") {
+            focusNext(index);
+          } else if (key === "ArrowUp" && index - 1 < 0) {
+            input.focus();
+          } else if (key === "ArrowUp" && index - 1 >= 0) {
+            focusPrevious(index);
+          } else if (key === "Enter" || key === "Space") {
+            navigateToUrl(suggestion.value);
+          }
+        });
+
+        li.appendChild(button);
+        return li;
+      });
+
+      listContainer.innerHTML = "";
+      items.forEach((item) => listContainer.appendChild(item));
+      container.classList.remove("hidden");
+    };
+
+  const keyupHandler = (e) => {
+    const query = e.target.value;
+    const key = e.key;
+
+    if (key === "ArrowDown") {
+      focusNext(0);
+      return;
+    }
+
+    if (!query) {
+      clearResults();
+    } else {
+      client.suggestions(query, renderResults(query));
+    }
+  };
+
+  let clearHandler;
+  if (clear) {
+    clearHandler = () => {
+      input.value = "";
+      clear.classList.add("invisible");
+      clearResults();
+    };
+    clear.addEventListener("click", clearHandler);
+  }
+
+  input.addEventListener("keyup", keyupHandler);
+
+  return {
+    teardown: () => {
+      input.removeEventListener("keyup", keyupHandler);
+      if (clear) clear.removeEventListener("click", clearHandler);
+    },
+    clear: () => {
+      input.value = "";
+      clearResults();
+    },
+  };
+};
+
+export default (apiKey) => {
+  if (!apiKey) {
+    console.log(`No AddSearch API key provided, skipping search suggestions.`);
+    return [];
+  }
+
+  const client = new AddSearchClient(apiKey);
+
+  return [
+    queryId("meganav-search-input"),
+    queryId("meganav-mobile-search-input"),
+  ]
+    .filter((i) => i)
+    .map((input) => {
+      const parent = input.parentNode;
+      const container = queryId(
+        "meganav-search-autocomplete-container",
+        parent
+      );
+      const listContainer = queryId("meganav-search-autocomplete-list", parent);
+      const clear = queryId("meganav-search-input-clear", parent);
+
+      return init({ input, container, listContainer, client, clear });
+    });
+};

package/src/core/MeganavSearchAutocomplete/component.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+const MeganavSearchAutocomplete = () => {
+  return (
+    <div
+      className="absolute w-full mt-8 z-10 hidden shadow-container rounded-lg bg-white border border-mid-grey"
+      data-id="meganav-search-autocomplete-container"
+    >
+      <ol className="m-16" data-id="meganav-search-autocomplete-list"></ol>
+    </div>
+  );
+};
+
+export default MeganavSearchAutocomplete;

package/src/core/MeganavSearchAutocomplete/component.rb

@@ -0,0 +1,6 @@
+module AblyUi
+  module Core
+    class MeganavSearchAutocomplete < ViewComponent::Base
+    end
+  end
+end

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

@@ -0,0 +1,22 @@
+<section class="ui-meganav-content grid-cols-12">
+  <div class="col-span-8">
+    <div class="mb-32">
+      <%= tag.form class: "flex items-start", action: abs_url("/search"), method: "get" do %>
+        <div class="relative w-full">
+          <%= render(AblyUi::Core::Icon.new(name: "icon-gui-search", size: "1.5rem", color: "text-cool-black", additional_css:"absolute top-12 left-16")) %>
+          <input type="search" name="q" class="ui-input pl-48 h-48" placeholder="Search" autocomplete="off" data-id="meganav-search-input" />
+
+          <%= render(AblyUi::Core::MeganavSearchAutocomplete.new) %>
+        </div>
+
+        <button type="submit" class="ui-btn-secondary flex-shrink-0 ml-8 sm:ml-16 md:ml-24 xl:ml-32">
+          Search
+        </button>
+      <% end %>
+    </div>
+  </div>
+
+  <div class="col-span-12">
+    <%= render(AblyUi::Core::MeganavSearchSuggestions.new(url_base: url_base)) %>
+  </div>
+</section>

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 flex-shrink-0 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-hidden">
+  <ul class="flex transition-transform">
+    <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/fonts/source-code-pro.css

@@ -0,0 +1,3 @@
+@layer base {
+  @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@600&display=swap");
+}

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

@@ -15,9 +15,10 @@
     --color-charcoal-grey: #292831;
     --color-gui-default: #0073e6;
     --color-gui-hover: #0867c4;
-    --color-gui-focus: #80b9f2;
+    --color-gui-focus: #0073e6;
+    --color-gui-focus-outline: #80b9f2;
     --color-gui-active: #074095;
-    --color-gui-viewed: #4887c2;
+    --color-gui-visited: #4887c2;
     --color-gui-unavailable: #a8a8a8;
     --color-gui-error: #fb0c0c;
     --color-gui-success: #11cb24;
@@ -117,7 +118,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;
@@ -155,7 +158,7 @@
     /* In components, when looking at implementing viewport margin and spacing between elements,
        the values in the comments can be used as guide as they represent the grid the elements (should) sit on.
        alternatively, look for ui-grid-* helpers. */
-    --bp-xs: 375px; /* gutters 8px, side-margin 24px */
+    --bp-xs: 428px; /* gutters 8px, side-margin 24px */
     --bp-sm: 768px; /* gutters 16px, side-margin 32px */
     --bp-md: 1040px; /* gutters 24px, side-margin 40px, meganav desktop */
     --bp-lg: 1280px; /* gutters 24px, side-margin 64px */

package/src/core/styles/text.css

@@ -30,17 +30,17 @@
   }
 
   .ui-text-p1 {
-    @apply font-sans font-light text-cool-black;
+    @apply font-sans font-light text-charcoal-grey;
     @apply text-p1;
   }
 
   .ui-text-p2 {
-    @apply font-sans font-light text-cool-black;
+    @apply font-sans font-light text-charcoal-grey;
     @apply text-p2;
   }
 
   .ui-text-p3 {
-    @apply font-sans font-light text-cool-black;
+    @apply font-sans font-light text-charcoal-grey;
     @apply text-p3;
   }
 
@@ -146,21 +146,17 @@
     @apply list-square;
   }
 
-  /* visited needs to come before :hover et all else it overrides them */
-  .ui-link:visited {
-    @apply text-gui-viewed;
-  }
-
   .ui-link {
-    @apply hover:text-active-orange active:text-red-orange;
-    text-decoration-color: var(--color-active-orange);
-    text-underline-offset: 4px; /* px used here as behaves weird with rem's */
-    text-decoration-line: underline;
-    text-decoration-thickness: 0.125rem;
+    @apply visited:text-gui-visited;
+    @apply hover:text-gui-hover active:text-gui-active disabled:text-gui-unavailable;
+    @apply focus:text-gui-focus focus:outline-gui-focus;
+    @apply underline;
   }
 
-  .ui-link:focus {
-    @apply focus:text-white focus:bg-active-orange focus:outline-none;
-    text-decoration: none;
+  .ui-link-neutral {
+    @apply visited:text-dark-grey;
+    @apply hover:text-dark-grey active:text-cool-black disabled:text-gui-unavailable;
+    @apply focus:text-gui-focus focus:outline-gui-focus-neutral;
+    @apply underline;
   }
 }

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;