@ably/ui 13.3.0 → 14.0.0-dev.fbce38f

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

@@ -1,256 +0,0 @@
-<footer class="bg-light-grey font-sans antialiased leading-normal" data-id="footer">
-  <div class="max-w-screen-xl mx-auto py-32 sm:py-40 md:py-64 ui-grid-gap ui-grid-px grid grid-cols-6">
-    <div class="col-span-full md:col-span-2">
-      <div class="flex flex-row p-menu-row-snug">
-        <%= image_tag(ably_stack_path, alt: "Ably homepage", class: "mr-24 -mt-16") %>
-        <h2 class="ui-text-overline2 col-span-full font-mono uppercase tracking-widen-0.16">The Ably Platform</h2>
-      </div>
-      <div class="md:col-span-4 md:w-3/4 xs:w-3/5 w-full">
-        <p class="ui-text-p3 font-bold py-16 p-menu-row-snug">
-          Easily power any realtime experience in your application via a simple API that handles everything realtime.
-        </p>
-      </div>
-      <ul class="grid grid-cols-1">
-        <li class="p-menu-row-snug">
-          <%= link_to 'Pub/sub messaging', abs_url("/solutions/channels"), class: "ui-footer-menu-row-link" %>
-        </li>
-        <li class="p-menu-row-snug">
-          <%= link_to 'Push notifications', abs_url("/push-notifications"), class: "ui-footer-menu-row-link" %>
-        </li>
-        <li class="p-menu-row-snug">
-          <%= link_to 'Third-party integrations', abs_url("/integrations"), class: "ui-footer-menu-row-link" %>
-        </li>
-        <li class="p-menu-row-snug">
-          <%= link_to 'Multiple protocol messaging', abs_url("/protocols"), class: "ui-footer-menu-row-link" %>
-        </li>
-      </ul>
-    </div>
-    <div class="col-span-full xs:col-span-3 md:col-span-1">
-      <h2 class="ui-footer-col-title">Ably is for</h2>
-      <ul>
-        <li class="p-menu-row-snug">
-          <%= link_to 'Ably Asset Tracking', abs_url("/solutions/asset-tracking"), class: "ui-footer-menu-row-link" %>
-        </li>
-        <li class="p-menu-row-snug">
-          <%= link_to 'Extend Kafka to the edge', abs_url("/solutions/extend-kafka-to-the-edge"), class: "ui-footer-menu-row-link" %>
-        </li>
-        <li class="p-menu-row-snug">
-          <%= link_to 'EdTech', abs_url("/solutions/edtech"), class: "ui-footer-menu-row-link" %>
-        </li>
-        <li class="p-menu-row-snug">
-          <%= link_to 'Automotive, Logistics, & Mobility', abs_url("/solutions/automotive-logistics-and-mobility"), class: "ui-footer-menu-row-link" %>
-        </li>
-        <li class="p-menu-row-snug">
-          <%= link_to 'B2B Platforms', abs_url("/solutions/b2b-platforms"), class: "ui-footer-menu-row-link" %>
-        </li>
-        <li class="p-menu-row-snug">
-          <%= link_to 'Healthcare', abs_url("/solutions/healthcare"), class: "ui-footer-menu-row-link" %>
-        </li>
-        <li class="p-menu-row-snug">
-          <%= link_to 'eCommerce & Retail', abs_url("/solutions/ecommerce-and-retail"), class: "ui-footer-menu-row-link" %>
-        </li>
-        <li class="p-menu-row-snug">
-          <%= link_to 'Sports & Media', abs_url("/solutions/sports-and-media"), class: "ui-footer-menu-row-link" %>
-        </li>
-        <li class="p-menu-row-snug">
-          <%= link_to 'Gaming', abs_url("/solutions/gaming"), class: "ui-footer-menu-row-link" %>
-        </li>
-        <li class="p-menu-row-snug">
-          <%= link_to 'IoT & Connected Devices', abs_url("/solutions/iot-and-connected-devices"), class: "ui-footer-menu-row-link" %>
-        </li>
-      </ul>
-    </div>
-    <div class="col-span-full xs:col-span-3 md:col-span-1">
-      <h2 class="ui-footer-col-title">Developers</h2>
-      <ul>
-        <li class="p-menu-row-snug">
-          <%= link_to 'Start in 5 minutes', abs_url("/docs/quick-start-guide"), class: "ui-footer-menu-row-link" %>
-        </li>
-        <li class="p-menu-row-snug">
-          <%= link_to 'Documentation', abs_url("/docs"), class: "ui-footer-menu-row-link" %>
-        </li>
-        <li class="p-menu-row-snug">
-          <%= link_to 'Tutorials', abs_url("/tutorials"), class: "ui-footer-menu-row-link" %>
-        </li>
-        <li class="p-menu-row-snug">
-          <a href="https://changelog.ably.com/" class="ui-footer-menu-row-link">Changelog</a>
-        </li>
-        <li class="p-menu-row-snug">
-          <%= link_to 'Support & FAQs', abs_url("/support"), class: "ui-footer-menu-row-link" %>
-        </li>
-        <li class="p-menu-row-snug">
-          <%= link_to 'SDKs', abs_url("/docs/sdks"), class: "ui-footer-menu-row-link" %>
-        </li>
-        <li class="p-menu-row-snug flex items-center -mt-4">
-          <a class="pr-8 ui-footer-menu-row-link" href="https://status.ably.com/">System status</a>
-          <iframe class="w-20 h-20 mb-2" src="https://status.ably.com/embed/icon" allowtransparency="true" frameborder="0" scrolling="no"></iframe>
-        </li>
-      </ul>
-    </div>
-    <div class="col-span-full xs:col-span-3 md:col-span-1">
-      <h2 class="ui-footer-col-title">WHY ABLY</h2>
-      <ul>
-        <li class="p-menu-row-snug">
-          <%= link_to 'Customers', abs_url("/customers"), class: "ui-footer-menu-row-link" %>
-        </li>
-        <li class="p-menu-row-snug">
-          <%= link_to 'Case Studies', abs_url("/case-studies"), class: "ui-footer-menu-row-link" %>
-        </li>
-        <li class="p-menu-row-snug">
-          <%= link_to 'Four Pillars of Dependability', abs_url("/four-pillars-of-dependability"), class: "ui-footer-menu-row-link" %>
-        </li>
-        <li class="p-menu-row-snug">
-          <%= link_to 'Compare our tech', abs_url("/compare"), class: "ui-footer-menu-row-link" %>
-        </li>
-        <li class="p-menu-row-snug">
-          <%= link_to 'Multi protocol support', abs_url("/protocols"), class: "ui-footer-menu-row-link" %>
-        </li>
-        <li class="p-menu-row-snug">
-          <%= link_to 'Third-party integrations', abs_url("/integrations"), class: "ui-footer-menu-row-link" %>
-        </li>
-      </ul>
-    </div>
-    <div class="col-span-full xs:col-span-3 md:col-span-1">
-      <h2 class="ui-footer-col-title">ABOUT</h2>
-      <ul>
-        <li class="p-menu-row-snug">
-          <%= link_to 'About Ably', abs_url("/about"), class: "ui-footer-menu-row-link" %>
-        </li>
-        <li class="p-menu-row-snug">
-          <%= link_to 'Pricing', abs_url("/pricing"), class: "ui-footer-menu-row-link" %>
-        </li>
-        <li class="p-menu-row-snug">
-          <%= link_to 'Blog', abs_url("/blog"), class: "ui-footer-menu-row-link" %>
-        </li>
-        <li class="p-menu-row-snug">
-          <%= link_to 'Careers', abs_url("/careers"), class: "ui-footer-menu-row-link" %>
-        </li>
-        <li class="p-menu-row-snug">
-          <%= link_to 'Open protocol policy', abs_url("/open-policy"), class: "ui-footer-menu-row-link" %>
-        </li>
-        <li class="p-menu-row-snug">
-          <%= link_to 'Press & Media', abs_url("/press-center"), class: "ui-footer-menu-row-link" %>
-        </li>
-        <li class="p-menu-row-snug">
-          <%= link_to 'Contact us', abs_url("/contact"), class: "ui-footer-menu-row-link" %>
-        </li>
-      </ul>
-    </div>
-  </div>
-  <div class="max-w-screen-xl ui-grid-px mx-auto">
-    <hr class="border-t border-mid-grey my-0"/>
-  </div>
-  <%# Twitter + Glassdoor SM * above + Glassdoor XS  + Badges %>
-  <div class="max-w-screen-xl mx-auto py-16 grid ui-grid-gap ui-grid-px sm:grid-cols-2">
-    <div class="md:flex md:items-center">
-      <div class="flex flex-col md:flex-row flex-auto ml-8 sm:col-span-1 md:col-span-2">
-        <div class="">
-          <div class="flex pb-24">
-            <a class="h-24 pr-24 text-cool-black hover:text-icon-twitter" href="https://twitter.com/ablyrealtime" title="Ably on X">
-              <%= render(AblyUi::Core::Icon.new(name: "icon-social-x", size: "1.5rem")) %>
-            </a>
-            <a
-                  class="h-24 pr-24 text-cool-black hover:text-icon-linkedin"
-                  href="https://www.linkedin.com/company/ably-realtime"
-                  title="Ably on LinkedIn"
-                >
-              <%= render(AblyUi::Core::Icon.new(name: "linkedin", size: "1.5rem")) %>
-            </a>
-            <a class="h-24 pr-24 text-cool-black hover:text-icon-github" href="https://github.com/ably/" title="Ably on Github">
-              <%= render(AblyUi::Core::Icon.new(name: "github", size: "1.5rem")) %>
-            </a>
-            <a class="h-24 pr-24 text-cool-black hover:text-icon-discord" href="https://discord.gg/jwBPhEZ9g5" title="Ably on Discord">
-              <%= render(AblyUi::Core::Icon.new(name: "discord", size: "1.5rem")) %>
-            </a>
-          </div>
-        </div>
-        <%# GLASSDOOR on SM and Above %>
-        <div class="xs:hidden sm:block ui-footer-glassdoor">
-          <div class="flex sm:pt-24 md:pt-0 sm:border-t sm:border-l-0 md:border-t-0 md:border-l sm:border-mid-grey sm:w-3/4 md:w-full md:pl-24">
-            <a
-                  href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
-                  class="h-24 text-cool-black hover:text-icon-glassdoor"
-                  title="Ably reviews on glassdoor"
-                >
-              <%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
-            </a>
-            <div class="pl-16 text-menu3 font-sans font-medium">
-              <strong class="block font-medium">We&apos;re hiring!</strong>
-              <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" class="ui-footer-link">
-                Learn more at Glassdoor
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-      <%# GlassDoor on XS ONLY %>
-      <div class="xs:block sm:hidden">
-        <div class="border-t border-mid-grey w-full"></div>
-        <div class="flex py-24">
-          <a
-                class="h-24 pr-16 text-cool-black hover:text-icon-glassdoor"
-                href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
-                title="Ably reviews on glassdoor"
-              >
-            <%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
-          </a>
-          <div class="text-menu3 font-sans font-medium">
-            <strong class="block font-medium">We&apos;re hiring!</strong>
-            <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" class="ui-footer-link">
-              Learn more at Glassdoor
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="col-span-full sm:col-span-1 inline-flex sm:ml-auto sm:items-center">
-      <%= image_tag(highest_user_adoption, alt: "Highest User Adoption 2023", class: "mr-24 h-80") %>
-      <%= image_tag(best_support, alt: "Best Support 2023", class: "mr-24 h-80") %>
-      <%= image_tag(fastest_implementation, alt: "Fastest Implementation 2023", class: "mr-24 h-80") %>
-      <%= image_tag(highest_performer, alt: "High Performer 2023", class: "mr-24 h-80") %>
-    </div>
-  </div>
-  <div class="max-w-screen-xl ui-grid-px mx-auto">
-    <hr class="border-t border-mid-grey my-0"/>
-  </div>
-  <div class="max-w-screen-xl mx-auto py-24 sm:py-40 md:py-32 md:grid md:grid-cols-2 ui-grid-gap ui-grid-px">
-    <div class="flex ml-8 col-span-full sm:col-span-1 md:pb-16 items-center ui-footer-bottom-links">
-      <div class="flex">
-        <%= link_to 'Cookies', abs_url("/privacy"), class: "pr-24 ui-footer-link" %>
-        <%= link_to 'Legals', abs_url("/legals"), class: "pr-24 ui-footer-link" %>
-        <%= link_to 'Data Protection', abs_url("/data-protection"), class: "pr-24 ui-footer-link" %>
-        <%= link_to 'Privacy', abs_url("/privacy"), class: "ui-footer-link" %>
-      </div>
-    </div>
-    <div class="xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 sm:pl-8 md:justify-items-end">
-      <div class="flex mr-24">
-        <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
-        <div>
-          <p class="ui-footer-compliance-text font-bold whitespace-nowrap">SOC 2 Type 2</p>
-          <p class="ui-footer-compliance-text font-medium mb-24">Certified</p>
-        </div>
-      </div>
-      <div class="flex mr-24 md:col-start-2">
-        <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
-        <div>
-          <p class="ui-footer-compliance-text font-bold whitespace-nowrap">HIPAA</p>
-          <p class="ui-footer-compliance-text font-medium mb-24">Compliant</p>
-        </div>
-      </div>
-      <div class="flex mr-24 md:col-start-3">
-        <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
-        <div>
-          <p class="ui-footer-compliance-text font-bold whitespace-nowrap">EU GDPR</p>
-          <p class="ui-footer-compliance-text font-medium mb-24">Certified</p>
-        </div>
-      </div>
-      <div class="flex mr-24 md:col-start-4">
-        <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
-        <div>
-          <p class="ui-footer-compliance-text font-bold whitespace-nowrap">256-bit AES</p>
-          <p class="ui-footer-compliance-text font-medium mb-24">Encryption</p>
-        </div>
-      </div>
-    </div>
-  </div>
-</footer>

