@ably/ui 8.2.0 → 8.2.1-dev.611f3bd

package/src/core/MeganavItemsMobile/component.jsx

@@ -68,13 +68,14 @@ const MeganavItemsMobile = ({ panels, paths, sessionState, theme, loginLink, abs
             <ul className="mb-16" data-id="meganav-mobile-panel-controls">
               {MeganavData.panels.map((panel) => {
                 const PanelComponent = panels[panel.component];
+                const displayHr = ["company-panel", "developers-panel"].includes(panel.id);
 
                 return (
                   <li className="ui-meganav-mobile-item" key={`${panel.id}-mobile`}>
                     <MeganavControlMobilePanelOpen ariaControls={`${panel.id}-mobile`}>{panel.label}</MeganavControlMobilePanelOpen>
 
                     <div className="ui-meganav-panel-mobile hidden" id={`${panel.id}-mobile`} data-scroll-lock-scrollable>
-                      <MeganavControlMobilePanelClose ariaControls={`${panel.id}-mobile`} />
+                      <MeganavControlMobilePanelClose ariaControls={`${panel.id}-mobile`} displayHr={displayHr} />
                       <PanelComponent paths={paths} absUrl={absUrl} />
                     </div>
                   </li>

package/src/core/MeganavItemsMobile/component.rb

@@ -12,6 +12,10 @@ module AblyUi
         @login_link = login_link
         @url_base = url_base
       end
+
+      def display_hr(panel_id)
+        %w[company-panel developers-panel].include?(panel_id)
+      end
     end
   end
 end

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, additional_css: "mr-0")) do %>
+    <%= render(AblyUi::Core::MeganavControl.new(aria_controls: "account-panel", aria_label: "Account", theme_name: @theme_name, additional_css: "mr-0")) do %>
       <%= account_name %>
     <% end %>
 

package/src/core/MeganavItemsSignedIn/component.jsx

@@ -17,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} additionalCSS="mr-0">
+        <MeganavControl ariaControls="account-panel" ariaLabel="Account" theme={theme} additionalCSS="mr-0">
           {accountName}
         </MeganavControl>
 

package/src/core/MeganavSearchSuggestions/component.js

@@ -18,15 +18,16 @@ const getDistance = (e, touchStartX) =>
 
 const withinBuffer = (distance) => Math.abs(distance) < DRAG_BUFFER;
 
+const getItemsTotalWidth = (nodes) =>
+  nodes
+    .map((item) => item.getBoundingClientRect().width)
+    .reduce((acc, val) => acc + val, 0);
+
 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 listItems = Array.from(list.querySelectorAll("li"));
 
   const dragLeft = (distance, threshold) => {
     const currentTranslateX = getTranslateX(list);
@@ -50,6 +51,7 @@ const MeganavSearchSuggestions = () => {
     const listWidth = list.getBoundingClientRect().width;
     const currentTranslateX = getTranslateX(list);
     const translateX = Math.round(currentTranslateX + distance);
+    const itemsTotalWidth = getItemsTotalWidth(listItems);
 
     if (dragRightBoundary(translateX, itemsTotalWidth, listWidth, threshold)) {
       return;
@@ -61,6 +63,7 @@ const MeganavSearchSuggestions = () => {
   const dragRightEnd = (distance, threshold) => {
     const listWidth = list.getBoundingClientRect().width;
     const currentTranslateX = getTranslateX(list);
+    const itemsTotalWidth = getItemsTotalWidth(listItems);
     let translateX = Math.round(currentTranslateX + distance);
 
     if (dragRightBoundary(translateX, itemsTotalWidth, listWidth, threshold)) {
@@ -99,11 +102,18 @@ const MeganavSearchSuggestions = () => {
     suggestions.classList.remove("max-h-96");
   };
 
+  const wheelHandler = (e) => {
+    const distance = e.deltaY * 4;
+    if (withinBuffer(distance)) return;
+    distance > 0 ? dragLeftEnd(distance, 24) : dragRightEnd(distance, 48);
+  };
+
   suggestionsToggle.addEventListener("focus", focusSuggestionsHandler);
   suggestionsToggle.addEventListener("blur", blurSuggestionsHandler);
   suggestions.addEventListener("touchstart", touchstartHandler);
   suggestions.addEventListener("touchmove", touchmoveHandler);
   suggestions.addEventListener("touchend", touchendHandler);
+  suggestions.addEventListener("wheel", wheelHandler);
 
   return {
     teardown: () => {

package/src/core/core.rb

@@ -34,6 +34,10 @@ module AblyUi
         asset_path 'ably_ui/core/images/ably-stack.svg'
       end
 
+      def aws_logo_path
+        asset_path 'ably_ui/core/images/icon-tech-aws.svg'
+      end
+
       def rocket_list
         asset_path 'ably_ui/core/images/rocket-list-2021.png'
       end

package/src/core/icons/icon-display-about-ably-col.svg

@@ -0,0 +1,4 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20.0002" cy="20.5" r="16.6667" fill="white" stroke="#03020D" stroke-width="1.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.0272 27.0696L19.8526 10.9167H17.4716L9.30566 25.8623L11.0272 27.0696ZM28.801 27.0696L19.9756 10.9167H22.3566L26.4396 18.3895L30.5225 25.8623L28.801 27.0696ZM19.9141 20.3011L28.678 27.1647L26.8895 28.4167L19.9141 22.956L12.9387 28.4167L11.1501 27.1647L19.9141 20.3011Z" fill="#FF5416"/>
+</svg>

package/src/core/icons/icon-display-careers-col.svg

@@ -0,0 +1,9 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.33317 20.1358C7.59669 22.2892 7.16766 25.4578 9.58324 24.25C13.5972 22.243 17.4999 21.75 19.9999 21.75C22.4999 21.75 26.2499 22.5833 29.9999 24.25C32.7175 25.4578 32.3716 22.2892 31.658 20.1358" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M30.8332 24.25C30.8332 30.9234 25.9829 36.3333 19.9998 36.3333C14.0168 36.3333 9.1665 30.9234 9.1665 24.25" stroke="#03020D" stroke-width="1.5"/>
+<path d="M25.8332 28.8333H14.1665C14.7221 30.2222 16.6665 33 19.9998 33C23.3332 33 25.2776 30.2222 25.8332 28.8333Z" stroke="#03020D" stroke-width="1.5" stroke-linejoin="round"/>
+<circle cx="23.75" cy="23.4167" r="1.25" fill="#03020D"/>
+<circle cx="16.25" cy="23.4167" r="1.25" fill="#03020D"/>
+<path d="M12.3922 5.81177C14.1833 4.70886 16.6689 4.04167 20.072 4.04167C22.8214 4.04167 24.9898 4.61745 26.675 5.58708C28.3615 6.55753 29.528 7.90188 30.3044 9.38272C31.647 11.9432 31.8294 14.9172 31.5602 17.1667C31.291 19.4161 30.0919 18.3888 29.583 18.2551C29.0741 18.1214 28.3702 17.973 27.4504 17.8366C25.7308 17.5816 23.3003 17.375 20.072 17.375C16.8436 17.375 14.4132 17.5816 12.6935 17.8366C11.6833 17.9864 10.9334 18.1507 10.4163 18.2941C9.89931 18.4375 8.83602 18.873 8.58578 17.1667C8.33554 15.4603 8.03534 12.6242 8.97021 10.0327C9.54628 8.43579 10.5926 6.91989 12.3922 5.81177Z" fill="#FF5416"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5734 14.04L20.3288 7.16667H19.3138L15.833 13.5374L16.5622 14.0488L16.4547 14.133L17.2171 14.6667L20.1904 12.339L23.1638 14.6667L23.9262 14.133L20.1904 11.2073L16.5734 14.04ZM24.1431 14.0521L20.3812 7.16667H21.3961L24.8769 13.5374L24.1431 14.0521Z" fill="white"/>
+</svg>

package/src/core/icons/icon-display-case-studies-col.svg

@@ -0,0 +1,5 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.26623 4.43305C7.97895 3.72034 8.96323 3.20833 9.99984 3.20833H24.039C25.0894 3.20833 26.0928 3.62576 26.8347 4.36765L32.7999 10.3329C33.5416 11.0746 33.9582 12.074 33.9582 13.1247V33.8333C33.9582 34.8699 33.4462 35.8542 32.7334 36.5669C32.0207 37.2797 31.0364 37.7917 29.9998 37.7917H9.99984C8.96323 37.7917 7.97895 37.2797 7.26623 36.5669C6.55351 35.8542 6.0415 34.8699 6.0415 33.8333V7.16666C6.0415 6.13006 6.55351 5.14577 7.26623 4.43305Z" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9997 14.875C20.2418 14.875 20.4621 15.0148 20.5652 15.2338L22.4213 19.1767L26.7448 19.7236C26.985 19.7539 27.186 19.9203 27.2608 20.1505C27.3356 20.3807 27.2707 20.6334 27.0943 20.7992L23.9179 23.7829L24.7339 28.0637C24.7792 28.3015 24.6831 28.5441 24.4873 28.6864C24.2914 28.8287 24.0311 28.8451 23.8189 28.7285L19.9997 26.6296L16.1805 28.7285C15.9683 28.8451 15.7079 28.8287 15.5121 28.6864C15.3163 28.5441 15.2202 28.3015 15.2655 28.0637L16.0814 23.7829L12.9051 20.7992C12.7287 20.6334 12.6638 20.3807 12.7386 20.1505C12.8134 19.9203 13.0144 19.7539 13.2546 19.7236L17.5781 19.1767L19.4342 15.2338C19.5373 15.0148 19.7576 14.875 19.9997 14.875Z" fill="#FF5416"/>
+<path d="M24.2056 3.41666L24.2056 8.83138C24.1666 10.0833 24.6977 10.8572 25.4034 11.5769C26.109 12.2966 27.0882 12.8183 28.1248 12.8285L33.7499 12.8285" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
+</svg>