@ably/ui 13.3.0 → 14.0.0-dev.1939f45

package/src/core/MeganavContentUseCases/component.jsx

@@ -1,147 +0,0 @@
-import React from "react";
-import T from "prop-types";
-
-import Icon from "../Icon/component.jsx";
-
-const MeganavContentUseCases = ({ absUrl }) => (
-  <div className="flex max-w-screen-xl mx-auto">
-    <div className="ui-meganav-content-spacer bg-extra-light-grey"></div>
-    <section className="grid grid-cols-12 ui-grid-gap-x w-full">
-      <div className="col-span-full md:col-span-4 py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24 bg-extra-light-grey">
-        <h3 className="ui-meganav-overline" id="meganav-use-cases-panel-use-cases">
-          Solutions
-        </h3>
-        <ul aria-labelledby="meganav-use-cases-panel-industry-use-cases">
-          <li>
-            <a href={absUrl("/solutions/chat")} className="ui-meganav-media-with-image group">
-              <Icon name="icon-display-chat-stack-col" size="2.5rem" />
-              <div className="flex flex-col justify-center">
-                <p className="ui-meganav-media-heading">Live Chat</p>
-                <p className="ui-meganav-media-copy">Deliver highly reliable chat experiences at scale.</p>
-              </div>
-            </a>
-          </li>
-          <li>
-            <a href={absUrl("/solutions/multiplayer-collaboration")} className="ui-meganav-media-with-image group">
-              <Icon name="icon-multi-user-spaces-col" size="2.5rem" />
-              <div className="flex flex-col justify-center">
-                <p className="ui-meganav-media-heading">Multiplayer Collaboration</p>
-                <p className="ui-meganav-media-copy">Bring collaborative multiplayer experiences to your users.</p>
-              </div>
-            </a>
-          </li>
-          <li>
-            <a href={absUrl("/solutions/data-broadcast")} className="ui-meganav-media-with-image group">
-              <Icon name="icon-display-data-broadcast-col" size="2.5rem" />
-              <div className="flex flex-col justify-center">
-                <p className="ui-meganav-media-heading">Data Broadcast</p>
-                <p className="ui-meganav-media-copy">Broadcast realtime event data to millions of devices around the globe.</p>
-              </div>
-            </a>
-          </li>
-          <li>
-            <a href={absUrl("/solutions/data-synchronization")} className="ui-meganav-media-with-image group">
-              <Icon name="icon-display-data-synchronization-col" size="2.5rem" />
-              <div className="flex flex-col justify-center">
-                <p className="ui-meganav-media-heading">Data Synchronization</p>
-                <p className="ui-meganav-media-copy">Keep your frontend and backend in realtime sync, at global scale.</p>
-              </div>
-            </a>
-          </li>
-          <li>
-            <a href={absUrl("/push-notifications")} className="ui-meganav-media-with-image group">
-              <Icon name="icon-display-push-notifications-col" size="2.5rem" />
-              <div className="flex flex-col justify-center">
-                <p className="ui-meganav-media-heading">Notifications</p>
-                <p className="ui-meganav-media-copy">Deliver cross-platform push notifications with a simple unified API.</p>
-              </div>
-            </a>
-          </li>
-          <li>
-            <a href={absUrl("/solutions/asset-tracking")} className="ui-meganav-media-with-image group">
-              <Icon name="icon-display-asset-tracking-col" size="2.5rem" />
-              <div className="flex flex-col justify-center">
-                <p className="ui-meganav-media-heading">Asset Tracking (Beta)</p>
-                <p className="ui-meganav-media-copy">Track assets in realtime with a solution optimised for last mile logistics.</p>
-              </div>
-            </a>
-          </li>
-        </ul>
-      </div>
-
-      <div className="col-span-full md:col-span-4 pt-24 pb-0 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
-        <h3 className="ui-meganav-overline" id="meganav-use-cases-panel-industry">
-          Industry
-        </h3>
-        <ul aria-labelledby="meganav-use-cases-panel-industry">
-          <li>
-            <a href={absUrl("/solutions/edtech")} className="ui-meganav-media group">
-              <p className="ui-meganav-media-heading">EdTech</p>
-              <p className="ui-meganav-media-copy">Deliver interactive learning experiences.</p>
-            </a>
-          </li>
-          <li>
-            <a href={absUrl("/solutions/fintech")} className="ui-meganav-media group">
-              <p className="ui-meganav-media-heading">FinTech</p>
-              <p className="ui-meganav-media-copy">Deliver personalised financial data in realtime.</p>
-            </a>
-          </li>
-          <li>
-            <a href={absUrl("/solutions/automotive-logistics-and-mobility")} className="ui-meganav-media group">
-              <p className="ui-meganav-media-heading">Automotive, Logistics, & Mobility</p>
-              <p className="ui-meganav-media-copy">Power diagnostics, order tracking and more.</p>
-            </a>
-          </li>
-          <li>
-            <a href={absUrl("/solutions/b2b-platforms")} className="ui-meganav-media group">
-              <p className="ui-meganav-media-heading">B2B Platforms</p>
-              <p className="ui-meganav-media-copy">Empower your customers with realtime solutions.</p>
-            </a>
-          </li>
-          <li>
-            <a href={absUrl("/solutions/healthcare")} className="ui-meganav-media group">
-              <p className="ui-meganav-media-heading">Healthcare (HIPAA)</p>
-              <p className="ui-meganav-media-copy">Provide trustworthy, HIPAA-compliant realtime apps.</p>
-            </a>
-          </li>
-        </ul>
-      </div>
-
-      <div className="col-span-full md:col-span-4 pt-0 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
-        <ul aria-labelledby="meganav-use-cases-panel-solutions" className="mt-0 md:mt-40">
-          <li>
-            <a href={absUrl("/solutions/ecommerce-and-retail")} className="ui-meganav-media group">
-              <p className="ui-meganav-media-heading">eCommerce & Retail</p>
-              <p className="ui-meganav-media-copy">Enrich customer experiences with realtime updates.</p>
-            </a>
-          </li>
-          <li>
-            <a href={absUrl("/solutions/sports-and-media")} className="ui-meganav-media group">
-              <p className="ui-meganav-media-heading">Sports, Media & Audience Engagement</p>
-              <p className="ui-meganav-media-copy">Deliver engaging global realtime experiences.</p>
-            </a>
-          </li>
-          <li>
-            <a href={absUrl("/solutions/gaming")} className="ui-meganav-media group">
-              <p className="ui-meganav-media-heading">Gaming</p>
-              <p className="ui-meganav-media-copy">Power ultra fast and reliable gaming experiences.</p>
-            </a>
-          </li>
-          <li>
-            <a href={absUrl("/solutions/iot-and-connected-devices")} className="ui-meganav-media group">
-              <p className="ui-meganav-media-heading">IoT & Connected Devices</p>
-              <p className="ui-meganav-media-copy">Monitor and control global IoT deployments in realtime.</p>
-            </a>
-          </li>
-        </ul>
-      </div>
-    </section>
-    <div className="ui-meganav-content-spacer"></div>
-  </div>
-);
-
-MeganavContentUseCases.propTypes = {
-  absUrl: T.func,
-};
-
-export default MeganavContentUseCases;