package/src/core/Footer/component.rb

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

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

@@ -1,3 +0,0 @@
-<%= tag.svg class: "#{color} #{additional_css}", style: "width: #{size}; height: #{size}", **additional_attributes do %>
-  <%= tag.use "xlink:href": "#sprite-#{name}" %>
-<% end %>

package/src/core/Icon/component.jsx

@@ -1,19 +0,0 @@
-import React from "react";
-import T from "prop-types";
-
-const Icon = ({ name, size = "0.75rem", color = "", additionalCSS = "", ...additionalAttributes }) => {
-  return (
-    <svg className={`${color} ${additionalCSS}`} style={{ width: size, height: size }} {...additionalAttributes}>
-      <use xlinkHref={`#sprite-${name}`} />
-    </svg>
-  );
-};
-
-Icon.propTypes = {
-  name: T.string.isRequired,
-  size: T.string,
-  color: T.string,
-  additionalCSS: T.string,
-};
-
-export default Icon;

package/src/core/Icon/component.rb

@@ -1,25 +0,0 @@
-module AblyUi
-  module Core
-    class Icon < ViewComponent::Base
-      attr_reader :name
-      attr_reader :size
-      attr_reader :color
-      attr_reader :additional_css
-      attr_reader :additional_attributes
-
-      def initialize(
-        name:,
-        size: '0.75rem',
-        color: '',
-        additional_css: '',
-        **additional_attributes
-      )
-        @name = name
-        @size = size
-        @color = color
-        @additional_css = additional_css
-        @additional_attributes = additional_attributes
-      end
-    end
-  end
-end

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

