@ably/ui 11.7.1 → 12.0.0-dev.31bc8d9

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.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

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

@@ -1,53 +0,0 @@
-<ul class="hidden md:flex items-center">
-  <li class="ui-meganav-item relative">
-    <%= render(AblyUi::Core::MeganavControl.new(aria_controls: "account-panel", aria_label: "Account", theme_name: @theme_name, additional_css: "mr-0")) do %>
-      <%= account_name %>
-    <% end %>
-
-    <div class="ui-meganav-panel-account invisible" id="account-panel" data-id="meganav-panel">
-      <% if account? %>
-        <p class="ui-meganav-overline mt-16 mx-16">Your account</p>
-        <ul class="mb-16 mx-16">
-          <% @session_data[:account][:links].each do |key, link| %>
-            <li>
-              <%= link_to link[:text], link[:href], class: "ui-meganav-account-link" %>
-            </li>
-          <% end %>
-        </ul>
-      <% end %>
-
-      <p class="ui-meganav-overline mx-16"><%= preferred_email %></p>
-      <ul class="mb-8 mx-16">
-        <li>
-          <%= link_to @session_data[:mySettings][:text], @session_data[:mySettings][:href], class: "ui-meganav-account-link" %>
-        </li>
-
-        <% if access_tokens? %>
-          <li>
-            <%= link_to @session_data[:myAccessTokens][:href], class: "ui-meganav-account-link" do %>
-              <%= @session_data[:myAccessTokens][:text] %><span class="ui-version-tag">preview</span>
-            <% end %>
-          </li>
-        <% end %>
-      </ul>
-
-      <hr class="ui-meganav-hr mb-16" />
-
-      <div class="mb-16 px-16">
-        <% if @session_data[:logOut] %>
-          <%= render(AblyUi::Core::SignOutLink.new(session_data: @session_data, classes: "ui-meganav-account-link", url_base: url_base)) %>
-        <% end %>
-      </div>
-    </div>
-  </li>
-
-  <li>
-    <%= render(AblyUi::Core::MeganavSearch.new(url_base: url_base)) %>
-  </li>
-
-  <% if account? %>
-    <li>
-      <%= link_to "Dashboard", @session_data[:account][:links][:dashboard][:href], class: "ui-btn-secondary p-btn-small" %>
-    </li>
-  <% end %>
-</ul>

package/src/core/MeganavItemsSignedIn/component.rb

@@ -1,33 +0,0 @@
-module AblyUi
-  module Core
-    class MeganavItemsSignedIn < ViewComponent::Base
-      include MeganavConfig
-      include Util
-
-      attr_reader :url_base
-
-      def initialize(session_data:, theme_name:, url_base:)
-        @theme_name = theme_name
-        @session_data = session_data
-        @url_base = url_base
-      end
-
-      def account?
-        @session_data[:account].present?
-      end
-
-      # Access tokens are behind a feature flag
-      def access_tokens?
-        @session_data[:myAccessTokens].present?
-      end
-
-      def account_name
-        truncate(@session_data[:accountName], length: 20)
-      end
-
-      def preferred_email
-        truncate(@session_data[:preferredEmail], length: 20)
-      end
-    end
-  end
-end

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

@@ -1,15 +0,0 @@
-<button
-  type="button"
-  data-id="meganav-control"
-  data-control="search"
-  class="h-64 w-24 px-24 pr-48 py-20 group focus:outline-none"
-  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", additional_css: "group-hover:text-gui-hover group-focus:text-gui-focus")) %>
-</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.rb

@@ -1,13 +0,0 @@
-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/MeganavSearchAutocomplete/component.html.erb

@@ -1,6 +0,0 @@
-<div
-  class="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 class="m-16" data-id="meganav-search-autocomplete-list"></ol>
-</div>

package/src/core/MeganavSearchAutocomplete/component.rb

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

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

@@ -1,22 +0,0 @@
-<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.rb

@@ -1,13 +0,0 @@
-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

@@ -1,22 +0,0 @@
-<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("/platform"), 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.rb

@@ -1,18 +0,0 @@
-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/Notice/component.html.erb