package/src/core/MeganavContentUseCases/component.rb

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

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

@@ -1,6 +0,0 @@
-<%= button_tag(type: "button",
-               class: ["ui-meganav-link", "h-64", "flex", "items-center", "group", theme(:text_color), additional_css],
-               data: { id: "meganav-control" },
-               aria: { expanded: false, controls: aria_controls, label: "Show #{aria_label} panel" }) do -%>
-  <%= content -%><%= render(AblyUi::Core::Icon.new(name: "icon-gui-disclosure-arrow", size: "1.5rem", color: "text-cool-black", additional_css: "transform rotate-90 group-hover:text-gui-hover group-focus:text-gui-focus")) %>
-<% end %>

package/src/core/MeganavControl/component.rb

@@ -1,20 +0,0 @@
-module AblyUi
-  module Core
-    class MeganavControl < ViewComponent::Base
-      include AblyUi::Core::MeganavConfig
-      attr_reader :aria_controls, :aria_label, :additional_css
-
-      def initialize(
-        aria_controls:,
-        aria_label:,
-        theme_name:,
-        additional_css: ''
-      )
-        @aria_controls = aria_controls
-        @aria_label = aria_label
-        @additional_css = additional_css
-        theme_setup(theme_name)
-      end
-    end
-  end
-end

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