@@ -1,18 +0,0 @@
-<%= tag.svg class: "#{ring_color} #{additional_css}", style: "width: #{size}; height: #{size}", width: "24", height: "24", view_box: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" do %>
-  <style>
-    @keyframes chunk-animation {
-      to {
-        transform: rotate(360deg);
-      }
-    }
-
-    .chunk {
-      transform: rotate(0deg);
-      transform-origin: center;
-      animation: chunk-animation 0.6s cubic-bezier(.44,.15,.66,.98) forwards infinite;
-    }
-  </style>
-
-  <path fill="currentColor" d="m12 1.99976c-1.9778 0-3.91121.58649-5.5557 1.6853s-2.92621 2.6606-3.68309 4.48786c-.75688 1.82728-.95491 3.83788-.56906 5.77778.38585 1.9398 1.33826 3.7216 2.73679 5.1201 1.39852 1.3985 3.18035 2.351 5.12016 2.7368 1.9398.3859 3.9505.1878 5.7777-.569 1.8273-.7569 3.3891-2.0387 4.4879-3.6831 1.0988-1.6445 1.6853-3.5779 1.6853-5.5557 0-1.3133-.2587-2.61362-.7612-3.82688-.5025-1.21325-1.2391-2.31565-2.1677-3.24423-.9286-.92859-2.031-1.66518-3.2443-2.16773-1.2132-.50255-2.5136-.7612-3.8268-.7612zm0 18.00004c-1.5822 0-3.12896-.4692-4.44456-1.3483-1.31559-.879-2.34097-2.1285-2.94647-3.5903s-.76393-3.0703-.45525-4.6222c.30868-1.55181 1.07061-2.97728 2.18943-4.0961s2.54428-1.88074 4.09615-2.18943c1.5518-.30868 3.1604-.15025 4.6222.45525s2.7112 1.63088 3.5903 2.94647c.879 1.3156 1.3482 2.86231 1.3482 4.44461 0 2.1217-.8428 4.1565-2.3431 5.6568s-3.5352 2.3432-5.6569 2.3432z" opacity=".5"/>
-  <path className="chunk" d="m20 11.9998h2c0-1.3133-.2587-2.61362-.7612-3.82688-.5026-1.21325-1.2391-2.31565-2.1677-3.24423-.9286-.92859-2.031-1.66518-3.2443-2.16773-1.2132-.50255-2.5136-.7612-3.8268-.7612v2c2.1217 0 4.1566.84285 5.6569 2.34314 1.5002 1.50029 2.3431 3.53512 2.3431 5.6569z" fill="#ff5416"/>
-<% end %>