@@ -1,16 +0,0 @@
-<%# Note the style attribute is used for entry animation %>
-<%= tag.div class: "ui-announcement #{bg_color} #{text_color}", data: { id: "ui-notice" }, style: "max-height: 0; overflow: hidden" do %>
-  <div class="ui-grid-px py-16 max-w-screen-xl mx-auto flex items-start">
-    <%= content_wrapper class: "font-light w-full pr-8 text-p3 self-center" do %>
-      <strong class="font-medium whitespace-nowrap pr-4"><%= @contents[:title] %></strong>
-      <span class="pr-4"><%= @contents[:body_text] %></span>
-      <span class="underline cursor-pointer whitespace-nowrap"><%= @contents[:button_label] %></span>
-    <% end %>
-
-    <% if close_btn? %>
-      <%= button_tag type: 'button', class: 'h-20 w-20 mt-4 ml-auto border-none bg-none self-baseline' do %>
-        <%= render(AblyUi::Core::Icon.new(name: "icon-gui-close", size: "1.25rem", color: "text-white")) %>
-      <% end %>
-    <% end %>
-  </div>
-<% end %>

package/src/core/Notice/component.rb

@@ -1,29 +0,0 @@
-module AblyUi
-  module Core
-    class Notice < ViewComponent::Base
-      def initialize(contents)
-        @contents = contents
-      end
-
-      def close_btn?
-        @contents[:close_btn]
-      end
-
-      def bg_color
-        @contents[:bg_color] || 'bg-gradient-active-orange'
-      end
-
-      def text_color
-        @contents[:text_color] || 'text-white'
-      end
-
-      def content_wrapper(*args, &block)
-        if @contents[:button_link].present?
-          link_to(@contents[:button_link], *args, &block)
-        else
-          tag.div(*args, &block)
-        end
-      end
-    end
-  end
-end

package/src/core/Showcase/component.css

@@ -1,30 +0,0 @@
-@layer components {
-  .ui-showcase-overflow-container {
-    -ms-overflow-style: none; /* Internet Explorer 10+ */
-    scrollbar-width: none; /* Firefox */
-
-    @apply overflow-x-auto;
-  }
-
-  .ui-showcase-overflow-container::-webkit-scrollbar {
-    @apply hidden; /* Safari and Chrome */
-  }
-
-  .ui-showcase-logo-wrapper {
-    @apply flex bg-white;
-  }
-
-  .ui-showcase-logo {
-    min-width: var(--ui-showcase-client-logo-min-width);
-    @apply w-full py-16 px-12 flex items-center justify-center;
-  }
-
-  .ui-showcase-logo-img {
-    max-width: var(--ui-showcase-client-logo-max-width);
-    @apply w-full;
-  }
-
-  .ui-showcase-index-bar {
-    @apply bg-mid-grey;
-  }
-}

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