@@ -1,7 +0,0 @@
-<%= button_tag(type: "button",
-               class: "block ml-24 mr-0 px-0 py-16 hover:text-gui-hover focus:text-gui-focus focus:outline-none",
-               data: { id: "meganav-control-mobile-dropdown" },
-               aria: { expanded: false, controls: "meganav-mobile-dropdown" }) do %>
-  <%= render(AblyUi::Core::Icon.new(name: "icon-gui-burger-menu", size: "1.5rem", color: theme(:mobile_menu_color), additional_css: "transition-colors", data: { id: "meganav-control-mobile-dropdown-menu" })) %>
-  <%= render(AblyUi::Core::Icon.new(name: "icon-gui-close", size: "1.5rem", color: theme(:mobile_menu_color), additional_css: "transition-colors hidden", data: { id: "meganav-control-mobile-dropdown-close" })) %>
-<% end %>

package/src/core/MeganavControlMobileDropdown/component.rb

@@ -1,11 +0,0 @@
-module AblyUi
-  module Core
-    class MeganavControlMobileDropdown < ViewComponent::Base
-      include AblyUi::Core::MeganavConfig
-
-      def initialize(theme_name:)
-        theme_setup(theme_name)
-      end
-    end
-  end
-end

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

@@ -1,12 +0,0 @@
-<div class="mx-24 md:mx-32">
-  <%= button_tag(type: "button",
-                 class: "ui-meganav-mobile-link text-gui-default mb-16",
-                 data: { id: "meganav-control-mobile-panel-close" },
-                 aria: { expanded: false, controls: aria_controls, label: "Hide panel" }) do -%>
-    <%= render(AblyUi::Core::Icon.new(name: "icon-gui-disclosure-arrow", size: "1.5rem", color: "text-cool-black", additional_css: "relative -top-1 transform rotate-180")) %>
-    Back
-  <% end %>
-  <% if display_hr %>
-    <hr class="ui-meganav-hr" />
-  <% end %>
-</div>

package/src/core/MeganavControlMobilePanelClose/component.rb

@@ -1,12 +0,0 @@
-module AblyUi
-  module Core
-    class MeganavControlMobilePanelClose < ViewComponent::Base
-      attr_reader :aria_controls, :display_hr
-
-      def initialize(aria_controls:, display_hr: true)
-        @aria_controls = aria_controls
-        @display_hr = display_hr
-      end
-    end
-  end
-end

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

@@ -1,7 +0,0 @@
-<%= button_tag(type: "button",
-               class: "ui-meganav-mobile-link",
-               data: { id: "meganav-control-mobile-panel-open" },
-               aria: { expanded: false, controls: @aria_controls, label: "Show #{content}" }) do %>
-  <%= content %>
-  <%= render(AblyUi::Core::Icon.new(name: "icon-gui-disclosure-arrow", size: "1.5rem", color: "text-cool-black", additional_css: "relative -top-1 ml-auto float-right")) %>
-<% end %>

package/src/core/MeganavControlMobilePanelOpen/component.jsx

@@ -1,25 +0,0 @@
-import React from "react";
-import T from "prop-types";
-
-import Icon from "../Icon/component.jsx";
-
-const MeganavControlMobilePanelOpen = ({ ariaControls, children }) => (
-  <button
-    type="button"
-    className="ui-meganav-mobile-link"
-    data-id="meganav-control-mobile-panel-open"
-    aria-expanded="false"
-    aria-controls={ariaControls}
-    aria-label={`Show ${children}`}
-  >
-    {children}
-    <Icon name="icon-gui-disclosure-arrow" color="text-cool-black" size="1.5rem" additionalCSS="relative -top-1 ml-auto float-right" />
-  </button>
-);
-
-MeganavControlMobilePanelOpen.propTypes = {
-  ariaControls: T.string,
-  children: T.node,
-};
-
-export default MeganavControlMobilePanelOpen;