package/src/core/Loader/component.rb

@@ -1,19 +0,0 @@
-module AblyUi
-  module Core
-    class Loader < ViewComponent::Base
-      attr_reader :size
-      attr_reader :ring_color
-      attr_reader :additional_css
-
-      def initialize(
-        size: '1.5rem',
-        ring_color: 'text-dark-grey',
-        additional_css: ''
-      )
-        @size = size
-        @ring_color = ring_color
-        @additional_css = additional_css
-      end
-    end
-  end
-end

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

@@ -1,3 +0,0 @@
-<%= link_to logo_href, class: 'block', style: "height: 2.125rem", data: { id: data_id }, **additional_link_attrs do %>
-  <%= tag.img src: logo_url, width: "108px", alt: "Ably logo", **additional_img_attrs %>
-<% end %>

package/src/core/Logo/component.jsx

@@ -1,20 +0,0 @@
-import React from "react";
-import T from "prop-types";
-
-const Logo = ({ dataId, logoUrl, href = "/", additionalImgAttrs, additionalLinkAttrs }) => {
-  return (
-    <a href={href} data-id={dataId} className="block" style={{ height: "2.125rem" }} {...additionalLinkAttrs}>
-      <img src={logoUrl} width="108px" alt="Ably logo" {...additionalImgAttrs} />
-    </a>
-  );
-};
-
-Logo.propTypes = {
-  dataId: T.string,
-  href: T.string,
-  logoUrl: T.string,
-  additionalImgAttrs: T.object,
-  additionalLinkAttrs: T.object,
-};
-
-export default React.memo(Logo);