@@ -1,76 +0,0 @@
-<section
-  aria-roledescription="carousel"
-  aria-label="Ably customers showcase"
-  aria-live="off"
-  class="font-sans antialiased rounded-sm shadow-container-subtle"
-  data-id="showcase"
->
-  <div class="ui-showcase-overflow-container">
-    <ol class="ui-showcase-logo-wrapper" data-id="showcase-controls">
-      <% companies_data.each_with_index do |company, index| %>
-        <li class="ui-showcase-logo">
-          <%= tag.button class: ['focus:outline-gui-focus', 'border-none', 'p-0', 'transition-filter'],
-                         type: 'button',
-                         data: { id: 'showcase-control' },
-                         aria: { controls: @random_id } do %>
-            <%= image_tag company[:logo], alt: "#{company[:name]} logo", class: ['ui-showcase-logo-img', index === 0 ? 'filter-none' : 'filter-grayscale', 'hover:filter-none'], srcset: [["#{company[:logo2x]}", "2x"]] %>
-          <% end %>
-        </li>
-      <% end %>
-    </ol>
-
-    <div class="ui-showcase-index-bar">
-      <div data-id="showcase-index-bar" class="transform transition-transform w-1/<%= companies_data.size %> h-4 bg-active-orange relative"></div>
-    </div>
-  </div>
-
-  <div class="overflow-x-hidden">
-    <ol class="flex transform transition-transform" data-id="showcase-slides" id="<%= @random_id %>">
-      <% companies_data.each_with_index do |company, index| %>
-        <li
-          class="w-full flex-shrink-0 p-24 sm:p-32 xl:p-64 bg-white"
-          role="group"
-          aria-roledescription="slide"
-          aria-label="<%= index + 1 %> of <%= companies_data.size %>"
-        >
-          <% if company[:layout] == "quotes" %>
-            <%= render(AblyUi::Core::Icon.new(name: "quote", size: "1.25rem", color: "text-cool-black")) %>
-
-            <p class="text-quote font-light mb-24"><%= company[:quote] %></p>
-
-            <div class="flex items-center">
-              <div class="flex-shrink-0 flex-grow-0 mr-16 overflow-hidden rounded-full flex align-center justify-center w-48 h-48">
-                <%= image_tag company[:author][:thumbnail], alt: "Picture of #{company[:author][:name]}, #{company[:author][:title]}", class: "w-48 h-48 filter-grayscale" %>
-              </div>
-              <div>
-                <p class="text-p2 font-medium"><%= company[:author][:name] %></p>
-                <p class="text-p3 font-light"><%= company[:author][:title] %></p>
-              </div>
-            </div>
-          <% end %>
-
-          <% if company[:layout] == "casestudies" %>
-            <div class="flex justify-evenly text-cool-black full-width flex-col md:flex-row" data-id="showcase-casestudy">
-              <% company[:columns].each_with_index do |col, n| %>
-                <% if company[:columns].last == col %>
-                  <div class="flex-1 mt-40 sm:mt-0 <%= col[:classname] %>" data-id="casestudy-column">
-                    <p class="text-h4 pb-24"><%= col[:heading] %></p>
-                    <p class="text-p1 font-light"><%= col[:text] %></p>
-                    <%- if col[:button] %>
-                      <a class="ui-btn self-start p-btn mt-24" href="<%= col[:button][:href] %>"><%= col[:button][:label] %></a>
-                    <% end %>
-                  </div>
-                <% else %>
-                  <div class="flex-1 mt-40 sm:mt-0 mr-24 sm:mr-32 xl:mr-64 <%= col[:classname] %>" data-id="casestudy-column">
-                    <p class="text-title-xl font-extra-large"><%= col[:heading] %></p>
-                    <p class="text-p1 font-light mb-0 sm:mb-32"><%= col[:text] %></p>
-                  </div>
-                <% end %>
-              <% end %>
-            </div>
-          <% end %>
-        </li>
-      <% end %>
-    </ol>
-  </div>
-</section>

package/src/core/Showcase/component.js