package/src/core/MeganavControlMobilePanelOpen/component.rb

@@ -1,9 +0,0 @@
-module AblyUi
-  module Core
-    class MeganavControlMobilePanelOpen < ViewComponent::Base
-      def initialize(aria_controls:)
-        @aria_controls = aria_controls
-      end
-    end
-  end
-end

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

@@ -1,17 +0,0 @@
-<ul class="hidden md:flex" data-id="meganav-items-desktop">
-  <% panels.each do |panel| %>
-    <li class="ui-meganav-item">
-      <%= render(AblyUi::Core::MeganavControl.new(aria_controls: panel[:id], aria_label: panel[:label], theme_name: @theme_name)) do %>
-        <span class="hidden lg:inline"><%= panel[:label] %></span>
-        <span class="lg:hidden"><%= panel[:short_label] %></span>
-      <% end %>
-
-      <%= content_tag :div, class: "ui-meganav-panel invisible #{bg_css(panel[:id])}", data: { id: "meganav-panel" }, id: panel[:id] do %>
-        <%= render("AblyUi::Core::#{panel[:component]}".constantize.new(url_base: url_base)) %>
-      <% end %>
-    </li>
-  <% end %>
-  <li>
-    <%= link_to "Pricing", abs_url("/pricing"), data: { id: "meganav-link" }, class: ["ui-meganav-link", "h-64", "items-center", "flex", theme(:text_color)] %>
-  </li>
-</ul>

package/src/core/MeganavItemsDesktop/component.jsx

@@ -1,49 +0,0 @@
-import React from "react";
-import T from "prop-types";
-
-import MeganavData from "../Meganav/component.json";
-import MeganavControl from "../MeganavControl/component.jsx";
-
-const MeganavDesktopItems = ({ panels, paths, theme, absUrl }) => (
-  <ul className="hidden md:flex" data-id="meganav-items-desktop">
-    {MeganavData.panels.map((panel) => {
-      const PanelComponent = panels[panel.component];
-      const bgCSS = ["products-panel", "use-cases-panel"].includes(panel.id) ? "ui-meganav-panel-split-bg" : "";
-
-      return (
-        <li className="ui-meganav-item" key={panel.id}>
-          <MeganavControl theme={theme} ariaControls={panel.id} ariaLabel={panel.label}>
-            <span className="hidden lg:inline">{panel.label}</span>
-            <span className="lg:hidden">{panel.shortLabel}</span>
-          </MeganavControl>
-
-          <div className={`ui-meganav-panel invisible ${bgCSS}`} id={panel.id} data-id="meganav-panel">
-            <PanelComponent paths={paths} absUrl={absUrl} />
-          </div>
-        </li>
-      );
-    })}
-
-    <li className="ui-meganav-item">
-      <a href={absUrl("/pricing")} data-id="meganav-link" className={`ui-meganav-link h-64 items-center flex ${theme.textColor}`}>
-        Pricing
-      </a>
-    </li>
-  </ul>
-);
-
-MeganavDesktopItems.propTypes = {
-  panels: T.object,
-  paths: T.shape({
-    logo: T.string,
-    iconSprites: T.string,
-    ablyStack: T.string,
-    blogThumb1: T.string,
-    blogThumb2: T.string,
-    blogThumb3: T.string,
-  }),
-  theme: T.object,
-  absUrl: T.func,
-};
-
-export default React.memo(MeganavDesktopItems);

package/src/core/MeganavItemsDesktop/component.rb

@@ -1,23 +0,0 @@
-module AblyUi
-  module Core
-    class MeganavItemsDesktop < ViewComponent::Base
-      include MeganavConfig
-      include Util
-
-      attr_reader :url_base
-
-      def initialize(theme_name:, url_base:)
-        @theme_name = theme_name
-        @url_base = url_base
-      end
-
-      def bg_css(panel_id)
-        if %w[products-panel use-cases-panel].include?(panel_id)
-          'ui-meganav-panel-split-bg'
-        else
-          ''
-        end
-      end
-    end
-  end
-end

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