package/src/core/Logo/component.rb

@@ -1,31 +0,0 @@
-module AblyUi
-  module Core
-    class Logo < ViewComponent::Base
-      include AblyUi::Core::MeganavConfig
-
-      attr_reader :href,
-                  :logo_url,
-                  :data_id,
-                  :additional_img_attrs,
-                  :additional_link_attrs
-
-      def initialize(
-        href:,
-        logo_url:,
-        data_id: '',
-        additional_img_attrs: {},
-        additional_link_attrs: {}
-      )
-        @data_id = data_id
-        @href = href
-        @logo_url = logo_url
-        @additional_img_attrs = additional_img_attrs
-        @additional_link_attrs = additional_link_attrs
-      end
-
-      def logo_href
-        href.blank? ? '/' : href
-      end
-    end
-  end
-end

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

@@ -1,31 +0,0 @@
-<%= tag.nav(class: ["ui-meganav-wrapper", theme(:background_color), theme(:bar_shadow)], data: { id: "meganav" }, aria: { label: "Main" }) do %>
-  <%= notice %>
-
-  <div class="ui-meganav ui-grid-px">
-    <div className="mr-24">
-      <%= render(AblyUi::Core::Logo.new(data_id: "meganav-logo", href: logo_link, logo_url: ably_logo)) %>
-    </div>
-    <%= render(AblyUi::Core::MeganavItemsDesktop.new(theme_name: @theme_name, url_base: url_base)) %>
-
-    <% if @session_data[:signedIn] %>
-      <%= render(AblyUi::Core::MeganavItemsSignedIn.new(session_data: @session_data, theme_name: @theme_name, url_base: url_base)) %>
-    <% else %>
-      <ul class="hidden md:flex items-center">
-        <li class="ui-meganav-item">
-          <%= link_to "Contact us", abs_url("/contact"), data: { id: "meganav-link" }, class: ["ui-meganav-link", theme(:text_color)] %>
-        </li>
-        <li class="ui-meganav-item">
-          <%= link_to "Login", abs_url(login_link), data: { id: "meganav-link" }, class: ["ui-meganav-link", "mr-0", theme(:text_color)] %>
-        </li>
-        <li class="ui-meganav-item">
-          <%= render(AblyUi::Core::MeganavSearch.new(url_base: url_base)) %>
-        </li>
-        <li class="ui-meganav-item">
-          <%= link_to "Sign up free", abs_url("/sign-up"), data: { id: "meganav-sign-up-btn" }, class: ["ui-btn", "p-btn-small", theme(:button_background_color), theme(:button_text_color)] %>
-        </li>
-      </ul>
-    <% end %>
-
-    <%= render(AblyUi::Core::MeganavItemsMobile.new(session_data: @session_data, theme_name: @theme_name, login_link: login_link, url_base: url_base)) %>
-  </div>
-<% end %>

