@ably/ui 7.9.4 → 7.10.0-dev.45e131a

package/src/core/MeganavItemsMobile/component.jsx

@@ -2,6 +2,8 @@ import React from "react";
 import T from "prop-types";
 
 import SignOutLink from "../SignOutLink/component.jsx";
+import MeganavSearchSuggestions from "../MeganavSearchSuggestions/component.jsx";
+import Icon from "../Icon/component.jsx";
 
 import MeganavData from "../Meganav/component.json";
 import MeganavControlMobileDropdown from "../MeganavControlMobileDropdown/component.jsx";
@@ -33,7 +35,18 @@ const MeganavItemsMobile = ({ panels, paths, sessionState, theme, loginLink, abs
         <MeganavControlMobileDropdown theme={theme} />
 
         <div className="ui-meganav-mobile-dropdown invisible" id="meganav-mobile-dropdown" data-id="meganav-mobile-dropdown">
-          <div className="py-16 ui-grid-px bg-white">
+          <div className="pt-24 pb-16 ui-grid-px bg-white">
+            <form className="mb-16" 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" data-id="meganav-mobile-search-input" />
+              </div>
+            </form>
+
+            <div className="max-h-0 overflow-hidden transition-all" data-id="meganav-mobile-search-suggestions">
+              <MeganavSearchSuggestions absUrl={absUrl} displaySupportLink={false} />
+            </div>
+
             <ul className="mb-16">
               {MeganavData.panels.map((panel) => {
                 const PanelComponent = panels[panel.component];

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

@@ -1,6 +1,6 @@
 <ul class="hidden md:flex items-center">
   <li class="ui-meganav-item relative">
-    <%= render(AblyUi::Core::MeganavControl.new(aria_controls: "account-panel", theme_name: @theme_name)) do %>
+    <%= render(AblyUi::Core::MeganavControl.new(aria_controls: "account-panel", theme_name: @theme_name, additional_css: "mr-0")) do %>
       <%= account_name %>
     <% end %>
 
@@ -41,6 +41,10 @@
     </div>
   </li>
 
+  <li>
+    <%= render(AblyUi::Core::MeganavSearch.new(url_base: url_base)) %>
+  <li>
+
   <% if account? %>
     <li class="ml-16">
       <%= link_to "Dashboard", @session_data[:account][:links][:dashboard][:href], class: "ui-btn-secondary p-btn-small" %>

package/src/core/MeganavItemsSignedIn/component.jsx

@@ -3,6 +3,7 @@ import T from "prop-types";
 
 import MeganavControl from "../MeganavControl/component.jsx";
 import SignOutLink from "../SignOutLink/component.jsx";
+import MeganavSearch from "../MeganavSearch/component.jsx";
 
 const truncate = (string, length) => {
   return string?.length && string.length > length ? `${string.slice(0, length - 1)}…` : string;
@@ -16,7 +17,7 @@ const MeganavItemsSignedIn = ({ sessionState, theme, absUrl }) => {
   return (
     <ul className="hidden md:flex items-center">
       <li className="ui-meganav-item relative">
-        <MeganavControl ariaControls="account-panel" theme={theme}>
+        <MeganavControl ariaControls="account-panel" theme={theme} additionalCSS="mr-0">
           {accountName}
         </MeganavControl>
 
@@ -70,8 +71,12 @@ const MeganavItemsSignedIn = ({ sessionState, theme, absUrl }) => {
         </div>
       </li>
 
+      <li>
+        <MeganavSearch absUrl={absUrl} />
+      </li>
+
       {sessionState.account && (
-        <li className="ml-16">
+        <li>
           <a href={absUrl(sessionState.account.links.dashboard.href)} className="ui-btn-secondary p-btn-small">
             Dashboard
           </a>

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

@@ -0,0 +1,14 @@
+<button
+  type="button"
+  data-id="meganav-control"
+  class="h-64 w-24 px-24 pr-48 py-20"
+  aria-expanded="false"
+  aria-controls="panel-search"
+  aria-label="Show Search Panel"
+>
+  <%= render(AblyUi::Core::Icon.new(name: "icon-gui-search", size: "1.5rem", color: "text-cool-black")) %>
+</button>
+
+<div class="ui-meganav-panel invisible" id="panel-search" data-id="meganav-panel">
+  <%= render(AblyUi::Core::MeganavSearchPanel.new(url_base: url_base)) %>
+</div>

package/src/core/MeganavSearch/component.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+import T from "prop-types";
+
+import Icon from "../Icon/component.jsx";
+import MeganavSearchPanel from "../MeganavSearchPanel/component.jsx";
+
+const MeganavSearch = ({ absUrl }) => {
+  return (
+    <>
+      <button
+        type="button"
+        data-id="meganav-control"
+        className="h-64 w-24 px-24 pr-48 py-20"
+        aria-expanded="false"
+        aria-controls="panel-search"
+        aria-label={`Show Search Panel`}
+      >
+        <Icon name="icon-gui-search" color="text-cool-black" size="1.5rem" additionalCSS="" />
+      </button>
+
+      <div className="ui-meganav-panel invisible" id="panel-search" data-id="meganav-panel">
+        <MeganavSearchPanel absUrl={absUrl} />
+      </div>
+    </>
+  );
+};
+
+MeganavSearch.propTypes = {
+  absUrl: T.func,
+};
+
+export default MeganavSearch;

package/src/core/MeganavSearch/component.rb

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

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

@@ -0,0 +1,20 @@
+<section class="ui-meganav-content grid-cols-12">
+  <div class="col-span-8">
+    <div class="mb-32">
+      <form class="flex items-start" action={absUrl("/search")} method="get">
+        <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" />
+        </div>
+
+        <button type="submit" class="ui-btn-secondary ml-8 sm:ml-16 md:ml-24 xl:ml-32">
+          Search
+        </button>
+      </form>
+    </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,36 @@
+import React from "react";
+import T from "prop-types";
+
+import Icon from "../Icon/component.jsx";
+import MeganavSearchSuggestions from "../MeganavSearchSuggestions/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" />
+            </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">
+  <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 ui-link" %>
+    </li>
+    <li class="py-12 px-8 flex-shrink-0">
+      <%= link_to 'Quickstart guide', abs_url("/docs/quick-start-guide"), class: "ui-text-p2 ui-link" %>
+    </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 ui-link" %>
+    </li>
+    <li class="py-12 pl-8 flex-shrink-0">
+      <%= link_to 'Platform', abs_url("/docs/how-ably-works"), class: "ui-text-p2 ui-link" %>
+    </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.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-x-scroll">
+        <ul className="flex">
+          <li className="py-12 pr-8 flex-shrink-0">
+            <a href={absUrl("/docs/how-ably-works")} className="ui-text-p2 ui-link">
+              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 ui-link">
+              Quickstart guide
+            </a>
+          </li>
+          <li className="py-12 px-8 flex-shrink-0">
+            <a href={absUrl("/docs/core-features/pubsub")} className="ui-text-p2 ui-link">
+              Publish/Subscribe Messaging
+            </a>
+          </li>
+          <li className="py-12 pl-8 flex-shrink-0">
+            <a href={absUrl("/platform")} className="ui-text-p2 ui-link">
+              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/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)",