@@ -1,180 +0,0 @@
-import { queryId, queryIdAll } from "../dom-query";
-import { remsToPixelValue } from "../css";
-
-import "./component.css";
-
-const SLIDE_SHOW_INTERVAL = 5000;
-
-const updateLogoOpacity = (logos, currentIndex) => {
-  const visible = ["filter-grayscale", "filter-none"];
-  const opaque = [...visible].reverse();
-  logos.forEach((logo, i) => {
-    logo.classList.replace(...(i === currentIndex ? visible : opaque));
-  });
-};
-
-const translateX = (el, currentIndex, direction = 1) => {
-  const percent = currentIndex * 100 * direction;
-  el.style.transform = `translateX(${percent}%)`;
-};
-
-const moveControlsContainer = (controlsContainer, currentIndex) => {
-  const { parentNode, children } = controlsContainer;
-  const parentCenter = parentNode.clientWidth / 2;
-  const countChildren = children.length;
-  const widthChildren = Array.from(children)
-    .map((el) => el.clientWidth)
-    .reduce((a, c) => a + c);
-
-  const width = widthChildren / countChildren;
-  const firstOrLast = !currentIndex || !(countChildren - currentIndex - 1);
-  const offsetLeft = !firstOrLast ? parentCenter - width / 2 : 0;
-  const left = currentIndex * width - (offsetLeft >> 0);
-
-  parentNode.scrollTo({ left, behavior: "smooth" });
-};
-
-const propertyValue = (string) => {
-  return window
-    .getComputedStyle(document.documentElement)
-    .getPropertyValue(string);
-};
-
-const mobileBreakpoint = (pixelWidth) => {
-  if (typeof window === "undefined") return false;
-
-  // Margin for small breakpoint, but could be different in practice
-  const estimatedMargin = 64;
-  const breakpointEstimate = `${pixelWidth + estimatedMargin}px`;
-
-  return !window.matchMedia(`(min-width: ${breakpointEstimate})`).matches;
-};
-
-export default (node, enableSlideshow) => {
-  const container = node || queryId("showcase");
-  const controls = Array.from(queryIdAll("showcase-control", container));
-  const logos = controls.map((control) => control.querySelector("img"));
-  const controlsContainer = queryId("showcase-controls", container);
-  const indexBar = queryId("showcase-index-bar", container);
-  const slides = queryId("showcase-slides", container);
-  const slideCount = slides.children.length;
-
-  const logoWidth = propertyValue("--ui-showcase-client-logo-min-width");
-  const pixelWidth = remsToPixelValue(logoWidth) * slideCount;
-
-  // dynamically adjust container width
-  [".ui-showcase-logo-wrapper", ".ui-showcase-index-bar"].forEach((s) => {
-    const el = container.querySelector(s);
-    const minWidth = `${pixelWidth}px`;
-    el.style.minWidth = minWidth;
-  });
-
-  let currentIndex = 0;
-  let mouseover = false;
-  let updateSlideTimeoutId;
-
-  const updateSlide = (index) => {
-    translateX(slides, index, -1);
-    translateX(indexBar, index, 1);
-    updateLogoOpacity(logos, index);
-
-    if (mobileBreakpoint(pixelWidth)) {
-      moveControlsContainer(controlsContainer, index);
-    }
-  };
-
-  const scheduleSlideMove = () =>
-    (updateSlideTimeoutId = setTimeout(() => {
-      if (mouseover) return;
-      if (mobileBreakpoint(pixelWidth)) return;
-
-      currentIndex = (currentIndex + 1) % controls.length;
-
-      updateSlide(currentIndex);
-      scheduleSlideMove();
-    }, SLIDE_SHOW_INTERVAL));
-
-  const logoClick = () => {
-    const clickHandler = (index) => () => {
-      currentIndex = index;
-      updateSlide(currentIndex);
-    };
-
-    const handlers = controls.map((control, index) => {
-      const handler = clickHandler(index);
-      control.addEventListener("click", handler);
-      return handler;
-    });
-
-    return () => {
-      handlers.forEach((handler, i) =>
-        controls[i].removeEventListener("click", handler)
-      );
-    };
-  };
-
-  const pointerOverContainer = () => {
-    const handler = () => {
-      mouseover = true;
-      clearTimeout(updateSlideTimeoutId);
-    };
-    container.addEventListener("mouseover", handler);
-    return () => container.removeEventListener("mouseover", handler);
-  };
-
-  const pointerLeftContainer = () => {
-    const handler = () => {
-      mouseover = false;
-      scheduleSlideMove();
-    };
-    container.addEventListener("mouseleave", handler);
-    return () => container.removeEventListener("mouseleave", handler);
-  };
-
-  const viewportResized = () => {
-    const handler = () => {
-      clearTimeout(updateSlideTimeoutId);
-      scheduleSlideMove();
-    };
-    document.addEventListener("resize", handler);
-    return () => document.removeEventListener("resize", handler);
-  };
-
-  const scrollOverContainer = () => {
-    const handler = (event) => event.preventDefault();
-    controlsContainer.parentNode.addEventListener("wheel", handler);
-    return () =>
-      controlsContainer.parentNode.removeEventListener("wheel", handler);
-  };
-
-  const logoClickTeardown = logoClick();
-  const scrollOverContainerTeardown = scrollOverContainer();
-
-  const slideshowInit = () => {
-    if (enableSlideshow) {
-      scheduleSlideMove();
-      container.setAttribute("aria-live", "polite");
-
-      const teardowns = [
-        pointerOverContainer(),
-        pointerLeftContainer(),
-        viewportResized(),
-      ];
-      return () => teardowns.forEach((t) => t());
-    } else {
-      return () => {};
-    }
-  };
-
-  const slideshowTeardown = slideshowInit();
-
-  return function teardown() {
-    // Restore initial position
-    updateSlide(0);
-    clearTimeout(updateSlideTimeoutId);
-
-    logoClickTeardown();
-    slideshowTeardown();
-    scrollOverContainerTeardown();
-  };
-};