package/src/core/Meganav/component.jsx

@@ -1,123 +0,0 @@
-import React, { useEffect, useState } from "react";
-import T from "prop-types";
-
-import { connectState } from "../remote-data-store";
-import { selectSessionData } from "../remote-session-data";
-
-import Logo from "../Logo/component.jsx";
-
-import MeganavScripts from "./component.js";
-import MeganavItemsDesktop from "../MeganavItemsDesktop/component.jsx";
-import MeganavItemsSignedIn from "../MeganavItemsSignedIn/component.jsx";
-import MeganavItemsMobile from "../MeganavItemsMobile/component.jsx";
-import Notice from "../Notice/component.jsx";
-import MeganavData from "./component.json";
-import _absUrl from "../url-base";
-
-import MeganavContentProducts from "../MeganavContentProducts/component.jsx";
-import MeganavContentUseCases from "../MeganavContentUseCases/component.jsx";
-import MeganavContentCompany from "../MeganavContentCompany/component.jsx";
-import MeganavContentDevelopers from "../MeganavContentDevelopers/component.jsx";
-import MeganavSearch from "../MeganavSearch/component.jsx";
-
-const SignIn = ({ sessionState, theme, loginLink, absUrl }) => {
-  return sessionState.signedIn ? (
-    <MeganavItemsSignedIn absUrl={absUrl} sessionState={sessionState} theme={theme} />
-  ) : (
-    <ul className="hidden md:flex items-center">
-      <li className="ui-meganav-item">
-        <a href={absUrl("/contact")} className={`ui-meganav-link ${theme.textColor}`} data-id="meganav-link">
-          Contact us
-        </a>
-      </li>
-      <li className="ui-meganav-item">
-        <a href={absUrl(loginLink)} className={`ui-meganav-link mr-0 ${theme.textColor}`} data-id="meganav-link">
-          Login
-        </a>
-      </li>
-      <li className="ui-meganav-item">
-        <MeganavSearch absUrl={absUrl} />
-      </li>
-      <li className="ui-meganav-item">
-        <a href={absUrl("/sign-up")} data-id="meganav-sign-up-btn" className={`ui-btn p-btn-small ${theme.buttonBackgroundColor} ${theme.buttonTextColor}`}>
-          Sign up free
-        </a>
-      </li>
-    </ul>
-  );
-};
-
-SignIn.propTypes = {
-  sessionState: T.object,
-  paths: T.object,
-  theme: T.object,
-  loginLink: T.string,
-  absUrl: T.func,
-};
-
-const SignInPlaceholder = () => <div />;
-
-const panels = {
-  MeganavContentProducts: MeganavContentProducts,
-  MeganavContentUseCases: MeganavContentUseCases,
-  MeganavContentCompany: MeganavContentCompany,
-  MeganavContentDevelopers: MeganavContentDevelopers,
-};
-
-export default function Meganav({ paths, themeName = "white", notice, loginLink = "/login", urlBase, addSearchApiKey }) {
-  const [sessionState, setSessionState] = useState(null);
-
-  useEffect(() => {
-    // Note if state is never updated, sessionState stays null and never removes the placeholder.
-    // This makes SSR consistent (ie. we always show the placeholder)
-    connectState(selectSessionData, setSessionState);
-  }, []);
-
-  useEffect(() => {
-    const teardown = MeganavScripts({ themeName, addSearchApiKey });
-    return () => teardown();
-  }, [sessionState]);
-
-  const theme = MeganavData.themes[themeName];
-  const absUrl = (path) => _absUrl(path, urlBase);
-
-  return (
-    <nav className={`ui-meganav-wrapper ${theme.backgroundColor} ${theme.barShadow}`} data-id="meganav" aria-label="Main">
-      {notice && <Notice {...notice.props} config={notice.config} />}
-      <div className="ui-meganav ui-grid-px">
-        <div className="mr-24">
-          <Logo dataId="meganav-logo" href={urlBase} logoUrl={paths.logo} />
-        </div>
-
-        <MeganavItemsDesktop panels={panels} paths={paths} theme={theme} absUrl={absUrl} />
-
-        {/* Because we load the session state through fetch, we display a placeholder until fetch returns */}
-        {sessionState ? <SignIn sessionState={sessionState} theme={theme} loginLink={loginLink} absUrl={absUrl} /> : <SignInPlaceholder />}
-
-        <MeganavItemsMobile panels={panels} sessionState={sessionState || {}} paths={paths} theme={theme} loginLink={loginLink} absUrl={absUrl} />
-      </div>
-    </nav>
-  );
-}
-
-Meganav.propTypes = {
-  paths: T.object,
-  themeName: T.oneOf(["white", "black", "transparentToWhite"]),
-  notice: T.shape({
-    props: T.shape({
-      title: T.string,
-      bodyText: T.string,
-      buttonLink: T.string,
-      buttonLabel: T.string,
-      closeBtn: T.bool,
-    }),
-    config: T.shape({
-      cookieId: T.string,
-      noticeId: T.string,
-      collapse: T.bool,
-    }),
-  }),
-  loginLink: T.string,
-  urlBase: T.string,
-  addSearchApiKey: T.string,
-};