@@ -1,75 +0,0 @@
-<ul class="flex md:hidden" data-id="meganav-items-mobile">
-  <li>
-    <% if @session_data[:signedIn] && @session_data[:logOut] %>
-      <%= render(AblyUi::Core::SignOutLink.new(session_data: @session_data, classes: ["ui-meganav-link", theme(:text_color)], url_base: url_base)) %>
-    <% else %>
-      <%= link_to "Login", abs_url(login_link), data: { id: "meganav-link" }, class: ["ui-meganav-link", theme(:text_color)] %>
-    <% end %>
-  </li>
-
-  <li class="ui-meganav-item">
-    <%= render(AblyUi::Core::MeganavControlMobileDropdown.new(theme_name: @theme_name)) %>
-
-    <div class="ui-meganav-mobile-dropdown invisible" id="meganav-mobile-dropdown" data-id="meganav-mobile-dropdown">
-      <div class="pt-24 pb-16 ui-grid-px bg-white">
-        <%= tag.form class: "mb-16", 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 hover:text-gui-hover")) %>
-            <button
-              type="button"
-              class="absolute top-12 right-16 p-0 focus:outline-gui-focus m-0 md:hidden invisible"
-              data-id="meganav-search-input-clear"
-            >
-              <%= render(AblyUi::Core::Icon.new(name: "icon-gui-cross-circled-fill", size: "1.5rem", color: "text-dark-grey")) %>
-            </button>
-            <input
-              type="search"
-              name="q"
-              class="ui-input px-48 h-48"
-              style={{ maxWidth: "none" }}
-              placeholder="Search"
-              autocomplete="off"
-              data-id="meganav-mobile-search-input"
-            />
-
-            <%= render(AblyUi::Core::MeganavSearchAutocomplete.new) %>
-          </div>
-        <% end %>
-
-        <div class="max-h-0 overflow-hidden transition-all" data-id="meganav-mobile-search-suggestions">
-           <%= render(AblyUi::Core::MeganavSearchSuggestions.new(url_base: url_base, display_support_link: false)) %>
-        </div>
-
-        <ul class="mb-16" data-id="meganav-mobile-panel-controls">
-          <% panels.each do |panel| %>
-            <li class="ui-meganav-mobile-item">
-              <%= render(AblyUi::Core::MeganavControlMobilePanelOpen.new(aria_controls: "#{panel[:id]}-mobile")) do %>
-                <%= panel[:label] %>
-              <% end %>
-
-              <%= content_tag(:div, class: "ui-meganav-panel-mobile hidden", id: "#{panel[:id]}-mobile", data: { scroll_lock_scrollable: true }) do %>
-                <%= render(AblyUi::Core::MeganavControlMobilePanelClose.new(aria_controls: "#{panel[:id]}-mobile", display_hr: display_hr(panel[:id]))) %>
-                <%= render("AblyUi::Core::#{panel[:component]}".constantize.new(url_base: url_base)) %>
-              <% end %>
-            </li>
-          <% end %>
-          <li>
-            <%= link_to "Pricing", abs_url("/pricing"), class: "ui-meganav-mobile-link" %>
-          </li>
-        </ul>
-
-        <hr class="ui-meganav-hr mb-20" />
-
-        <div class="flex justify-between items-center mb-16">
-          <%= link_to "Contact us", abs_url("/contact"), class: "text-menu2 font-medium block ml-0 mr-8 lg:mx-12 p-0 hover:text-gui-hover focus:text-gui-focus focus:outline-none" %>
-
-          <% if @session_data[:signedIn] && @session_data[:account] %>
-            <%= link_to "Dashboard", abs_url(@session_data[:account][:links][:dashboard][:href]), class: "ui-btn-secondary" %>
-          <% else %>
-            <%= link_to "Sign up free", abs_url("/sign-up"), class: "ui-btn" %>
-          <% end %>
-        </div>
-      </div>
-    </div>
-  </li>
-</ul>

package/src/core/MeganavItemsMobile/component.jsx

