@ably/ui 13.3.0 → 14.0.0-dev.58ef698

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

@@ -1,33 +0,0 @@
-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"
-        data-control="search"
-        className="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`}
-      >
-        <Icon name="icon-gui-search" color="text-cool-black" size="1.5rem" additionalCSS="group-hover:text-gui-hover group-focus:text-gui-focus" />
-      </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

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

@@ -1,14 +0,0 @@
-import React from "react";
-
-const MeganavSearchAutocomplete = () => {
-  return (
-    <div
-      className="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 className="m-16" data-id="meganav-search-autocomplete-list"></ol>
-    </div>
-  );
-};
-
-export default MeganavSearchAutocomplete;

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

@@ -1,39 +0,0 @@
-import React from "react";
-import T from "prop-types";
-
-import Icon from "../Icon/component.jsx";
-import MeganavSearchSuggestions from "../MeganavSearchSuggestions/component.jsx";
-import MeganavSearchAutocomplete from "../MeganavSearchAutocomplete/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" autoComplete="off" data-id="meganav-search-input" />
-
-              <MeganavSearchAutocomplete />
-            </div>
-
-            <button type="submit" className="ui-btn-secondary flex-shrink-0 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

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

@@ -1,49 +0,0 @@
-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-hidden">
-        <ul className="flex transition-transform">
-          <li className="py-12 pr-8 flex-shrink-0">
-            <a href={absUrl("/docs/how-ably-works")} className="ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus">
-              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 hover:text-gui-hover active:text-gui-active focus:text-gui-focus">
-              Quickstart guide
-            </a>
-          </li>
-          <li className="py-12 px-8 flex-shrink-0">
-            <a href={absUrl("/docs/core-features/pubsub")} className="ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus">
-              Publish/Subscribe Messaging
-            </a>
-          </li>
-          <li className="py-12 pl-8 flex-shrink-0">
-            <a href={absUrl("/platform")} className="ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus">
-              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

@@ -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: "w-full pr-8 ui-text-p3 self-center" do %>
-      <strong class="font-bold 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-cool-black")) %>
-      <% end %>
-    <% end %>
-  </div>
-<% end %>

package/src/core/Notice/component.jsx

@@ -1,71 +0,0 @@
-import React, { useEffect } from "react";
-import T from "prop-types";
-
-const contentWrapperClasses = "w-full pr-8 ui-text-p3 self-center";
-
-import NoticeScripts from "./component.js";
-import Icon from "../Icon/component.jsx";
-
-const ContentWrapper = ({ buttonLink, children }) =>
-  buttonLink ? (
-    <a href={buttonLink} className={contentWrapperClasses}>
-      {children}
-    </a>
-  ) : (
-    <div className={contentWrapperClasses}>{children}</div>
-  );
-
-ContentWrapper.propTypes = {
-  buttonLink: T.string,
-  children: T.node,
-};
-
-const Notice = ({ buttonLink, buttonLabel, bodyText, title, config, closeBtn, bgColor = "bg-gradient-active-orange", textColor = "text-white" }) => {
-  useEffect(() => {
-    NoticeScripts({
-      bannerContainer: document.querySelector('[data-id="ui-notice"]'),
-      cookieId: config.cookieId,
-      noticeId: config.noticeId,
-      options: {
-        collapse: config.collapse,
-      },
-    });
-  }, []);
-
-  const wrapperClasses = ["ui-announcement", bgColor, textColor].join(" ");
-
-  return (
-    <div className={wrapperClasses} data-id="ui-notice" style={{ maxHeight: 0, overflow: "hidden" }}>
-      <div className="ui-grid-px py-16 max-w-screen-xl mx-auto flex items-start">
-        <ContentWrapper buttonLink={buttonLink}>
-          <strong className="font-bold whitespace-nowrap pr-4">{title}</strong>
-          <span className="pr-4">{bodyText}</span>
-          {buttonLabel && <span className="underline cursor-pointer whitespace-nowrap">{buttonLabel}</span>}
-        </ContentWrapper>
-
-        {closeBtn && (
-          <button type="button" className="ml-auto h-20 w-20 border-none bg-none self-baseline">
-            <Icon name="icon-gui-close" size="1.25rem" color="text-cool-black" />
-          </button>
-        )}
-      </div>
-    </div>
-  );
-};
-
-Notice.propTypes = {
-  buttonLink: T.string,
-  buttonLabel: T.string,
-  bodyText: T.string,
-  title: T.string,
-  closeBtn: T.bool,
-  config: T.shape({
-    collapse: T.bool,
-    noticeId: T.string,
-    cookieId: T.string,
-  }),
-  bgColor: T.string,
-  textColor: T.string,
-};
-
-export default Notice;

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 ? 'grayscale-0' : 'grayscale', 'hover:grayscale-0'], 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="ui-text-quote 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 grayscale" %>
-              </div>
-              <div>
-                <p class="ui-text-p2"><%= company[:author][:name] %></p>
-                <p class="ui-text-p3"><%= 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="ui-text-h4 pb-24"><%= col[:heading] %></p>
-                    <p class="ui-text-p1"><%= 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="ui-text-title-xl"><%= col[:heading] %></p>
-                    <p class="ui-text-p1 mb-0 sm:mb-32"><%= col[:text] %></p>
-                  </div>
-                <% end %>
-              <% end %>
-            </div>
-          <% end %>
-        </li>
-      <% end %>
-    </ol>
-  </div>
-</section>