package/src/core/Meganav/component.rb

@@ -1,60 +0,0 @@
-require 'json'
-require_relative '../notice/notice.rb'
-
-module AblyUi
-  module Core
-    class Meganav < ViewComponent::Base
-      include MeganavConfig
-      include Util
-      include SharedAssets
-      attr_reader :options, :login_link, :logo_link, :url_base
-
-      renders_one :notice, AblyUi::Core::Notice
-
-      def initialize(
-        session_data: {},
-        theme_name: :white,
-        login_link: '/login',
-        logo_link: '',
-        url_base: AblyUi::Core::Util::DEFAULT_URL_BASE
-      )
-        @session_data = session_data
-        @theme_name = theme_name
-        @options = options
-        @login_link = login_link
-        @url_base = url_base
-        @logo_link = logo_link || url_base
-        theme_setup(theme_name)
-      end
-
-      def panels
-        [
-          {
-            label: 'Products',
-            short_label: 'Products',
-            id: 'products-panel',
-            class: 'AblyUi::Core::MeganavContentProducts'
-          },
-          {
-            label: 'Solutions',
-            short_label: 'Solutions',
-            id: 'use-cases-panel',
-            class: 'AblyUi::Core::MeganavContentUseCases'
-          },
-          {
-            label: 'Company',
-            short_label: 'Company',
-            id: 'company-panel',
-            class: 'AblyUi::Core::MeganavContentCompany'
-          },
-          {
-            label: 'Developers',
-            short_label: 'Developers',
-            id: 'developers-panel',
-            class: 'AblyUi::Core::MeganavContentDevelopers'
-          }
-        ]
-      end
-    end
-  end
-end

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

@@ -1,5 +0,0 @@
-<div class="hidden col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0" data-id="meganav-company-panel-blog-section">
-  <h3 class="ui-meganav-overline" id="meganav-company-panel-recent-blog-posts">Blog</h3>
-  <ul class="mb-8" aria-labelledby="meganav-company-panel-recent-blog-posts" data-id="meganav-company-panel-recent-blog-posts"></ul>
-  <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/blog"), text_size: 'text-p3')) do %>More from our Blog<% end %>
-</div>

package/src/core/MeganavBlogPostsList/component.rb

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