@@ -1,137 +0,0 @@
-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";
-import MeganavControlMobilePanelClose from "../MeganavControlMobilePanelClose/component.jsx";
-import MeganavControlMobilePanelOpen from "../MeganavControlMobilePanelOpen/component.jsx";
-import MeganavSearchAutocomplete from "../MeganavSearchAutocomplete/component.jsx";
-
-const MeganavItemsMobile = ({ panels, paths, sessionState, theme, loginLink, absUrl }) => {
-  const classNames = `ui-meganav-link ${theme.textColor}`;
-
-  return (
-    <ul className="flex md:hidden" data-id="meganav-items-mobile">
-      <li>
-        {sessionState.signedIn && sessionState.logOut ? (
-          <SignOutLink absUrl={absUrl} {...sessionState.logOut}>
-            {({ text, href, onClick }) => (
-              <a onClick={onClick} href={absUrl(href)} className={classNames} data-id="meganav-link">
-                {text}
-              </a>
-            )}
-          </SignOutLink>
-        ) : (
-          <a href={absUrl(loginLink)} className={classNames} data-id="meganav-link">
-            Login
-          </a>
-        )}
-      </li>
-
-      <li className="ui-meganav-item">
-        <MeganavControlMobileDropdown theme={theme} />
-
-        <div className="ui-meganav-mobile-dropdown invisible" id="meganav-mobile-dropdown" data-id="meganav-mobile-dropdown">
-          <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 hover:text-gui-hover" />
-                <button
-                  type="button"
-                  className="absolute top-12 right-16 p-0 focus:outline-gui-focus m-0 md:hidden invisible"
-                  data-id="meganav-search-input-clear"
-                >
-                  <Icon name="icon-gui-cross-circled-fill" color="text-dark-grey" size="1.5rem" additionalCSS="" />
-                </button>
-                <input
-                  type="search"
-                  name="q"
-                  className="ui-input px-48 h-48"
-                  style={{ maxWidth: "none" }}
-                  placeholder="Search"
-                  autoComplete="off"
-                  data-id="meganav-mobile-search-input"
-                />
-
-                <MeganavSearchAutocomplete />
-              </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" 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`} displayHr={displayHr} />
-                      <PanelComponent paths={paths} absUrl={absUrl} />
-                    </div>
-                  </li>
-                );
-              })}
-              <li>
-                <a href={absUrl("/pricing")} className="ui-meganav-mobile-link">
-                  Pricing
-                </a>
-              </li>
-            </ul>
-
-            <hr className="ui-meganav-hr mb-20" />
-
-            <div className="flex justify-between items-center mb-16">
-              <a
-                href={absUrl("/contact")}
-                className="text-menu2 font-medium block ml-0 mr-8 lg:mx-12 p-0 hover:text-gui-hover focus:text-gui-focus focus:outline-none"
-              >
-                Contact us
-              </a>
-              {sessionState.signedIn && sessionState.account ? (
-                <a href={absUrl(sessionState.account.links.dashboard.href)} className="ui-btn-secondary">
-                  Dashboard
-                </a>
-              ) : (
-                <a href={absUrl("/sign-up")} className="ui-btn">
-                  Sign up free
-                </a>
-              )}
-            </div>
-          </div>
-        </div>
-      </li>
-    </ul>
-  );
-};
-
-MeganavItemsMobile.propTypes = {
-  panels: T.object,
-  paths: T.shape({
-    iconSprites: T.string,
-  }),
-  sessionState: T.object,
-  theme: T.object,
-  loginLink: T.string,
-  absUrl: T.func,
-};
-
-export default React.memo(MeganavItemsMobile, (oldState, newState) => {
-  const { pathsOld, themeOld } = oldState;
-  const { pathsNew, themeNew } = newState;
-
-  if (pathsOld === pathsNew && themeOld === themeNew && Object.keys(newState.sessionState || {}).length === 0) {
-    return true;
-  } else {
-    return false;
-  }
-});

package/src/core/MeganavItemsMobile/component.rb

@@ -1,21 +0,0 @@
-module AblyUi
-  module Core
-    class MeganavItemsMobile < ViewComponent::Base
-      include MeganavConfig
-      include Util
-
-      attr_reader :options, :login_link, :url_base
-
-      def initialize(session_data:, theme_name:, login_link:, url_base:)
-        @theme_name = theme_name
-        @session_data = session_data
-        @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